Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aiji42/storybook-addon-kit
https://github.com/aiji42/storybook-addon-kit
Last synced: 24 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/aiji42/storybook-addon-kit
- Owner: aiji42
- License: mit
- Created: 2023-06-02T06:19:13.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-06-02T06:19:16.000Z (over 1 year ago)
- Last Synced: 2024-05-01T16:55:49.768Z (6 months ago)
- Language: TypeScript
- Size: 176 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Storybook Addon Kit ([demo](https://main--601ada52c3d4040021afdc30.chromatic.com))
Simplify the creation of Storybook addons
- 📝 Live-editing in development
- ⚛️ React/JSX support
- 📦 Transpiling and bundling with [tsup](https://tsup.egoist.dev/)
- 🏷 Plugin metadata
- 🚢 Release management with [Auto](https://github.com/intuit/auto)
- 🧺 Boilerplate and sample code
- 🛄 ESM support
- 🛂 TypeScript by default with option to eject to JS
### Migrating from Storybook 6.x to 7
Note, if you're looking to upgrade your addon from Storybook 6.x to 7, please refer to the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#70-addon-authors-changes). The major changes are:
- `register.js` was removed
- No more default export from `@storybook/addons`
- `@storybook/api` has been split into `@storybook/preview-api` and `@storybook/manager-api`
Skip this section if you're bootstrapping a new addon.
## Getting Started
Click the **Use this template** button to get started.
Clone your repository and install dependencies.
```sh
yarn
```
### Development scripts
- `yarn start` runs babel in watch mode and starts Storybook
- `yarn build` build and package your addon code
### Switch from TypeScript to JavaScript
Don't want to use TypeScript? We offer a handy eject command: `yarn eject-ts`
This will convert all code to JS. It is a destructive process, so we recommended running this before you start writing any code.
## What's included?
The 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)
- `src/Tool.tsx`
- `src/Panel.tsx`
- `src/Tab.tsx`
Which, along with the addon itself, are registered in `src/manager.ts`.
Managing State and interacting with a story:
- `src/withGlobals.ts` & `src/Tool.tsx` demonstrates how to use `useGlobals` to manage global state and modify the contents of a Story.
- `src/withRoundTrip.ts` & `src/Panel.tsx` demonstrates two-way communication using channels.
- `src/Tab.tsx` demonstrates how to use `useParameter` to access the current story's parameters.
Your addon might use one or more of these patterns. Feel free to delete unused code. Update `src/manager.ts` and `src/preview.ts` accordingly.
Lastly, configure you addon name in `src/constants.ts`.
### Metadata
Storybook 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).
## Release Management
### Setup
This 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:
- [`NPM_TOKEN`](https://docs.npmjs.com/creating-and-viewing-access-tokens#creating-access-tokens) Create a token with both _Read and Publish_ permissions.
- [`GH_TOKEN`](https://github.com/settings/tokens) Create a token with the `repo` scope.
Then open your `package.json` and edit the following fields:
- `name`
- `author`
- `repository`
#### Local
To use `auto` locally create a `.env` file at the root of your project and add your tokens to it:
```bash
GH_TOKEN=
NPM_TOKEN=
```
Lastly, **create labels on GitHub**. You’ll use these labels in the future when making changes to the package.
```bash
npx auto create-labels
```
If 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.
#### GitHub Actions
This template comes with GitHub actions already set up to publish your addon anytime someone pushes to your repository.
Go to `Settings > Secrets`, click `New repository secret`, and add your `NPM_TOKEN`.
### Creating a release
To create a release locally you can run the following command, otherwise the GitHub action will make the release for you.
```sh
yarn release
```
That will:
- Build and package the addon code
- Bump the version
- Push a release to GitHub and npm
- Push a changelog to GitHub