@snapdragonsnursery/react-components 1.6.0 → 1.8.0

package/src/components/ui/stat-card.jsx

@@ -0,0 +1,100 @@
+// Stat Card UI Component (shared library)
+// Reusable statistic card with optional icon and caption.
+// Example:
+// <StatCard title="Active Users" value="97K" caption="+24.3% this month" icon={ArrowTrendingUpIcon} tone="success" />
+
+import React from 'react'
+import { cn } from '../../lib/utils'
+
+// Lightweight Card primitives aligned with this package styling
+const Card = React.forwardRef(function Card({ className, ...props }, ref) {
+  return (
+    <div
+      ref={ref}
+      className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
+      {...props}
+    />
+  )
+})
+
+const CardHeader = React.forwardRef(function CardHeader({ className, ...props }, ref) {
+  return <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+})
+
+const CardTitle = React.forwardRef(function CardTitle({ className, ...props }, ref) {
+  return (
+    <h3
+      ref={ref}
+      className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
+      {...props}
+    />
+  )
+})
+
+const CardContent = React.forwardRef(function CardContent({ className, ...props }, ref) {
+  return <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+})
+
+function Skeleton({ className, ...props }) {
+  return <div className={cn('animate-pulse rounded-md bg-muted', className)} {...props} />
+}
+
+const toneClasses = {
+  default: {
+    badge: 'bg-gray-100 text-gray-700',
+    value: 'text-foreground',
+    ring: 'ring-gray-200',
+  },
+  success: {
+    badge: 'bg-emerald-100 text-emerald-700',
+    value: 'text-emerald-700',
+    ring: 'ring-emerald-200',
+  },
+  danger: {
+    badge: 'bg-rose-100 text-rose-700',
+    value: 'text-rose-700',
+    ring: 'ring-rose-200',
+  },
+  warning: {
+    badge: 'bg-amber-100 text-amber-700',
+    value: 'text-amber-700',
+    ring: 'ring-amber-200',
+  },
+  info: {
+    badge: 'bg-sky-100 text-sky-700',
+    value: 'text-sky-700',
+    ring: 'ring-sky-200',
+  },
+}
+
+export function StatCard({ title, value, caption, icon: Icon, tone = 'default', className, loading = false }) {
+  const styles = toneClasses[tone] || toneClasses.default
+  return (
+    <Card className={cn('shadow-sm hover:shadow transition-shadow', className)}>
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-sm font-medium text-muted-foreground">
+            {loading ? <Skeleton className="h-4 w-24" /> : title}
+          </CardTitle>
+          {Icon ? (
+            <div className={cn('inline-flex h-10 w-10 items-center justify-center rounded-full ring-1', styles.badge, styles.ring)}>
+              {loading ? <Skeleton className="h-5 w-5 rounded-full" /> : <Icon className="h-5 w-5" />}
+            </div>
+          ) : null}
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className={cn('text-3xl font-extrabold tracking-tight', styles.value)}>
+          {loading ? <Skeleton className="h-8 w-20" /> : value}
+        </div>
+        {caption ? (
+          <div className="mt-1 text-sm text-muted-foreground">
+            {loading ? <Skeleton className="h-4 w-28" /> : caption}
+          </div>
+        ) : null}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default StatCard

package/src/components/ui/stat-card.test.jsx

@@ -0,0 +1,24 @@
+// Basic render tests for StatCard
+// Example usage demonstrated in the component file header.
+
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import StatCard from './stat-card'
+
+describe('StatCard (library)', () => {
+  it('renders title and value', () => {
+    render(<StatCard title="Total" value={42} caption="units" />)
+    expect(screen.getByText('Total')).toBeInTheDocument()
+    expect(screen.getByText('42')).toBeInTheDocument()
+    expect(screen.getByText('units')).toBeInTheDocument()
+  })
+
+  it('renders skeletons when loading', () => {
+    const { container } = render(<StatCard title="Total" value={42} caption="units" loading />)
+    expect(screen.queryByText('Total')).toBeNull()
+    expect(screen.queryByText('42')).toBeNull()
+    expect(screen.queryByText('units')).toBeNull()
+    // Skeletons exist
+    expect(container.querySelectorAll('.animate-pulse').length).toBeGreaterThan(0)
+  })
+})

package/src/components/ui/tooltip.jsx

@@ -0,0 +1,53 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "../../lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return (<TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />);
+}
+
+function Tooltip({
+  ...props
+}) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({
+  ...props
+}) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}>
+        {children}
+        <TooltipPrimitive.Arrow
+          className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/hooks/use-current-site.js

@@ -0,0 +1,61 @@
+import * as React from "react"
+
+export const SITE_STORAGE_KEY = "current_site_id"
+export const SITE_EVENT_NAME = "siteChanged"
+
+export function readCurrentSiteId(storageKey = SITE_STORAGE_KEY) {
+  if (typeof window === "undefined") return null
+  try {
+    const v = window.localStorage.getItem(storageKey)
+    if (v == null) return null
+    const n = Number(v)
+    return Number.isNaN(n) ? v : n
+  } catch {
+    return null
+  }
+}
+
+export function writeCurrentSiteId(siteId, storageKey = SITE_STORAGE_KEY) {
+  if (typeof window === "undefined") return
+  try {
+    if (siteId == null) {
+      window.localStorage.removeItem(storageKey)
+    } else {
+      window.localStorage.setItem(storageKey, String(siteId))
+    }
+  } catch {}
+
+  try {
+    const numeric = typeof siteId === "number" ? siteId : Number(siteId)
+    const detail = { siteId: Number.isFinite(numeric) ? numeric : siteId }
+    window.dispatchEvent(new CustomEvent(SITE_EVENT_NAME, { detail }))
+  } catch {}
+}
+
+export function useCurrentSiteId({ storageKey = SITE_STORAGE_KEY, eventName = SITE_EVENT_NAME } = {}) {
+  const [currentSiteId, setCurrentSiteId] = React.useState(null)
+
+  React.useEffect(() => {
+    // Initialize from storage on mount
+    const initial = readCurrentSiteId(storageKey)
+    setCurrentSiteId(initial)
+
+    // Listen for global site changes
+    const handler = (e) => {
+      try {
+        const id = e?.detail?.siteId
+        if (typeof id !== "undefined") setCurrentSiteId(id)
+      } catch {}
+    }
+    window.addEventListener(eventName, handler)
+    return () => window.removeEventListener(eventName, handler)
+  }, [storageKey, eventName])
+
+  const update = React.useCallback((id) => {
+    setCurrentSiteId(id)
+    writeCurrentSiteId(id, storageKey)
+  }, [storageKey])
+
+  return [currentSiteId, update]
+}
+

package/src/hooks/use-mobile.js

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(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.css

@@ -1,4 +1,6 @@
 @tailwind base;
+
+@custom-variant dark (&:is(.dark *));
 @tailwind components;
 @tailwind utilities;
 
@@ -56,4 +58,46 @@
   body {
     @apply bg-background text-foreground;
   }
+}
+
+:root {
+  --sidebar: hsl(0 0% 98%);
+  --sidebar-foreground: hsl(240 5.3% 26.1%);
+  --sidebar-primary: hsl(240 5.9% 10%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(240 4.8% 95.9%);
+  --sidebar-accent-foreground: hsl(240 5.9% 10%);
+  --sidebar-border: hsl(220 13% 91%);
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+}
+
+.dark {
+  --sidebar: hsl(240 5.9% 10%);
+  --sidebar-foreground: hsl(240 4.8% 95.9%);
+  --sidebar-primary: hsl(224.3 76.3% 48%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(240 3.7% 15.9%);
+  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+  --sidebar-border: hsl(240 3.7% 15.9%);
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+}
+
+@theme inline {
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
 } 

package/src/index.d.ts

@@ -36,13 +36,99 @@ export const EmployeeSearchDemo: React.ComponentType<any>
 export const EmployeeSearchFilters: React.ComponentType<any>
 
 export const DateRangePicker: React.ComponentType<any>
-export const DatePicker: React.ComponentType<any>
+export interface DatePickerProps {
+  selectedDate?: Date | null
+  onSelect: (date: Date | null) => void
+  className?: string
+  placeholder?: string
+  disabled?: boolean
+  disableFuture?: boolean
+}
+export const DatePicker: React.ComponentType<DatePickerProps>
 export const Calendar: React.ComponentType<any>
 export const SimpleCalendar: React.ComponentType<any>
 export const Popover: React.ComponentType<any>
 export const PopoverContent: React.ComponentType<any>
 export const PopoverTrigger: React.ComponentType<any>
 
+export interface StatCardProps {
+  title: string
+  value: React.ReactNode
+  caption?: React.ReactNode
+  icon?: React.ComponentType<any>
+  tone?: 'default' | 'success' | 'danger' | 'warning' | 'info'
+  className?: string
+  loading?: boolean
+}
+export const StatCard: React.ComponentType<StatCardProps>
+
 export function configureTelemetry(...args: any[]): any
 
 
+// Sidebar + UI exports
+export const AppSidebar: React.ComponentType<any>
+export const Sidebar: React.ComponentType<any>
+export const SidebarContent: React.ComponentType<any>
+export const SidebarFooter: React.ComponentType<any>
+export const SidebarGroup: React.ComponentType<any>
+export const SidebarGroupAction: React.ComponentType<any>
+export const SidebarGroupContent: React.ComponentType<any>
+export const SidebarGroupLabel: React.ComponentType<any>
+export const SidebarHeader: React.ComponentType<any>
+export const SidebarInput: React.ComponentType<any>
+export const SidebarInset: React.ComponentType<any>
+export const SidebarMenu: React.ComponentType<any>
+export const SidebarMenuAction: React.ComponentType<any>
+export const SidebarMenuBadge: React.ComponentType<any>
+export const SidebarMenuButton: React.ComponentType<any>
+export const SidebarMenuItem: React.ComponentType<any>
+export const SidebarMenuSkeleton: React.ComponentType<any>
+export const SidebarMenuSub: React.ComponentType<any>
+export const SidebarMenuSubButton: React.ComponentType<any>
+export const SidebarMenuSubItem: React.ComponentType<any>
+export const SidebarProvider: React.ComponentType<any>
+export const SidebarRail: React.ComponentType<any>
+export const SidebarSeparator: React.ComponentType<any>
+export const SidebarTrigger: React.ComponentType<any>
+export function useSidebar(): any
+
+export const Separator: React.ComponentType<any>
+export const Breadcrumb: React.ComponentType<any>
+export const BreadcrumbItem: React.ComponentType<any>
+export const BreadcrumbLink: React.ComponentType<any>
+export const BreadcrumbList: React.ComponentType<any>
+export const BreadcrumbPage: React.ComponentType<any>
+export const BreadcrumbSeparator: React.ComponentType<any>
+export const BreadcrumbEllipsis: React.ComponentType<any>
+
+// Switchers
+export interface SwitcherItem {
+  id?: string | number
+  name: string
+  icon?: React.ComponentType<any>
+  logo?: React.ComponentType<any>
+}
+export interface SiteSwitcherProps {
+  items?: SwitcherItem[]
+  activeId?: string | number
+  onChange?: (item: SwitcherItem) => void
+  label?: string
+  isLoading?: boolean
+}
+export interface RoomSwitcherProps {
+  items?: SwitcherItem[]
+  activeId?: string | number
+  onChange?: (item: SwitcherItem) => void
+  label?: string
+  isLoading?: boolean
+  baseColor?: string
+}
+export const SiteSwitcher: React.ComponentType<SiteSwitcherProps>
+export const RoomSwitcher: React.ComponentType<RoomSwitcherProps>
+
+// Site selection helpers
+export const SITE_STORAGE_KEY: string
+export const SITE_EVENT_NAME: string
+export function readCurrentSiteId(storageKey?: string): string | number | null
+export function writeCurrentSiteId(siteId: string | number | null, storageKey?: string): void
+export function useCurrentSiteId(options?: { storageKey?: string; eventName?: string }): [string | number | null, (id: string | number | null) => void]

package/src/index.js

@@ -1,27 +1,76 @@
-export { default as AuthButtons } from "./AuthButtons";
-export { default as ThemeToggle } from "./ThemeToggle";
-export { default as ChildSearchModal } from "./ChildSearchModal";
-export { default as ChildSearchPage } from "./ChildSearchPage";
-export { default as ChildSearchPageDemo } from "./ChildSearchPageDemo";
-export { default as ThemeToggleTest } from "./ThemeToggleTest";
-export { default as LandingPage } from "./LandingPage";
-export { default as ChildSearchFilters } from "./components/ChildSearchFilters";
-export { default as DateRangePickerDemo } from "./DateRangePickerDemo";
-export { default as CalendarDemo } from "./CalendarDemo";
-export { default as DateRangePickerTest } from "./DateRangePickerTest";
-export { default as ApplyButtonDemo } from "./ApplyButtonDemo";
+export { default as AuthButtons } from "./AuthButtons.jsx";
+export { default as ThemeToggle } from "./ThemeToggle.jsx";
+export { default as ChildSearchModal } from "./ChildSearchModal.jsx";
+export { default as ChildSearchPage } from "./ChildSearchPage.jsx";
+export { default as ChildSearchPageDemo } from "./ChildSearchPageDemo.jsx";
+export { default as ThemeToggleTest } from "./ThemeToggleTest.jsx";
+export { default as LandingPage } from "./LandingPage.jsx";
+export { default as ChildSearchFilters } from "./components/ChildSearchFilters.jsx";
+export { default as DateRangePickerDemo } from "./DateRangePickerDemo.jsx";
+export { default as CalendarDemo } from "./CalendarDemo.jsx";
+export { default as DateRangePickerTest } from "./DateRangePickerTest.jsx";
+export { default as ApplyButtonDemo } from "./ApplyButtonDemo.jsx";
 
 // Employee Search Components
-export { default as EmployeeSearchPage } from "./EmployeeSearchPage";
-export { default as EmployeeSearchModal } from "./EmployeeSearchModal";
-export { default as EmployeeSearchDemo } from "./EmployeeSearchDemo";
-export { default as EmployeeSearchFilters } from "./components/EmployeeSearchFilters";
+export { default as EmployeeSearchPage } from "./EmployeeSearchPage.jsx";
+export { default as EmployeeSearchModal } from "./EmployeeSearchModal.jsx";
+export { default as EmployeeSearchDemo } from "./EmployeeSearchDemo.jsx";
+export { default as EmployeeSearchFilters } from "./components/EmployeeSearchFilters.jsx";
 
-export { configureTelemetry } from "./telemetry";
+export { configureTelemetry } from "./telemetry.js";
 
 // UI Components
-export { DateRangePicker, DatePicker } from "./components/ui/date-range-picker";
-export { Calendar } from "./components/ui/calendar";
-export { SimpleCalendar } from "./components/ui/simple-calendar";
-export { Popover, PopoverContent, PopoverTrigger } from "./components/ui/popover";
-export { default as SoftWarningAlert } from "./components/ui/soft-warning-alert";
+export { DateRangePicker, DatePicker } from "./components/ui/date-range-picker.jsx";
+export { Calendar } from "./components/ui/calendar.jsx";
+export { SimpleCalendar } from "./components/ui/simple-calendar.jsx";
+export { Popover, PopoverContent, PopoverTrigger } from "./components/ui/popover.jsx";
+export { default as SoftWarningAlert } from "./components/ui/soft-warning-alert.jsx";
+export { default as StatCard } from "./components/ui/stat-card.jsx";
+
+// Shadcn Sidebar + related UI
+export { AppSidebar } from "./components/app-sidebar.jsx";
+export { SiteSwitcher } from "./components/site-switcher.jsx";
+export { RoomSwitcher } from "./components/room-switcher.jsx";
+export {
+  useCurrentSiteId,
+  readCurrentSiteId,
+  writeCurrentSiteId,
+  SITE_STORAGE_KEY,
+  SITE_EVENT_NAME,
+} from "./hooks/use-current-site.js";
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+} from "./components/ui/sidebar.jsx";
+export { Separator } from "./components/ui/separator.jsx";
+export {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+} from "./components/ui/breadcrumb.jsx";