README.md

storybook-addon-matrix

Storybook addon for rendering components with a matrix of props.

npm i storybook-addon-matrix

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

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