@team-codeme/crud-forge 0.0.0-stage → 1.0.0

package/fuse-starter-pack/fuse-v21.1/src/app/core/icons/provider.ts

@@ -0,0 +1,23 @@
+import {
+  EnvironmentProviders,
+  inject,
+  makeEnvironmentProviders,
+  provideAppInitializer,
+} from '@angular/core';
+import { MatIconRegistry } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
+import { lucideIcons } from './lucide';
+
+export const provideIcons = (): EnvironmentProviders =>
+  makeEnvironmentProviders([
+    provideAppInitializer(() => {
+      const domSanitizer = inject(DomSanitizer);
+      const matIconRegistry = inject(MatIconRegistry);
+
+      // Lucide icons
+      matIconRegistry.addSvgIconSetLiteral(
+        domSanitizer.bypassSecurityTrustHtml(lucideIcons),
+        { viewBox: '0 0 24 24' }
+      );
+    }),
+  ]);

package/fuse-starter-pack/fuse-v21.1/src/app/core/local-storage/index.ts

@@ -0,0 +1,2 @@
+export { LocalStorage } from './local-storage';
+export { provideLocalStorage } from './provider';

package/fuse-starter-pack/fuse-v21.1/src/app/core/local-storage/local-storage.ts

@@ -0,0 +1,109 @@
+import { isPlatformServer } from '@angular/common';
+import {
+  inject,
+  Injectable,
+  makeStateKey,
+  PLATFORM_ID,
+  TransferState,
+} from '@angular/core';
+
+const STORAGE_STATE_KEY = makeStateKey<[string, string][]>('APP_STORAGE_STATE');
+
+@Injectable({ providedIn: 'root' })
+export class LocalStorage {
+  // Dependencies
+  private transferState = inject(TransferState);
+
+  // State
+  private isServer = isPlatformServer(inject(PLATFORM_ID));
+  private storage = new Map<string, string>();
+
+  constructor() {
+    // Initialize the localStorage with the transfer state
+    if (!this.isServer) {
+      new Map(this.transferState.get(STORAGE_STATE_KEY, [])).forEach(
+        (value, key) => {
+          localStorage.setItem(key, value);
+        }
+      );
+    }
+  }
+
+  /**
+   * Updates the transfer state with the given map.
+   */
+  private updateTransferState(map: Map<string, string>) {
+    this.transferState.set(STORAGE_STATE_KEY, Array.from(map.entries()));
+  }
+
+  /**
+   * Returns the number of key/value pairs.
+   */
+  get length(): number {
+    return this.storage.size;
+  }
+
+  /**
+   * Sets the value of the pair identified by key to value,
+   * creating a new key/value pair if none existed for key previously.
+   */
+  setItem(key: string, value: string): void {
+    if (this.isServer) {
+      this.storage.set(key, value);
+      this.updateTransferState(this.storage);
+      return;
+    }
+
+    localStorage.setItem(key, value);
+  }
+
+  /**
+   * Returns the current value associated with the given key,
+   * or null if the given key does not exist in the list associated
+   * with the object.
+   */
+  getItem(key: string): string | null {
+    if (this.isServer) {
+      return this.storage.get(key) ?? null;
+    }
+
+    return localStorage.getItem(key);
+  }
+
+  /**
+   * Removes the key/value pair with the given key,
+   * if a key/value pair with the given key exists.
+   */
+  removeItem(key: string): void {
+    if (this.isServer) {
+      this.storage.delete(key);
+      this.updateTransferState(this.storage);
+      return;
+    }
+
+    localStorage.removeItem(key);
+  }
+
+  /**
+   * Removes all key/value pairs, if there are any.
+   */
+  clear(): void {
+    if (this.isServer) {
+      this.storage.clear();
+      this.updateTransferState(this.storage);
+    }
+
+    localStorage.clear();
+  }
+
+  /**
+   * Returns the name of the nth key in the list.
+   */
+  key(index: number): string | null {
+    if (this.isServer) {
+      return Array.from(this.storage.keys())[index] ?? null;
+    }
+
+    return localStorage.key(index);
+  }
+}

package/fuse-starter-pack/fuse-v21.1/src/app/core/local-storage/provider.ts

@@ -0,0 +1,15 @@
+import {
+  EnvironmentProviders,
+  inject,
+  makeEnvironmentProviders,
+  provideAppInitializer,
+} from '@angular/core';
+import { LocalStorage } from './local-storage';
+
+export const provideLocalStorage = (): EnvironmentProviders =>
+  makeEnvironmentProviders([
+    // Initialize the LocalStorage
+    provideAppInitializer(() => {
+      inject(LocalStorage);
+    }),
+  ]);

package/fuse-starter-pack/fuse-v21.1/src/app/core/media/index.ts

@@ -0,0 +1,2 @@
+export { Media } from './media';
+export { provideMedia } from './provider';

package/fuse-starter-pack/fuse-v21.1/src/app/core/media/media.ts

@@ -0,0 +1,64 @@
+import { MediaMatcher } from '@angular/cdk/layout';
+import { isPlatformBrowser } from '@angular/common';
+import {
+  DestroyRef,
+  inject,
+  Injectable,
+  PLATFORM_ID,
+  signal,
+  Signal,
+  WritableSignal,
+} from '@angular/core';
+
+type MediaQueryObserver = {
+  matches: WritableSignal<boolean>;
+  handler: (event: MediaQueryListEvent) => void;
+};
+
+@Injectable({ providedIn: 'root' })
+export class Media {
+  // Dependencies
+  private destroyRef = inject(DestroyRef);
+  private isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+  private mediaMatcher = inject(MediaMatcher);
+
+  // State
+  private matchers = new Map<string, MediaQueryObserver>();
+
+  /**
+   * Creates a new media query observer signal for the given query.
+   */
+  match(query: string): Signal<boolean> {
+    const existingMatcher = this.matchers.get(query);
+    if (existingMatcher) {
+      return existingMatcher.matches.asReadonly();
+    }
+
+    // Create MediaQueryList for the query
+    const mql = this.mediaMatcher.matchMedia(query);
+
+    // Create new signal with initial matches value of the mql
+    const matches = signal(mql.matches);
+
+    // Create handler
+    const handler = (event: MediaQueryListEvent) => {
+      matches.set(event.matches);
+    };
+
+    // Add listener and destroy handler
+    if (this.isBrowser) {
+      mql.addEventListener('change', handler);
+      this.destroyRef.onDestroy(() => {
+        mql.removeEventListener('change', handler);
+      });
+    }
+
+    // Store the observer
+    this.matchers.set(query, {
+      matches,
+      handler,
+    });
+
+    return matches.asReadonly();
+  }
+}

package/fuse-starter-pack/fuse-v21.1/src/app/core/media/provider.ts

@@ -0,0 +1,15 @@
+import {
+  EnvironmentProviders,
+  inject,
+  makeEnvironmentProviders,
+  provideAppInitializer,
+} from '@angular/core';
+import { Media } from './media';
+
+export const provideMedia = (): EnvironmentProviders =>
+  makeEnvironmentProviders([
+    // Initialize the Media
+    provideAppInitializer(() => {
+      inject(Media);
+    }),
+  ]);

package/fuse-starter-pack/fuse-v21.1/src/app/core/theming/index.ts

@@ -0,0 +1,3 @@
+export { provideTheming, THEME_CONFIG } from './provider';
+export { Theming } from './theming';
+export type { Scheme, Theme, ThemeConfig, Colors } from './models/theming';

package/fuse-starter-pack/fuse-v21.1/src/app/core/theming/models/theming.ts

@@ -0,0 +1,13 @@
+import { TonalPalette } from '@/app/core/theming/palette';
+
+export type Scheme = 'light' | 'dark' | 'system';
+export type Colors = {
+  primary: string;
+  error: string;
+};
+export type ThemeConfig = Colors & Record<'scheme', Scheme>;
+
+export type Theme = {
+  primary: TonalPalette;
+  error: TonalPalette;
+};

package/fuse-starter-pack/fuse-v21.1/src/app/core/theming/palette.ts

@@ -0,0 +1,209 @@
+import chroma from 'chroma-js';
+import { Hsluv } from 'hsluv';
+
+type PaletteConfig = {
+  color: string;
+  hue?: number;
+  hues?: number[];
+  colorMode?: 'linear' | 'perceived';
+  h?: number;
+  s?: number;
+  lMin?: number;
+  lMax?: number;
+  mode?: 'hex' | 'p-3' | 'oklch' | 'hsl';
+};
+
+type Color = {
+  hue: number;
+  hex: string;
+  oklch: string;
+  h: number;
+  hScale: number;
+  s: number;
+  sScale: number;
+  l: number;
+};
+
+export class TonalPalette {
+  private readonly palette: Color[];
+
+  constructor(config: PaletteConfig) {
+    this.palette = this.generatePalette(config);
+  }
+
+  /**
+   * Chroma-js based implementation for stable palette generation.
+   * Uses HSLuv for perceived mode and direct HSL manipulation for linear mode.
+   * https://github.com/SimeonGriggs/tints.dev.
+   */
+  private generatePalette(config: PaletteConfig): Color[] {
+    const { color } = config;
+
+    // Tweaks may be passed in, otherwise use defaults
+    const colorHue = config.hue ?? 600;
+    const hues = config.hues ?? [
+      0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 1000,
+    ];
+    const colorMode = config.colorMode ?? 'perceived';
+    const h = config.h ?? 0;
+    const s = config.s ?? 0;
+    const lMin = config.lMin ?? 0;
+    const lMax = config.lMax ?? 100;
+
+    // Create base color from input
+    const baseColor = chroma(`${color}`);
+    const [baseH, baseS, baseL] = baseColor.hsl();
+
+    // Handle grayscale colors (NaN hue) by setting a default hue
+    const normalizedBaseH = isNaN(baseH) ? 0 : baseH;
+
+    // 1. Create hue scale
+    const colorHueIndex = hues.indexOf(colorHue);
+    if (colorHueIndex === -1) {
+      throw new Error(`Invalid color hue: ${colorHue}`);
+    }
+
+    const hueScale = hues.map((hue) => {
+      const diff = Math.abs(hues.indexOf(hue) - colorHueIndex);
+      const tweakValue = h ? diff * h : 0;
+      return { hue, tweak: tweakValue };
+    });
+
+    // 2. Create saturation scale
+    const saturationScale = hues.map((hue) => {
+      const diff = Math.abs(hues.indexOf(hue) - colorHueIndex);
+      const tweakValue = s ? Math.round((diff + 1) * s * (1 + diff / 10)) : 0;
+      return { hue, tweak: Math.min(tweakValue, 100) };
+    });
+
+    // 3. Create lightness distribution
+    const hsluv = new Hsluv();
+    hsluv.hex = `${color}`;
+    hsluv.hexToHsluv();
+
+    const lightnessValue = colorMode === 'linear' ? baseL * 100 : hsluv.hsluv_l;
+
+    // Create the three anchor points
+    const distributionAnchors = [
+      { hue: 0, tweak: lMax },
+      { hue: colorHue, tweak: lightnessValue },
+      { hue: 1000, tweak: lMin },
+    ];
+
+    // Interpolate for missing hues
+    const distributionScale = hues.map((hue) => {
+      // If it's an anchor point, use the anchor value
+      const anchor = distributionAnchors.find((a) => a.hue === hue);
+      if (anchor) {
+        return anchor;
+      }
+
+      // Otherwise interpolate between anchor points
+      let leftAnchor, rightAnchor;
+
+      if (hue < colorHue) {
+        leftAnchor = distributionAnchors[0]; // 0
+        rightAnchor = distributionAnchors[1]; // hue
+      } else {
+        leftAnchor = distributionAnchors[1]; // hue
+        rightAnchor = distributionAnchors[2]; // 1000
+      }
+
+      // Linear interpolation
+      const range = rightAnchor.hue - leftAnchor.hue;
+      const position = hue - leftAnchor.hue;
+      const ratio = position / range;
+      const tweak =
+        leftAnchor.tweak + (rightAnchor.tweak - leftAnchor.tweak) * ratio;
+
+      return { hue, tweak: Math.round(tweak) };
+    });
+
+    return hues.map((hue, hueIndex) => {
+      if (hue === colorHue) {
+        // Preserve exact input color
+        const inputColor = chroma(`${color.toUpperCase()}`);
+        const [finalH, finalS, finalL] = inputColor.hsl();
+
+        return {
+          hue: hue,
+          hex: `${color.toUpperCase()}`,
+          oklch: inputColor.css('oklch'),
+          h: isNaN(finalH) ? 0 : finalH,
+          hScale: 0,
+          s: isNaN(finalS) ? 0 : finalS * 100,
+          sScale: (isNaN(finalS) ? 0 : finalS * 100) - 50,
+          l: isNaN(finalL) ? 0 : finalL * 100,
+        };
+      }
+
+      // Get tweaks for this hue
+      const hTweak = hueScale[hueIndex].tweak;
+      const sTweak = saturationScale[hueIndex].tweak;
+      const lTweak = distributionScale[hueIndex].tweak;
+
+      let newColor: chroma.Color;
+
+      if (colorMode === 'linear') {
+        // Direct HSL manipulation for linear mode
+        const newH = (normalizedBaseH + hTweak) % 360;
+        const newS = Math.max(0, Math.min(100, baseS * 100 + sTweak));
+        const newL = Math.max(0, Math.min(100, lTweak));
+
+        newColor = chroma.hsl(newH, newS / 100, newL / 100);
+      } else {
+        // HSLuv for perceived mode
+        const hsluv = new Hsluv();
+        hsluv.hex = `${color}`;
+        hsluv.hexToHsluv();
+
+        // Handle grayscale colors in HSLuv (NaN hue)
+        const normalizedHsluvH = isNaN(hsluv.hsluv_h) ? 0 : hsluv.hsluv_h;
+        const newHsluvH = (normalizedHsluvH + hTweak) % 360;
+        const newHsluvS = Math.max(0, Math.min(100, hsluv.hsluv_s + sTweak));
+        const newHsluvL = Math.max(0, Math.min(100, lTweak));
+
+        hsluv.hsluv_h = newHsluvH;
+        hsluv.hsluv_s = newHsluvS;
+        hsluv.hsluv_l = newHsluvL;
+        hsluv.hsluvToHex();
+
+        newColor = chroma(hsluv.hex);
+      }
+
+      const [finalH, finalS, finalL] = newColor.hsl();
+
+      return {
+        hue: hue,
+        hex: newColor.hex().toUpperCase(),
+        oklch: newColor.css('oklch'),
+        h: isNaN(finalH) ? 0 : finalH,
+        hScale: ((((hTweak + 180) % 360) - 180) / 180) * 50,
+        s: isNaN(finalS) ? 0 : finalS * 100,
+        sScale: (isNaN(finalS) ? 0 : finalS * 100) - 50,
+        l: isNaN(finalL) ? 0 : finalL * 100,
+      };
+    });
+  }
+
+  /**
+   * Get all colors in the palette.
+   */
+  colors(): Color[] {
+    return this.palette;
+  }
+
+  /**
+   * Get a specific color by its hue.
+   * @param value
+   * @param format
+   */
+  hue(value: number, format: 'hex' | 'oklch' = 'oklch'): string | null {
+    const color = this.palette.find((c) => c.hue === value);
+    if (!color) {
+      return null;
+    }
+
+    return format === 'hex' ? color.hex : color.oklch;
+  }
+}

package/fuse-starter-pack/fuse-v21.1/src/app/core/theming/provider.ts

@@ -0,0 +1,24 @@
+import {
+  EnvironmentProviders,
+  inject,
+  InjectionToken,
+  makeEnvironmentProviders,
+  provideAppInitializer,
+} from '@angular/core';
+import { ThemeConfig } from './models/theming';
+import { Theming } from './theming';
+
+export const THEME_CONFIG = new InjectionToken<ThemeConfig>('THEME_CONFIG');
+
+export const provideTheming = (config: ThemeConfig): EnvironmentProviders =>
+  makeEnvironmentProviders([
+    {
+      provide: THEME_CONFIG,
+      useValue: config,
+    },
+
+    // Initialize the Theming
+    provideAppInitializer(() => {
+      inject(Theming);
+    }),
+  ]);

package/fuse-starter-pack/fuse-v21.1/src/app/core/theming/theming.ts

@@ -0,0 +1,129 @@
+import { DOCUMENT, isPlatformServer } from '@angular/common';
+import {
+  computed,
+  effect,
+  inject,
+  Injectable,
+  PLATFORM_ID,
+  signal,
+} from '@angular/core';
+import { LocalStorage } from '@/app/core/local-storage/local-storage';
+import { Media } from '@/app/core/media/media';
+import { TonalPalette } from '@/app/core/theming/palette';
+import { Scheme, Colors, Theme } from './models/theming';
+import { THEME_CONFIG } from './provider';
+
+@Injectable({ providedIn: 'root' })
+export class Theming {
+  // Dependencies
+  private document = inject(DOCUMENT);
+  private isServer = isPlatformServer(inject(PLATFORM_ID));
+  private localStorage = inject(LocalStorage);
+  private media = inject(Media);
+  private themeConfig = inject(THEME_CONFIG);
+
+  // State
+  private prefersDarkMode = this.media.match('(prefers-color-scheme: dark)');
+
+  colors = signal<Colors>({
+    primary: this.themeConfig.primary,
+    error: this.themeConfig.error,
+  });
+  scheme = signal<Scheme>(
+    (this.localStorage.getItem('scheme') as Scheme) || this.themeConfig.scheme
+  );
+  theme = computed<Theme>(() => this.generateTheme(this.colors()));
+
+  isDark = computed(
+    () =>
+      this.scheme() === 'dark' ||
+      (this.scheme() === 'system' && this.prefersDarkMode)
+  );
+  isLight = computed(() => !this.isDark());
+
+  // DOM
+  private rootEl = this.document.documentElement;
+  private themeStyleEl = this.document.createElement('style');
+
+  constructor() {
+    // Append the themeStyleEl to the DOM
+    this.document.head.appendChild(this.themeStyleEl);
+    this.themeStyleEl.classList.add('theme-colors');
+
+    // Update scheme
+    effect(() => {
+      // Skip the server. Otherwise, the scheme will always be 'system' and
+      // the class will always be 'scheme-dark'.
+      if (this.isServer) {
+        return;
+      }
+
+      const scheme = this.scheme();
+      const prefersDarkMode = this.prefersDarkMode();
+
+      // Figure out if the scheme is 'dark'
+      const isDark =
+        scheme === 'dark' || (scheme === 'system' && prefersDarkMode);
+
+      // Add the 'dark' or 'light' class to the html element
+      this.rootEl.classList.toggle('scheme-dark', isDark);
+      this.rootEl.classList.toggle('scheme-light', !isDark);
+
+      // Store the scheme in local storage
+      this.localStorage.setItem('scheme', scheme);
+    });
+
+    // Generate the theme for the first time
+    this.generateTheme(this.themeConfig);
+  }
+
+  /**
+   * Generates a theme using the provided theming configuration and
+   * applies it to the DOM by injecting CSS variables into a
+   * style element.
+   */
+  private generateTheme(config: Colors): {
+    primary: TonalPalette;
+    error: TonalPalette;
+  } {
+    const primary = new TonalPalette({
+      color: config.primary,
+    });
+    const error = new TonalPalette({
+      color: config.error,
+    });
+
+    this.themeStyleEl.textContent = `:root {
+      /* Primary */
+      --theme-color-primary-50: ${primary.hue(50)};
+      --theme-color-primary-100: ${primary.hue(100)};
+      --theme-color-primary-200: ${primary.hue(200)};
+      --theme-color-primary-300: ${primary.hue(300)};
+      --theme-color-primary-400: ${primary.hue(400)};
+      --theme-color-primary-500: ${primary.hue(500)};
+      --theme-color-primary-600: ${primary.hue(600)};
+      --theme-color-primary-700: ${primary.hue(700)};
+      --theme-color-primary-800: ${primary.hue(800)};
+      --theme-color-primary-900: ${primary.hue(900)};
+      --theme-color-primary-950: ${primary.hue(950)};
+
+      /* Error */
+      --theme-color-error-50: ${error.hue(50)};
+      --theme-color-error-100: ${error.hue(100)};
+      --theme-color-error-200: ${error.hue(200)};
+      --theme-color-error-300: ${error.hue(300)};
+      --theme-color-error-400: ${error.hue(400)};
+      --theme-color-error-500: ${error.hue(500)};
+      --theme-color-error-600: ${error.hue(600)};
+      --theme-color-error-700: ${error.hue(700)};
+      --theme-color-error-800: ${error.hue(800)};
+      --theme-color-error-900: ${error.hue(900)};
+      --theme-color-error-950: ${error.hue(950)};
+    `;
+
+    return {
+      primary,
+      error,
+    };
+  }
+}

package/fuse-starter-pack/fuse-v21.1/src/app/core/transloco/transloco-http-loader.ts

@@ -0,0 +1,12 @@
+import { inject, Injectable } from '@angular/core';
+import { Translation, TranslocoLoader } from '@jsverse/transloco';
+import { HttpClient } from '@angular/common/http';
+
+@Injectable({ providedIn: 'root' })
+export class TranslocoHttpLoader implements TranslocoLoader {
+  private http = inject(HttpClient);
+
+  getTranslation(lang: string) {
+    return this.http.get<Translation>(`/i18n/${lang}.json`);
+  }
+}