Initial commit

.babelrc.js

@@ -0,0 +1,19 @@
+module.exports = {
+  presets: [
+    "@babel/preset-env",
+    "@babel/preset-typescript",
+    "@babel/preset-react",
+  ],
+  env: {
+    esm: {
+      presets: [
+        [
+          "@babel/preset-env",
+          {
+            modules: false,
+          },
+        ],
+      ],
+    },
+  },
+};

.github/workflows/release.yml

@@ -0,0 +1,28 @@
+name: Release
+
+on: [push]
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Prepare repository
+        run: git fetch --unshallow --tags
+
+      - name: Use Node.js 14.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14.x
+
+      - name: Install dependencies
+        uses: bahmutov/npm-install@v1
+
+      - name: Create Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: |
+          yarn release

.gitignore

@@ -0,0 +1,6 @@
+dist/
+node_modules/
+storybook-static/
+build-storybook.log
+.DS_Store
+.env

.prettierignore

@@ -0,0 +1 @@
+dist

.prettierrc

@@ -0,0 +1 @@
+{}

.storybook/main.js

@@ -0,0 +1,7 @@
+module.exports = {
+  stories: [
+    "../stories/**/*.stories.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
+  ],
+  addons: ["../preset.js", "@storybook/addon-essentials"],
+};

LICENSE

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

README.md

@@ -0,0 +1,118 @@
+<!-- README START -->
+
+# Storybook Addon Kit
+
+Simplify the creation of Storybook addons
+
+- 📝 Live-editing in development
+- ⚛️ React/JSX support
+- 📦 Transpiling and bundling with Babel
+- 🏷 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
+
+## Getting Started
+
+Click the **Use this template** button to get started.
+
+![](https://user-images.githubusercontent.com/321738/125058439-8d9ef880-e0aa-11eb-9211-e6d7be812959.gif)
+
+Clone your repository and install dependencies.
+
+```sh
+yarn
+```
+
+<!-- README END -->
+
+### 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?
+
+![Demo](https://user-images.githubusercontent.com/42671/107857205-e7044380-6dfa-11eb-8718-ad02e3ba1a3f.gif)
+
+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.js`
+- `src/Panel.js`
+- `src/Tab.js`
+
+Which, along with the addon itself, are registered in `src/preset/manager.js`.
+
+Managing State and interacting with a story:
+
+- `src/withGlobals.js` & `src/Tool.js` demonstrates how to use `useGlobals` to manage global state and modify the contents of a Story.
+- `src/withRoundTrip.js` & `src/Panel.js` demonstrates two-way communication using channels.
+- `src/Tab.js` 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/preset/manager.js` and `src/preset/preview.js` accordingly.
+
+Lastly, configure you addon name in `src/constants.js`.
+
+### 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=<value you just got from GitHub>
+NPM_TOKEN=<value you just got from npm>
+```
+
+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

package.json

@@ -0,0 +1,89 @@
+{
+  "name": "storybook-addon-kit",
+  "version": "0.0.0",
+  "description": "everything you need to build a Storybook addon",
+  "keywords": [
+    "storybook-addons"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook-addon-kit"
+  },
+  "author": "package-author",
+  "license": "MIT",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/ts/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "postinstall": "node scripts/welcome.js",
+    "clean": "rimraf ./dist",
+    "buildBabel": "concurrently \"yarn buildBabel:cjs\" \"yarn buildBabel:esm\"",
+    "buildBabel:cjs": "babel ./src -d ./dist/cjs --extensions \".js,.jsx,.ts,.tsx\"",
+    "buildBabel:esm": "babel ./src -d ./dist/esm --env-name esm --extensions \".js,.jsx,.ts,.tsx\"",
+    "buildTsc": "tsc --declaration --emitDeclarationOnly --outDir ./dist/ts",
+    "prebuild": "yarn clean",
+    "build": "concurrently \"yarn buildBabel\" \"yarn buildTsc\"",
+    "build:watch": "concurrently \"yarn buildBabel:esm -- --watch\" \"yarn buildTsc -- --watch\"",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "storybook": "start-storybook -p 6006",
+    "start": "concurrently \"yarn build:watch\" \"yarn storybook -- --no-manager-cache --quiet\"",
+    "build-storybook": "build-storybook",
+    "prerelease": "zx scripts/prepublish-checks.mjs",
+    "release": "yarn build && auto shipit",
+    "eject-ts": "zx scripts/eject-typescript.mjs"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.12.1",
+    "@babel/core": "^7.12.3",
+    "@babel/preset-env": "^7.12.1",
+    "@babel/preset-react": "^7.12.5",
+    "@babel/preset-typescript": "^7.13.0",
+    "@storybook/addon-essentials": "^6.4.0",
+    "@storybook/react": "^6.4.0",
+    "auto": "^10.3.0",
+    "babel-loader": "^8.1.0",
+    "boxen": "^5.0.1",
+    "concurrently": "^6.2.0",
+    "dedent": "^0.7.0",
+    "prettier": "^2.3.1",
+    "prop-types": "^15.7.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "rimraf": "^3.0.2",
+    "typescript": "^4.2.4",
+    "zx": "^1.14.1"
+  },
+  "peerDependencies": {
+    "@storybook/addons": "^6.4.0",
+    "@storybook/api": "^6.4.0",
+    "@storybook/components": "^6.4.0",
+    "@storybook/core-events": "^6.4.0",
+    "@storybook/theming": "^6.4.0",
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "storybook": {
+    "displayName": "Addon Kit",
+    "supportedFrameworks": [
+      "supported-frameworks"
+    ],
+    "icon": "https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"
+  }
+}

preset.js

@@ -0,0 +1,12 @@
+function config(entry = []) {
+  return [...entry, require.resolve("./dist/esm/preset/preview")];
+}
+
+function managerEntries(entry = []) {
+  return [...entry, require.resolve("./dist/esm/preset/manager")];
+}
+
+module.exports = {
+  managerEntries,
+  config,
+};

scripts/eject-typescript.mjs

@@ -0,0 +1,30 @@
+#!/usr/bin/env zx
+
+// Copy TS files and delete src
+await $`cp -r ./src ./srcTS`;
+await $`rm -rf ./src`;
+await $`mkdir ./src`;
+
+// Convert TS code to JS
+await $`babel --no-babelrc --presets @babel/preset-typescript ./srcTS -d ./src --extensions \".js,.jsx,.ts,.tsx\" --ignore "./srcTS/typings.d.ts"`;
+
+// Format the newly created .js files
+await $`prettier --write ./src`;
+
+// Add in minimal files required for the TS build setup
+await $`touch ./src/dummy.ts`;
+await $`printf "export {};" >> ./src/dummy.ts`;
+
+await $`touch ./src/typings.d.ts`;
+await $`printf 'declare module "global";' >> ./src/typings.d.ts`;
+
+// Clean up
+await $`rm -rf ./srcTS`;
+
+console.log(
+  chalk.green.bold`
+TypeScript Ejection complete!`,
+  chalk.green`
+Addon code converted with JS. The TypeScript build setup is still available in case you want to adopt TypeScript in the future.
+`
+);