Skip to content

Commit 78d5c7e

Browse files
JReinholdJReinhold
authored
Initialize tech/tsup
0 parents  commit 78d5c7e

39 files changed

+12384
-0
lines changed

‎.babelrc.js‎

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

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

‎.github/workflows/test.yml‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
name: Test
2+
3+
on: [push]
4+
5+
jobs:
6+
test:
7+
runs-on: ubuntu-latest
8+
steps:
9+
- uses: actions/checkout@v2
10+
11+
- name: Prepare repository
12+
run: git fetch --unshallow --tags
13+
14+
- name: Use Node.js 16.x
15+
uses: actions/setup-node@v1
16+
with:
17+
node-version: 16.x
18+
19+
- name: Install dependencies
20+
run: yarn install --ignore-scripts
21+
22+
- name: Run build
23+
run: |
24+
yarn build
25+
26+
- name: Run build
27+
run: |
28+
yarn build-storybook

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

‎package.json‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
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+
],
8+
"repository": {
9+
"type": "git",
10+
"url": "https://github.com/storybookjs/storybook-addon-kit"
11+
},
12+
"author": "package-author",
13+
"license": "MIT",
14+
"exports": {
15+
".": {
16+
"require": "./dist/index.js",
17+
"import": "./dist/index.mjs",
18+
"types": "./dist/index.d.ts"
19+
},
20+
"./manager.js": {
21+
"require": "./dist/manager.js",
22+
"import": "./dist/manager.mjs",
23+
"types": "./dist/manager.d.ts"
24+
},
25+
"./preview.js": {
26+
"require": "./dist/preview.js",
27+
"import": "./dist/preview.mjs",
28+
"types": "./dist/preview.d.ts"
29+
},
30+
"./package.json": "./package.json"
31+
},
32+
"main": "dist/index.js",
33+
"module": "dist/index.mjs",
34+
"types": "dist/index.d.ts",
35+
"files": [
36+
"dist/**/*",
37+
"README.md",
38+
"*.js",
39+
"*.d.ts"
40+
],
41+
"scripts": {
42+
"postinstall": "node scripts/welcome.js",
43+
"clean": "rimraf ./dist",
44+
"prebuild": "yarn clean",
45+
"build": "tsup",
46+
"build:watch": "yarn build --watch",
47+
"test": "echo \"Error: no test specified\" && exit 1",
48+
"storybook": "start-storybook -p 6006",
49+
"start": "concurrently \"yarn build:watch\" \"yarn storybook -- --no-manager-cache --quiet\"",
50+
"build-storybook": "build-storybook",
51+
"prerelease": "zx scripts/prepublish-checks.mjs",
52+
"release": "yarn build && auto shipit",
53+
"eject-ts": "zx scripts/eject-typescript.mjs"
54+
},
55+
"devDependencies": {
56+
"@storybook/addon-essentials": "^6.5.8",
57+
"@storybook/react": "^6.5.8",
58+
"auto": "^10.3.0",
59+
"babel-loader": "^8.1.0",
60+
"boxen": "^5.0.1",
61+
"concurrently": "^6.2.0",
62+
"dedent": "^0.7.0",
63+
"prettier": "^2.3.1",
64+
"prop-types": "^15.7.2",
65+
"react": "^17.0.1",
66+
"react-dom": "^17.0.1",
67+
"rimraf": "^3.0.2",
68+
"tsup": "^6.2.2",
69+
"typescript": "^4.2.4",
70+
"zx": "^1.14.1"
71+
},
72+
"peerDependencies": {
73+
"@storybook/addons": "^6.5.8",
74+
"@storybook/api": "^6.5.8",
75+
"@storybook/components": "^6.5.8",
76+
"@storybook/core-events": "^6.5.8",
77+
"@storybook/theming": "^6.5.8",
78+
"react": "^16.8.0 || ^17.0.0",
79+
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
80+
},
81+
"peerDependenciesMeta": {
82+
"react": {
83+
"optional": true
84+
},
85+
"react-dom": {
86+
"optional": true
87+
}
88+
},
89+
"publishConfig": {
90+
"access": "public"
91+
},
92+
"storybook": {
93+
"displayName": "Addon Kit",
94+
"supportedFrameworks": [
95+
"supported-frameworks"
96+
],
97+
"icon": "https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"
98+
}
99+
}

0 commit comments

Comments
 (0)