@uni-design-system/uni-angular 2.0.1 → 2.0.3

package/src/lib/cdk/datasource/server-side-datasource.ts

@@ -1,172 +0,0 @@
-import {
-  computed,
-  linkedSignal,
-  resource,
-  ResourceLoaderParams,
-  ResourceRef,
-  type ResourceStatus,
-  signal,
-} from '@angular/core';
-import { UniBaseDatasource, Sort, SortDirection } from './base-datasource';
-
-export interface PageRequest {
-  pageNumber: number;
-  pageSize: number;
-  sortColumn?: string;
-  sortDirection?: SortDirection;
-  filter?: Record<string, any>;
-}
-
-export interface PageResponse<T> {
-  data: T[];
-  totalRecords: number;
-  pageNumber: number;
-  pageSize: number;
-}
-
-export type DataLoader<T> = (request: PageRequest) => Promise<PageResponse<T>>;
-
-export class UniServerSideDatasource<T> extends UniBaseDatasource<T> {
-  private _pageNumber = signal(1);
-  private _pageSize = signal(10);
-  private _sortColumn = signal<keyof T | undefined>(undefined);
-  private _sortDirection = signal<SortDirection>('indet');
-  private filter = signal<Record<string, any>>({});
-
-  override sortColumn = computed(() => this._sortColumn());
-  override sortDirection = computed(() => this._sortDirection());
-
-  private totalRecords = signal(0);
-
-  private dataResource: ResourceRef<PageResponse<T> | undefined>;
-
-  override pageIndex = computed(() => this._pageNumber() - 1);
-  override pageSize = computed(() => this._pageSize());
-
-  override pageCount = computed(() => {
-    const total = this.totalRecords();
-    const size = this.pageSize();
-    return total > 0 ? Math.ceil(total / size) : 0;
-  });
-
-  private readonly _records = linkedSignal<
-    {
-      val: PageResponse<T> | undefined;
-      status: ResourceStatus;
-    },
-    T[]
-  >({
-    source: () => ({
-      val: this.dataResource.value(),
-      status: this.dataResource.status(),
-    }),
-    computation: (source, previous) => {
-      if (source.status === 'loading' && previous) {
-        return previous.value;
-      }
-      return source.val?.data ?? [];
-    },
-  });
-
-  override records = this._records.asReadonly();
-
-  override recordCount = computed(() => this.totalRecords());
-
-  isLoading = computed(() => this.dataResource.isLoading());
-
-  error = computed(() => this.dataResource.error());
-
-  hasError = computed(() => this.dataResource.hasValue() === false && this.error() !== undefined);
-
-  constructor(
-    private dataLoader: DataLoader<T>,
-    initialPageSize = 10
-  ) {
-    super();
-    this._pageSize.set(initialPageSize);
-
-    this.dataResource = resource({
-      params: () => ({
-        pageNumber: this._pageNumber(),
-        pageSize: this._pageSize(),
-        sortColumn: this._sortColumn() as string | undefined,
-        sortDirection: this._sortDirection(),
-        filter: this.filter(),
-      }),
-      loader: async (params: ResourceLoaderParams<PageRequest>) => {
-        const request = params.params;
-        const response = await this.dataLoader(request);
-
-        if (request.pageNumber === 1 || this.totalRecords() === 0) {
-          this.totalRecords.set(response.totalRecords);
-        }
-
-        return response;
-      },
-    });
-  }
-
-  override sortRecords(sort: Sort<T>) {
-    this.sort.set(sort);
-    this._sortColumn.set(sort.column);
-    this._sortDirection.set(sort.direction);
-    this._pageNumber.set(1);
-  }
-
-  override firstPage() {
-    this._pageNumber.set(1);
-  }
-
-  override nextPage() {
-    if (this._pageNumber() < this.pageCount()) {
-      this._pageNumber.update((n) => n + 1);
-    }
-  }
-
-  override previousPage() {
-    if (this._pageNumber() > 1) {
-      this._pageNumber.update((n) => n - 1);
-    }
-  }
-
-  override lastPage() {
-    this._pageNumber.set(this.pageCount());
-  }
-
-  override jumpToPage(page: number) {
-    if (page >= 1 && page <= this.pageCount()) {
-      this._pageNumber.set(page);
-    }
-  }
-
-  override setPageSize(size: number) {
-    if (size > 0) {
-      this._pageSize.set(size);
-      this._pageNumber.set(1);
-    }
-  }
-
-  setFilter(filterValues: Record<string, any>) {
-    this.filter.set(filterValues);
-    this._pageNumber.set(1);
-  }
-
-  clearFilter() {
-    this.filter.set({});
-    this._pageNumber.set(1);
-  }
-
-  refresh() {
-    this.dataResource.reload();
-  }
-
-  getPageRequest(): PageRequest {
-    return {
-      pageNumber: this._pageNumber(),
-      pageSize: this._pageSize(),
-      sortColumn: this._sortColumn() as string | undefined,
-      sortDirection: this._sortDirection(),
-      filter: this.filter(),
-    };
-  }
-}

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

@@ -1,15 +0,0 @@
-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

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

package/src/lib/cdk/index.ts

@@ -1,3 +0,0 @@
-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

@@ -1,124 +0,0 @@
-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

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

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

@@ -1,66 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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',
-  },
-};