[Major refactor] Upgrade to Storbook 10 and align with Storybook Addon Kit

.prettierignore

@@ -1,2 +1,4 @@
 dist
-CHANGELOG.md
+CHANGELOG.md
+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,11 +1,9 @@
-import type { StorybookConfig } from "@storybook/react-vite";
-const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: ["@storybook/addon-links", "@storybook/addon-docs", "./local-preset.js"],
+import type { StorybookConfig } from '@storybook/react-vite';
 
-  framework: {
-    name: "@storybook/react-vite",
-    options: {},
-  }
+const config: StorybookConfig = {
+  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

@@ -1,18 +1,18 @@
-import type { Preview } from "@storybook/react-vite";
+import type { Preview } from '@storybook/react-vite';
 
 const preview: Preview = {
   parameters: {
-    backgrounds: {
-      default: "light",
-    },
-    actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/,
       },
     },
   },
+
+  initialGlobals: {
+    backgrounds: { value: 'light' },
+  },
 };
 
 export default preview;

README.md

@@ -7,6 +7,10 @@ story.
 
 ## Requirements
 
+### Storybook 10.x
+
+Use version 9.x of this addon.
+
 ### Storybook 9.x
 
 Use version 8.x of this addon.
@@ -45,7 +49,7 @@ pnpm add -D @whitespace/storybook-addon-html
 module.exports = {
   // ...
   addons: [
-    "@whitespace/storybook-addon-html",
+    '@whitespace/storybook-addon-html',
     // ...
   ],
 };
@@ -58,7 +62,7 @@ You can override the wrapper element selector used to grab the component HTML.
 ```js
 export const parameters = {
   html: {
-    root: "#my-custom-wrapper", // default: #root
+    root: '#my-custom-wrapper', // default: #root
   },
 };
 ```
@@ -109,7 +113,7 @@ injected by frameworks.
 html: {
   transform: (code) => {
     // Remove attributes `_nghost` and `ng-reflect` injected by Angular:
-    return code.replace(/(?:_nghost|ng-reflect).*?="[\S\s]*?"/g, "");
+    return code.replace(/(?:_nghost|ng-reflect).*?="[\S\s]*?"/g, '');
   };
 }
 ```

eslint.config.js

@@ -0,0 +1,33 @@
+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: [
+      'dist/',
+      'scripts/',
+      '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

@@ -1 +1 @@
-import "./dist/manager";
+import './dist/manager';