Merge branch 'feat/5444-storybook' into 'master'

(infra): support for storybook - #5444

See merge request minds/front!1853

Author: markharding

.gitignore

@@ -47,4 +47,5 @@ cypress/videos
 !.gitkeep
 !/.nvmrc
 !/.husky
+!/.storybook
 cypress-tests

.storybook/main.js

@@ -0,0 +1,16 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "storybook-addon-themes",
+  ],
+  "framework": "@storybook/angular",
+  "core": {
+    "builder": "@storybook/builder-webpack5"
+  }
+}

.storybook/preview.js

@@ -0,0 +1,30 @@
+import { setCompodocJson } from "@storybook/addon-docs/angular";
+import docJson from "../documentation.json";
+setCompodocJson(docJson);
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  docs: { inlineStories: true },
+  themes: {
+    clearable: false,
+    list: [
+      {
+        name: "light mode",
+        class: [ "m-theme__2020", "m-theme__light" ], 
+        color: "#FFF",
+        default: true 
+      },
+      {
+        name: "dark mode",
+        class: [ "m-theme__2020", "m-theme__dark" ], 
+        color: "#111",
+      }
+    ]
+  }
+}

.storybook/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../src/tsconfig.app.json",
+  "exclude": [
+    "../src/test.ts",
+    "../src/**/*.spec.ts",
+    "../projects/**/*.spec.ts"
+  ],
+  "include": [
+    "../src/**/*.stories.*",
+    "../src/**/*.d.ts"
+  ]
+}

.storybook/typings.d.ts

@@ -0,0 +1,4 @@
+declare module '*.md' {
+  const content: string;
+  export default content;
+}

angular.json

@@ -238,6 +238,19 @@
             }
           },
           "defaultConfiguration": ""
+        },
+        "storybook": {
+          "builder": "@storybook/angular:start-storybook",
+          "options": {
+            "browserTarget": "minds:build",
+            "port": 6006
+          }
+        },
+        "build-storybook": {
+          "builder": "@storybook/angular:build-storybook",
+          "options": {
+            "browserTarget": "minds:build"
+          }
         }
       }
     },

build/ng-bundles.sh

@@ -3,6 +3,7 @@
 BROWSER_PATH=${1:-dist/browser}
 EMBED_PATH=${1:-dist/embed}
 SERVER_PATH=${3:-dist/server}
+STORYBOOK_PATH=${3:-dist/storybook}
 
 # Allow Node.js to use up to 4G
 export NODE_OPTIONS="--max_old_space_size=4096"
@@ -21,3 +22,8 @@ if [ "$?" != "0" ]; then exit 1; fi
 # Build SSR
 npm run build:ssr -- --outputPath=$SERVER_PATH
 if [ "$?" != "0" ]; then exit 1; fi
+
+# Build Storybook
+npm run build-storybook
+if [ "$?" != "0" ]; then exit 1; fi
+mv "storybook-static/" $STORYBOOK_PATH