@scalepad/ui 0.1.0

package/src/components/Drawer/Drawer.tsx

@@ -0,0 +1,236 @@
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+
+import { Maximize2, X } from 'lucide-react';
+
+import {
+  Box,
+  Flex,
+  Group,
+  Drawer as MantineDrawer,
+  type DrawerProps as MantineDrawerProps,
+} from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
+
+import { IconButton } from '../IconButton';
+import { Title } from '../Typography';
+import * as styles from './Drawer.css';
+
+export interface DrawerProps extends Omit<
+  MantineDrawerProps,
+  'opened' | 'onClose' | 'position'
+> {
+  /** Whether the drawer is open */
+  opened: boolean;
+  /** Callback when drawer should close */
+  onClose: () => void;
+  /** Title to display in the drawer header */
+  title?: ReactNode;
+  /** Default width of the drawer (default: 400px) */
+  defaultWidth?: number;
+  /** Minimum width of the drawer (default: 200px) */
+  minWidth?: number;
+  /** Maximum width of the drawer (default: 90% of viewport) */
+  maxWidth?: number;
+  /** Whether to close the drawer when clicking/pressing outside or pressing Escape (default: true) */
+  closeOnFocusOutside?: boolean;
+  /** Actions to render in the top right corner of the drawer */
+  topRightActions?: ReactNode;
+  /** Test ID for UI testing */
+  testId?: string;
+  /** Children to render inside the drawer */
+  children: ReactNode;
+}
+
+/**
+ * Drawer component with resize functionality
+ * Opens from the right by default, can be resized by dragging, and includes full-width controls
+ * On small screens (md breakpoint and below), opens full screen and hides resize controls
+ */
+export function Drawer({
+  opened,
+  onClose,
+  title,
+  defaultWidth = 400,
+  minWidth = 200,
+  maxWidth,
+  children,
+  closeOnFocusOutside = true,
+  topRightActions,
+  testId,
+  ...props
+}: DrawerProps) {
+  const isSmallScreen = useMediaQuery('(max-width: 64em)'); // md breakpoint (breakpoint 3) and below
+  const [width, setWidth] = useState(defaultWidth);
+  const [isFullWidth, setIsFullWidth] = useState(false);
+  const [isResizing, setIsResizing] = useState(false);
+  const drawerRef = useRef<HTMLDivElement>(null);
+  const resizeHandleRef = useRef<HTMLDivElement>(null);
+
+  // Calculate max width if not provided (in pixels for clamping calculations)
+  const effectiveMaxWidth =
+    maxWidth ??
+    (typeof window !== 'undefined' ? window.innerWidth * 0.9 : 1200);
+
+  // Reset state when drawer closes
+  useEffect(() => {
+    if (!opened) {
+      setWidth(defaultWidth);
+      setIsFullWidth(false);
+      setIsResizing(false);
+    }
+  }, [opened, defaultWidth]);
+
+  // Reset width when drawer opens
+  useEffect(() => {
+    if (opened && !isSmallScreen) {
+      if (isFullWidth) {
+        // Full width uses 100vw, but we don't need to set numeric width for it
+        // since drawerWidth will use '100vw' string
+      } else {
+        setWidth(defaultWidth);
+      }
+    }
+  }, [opened, isSmallScreen, isFullWidth, defaultWidth]);
+
+  // Handle mouse down on resize handle
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (isSmallScreen || isFullWidth) {
+        return;
+      }
+      e.preventDefault();
+      setIsResizing(true);
+    },
+    [isSmallScreen, isFullWidth],
+  );
+
+  // Handle mouse move for resizing
+  useEffect(() => {
+    if (!isResizing) {
+      return;
+    }
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!drawerRef.current) {
+        return;
+      }
+
+      const newWidth = window.innerWidth - e.clientX;
+
+      // Clamp width between min and max
+      const clampedWidth = Math.max(
+        minWidth,
+        Math.min(newWidth, effectiveMaxWidth),
+      );
+      setWidth(clampedWidth);
+    };
+
+    const handleMouseUp = () => {
+      setIsResizing(false);
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isResizing, minWidth, effectiveMaxWidth]);
+
+  // Handle full width toggle
+  const handleFullWidth = useCallback(() => {
+    if (isFullWidth) {
+      setIsFullWidth(false);
+      setWidth(defaultWidth);
+    } else {
+      setIsFullWidth(true);
+      // Full width uses 100vw, no need to set numeric width
+    }
+  }, [isFullWidth, defaultWidth]);
+
+  // Determine drawer width based on state
+  const drawerWidth = isSmallScreen ? '100vw' : isFullWidth ? '100vw' : width;
+
+  return (
+    <MantineDrawer
+      {...props}
+      opened={opened}
+      onClose={onClose}
+      position="right"
+      size={drawerWidth}
+      withCloseButton={false}
+      closeOnClickOutside={closeOnFocusOutside}
+      closeOnEscape={closeOnFocusOutside}
+      trapFocus={false}
+      pos="relative"
+      padding={0}
+      ref={drawerRef}
+    >
+      <Box data-testid={testId}>
+        {/* Resize handle - only visible on larger screens when not full width */}
+        {!isSmallScreen && !isFullWidth && (
+          <Box
+            ref={resizeHandleRef}
+            className={`${styles.resizeHandle} ${isResizing ? styles.resizing : ''}`}
+            onMouseDown={handleMouseDown}
+          />
+        )}
+
+        {/* Sticky Header */}
+        <Flex
+          align="center"
+          justify="space-between"
+          px="lg"
+          py="lg"
+          className={styles.stickyHeader}
+        >
+          <Group gap="xs">
+            {/* Full width button - only on larger screens */}
+            {!isSmallScreen && (
+              <IconButton
+                variant="ghost"
+                color="gray"
+                onClick={handleFullWidth}
+                title={
+                  isFullWidth ? 'Restore default width' : 'Make full width'
+                }
+                data-testid="expand-drawer-button"
+              >
+                <Maximize2 size={16} />
+              </IconButton>
+            )}
+
+            {/* Close button */}
+            <IconButton
+              variant="ghost"
+              color="gray"
+              onClick={onClose}
+              title="Close drawer"
+              data-testid="close-drawer-button"
+            >
+              <X size={16} />
+            </IconButton>
+          </Group>
+          {topRightActions}
+        </Flex>
+
+        {/* Content */}
+        <Box px="lg" pb="lg">
+          {title && (
+            <Title variant="heading4" pt="lg">
+              {title}
+            </Title>
+          )}
+          {children}
+        </Box>
+      </Box>
+    </MantineDrawer>
+  );
+}

package/src/components/Drawer/hooks/useDetailDrawer.ts

@@ -0,0 +1,61 @@
+import { useCallback } from 'react';
+
+export interface DetailDrawerSearch {
+  detailId?: string;
+}
+
+export interface UseDetailDrawerOptions {
+  detailId: string | undefined;
+  navigate: (options: {
+    to: string;
+    search: DetailDrawerSearch;
+  }) => void | Promise<void>;
+  pathname: string;
+}
+
+export interface UseDetailDrawerReturn {
+  detailId: string | undefined;
+  isOpen: boolean;
+  openDetail: (id: string) => void;
+  closeDetail: () => void;
+}
+
+/**
+ * Hook for syncing drawer state with caller-provided navigation/search state.
+ *
+ * @example
+ * ```tsx
+ * const navigate = useNavigate();
+ * const pathname = useRouterState({ select: (state) => state.location.pathname });
+ * const { detailId } = Route.useSearch();
+ *
+ * const { isOpen, openDetail, closeDetail } = useDetailDrawer({
+ *   detailId,
+ *   navigate,
+ *   pathname,
+ * });
+ * ```
+ */
+export function useDetailDrawer({
+  detailId,
+  navigate,
+  pathname,
+}: UseDetailDrawerOptions): UseDetailDrawerReturn {
+  const openDetail = useCallback(
+    (id: string) => {
+      void navigate({ to: pathname, search: { detailId: id } });
+    },
+    [navigate, pathname],
+  );
+
+  const closeDetail = useCallback(() => {
+    void navigate({ to: pathname, search: {} });
+  }, [navigate, pathname]);
+
+  return {
+    detailId,
+    isOpen: !!detailId,
+    openDetail,
+    closeDetail,
+  };
+}

package/src/components/Drawer/hooks/useDetailDrawerNavigation.ts

@@ -0,0 +1,125 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+export interface UseDetailDrawerNavigationOptions {
+  detailId?: string;
+  orderedIds: string[];
+  openDetail: (id: string) => void;
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+  fetchNextPage: () => void | Promise<void>;
+}
+
+export interface UseDetailDrawerNavigationReturn {
+  currentIndex: number;
+  isCurrentLoaded: boolean;
+  canGoPrev: boolean;
+  canGoNext: boolean;
+  goPrev: () => Promise<void>;
+  goNext: () => Promise<void>;
+}
+
+interface PendingAdvance {
+  fromId: string;
+}
+
+export function useDetailDrawerNavigation({
+  detailId,
+  orderedIds,
+  openDetail,
+  hasNextPage,
+  isFetchingNextPage,
+  fetchNextPage,
+}: UseDetailDrawerNavigationOptions): UseDetailDrawerNavigationReturn {
+  const [pendingAdvance, setPendingAdvance] = useState<PendingAdvance | null>(
+    null,
+  );
+
+  const currentIndex = useMemo(() => {
+    if (!detailId) {
+      return -1;
+    }
+
+    return orderedIds.indexOf(detailId);
+  }, [detailId, orderedIds]);
+
+  const isCurrentLoaded = currentIndex !== -1;
+  const canGoPrev = isCurrentLoaded && currentIndex > 0;
+  const canGoNext =
+    isCurrentLoaded && (currentIndex < orderedIds.length - 1 || hasNextPage);
+
+  useEffect(() => {
+    if (!pendingAdvance) {
+      return;
+    }
+
+    if (detailId !== pendingAdvance.fromId) {
+      setPendingAdvance(null);
+      return;
+    }
+
+    const pendingIndex = orderedIds.indexOf(pendingAdvance.fromId);
+    const nextId =
+      pendingIndex === -1 ? undefined : orderedIds[pendingIndex + 1];
+
+    if (nextId) {
+      setPendingAdvance(null);
+      openDetail(nextId);
+      return;
+    }
+
+    if (!hasNextPage && !isFetchingNextPage) {
+      setPendingAdvance(null);
+    }
+  }, [
+    detailId,
+    hasNextPage,
+    isFetchingNextPage,
+    openDetail,
+    orderedIds,
+    pendingAdvance,
+  ]);
+
+  const goPrev = useCallback(async () => {
+    if (!canGoPrev) {
+      return;
+    }
+
+    openDetail(orderedIds[currentIndex - 1]);
+  }, [canGoPrev, currentIndex, openDetail, orderedIds]);
+
+  const goNext = useCallback(async () => {
+    if (!canGoNext || !detailId) {
+      return;
+    }
+
+    const nextId = orderedIds[currentIndex + 1];
+
+    if (nextId) {
+      openDetail(nextId);
+      return;
+    }
+
+    if (hasNextPage && !isFetchingNextPage) {
+      setPendingAdvance({ fromId: detailId });
+      await Promise.resolve(fetchNextPage());
+    }
+  }, [
+    canGoNext,
+    currentIndex,
+    detailId,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    openDetail,
+    orderedIds,
+  ]);
+
+  return {
+    currentIndex,
+    isCurrentLoaded,
+    canGoPrev,
+    canGoNext,
+    goPrev,
+    goNext,
+  };
+}

package/src/components/Drawer/hooks/useDetailDrawerNavigationContext.ts

@@ -0,0 +1,66 @@
+import { useEffect, useMemo } from 'react';
+
+import type { InfiniteScrollState } from '../../InfiniteScrollTrigger';
+
+export interface DetailDrawerNavigationContext<TRow = never> {
+  orderedIds: string[];
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+  fetchNextPage: () => void | Promise<void>;
+  getRowById?: (id: string) => TRow | null;
+}
+
+export interface UseDetailDrawerNavigationContextOptions<TRow> {
+  data: TRow[];
+  getRowId: (row: TRow) => string;
+  pagination: Pick<
+    InfiniteScrollState,
+    'fetchNextPage' | 'hasNextPage' | 'isFetchingNextPage'
+  >;
+  onNavigationContextChange?: (
+    context: DetailDrawerNavigationContext<TRow>,
+  ) => void;
+  includeRowLookup?: boolean;
+}
+
+export function useDetailDrawerNavigationContext<TRow>({
+  data,
+  getRowId,
+  pagination,
+  onNavigationContextChange,
+  includeRowLookup = false,
+}: UseDetailDrawerNavigationContextOptions<TRow>): DetailDrawerNavigationContext<TRow> {
+  const rowsById = useMemo(
+    () =>
+      includeRowLookup
+        ? (Object.fromEntries(
+            data.map(row => [getRowId(row), row] as const),
+          ) as Record<string, TRow>)
+        : null,
+    [data, getRowId, includeRowLookup],
+  );
+
+  const navigationContext = useMemo<DetailDrawerNavigationContext<TRow>>(
+    () => ({
+      orderedIds: data.map(row => getRowId(row)),
+      hasNextPage: pagination.hasNextPage,
+      isFetchingNextPage: pagination.isFetchingNextPage,
+      fetchNextPage: pagination.fetchNextPage,
+      getRowById: rowsById ? (id: string) => rowsById[id] ?? null : undefined,
+    }),
+    [
+      data,
+      getRowId,
+      pagination.fetchNextPage,
+      pagination.hasNextPage,
+      pagination.isFetchingNextPage,
+      rowsById,
+    ],
+  );
+
+  useEffect(() => {
+    onNavigationContextChange?.(navigationContext);
+  }, [navigationContext, onNavigationContextChange]);
+
+  return navigationContext;
+}

package/src/components/EditableRichText/EditableRichText.css.ts

@@ -0,0 +1,72 @@
+import { style } from '@vanilla-extract/css';
+
+import { tokens } from '../../theme/themeContract.css';
+
+export const root = style({
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: tokens.spacing.xs,
+  borderRadius: tokens.radius.lg,
+  border: '1px solid transparent',
+  padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
+  margin: `calc(-1 * ${tokens.spacing.xs}) calc(-1 * ${tokens.spacing.sm})`,
+  transition: 'border-color 120ms ease, background-color 120ms ease',
+  cursor: 'text',
+  selectors: {
+    '&:hover:not([aria-disabled="true"])': {
+      borderColor: tokens.color.stroke.subduedDefault,
+    },
+  },
+});
+
+export const rootFocused = style({
+  borderColor: tokens.color.stroke.focusDefault,
+  background: tokens.color.background.input,
+});
+
+export const rootDisabled = style({
+  cursor: 'default',
+  opacity: 0.6,
+});
+
+export const toolbar = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: tokens.spacing.xs,
+  paddingBottom: tokens.spacing.xs,
+  borderBottom: `1px solid ${tokens.color.stroke.subduedDefault}`,
+  flexWrap: 'wrap',
+});
+
+export const contentWrapper = style({
+  position: 'relative',
+  minHeight: '1.5rem',
+});
+
+export const placeholder = style({
+  position: 'absolute',
+  inset: 0,
+  color: tokens.color.text.subduedDefault,
+  pointerEvents: 'none',
+  userSelect: 'none',
+});
+
+export const errorRow = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: tokens.spacing.sm,
+  flexWrap: 'wrap',
+});
+
+export const srOnlyTextarea = style({
+  position: 'absolute',
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: 'hidden',
+  clip: 'rect(0, 0, 0, 0)',
+  whiteSpace: 'nowrap',
+  border: 0,
+});