feat(*): add missing stories

.gitignore

@@ -41,4 +41,5 @@ testem.log
 .DS_Store
 Thumbs.db
 
-*storybook.log
+*storybook.log
+documentation.json

.storybook/main.ts

@@ -15,6 +15,6 @@ const config: StorybookConfig = {
   docs: {
     autodocs: 'tag'
   },
-  staticDirs: ['../src/assets']
+  staticDirs: [{ from: '../src/assets', to: 'assets' }]
 };
 export default config;

.storybook/utils.ts

@@ -8,7 +8,7 @@ import { TranslateHttpLoader } from '@ngx-translate/http-loader';
     TranslateModule.forRoot({
       loader: {
         provide: TranslateLoader,
-        useFactory: (http: HttpClient) => new TranslateHttpLoader(http, './i18n/', '.json'),
+        useFactory: (http: HttpClient) => new TranslateHttpLoader(http),
         deps: [HttpClient]
       }
     })

angular.json

@@ -89,7 +89,7 @@
             "configDir": ".storybook",
             "browserTarget": "rainbow-palette:build",
             "compodoc": true,
-            "compodocArgs": ["-e", "json", "-d", ".", "--disablePrivate", "--disableProtected", "-w"],
+            "compodocArgs": ["-e", "json", "-d", ".", "--disablePrivate", "--disableProtected", "-w", "-t"],
             "port": 6006
           }
         },

src/app/export/export-modal.component.stories.ts

@@ -0,0 +1,33 @@
+import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';
+import { Meta, applicationConfig } from '@storybook/angular';
+import { Tailwind } from '../shared/constants/tailwind-colors';
+import { AnalyticsService, AnalyticsServiceMock } from '../shared/data-access/analytics.service';
+import { ExportService, ExportServiceMock } from '../shared/data-access/export.service';
+import { ToastService, ToastServiceMock } from '../shared/data-access/toast.service';
+import { createStory } from '../shared/utils/storybook';
+import { ExportModalComponent } from './export-modal.component';
+
+const meta: Meta<ExportModalComponent> = {
+  title: 'Export/Export',
+  component: ExportModalComponent,
+  tags: ['autodocs'],
+  decorators: [
+    applicationConfig({
+      providers: [
+        { provide: DIALOG_DATA, useValue: { palette: Tailwind } },
+        {
+          provide: DialogRef,
+          useValue: {
+            close: (): void => {}
+          }
+        },
+        { provide: ToastService, useClass: ToastServiceMock },
+        { provide: ExportService, useClass: ExportServiceMock },
+        { provide: AnalyticsService, useClass: AnalyticsServiceMock }
+      ]
+    })
+  ]
+};
+export default meta;
+
+export const Export = createStory<ExportModalComponent>({});

src/app/export/ui/export-download/export-download.component.stories.ts

@@ -0,0 +1,30 @@
+import { Meta } from '@storybook/angular';
+import { ExportFormat } from '../../../shared/constants/export-format';
+import { createStory } from '../../../shared/utils/storybook';
+import { ExportDownloadComponent } from './export-download.component';
+
+const meta: Meta<ExportDownloadComponent> = {
+  title: 'Export/Download',
+  component: ExportDownloadComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    exportFormat: {
+      control: 'select',
+      type: {
+        name: 'enum',
+        value: Object.values(ExportFormat).filter((format) => format !== ExportFormat.OTHER),
+        required: true
+      }
+    },
+    choseDownloadFormat: {
+      table: {
+        disable: true
+      }
+    }
+  }
+};
+export default meta;
+
+export const Download = createStory<ExportDownloadComponent>({
+  args: { exportFormat: ExportFormat.LESS }
+});

src/app/export/ui/export-format/export-format.component.stories.ts

@@ -0,0 +1,19 @@
+import { Meta } from '@storybook/angular';
+import { createStory } from '../../../shared/utils/storybook';
+import { ExportFormatComponent } from './export-format.component';
+
+const meta: Meta<ExportFormatComponent> = {
+  title: 'Export/Format',
+  component: ExportFormatComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    choseExportFormat: {
+      table: {
+        disable: true
+      }
+    }
+  }
+};
+export default meta;
+
+export const Format = createStory<ExportFormatComponent>({});

src/app/export/ui/export-success/export-success.component.stories.ts

@@ -0,0 +1,40 @@
+import { Meta } from '@storybook/angular';
+import { ExportFormat } from '../../../shared/constants/export-format';
+import { createStory } from '../../../shared/utils/storybook';
+import { ExportSuccessComponent } from './export-success.component';
+
+const meta: Meta<ExportSuccessComponent> = {
+  title: 'Export/Success',
+  component: ExportSuccessComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    exportOption: {
+      type: {
+        name: 'enum',
+        value: ['copy', 'file'],
+        required: true
+      }
+    },
+    exportFormat: {
+      control: 'select',
+      type: {
+        name: 'enum',
+        value: Object.values(ExportFormat).filter((format) => format !== ExportFormat.OTHER),
+        required: true
+      }
+    },
+    openDocumentation: {
+      table: {
+        disable: true
+      }
+    }
+  }
+};
+export default meta;
+
+export const Copy = createStory<ExportSuccessComponent>({
+  args: { exportOption: 'copy', exportFormat: ExportFormat.CSS }
+});
+export const File = createStory<ExportSuccessComponent>({
+  args: { exportOption: 'file', exportFormat: ExportFormat.TAILWIND }
+});

src/app/export/ui/request-format/request-format.component.stories.ts

@@ -0,0 +1,12 @@
+import { Meta } from '@storybook/angular';
+import { createStory } from '../../../shared/utils/storybook';
+import { RequestFormatComponent } from './request-format.component';
+
+const meta: Meta<RequestFormatComponent> = {
+  title: 'Export/Request Format',
+  component: RequestFormatComponent,
+  tags: ['autodocs']
+};
+export default meta;
+
+export const RequestFormat = createStory<RequestFormatComponent>({});

src/app/home/ui/home-generator/home-generator.component.stories.ts

@@ -0,0 +1,34 @@
+import { Meta } from '@storybook/angular';
+import { PaletteScheme } from '../../../shared/constants/palette-scheme';
+import { createStory } from '../../../shared/utils/storybook';
+import { HomeGeneratorComponent } from './home-generator.component';
+
+const meta: Meta<HomeGeneratorComponent> = {
+  title: 'Home/Generator',
+  component: HomeGeneratorComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    scheme: {
+      control: {
+        type: 'select'
+      },
+      type: {
+        name: 'enum',
+        value: Object.values(PaletteScheme)
+      }
+    },
+    generate: {
+      table: {
+        disable: true
+      }
+    }
+  }
+};
+export default meta;
+
+export const Generator = createStory<HomeGeneratorComponent>({
+  args: {
+    hex: '#3B82F6',
+    scheme: PaletteScheme.RAINBOW
+  }
+});

src/app/home/ui/home-manual/home-manual.component.stories.ts

@@ -0,0 +1,12 @@
+import { Meta } from '@storybook/angular';
+import { createStory } from '../../../shared/utils/storybook';
+import { HomeManualComponent } from './home-manual.component';
+
+const meta: Meta<HomeManualComponent> = {
+  title: 'Home/Manual',
+  component: HomeManualComponent,
+  tags: ['autodocs']
+};
+export default meta;
+
+export const Manual = createStory<HomeManualComponent>({});

src/app/home/ui/home-support/home-support.component.stories.ts

@@ -0,0 +1,12 @@
+import { Meta } from '@storybook/angular';
+import { createStory } from '../../../shared/utils/storybook';
+import { HomeSupportComponent } from './home-support.component';
+
+const meta: Meta<HomeSupportComponent> = {
+  title: 'Home/Support',
+  component: HomeSupportComponent,
+  tags: ['autodocs']
+};
+export default meta;
+
+export const Support = createStory<HomeSupportComponent>({});

src/app/layout/constants/navigation-entries.ts

@@ -0,0 +1,23 @@
+import { heroAdjustmentsHorizontalSolid, heroRectangleGroupSolid, heroSwatchSolid } from '@ng-icons/heroicons/solid';
+import { NavigationEntry } from '../types/navigation-entry';
+
+export const NAVIGATION_ENTRIES: Array<NavigationEntry> = [
+  {
+    title: 'layout.navigation.generate.title',
+    path: '/',
+    icon: heroSwatchSolid,
+    description: 'layout.navigation.generate.description'
+  },
+  {
+    title: 'layout.navigation.view.title',
+    path: '/view',
+    icon: heroAdjustmentsHorizontalSolid,
+    description: 'layout.navigation.view.description'
+  },
+  {
+    title: 'layout.navigation.preview.title',
+    path: '/preview',
+    icon: heroRectangleGroupSolid,
+    description: 'layout.navigation.preview.description'
+  }
+];

src/app/layout/layout.component.css

@@ -2,3 +2,7 @@
   padding-top: var(--header-height);
   padding-bottom: calc(var(--bottom-navigation-height) + var(--analytics-consent-height));
 }
+
+#consent {
+  margin-bottom: var(--bottom-navigation-height);
+}

src/app/layout/layout.component.html

@@ -42,7 +42,12 @@ <h1>
     </main>
   }
   @if (showAnalyticsConsent()) {
-    <rp-layout-analytics-consent (consent)="analyticsConsent($event)" />
+    <div
+      class="fixed bottom-0 left-0"
+      id="consent"
+    >
+      <rp-layout-analytics-consent (consent)="analyticsConsent($event)" />
+    </div>
   }
   @if (isMobile()) {
     <div

src/app/layout/layout.component.ts

@@ -1,7 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { AfterViewInit, Component, ElementRef, computed, effect, inject, signal, viewChild } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import { heroAdjustmentsHorizontalSolid, heroRectangleGroupSolid, heroSwatchSolid } from '@ng-icons/heroicons/solid';
 import { TranslateModule } from '@ngx-translate/core';
 import { AnalyticsService, AnalyticsStatus } from '../shared/data-access/analytics.service';
 import { LanguageService } from '../shared/data-access/language.service';
@@ -10,8 +9,8 @@ import { PwaService } from '../shared/data-access/pwa.service';
 import { ThemeService } from '../shared/data-access/theme.service';
 import { Theme } from '../shared/types/theme';
 import { sleep } from '../shared/utils/sleep';
+import { NAVIGATION_ENTRIES } from './constants/navigation-entries';
 import { Language } from './types/language';
-import { NavigationEntry } from './types/navigation-entry';
 import { LayoutAnalyticsConsentComponent } from './ui/layout-analytics-consent/layout-analytics-consent.component';
 import { LayoutFooterComponent } from './ui/layout-footer/layout-footer.component';
 import { LayoutNavigationComponent } from './ui/layout-navigation/layout-navigation.component';
@@ -45,26 +44,7 @@ export class LayoutComponent implements AfterViewInit {
   private readonly _bottomNavigation = viewChild<ElementRef<HTMLElement>>('bottomNavigation');
   private readonly _analytics = viewChild(LayoutAnalyticsConsentComponent);
 
-  protected readonly navigationEntries: Array<NavigationEntry> = [
-    {
-      title: 'layout.navigation.generate.title',
-      path: '/',
-      icon: heroSwatchSolid,
-      description: 'layout.navigation.generate.description'
-    },
-    {
-      title: 'layout.navigation.view.title',
-      path: '/view',
-      icon: heroAdjustmentsHorizontalSolid,
-      description: 'layout.navigation.view.description'
-    },
-    {
-      title: 'layout.navigation.preview.title',
-      path: '/preview',
-      icon: heroRectangleGroupSolid,
-      description: 'layout.navigation.preview.description'
-    }
-  ];
+  protected readonly navigationEntries = NAVIGATION_ENTRIES;
   protected readonly isMobile = this._mobileService.isMobile;
   protected readonly language = this._languageService.language;
   protected readonly theme = this._themeService.theme;

src/app/layout/ui/layout-analytics-consent/layout-analytics-consent.component.stories.ts

@@ -0,0 +1,30 @@
+import { ActivatedRoute } from '@angular/router';
+import { Meta, applicationConfig } from '@storybook/angular';
+import { createStory } from '../../../shared/utils/storybook';
+import { LayoutAnalyticsConsentComponent } from './layout-analytics-consent.component';
+
+const meta: Meta<LayoutAnalyticsConsentComponent> = {
+  title: 'Layout/Analytics Consent',
+  component: LayoutAnalyticsConsentComponent,
+  tags: ['autodocs'],
+  decorators: [
+    applicationConfig({
+      providers: [{ provide: ActivatedRoute, useValue: {} }]
+    })
+  ],
+  argTypes: {
+    consent: {
+      table: {
+        disable: true
+      }
+    },
+    height: {
+      table: {
+        disable: true
+      }
+    }
+  }
+};
+export default meta;
+
+export const AnalyticsConsent = createStory<LayoutAnalyticsConsentComponent>({});

src/app/layout/ui/layout-analytics-consent/layout-analytics-consent.component.ts

@@ -7,7 +7,7 @@ import { TranslateModule } from '@ngx-translate/core';
   standalone: true,
   imports: [TranslateModule, RouterLink],
   templateUrl: './layout-analytics-consent.component.html',
-  styleUrl: './layout-analytics-consent.component.css'
+  styles: ':host { display: block; }'
 })
 export class LayoutAnalyticsConsentComponent {
   protected readonly matomo = '<a href="https://matomo.org/" target="_blank" class="underline">Matomo</a>';

src/app/layout/ui/layout-footer/layout-footer.component.stories.ts

@@ -0,0 +1,27 @@
+import { ActivatedRoute } from '@angular/router';
+import { Meta, applicationConfig } from '@storybook/angular';
+import { VersionService, VersionServiceMock } from '../../../shared/data-access/version.service';
+import { createStory } from '../../../shared/utils/storybook';
+import { LayoutFooterComponent } from './layout-footer.component';
+
+const meta: Meta<LayoutFooterComponent> = {
+  title: 'Layout/Footer',
+  component: LayoutFooterComponent,
+  tags: ['autodocs'],
+  decorators: [
+    applicationConfig({
+      providers: [
+        { provide: ActivatedRoute, useValue: {} },
+        { provide: VersionService, useClass: VersionServiceMock }
+      ]
+    })
+  ],
+  argTypes: {}
+};
+export default meta;
+
+export const Footer = createStory<LayoutFooterComponent>({
+  args: {
+    logoAsset: 'assets/rainbow-palette-dark.svg'
+  }
+});