GumGum Chakra Design System

The GumGum Chakra Design System is a reusable component library built on top of Chakra UI. It provides TypeScript-based, pre-styled components aligned with our brand identity, offering seamless integration while supporting both global and local customization.

Table of Contents

1. Overview
2. Installation
3. Usage
   • Global Integration
   • Local Overrides
4. Development Workflow
   • Folder Structure
   • Previewing Components
   • Building the Library
5. Publishing to npm
6. Contributing
7. License

Overview

The GumGum Chakra Design System simplifies UI development by offering:

• A branded, consistent design language.
• TypeScript typings for enhanced developer experience.
• Pre-configured Chakra UI components with default styles and theming.
• Support for local and global overrides.

Installation

Install the design system as an npm dependency:

npm install @dmckenna/gumgum-chakra

Usage

Global Integration

1. Wrap your application in the ChakraProvider using the GumGum theme:

   import React from "react";
   import { ChakraProvider, theme } from "@dmckenna/gumgum-chakra";
   
   function App() {
     return (
       <ChakraProvider theme={theme}>
         {/* Your application components */}
       </ChakraProvider>
     );
   }
   
   export default App;

2. Use components directly from the design system:

   import { Button, Input } from "@dmckenna/gumgum-chakra";
   
   function Example() {
     return (
       <div>
         <Button colorScheme="primary">Click Me</Button>
         <Input placeholder="Type here" />
       </div>
     );
   }
   
   export default Example;

Local Overrides

Customize styles for individual components directly using Chakra’s style props:

import { Button } from "@dmckenna/gumgum-chakra";

function Example() {
  return (
    <Button borderRadius="0px" colorScheme="teal">
      Custom Button
    </Button>
  );
}

Global Overrides

Override styles globally by extending the GumGum theme:

import { extendTheme, ChakraProvider, theme } from "@dmckenna/gumgum-chakra";

const customTheme = extendTheme({
  ...gumGumTheme,
  components: {
    Button: {
      baseStyle: {
        borderRadius: "0px",
      },
    },
  },
});

function App() {
  return (
    <ChakraProvider theme={customTheme}>
      <Button>Globally Customized Button</Button>
    </ChakraProvider>
  );
}

export default App;

Development Workflow

Folder Structure

The project is organized as follows:

gumgum-chakra/
├── dist/                # Build output
├── src/
│   ├── components/      # Component definitions
│   │   ├── Button.tsx   # Example: Customized Button
│   │   └── ...
│   ├── theme/           # Centralized theme configuration
│   │   ├── index.ts     # Exports the GumGum theme
│   │   ├── foundations/ # Design tokens (colors, typography, spacing)
│   │   ├── components/  # Component-specific overrides
│   │   └── globalStyles.ts
│   └── index.ts         # Re-exports components and theme
├── tsconfig.json        # TypeScript configuration
├── package.json
├── readme.md
├── vite.lib.config.ts   # Build configuration
├── vite.preview.config.ts # Preview server configuration
└── ...

Previewing Components

1. Start the preview server to visualize components in the design system:

   npm run start:preview

2. Access the preview app at http://localhost:3001.

Building the Library

1. Run the build command to generate the dist/ directory:

   npm run build

2. Verify that the build output includes bundled files like gumgum-chakra.umd.js and gumgum-chakra.es.js.

Publishing to npm

To publish a new version of the design system:

1. Increment the version:

   npm version [patch|minor|major]

2. Build the library:

   npm run build

3. Publish the package:

   npm publish --access public

4. Verify the published version:

   npm info @dmckenna/gumgum-chakra

Contributing

1. Clone the repository:

   git clone https://github.com/GumGum-Inc/gumgum-chakra.git
   cd gumgum-chakra

2. Install dependencies:

   npm install

3. Start the preview server:

   npm run dev

4. Submit a pull request for any proposed changes.

License

This project is licensed under the MIT License.