GENESIS Design System

Storybook hosted on Google Cloud

The GENESIS design system standardizes our colors, fonts, and sizing tokens across all our apps.

It unifies frontend app development around these core libraries:

• Antd v5
• Styled Components v5
• Typescript v5
• React v18

📦 Development

npm install
npm start

To scaffold a new component, run npm run generate and add the component name in PascalCase

example:

npm run generate RadioGroup

🔨 Usage

Install the GENESIS library

npm install @gobolt/genesis

The GenesisProvider must included within the application as it supplies the Genesis Theme.

import { Button, GenesisProvider } from '@gobolt/genesis;

const Demo = () = {

    const onClick = (value) => {
        console.log("Genesis button clicked with value: ", value);
    }

    return (
        <GenesisProvider>
            <Button onClick={onClick}>Ship</Button>
        </GenesisProvider>
    )
 };

The library exports both the components and their types which are documented in our storybook.

🧪 Testing

npm test

husky has been configured to automatically run the tests on push to Github and will enforce that all tests pass.

🚀 Publishing

This project uses rollup to create the package and changesets to manage it's versions. We only need to run changesets when we're ready to release and publish the library.

npx changeset
npx changeset version
npm publish

📙 Storybook Deployment to Google Cloud

just deploy

See the .justfile which simplifies this Storybook GCP script on Notion.

requires: just

brew install just

Test the build

If you want to test the build before deploying...

rm -rf storybook-static
npm build-storybook
python3 -m http.server 6006 -d storybook-static