@uni-design-system/uni-angular 1.0.0 → 2.0.0

package/src/lib/cdk/helpers/memoize.helper.ts

@@ -0,0 +1,15 @@
+export function memoize<T extends (...args: any[]) => any>(fn: T): T {
+  const cache = new Map<string, ReturnType<T>>();
+
+  return ((...args: Parameters<T>): ReturnType<T> => {
+    const key = JSON.stringify(args);
+
+    if (cache.has(key)) {
+      return cache.get(key)!;
+    }
+
+    const result = fn(...args);
+    cache.set(key, result);
+    return result;
+  }) as T;
+}

package/src/lib/cdk/helpers/number.helper.ts

@@ -0,0 +1,2 @@
+export const safeParseInt = (n: string | number) =>
+  typeof n === 'number' ? n : parseInt(n);

package/src/lib/cdk/index.ts

@@ -0,0 +1,3 @@
+export * from './local-storage/local-storage.service';
+export * from './option/option.model';
+export * from './timer/timer';

package/src/lib/cdk/local-storage/local-storage.service.ts

@@ -0,0 +1,124 @@
+import { Injectable } from '@angular/core';
+import { memoize } from '../helpers/memoize.helper';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class LocalStorageService {
+  private isLocalStorageAvailable = memoize((): boolean => {
+    try {
+      const test = '__localStorage_test__';
+      localStorage.setItem(test, test);
+      localStorage.removeItem(test);
+      return true;
+    } catch {
+      return false;
+    }
+  });
+
+  setItem<T>(key: string, value: T): boolean {
+    if (!this.isLocalStorageAvailable()) {
+      console.warn('LocalStorage is not available');
+      return false;
+    }
+
+    try {
+      const stringValue = typeof value === 'string' ? value : JSON.stringify(value);
+      localStorage.setItem(key, stringValue);
+      return true;
+    } catch (error) {
+      console.error('Error saving to localStorage:', error);
+      return false;
+    }
+  }
+
+  getItem<T>(key: string): T | null {
+    if (!this.isLocalStorageAvailable()) {
+      return null;
+    }
+
+    try {
+      const item = localStorage.getItem(key);
+      if (item === null) {
+        return null;
+      }
+
+      try {
+        return JSON.parse(item) as T;
+      } catch {
+        return item as T;
+      }
+    } catch (error) {
+      console.error('Error reading from localStorage:', error);
+      return null;
+    }
+  }
+
+  removeItem(key: string): boolean {
+    if (!this.isLocalStorageAvailable()) {
+      return false;
+    }
+
+    try {
+      localStorage.removeItem(key);
+      return true;
+    } catch (error) {
+      console.error('Error removing from localStorage:', error);
+      return false;
+    }
+  }
+
+  clear(): boolean {
+    if (!this.isLocalStorageAvailable()) {
+      return false;
+    }
+
+    try {
+      localStorage.clear();
+      return true;
+    } catch (error) {
+      console.error('Error clearing localStorage:', error);
+      return false;
+    }
+  }
+
+  hasKey(key: string): boolean {
+    if (!this.isLocalStorageAvailable()) {
+      return false;
+    }
+
+    return localStorage.getItem(key) !== null;
+  }
+
+  getAllKeys(): string[] {
+    if (!this.isLocalStorageAvailable()) {
+      return [];
+    }
+
+    try {
+      return Object.keys(localStorage);
+    } catch (error) {
+      console.error('Error getting localStorage keys:', error);
+      return [];
+    }
+  }
+
+  getSize(): number {
+    if (!this.isLocalStorageAvailable()) {
+      return 0;
+    }
+
+    try {
+      let total = 0;
+      for (const key in localStorage) {
+        if (Object.prototype.hasOwnProperty.call(localStorage, key)) {
+          total += localStorage[key].length + key.length;
+        }
+      }
+      return total;
+    } catch (error) {
+      console.error('Error calculating localStorage size:', error);
+      return 0;
+    }
+  }
+}

package/src/lib/cdk/option/option.model.ts

@@ -0,0 +1,6 @@
+export interface Option<T = unknown> {
+  label: string;
+  value: T;
+}
+
+export type Options<T = unknown> = Option<T>[];

package/src/lib/cdk/timer/timer.ts

@@ -0,0 +1,66 @@
+import { computed, DestroyRef, inject, signal } from '@angular/core';
+
+export function useTimer() {
+  const destroyRef = inject(DestroyRef);
+
+  const msRemaining = signal<number>(0);
+  const isPaused = signal<boolean>(false);
+  const isActive = computed(() => msRemaining() > 0);
+
+  let intervalId: any = null;
+  let endTime = 0;
+  let onCompleteCallback: (() => void) | undefined;
+
+  const stop = () => {
+    if (intervalId) clearInterval(intervalId);
+    intervalId = null;
+  };
+
+  const tick = () => {
+    const remaining = Math.max(0, endTime - Date.now());
+    msRemaining.set(remaining);
+
+    if (remaining <= 0) {
+      stop();
+      if (onCompleteCallback) onCompleteCallback();
+    }
+  };
+
+  const start = (durationMs: number, onComplete?: () => void) => {
+    stop();
+    onCompleteCallback = onComplete;
+    isPaused.set(false);
+    msRemaining.set(durationMs);
+    endTime = Date.now() + durationMs;
+    intervalId = setInterval(tick, 100);
+  };
+
+  const pause = () => {
+    if (!isActive() || isPaused()) return;
+    stop();
+    isPaused.set(true);
+  };
+
+  const resume = () => {
+    if (!isActive() || !isPaused()) return;
+    isPaused.set(false);
+    endTime = Date.now() + msRemaining();
+    intervalId = setInterval(tick, 100);
+  };
+
+  destroyRef.onDestroy(() => stop());
+
+  return {
+    start,
+    pause,
+    resume,
+    stop: () => {
+      stop();
+      msRemaining.set(0);
+    },
+    msRemaining,
+    isPaused,
+    isActive,
+    secondsRemaining: computed(() => Math.ceil(msRemaining() / 1000)),
+  };
+}

package/src/lib/components/text/text.component.ts

@@ -0,0 +1,57 @@
+import { Component, HostBinding, inject, input } from '@angular/core';
+import { css } from '@emotion/css';
+
+import type {
+  ColorKey,
+  OptionalDisplay,
+  OptionalTextAlign,
+  Typeface,
+} from '@uni-design-system/uni-core';
+import { ThemeService } from '../../theming/theme.service';
+
+@Component({
+  selector: 'uni-text, Text',
+  standalone: true,
+  imports: [],
+  template: '<ng-content></ng-content>',
+})
+export class UniTextComponent {
+  theme = inject(ThemeService);
+
+  typeface = input<Typeface>('title-small');
+  color = input<ColorKey>();
+  display = input<OptionalDisplay>();
+  align = input<OptionalTextAlign>();
+  nowrap = input<boolean>();
+  maxWidth = input<number>();
+  ellipsis = input<boolean>(false);
+
+  @HostBinding('class') get className() {
+    return css([
+      {
+        ...this.theme.typeface(this.typeface()),
+        ...this.theme.color(this.color()),
+        display: this.display(),
+      },
+      this.align() && {
+        textAlign: this.align(),
+      },
+      this.nowrap() && {
+        whiteSpace: 'nowrap',
+      },
+      this.maxWidth() && {
+        maxWidth: this.maxWidth(),
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        display: 'inline-block',
+      },
+      this.ellipsis() && {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        minWidth: 0,
+      },
+    ]);
+  }
+}

package/src/lib/components/text/text.mdx

@@ -0,0 +1,15 @@
+import { Meta, Title } from '@storybook/addon-docs/blocks';
+import * as Stories from './text.stories';
+import { StoryUsage } from '../../../stories/blocks/StoryUsage';
+
+<Meta of={Stories} name="Overview" />
+<Title />
+`import { UniTextComponent } from '@uni-design-system/uni-angular';`
+
+## Overview
+
+The Text Component is used to format text using typefaces and colors defined in the loaded theme.
+
+## Usage
+
+<StoryUsage of={Stories.DisplayLarge} />

package/src/lib/components/text/text.stories.ts

@@ -0,0 +1,39 @@
+import { argsToTemplate, Meta, StoryObj } from '@storybook/angular';
+import { UniTextComponent } from './text.component';
+import type { Typeface, ColorKey } from '@uni-design-system/uni-core';
+
+// 1. Create a unified argument type for the story file
+type StoryArgs = UniTextComponent & { ngContent?: string };
+
+// 2. Pass the combined type directly to Meta so it recognizes 'ngContent' in argTypes
+const meta: Meta<StoryArgs> = {
+  title: 'Components/Text',
+  component: UniTextComponent as any, // Cast to any prevents the mapper from breaking on the intersection
+  render: (args) => {
+    const { ngContent, ...componentProps } = args;
+    return {
+      props: componentProps,
+      template: `<uni-text ${argsToTemplate(componentProps)}>${ngContent || ''}</uni-text>`,
+    };
+  },
+  argTypes: {
+    ngContent: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+// 3. Keep the matching type structure on your StoryObj
+type Story = StoryObj<StoryArgs>;
+
+export const DisplayLarge: Story = {
+  args: {
+    ngContent: 'The quick brown fox jumps over the lazy dog.',
+    color: 'primary' as ColorKey,
+    typeface: 'title-large' as Typeface,
+    display: 'block',
+    align: 'center',
+  },
+};

package/src/lib/theming/theme.service.ts

@@ -0,0 +1,270 @@
+// noinspection JSUnusedGlobalSymbols
+
+import { computed, inject, Injectable, linkedSignal, Signal, signal } from '@angular/core';
+import { css } from '@emotion/css';
+import { LocalStorageService, Options } from '../cdk';
+import {
+  LightTheme,
+  type NullableSize,
+  type ThemeName,
+  type Typeface,
+  type UniTheme,
+  Z_INDEX,
+  type ZIndexableElements,
+  ColorToken,
+  ComponentName,
+  ComponentTheme,
+  ContainerColorToken,
+  ContentColorToken,
+  NullableStyleExpression,
+  OptionalSize,
+  Size,
+  TextRole,
+  Thickness,
+  Variant,
+  type ColorKey,
+  type Radius,
+  type Border,
+  type Shadow,
+} from '@uni-design-system/uni-core';
+
+import { UNI_THEMES } from './theme.token';
+import { safeParseInt } from '../cdk/helpers/number.helper';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ThemeService {
+  private themes = inject(UNI_THEMES);
+  private localStorage = inject(LocalStorageService);
+
+  theme = signal<UniTheme>(LightTheme);
+  themeOptions = signal<Options<ThemeName>>([]);
+
+  components = computed(() => this.theme().components);
+  component = <T>(componentName: ComponentName): Signal<ComponentTheme<T>> =>
+    computed(() => (this.components()[componentName] as ComponentTheme<T>) || {});
+  colors = computed(() => this.theme().colors);
+  typeFaces = computed(() => this.theme().typefaces);
+  spacing = computed(() => this.theme().spacing);
+  thicknesses = computed(() => this.theme().thicknesses);
+  radii = computed(() => this.theme().radii);
+  borders = computed(() => this.theme().borders);
+  shadows = computed(() => this.theme().shadows);
+  icons = computed(() => this.theme().icons);
+
+  constructor() {
+    this.themeOptions.set(
+      Object.keys(this.themes).map((key) => {
+        return { label: this.themes[key].name, value: key };
+      })
+    );
+
+    this.selectTheme(this.localStorage.getItem('theme') || Object.keys(this.themes)[0] || 'base');
+  }
+
+  public selectTheme(themeName: ThemeName): void {
+    this.selectedThemeKey.set(themeName);
+    if (this.themes[themeName]) this.theme.set(this.themes[themeName]);
+    this.localStorage.setItem('theme', themeName);
+  }
+
+  public selectedThemeName = computed(() => this.theme().name);
+  public selectedThemeKey = signal<string>('');
+
+  textClass = (textRole: TextRole, textColor?: ContentColorToken) => {
+    return css([
+      {
+        ...this.typeFaces()[textRole],
+      },
+      textColor && {
+        color: this.colors()[textColor],
+      },
+    ]);
+  };
+
+  componentStyle = (componentName: ComponentName, variant: Variant, size: Size) =>
+    computed(() => {
+      const component = this.component(componentName)();
+      const { fixed, colors, sizes } = component;
+      const colorStyle = colors && colors[variant];
+      const sizeStyle = sizes && sizes[size];
+      return { ...fixed, ...colorStyle, ...sizeStyle };
+    });
+
+  getSpacing = (size: NullableSize) => {
+    return size === 'none' ? 'none' : this.spacing()[size];
+  };
+
+  getThickness = (thickness: Thickness) => this.theme().thicknesses[thickness];
+
+  getContentColor = (token: ContainerColorToken, useVariant?: boolean) =>
+    useVariant
+      ? this.colors()[`on-${token}-variant` as ColorToken]
+      : this.colors()[`on-${token}` as ColorToken];
+
+  colorPair = (token?: ContainerColorToken, colorVariant?: boolean): NullableStyleExpression => {
+    if (!token) return;
+    const backgroundColor = this.colors()[token];
+    const color = this.getContentColor(token, colorVariant);
+    return { color, backgroundColor };
+  };
+
+  backgroundColor = (token?: ColorKey): NullableStyleExpression => {
+    return !token ? undefined : { backgroundColor: this.colors()[token] };
+  };
+
+  backgroundImage = (url?: string): NullableStyleExpression => {
+    return !url ? undefined : { backgroundImage: `url(${url})` };
+  };
+
+  getContainerColors = (color: Variant, useVariant?: boolean) => {
+    const token = (color + '-container') as ContainerColorToken;
+    return this.colorPair(token, useVariant);
+  };
+
+  typeface = (typeface?: Typeface) => typeface && this.typeFaces()[typeface];
+
+  colorPalette = () => this.colors();
+
+  color(color?: ColorKey): NullableStyleExpression {
+    return !color ? undefined : { color: this.colors()[color] };
+  }
+
+  getDashedBorder(
+    color: ColorKey | undefined,
+    radius: Radius | undefined
+  ): NullableStyleExpression {
+    if (!color) return;
+
+    const r = radius && this.radii()[radius];
+    const borderRadius = r ? safeParseInt(r) : 0;
+    const colors = this.colors()[color];
+    const strokeColor = colors?.replace('#', '%23');
+
+    return {
+      backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='${borderRadius}' ry='${borderRadius}' stroke='${strokeColor}' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e")`,
+      borderRadius,
+    };
+  }
+
+  radius(size: Radius | undefined): NullableStyleExpression {
+    return !size ? undefined : { borderRadius: this.radii()[size] };
+  }
+
+  getRadiusLeft(size: Radius | undefined): NullableStyleExpression {
+    if (!size) return;
+    return {
+      borderBottomLeftRadius: this.radii()[size],
+      borderTopLeftRadius: this.radii()[size],
+    };
+  }
+
+  getRadiusRight(size: Radius | undefined): NullableStyleExpression {
+    if (!size) return;
+    return {
+      borderBottomRightRadius: this.radii()[size],
+      borderTopRightRadius: this.radii()[size],
+    };
+  }
+
+  getRadiusTop(size: Radius | undefined): NullableStyleExpression {
+    if (!size) return;
+    return {
+      borderTopLeftRadius: this.radii()[size],
+      borderTopRightRadius: this.radii()[size],
+    };
+  }
+
+  getRadiusBottom(size: Radius | undefined): NullableStyleExpression {
+    if (!size) return;
+    return {
+      borderBottomLeftRadius: this.radii()[size],
+      borderBottomRightRadius: this.radii()[size],
+    };
+  }
+
+  padding(size: OptionalSize): NullableStyleExpression {
+    return !size ? undefined : { padding: this.spacing()[size] };
+  }
+
+  horizontalPadding(size: OptionalSize): NullableStyleExpression {
+    return !size ? undefined : { paddingInline: this.spacing()[size] };
+  }
+
+  verticalPadding(size: OptionalSize): NullableStyleExpression {
+    return !size ? undefined : { paddingBlock: this.spacing()[size] };
+  }
+
+  paddingLeft(size: OptionalSize): NullableStyleExpression {
+    return !size ? undefined : { paddingLeft: this.spacing()[size] };
+  }
+
+  paddingRight(size: OptionalSize): NullableStyleExpression {
+    return !size ? undefined : { paddingRight: this.spacing()[size] };
+  }
+
+  paddingTop(size: OptionalSize): NullableStyleExpression {
+    return !size ? undefined : { paddingTop: this.spacing()[size] };
+  }
+
+  paddingBottom(size: OptionalSize): NullableStyleExpression {
+    return !size ? undefined : { paddingBottom: this.spacing()[size] };
+  }
+
+  border(border: Border | undefined): NullableStyleExpression {
+    return !border ? undefined : { border: this.borders()[border] };
+  }
+
+  borderTop(border: Border | undefined): NullableStyleExpression {
+    return !border ? undefined : { borderTop: this.borders()[border] };
+  }
+
+  borderBottom(border: Border | undefined): NullableStyleExpression {
+    return !border ? undefined : { borderBottom: this.borders()[border] };
+  }
+
+  borderLeft(border: Border | undefined): NullableStyleExpression {
+    return !border ? undefined : { borderLeft: this.borders()[border] };
+  }
+
+  borderRight(border: Border | undefined): NullableStyleExpression {
+    return !border ? undefined : { borderRight: this.borders()[border] };
+  }
+
+  boxShadow(shadow: Shadow | undefined) {
+    return !shadow ? undefined : { boxShadow: this.shadows()[shadow] };
+  }
+
+  gap(gap: OptionalSize): NullableStyleExpression {
+    return !gap || gap === 'none' ? undefined : { gap: this.spacing()[gap] };
+  }
+
+  zIndex(element: ZIndexableElements | undefined): NullableStyleExpression {
+    return !element ? undefined : { zIndex: Z_INDEX[element] };
+  }
+
+  borderColor(borderColor: ColorToken): NullableStyleExpression {
+    return { borderColor: this.colors()[borderColor] };
+  }
+
+  getComponentTheme<T>(componentName: ComponentName) {
+    return this.component<T>(componentName);
+  }
+
+  // Used to get an "always-defined" options object from a component theme.
+  getComponentOptions = <T>(componentName: ComponentName) =>
+    linkedSignal({
+      source: this.getComponentTheme<T>(componentName),
+      computation: () => {
+        return this.getComponentTheme<T>(componentName)().options || ({} as T);
+      },
+    });
+
+  componentOptions = (componentName: ComponentName) =>
+    computed(() => this.component(componentName)().options || {});
+
+  style(prop: string, value: string | number | undefined): NullableStyleExpression {
+    return !value ? undefined : { [prop]: value };
+  }
+}

package/src/lib/theming/theme.token.ts

@@ -0,0 +1,7 @@
+import { InjectionToken } from '@angular/core';
+import { type UniTheme, UniThemes } from '@uni-design-system/uni-core';
+
+export const UNI_THEMES = new InjectionToken<Record<string, UniTheme>>('', {
+  providedIn: 'root',
+  factory: () => UniThemes,
+});

package/src/stories/blocks/StoryUsage.tsx

@@ -0,0 +1,21 @@
+import { Controls, Source, Story, StoryProps } from '@storybook/addon-docs/blocks';
+import { ReactElement } from 'react';
+
+export function StoryUsage({
+  of,
+  exclude,
+}: StoryProps & { exclude?: string | string[] }): ReactElement {
+  const commonControlExcludes = ['children', 'className', 'style'];
+  const excludedControls = [
+    ...commonControlExcludes,
+    ...(Array.isArray(exclude) ? exclude : exclude ? [exclude] : []),
+  ];
+
+  return (
+    <div>
+      <Story of={of} />
+      <Source of={of} dark={true} />
+      <Controls of={of} exclude={excludedControls} />
+    </div>
+  );
+}

package/tsconfig.json

@@ -1,17 +1,19 @@
 {
   "extends": "@uni-design-system/tsconfig/base.json",
   "compilerOptions": {
+    "moduleResolution": "bundler",
     "outDir": "./dist",
-    "rootDir": "./src",
+    "rootDir": "..",
     "module": "ESNext",
     "target": "ES2022",
     "esModuleInterop": true,
     "types": ["node", "vite/client"],
+    "jsx": "react-jsx",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "useDefineForClassFields": false,
-    "ignoreDeprecations": "6.0",
+    "ignoreDeprecations": "5.0"
   },
-  "include": ["src/**/*", "vite.config.ts"],
-  "exclude": ["node_modules", "dist", "**/*.spec.ts", "**/*.stories.ts"]
+  "include": ["src/**/*", "**/*"],
+  "exclude": ["../node_modules", "../dist", "**/*.spec.ts", "**/*.stories.ts"]
 }