feat: Port to Storybook 10

.github/workflows/build.yml

@@ -0,0 +1,61 @@
+name: Build
+
+on: [push]
+
+jobs:
+  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:
+      - 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: 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: Build addon
+        run: pnpm build
+
+      - name: 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@v2
+      - name: Checkout
+        uses: actions/checkout@v4
 
       - name: Prepare repository
         run: git fetch --unshallow --tags
 
-      - name: Use Node.js 14.x
-        uses: actions/setup-node@v1
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Use Node.js 20.x
+        uses: actions/setup-node@v4
         with:
-          node-version: 14.x
+          node-version: 20.x
+          cache: 'pnpm'
 
       - name: Install dependencies
-        uses: bahmutov/npm-install@v1
+        run: pnpm install
 
       - name: Create Release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |
-          yarn 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

@@ -0,0 +1,9 @@
+import { defineMain } from '@storybook/react-vite/node';
+
+const config = defineMain({
+  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/preview.ts

@@ -0,0 +1,11 @@
+import { definePreview } from '@storybook/react-vite';
+import addonDocs from '@storybook/addon-docs';
+import localAddon from '../dist/index.js';
+
+export default definePreview({
+  addons: [addonDocs(), localAddon()],
+  parameters: {},
+  initialGlobals: {
+    background: { value: 'light' },
+  },
+});

.vscode/settings.json

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

README.md

@@ -1,52 +1,83 @@
 # Storybook Addon Cssresources
 
-Storybook Addon Cssresources to switch between css resources at runtime for your story [Storybook](https://storybook.js.org).
+Switch between CSS resources at runtime, and define per-story CSS resources.
 
 [Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
 
 ![Storybook Addon Cssresources Demo](docs/demo.gif)
 
 ## Installation
 
+Install the addon:
+
 ```sh
 yarn add -D @storybook/addon-cssresources
 ```
 
+```sh
+npm i -D @storybook/addon-cssresources
+```
+
+```sh
+pnpm i -D @storybook/addon-cssresources
+```
+
 ## Configuration
 
-Then create a file called `main.js` in your storybook config.
+Then add the addon to your Storybook config:
 
-Add following content to it:
+```ts
+// .storybook/main.ts
+import { defineMain } from '@storybook/<your-framework>/node';
 
-```js
-module.exports = {
-  addons: ["@storybook/addon-cssresources"],
-};
+const config = defineMain({
+  addons: [
+    '@storybook/addon-docs',
+    '@storybook/addon-cssresources', // Add here
+  ],
+  framework: '@storybook/react-vite',
+});
+
+export default config;
 ```
 
 ## Usage
 
-You need add the all the css resources at compile time using the `withCssResources` decorator. They can be added globally or per story. You can then choose which ones to load from the cssresources addon UI:
+Define the CSS resources you want to use in your [`parameters`](https://storybook.js.org/docs/writing-stories/parameters). They can be added globally or per story.
+
+You can choose which resources get loaded by default in the parameters, and then unload or load other resources in the addon panel UI.
+
+If you use [CSF Next](https://storybook.js.org/docs/api/csf/csf-next), load the addon in `preview.ts` as well:
 
-```js
-import { withCssResources } from "@storybook/addon-cssresources";
+```ts
+// .storybook/preview.ts
+import { definePreview } from '@storybook/<your-framework>';
+import addonDocs from '@storybook/addon-docs';
+import addonCssResources from '@storybook/addon-cssresources';
 
-export default {
-  title: "CssResources",
+export default definePreview({
+  addons: [addonDocs(), addonCssResources()], // only if using CSF Next
   parameters: {
     cssresources: [
       {
-        id: `bluetheme`,
-        code: `<style>body { background-color: lightblue; }</style>`,
+        // Label shown in the addon panel UI
+        id: `bootstrap v5.0.2`,
+        // Code to use to load the resource
+        code: `<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" crossorigin="anonymous"></link>`,
+        // Defines which resources will be initially loaded in the story
+        picked: true,
+        // Defaults to false, this enables you to hide the code snippet and only displays the style selector
+        hideCode: false,
+      },
+      {
+        id: `bootstrap v4.1.3`,
+        code: `<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" crossorigin="anonymous"></link>`,
         picked: false,
-        hideCode: false, // Defaults to false, this enables you to hide the code snippet and only displays the style selector
+        hideCode: false,
       },
-    ],
+    ]
   },
-  decorators: [withCssResources],
-};
-
-export const defaultView = () => <div />;
+});
 ```
 
 ## Credits

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,
+];

manager.js

@@ -0,0 +1 @@
+import './dist/manager';