{"id":15726805,"url":"https://github.com/usulpro/storybook-addon-api","last_synced_at":"2025-03-31T01:48:52.168Z","repository":{"id":82554371,"uuid":"340978357","full_name":"usulpro/storybook-addon-api","owner":"usulpro","description":null,"archived":false,"fork":false,"pushed_at":"2021-02-21T21:12:43.000Z","size":9,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-06T07:12:08.279Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/usulpro.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":"2021-02-21T18:53:05.000Z","updated_at":"2022-10-09T12:00:56.000Z","dependencies_parsed_at":"2023-03-12T16:10:06.355Z","dependency_job_id":null,"html_url":"https://github.com/usulpro/storybook-addon-api","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"storybookjs/addon-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usulpro%2Fstorybook-addon-api","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usulpro%2Fstorybook-addon-api/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usulpro%2Fstorybook-addon-api/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usulpro%2Fstorybook-addon-api/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/usulpro","download_url":"https://codeload.github.com/usulpro/storybook-addon-api/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246403896,"owners_count":20771526,"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":"2024-10-03T22:40:42.260Z","updated_at":"2025-03-31T01:48:52.098Z","avatar_url":"https://github.com/usulpro.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Storybook Addon Kit\n\nSimplify the creation of Storybook addons\n\n- 📝 Live-editing in development\n- ⚛️ React/JSX support\n- 📦 Transpiling and bundling with Babel\n- 🏷 Plugin metadata\n- 🚢 Release management with [Auto](https://github.com/intuit/auto)\n- 🧺 Boilerplate and sample code\n\n## Getting Started\n\nClick the **Use this template** button to get started.\n\n![](https://user-images.githubusercontent.com/42671/106809879-35b32000-663a-11eb-9cdc-89f178b5273f.gif)\n\nClone your repository and install dependencies.\n\n```*sh*\nnpm install\n```\n\n### Development scripts\n\n- `npm run start` runs babel in watch mode and starts Storybook\n- `npm run build` build and package your addon code\n\n## What's included?\n\n![Demo](https://user-images.githubusercontent.com/42671/107857205-e7044380-6dfa-11eb-8718-ad02e3ba1a3f.gif)\n\nThe addon code lives in `src`. It demonstrates all core addon related concepts. The three [UI paradigms](https://storybook.js.org/docs/react/addons/addon-types#ui-based-addons)\n\n- `src/Tool.js`\n- `src/Panel.js`\n- `src/Tab.js`\n\nWhich, along with the addon itself, are registered in `src/preset/manager.js`.\n\nManaging State and interacting with a story:\n\n- `src/withGlobals.js` \u0026 `src/Tool.js` demonstrates how to use `useGlobals` to manage global state and modify the contents of a Story.\n- `src/withRoundTrip.js` \u0026 `src/Panel.js` demonstrates two-way communication using channels.\n- `src/Tab.js` demonstrates how to use `useParameter` to access the current story's parameters.\n\nYour addon might use one or more of these patterns. Feel free to delete unused code. Update `src/preset/manager.js` and `src/preset/preview.js` accordingly.\n\nLastly, configure you addon name in `src/constants.js`.\n\n### Metadata\n\nStorybook addons are listed in the [catalog](https://storybook.js.org/addons) and distributed via npm. The catalog is populated by querying npm's registry for Storybook-specific metadata in `package.json`. This project has been configured with sample data. Learn more about available options in the [Addon metadata docs](https://storybook.js.org/docs/react/addons/addon-catalog#addon-metadata).\n\n## Release management\n\n### Setup\n\nThis project is configured to use [Auto](https://github.com/intuit/auto) for release management. It generates a changelog and pushes it to both GitHub and npm. Therefore, you need to configure access to both:\n\n- Authenticate using [`npm adduser`](https://docs.npmjs.com/cli/adduser.html)\n- Create an [access token](https://docs.npmjs.com/creating-and-viewing-access-tokens#creating-access-tokens). You’ll need a token with both _Read and Publish_ permissions.\n- Similarly, generate a [Github token](https://github.com/settings/tokens). This token will need the repo scope.\n\nCreate a `.env` file at the root of your project and add both these tokens to it:\n\n```\nGH_TOKEN=\u003cvalue you just got from GitHub\u003e\nNPM_TOKEN=\u003cvalue you just got from npm\u003e\n```\n\nLastly, **create labels on GitHub**. You’ll use these labels in the future when making changes to the package.\n\n```\nnpx auto create-labels\n```\n\nIf you check on GitHub, you’ll now see a set of labels that Auto would like you to use. Use these to tag future pull requests.\n\n### Creating a releasing\n\n```sh\nnpm run release\n```\n\nThat will:\n\n- Build and package the addon code\n- Bump the version\n- Push a release to GitHub and npm\n- Push a changelog to GitHub\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fusulpro%2Fstorybook-addon-api","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fusulpro%2Fstorybook-addon-api","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fusulpro%2Fstorybook-addon-api/lists"}