|
|
|
@@ -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
|
|
|
|
|
-
|
Developer