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

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