Skip to content

Commit 51c395b

Browse files
johnfjohnf
committed
Initial commit
0 parents  commit 51c395b

36 files changed

+12120
-0
lines changed

‎.babelrc.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
module.exports = {
2+
presets: [
3+
"@babel/preset-env",
4+
"@babel/preset-typescript",
5+
"@babel/preset-react",
6+
],
7+
env: {
8+
esm: {
9+
presets: [
10+
[
11+
"@babel/preset-env",
12+
{
13+
modules: false,
14+
},
15+
],
16+
],
17+
},
18+
},
19+
};

‎.github/workflows/release.yml

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
name: Release
2+
3+
on: [push]
4+
5+
jobs:
6+
release:
7+
runs-on: ubuntu-latest
8+
if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
9+
steps:
10+
- uses: actions/checkout@v2
11+
12+
- name: Prepare repository
13+
run: git fetch --unshallow --tags
14+
15+
- name: Use Node.js 14.x
16+
uses: actions/setup-node@v1
17+
with:
18+
node-version: 14.x
19+
20+
- name: Install dependencies
21+
uses: bahmutov/npm-install@v1
22+
23+
- name: Create Release
24+
env:
25+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
26+
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
27+
run: |
28+
yarn release

‎.gitignore

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
dist/
2+
node_modules/
3+
storybook-static/
4+
build-storybook.log
5+
.DS_Store
6+
.env

‎.prettierignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
dist

‎.prettierrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎.storybook/main.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
stories: [
3+
"../stories/**/*.stories.mdx",
4+
"../stories/**/*.stories.@(js|jsx|ts|tsx)",
5+
],
6+
addons: ["../preset.js", "@storybook/addon-essentials"],
7+
};

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2021 Storybook contributors
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+114
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
# Storybook Addon Kit
2+
3+
Simplify the creation of Storybook addons
4+
5+
- 📝 Live-editing in development
6+
- ⚛️ React/JSX support
7+
- 📦 Transpiling and bundling with Babel
8+
- 🏷 Plugin metadata
9+
- 🚢 Release management with [Auto](https://github.com/intuit/auto)
10+
- 🧺 Boilerplate and sample code
11+
- 🛄 ESM support
12+
- 🛂 TypeScript by default with option to eject to JS
13+
14+
## Getting Started
15+
16+
Click the **Use this template** button to get started.
17+
18+
![](https://user-images.githubusercontent.com/321738/125058439-8d9ef880-e0aa-11eb-9211-e6d7be812959.gif)
19+
20+
Clone your repository and install dependencies.
21+
22+
```sh
23+
yarn
24+
```
25+
26+
### Development scripts
27+
28+
- `yarn start` runs babel in watch mode and starts Storybook
29+
- `yarn build` build and package your addon code
30+
31+
### Switch from TypeScript to JavaScript
32+
33+
Don't want to use TypeScript? We offer a handy eject command: `yarn eject-ts`
34+
35+
This will convert all code to JS. It is a destructive process, so we recommended running this before you start writing any code.
36+
37+
## What's included?
38+
39+
![Demo](https://user-images.githubusercontent.com/42671/107857205-e7044380-6dfa-11eb-8718-ad02e3ba1a3f.gif)
40+
41+
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)
42+
43+
- `src/Tool.js`
44+
- `src/Panel.js`
45+
- `src/Tab.js`
46+
47+
Which, along with the addon itself, are registered in `src/preset/manager.js`.
48+
49+
Managing State and interacting with a story:
50+
51+
- `src/withGlobals.js` & `src/Tool.js` demonstrates how to use `useGlobals` to manage global state and modify the contents of a Story.
52+
- `src/withRoundTrip.js` & `src/Panel.js` demonstrates two-way communication using channels.
53+
- `src/Tab.js` demonstrates how to use `useParameter` to access the current story's parameters.
54+
55+
Your 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.
56+
57+
Lastly, configure you addon name in `src/constants.js`.
58+
59+
### Metadata
60+
61+
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).
62+
63+
## Release Management
64+
65+
### Setup
66+
67+
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:
68+
69+
- [`NPM_TOKEN`](https://docs.npmjs.com/creating-and-viewing-access-tokens#creating-access-tokens) Create a token with both _Read and Publish_ permissions.
70+
- [`GH_TOKEN`](https://github.com/settings/tokens) Create a token with the `repo` scope.
71+
72+
Then open your `package.json` and edit the following fields:
73+
74+
- `name`
75+
- `author`
76+
- `repository`
77+
78+
#### Local
79+
80+
To use `auto` locally create a `.env` file at the root of your project and add your tokens to it:
81+
82+
```bash
83+
GH_TOKEN=<value you just got from GitHub>
84+
NPM_TOKEN=<value you just got from npm>
85+
```
86+
87+
Lastly, **create labels on GitHub**. You’ll use these labels in the future when making changes to the package.
88+
89+
```bash
90+
npx auto create-labels
91+
```
92+
93+
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.
94+
95+
#### GitHub Actions
96+
97+
This template comes with GitHub actions already set up to publish your addon anytime someone pushes to your repository.
98+
99+
Go to `Settings > Secrets`, click `New repository secret`, and add your `NPM_TOKEN`.
100+
101+
### Creating a release
102+
103+
To create a release locally you can run the following command, otherwise the GitHub action will make the release for you.
104+
105+
```sh
106+
yarn release
107+
```
108+
109+
That will:
110+
111+
- Build and package the addon code
112+
- Bump the version
113+
- Push a release to GitHub and npm
114+
- Push a changelog to GitHub

‎package.json

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
{
2+
"name": "storybook-addon-kit",
3+
"version": "0.0.0",
4+
"description": "everything you need to build a Storybook addon",
5+
"keywords": [
6+
"storybook-addons",
7+
"style",
8+
"test"
9+
],
10+
"repository": {
11+
"type": "git",
12+
"url": "https://github.com/storybookjs/storybook-addon-kit"
13+
},
14+
"author": "winkerVSbecks",
15+
"license": "MIT",
16+
"main": "dist/cjs/index.js",
17+
"module": "dist/esm/index.js",
18+
"types": "dist/ts/index.d.ts",
19+
"files": [
20+
"dist/**/*",
21+
"README.md",
22+
"*.js",
23+
"*.d.ts"
24+
],
25+
"scripts": {
26+
"clean": "rimraf ./dist",
27+
"buildBabel": "concurrently \"yarn buildBabel:cjs\" \"yarn buildBabel:esm\"",
28+
"buildBabel:cjs": "babel ./src -d ./dist/cjs --extensions \".js,.jsx,.ts,.tsx\"",
29+
"buildBabel:esm": "babel ./src -d ./dist/esm --env-name esm --extensions \".js,.jsx,.ts,.tsx\"",
30+
"buildTsc": "tsc --declaration --emitDeclarationOnly --outDir ./dist/ts",
31+
"prebuild": "yarn clean",
32+
"build": "concurrently \"yarn buildBabel\" \"yarn buildTsc\"",
33+
"build:watch": "concurrently \"yarn buildBabel:esm -- --watch\" \"yarn buildTsc -- --watch\"",
34+
"test": "echo \"Error: no test specified\" && exit 1",
35+
"storybook": "start-storybook -p 6006",
36+
"start": "concurrently \"yarn build:watch\" \"yarn storybook -- --no-manager-cache --quiet\"",
37+
"build-storybook": "build-storybook",
38+
"prerelease": "zx scripts/prepublish-checks.mjs",
39+
"release": "yarn build && auto shipit",
40+
"eject-ts": "zx scripts/eject-typescript.mjs"
41+
},
42+
"devDependencies": {
43+
"@babel/cli": "^7.12.1",
44+
"@babel/core": "^7.12.3",
45+
"@babel/preset-env": "^7.12.1",
46+
"@babel/preset-react": "^7.12.5",
47+
"@babel/preset-typescript": "^7.13.0",
48+
"@storybook/addon-essentials": "^6.4.0",
49+
"@storybook/react": "^6.4.0",
50+
"auto": "^10.3.0",
51+
"babel-loader": "^8.1.0",
52+
"boxen": "^5.0.1",
53+
"concurrently": "^6.2.0",
54+
"dedent": "^0.7.0",
55+
"prettier": "^2.3.1",
56+
"prop-types": "^15.7.2",
57+
"react": "^17.0.1",
58+
"react-dom": "^17.0.1",
59+
"rimraf": "^3.0.2",
60+
"typescript": "^4.2.4",
61+
"zx": "^1.14.1"
62+
},
63+
"peerDependencies": {
64+
"@storybook/addons": "^6.4.0",
65+
"@storybook/api": "^6.4.0",
66+
"@storybook/components": "^6.4.0",
67+
"@storybook/core-events": "^6.4.0",
68+
"@storybook/theming": "^6.4.0",
69+
"react": "^16.8.0 || ^17.0.0",
70+
"react-dom": "^16.8.0 || ^17.0.0"
71+
},
72+
"peerDependenciesMeta": {
73+
"react": {
74+
"optional": true
75+
},
76+
"react-dom": {
77+
"optional": true
78+
}
79+
},
80+
"publishConfig": {
81+
"access": "public"
82+
},
83+
"storybook": {
84+
"displayName": "Addon Kit",
85+
"supportedFrameworks": [
86+
"react",
87+
"vue",
88+
"angular"
89+
],
90+
"icon": "https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"
91+
}
92+
}

‎preset.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
function config(entry = []) {
2+
return [...entry, require.resolve("./dist/esm/preset/preview")];
3+
}
4+
5+
function managerEntries(entry = []) {
6+
return [...entry, require.resolve("./dist/esm/preset/manager")];
7+
}
8+
9+
module.exports = {
10+
managerEntries,
11+
config,
12+
};

‎scripts/eject-typescript.mjs

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
#!/usr/bin/env zx
2+
3+
// Copy TS files and delete src
4+
await $`cp -r ./src ./srcTS`;
5+
await $`rm -rf ./src`;
6+
await $`mkdir ./src`;
7+
8+
// Convert TS code to JS
9+
await $`babel --no-babelrc --presets @babel/preset-typescript ./srcTS -d ./src --extensions \".js,.jsx,.ts,.tsx\" --ignore "./srcTS/typings.d.ts"`;
10+
11+
// Format the newly created .js files
12+
await $`prettier --write ./src`;
13+
14+
// Add in minimal files required for the TS build setup
15+
await $`touch ./src/dummy.ts`;
16+
await $`printf "export {};" >> ./src/dummy.ts`;
17+
18+
await $`touch ./src/typings.d.ts`;
19+
await $`printf 'declare module "global";' >> ./src/typings.d.ts`;
20+
21+
// Clean up
22+
await $`rm -rf ./srcTS`;
23+
24+
console.log(
25+
chalk.green.bold`
26+
TypeScript Ejection complete!`,
27+
chalk.green`
28+
Addon code converted with JS. The TypeScript build setup is still available in case you want to adopt TypeScript in the future.
29+
`
30+
);

0 commit comments

Comments
 (0)