Merge pull request #170 from simonbukin/add-client-storybook

First draft of client Storybook integration

apps/client/.babelrc.json

@@ -0,0 +1,14 @@
+{
+    "presets": [
+        "@babel/preset-typescript",
+        "@babel/preset-env",
+        [
+            "@nrwl/react/babel",
+            {
+                "runtime": "automatic",
+                "useBuiltIns": "usage"
+            }
+        ]
+    ],
+    "plugins": []
+}

apps/client/.storybook/main.js

@@ -0,0 +1,18 @@
+const rootMain = require('../../../.storybook/main')
+
+module.exports = {
+    ...rootMain,
+    core: { ...rootMain.core, builder: 'webpack5' },
+    stories: ['../**/*.stories.@(js|jsx|ts|tsx)'],
+    addons: [...rootMain.addons, '@nrwl/react/plugins/storybook'],
+    webpackFinal: async (config, { configType }) => {
+        // apply any global webpack configs that might have been specified in .storybook/main.js
+        if (rootMain.webpackFinal) {
+            config = await rootMain.webpackFinal(config, { configType })
+        }
+
+        // add your own webpack tweaks if needed
+
+        return config
+    },
+}

apps/client/.storybook/tsconfig.json

@@ -0,0 +1,5 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {},
+    "include": ["**/*.ts", "**/*.tsx", "**/**/*.ts", "**/**/*.tsx"]
+}

apps/client/components/Maintenance.stories.tsx

@@ -0,0 +1,18 @@
+import type { Story, Meta } from '@storybook/react'
+import Maintenance from './Maintenance.tsx'
+import React from 'react'
+
+export default {
+    title: 'components/Maintenance.tsx',
+    component: Maintenance,
+} as Meta
+
+const Template: Story = () => {
+    return (
+        <>
+            <Maintenance />
+        </>
+    )
+}
+
+export const Base = Template.bind({})

apps/client/tsconfig.json

@@ -27,5 +27,17 @@
         "next-env.d.ts",
         ".next/types/**/*.ts"
     ],
-    "exclude": ["node_modules", "jest.config.ts"]
+    "exclude": [
+        "node_modules",
+        "jest.config.ts",
+        "**/*.stories.ts",
+        "**/*.stories.js",
+        "**/*.stories.jsx",
+        "**/*.stories.tsx"
+    ],
+    "references": [
+        {
+            "path": "./.storybook/tsconfig.json"
+        }
+    ]
 }

workspace.json

@@ -66,6 +66,33 @@
                     "options": {
                         "command": "node tools/scripts/triggerClientDeploy.js"
                     }
+                },
+                "storybook": {
+                    "executor": "@nrwl/storybook:storybook",
+                    "options": {
+                        "uiFramework": "@storybook/react",
+                        "port": 4400,
+                        "configDir": "apps/client/.storybook"
+                    },
+                    "configurations": {
+                        "ci": {
+                            "quiet": true
+                        }
+                    }
+                },
+                "build-storybook": {
+                    "executor": "@nrwl/storybook:build",
+                    "outputs": ["{options.outputDir}"],
+                    "options": {
+                        "uiFramework": "@storybook/react",
+                        "outputDir": "dist/storybook/client",
+                        "configDir": "apps/client/.storybook"
+                    },
+                    "configurations": {
+                        "ci": {
+                            "quiet": true
+                        }
+                    }
                 }
             },
             "tags": ["scope:app"]