@startsimpli/ui 0.1.0 → 0.1.3

package/src/components/ui/page-loader.tsx

@@ -0,0 +1,31 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+interface PageLoaderProps {
+  /** Number of skeleton rows to show. Default: 5. */
+  rows?: number
+  className?: string
+}
+
+/**
+ * Page-level skeleton loader. Renders animated skeleton rows as a loading placeholder.
+ *
+ * @example
+ * if (loading) return <PageLoader />
+ */
+export function PageLoader({ rows = 5, className }: PageLoaderProps) {
+  return (
+    <div className={cn("w-full space-y-3 p-4", className)} aria-busy="true" aria-label="Loading">
+      <div className="h-8 w-1/3 rounded-md bg-muted animate-pulse" />
+      <div className="space-y-2">
+        {Array.from({ length: rows }).map((_, i) => (
+          <div
+            key={i}
+            className="h-12 w-full rounded-md bg-muted animate-pulse"
+            style={{ opacity: 1 - i * 0.1 }}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/components/ui/query-provider.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useState } from 'react';
+
+/**
+ * Shared QueryClient provider with consistent defaults.
+ *
+ * - staleTime: 5 minutes (avoids unnecessary refetches)
+ * - refetchOnWindowFocus: false (explicit control over refetches)
+ */
+export function QueryProvider({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 5 * 60 * 1000,
+            refetchOnWindowFocus: false,
+          },
+        },
+      })
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+    </QueryClientProvider>
+  );
+}

package/src/components/unified-table/components/Toolbar/StandardTableToolbar.tsx

@@ -21,7 +21,7 @@ export interface StandardTableToolbarProps<TData> {
   searchPlaceholder?: string
   searchValue?: string
   onSearchChange?: (value: string) => void
-  searchInputRef?: RefObject<HTMLInputElement>
+  searchInputRef?: RefObject<HTMLInputElement | null>
   searchAutoFocus?: boolean
 
   // Column visibility

package/src/components/unified-table/hooks/useFilters.ts

@@ -1,3 +1,4 @@
+'use client'
 import { useState, useCallback } from 'react'
 import { UseFiltersReturn, FilterState } from '../types'
 

package/src/components/unified-table/hooks/usePagination.ts

@@ -1,3 +1,4 @@
+'use client'
 import { useState, useCallback, useMemo } from 'react'
 import { UsePaginationReturn } from '../types'
 

package/src/components/unified-table/hooks/useSelection.ts

@@ -1,3 +1,4 @@
+'use client'
 import { useState, useCallback, useEffect, useRef } from 'react'
 import { UseSelectionReturn } from '../types'
 
@@ -40,7 +41,7 @@ export function useSelection({
   }, [onSelectionChange, onSelectAllPages])
 
   // Sync external state to internal when in controlled mode
-  const prevExternalIdsRef = useRef<Set<string> | undefined>()
+  const prevExternalIdsRef = useRef<Set<string> | undefined>(undefined)
   useEffect(() => {
     if (externalSelectedIds !== undefined && externalSelectedIds !== prevExternalIdsRef.current) {
       setInternalSelectedIds(new Set(externalSelectedIds))

package/src/components/unified-table/hooks/useTableKeyboard.ts

@@ -1,3 +1,4 @@
+'use client'
 import { useEffect, useCallback, useRef, useState, RefObject } from 'react'
 
 export interface UseTableKeyboardProps<TData> {
@@ -8,7 +9,7 @@ export interface UseTableKeyboardProps<TData> {
   onToggleAll?: () => void
   onRowClick?: (row: TData) => void
   onDelete?: (ids: Set<string>) => void
-  tableRef: RefObject<HTMLElement>
+  tableRef: RefObject<HTMLElement | null>
   enabled?: boolean
 }
 

package/src/components/unified-table/hooks/useTablePreferences.ts

@@ -1,3 +1,4 @@
+'use client'
 import { useState, useEffect, useCallback, useRef } from 'react'
 import { ColumnVisibilityState, SortState } from '../types'
 

package/src/components/unified-table/hooks/useTableState.ts

@@ -1,3 +1,4 @@
+'use client'
 import { useState, useCallback, useMemo } from 'react'
 import { UseTableStateReturn, TableState } from '../types'
 

package/src/components/unified-table/hooks/useTableURL.test.tsx

@@ -7,7 +7,7 @@ const mockReplace = jest.fn()
 const mockSearchParams = new URLSearchParams()
 const mockPathname = '/test-path'
 
-jest.mock('next/navigation/', () => ({
+jest.mock('next/navigation', () => ({
   useSearchParams: jest.fn(() => mockSearchParams),
   useRouter: jest.fn(() => ({
     replace: mockReplace,

package/src/components/unified-table/index.ts

@@ -14,3 +14,7 @@ export { MOBILE_BREAKPOINT } from './components/MobileView'
 
 export * from './hooks'
 export * from './utils'
+
+// Toolbar components
+export { StandardTableToolbar } from './components/Toolbar'
+export type { StandardTableToolbarProps } from './components/Toolbar'

package/src/components/wizard/StepIndicator.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react'
+import { Check } from 'lucide-react'
+
+export interface StepConfig {
+  label: string
+  description?: string
+}
+
+export interface StepIndicatorProps {
+  steps: StepConfig[]
+  currentIndex: number
+  className?: string
+}
+
+export function StepIndicator({ steps, currentIndex, className = '' }: StepIndicatorProps) {
+  return (
+    <ol className={`flex items-center gap-0 ${className}`}>
+      {steps.map((step, index) => {
+        const isCompleted = index < currentIndex
+        const isActive = index === currentIndex
+        const isLast = index === steps.length - 1
+
+        return (
+          <li key={index} className={`flex items-center ${!isLast ? 'flex-1' : ''}`}>
+            <div className="flex flex-col items-center">
+              <div
+                className={[
+                  'flex h-8 w-8 items-center justify-center rounded-full border-2 text-sm font-medium transition-colors',
+                  isCompleted
+                    ? 'border-primary-600 bg-primary-600 text-white'
+                    : isActive
+                    ? 'border-primary-600 bg-white text-primary-600'
+                    : 'border-gray-300 bg-white text-gray-400',
+                ].join(' ')}
+              >
+                {isCompleted ? <Check className="h-4 w-4" /> : index + 1}
+              </div>
+              <span
+                className={[
+                  'mt-1 text-xs font-medium',
+                  isActive ? 'text-primary-600' : isCompleted ? 'text-gray-600' : 'text-gray-400',
+                ].join(' ')}
+              >
+                {step.label}
+              </span>
+            </div>
+            {!isLast && (
+              <div
+                className={[
+                  'h-0.5 flex-1 mx-2 mb-4 transition-colors',
+                  isCompleted ? 'bg-primary-600' : 'bg-gray-200',
+                ].join(' ')}
+              />
+            )}
+          </li>
+        )
+      })}
+    </ol>
+  )
+}

package/src/components/wizard/index.ts

@@ -0,0 +1,2 @@
+export { StepIndicator } from './StepIndicator'
+export type { StepIndicatorProps, StepConfig } from './StepIndicator'

package/src/theme/tailwind.config.d.ts

@@ -0,0 +1,3 @@
+import type { Config } from 'tailwindcss'
+declare const config: Config
+export default config

package/tailwind.preset.js

@@ -0,0 +1,87 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ['class'],
+  theme: {
+    extend: {
+      colors: {
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+      },
+      borderRadius: {
+        sm: 'var(--radius-sm)',
+        md: 'var(--radius-md)',
+        lg: 'var(--radius-lg)',
+        xl: 'var(--radius-xl)',
+        full: 'var(--radius-full)',
+        DEFAULT: 'var(--radius)',
+      },
+      boxShadow: {
+        sm: 'var(--shadow-sm)',
+        DEFAULT: 'var(--shadow-md)',
+        md: 'var(--shadow-md)',
+        lg: 'var(--shadow-lg)',
+        xl: 'var(--shadow-xl)',
+        none: 'none',
+      },
+      fontFamily: {
+        sans: ['var(--font-sans)', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+        mono: ['var(--font-mono)', 'ui-monospace', 'monospace'],
+        heading: ['var(--font-heading, var(--font-sans))', 'ui-sans-serif', 'sans-serif'],
+      },
+      transitionDuration: {
+        fast: 'var(--duration-fast)',
+        DEFAULT: 'var(--duration-normal)',
+        slow: 'var(--duration-slow)',
+      },
+      borderWidth: {
+        DEFAULT: 'var(--border-width)',
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
+    },
+  },
+  plugins: [],
+}