Add example storybook

.storybook/main.js

@@ -1,9 +1,28 @@
-module.exports = {
+// License: LGPL-3.0-or-later
-  stories: ['../stories/**/*.stories.js'],
+// Based on https://github.com/rails/webpacker/issues/1004#issuecomment-628377930
-  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+process.env.NODE_ENV = "development";
-  webpackFinal: async config => {
+const railsWebpackEnv = require("../config/webpack/environment");
-    // do mutation to the config
 
-    return config;
+module.exports = {
+  stories: ["../app/javascript/stories/*.[tj]s?(x)"],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+  webpackFinal: (config) => ({
+    // do mutation to the config
+    ...config,
+    resolve: {
+      ...config.resolve,
+      ...railsWebpackEnv.config.resolve,
+      modules: railsWebpackEnv.resolvedModules.map((i) => i.value),
     },
+    module: {
+      ...config.module,
+      rules: railsWebpackEnv.loaders
+        .filter((i) => i.key !== "nodeModules")
+        .map((i) => i.value),
+    },
+    plugins: [
+      ...config.plugins,
+      ...railsWebpackEnv.plugins.map((i) => i.value),
+    ],
+  }),
 };

app/javascript/stories/index.jsx

@@ -0,0 +1,15 @@
+// License: LGPL-3.0-or-later
+import React from 'react';
+import { Button } from '@storybook/react/demo';
+
+export default { title: 'Button' };
+
+export const withText = () => <Button>Hello Button</Button>;
+
+export const withEmoji = () => (
+  <Button>
+    <span role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+);