feat(*): add storybook

.eslintrc.json

@@ -1,9 +1,13 @@
 {
   "root": true,
-  "ignorePatterns": ["projects/**/*"],
+  "ignorePatterns": [
+    "projects/**/*"
+  ],
   "overrides": [
     {
-      "files": ["*.ts"],
+      "files": [
+        "*.ts"
+      ],
       "extends": [
         "eslint:recommended",
         "plugin:@typescript-eslint/recommended",
@@ -34,7 +38,9 @@
             "varsIgnorePattern": "^_"
           }
         ],
-        "comma-dangle": ["error"],
+        "comma-dangle": [
+          "error"
+        ],
         "@typescript-eslint/no-inferrable-types": "off",
         "@typescript-eslint/no-non-null-assertion": "off",
         "@typescript-eslint/explicit-function-return-type": "error",
@@ -68,7 +74,9 @@
       }
     },
     {
-      "files": ["*.html"],
+      "files": [
+        "*.html"
+      ],
       "extends": [
         "plugin:@angular-eslint/template/recommended",
         "plugin:@angular-eslint/template/accessibility",
@@ -89,18 +97,29 @@
             ]
           }
         ],
-        "@angular-eslint/template/prefer-self-closing-tags": ["error"],
+        "@angular-eslint/template/prefer-self-closing-tags": [
+          "error"
+        ],
         "tailwindcss/classnames-order": [
           "error",
           {
             "removeDuplicates": true,
             "skipClassAttribute": false
           }
         ],
-        "tailwindcss/no-contradicting-classname": ["error"],
-        "tailwindcss/enforces-shorthand": ["error"]
+        "tailwindcss/no-contradicting-classname": [
+          "error"
+        ],
+        "tailwindcss/enforces-shorthand": [
+          "error"
+        ]
       }
     }
   ],
-  "plugins": ["tailwindcss"]
+  "plugins": [
+    "tailwindcss"
+  ],
+  "extends": [
+    "plugin:storybook/recommended"
+  ]
 }

.gitignore

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

.storybook/main.ts

@@ -0,0 +1,20 @@
+import type { StorybookConfig } from '@storybook/angular';
+
+const config: StorybookConfig = {
+  stories: ['../src/app/**/*.stories.ts'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@chromatic-com/storybook'
+  ],
+  framework: {
+    name: '@storybook/angular',
+    options: {}
+  },
+  docs: {
+    autodocs: 'tag'
+  },
+  staticDirs: ['../src/assets']
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,24 @@
+import { provideHttpClient } from '@angular/common/http';
+import { importProvidersFrom } from '@angular/core';
+import { setCompodocJson } from '@storybook/addon-docs/angular';
+import { applicationConfig, type Preview } from '@storybook/angular';
+import docJson from '../documentation.json';
+import { StorybookTranslateModule } from './utils';
+setCompodocJson(docJson);
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    }
+  },
+  decorators: [
+    applicationConfig({
+      providers: [provideHttpClient(), importProvidersFrom(StorybookTranslateModule)]
+    })
+  ]
+};
+export default preview;

.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"]
+}

.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"]
+}

.storybook/typings.d.ts

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

.storybook/utils.ts

@@ -0,0 +1,26 @@
+import { HttpClient, provideHttpClient } from '@angular/common/http';
+import { LOCALE_ID, NgModule, inject } from '@angular/core';
+import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+
+@NgModule({
+  imports: [
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient) => new TranslateHttpLoader(http, './i18n/', '.json'),
+        deps: [HttpClient]
+      }
+    })
+  ],
+  providers: [provideHttpClient(), { provide: LOCALE_ID, useValue: 'en' }],
+  exports: [TranslateModule]
+})
+export class StorybookTranslateModule {
+  private readonly _translateService = inject(TranslateService);
+
+  public constructor() {
+    this._translateService.setDefaultLang('en');
+    this._translateService.use('en');
+  }
+}

angular.json

@@ -26,11 +26,7 @@
             "browser": "src/main.ts",
             "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets",
-              "src/manifest.webmanifest"
-            ],
+            "assets": ["src/favicon.ico", "src/assets", "src/manifest.webmanifest"],
             "styles": ["src/styles.css"],
             "scripts": []
           },
@@ -76,11 +72,7 @@
           "options": {
             "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets",
-              "src/manifest.webmanifest"
-            ],
+            "assets": ["src/favicon.ico", "src/assets", "src/manifest.webmanifest"],
             "styles": ["src/styles.css"],
             "scripts": []
           }
@@ -90,6 +82,26 @@
           "options": {
             "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
           }
+        },
+        "storybook": {
+          "builder": "@storybook/angular:start-storybook",
+          "options": {
+            "configDir": ".storybook",
+            "browserTarget": "rainbow-palette:build",
+            "compodoc": true,
+            "compodocArgs": ["-e", "json", "-d", ".", "--disablePrivate", "--disableProtected", "-w"],
+            "port": 6006
+          }
+        },
+        "build-storybook": {
+          "builder": "@storybook/angular:build-storybook",
+          "options": {
+            "configDir": ".storybook",
+            "browserTarget": "rainbow-palette:build",
+            "compodoc": true,
+            "compodocArgs": ["-e", "json", "-d", ".", "--disablePrivate", "--disableProtected"],
+            "outputDir": "storybook-static"
+          }
         }
       }
     }