YouBIM – Design System (Storybook 7)

Fist steps

npm install
npm run storybook 

Runs the Desing system webapp in development mode. Open http://localhost:9009 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

Build for Production

npm run build-storybook

Builds the app for production to the specified build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

Your app is ready to be deployed!

npm run build-storybook-docs

Builds the docs to the specified docs folder. We can deploy the docs site to GitHub pages or configure a CI-CD pipeline to deploy the docs site on every commit.

npm run test

Currntly not working, please fix.

Launches the test runner in the interactive watch mode.

Addons

• Code formatting with prettier
• Storybook Actions
• Storybook StorySource
• Storybook Knobs
• Storybook Docs
• Icons from Styled-Icons

How to write stories

// Button.stories.js
import Button from '../components/Button';

export default {
    title: 'Button',
    component: Button,
    parameters: {
        docs: {
            description: {
                component: 'Primary CTA. Use `variant` and `color` for styling.',
            },
        },
    },
};

export const Primary = {
    args: {
        variant: 'primary',
        children: 'Primary'
    },
};

export default {
  title: 'Button',
  component: Button,
};

// Button.mdx

import { Meta } from '@storybook/blocks';
import * as ButtonStories from './Button.stories';

<Meta of={ButtonStories} />

Next steps

defaultProps (React)

defaultProps is deprecated, migrate to default values while destructuring:

// Before
function Button({ color, size }) {}
Button.defaultProps = { color: 'primary', size: 'md' };

// After
function Button({ color = 'primary', size = 'md' }) {}