@portholeship/genesis v0.0.7

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

This library is intended to be universally imported into both React & React-Native apps.

📦 Development

pnpm install
pnpm start

To scaffold a new component, run pnpm generate and follow the prompts

🔨 Usage

Install the GENESIS library

pnpm install @second-closet/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

pnpm 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