GENESIS Legacy Design System

Overview

GENESIS Legacy is a downgraded version of the GENESIS Design System that maintains compatibility with React 17 and Ant Design 4. This version is specifically designed for applications that cannot upgrade to React 18 or Ant Design 5 due to compatibility constraints.

Dependencies

GENESIS Legacy is built with:

• Antd v4.24.0
• Styled Components v5.3.0
• Typescript v4.9.5
• React v17

Installation

npm install @gobolt/genesis-legacy

Usage

The GenesisProvider must be included within your application as it supplies the Genesis Theme:

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

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

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

Migration Path to React 18 and Ant Design 5

Once your app is ready to migrate, the only change will be to replace this @gobolt/genesis-legacy package with the latest package from @gobolt/genesis

If you only upgrade to React and not also upgrade Ant, then it is best to stick with this legacy version since it will still be compatible.

Library Development

# Install dependencies
npm install --force

# Start development server
npm run storybook

To scaffold a new component:

npm run generate RadioGroup

Testing

npm test

Tests are automatically run on push to Github using husky.

Publishing

This project uses rollup for building and changesets for version management:

npx changeset
npx changeset version
npm publish

Storybook

The component documentation is available in our Storybook:

# Start Storybook locally
npm start

# Build Storybook
npm run build-storybook

For Aiur!