storybook-system

Design system using storybook and Rollupjs

1. Clone the application
2. Install the packages

npm install

3. To Start the storybook

npm run storybook

4. Make the changes and export them in index.js
5. change the application version in package.json file
6. Make the build using rollup.js the bundler that helps to make the minified version of the application and distribute the reactjs application as a distributable package

npm run build-lib

7. Upload the build to git

npm --allow-same-version version 0.1.6 -m "Bump version to: %s [skip ci]"

8. Login with npm in your command prompt

npm add user

9. Add the GitHub token and npm token in the .env file
10. publish the package

npm publish

How to initialize

Why Rollup js

How to use the package that is published on npm

1. install the package.

npm install storybook-system

2. import the package in the js file

import { Button } from 'storybook-system'

3. You can customise the component with the custom css

Components usage

import {componentName} from 'storybook-system/dist'

Button

• variant (String)
  • primary1 (default)
  • primary2
  • primary3
  • secondary1
  • secondary2
  • secondary3
  • Black1
  • Black2
  • Black3
  • smallSecondary1
  • smallSecondary2
  • smallSecondary3
• icon (Image object)

Calendar

• onChange (method to receive the value changed)
• Will be adding props to disable the dates.

Checkbox

• label (String)
• Icon (Image object (png, svg, jpg etc))
• onChange (function)

Dropdown

• onChange (function)

• placeholder (String)

• multiSelect (Boolean True/False) (False by default)

• Items (should be a array of key value pairs as following)

  [
    {
      value: 'One',
      label: 'One'
    },
    {
      value: 'Two',
      label: 'Two'
    },
    {
      value: 'Three',
      label: 'Three'
    },
    {
      value: 'Four',
      label: 'Four'
    },
    {
      value: 'Five',
      label: 'Five'
    }
  ]
  

Homepage nav

• title (String)
• icon (Image object)
• label (String)
• variant (String)
  • primary (default)
  • secondary

Infopill

• text (String)
• variant (String)
  • primary (default)
  • color
  • default
• icon (image object)

InfoContainer

• text (String)
• icon (image object)

OrderContainer

• variant
  • progress
  • scheduled
  • ready
• header (String) (required for all three variants)
• pickupAddress (String) (required for all three variants)
• Progress (String) (required for all three variants)
• delivery (String) (Not required for scheduled)
• deliveryInfo (String) (Required only for scheduled variant)

SideMenuItem

• label (String)
• variant (String)
  • filled
  • normal
  • disabled