@ponti-studios/ui 0.1.2

package/src/env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_BASE_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/src/hooks/index.ts

@@ -0,0 +1,6 @@
+export { useApiClient } from "./use-api-client";
+export { useDebouncedValue } from "./use-debounced-value";
+export { useFilterState } from "./use-filter-state";
+export { useMediaQuery } from "./use-media-query";
+export { useIsMobile } from "./use-mobile";
+export type { SortField, SortDirection, SortOption } from "./sort.types";

package/src/hooks/sort.types.ts

@@ -0,0 +1,12 @@
+/**
+ * Sort types for use across packages
+ * These types are exported from the shared UI package for shared usage
+ */
+
+export type SortField = string;
+export type SortDirection = "asc" | "desc";
+
+export interface SortOption {
+  field: SortField;
+  direction: SortDirection;
+}

package/src/hooks/use-api-client.ts

@@ -0,0 +1,122 @@
+import { useCallback, useMemo, useState } from "react";
+
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
+
+type FetchOptions<T> = {
+  method?: "GET" | "POST" | "PUT" | "DELETE";
+  body?: T | undefined;
+  headers?: Record<string, string>;
+  stream?: boolean;
+};
+
+type ApiState = {
+  isLoading: boolean;
+  error: Error | null;
+};
+
+/**
+ * React hook for API client that handles fetch requests with authentication
+ */
+export function useApiClient() {
+  const [state, setState] = useState<ApiState>({
+    isLoading: false,
+    error: null,
+  });
+
+  /**
+   * Base fetch function with authentication
+   */
+  const fetchApi = useCallback(
+    async <T, S>(endpoint: string, options: FetchOptions<T> = {}): Promise<S> => {
+      const { method = "GET", body, headers = {}, stream = false } = options;
+      setState((prev) => ({ ...prev, isLoading: true, error: null }));
+
+      try {
+        // Default headers
+        const defaultHeaders: Record<string, string> = {};
+
+        // Only set Content-Type for non-FormData requests
+        if (!(body instanceof FormData)) {
+          defaultHeaders["Content-Type"] = "application/json";
+        }
+
+        const fetchBody: BodyInit | null =
+          body instanceof FormData ? body : body ? JSON.stringify(body) : null;
+
+        const res = await fetch(`${API_BASE_URL}${endpoint}`, {
+          method,
+          headers: {
+            ...defaultHeaders,
+            ...headers,
+          },
+          body: fetchBody,
+          credentials: "include",
+        });
+
+        if (!res.ok) {
+          const error = await res.json().catch(() => ({}));
+          throw new Error(error.message || "An error occurred");
+        }
+
+        if (stream) {
+          setState((prev) => ({ ...prev, isLoading: false }));
+          return res as S;
+        }
+
+        const data = (await res.json()) as S;
+        setState((prev) => ({ ...prev, isLoading: false }));
+        return data;
+      } catch (error) {
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          error: error instanceof Error ? error : new Error("An unknown error occurred"),
+        }));
+        throw error;
+      }
+    },
+    [],
+  );
+
+  /**
+   * API client methods for common operations - memoized to prevent infinite re-renders
+   */
+  const api = useMemo(
+    () => ({
+      get: <body, returnType>(
+        endpoint: string,
+        options?: Omit<FetchOptions<body>, "method" | "body">,
+      ) => fetchApi<body, returnType>(endpoint, { ...options, method: "GET" }),
+
+      post: <T, S>(endpoint: string, data?: T, options?: Omit<FetchOptions<T>, "method">) =>
+        fetchApi<T, S>(endpoint, { ...options, method: "POST", body: data || undefined }),
+
+      postStream: <T>(
+        endpoint: string,
+        data: T,
+        options?: Omit<FetchOptions<T>, "method" | "stream">,
+      ) =>
+        fetchApi<T, Response>(endpoint, { ...options, method: "POST", body: data, stream: true }),
+
+      postFormData: <S>(
+        endpoint: string,
+        formData: FormData,
+        options?: Omit<FetchOptions<FormData>, "method">,
+      ) => fetchApi<FormData, S>(endpoint, { ...options, method: "POST", body: formData }),
+
+      put: <T, S>(endpoint: string, data: T, options?: Omit<FetchOptions<T>, "method">) =>
+        fetchApi<T, S>(endpoint, { ...options, method: "PUT", body: data }),
+
+      delete: <T, S>(endpoint: string, options?: Omit<FetchOptions<T>, "method">) =>
+        // We add body because `fetchApi` use `application/json` as default content type
+        fetchApi<T, S>(endpoint, { ...options, method: "DELETE", body: {} as T }),
+    }),
+    [fetchApi],
+  );
+
+  return {
+    ...api,
+    isLoading: state.isLoading,
+    error: state.error,
+  };
+}

package/src/hooks/use-debounced-value.ts

@@ -0,0 +1,12 @@
+import { useEffect, useState } from "react";
+
+export function useDebouncedValue<T>(value: T, delayMs: number): T {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => setDebouncedValue(value), delayMs);
+    return () => clearTimeout(timeoutId);
+  }, [delayMs, value]);
+
+  return debouncedValue;
+}

package/src/hooks/use-filter-state.ts

@@ -0,0 +1,68 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+interface UseFilterStateOptions<T> {
+  initialFilters: T;
+  onFiltersChange?: (filters: T) => void;
+  debounceMs?: number; // For search-like filters
+}
+
+export function useFilterState<T extends Record<string, unknown>>(
+  options: UseFilterStateOptions<T>,
+) {
+  const { initialFilters, onFiltersChange, debounceMs } = options;
+  const [filters, setFiltersState] = useState<T>(initialFilters);
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const setFilters = useCallback(
+    (newFilters: T | ((prev: T) => T)) => {
+      const updatedFilters = typeof newFilters === "function" ? newFilters(filters) : newFilters;
+      setFiltersState(updatedFilters);
+
+      if (debounceMs && debounceMs > 0) {
+        if (debounceTimerRef.current) {
+          clearTimeout(debounceTimerRef.current);
+        }
+        debounceTimerRef.current = setTimeout(() => {
+          onFiltersChange?.(updatedFilters);
+        }, debounceMs);
+      } else {
+        onFiltersChange?.(updatedFilters);
+      }
+    },
+    [filters, onFiltersChange, debounceMs],
+  );
+
+  const updateFilter = useCallback(
+    <K extends keyof T>(key: K, value: T[K]) => {
+      setFilters((prev) => ({ ...prev, [key]: value }));
+    },
+    [setFilters],
+  );
+
+  const clearFilters = useCallback(() => {
+    setFiltersState(initialFilters);
+    onFiltersChange?.(initialFilters);
+  }, [initialFilters, onFiltersChange]);
+
+  const resetFilters = useCallback(() => {
+    setFiltersState(initialFilters);
+    onFiltersChange?.(initialFilters);
+  }, [initialFilters, onFiltersChange]);
+
+  // Cleanup debounce timer on unmount
+  useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, []);
+
+  return {
+    filters,
+    setFilters,
+    updateFilter,
+    clearFilters,
+    resetFilters,
+  };
+}

package/src/hooks/use-media-query.ts

@@ -0,0 +1,65 @@
+import { useCallback, useSyncExternalStore } from "react";
+
+interface MediaQueryOptions {
+  width?: number;
+  height?: number;
+}
+
+/**
+ * A utility function to check if a media query matches the current viewport.
+ * @param query - The media query string to check.
+ * @param options - Optional width and height values for testing
+ * @returns A boolean indicating whether the media query matches.
+ */
+function mediaQuery(query: string, options?: MediaQueryOptions) {
+  if (options?.width !== undefined) {
+    // For test environment where we provide custom dimensions
+    const minWidthMatch = query.match(/\(min-width:\s*(\d+)px\)/);
+    const maxWidthMatch = query.match(/\(max-width:\s*(\d+)px\)/);
+
+    if (minWidthMatch && minWidthMatch[1]) {
+      return options.width >= Number.parseInt(minWidthMatch[1], 10);
+    }
+    if (maxWidthMatch && maxWidthMatch[1]) {
+      return options.width <= Number.parseInt(maxWidthMatch[1], 10);
+    }
+  }
+
+  const mql = window.matchMedia(query);
+  return mql.matches;
+}
+
+/**
+ * Listens for changes to a media query and returns a boolean indicating whether the query matches.
+ * @param query - The media query string to listen for.
+ * @returns A boolean indicating whether the media query matches.
+ */
+export function useMediaQuery(query: string) {
+  const subscribe = useCallback(
+    (onStoreChange: () => void) => {
+      if (typeof window === "undefined") {
+        return () => {};
+      }
+
+      const mql = window.matchMedia(query);
+      const onChange = () => {
+        onStoreChange();
+      };
+
+      mql.addEventListener("change", onChange);
+      return () => {
+        mql.removeEventListener("change", onChange);
+      };
+    },
+    [query],
+  );
+
+  const getSnapshot = useCallback(() => {
+    if (typeof window === "undefined") {
+      return false;
+    }
+    return mediaQuery(query);
+  }, [query]);
+
+  return useSyncExternalStore(subscribe, getSnapshot, () => false);
+}

package/src/hooks/use-mobile.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}

package/src/index.ts

@@ -0,0 +1,25 @@
+export { CHART_COLORS, CHART_CSS_VARS } from "./constants/chart-colors";
+export type { SortDirection, SortField, SortOption } from "./hooks/sort.types";
+export { useApiClient } from "./hooks/use-api-client";
+export { useDebouncedValue } from "./hooks/use-debounced-value";
+export { useFilterState } from "./hooks/use-filter-state";
+export { useMediaQuery } from "./hooks/use-media-query";
+export { useIsMobile } from "./hooks/use-mobile";
+export { normalizeOtp, OTP_LENGTH } from "./lib/auth";
+export { copyToClipboard } from "./lib/clipboard";
+export { createMemoryStorage } from "./lib/create-memory-storage";
+export { cn } from "./lib/utils";
+export {
+  COLOR_MODE_ATTRIBUTE,
+  COLOR_SYSTEM_ATTRIBUTE,
+  colors,
+  colorSystems,
+  colorTokenNames,
+} from "./tokens/colors";
+export type { ColorMode, ColorSystem, ColorToken } from "./tokens/colors";
+export { durations, easingWeb, translateDistances } from "./tokens/motion";
+export { radii } from "./tokens/radii";
+export type { RadiusToken } from "./tokens/radii";
+export { shadowsNative, shadowsWeb } from "./tokens/shadows";
+export { contentWidths, spacing } from "./tokens/spacing";
+export type { ContentWidthToken, SpacingToken } from "./tokens/spacing";

package/src/lib/auth.ts

@@ -0,0 +1,5 @@
+export const OTP_LENGTH = 6;
+
+export function normalizeOtp(value: string, length = OTP_LENGTH): string {
+  return value.replace(/\D/g, "").slice(0, length);
+}

package/src/lib/clipboard.ts

@@ -0,0 +1,8 @@
+export async function copyToClipboard(text: string): Promise<boolean> {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    return false;
+  }
+}

package/src/lib/create-memory-storage.ts

@@ -0,0 +1,24 @@
+export function createMemoryStorage(): Storage {
+  const store = new Map<string, string>();
+
+  return {
+    get length() {
+      return store.size;
+    },
+    clear() {
+      store.clear();
+    },
+    getItem(key) {
+      return store.get(key) ?? null;
+    },
+    key(index) {
+      return Array.from(store.keys())[index] ?? null;
+    },
+    removeItem(key) {
+      store.delete(key);
+    },
+    setItem(key, value) {
+      store.set(key, value);
+    },
+  };
+}

package/src/lib/index.ts

@@ -0,0 +1,4 @@
+export { cn } from "./utils";
+export { copyToClipboard } from "./clipboard";
+export { createMemoryStorage } from "./create-memory-storage";
+export { normalizeOtp, OTP_LENGTH } from "./auth";

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/storybook/controls.ts

@@ -0,0 +1,117 @@
+import type { InputType } from "storybook/internal/csf";
+
+type StorybookControlTable = NonNullable<InputType["table"]>;
+
+type StorybookControlCondition = NonNullable<InputType["if"]>;
+
+type StorybookControl = InputType;
+
+type SelectControlConfig = {
+  controlType?: "select" | "radio" | "inline-radio" | "check" | "inline-check" | "multi-select";
+  defaultValue?: boolean | number | string | null;
+  if?: StorybookControlCondition;
+  labels?: Record<string, string>;
+  mapping?: Record<string, unknown>;
+  table?: StorybookControlTable;
+};
+
+const commonControlsExclude = /^(className|style|children|asChild|on[A-Z].*|render[A-Z].*)$/;
+
+const hiddenControl = {
+  control: false,
+  table: {
+    disable: true,
+  },
+} satisfies StorybookControl;
+
+function withDefaultValue(
+  control: StorybookControl,
+  defaultValue?: boolean | number | string | null,
+): StorybookControl {
+  if (defaultValue === undefined) {
+    return control;
+  }
+
+  return {
+    ...control,
+    table: {
+      ...control.table,
+      defaultValue: {
+        summary: String(defaultValue),
+      },
+    },
+  };
+}
+
+function booleanControl(description: string, defaultValue?: boolean): StorybookControl {
+  return withDefaultValue(
+    {
+      control: "boolean",
+      description,
+    },
+    defaultValue,
+  );
+}
+
+function textControl(description: string, defaultValue?: string): StorybookControl {
+  return withDefaultValue(
+    {
+      control: "text",
+      description,
+    },
+    defaultValue,
+  );
+}
+
+function numberControl(
+  description: string,
+  config?: {
+    defaultValue?: number;
+    max?: number;
+    min?: number;
+    step?: number;
+  },
+): StorybookControl {
+  return withDefaultValue(
+    {
+      control: {
+        max: config?.max,
+        min: config?.min,
+        step: config?.step,
+        type: "number",
+      },
+      description,
+    },
+    config?.defaultValue,
+  );
+}
+
+function selectControl<T extends boolean | number | string | null>(
+  options: readonly T[],
+  description: string,
+  config?: SelectControlConfig,
+): StorybookControl {
+  return withDefaultValue(
+    {
+      control: {
+        type: config?.controlType ?? "select",
+      },
+      description,
+      options,
+      ...(config?.if ? { if: config.if } : {}),
+      ...(config?.labels ? { labels: config.labels } : {}),
+      ...(config?.mapping ? { mapping: config.mapping } : {}),
+      ...(config?.table ? { table: config.table } : {}),
+    },
+    config?.defaultValue,
+  );
+}
+
+export {
+  booleanControl,
+  commonControlsExclude,
+  hiddenControl,
+  numberControl,
+  selectControl,
+  textControl,
+};

package/src/storybook/options.ts

@@ -0,0 +1,52 @@
+import type { TextFieldType } from "../components/forms/text-field.types";
+
+const buttonVariantOptions = [
+  "default",
+  "destructive",
+  "ghost",
+  "link",
+  "outline",
+  "secondary",
+] as const;
+
+const inputTypeOptions = ["text", "email", "password", "search", "number", "tel", "url"] as const;
+
+const textFieldTypeOptions = [
+  "text",
+  "email",
+  "password",
+  "search",
+] satisfies readonly TextFieldType[];
+
+const checkboxStateOptions = [true, false, "indeterminate"] as const;
+
+const switchSizeOptions = ["default", "sm"] as const;
+const drawerDirectionOptions = ["top", "bottom", "left", "right"] as const;
+const loadingSizeOptions = ["sm", "md", "lg", "xl", "2xl", "3xl"] as const;
+const codeBlockLanguageOptions = [
+  "typescript",
+  "tsx",
+  "javascript",
+  "jsx",
+  "python",
+  "bash",
+  "sql",
+  "json",
+  "html",
+  "css",
+  "yaml",
+  "dockerfile",
+  "markdown",
+  "graphql",
+] as const;
+
+export {
+  buttonVariantOptions,
+  checkboxStateOptions,
+  codeBlockLanguageOptions,
+  drawerDirectionOptions,
+  inputTypeOptions,
+  loadingSizeOptions,
+  switchSizeOptions,
+  textFieldTypeOptions,
+};