@scalepad/ui 0.1.0

package/src/components/Typography/Text.tsx

@@ -0,0 +1,74 @@
+/**
+ * Design System Text Component
+ *
+ * Uses a single `variant` prop to control all typography styling (font size,
+ * weight, line height, letter spacing) from Figma text-style tokens.
+ *
+ * @example
+ * ```tsx
+ * <Text variant="body1">Default body text</Text>
+ * <Text variant="body1.strong">Medium weight body text</Text>
+ * <Text variant="caption1" c="text.subdued.default">Small muted text</Text>
+ * <Text variant="monospaced">Code-like text</Text>
+ * ```
+ */
+
+import {
+  forwardRef,
+  type CSSProperties,
+  type MouseEventHandler,
+  type ReactNode,
+} from 'react';
+
+import {
+  Text as MantineText,
+  type TextProps as MantineTextProps,
+} from '@mantine/core';
+
+import {
+  textStyleVariants,
+  type BodyVariant,
+  type TextStyleDefinition,
+} from '../../tokens';
+import { resolveColorToken } from '../../utils/color-props';
+
+import type { TextColor } from '../../tokens';
+
+/** Typography styling props that are controlled by the variant and should not be set directly */
+type TypographyStyleProps = 'fw' | 'fz' | 'size' | 'lh' | 'ff' | 'lts' | 'fs';
+
+export type TextProps = Omit<
+  MantineTextProps,
+  TypographyStyleProps | 'c' | 'children'
+> & {
+  /** Text style variant from the design system. Defaults to 'body1'. */
+  variant?: BodyVariant;
+  /** Text color - accepts semantic text tokens or 'inherit' */
+  c?: TextColor | 'inherit';
+  children?: ReactNode;
+  onClick?: MouseEventHandler<HTMLDivElement>;
+  style?: CSSProperties;
+};
+
+export const Text = forwardRef<HTMLParagraphElement, TextProps>(
+  ({ variant = 'body1', c, ...rest }, ref) => {
+    const variantStyles: TextStyleDefinition = textStyleVariants[variant];
+    const resolvedC = resolveColorToken(c);
+
+    return (
+      <MantineText
+        ref={ref}
+        fw={variantStyles.fontWeight}
+        fz={variantStyles.fontSize}
+        lh={variantStyles.lineHeight}
+        lts={variantStyles.letterSpacing}
+        ff={variantStyles.fontFamily}
+        tt={variantStyles.textTransform}
+        c={resolvedC}
+        {...rest}
+      />
+    );
+  },
+);
+
+Text.displayName = 'Text';

package/src/components/Typography/Title.tsx

@@ -0,0 +1,100 @@
+/**
+ * Design System Title Component
+ *
+ * Uses a single `variant` prop to control all typography styling from Figma
+ * text-style tokens. An optional `order` prop controls the HTML heading
+ * element independently from the visual style.
+ *
+ * @example
+ * ```tsx
+ * <Title variant="heading1">Page Title</Title>
+ * <Title variant="heading2">Section Title</Title>
+ * <Title variant="heading2" order={1}>Visually h2, renders as h1</Title>
+ * ```
+ */
+
+import {
+  Title as MantineTitle,
+  type TitleProps as MantineTitleProps,
+  type TitleOrder,
+} from '@mantine/core';
+
+import {
+  textStyleVariants,
+  type HeadingVariant,
+} from '../../tokens/text-styles';
+import { resolveColorToken } from '../../utils/color-props';
+
+import type { TextColor } from '../../tokens/color-types';
+
+/** Typography styling props that are controlled by the variant and should not be set directly */
+type TypographyStyleProps = 'fw' | 'fz' | 'size' | 'lh' | 'ff' | 'lts' | 'fs';
+
+const variantToOrder: Record<HeadingVariant, TitleOrder> = {
+  heading1: 1,
+  heading2: 2,
+  heading3: 3,
+  heading4: 4,
+  heading5: 5,
+};
+
+export type TitleProps = Omit<
+  MantineTitleProps,
+  TypographyStyleProps | 'c' | 'children' | 'order'
+> & {
+  /** Heading style variant from the design system. */
+  variant?: HeadingVariant;
+  /** HTML heading element (h1-h6). Defaults to match the variant. */
+  order?: TitleOrder;
+  /** Title color - accepts semantic text tokens or 'inherit' */
+  c?: TextColor | 'inherit';
+  children?: React.ReactNode;
+};
+
+function resolveVariant(
+  variant: HeadingVariant | undefined,
+  order: TitleOrder | undefined,
+): HeadingVariant {
+  if (variant) {
+    return variant;
+  }
+
+  if (order === 1) {
+    return 'heading1';
+  }
+  if (order === 2) {
+    return 'heading2';
+  }
+  if (order === 3) {
+    return 'heading3';
+  }
+  if (order === 4) {
+    return 'heading4';
+  }
+  if (order === 5) {
+    return 'heading5';
+  }
+
+  return 'heading4';
+}
+
+export function Title({ variant, order, c, ...rest }: TitleProps) {
+  const effectiveVariant = resolveVariant(variant, order);
+  const variantStyles = textStyleVariants[effectiveVariant];
+  const resolvedC = resolveColorToken(c);
+  const effectiveOrder = order ?? variantToOrder[effectiveVariant];
+
+  return (
+    <MantineTitle
+      order={effectiveOrder}
+      fw={variantStyles.fontWeight}
+      fz={variantStyles.fontSize}
+      lh={variantStyles.lineHeight}
+      lts={variantStyles.letterSpacing}
+      c={resolvedC}
+      {...rest}
+    />
+  );
+}
+
+Title.displayName = 'Title';

package/src/components/Typography/index.ts

@@ -0,0 +1,4 @@
+export { Text } from './Text';
+export type { TextProps } from './Text';
+export { Title } from './Title';
+export type { TitleProps } from './Title';

package/src/geist-fonts.ts

@@ -0,0 +1,48 @@
+// Import Geist font files as URLs
+import geistSansItalicFont from './assets/Geist-Italic[wght].ttf?url';
+import geistSansFont from './assets/Geist[wght].ttf?url';
+import geistMonoItalicFont from './assets/GeistMono-Italic[wght].ttf?url';
+import geistMonoFont from './assets/GeistMono[wght].ttf?url';
+
+// Inject @font-face rules (only once)
+if (
+  typeof document !== 'undefined' &&
+  !document.getElementById('geist-fonts')
+) {
+  const style = document.createElement('style');
+  style.id = 'geist-fonts';
+  style.textContent = `
+    @font-face {
+      font-family: 'Geist Sans';
+      src: url('${geistSansFont}') format('truetype');
+      font-weight: 100 900;
+      font-style: normal;
+      font-display: swap;
+    }
+
+    @font-face {
+      font-family: 'Geist Sans';
+      src: url('${geistSansItalicFont}') format('truetype');
+      font-weight: 100 900;
+      font-style: italic;
+      font-display: swap;
+    }
+
+    @font-face {
+      font-family: 'Geist Mono';
+      src: url('${geistMonoFont}') format('truetype');
+      font-weight: 100 900;
+      font-style: normal;
+      font-display: swap;
+    }
+
+    @font-face {
+      font-family: 'Geist Mono';
+      src: url('${geistMonoItalicFont}') format('truetype');
+      font-weight: 100 900;
+      font-style: italic;
+      font-display: swap;
+    }
+  `;
+  document.head.appendChild(style);
+}

package/src/hooks/index.ts

@@ -0,0 +1,31 @@
+export { useFilters } from './useFilters';
+export type { UseFiltersOptions, UseFiltersReturn } from './useFilters';
+export { useDetailDrawer } from '../components/Drawer/hooks/useDetailDrawer';
+export type {
+  DetailDrawerSearch,
+  UseDetailDrawerOptions,
+  UseDetailDrawerReturn,
+} from '../components/Drawer/hooks/useDetailDrawer';
+export { useDetailDrawerNavigation } from '../components/Drawer/hooks/useDetailDrawerNavigation';
+export type {
+  UseDetailDrawerNavigationOptions,
+  UseDetailDrawerNavigationReturn,
+} from '../components/Drawer/hooks/useDetailDrawerNavigation';
+export { useDetailDrawerNavigationContext } from '../components/Drawer/hooks/useDetailDrawerNavigationContext';
+export type {
+  DetailDrawerNavigationContext,
+  UseDetailDrawerNavigationContextOptions,
+} from '../components/Drawer/hooks/useDetailDrawerNavigationContext';
+export { useInfiniteScroll } from './useInfiniteScroll';
+export type { UseInfiniteScrollOptions } from './useInfiniteScroll';
+export { useServerTable } from './useServerTable';
+export type {
+  ListResponse,
+  UseServerTableOptions,
+  UseServerTableReturn,
+} from './useServerTable';
+export { useTableSelection } from './useTableSelection';
+export type { UseTableSelectionReturn } from './useTableSelection';
+export { useTableSort } from './useTableSort';
+export type { UseTableSortOptions, UseTableSortReturn } from './useTableSort';
+export { usePlatform } from './usePlatform';

package/src/hooks/useFilters.ts

@@ -0,0 +1,152 @@
+import { useCallback, useMemo, useState } from 'react';
+
+import {
+  extractFilterValue,
+  updateFilterCategories,
+} from '../components/FilterMenu/helpers';
+
+import type { FilterCategory } from '../components/AppliedFiltersManagerBar/AppliedFiltersManagerBar';
+import type { FilterSchema, FilterValue } from '../components/FilterMenu/types';
+
+export interface UseFiltersOptions {
+  /** Array of filter schemas defining available filters */
+  filterSchemas: FilterSchema[];
+  /** Optional initial filter state */
+  initialFilters?: FilterCategory[];
+}
+
+export interface UseFiltersReturn {
+  /** Current filter state */
+  filters: FilterCategory[];
+
+  /** Handler to update filter state */
+  onChange: (filters: FilterCategory[]) => void;
+
+  /** Current filter values keyed by schema key */
+  filterValues: Record<string, FilterValue>;
+
+  /** Update a single filter by key */
+  updateFilter: (key: string, value: FilterValue) => void;
+
+  /** Update multiple filters at once */
+  updateFilters: (updates: Record<string, FilterValue>) => void;
+
+  /** Get current value for a specific filter */
+  getFilterValue: (key: string) => FilterValue;
+
+  /** Get a typed change handler for a specific schema */
+  getChangeHandler: (schema: FilterSchema) => (value: FilterValue) => void;
+
+  /** Clear all filters */
+  clearFilters: () => void;
+}
+
+/**
+ * Hook for managing filter state with schema-based filter definitions.
+ * Manages filter state internally and provides utilities for updating filters.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { filters, onChange, clearFilters } = useFilters({
+ *     filterSchemas: defaultFilterSchemas,
+ *   });
+ *
+ *   return (
+ *     <>
+ *       <FilterMenu filters={filters} onFiltersChange={onChange} />
+ *       <AppliedFiltersManagerBar
+ *         filterCategories={filters}
+ *         onClearAll={clearFilters}
+ *       />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export function useFilters({
+  filterSchemas,
+  initialFilters = [],
+}: UseFiltersOptions): UseFiltersReturn {
+  const [filters, setFilters] = useState<FilterCategory[]>(initialFilters);
+
+  // Extract filter values from FilterCategory[] structure using schemas
+  const filterValues = useMemo(() => {
+    const values: Record<string, FilterValue> = {};
+    filterSchemas.forEach(schema => {
+      values[schema.key] = extractFilterValue(schema, filters);
+    });
+    return values;
+  }, [filterSchemas, filters]);
+
+  // Handler to update filter state
+  const onChange = useCallback((newFilters: FilterCategory[]) => {
+    setFilters(newFilters);
+  }, []);
+
+  // Update a single filter by key
+  const updateFilter = useCallback(
+    (key: string, value: FilterValue) => {
+      setFilters(currentFilters => {
+        const schema = filterSchemas.find(s => s.key === key);
+        if (!schema) return currentFilters;
+
+        return updateFilterCategories(
+          filterSchemas,
+          { [key]: value },
+          currentFilters,
+        );
+      });
+    },
+    [filterSchemas],
+  );
+
+  // Update multiple filters at once
+  const updateFilters = useCallback(
+    (updates: Record<string, FilterValue>) => {
+      setFilters(currentFilters => {
+        return updateFilterCategories(filterSchemas, updates, currentFilters);
+      });
+    },
+    [filterSchemas],
+  );
+
+  // Get current value for a specific filter
+  const getFilterValue = useCallback(
+    (key: string): FilterValue => {
+      return (
+        filterValues[key] ??
+        (filterSchemas.find(s => s.key === key)?.type === 'boolean'
+          ? false
+          : [])
+      );
+    },
+    [filterValues, filterSchemas],
+  );
+
+  // Get a typed change handler for a specific schema
+  const getChangeHandler = useCallback(
+    (schema: FilterSchema) => {
+      return (value: FilterValue) => {
+        updateFilter(schema.key, value);
+      };
+    },
+    [updateFilter],
+  );
+
+  // Clear all filters
+  const clearFilters = useCallback(() => {
+    setFilters([]);
+  }, []);
+
+  return {
+    filters,
+    onChange,
+    filterValues,
+    updateFilter,
+    updateFilters,
+    getFilterValue,
+    getChangeHandler,
+    clearFilters,
+  };
+}

package/src/hooks/useInfiniteScroll.ts

@@ -0,0 +1,62 @@
+import { useEffect } from 'react';
+
+import { useInView } from 'react-intersection-observer';
+
+/**
+ * Options for the useInfiniteScroll hook
+ */
+export interface UseInfiniteScrollOptions {
+  /** Whether there are more pages to fetch */
+  hasNextPage: boolean;
+  /** Whether the next page is currently being fetched */
+  isFetchingNextPage: boolean;
+  /** Function to call to fetch the next page */
+  fetchNextPage: () => void;
+  /** Threshold at which to trigger the intersection observer (default: 0) */
+  threshold?: number;
+  /** Root margin for the intersection observer (default: '100px') */
+  rootMargin?: string;
+}
+
+/**
+ * Custom hook for implementing infinite scroll with automatic fetching
+ *
+ * @example
+ * ```tsx
+ * const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
+ *   useInfiniteQuery(queryOptions);
+ *
+ * const { ref } = useInfiniteScroll({
+ *   hasNextPage,
+ *   isFetchingNextPage,
+ *   fetchNextPage,
+ * });
+ *
+ * return (
+ *   <>
+ *     {items.map(item => <Item key={item.id} {...item} />)}
+ *     <div ref={ref} />
+ *   </>
+ * );
+ * ```
+ */
+export function useInfiniteScroll({
+  hasNextPage,
+  isFetchingNextPage,
+  fetchNextPage,
+  threshold = 0,
+  rootMargin = '100px',
+}: UseInfiniteScrollOptions) {
+  const { ref, inView } = useInView({
+    threshold,
+    rootMargin,
+  });
+
+  useEffect(() => {
+    if (inView && hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [inView, hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+  return { ref, inView };
+}

package/src/hooks/usePlatform.ts

@@ -0,0 +1,33 @@
+import { useMemo } from 'react';
+
+type PlatformInfo = {
+  isMac: boolean;
+  submitModifierLabel: '⌘' | 'Ctrl';
+};
+
+function detectIsMac(): boolean {
+  if (typeof navigator === 'undefined') {
+    return false;
+  }
+
+  const navigatorWithUserAgentData = navigator as Navigator & {
+    userAgentData?: { platform?: string };
+  };
+  const userAgentDataPlatform =
+    navigatorWithUserAgentData.userAgentData?.platform;
+  const platform =
+    userAgentDataPlatform ?? navigator.platform ?? navigator.userAgent;
+
+  return /mac|iphone|ipad|ipod/i.test(platform);
+}
+
+export function usePlatform(): PlatformInfo {
+  return useMemo(() => {
+    const isMac = detectIsMac();
+
+    return {
+      isMac,
+      submitModifierLabel: isMac ? '⌘' : 'Ctrl',
+    };
+  }, []);
+}