Adazolhub

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

Then, run the storybook:

npm run storybook
# or
yarn storybook

Open http://localhost:6006 with your browser to see the result.

Learn More

Use Next Js framework with Storybook for designing components in development environment

with Figma Design integrated on Storybook

Guide on installing the storybook and integrating Figma to Storybook

Install storybook package

npx -p @storybook/cli sb init

Install storybook can be found in https://storybook.js.org/addons

yarn add -D storybook-addon-designs

adding the code below under .storybook/main.js

  addons: [
    'storybook-addon-designs'
  ],

adding the parameters in storybook components (sample code below)

export default {
    title: 'ButtonTest',
    component: ButtonTest,
    argTypes: {
      backgroundColor: { control: 'color' },
      color: { control: 'color'}
    },
    decorators: [withDesign],
    parameters: {
      design: {
        type: 'figma',
        url: 'https://www.figma.com/file/3FV5TRPuacbMyhSWjMtNd2/Blog-posts?node-id=29%3A22'
     },
    }
  };

added card design | May 23, 2021

Contributors

• Daniel Lozada