Init Storybook.js (#7)

.github/workflows/chromatic.yml

@@ -0,0 +1,31 @@
+name: "Chromatic"
+
+on: push
+
+jobs:
+  chromatic:
+    name: Run Chromatic
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+      - name: Install dependencies
+        # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
+        working-directory: ./webapp
+        run: npm ci
+      - name: Run Chromatic
+        id: chromatic
+        uses: chromaui/action@latest
+        with:
+          # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          autoAcceptChanges: "develop"
+          workingDir: webapp
+          skip: "dependabot/**"
+      - name: Publish Summary
+        run: echo -e "| Results |  |\n| --- | --- |\n| Build Results | ${{ steps.chromatic.outputs.buildUrl }} |\n| Storybook Preview | ${{ steps.chromatic.outputs.storybookUrl }} |\n| Component Count | ${{steps.chromatic.outputs.componentCount}} |" >> $GITHUB_STEP_SUMMARY

webapp/.gitignore

@@ -40,3 +40,5 @@ testem.log
 # System files
 .DS_Store
 Thumbs.db
+
+*storybook.log

webapp/.storybook/main.ts

@@ -0,0 +1,18 @@
+import type { StorybookConfig } from "@storybook/angular";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|mjs|ts)"],
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+    "@storybook/addon-themes",
+  ],
+  framework: {
+    name: "@storybook/angular",
+    options: {},
+  },
+};
+export default config;

webapp/.storybook/preview.ts

@@ -0,0 +1,62 @@
+import { Preview } from '@storybook/angular';
+import { withThemeByClassName } from '@storybook/addon-themes';
+import { DocsContainer } from '@storybook/blocks';
+import { createElement } from 'react';
+import { themes } from '@storybook/core/theming';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    backgrounds: { disable: true },
+    docs: {
+      // Fix for the DocsContainer theme
+      container: (props: any) => {
+        // Function to get the computed CSS variable value
+        const getCSSVariableValue = (variableName: string) => {
+          const el = document.createElement('div');
+          el.style.display = 'none';
+          el.style.setProperty('--dummy', 'initial');
+          document.body.appendChild(el);
+          const computedStyle = getComputedStyle(el);
+          const value = computedStyle.getPropertyValue(variableName);
+          document.body.removeChild(el);
+          return value.trim();
+        };
+
+        // Function to get the HSL value of the --background variable
+        const getBackgroundHSL = (theme: 'light' | 'dark') => {
+          document.documentElement.className = theme;
+          return getCSSVariableValue('--background');
+        };
+
+        // Fixing the theme for the DocsContainer
+        const el = document.querySelector("html");
+        const currentTheme = props?.context.store.globals.globals.theme;
+        el!.dataset['theme'] = currentTheme;
+        const theme = props?.context.store.globals.globals.theme === 'dark' ? themes.dark: themes.light;
+        const backgroundHSL = getBackgroundHSL(currentTheme);
+        props.theme = {
+          ...theme,
+          appContentBg: `hsl(${backgroundHSL})`,
+        };
+        return createElement(DocsContainer, props);
+      },
+    },
+  },
+  decorators: [
+    withThemeByClassName({
+      themes: {
+        light: '',
+        dark: 'dark bg-background',
+      },
+      defaultTheme: 'light',
+    }),
+  ],
+};
+
+export default preview;

webapp/.storybook/tsconfig.doc.json

@@ -0,0 +1,10 @@
+// This tsconfig is used by Compodoc to generate the documentation for the project.
+// If Compodoc is not used, this file can be deleted.
+{
+  "extends": "./tsconfig.json",
+  // Exclude all files that are not needed for documentation generation.
+  "exclude": ["../src/test.ts", "../src/**/*.spec.ts", "../src/**/*.stories.ts"],
+  // Please make sure to include all files from which Compodoc should generate documentation.
+  "include": ["../src/**/*"],
+  "files": ["./typings.d.ts"]
+}

webapp/.storybook/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../tsconfig.app.json",
+  "compilerOptions": {
+    "types": ["node"],
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true
+  },
+  "exclude": ["../src/test.ts", "../src/**/*.spec.ts"],
+  "include": ["../src/**/*.stories.*", "./preview.ts"],
+  "files": ["./typings.d.ts"]
+}

webapp/.storybook/typings.d.ts

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

webapp/angular.json

@@ -36,7 +36,7 @@
       },
       "root": "",
       "sourceRoot": "src",
-      "prefix": "",
+      "prefix": "app",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:application",
@@ -117,8 +117,27 @@
             ],
             "scripts": []
           }
+        },
+        "storybook": {
+          "builder": "@storybook/angular:start-storybook",
+          "options": {
+            "configDir": ".storybook",
+            "browserTarget": "webapp:build",
+            "styles": ["src/styles.css"],
+            "compodoc": false,
+            "port": 6006
+          }
+        },
+        "build-storybook": {
+          "builder": "@storybook/angular:build-storybook",
+          "options": {
+            "configDir": ".storybook",
+            "browserTarget": "webapp:build",
+            "compodoc": false,
+            "outputDir": "storybook-static"
+          }
         }
       }
     }
   }
-}
+}