Fix Storybook server and update to latest version

- Fix build for Storybook
- Update Storybook and dependencies to latest version
- Update Storybook files from React template
- Add task to CI to verify Storybook build

.github/workflows/node.js.yml

@@ -26,9 +26,10 @@ jobs:
         node-version: ${{ matrix.node-version }}
         check-latest: true
 
-    - run: yarn install
+    - run: yarn install --frozen-lockfile
     - run: yarn format-check
     - run: yarn check-types
     - run: yarn build
+    - run: yarn build-storybook
     - run: yarn lint
     - run: yarn test

.gitignore

@@ -90,8 +90,7 @@ lib/
 # public
 
 # Storybook build outputs
-.out
-.storybook-out
+storybook-static/
 
 # vuepress build output
 .vuepress/dist

.storybook/main.js

@@ -1,11 +1,19 @@
 module.exports = {
-  "stories": [
+  stories: [
     "../src/**/*.stories.mdx",
     "../src/**/*.stories.@(js|jsx|ts|tsx)"
   ],
-  "addons": [
+  addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "@storybook/preset-create-react-app"
+    {
+      name: "@storybook/addon-postcss",
+      options: {
+        // Explicitly enable PostCSS 8+ (see: https://storybook.js.org/addons/@storybook/addon-postcss)
+        postcssLoaderOptions: {
+          implementation: require("postcss"),
+        },
+      },
+    },
   ]
 }

.storybook/preview.js

@@ -1,4 +1,9 @@
-
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
 }

package.json

@@ -14,17 +14,17 @@
   },
   "scripts": {
     "build": "snowpack build",
-    "build-storybook": "build-storybook -s public",
     "check-types": "tsc -p ./",
     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
     "format-check": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"",
     "lint": "eslint ./src/**/*.ts*",
     "postinstall": "grunt",
     "start": "snowpack dev",
-    "storybook": "start-storybook -p 6006 -s public",
     "test": "jest",
     "start:cypress": "cypress open",
-    "start:cypress-tests": "cypress run"
+    "start:cypress-tests": "cypress run",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
     "@patternfly/patternfly": "^4.115.2",
@@ -51,15 +51,11 @@
     "@snowpack/app-scripts-react": "^1.12.6",
     "@snowpack/plugin-postcss": "1.4.3",
     "@snowpack/plugin-webpack": "3.0.0",
-    "@storybook/addon-actions": "^6.2.9",
-    "@storybook/addon-essentials": "^6.1.7",
-    "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.2.9",
-    "@storybook/addons": "^6.2.9",
-    "@storybook/node-logger": "^6.1.7",
-    "@storybook/preset-create-react-app": "^3.1.7",
-    "@storybook/preset-typescript": "^3.0.0",
-    "@storybook/react": "^6.2.9",
+    "@storybook/addon-actions": "^6.3.2",
+    "@storybook/addon-essentials": "^6.3.2",
+    "@storybook/addon-links": "^6.3.2",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/react": "^6.3.2",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@types/dot": "^1.1.4",