feat: upgrade to Storybook 7

.github/workflows/release.yml

@@ -12,17 +12,17 @@ jobs:
       - name: Prepare repository
         run: git fetch --unshallow --tags
 
-      - name: Use Node.js 16.x
-        uses: actions/setup-node@v1
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 18.x
 
       - name: Install dependencies
-        uses: bahmutov/npm-install@v1
+        run: yarn install --ignore-scripts
 
       - name: Create Release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |
-          yarn release
+          yarn release

.storybook/local-preset.js

@@ -0,0 +1,15 @@
+/**
+ * to load the built addon in this test Storybook
+ */
+function previewAnnotations(entry = []) {
+  return [...entry, require.resolve("../dist/preview.mjs")];
+}
+
+function managerEntries(entry = []) {
+  return [...entry, require.resolve("../dist/manager.mjs")];
+}
+
+module.exports = {
+  managerEntries,
+  previewAnnotations,
+};

.storybook/main.ts

@@ -0,0 +1,18 @@
+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-essentials",
+    "@storybook/addon-interactions",
+    "./local-preset.js",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>

.storybook/preview.ts

@@ -0,0 +1,30 @@
+import type {Preview} from '@storybook/react';
+
+const preview: Preview = {
+  globals: {
+    drupalTheme: 'umami',
+    supportedDrupalThemes: {
+      umami: {title: 'Umami'},
+      bartik: {title: 'Bartik'},
+      claro: {title: 'Claro'},
+      seven: {title: 'Seven'},
+    },
+  },
+  parameters: {
+    server: {
+      url: 'https://local.contrib.com'
+    },
+    backgrounds: {
+      default: 'light',
+    },
+    actions: {argTypesRegex: '^on[A-Z].*'},
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

README.md

@@ -53,21 +53,29 @@ Then, configure the `supportedDrupalThemes` and `drupalTheme` parameters in `.st
 
 ```javascript
 // .storybook/preview.js
-export const parameters = {
+const preview: Preview = {
   // ...
-  server: {
-    // Replace this with your Drupal site URL, or an environment variable.
-    url: 'http://local.contrib.com',
+  globals: {
+    // ...
+    drupalTheme: 'umami',
+    supportedDrupalThemes: {
+      umami: {title: 'Umami'},
+      bartik: {title: 'Bartik'},
+      claro: {title: 'Claro'},
+      seven: {title: 'Seven'},
+    },
   },
-  drupalTheme: 'umami',
-  supportedDrupalThemes: {
-    umami: { title: 'Umami' },
-    bartik: { title: 'Bartik' },
-    claro: { title: 'Claro' },
-    seven: { title: 'Seven' },
+  parameters: {
+    server: {
+      // Replace this with your Drupal site URL, or an environment variable.
+      url: 'http://local.contrib.com',
+    },
+    // ...
   },
   // ...
 };
+
+export default preview;
 ```
 
 ## Start Storybook
@@ -82,35 +90,39 @@ yarn storybook
 
 ## Storybook addon authors
 
-As an addon author, you can use this library by adding it as a dependency and adding the following to your `/preset.js` file:
+As an addon author, you can use this library by adding it as a dependency and adding the following to your `src/manager.ts` and `src/preview.ts` files:
 
-```js
-function config(entry = []) {
-  return [
-    ...entry,
-    require.resolve('@lullabot/storybook-drupal-addon/preview'), // <-- library's preview preset
-    require.resolve('./dist/esm/preset/preview'), // <-- your addon's preview preset (if present)
-  ];
-}
+*src/manager.ts*
+```typescript
+export * from '@lullabot/storybook-drupal-addon/manager';
+```
 
-function managerEntries(entry = []) {
-  return [
-    ...entry,
-    require.resolve('@lullabot/storybook-drupal-addon/manager'),
-    require.resolve('./dist/esm/preset/manager'), // <-- your addon's manager (if present)
-  ];
+*src/preview.ts*
+```typescript
+import type { Renderer, ProjectAnnotations } from '@storybook/types';
+import drupalPreview from '@lullabot/storybook-drupal-addon/preview';
+import { withYourDrupalDecorator } from './withYourDecorator';
+
+// @ts-ignore
+const drupalDecorators = drupalPreview?.decorators || [];
+
+const preview: ProjectAnnotations<Renderer> = {
+    ...drupalPreview,
+    decorators: [...drupalDecorators, withYourI18nDecorator],
 }
 
-module.exports = { config, managerEntries };
+export default preview;
 ```
 
-The currently selected theme is available in the `drupalTheme` global, so you can access it using the following snippet:
+The currently selected drupal theme is available in the `drupalTheme` global, so you can access it in a decorator using the following snippet:
 
-```js
-import { useGlobals } from '@storybook/client-api';
+```typescript
+import { MyProvider } from 'your-drupal-library';
+import { useGlobals } from '@storybook/manager-api';
 
 const myDecorator = (story, context) => {
-  const [{ drupalTheme }] = useGlobals();
-  // Do something with the Drupal theme.
-};
+  const [{drupalTheme}] = useGlobals();
+
+  return <MyProvider drupalTheme={drupalTheme}>;
+}
 ```

manager.js

@@ -1 +1 @@
-module.exports = require('./dist/cjs/preset/manager');
+export * from "./dist/manager";

package.json

@@ -13,9 +13,27 @@
   },
   "author": "Mateu Aguiló Bosch <mateu@mateuaguilo.com> (e0ipso)",
   "license": "MIT",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/ts/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./manager": {
+      "require": "./dist/manager.js",
+      "import": "./dist/manager.mjs",
+      "types": "./dist/manager.d.ts"
+    },
+    "./preview": {
+      "require": "./dist/preview.js",
+      "import": "./dist/preview.mjs",
+      "types": "./dist/preview.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
@@ -24,49 +42,54 @@
   ],
   "scripts": {
     "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\"",
+    "build": "tsup",
+    "build:watch": "yarn build --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",
+    "start": "run-p build:watch 'storybook --quiet'",
     "prerelease": "zx scripts/prepublish-checks.mjs",
-    "release": "yarn build && auto shipit"
+    "release": "yarn build && auto shipit",
+    "eject-ts": "zx scripts/eject-typescript.mjs",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "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.9",
-    "@storybook/react": "^6.4.9",
+    "@storybook/addon-essentials": "^7.0.0",
+    "@storybook/addon-interactions": "^7.0.0",
+    "@storybook/addon-links": "^7.0.0",
+    "@storybook/react": "^7.0.0",
+    "@storybook/react-vite": "^7.0.0",
+    "@storybook/testing-library": "^0.0.14-next.1",
+    "@types/node": "^18.15.0",
+    "@types/react": "^18.0.34",
+    "@types/webpack-env": "^1.18.0",
+    "@vitejs/plugin-react": "^3.1.0",
     "auto": "^10.3.0",
-    "babel-loader": "^8.1.0",
     "boxen": "^5.0.1",
-    "concurrently": "^6.2.0",
     "dedent": "^0.7.0",
+    "npm-run-all": "^4.1.5",
     "prettier": "^2.3.1",
-    "prop-types": "^15.7.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "prompts": "^2.4.2",
+    "prop-types": "^15.8.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "rimraf": "^3.0.2",
-    "typescript": "^4.2.4",
+    "storybook": "^7.0.0",
+    "tsup": "^6.6.3",
+    "typescript": "^4.9.5",
+    "vite": "^4.1.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"
+    "@storybook/blocks": "^7.0.0",
+    "@storybook/components": "^7.0.0",
+    "@storybook/core-events": "^7.0.0",
+    "@storybook/manager-api": "^7.0.0",
+    "@storybook/preview-api": "^7.0.0",
+    "@storybook/theming": "^7.0.0",
+    "@storybook/types": "^7.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -82,7 +105,6 @@
   "storybook": {
     "displayName": "Dupal Addon",
     "supportedFrameworks": [
-      "react",
       "server"
     ],
     "icon": "https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"

preview.js

@@ -1 +1 @@
-module.exports = require('./dist/cjs/preset/preview');
+export * from "./dist/preview";