chore: archive observability-service-registry, track pi-map artifacts
- Archive the completed observability-service-registry SDD change into openspec/changes/archive/ (delivered across 5 slices; only jellyfin-service-registry remains active). - Stop ignoring .pi-map.md / .pi-map.index.md so the navigation maps are versioned alongside the code, and add the regenerated map pairs repo-wide.
This commit is contained in:
Developer
@@ -0,0 +1,44 @@
|
||||
# frontend/src/components (index)
|
||||
dir: frontend/src/components
|
||||
|
||||
## role
|
||||
React UI component library providing reusable display elements, dashboard widgets, and page-level views for backup management, observability, media sessions, and widget configuration.
|
||||
## parent
|
||||
index: frontend/src/.pi-map.index.md
|
||||
map: frontend/src/.pi-map.md
|
||||
## children
|
||||
- frontend/src/components/__tests__
|
||||
index: frontend/src/components/__tests__/.pi-map.index.md
|
||||
map: frontend/src/components/__tests__/.pi-map.md
|
||||
- frontend/src/components/ui
|
||||
index: frontend/src/components/ui/.pi-map.index.md
|
||||
map: frontend/src/components/ui/.pi-map.md
|
||||
## files
|
||||
- BackupAlertsTable.tsx
|
||||
- BackupDashboardWidget.tsx
|
||||
- BackupJobsTable.tsx
|
||||
- BackupRunsTable.tsx
|
||||
- BackupsPage.tsx
|
||||
- ConfirmDialog.tsx
|
||||
- DialogFooter.tsx
|
||||
- HoverEditButton.tsx
|
||||
- LibraryOverview.tsx
|
||||
- MetricCard.tsx
|
||||
- NowPlaying.tsx
|
||||
- ObservabilityPage.tsx
|
||||
- SectionCard.tsx
|
||||
- SelectionRailCard.tsx
|
||||
- SessionActivityPanel.tsx
|
||||
- TabbedCard.tsx
|
||||
- WidgetConfigDialog.tsx
|
||||
- WidgetInstance.tsx
|
||||
## links
|
||||
index: frontend/src/components/.pi-map.index.md
|
||||
map: frontend/src/components/.pi-map.md
|
||||
## workflows
|
||||
- change components behavior
|
||||
read: BackupAlertsTable.tsx, BackupDashboardWidget.tsx, BackupJobsTable.tsx
|
||||
- explore components subdirectories
|
||||
index: frontend/src/components/__tests__/.pi-map.index.md, frontend/src/components/ui/.pi-map.index.md
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,46 @@
|
||||
# frontend/src/components
|
||||
dir: frontend/src/components
|
||||
|
||||
index: frontend/src/components/.pi-map.index.md
|
||||
|
||||
## role
|
||||
React UI component library providing reusable display elements, dashboard widgets, and page-level views for backup management, observability, media sessions, and widget configuration.
|
||||
## files
|
||||
- BackupAlertsTable.tsx | Renders a table of backup alerts with severity badges, timestamps, and acknowledge buttons | exp: func:BackupAlertsTable({ alerts, onAcknowledge }: Props), call:alerts.map, call:severityVariant, call:formatTimestamp, call:onAcknowledge | dep: @/components/ui/badge, @/components/ui/button, @/components/ui/table, ../types/backups
|
||||
- BackupDashboardWidget.tsx | Displays a dashboard widget summarizing backup job statistics including total jobs, 24-hour success rate, active alerts, and last failure timestamp. | exp: func:BackupDashboardWidget(), call:useBackupDashboard, call:new Date(data.last_failed_at * 1000).toLocaleString | dep: @/components/ui/badge, @/components/ui/card, ../hooks/useBackups
|
||||
- BackupJobsTable.tsx | Renders a table displaying backup job information with status, schedule, and run history using associated latest run data. | exp: func:BackupJobsTable({ jobs, latestRuns }: Props), call:jobs.map, call:latestRuns.get, call:formatInterval, call:statusVariant, call:formatTimestamp | dep: @/components/ui/badge, @/components/ui/table, ../types/backups
|
||||
- BackupRunsTable.tsx | Renders a filterable table of backup runs with status, duration, size, and timestamp formatting. | exp: func:BackupRunsTable({ runs }: Props), call:useState, call:runs.filter, call:filteredRuns.map, call:statusVariant, call:formatDuration, call:formatBytes, call:formatTimestamp | dep: react, @/components/ui/badge, @/components/ui/select, @/components/ui/table, ../types/backups
|
||||
- BackupsPage.tsx | A React page component that displays backup management information across three tabs (Jobs, Runs, and Alerts) with data fetched from custom hooks. | exp: func:BackupsPage(), call:useState, call:useBackupJobs, call:useBackupRuns, call:useBackupAlerts, call:useAcknowledgeAlert, call:latestRuns.get, call:latestRuns.set, call:acknowledgeMutation.mutate | dep: react, @/components/ui/tabs, ../hooks/useBackups, ./BackupAlertsTable, ./BackupJobsTable, ./BackupRunsTable
|
||||
- ConfirmDialog.tsx | Reusable confirmation dialog component that wraps shadcn/ui Dialog primitives with standardized cancel/confirm footer behavior. | exp: func:ConfirmDialog({ open, title, message, confirmLabel = "Delete", onCancel, onConfirm, busy, }: { open: boolean; title: string; message: string; confirmLabel?: string; onCancel: () => void; onConfirm: () => void; busy?: boolean; }), call:onCancel | dep: @/components/ui/dialog, ./DialogFooter
|
||||
- DialogFooter.tsx | Renders a dialog footer with cancel/confirm buttons that maps legacy MUI-style props to shadcn Button variants for backward compatibility | exp: func:DialogFooter({ onCancel, cancelLabel = "Cancel", onConfirm, confirmLabel, confirmBusyLabel, confirmDisabled, confirmColor = "primary", confirmVariant = "contained", confirmStartIcon, secondaryAction, }: DialogFooterProps), call:resolveConfirmVariant | dep: react, @/components/ui/button
|
||||
- HoverEditButton.tsx | A hover-reveal edit button component that migrates from MUI to shadcn/ui while preserving backward-compatible CSS classes for existing hover-reveal behavior. | exp: func:HoverEditButton({ onClick, label = "Edit", }: HoverEditButtonProps), call:e.stopPropagation, call:onClick | dep: lucide-react, @/components/ui/button
|
||||
- LibraryOverview.tsx | Renders a two-column responsive grid displaying movie and TV library counts using shadcn/ui Card components | exp: func:LibraryOverview({ libraries }: Props), call:libraries.filter, call:movieLibs.map, call:lib.total.toLocaleString, call:lib.movies.toLocaleString, call:tvLibs.map, call:lib.series.toLocaleString | dep: @/components/ui/card, ../types
|
||||
- MetricCard.tsx | Renders a compact metric display card with label, value, and optional subtext using Tailwind CSS styling. | exp: func:MetricCard({ label, value, subtext }: Props) | dep: @/components/ui/card
|
||||
- NowPlaying.tsx | Renders a now-playing panel by wrapping SessionActivityPanel with a specific empty message for user activity sessions. | exp: func:NowPlaying({ sessions, onSelectSession }: Props) | dep: ../types, ./SessionActivityPanel
|
||||
- ObservabilityPage.tsx | This file renders a dashboard page that provides a unified observability view of system health, alerts, metrics, and logs from services like Prometheus, Alertmanager, and Grafana. | exp: func:ObservabilityPage(), call:useAlertmanagerAlerts, call:useAlertmanagerStatus, call:useGrafanaStatus, call:usePrometheusStatus, call:usePrometheusTargets, call:useMonitoringMachines, call:useServiceInstances, call:useState, call:grafanaServices.find, call:useMemo, call:machines.find, call:encodeURIComponent, call:JSON.stringify, call:alertsSummary?.alerts.some, call:alertsSummary.alerts.map, call:machines.map | dep: react, react-router-dom, lucide-react, ../hooks/useObservability, ../hooks/useServices, @/components/ui/card, @/components/ui/badge, @/components/ui/alert, @/components/ui/button, @/components/ui/select, @/components/ui/skeleton, @/components/ui/collapsible, ../types, @/components/ui (card, badge, alert, button, select, skeleton, collapsible)
|
||||
- SectionCard.tsx | A reusable card component that renders a titled section with optional description and action, built on shadcn/ui Card primitives for comfortable density layout. | exp: func:SectionCard({ title, description, action, children, }: SectionCardProps) | dep: react, @/components/ui/card
|
||||
- SelectionRailCard.tsx | A reusable card component for a selection rail UI with titled header, scrollable body, and optional footer, preserving legacy API compatibility during a migration from MUI. | exp: func:SelectionRailCard({ title, description, children, footer, minHeight = 420, }: SelectionRailCardProps) | dep: react, @/components/ui/card
|
||||
- SessionActivityPanel.tsx | Renders a scrollable table panel displaying active media streaming sessions with state badges, metadata, and optional user selection actions. | exp: func:SessionActivityPanel({ sessions, emptyMessage = "No live sessions matched to this user.", selectedUserLabel, onSelectSession, }: Props), call:buildStatusSummary, call:sessions.map, call:formatStateLabel, call:onSelectSession, call:sessionStateVariant, call:event.stopPropagation | dep: @/components/ui/badge, @/components/ui/button, @/components/ui/table, ../types
|
||||
- TabbedCard.tsx | Renders a card with a line-style tab bar header and content area, acting as a controlled wrapper around shadcn/ui Tabs for backward-compatible API migration from MUI. | exp: func:TabbedCard({ value, onChange, tabs, children, }: TabbedCardProps), call:onChange, call:String | dep: react, @/components/ui/card, @/components/ui/tabs
|
||||
- WidgetConfigDialog.tsx | A React dialog component for managing dashboard widget instances, including adding, editing, reordering, enabling/disabling, and deleting widgets with service-specific configuration support. | exp: func:WidgetConfigDialog({ open, onClose }: Props), call:useWidgetInstances, call:useServiceInstances, call:useTasks, call:useSaveWidgetInstance, call:useDeleteWidgetInstance, call:useState, call:useMemo, call:[...instances].sort, call:setDraft, call:SERVICE_REGISTRY[ services.find((s) => s.id === serviceId)?.service_type ?? "" ]?.widgets.find, call:services.find, call:saveWidget.mutateAsync, call:reset, call:Promise.all, call:deleteWidget.mutateAsync, call:onClose, call:SERVICE_REGISTRY[ services.find((s) => s.id === draft.serviceId)?.service_type ?? "" ]?.widgets.find, call:String, call:Number, call:sortedInstances.map, call:bindingLabel, call:moveInstance, call:toggleEnabled, call:startEdit, call:removeInstance, call:Object.values(BUILTIN_WIDGETS).map, call:startAddBuiltIn, call:services .filter((s) => s.enabled) .flatMap, call:(SERVICE_REGISTRY[s.service_type]?.widgets ?? []).map, call:startAddService | dep: react, @/components/ui/dialog, @/components/ui/button, @/components/ui/input, @/components/ui/label, @/components/ui/switch, @/components/ui/select, @/components/ui/badge, @/components/ui/alert, lucide-react, ../hooks/useWidgets, ../hooks/useServices, ../hooks/useSettings, ../types, ../integrations/registry
|
||||
- WidgetInstance.tsx | Renders a widget instance by resolving its component from a registry or displaying an error for unknown widgets. | exp: func:WidgetInstanceCard({ widget }: Props), call:useServiceInstances, call:resolveWidget | dep: @/components/ui/alert, ../hooks/useServices, ../integrations/registry, ../types, ./SectionCard
|
||||
## arch
|
||||
Functional component pattern using shadcn/ui and Tailwind CSS, with composable table/card/dialog primitives, custom hooks for data fetching, and a backward-compatibility layer easing migration from MUI.
|
||||
## tags
|
||||
call:use, components, ui, card, backup, widget, table, dialog
|
||||
## symbols
|
||||
- BackupAlertsTable
|
||||
- BackupDashboardWidget
|
||||
- BackupJobsTable
|
||||
- BackupRunsTable
|
||||
- BackupsPage
|
||||
- ConfirmDialog
|
||||
- DialogFooter
|
||||
- HoverEditButton
|
||||
## workflows
|
||||
- change components behavior
|
||||
read: BackupAlertsTable.tsx, BackupDashboardWidget.tsx, BackupJobsTable.tsx
|
||||
- explore components subdirectories
|
||||
index: frontend/src/components/__tests__/.pi-map.index.md, frontend/src/components/ui/.pi-map.index.md
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,32 @@
|
||||
# frontend/src/components/__tests__ (index)
|
||||
dir: frontend/src/components/__tests__
|
||||
|
||||
## role
|
||||
Test suite providing unit test coverage for reusable UI components and feature widgets in the frontend.
|
||||
## parent
|
||||
index: frontend/src/components/.pi-map.index.md
|
||||
map: frontend/src/components/.pi-map.md
|
||||
## children
|
||||
-
|
||||
## files
|
||||
- BackupAlertsTable.test.tsx
|
||||
- BackupDashboardWidget.test.tsx
|
||||
- BackupRunsTable.test.tsx
|
||||
- ConfirmDialog.test.tsx
|
||||
- DialogFooter.test.tsx
|
||||
- HoverEditButton.test.tsx
|
||||
- LibraryOverview.test.tsx
|
||||
- MetricCard.test.tsx
|
||||
- NowPlaying.test.tsx
|
||||
- SectionCard.test.tsx
|
||||
- SelectionRailCard.test.tsx
|
||||
- SessionActivityPanel.test.tsx
|
||||
- TabbedCard.test.tsx
|
||||
## links
|
||||
index: frontend/src/components/__tests__/.pi-map.index.md
|
||||
map: frontend/src/components/__tests__/.pi-map.md
|
||||
## workflows
|
||||
- update __tests__ tests
|
||||
read: BackupAlertsTable.test.tsx, BackupDashboardWidget.test.tsx, BackupRunsTable.test.tsx
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,32 @@
|
||||
# frontend/src/components/__tests__
|
||||
dir: frontend/src/components/__tests__
|
||||
|
||||
index: frontend/src/components/__tests__/.pi-map.index.md
|
||||
|
||||
## role
|
||||
Test suite providing unit test coverage for reusable UI components and feature widgets in the frontend.
|
||||
## files
|
||||
- BackupAlertsTable.test.tsx | Unit tests for the BackupAlertsTable component verifying severity badge mapping, acknowledge button behavior, and conditional rendering | dep: vitest, @testing-library/react, @testing-library/user-event, ../BackupAlertsTable, ../../types/backups, BackupAlertsTable component, BackupAlert type
|
||||
- BackupDashboardWidget.test.tsx | Unit tests for BackupDashboardWidget component covering loading, success, and alert states | dep: vitest, @testing-library/react, ../BackupDashboardWidget, ../../hooks/useBackups, BackupDashboardWidget, useBackupDashboard hook
|
||||
- BackupRunsTable.test.tsx | Tests the BackupRunsTable component's status-to-badge variant mapping and formatting of duration/bytes values. | dep: vitest, @testing-library/react, ../BackupRunsTable, ../../types/backups, BackupRunsTable, types/backups
|
||||
- ConfirmDialog.test.tsx | Tests the ConfirmDialog component's rendering behavior and user interaction handlers. | dep: vitest, @testing-library/react, @testing-library/user-event, ../ConfirmDialog, ConfirmDialog
|
||||
- DialogFooter.test.tsx | Tests the DialogFooter component's rendering, callback wiring, busy state, destructive styling, and secondary action support. | dep: vitest, @testing-library/react, @testing-library/user-event, ../DialogFooter
|
||||
- HoverEditButton.test.tsx | Tests the HoverEditButton component's click behavior and label customization. | dep: vitest, @testing-library/react, @testing-library/user-event, ../HoverEditButton, HoverEditButton
|
||||
- LibraryOverview.test.tsx | Tests the LibraryOverview component renders movie and TV library cards with correct counts | dep: vitest, @testing-library/react, ../LibraryOverview, ../../types, LibraryOverview component, LibraryCount type
|
||||
- MetricCard.test.tsx | Tests the MetricCard component rendering with and without optional subtext prop | dep: vitest, @testing-library/react, ../MetricCard
|
||||
- NowPlaying.test.tsx | Tests the NowPlaying component's empty-state rendering when no sessions exist | dep: vitest, @testing-library/react, ../NowPlaying, NowPlaying component
|
||||
- SectionCard.test.tsx | Unit tests for the SectionCard component verifying it renders title, description, action, and children correctly | dep: vitest, @testing-library/react, ../SectionCard, SectionCard
|
||||
- SelectionRailCard.test.tsx | Unit tests for the SelectionRailCard component verifying it renders title, body, footer, and applies minHeight prop correctly. | dep: vitest, @testing-library/react, ../SelectionRailCard, SelectionRailCard
|
||||
- SessionActivityPanel.test.tsx | Tests the SessionActivityPanel component's rendering of session states, empty state, and user interaction callbacks. | dep: vitest, @testing-library/react, @testing-library/user-event, ../SessionActivityPanel, ../../types, SessionActivityPanel, types
|
||||
- TabbedCard.test.tsx | Tests the TabbedCard component's rendering and tab selection behavior | dep: vitest, @testing-library/react, @testing-library/user-event, ../TabbedCard, @/components/ui/tabs
|
||||
## arch
|
||||
Component-level React Testing Library tests organized as co-located per-component test files following a flat naming convention.
|
||||
## tags
|
||||
library, @testing, tests, component, vitest, react, user, card.test
|
||||
## symbols
|
||||
-
|
||||
## workflows
|
||||
- update __tests__ tests
|
||||
read: BackupAlertsTable.test.tsx, BackupDashboardWidget.test.tsx, BackupRunsTable.test.tsx
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,46 @@
|
||||
# frontend/src/components/ui (index)
|
||||
dir: frontend/src/components/ui
|
||||
|
||||
## role
|
||||
Reusable, design-system UI component library providing styled, accessible primitives (buttons, inputs, dialogs, tables, etc.) for consistent application interfaces.
|
||||
## parent
|
||||
index: frontend/src/components/.pi-map.index.md
|
||||
map: frontend/src/components/.pi-map.md
|
||||
## children
|
||||
- frontend/src/components/ui/__tests__
|
||||
index: frontend/src/components/ui/__tests__/.pi-map.index.md
|
||||
map: frontend/src/components/ui/__tests__/.pi-map.md
|
||||
## files
|
||||
- alert.tsx
|
||||
- avatar.tsx
|
||||
- badge.tsx
|
||||
- button.tsx
|
||||
- card.tsx
|
||||
- checkbox.tsx
|
||||
- collapsible.tsx
|
||||
- data-table.tsx
|
||||
- dialog.tsx
|
||||
- dropdown-menu.tsx
|
||||
- input.tsx
|
||||
- label.tsx
|
||||
- progress.tsx
|
||||
- scroll-area.tsx
|
||||
- select.tsx
|
||||
- separator.tsx
|
||||
- sheet.tsx
|
||||
- skeleton.tsx
|
||||
- switch.tsx
|
||||
- table.tsx
|
||||
- tabs.tsx
|
||||
- textarea.tsx
|
||||
- tooltip.tsx
|
||||
## links
|
||||
index: frontend/src/components/ui/.pi-map.index.md
|
||||
map: frontend/src/components/ui/.pi-map.md
|
||||
## workflows
|
||||
- change ui behavior
|
||||
read: alert.tsx, avatar.tsx, badge.tsx
|
||||
- explore ui subdirectories
|
||||
index: frontend/src/components/ui/__tests__/.pi-map.index.md
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,51 @@
|
||||
# frontend/src/components/ui
|
||||
dir: frontend/src/components/ui
|
||||
|
||||
index: frontend/src/components/ui/.pi-map.index.md
|
||||
|
||||
## role
|
||||
Reusable, design-system UI component library providing styled, accessible primitives (buttons, inputs, dialogs, tables, etc.) for consistent application interfaces.
|
||||
## files
|
||||
- alert.tsx | Implements a composable alert/notification UI component with variant styling and subcomponents for title, description, and action. | dep: react, class-variance-authority, @/lib/utils
|
||||
- avatar.tsx | Provides a set of composable React avatar components with size variants, fallback support, badges, and grouped avatar layouts using Radix UI primitives. | dep: react, radix-ui, @/lib/utils
|
||||
- badge.tsx | A reusable React Badge component with multiple style variants built using class-variance-authority | exp: func:Badge({ className, variant = "default", asChild = false, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }), call:cn, call:badgeVariants | dep: react, class-variance-authority, radix-ui, @/lib/utils
|
||||
- button.tsx | A reusable, polymorphic Button component with multiple style variants and sizes using Tailwind CSS and class-variance-authority. | dep: react, class-variance-authority, radix-ui, @/lib/utils, radix-ui (Slot), @/lib/utils (cn)
|
||||
- card.tsx | A composable React card component system with sub-components for header, title, description, action, content, and footer with Tailwind styling. | dep: react, @/lib/utils, React
|
||||
- checkbox.tsx | A styled checkbox UI component built on Radix UI primitives with Tailwind CSS styling and accessibility features. | dep: react, radix-ui, @/lib/utils, lucide-react
|
||||
- collapsible.tsx | Wraps Radix UI's Collapsible primitive components with consistent data-slot attributes for a collapsible UI pattern. | dep: radix-ui, react
|
||||
- data-table.tsx | Reusable data table component wrapping TanStack Table with shadcn UI primitives, supporting row selection, column visibility toggling, pagination (client and server-side), and row click handling — explicitly excluding sorting and column resizing. | exp: DataTableProps, func:DataTable({ columns, data, getRowId, enableRowSelection = false, rowSelection, onRowSelectionChange, onRowClick, columnVisibility, onColumnVisibilityChange, enableColumnVisibilityToggle = false, enablePagination = false, manualPagination = false, pagination, onPaginationChange, pageSizeOptions = [10, 20, 30, 50], rowCount, emptyMessage = "No results.", }: DataTableProps<TData, TValue>), call:React.useMemo, call:table.getIsAllPageRowsSelected, call:table.getIsSomePageRowsSelected, call:table.toggleAllPageRowsSelected, call:e.stopPropagation, call:row.getIsSelected, call:row.toggleSelected, call:useReactTable, call:getCoreRowModel, call:getPaginationRowModel, call:Math.max, call:Math.ceil, call:table.getPageCount, call:table .getAllColumns() .filter((column) => column.getCanHide()) .map, call:column.getCanHide, call:column.getIsVisible, call:column.toggleVisibility, call:e.preventDefault, call:table.getHeaderGroups().map, call:headerGroup.headers.map, call:flexRender, call:header.getContext, call:table.getRowModel().rows.map, call:cn, call:onRowClick, call:row.getVisibleCells().map, call:cell.getContext | dep: react, @tanstack/react-table, lucide-react, @/lib/utils, @/components/ui/button, @/components/ui/checkbox, @/components/ui/table, @/components/ui/dropdown-menu, @/components/ui/select
|
||||
- dialog.tsx | A React dialog/modal component built on Radix UI primitives with styled subcomponents (overlay, content, header, footer, title, description) and close button functionality. | dep: react, radix-ui, @/lib/utils, @/components/ui/button, lucide-react
|
||||
- dropdown-menu.tsx | A styled React dropdown menu component library built on top of Radix UI primitives with Tailwind CSS styling and animation support. | dep: react, radix-ui, @/lib/utils, lucide-react
|
||||
- input.tsx | A reusable styled input component that wraps HTML input elements with consistent Tailwind CSS styling and theme-aware states. | dep: react, @/lib/utils, React
|
||||
- label.tsx | A styled React label component that wraps Radix UI's LabelPrimitive with default Tailwind CSS styling and disabled state handling. | dep: react, radix-ui, @/lib/utils
|
||||
- progress.tsx | A React component that renders a styled horizontal progress bar using Radix UI primitives with customizable value and appearance. | dep: react, radix-ui, @/lib/utils
|
||||
- scroll-area.tsx | A React component that wraps Radix UI's ScrollArea primitive to provide a styled, accessible scrollable container with custom scrollbar support. | dep: react, radix-ui, @/lib/utils
|
||||
- select.tsx | A styled React select dropdown component built on top of Radix UI's Select primitive with Tailwind CSS styling and scroll buttons. | dep: react, radix-ui, @/lib/utils, lucide-react
|
||||
- separator.tsx | A React component that wraps Radix UI's Separator primitive to render accessible, styled horizontal or vertical dividers with Tailwind CSS. | dep: react, radix-ui, @/lib/utils
|
||||
- sheet.tsx | Implements a customizable slide-out panel UI component (sheet) with overlay, animations, and positioning options. | dep: react, radix-ui, @/lib/utils, @/components/ui/button, lucide-react
|
||||
- skeleton.tsx | A reusable Skeleton loading placeholder component that renders a pulsing, rounded div with muted background styling. | dep: @/lib/utils, React
|
||||
- switch.tsx | A reusable React Switch component that wraps Radix UI's Switch primitive with customizable styling, size variants, and accessibility features. | dep: react, radix-ui, @/lib/utils
|
||||
- table.tsx | A reusable, styled table component library for React with subcomponents for header, body, footer, rows, cells, and captions. | dep: react, @/lib/utils, React, cn utility from @/lib/utils
|
||||
- tabs.tsx | A React component library implementing an accessible, styled tabs UI primitive using Radix UI with support for horizontal/vertical orientations and default/line variants. | dep: react, class-variance-authority, radix-ui, @/lib/utils, React
|
||||
- textarea.tsx | A reusable textarea component that applies consistent styling using Tailwind CSS classes and supports all native textarea props. | dep: react, @/lib/utils, React, cn utility from @/lib/utils
|
||||
- tooltip.tsx | Provides a styled, composable tooltip component built on top of Radix UI primitives with Tailwind CSS animations and theming. | dep: react, radix-ui, @/lib/utils
|
||||
## arch
|
||||
shadcn/ui pattern combining Radix UI accessibility primitives, class-variance-authority (CVA) for variant styling, and Tailwind CSS utility classes, with composable sub-components and TanStack Table for data grids.
|
||||
## tags
|
||||
react, radix, lib, utils, ui, component, table, styled
|
||||
## symbols
|
||||
- Badge
|
||||
- DataTable
|
||||
- call:cn
|
||||
- call:badgeVariants
|
||||
- DataTableProps
|
||||
- call:React.useMemo
|
||||
- call:table.getIsAllPageRowsSelected
|
||||
- call:table.getIsSomePageRowsSelected
|
||||
## workflows
|
||||
- change ui behavior
|
||||
read: alert.tsx, avatar.tsx, badge.tsx
|
||||
- explore ui subdirectories
|
||||
index: frontend/src/components/ui/__tests__/.pi-map.index.md
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,21 @@
|
||||
# frontend/src/components/ui/__tests__ (index)
|
||||
dir: frontend/src/components/ui/__tests__
|
||||
|
||||
## role
|
||||
Test suite for UI component primitives, validating rendering, variants, and interactive behaviors of foundational elements like Badge and DataTable.
|
||||
## parent
|
||||
index: frontend/src/components/ui/.pi-map.index.md
|
||||
map: frontend/src/components/ui/.pi-map.md
|
||||
## children
|
||||
-
|
||||
## files
|
||||
- badge.test.tsx
|
||||
- data-table.test.tsx
|
||||
## links
|
||||
index: frontend/src/components/ui/__tests__/.pi-map.index.md
|
||||
map: frontend/src/components/ui/__tests__/.pi-map.md
|
||||
## workflows
|
||||
- update __tests__ tests
|
||||
read: badge.test.tsx, data-table.test.tsx
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,21 @@
|
||||
# frontend/src/components/ui/__tests__
|
||||
dir: frontend/src/components/ui/__tests__
|
||||
|
||||
index: frontend/src/components/ui/__tests__/.pi-map.index.md
|
||||
|
||||
## role
|
||||
Test suite for UI component primitives, validating rendering, variants, and interactive behaviors of foundational elements like Badge and DataTable.
|
||||
## files
|
||||
- badge.test.tsx | Tests that the Badge component renders a success variant with the correct data attribute and CSS class using a Vitest testing harness. | dep: vitest, @testing-library/react, ../badge
|
||||
- data-table.test.tsx | Tests a DataTable React component wrapper around TanStack Table, covering rendering, row selection, column visibility, row click events, empty states, and pagination. | dep: vitest, react, @testing-library/react, @testing-library/user-event, @tanstack/react-table, ../data-table
|
||||
## arch
|
||||
Vitest and React Testing Lab testing patterns with declarative test cases covering visual variants, TanStack Table integration, user interactions, and edge-case rendering.
|
||||
## tags
|
||||
react, data, vitest, @testing, library, table, tests, badge
|
||||
## symbols
|
||||
-
|
||||
## workflows
|
||||
- update __tests__ tests
|
||||
read: badge.test.tsx, data-table.test.tsx
|
||||
## dirty
|
||||
-
|
||||
Reference in New Issue
Block a user