Setup Storybook 📖! (#24)

* [WIP] attempt to setup dev server

* [WIP] setup storybook! 🚀🎉 (build is broken though)

* removed ts-loader and completely rely on babel 🗿

* added .nvmrc + fix babel config + storybook config

* remove dev server and instead use storybook

* revert back generatePreview to fix import flow

* change package.json:type to module (not sure if this is a good plan though)

* fix for rollup dependency in CI

* 1.2.0

* 1.3.0

.babel.config.json

@@ -0,0 +1,4 @@
+{
+  "sourceType": "unambiguous",
+  "presets": ["@babel/preset-env", "@babel/preset-typescript"]
+}

.github/workflows/main.yml

@@ -20,5 +20,8 @@ jobs:
         run: npm ci
       - name: Run build
         run: npm run build
+      - name: Install testing dependency
+        # fix for CI, there should be a better way to fix this
+        run: npm install "@rollup/rollup-linux-x64-gnu"
       - name: Run unit tests
         run: npm run test

.gitignore

@@ -12,3 +12,13 @@ src/server/config.json
 
 # unit test coverage
 coverage/
+
+# certs
+*.pem
+certs/
+
+# env secrets
+.env
+
+# storybook
+storybook-static/

.storybook/main.ts

@@ -0,0 +1,25 @@
+import { StorybookConfig } from '@storybook/react-webpack5';
+import { join, dirname } from 'path';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string) {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+
+const config: StorybookConfig = {
+  stories: ['../src/client/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-onboarding'),
+    getAbsolutePath('@storybook/addon-interactions'),
+  ],
+  framework: '@storybook/react-webpack5',
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

.storybook/preview.js

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