Skip to content

Commit 170b745

Browse files
JReinholdJReinhold
authored
Initialize feat/typescript-support
0 parents  commit 170b745

35 files changed

+29090
-0
lines changed

‎.babelrc.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
presets: [
3+
"@babel/preset-env",
4+
"@babel/preset-typescript",
5+
"@babel/preset-react",
6+
],
7+
};

‎.github/workflows/release.yml‎

Lines changed: 28 additions & 0 deletions
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‎

Lines changed: 6 additions & 0 deletions
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‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
dist

‎.prettierrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎.storybook/main.js‎

Lines changed: 7 additions & 0 deletions
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"],
7+
};

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
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‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
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+
12+
## Getting Started
13+
14+
Click the **Use this template** button to get started.
15+
16+
![](https://user-images.githubusercontent.com/42671/106809879-35b32000-663a-11eb-9cdc-89f178b5273f.gif)
17+
18+
Clone your repository and install dependencies.
19+
20+
```sh
21+
npm install
22+
```
23+
24+
### Development scripts
25+
26+
- `npm run start` runs babel in watch mode and starts Storybook
27+
- `npm run build` build and package your addon code
28+
29+
## What's included?
30+
31+
![Demo](https://user-images.githubusercontent.com/42671/107857205-e7044380-6dfa-11eb-8718-ad02e3ba1a3f.gif)
32+
33+
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)
34+
35+
- `src/Tool.js`
36+
- `src/Panel.js`
37+
- `src/Tab.js`
38+
39+
Which, along with the addon itself, are registered in `src/preset/manager.js`.
40+
41+
Managing State and interacting with a story:
42+
43+
- `src/withGlobals.js` & `src/Tool.js` demonstrates how to use `useGlobals` to manage global state and modify the contents of a Story.
44+
- `src/withRoundTrip.js` & `src/Panel.js` demonstrates two-way communication using channels.
45+
- `src/Tab.js` demonstrates how to use `useParameter` to access the current story's parameters.
46+
47+
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.
48+
49+
Lastly, configure you addon name in `src/constants.js`.
50+
51+
### Metadata
52+
53+
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).
54+
55+
## Release Management
56+
57+
### Setup
58+
59+
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:
60+
61+
- [`NPM_TOKEN`](https://docs.npmjs.com/creating-and-viewing-access-tokens#creating-access-tokens) Create a token with both _Read and Publish_ permissions.
62+
- [`GH_TOKEN`](https://github.com/settings/tokens) Create a token with the `repo` scope.
63+
64+
Then open your `package.json` and edit the following fields:
65+
66+
- `name`
67+
- `author`
68+
- `repository`
69+
70+
#### Local
71+
72+
To use `auto` locally create a `.env` file at the root of your project and add your tokens to it:
73+
74+
```bash
75+
GH_TOKEN=<value you just got from GitHub>
76+
NPM_TOKEN=<value you just got from npm>
77+
```
78+
79+
Lastly, **create labels on GitHub**. You’ll use these labels in the future when making changes to the package.
80+
81+
```bash
82+
npx auto create-labels
83+
```
84+
85+
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.
86+
87+
#### GitHub Actions
88+
89+
This template comes with GitHub actions already set up to publish your addon anytime someone pushes to your repository.
90+
91+
Go to `Settings > Secrets`, click `New repository secret`, and add your `NPM_TOKEN`.
92+
93+
### Creating a releasing
94+
95+
To create a release locally you can run the following command, otherwise the GitHub action will make the release for you.
96+
97+
```sh
98+
npm run release
99+
```
100+
101+
That will:
102+
103+
- Build and package the addon code
104+
- Bump the version
105+
- Push a release to GitHub and npm
106+
- Push a changelog to GitHub

‎check-metadata.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
#!/usr/local/bin/node
2+
3+
const chalk = require("chalk");
4+
const packageJson = require("./package.json");
5+
6+
const name = packageJson.name;
7+
const displayName = packageJson.storybook.displayName;
8+
9+
if (name.includes("addon-kit") || displayName.includes("Addon Kit")) {
10+
console.error(
11+
chalk.red.bold`
12+
⚠️ Please configure appropriate metadata before publishing your addon.
13+
`,
14+
chalk.red`
15+
Your package name and/or displayName includes default values from the Addon Kit.
16+
The addon gallery filters out all such addons.
17+
18+
For more info on addon metadata, see: https://storybook.js.org/docs/react/addons/addon-catalog#addon-metadata
19+
`
20+
);
21+
22+
process.exit(1);
23+
}

0 commit comments

Comments
 (0)