Skip to content

Storybook addon for rendering components with a matrix of props

License

Notifications You must be signed in to change notification settings

tomoya/storybook-addon-matrix

Folders and files

NameName
Last commit message
Last commit date
May 23, 2020
May 23, 2020
Jul 17, 2020
May 4, 2020
May 23, 2020
May 3, 2020
May 4, 2020
May 3, 2020
May 5, 2020
May 2, 2020
May 23, 2020
May 4, 2020
Jun 21, 2020
May 10, 2020
May 3, 2020
May 4, 2020
Jun 21, 2020

Repository files navigation

storybook-addon-matrix

Storybook addon for rendering components with a matrix of props.

stars Build Status Downloads Version size MIT License

npm i storybook-addon-matrix

View demo: https://storybook-addon-matrix.now.sh/

storybook-addon-matrix image

Usage

Globally

// .storybook/preview.js
import { addDecorator } from '@storybook/react';
import { withMatrix } from 'storybook-addon-matrix';

addDecorator(withMatrix);

// Your.stories.tsx
import * as React from 'react';
import { Box } from './Box';

export default {
  title: 'Box',
  component: Box,            // Must be present
  parameters: {
    matrix: {                // Parameter name is matrix
      pattern: {             // Let you write your matrix pattern
        bg: ['white', ...],  // Format is key: [value1, value2, ...]
        width: [undefined, ...],
      },
      // backgroundColor: 'rgba(0,0,0,0.7)', // Optional: If you want to change backgournd color
      // showOriginal: true // Optional: If you want to show original component set to true
    },
  },
};

export const Basic = () => <Box>TEXT</Box>;

Or individual

// Your.stories.tsx
import * as React from 'react';
import { withMatrix } from 'storybook-addon-matrix';
import { Box } from './Box';

export default {
  title: 'Box',
  component: Box,
  decorators: [withMatrix],
  parameters: {
    matrix: {
      pattern: {
        bg: ['white', 'blue', 'red', 'yellow'],
        width: [undefined, '50%', 256],
        p: [1, 2, 3],
      },
    },
  },
};

Do you want to more info? We have an example! Please let you try it.

$ git clone https://github.com/tomoya/storybook-addon-matrix.git
$ cd ./storybook-addon-matrix/example
$ yarn install
$ yarn start

Contributing

  1. Fork it (https://github.com/tomoya/storybook-addon-matrix/fork)
  2. Create your feature branch (git checkout -b feature/fooBar)
  3. Commit your changes (git commit -am 'Add some fooBar')
  4. Push to the branch (git push origin feature/fooBar)
  5. Create a new Pull Request

ToDO

  • Hide original componen
  • Global options to use addParameters()
    • Default backgournd color
    • Show original component
    • Number of columns
  • Theme compatibility
  • Show source
  • Release automation
  • Changelog

License

MIT License