{"id":18774357,"url":"https://github.com/tomoya/storybook-addon-matrix","last_synced_at":"2025-05-12T14:29:26.584Z","repository":{"id":37023643,"uuid":"260937798","full_name":"tomoya/storybook-addon-matrix","owner":"tomoya","description":"Storybook addon for rendering components with a matrix of props","archived":false,"fork":false,"pushed_at":"2025-04-30T16:43:49.000Z","size":962,"stargazers_count":32,"open_issues_count":12,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-12T14:29:18.157Z","etag":null,"topics":["react","storybook","storybook-addon"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tomoya.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-03T14:10:43.000Z","updated_at":"2022-01-22T23:47:38.000Z","dependencies_parsed_at":"2022-08-19T01:41:44.054Z","dependency_job_id":"8907d799-8288-4413-93b7-734759f4360c","html_url":"https://github.com/tomoya/storybook-addon-matrix","commit_stats":{"total_commits":109,"total_committers":2,"mean_commits":54.5,"dds":"0.13761467889908252","last_synced_commit":"0f11bf9d05c3f6cea144f6ddf35978fdfcbe34c4"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomoya%2Fstorybook-addon-matrix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomoya%2Fstorybook-addon-matrix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomoya%2Fstorybook-addon-matrix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomoya%2Fstorybook-addon-matrix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomoya","download_url":"https://codeload.github.com/tomoya/storybook-addon-matrix/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253754741,"owners_count":21958902,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","storybook","storybook-addon"],"created_at":"2024-11-07T19:38:04.431Z","updated_at":"2025-05-12T14:29:26.564Z","avatar_url":"https://github.com/tomoya.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# storybook-addon-matrix\n\nStorybook addon for rendering components with a matrix of props.\n\n[![stars][]][github]\n![Build Status][actions]\n[![Downloads][]][npm]\n[![Version][]][npm]\n![size][]\n![MIT License][license]\n\n[version]: https://flat.badgen.net/npm/v/storybook-addon-matrix\n[downloads]: https://flat.badgen.net/npm/dm/storybook-addon-matrix\n[license]: https://flat.badgen.net/badge/license/MIT/blue\n[stars]: https://flat.badgen.net/github/stars/tomoya/storybook-addon-matrix\n[size]: https://flat.badgen.net/bundlephobia/minzip/storybook-addon-matrix\n[npm]: https://npmjs.com/package/storybook-addon-matrix\n[github]: https://github.com/tomoya/storybook-addon-matrix\n[actions]: https://flat.badgen.net/github/checks/tomoya/storybook-addon-matrix\n\n```sh\nnpm i storybook-addon-matrix\n```\n\nView demo: https://storybook-addon-matrix.now.sh/\n\n![storybook-addon-matrix image](./assets/screenshot.png)\n\n## Usage\n\nGlobally\n\n```js\n// .storybook/preview.js\nimport { addDecorator } from '@storybook/react';\nimport { withMatrix } from 'storybook-addon-matrix';\n\naddDecorator(withMatrix);\n\n// Your.stories.tsx\nimport * as React from 'react';\nimport { Box } from './Box';\n\nexport default {\n  title: 'Box',\n  component: Box,            // Must be present\n  parameters: {\n    matrix: {                // Parameter name is matrix\n      pattern: {             // Let you write your matrix pattern\n        bg: ['white', ...],  // Format is key: [value1, value2, ...]\n        width: [undefined, ...],\n      },\n      // backgroundColor: 'rgba(0,0,0,0.7)', // Optional: If you want to change backgournd color\n      // showOriginal: true // Optional: If you want to show original component set to true\n    },\n  },\n};\n\nexport const Basic = () =\u003e \u003cBox\u003eTEXT\u003c/Box\u003e;\n```\n\nOr individual\n\n```js\n// Your.stories.tsx\nimport * as React from 'react';\nimport { withMatrix } from 'storybook-addon-matrix';\nimport { Box } from './Box';\n\nexport default {\n  title: 'Box',\n  component: Box,\n  decorators: [withMatrix],\n  parameters: {\n    matrix: {\n      pattern: {\n        bg: ['white', 'blue', 'red', 'yellow'],\n        width: [undefined, '50%', 256],\n        p: [1, 2, 3],\n      },\n    },\n  },\n};\n```\n\nDo you want to more info? We have an [example](https://github.com/tomoya/storybook-addon-matrix/tree/master/example)! Please let you try it.\n\n```sh\n$ git clone https://github.com/tomoya/storybook-addon-matrix.git\n$ cd ./storybook-addon-matrix/example\n$ yarn install\n$ yarn start\n```\n\n## Contributing\n\n1. Fork it (\u003chttps://github.com/tomoya/storybook-addon-matrix/fork\u003e)\n2. Create your feature branch (`git checkout -b feature/fooBar`)\n3. Commit your changes (`git commit -am 'Add some fooBar'`)\n4. Push to the branch (`git push origin feature/fooBar`)\n5. Create a new Pull Request\n\n## ToDO\n\n- [x] Hide original componen\n- [x] Global options to use `addParameters()`\n  - [x] Default backgournd color\n  - [x] Show original component\n  - [ ] Number of columns\n- [ ] Theme compatibility\n- [ ] Show source\n- [ ] Release automation\n- [ ] Changelog\n\n## License\n\n[MIT License](https://github.com/tomoya/storybook-addon-matrix/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomoya%2Fstorybook-addon-matrix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomoya%2Fstorybook-addon-matrix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomoya%2Fstorybook-addon-matrix/lists"}