Chore/upgrade storybook7

.ls-lint.yml

@@ -14,7 +14,7 @@ ls:
   .woff: kebabcase
   .woff2: kebabcase
 
-ignore: 
+ignore:
   - .git
   - .greenwood
   - node_modules

.storybook/main.cjs → .storybook/main.js

@@ -1,27 +1,28 @@
-const path = require('path');
+import path from 'path';
 
 module.exports = {
   staticDirs: ['../src'],
-  stories: [
-    '../src/**/*.stories.mdx',
-    '../src/**/*.stories.@(js|jsx|ts|tsx)'
-  ],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-postcss'
-  ],
-  framework: '@storybook/web-components',
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', {
+    name: '@storybook/addon-postcss',
+    options: {
+      postcssLoaderOptions: {
+        implementation: require('postcss')
+      }
+    }
+  }],
+  framework: {
+    name: '@storybook/web-components-webpack5',
+    options: {}
+  },
   // set publicPath (e.g. `<base href="..." />`) for GitHub Pages
   // https://github.com/storybookjs/storybook/issues/12444#issuecomment-1179671255
   // Note: Used string-replace-loader@^2.x for webpack v4 compat to support current Storybook
-  webpackFinal: async (config) => {
+  webpackFinal: async config => {
     if (process.env.GH_PAGES) {
       config.module.rules.push({
         test: /.js$/,
-        include: [
-          path.resolve(__dirname, '../src/components')
-        ],
+        include: [path.resolve(__dirname, '../src/components')],
         loader: 'string-replace-loader',
         options: {
           search: /\/assets\//g,
@@ -30,5 +31,8 @@ module.exports = {
       });
     }
     return config;
+  },
+  docs: {
+    autodocs: true
   }
 };

.storybook/preview.cjs → .storybook/preview.js

@@ -1,11 +1,13 @@
 import '../src/styles/main.css';
 
-export const parameters = {
+const preview = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/
     }
   }
-};
+};
+
+export default preview;

package.json

@@ -17,9 +17,9 @@
     "dev": "greenwood develop",
     "build": "NODE_ENV=production greenwood build",
     "serve": "NODE_ENV=production greenwood serve",
-    "story:dev": "start-storybook -p 6006",
-    "story:build": "build-storybook",
-    "story:serve": "build-storybook && http-server ./storybook-static",
+    "story:dev": "storybook dev -p 6006",
+    "story:build": "storybook build",
+    "story:serve": "storybook build && http-server ./storybook-static",
     "test": "wtr",
     "test:tdd": "yarn test --watch",
     "lint": "ls-lint && yarn lint:js && yarn lint:css",
@@ -28,33 +28,32 @@
     "clean": "rimraf public/ .greenwood/ ./storybook-static"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.13",
     "@esm-bundle/chai": "^4.3.4",
     "@greenwood/cli": "~0.27.0",
     "@greenwood/plugin-postcss": "~0.27.0",
     "@ls-lint/ls-lint": "^1.10.0",
-    "@storybook/addon-actions": "^6.5.10",
-    "@storybook/addon-essentials": "^6.5.10",
-    "@storybook/addon-links": "^6.5.10",
+    "@storybook/addon-actions": "^7.0.0-beta.61",
+    "@storybook/addon-essentials": "^7.0.0-beta.61",
+    "@storybook/addon-links": "^7.0.0-beta.61",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-webpack4": "^6.5.10",
-    "@storybook/manager-webpack4": "^6.5.10",
-    "@storybook/web-components": "^6.5.10",
-    "@tailwindcss/postcss7-compat": "^2.2.17",
+    "@storybook/web-components": "^7.0.0-beta.61",
+    "@storybook/web-components-webpack5": "^7.0.0-beta.61",
     "@web/test-runner": "^0.13.13",
     "@web/test-runner-junit-reporter": "^0.4.4",
     "@web/test-runner-puppeteer": "^0.10.0",
     "autoprefixer": "^9.8.8",
-    "babel-loader": "^8.2.5",
     "eslint": "^8.23.0",
     "eslint-plugin-no-only-tests": "^3.1.0",
     "http-server": "^14.1.1",
-    "lit-html": "^2.3.1",
+    "lit": "^2.1.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rimraf": "^3.0.2",
+    "storybook": "^7.0.0-beta.61",
     "string-replace-loader": "^2.3.0",
     "stylelint": "^13.8.0",
     "stylelint-a11y": "^1.2.3",
     "stylelint-config-standard": "^20.0.0",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
+    "tailwindcss": "^2.2.19"
   }
 }