{"id":26579850,"url":"https://github.com/mondaycom/storybook-addon-playground","last_synced_at":"2025-03-23T06:29:15.849Z","repository":{"id":211876585,"uuid":"727604078","full_name":"mondaycom/storybook-addon-playground","owner":"mondaycom","description":"Storybook plugin to enable a playground","archived":false,"fork":false,"pushed_at":"2024-04-03T11:39:55.000Z","size":1024,"stargazers_count":3,"open_issues_count":11,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2024-04-04T11:46:14.149Z","etag":null,"topics":[],"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/mondaycom.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2023-12-05T07:45:43.000Z","updated_at":"2024-04-15T11:42:03.606Z","dependencies_parsed_at":"2023-12-11T11:44:45.915Z","dependency_job_id":"86ad5d13-4dc1-4179-831b-e25b57868fcf","html_url":"https://github.com/mondaycom/storybook-addon-playground","commit_stats":null,"previous_names":["mondaycom/storybook-addon-playground"],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mondaycom%2Fstorybook-addon-playground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mondaycom%2Fstorybook-addon-playground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mondaycom%2Fstorybook-addon-playground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mondaycom%2Fstorybook-addon-playground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mondaycom","download_url":"https://codeload.github.com/mondaycom/storybook-addon-playground/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245066077,"owners_count":20555393,"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":[],"created_at":"2025-03-23T06:29:15.402Z","updated_at":"2025-03-23T06:29:15.831Z","avatar_url":"https://github.com/mondaycom.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Playground - Storybook Addon\n\nThis addon enhances your Storybook experience by allowing you to interactively play with your components. It's perfect for developers looking to experiment in real time, debug issues, or build complex compositions.\n\n![img.png](assets/img.png)\n\n## Installation\n\nTo install the addon, run one of the following commands in your project directory:\n\n```bash\nyarn add -D storybook-addon-playground\n# or\nnpm install -D storybook-addon-playground\n```\n\n## Configuration\n\nAdd the addon to your Storybook configuration in `.storybook/main.js` or `.storybook/main.ts`:\n\n```js\nconst config = {\n  addons: [\n    // rest of your addons ...\n    \"storybook-addon-playground\",\n  ],\n};\n```\n\nThe addon configuration is done through Storybook's `preview` parameters.\n\n| Parameter        | Required | Default                           | Description                                                                                                           |\n|------------------|----------|-----------------------------------|-----------------------------------------------------------------------------------------------------------------------|\n| `storyId`        | `true`   |                                   | The story id that your playground has on Storybook.                                                                   |\n| `components`     | `true`   |                                   | An object with the components that should be rendered in the playground. The key is the component name and the value is the component itself. |\n| `autocompletions`| `false`  | `[]`                              | An array of autocompletions that should be used on the playground. Recommended to use `react-docgen` for generating documentation outputs. |\n| `editorTheme`    | `false`  | Your Storybook theme              | The theme that should be used on the playground.                                                                      |\n| `initialCode`    | `false`  | Empty editor                      | The initial code (\"welcome\") that should be rendered on the playground.                                               |\n| `share`          | `false`  | `false`                           | Whether to allow share capabilities.                                                                                  |\n\nOn your `.storybook/preview.ts` file, you should add something similar to the following:\n\n```ts\nimport MyComponentsLibrary from \"my-components-library\";\nimport MyIconsLibrary from \"my-icons-library\";\nimport reactDocgenOutput from \"./react-docgen-output.json\";\nimport { generateAutocompletions } from \"storybook-addon-playground\";\n\nconst preview = {\n  parameters: {\n    playground: {\n      storyId: \"playground\",\n      components: { ...MyComponentsLibrary, ...MyIconsLibrary },\n      autocompletions: generateAutocompletions(reactDocgenOutput),\n      editorTheme: \"light\",\n      introCode: { jsx: `\u003cdiv\u003eWelcome to my Playground!\u003c/div\u003e`, css: \"\" },\n    },\n  },\n};\n```\n\nSet up the playground environment in your Storybook stories:\n\n```js\nimport { withPlayground } from \"storybook-addon-playground\";\n\nexport default {\n  title: \"Playground\",\n  decorators: [withPlayground],\n};\n\nexport const Playground = {};\n```\n\n## Usage\n\nTo use the Playground, navigate to the Storybook UI and select a story that has the playground decorator. In your addons panel, see an interactive code editor alongside your component, where you can modify the code and immediately see your changes reflected.\n\n## Contributing\n\nContributions are welcome! Feel free to open an issue or submit a pull request.\n\n### Develop locally\n\nInstall dependencies and start\n\n```bash\nyarn\nyarn start\n```\n\nGo to [localhost:6006](http://localhost:6006)\n\n### Add new icons\n\nIcons are generated using [svgr](https://react-svgr.com/docs/).\n\nIn order to add new icons to the addon, drop the icons somewhere in the repo and run the following command:\n\n```bash\nyarn build:icons path/to/your/icons\n```\n\n### Build\n\n#### Rollup\n\nRollup is used to build the addon for publishing.\n\n#### Vite\n\nVite serves the build to a local Storybook for testing and dev purposes.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmondaycom%2Fstorybook-addon-playground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmondaycom%2Fstorybook-addon-playground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmondaycom%2Fstorybook-addon-playground/lists"}