Storybook components

.babelrc.json

@@ -0,0 +1,16 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

.erb/configs/webpack.config.base.ts

@@ -8,7 +8,10 @@ import webpackPaths from './webpack.paths';
 import { dependencies as externals } from '../../release/app/package.json';
 
 let processType: string;
-if (process.env.npm_lifecycle_script?.includes('webpack.config.renderer'))
+if (
+  process.env.npm_lifecycle_script?.includes('webpack.config.renderer') ||
+  process.env.npm_lifecycle_script?.includes('storybook')
+)
   processType = 'renderer';
 else if (
   process.env.npm_lifecycle_script?.includes('webpack.config.extension-host')

.eslintignore

@@ -31,3 +31,4 @@ npm-debug.log.*
 # eslint ignores hidden directories by default:
 # https://github.com/eslint/eslint/issues/8429
 !.erb
+!.storybook

.eslintrc.js

@@ -1,5 +1,6 @@
 module.exports = {
-  extends: 'erb', // https://github.com/electron-react-boilerplate/eslint-config-erb/blob/main/index.js
+  extends: ['erb', 'plugin:storybook/recommended'], // https://github.com/electron-react-boilerplate/eslint-config-erb/blob/main/index.js
+  // https://github.com/storybookjs/eslint-plugin-storybook/blob/main/lib/configs/recommended.ts
   // airbnb rules are embedded in erb https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb
   rules: {
     // #region ERB rules

.gitignore

@@ -24,6 +24,7 @@ node_modules
 release/app/dist
 release/build
 .erb/dll
+storybook-static
 
 .idea
 npm-debug.log.*

.storybook/main.ts

@@ -0,0 +1,83 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+import { mergeWithCustomize } from 'webpack-merge';
+import { RuleSetRule } from 'webpack';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      // speeds up storybook build time
+      // @ts-expect-error The following line is interpreted as an error even though it isn't
+      allowSyntheticDefaultImports: false,
+      // speeds up storybook build time
+      esModuleInterop: false,
+    },
+  },
+
+  // Merge StorybookWebpackConfig with our WebpackRendererConfig
+  // See the current webpack configuration using npm run storybook -- --debug-webpack
+  // TODO: Make this work in production mode
+  webpackFinal: async (webpackConfig, { configType }) => {
+    const rendererConfig =
+      configType === 'PRODUCTION'
+        ? // Storybook is a build tool so this will not affect anything
+          // eslint-disable-next-line global-require
+          require('../.erb/configs/webpack.config.renderer.prod').default
+        : // eslint-disable-next-line global-require
+          require('../.erb/configs/webpack.config.renderer.dev').default;
+    // Remove configs that break stuff (https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config)
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { devServer, entry, output, ...rendererConfigSanitized } =
+      rendererConfig;
+
+    // Remove the Storybook Webpack rules that we already have our own rules for
+    return mergeWithCustomize({
+      customizeObject(wpConfig: object, rConfig: object, key: string) {
+        if (key === 'module') {
+          return mergeWithCustomize({
+            customizeArray(
+              wpModule: object[],
+              rModule: object[],
+              moduleKey: string,
+            ) {
+              if (moduleKey === 'rules') {
+                const wpRules = wpModule as RuleSetRule[];
+                const rRules = rModule as RuleSetRule[];
+                return [
+                  ...wpRules.filter(
+                    (rule) =>
+                      !rule ||
+                      !rule.test ||
+                      (rule.test.toString() !== /\.css$/.toString() &&
+                        rule.test.toString() !==
+                          /\.(mjs|tsx?|jsx?)$/.toString()),
+                  ),
+                  ...rRules,
+                ];
+              }
+
+              return undefined;
+            },
+          })(wpConfig, rConfig);
+        }
+        return undefined;
+      },
+    })(webpackConfig, rendererConfigSanitized);
+  },
+};
+export default config;

.storybook/preview.ts

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

.vscode/launch.json

@@ -59,6 +59,15 @@
       "env": {
         "IN_VSCODE": "true"
       }
+    },
+    {
+      "name": "Storybook",
+      "type": "node",
+      "request": "launch",
+      "protocol": "inspector",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "storybook"],
+      "env": { "autoAttachChildProcesses": true }
     }
   ],
   "compounds": [

README.md

@@ -91,6 +91,26 @@ npm run package
 8. Publish the release on GitHub.
 9. Merge the release branch back into **main** with a merge commit.
 
+## Storybook
+
+To run Storybook locally:
+
+```bash
+npm run storybook
+```
+
+To build Storybook:
+
+```bash
+npm run storybook:build
+```
+
+To run Storybook as a web app:
+
+```bash
+npm run storybook:build {path to storybook-static folder}
+```
+
 ## Windows Development with WSL2
 
 On Windows, you can install [WSL](https://learn.microsoft.com/en-us/windows/wsl/) (Windows Subsystem for Linux) so you can test cross-platform compatibility on Linux (as well as Windows). You'll need to use a Linux distribution with WSL2 (rather than WSL1) so the X-Server windows can be opened for Electron.

extensions/hello-world/hello-world.js

@@ -16,7 +16,7 @@ const getReactComponent = (name, functionModifier = '') =>
     react: {
       context: { TestContext },
       hooks: { usePromise },
-      components: { PButton }
+      components: { Button }
     },
     logger
   } = papi;
@@ -46,10 +46,10 @@ const getReactComponent = (name, functionModifier = '') =>
     return createElement('div', null,
       createElement('div', null,
         createElement(
-          PButton,
+          Button,
           {
             onClick: () => {
-              logger.log('${name} PButton clicked!');
+              logger.log('${name} Button clicked!');
               setMyState(myStateCurrent => myStateCurrent + 1);
               papi.fetch('https://bible-api.com/matthew+24:14')
     .then((res) => res.json())
@@ -59,7 +59,7 @@ const getReactComponent = (name, functionModifier = '') =>
     );
             }
           },
-          'Hello World PButton ',
+          'Hello World Button ',
           myState
         )
       ),
@@ -71,7 +71,7 @@ const getReactComponent = (name, functionModifier = '') =>
       ),
       createElement('div', null,
           createElement(
-            PButton,
+            Button,
             {
               onClick: () => {
                 throw new Error('${name} test exception!');