Prepare for Storybook 10: Output ESM-only

.github/workflows/build.yml

@@ -3,27 +3,59 @@ name: Build
 on: [push]
 
 jobs:
-  release:
+  lint:
     runs-on: ubuntu-latest
     if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
+    strategy:
+      matrix:
+        node-version: [20.19, 22.12]
     steps:
-      - uses: actions/checkout@v4
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Check for linter errors
+        run: pnpm lint
+
+  build:
+    runs-on: ubuntu-latest
+    if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
+    strategy:
+      matrix:
+        node-version: [20.19, 22.12]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
 
-      - name: Prepare repository
-        run: git fetch --unshallow --tags
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
 
-      - name: Use Node.js 20.x
+      - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
         with:
-          node-version: 20.x
+          node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
 
       - name: Install dependencies
-        run: npm install --ignore-scripts
+        run: pnpm install
 
-      - name: Build
-        run: |
-          npm run build
+      - name: Build addon
+        run: pnpm build
 
       - name: Build Storybook
-        run: |
-          npm run build-storybook
+        run: pnpm build-storybook

.github/workflows/release.yml

@@ -5,24 +5,29 @@ 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')"
+    if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci') && github.repository != 'storybookjs/addon-kit'"
     steps:
-      - uses: actions/checkout@v4
+      - name: Checkout
+        uses: actions/checkout@v4
 
       - name: Prepare repository
         run: git fetch --unshallow --tags
 
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
       - name: Use Node.js 20.x
         uses: actions/setup-node@v4
         with:
           node-version: 20.x
+          cache: 'pnpm'
 
       - name: Install dependencies
-        run: npm install --ignore-scripts
+        run: pnpm install
 
       - name: Create Release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |
-          npm run release
+          pnpm run release

.gitignore

@@ -3,4 +3,5 @@ node_modules/
 storybook-static/
 build-storybook.log
 .DS_Store
-.env
+.env
+.eslintcache

.prettierignore

@@ -1 +1,4 @@
 dist
+pnpm-lock.yaml
+node_modules
+storybook-static

.prettierrc

@@ -1 +1,8 @@
-{}
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "arrowParens": "always",
+  "printWidth": 120,
+  "tabWidth": 2,
+  "useTabs": false
+}

.storybook/local-preset.ts

@@ -0,0 +1,14 @@
+import { fileURLToPath } from 'node:url';
+
+/**
+ * to load the built addon in this test Storybook
+ */
+export function previewAnnotations(entry = []) {
+  return [...entry, fileURLToPath(import.meta.resolve('../dist/preview.js'))];
+}
+
+export function managerEntries(entry = []) {
+  return [...entry, fileURLToPath(import.meta.resolve('../dist/manager.js'))];
+}
+
+export * from '../dist/preset.js';

.storybook/main.ts

@@ -1,9 +1,9 @@
-import { defineMain } from "@storybook/react-vite/node";
+import { defineMain } from '@storybook/react-vite/node';
 
 const config = defineMain({
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: ["@storybook/addon-docs", "./local-preset.cjs"],
-  framework: "@storybook/react-vite",
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-docs', import.meta.resolve('./local-preset.ts')],
+  framework: '@storybook/react-vite',
 });
 
 export default config;

.storybook/manager.ts

@@ -0,0 +1,15 @@
+import { addons } from 'storybook/manager-api';
+
+import { renderLabel } from '../src/manager-helpers';
+
+/*
+ * This is an example of opt-in usage of addon exports. Your users can choose to
+ * import and use this helper, or not. Opt-in helpers should be exported in their
+ * own file rather than in `manager.tsx`, because importing `manager.tsx` multiple
+ * times can cause the addon registration code to run multiple times.
+ */
+addons.setConfig({
+  sidebar: {
+    renderLabel,
+  },
+});

.storybook/preview.ts

@@ -1,4 +1,4 @@
-import type { Preview } from "@storybook/react-vite";
+import type { Preview } from '@storybook/react-vite';
 
 const preview: Preview = {
   parameters: {
@@ -10,7 +10,7 @@ const preview: Preview = {
     },
   },
   initialGlobals: {
-    background: { value: "light" },
+    background: { value: 'light' },
   },
 };
 

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

README.md

@@ -151,8 +151,8 @@ const meta: Meta<typeof Button> = {
     myAddon: {
       exampleParameter: true,
       // See API section below for available parameters
-    }
-  }
+    },
+  },
 };
 
 export default meta;
@@ -183,14 +183,14 @@ registering the addon, like so:
 // .storybook/main.ts
 
 // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
-import type { StorybookConfig } from "@storybook/your-framework";
+import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   // ...rest of config
   addons: [
-    "@storybook/addon-docs",
+    '@storybook/addon-docs',
     {
-      name: "my-addon",
+      name: 'my-addon',
       options: {
         // 👈 options for my-addon go here
       },

eslint.config.js

@@ -0,0 +1,37 @@
+import storybook from 'eslint-plugin-storybook';
+import js from '@eslint/js';
+import prettierRecommended from 'eslint-plugin-prettier/recommended';
+import reactPlugin from 'eslint-plugin-react';
+import tseslint from 'typescript-eslint';
+
+export default [
+  {
+    ignores: [
+      '.github/dependabot.yml',
+      '!.*',
+      '*.tgz',
+      'dist/',
+      'scripts/',
+      'coverage/',
+      'node_modules/',
+      'storybook-static/',
+      'build-storybook.log',
+      '.DS_Store',
+      '.env',
+      '.idea',
+      '.vscode',
+    ],
+  },
+  js.configs.recommended,
+  reactPlugin.configs.flat.recommended,
+  {
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+  },
+  ...tseslint.configs.recommended,
+  ...storybook.configs['flat/recommended'],
+  prettierRecommended,
+];