Merge pull request #82 from storybookjs/esm-only

Prepare for Storybook 10: Output ESM-only

Author: ndelangen

.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.cjs

@@ -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/local-preset.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/main.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,
+  },
+});