Component Inventory

Component Inventory 
 
 Project: {{PROJECT_NAME}}
 Version: {{VERSION}}
 Date: {{DATE}}
 Author: {{AUTHOR}}
 Status: Draft | In Review | Approved
 Reviewers: {{REVIEWERS}} 
 
 Document History 
 
 
 
 Version 
 Date 
 Author 
 Changes 
 
 
 
 
 0.1 
 {{DATE}} 
 {{AUTHOR}} 
 Initial draft 
 
 
 
 
 1. Overview 

 Total components: {{N}}
 Library location: src/components/ 
 Storybook: {{https://storybook.PROJECT_NAME.example.com}} 
 Design source: {{Figma file URL}} 
 Owner team: {{TEAM_NAME}} 
 This inventory tracks every reusable component in {{PROJECT_NAME}} . It follows Atomic Design categorization: atoms → molecules → organisms → templates → pages. 
 
 2. Component Hierarchy Diagram 

 graph TB
 subgraph Pages
 PageLogin["LoginPage"]
 PageDashboard["DashboardPage"]
 end
 subgraph Templates
 TplAuth["AuthLayout"]
 TplApp["AppLayout"]
 end
 subgraph Organisms
 OrgNavbar["Navbar"]
 OrgSidebar["Sidebar"]
 OrgDataTable["DataTable"]
 OrgUserForm["UserForm"]
 end
 subgraph Molecules
 MolFormField["FormField"]
 MolCard["Card"]
 MolSearchBar["SearchBar"]
 MolDropdown["Dropdown"]
 MolPagination["Pagination"]
 end
 subgraph Atoms
 AtomButton["Button"]
 AtomInput["Input"]
 AtomBadge["Badge"]
 AtomSpinner["Spinner"]
 AtomAvatar["Avatar"]
 AtomIcon["Icon"]
 end

 Pages --> Templates
 Templates --> Organisms
 Organisms --> Molecules
 Molecules --> Atoms
 
 TODO: Update diagram to reflect actual component tree. 
 
 3. Atoms (Primitive Components) 

 3.1 Button 
 
 
 
 Property 
 Value 
 
 
 
 
 Category 
 Atom 
 
 
 Status 
 `{{Done 
 
 
 File path 
 src/components/ui/Button/Button.tsx 
 
 
 Storybook 
 {{URL}} 
 
 
 Design ref 
 {{Figma frame URL}} 
 
 
 
 Props API: 
 
 
 
 Prop 
 Type 
 Default 
 Required 
 Description 
 
 
 
 
 variant 
 'primary' | 'secondary' | 'ghost' | 'danger' | 'link' 
 'primary' 
 No 
 Visual style variant 
 
 
 size 
 'sm' | 'md' | 'lg' 
 'md' 
 No 
 Button size 
 
 
 disabled 
 boolean 
 false 
 No 
 Disables interaction 
 
 
 loading 
 boolean 
 false 
 No 
 Shows spinner, disables click 
 
 
 leftIcon 
 ReactNode 
 undefined 
 No 
 Icon before label 
 
 
 rightIcon 
 ReactNode 
 undefined 
 No 
 Icon after label 
 
 
 onClick 
 (e: MouseEvent) => void 
 undefined 
 No 
 Click handler 
 
 
 type 
 'button' | 'submit' | 'reset' 
 'button' 
 No 
 HTML button type 
 
 
 fullWidth 
 boolean 
 false 
 No 
 100% width 
 
 
 
 Variants & States: primary, secondary, ghost, danger, link × default, hover, focus, active, disabled, loading 
 Accessibility: 
 
 Renders as <button> — never <div> or <span> 
 loading state: aria-busy="true" , spinner has aria-label="Loading" 
 disabled : aria-disabled="true" , not removed from tab order 
 Focus ring: 2px offset, brand color 
 
 Dependencies: Icon component, Spinner component 
 
 3.2 Input 
 
 
 
 Property 
 Value 
 
 
 
 
 Category 
 Atom 
 
 
 Status 
 {{Status}} 
 
 
 File path 
 src/components/ui/Input/Input.tsx 
 
 
 Storybook 
 {{URL}} 
 
 
 
 Props API: 
 
 
 
 Prop 
 Type 
 Default 
 Required 
 Description 
 
 
 
 
 type 
 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url' 
 'text' 
 No 
 Input type 
 
 
 value 
 string 
 — 
 Yes (controlled) 
 Input value 
 
 
 onChange 
 (e: ChangeEvent) => void 
 — 
 Yes 
 Change handler 
 
 
 placeholder 
 string 
 '' 
 No 
 Placeholder text 
 
 
 disabled 
 boolean 
 false 
 No 
 Disabled state 
 
 
 error 
 boolean 
 false 
 No 
 Triggers error visual state 
 
 
 errorMessage 
 string 
 undefined 
 No 
 Error text (also sets aria-describedby ) 
 
 
 leftAdornment 
 ReactNode 
 undefined 
 No 
 Icon or element left of input 
 
 
 rightAdornment 
 ReactNode 
 undefined 
 No 
 Icon or element right of input 
 
 
 size 
 'sm' | 'md' | 'lg' 
 'md' 
 No 
 Input height/font size 
 
 
 
 Variants & States: default, focused, error, disabled, with-left-icon, with-right-icon 
 Accessibility: 
 
 Must always be paired with <label> (use FormField molecule) 
 Error: aria-invalid="true" + aria-describedby pointing to error message id 
 Password: toggle visibility button must have aria-label 
 
 
 3.3 Badge 
 
 
 
 Property 
 Value 
 
 
 
 
 Category 
 Atom 
 
 
 Status 
 {{Status}} 
 
 
 File path 
 src/components/ui/Badge/Badge.tsx 
 
 
 
 Props API: 
 
 
 
 Prop 
 Type 
 Default 
 Required 
 Description 
 
 
 
 
 variant 
 'success' | 'warning' | 'error' | 'info' | 'neutral' 
 'neutral' 
 No 
 Semantic color variant 
 
 
 size 
 'sm' | 'md' 
 'md' 
 No 
 Badge size 
 
 
 dot 
 boolean 
 false 
 No 
 Shows colored dot instead of text 
 
 
 children 
 ReactNode 
 — 
 Yes 
 Badge content 
 
 
 
 TODO: Add remaining atom components following the same pattern (Select, Checkbox, Radio, Toggle, Textarea, Avatar, Tooltip, Spinner, Divider). 
 
 4. Molecules (Composite Components) 

 4.1 FormField 
 
 
 
 Property 
 Value 
 
 
 
 
 Category 
 Molecule 
 
 
 Status 
 {{Status}} 
 
 
 File path 
 src/components/ui/FormField/FormField.tsx 
 
 
 Composes 
 Input, Label, ErrorMessage, HelpText 
 
 
 
 Props API: 
 
 
 
 Prop 
 Type 
 Default 
 Required 
 Description 
 
 
 
 
 label 
 string 
 — 
 Yes 
 Visible label text 
 
 
 htmlFor 
 string 
 — 
 Yes 
 Links label to input id 
 
 
 error 
 string 
 undefined 
 No 
 Error message text 
 
 
 helpText 
 string 
 undefined 
 No 
 Helper text below input 
 
 
 required 
 boolean 
 false 
 No 
 Shows required indicator 
 
 
 children 
 ReactNode 
 — 
 Yes 
 Input component 
 
 
 
 Accessibility: Label always associated with input via htmlFor / id pair. 
 
 4.2 Card 
 
 
 
 Property 
 Value 
 
 
 
 
 Category 
 Molecule 
 
 
 Status 
 {{Status}} 
 
 
 File path 
 src/components/ui/Card/Card.tsx 
 
 
 
 Props API: 
 
 
 
 Prop 
 Type 
 Default 
 Required 
 Description 
 
 
 
 
 variant 
 'default' | 'bordered' | 'elevated' 
 'default' 
 No 
 Visual style 
 
 
 padding 
 'sm' | 'md' | 'lg' | 'none' 
 'md' 
 No 
 Internal padding 
 
 
 as 
 ElementType 
 'div' 
 No 
 Polymorphic render element 
 
 
 children 
 ReactNode 
 — 
 Yes 
 Card content 
 
 
 
 Sub-components: Card.Header , Card.Body , Card.Footer 
 TODO: Add remaining molecule components: Modal, Dropdown, Table, Pagination, Toast, SearchBar, Breadcrumb, Tabs, Accordion, DatePicker. 
 
 5. Organisms (Complex Components) 

 5.1 DataTable 
 
 
 
 Property 
 Value 
 
 
 
 
 Category 
 Organism 
 
 
 Status 
 {{Status}} 
 
 
 File path 
 src/components/features/DataTable/DataTable.tsx 
 
 
 Dependencies 
 Table (molecule), Pagination, SearchBar, Spinner, Badge 
 
 
 
 Features: 
 
 Sortable columns (client + server-side) 
 Pagination (configurable page sizes) 
 Row selection (single + multi) 
 Column visibility toggle 
 Export action slot 
 Loading skeleton state 
 Empty state slot 
 Row action slot (per-row dropdown) 
 
 TODO: Document full props API for DataTable. 
 
 5.2 Navigation / Sidebar 
 
 
 
 Property 
 Value 
 
 
 
 
 Category 
 Organism 
 
 
 Status 
 {{Status}} 
 
 
 File path 
 src/components/layouts/Sidebar/Sidebar.tsx 
 
 
 
 TODO: Add remaining organism components. 
 
 6. Shared Hooks / Composables Inventory 

 
 
 
 Hook 
 File 
 Purpose 
 Used By 
 
 
 
 
 useDebounce 
 src/hooks/useDebounce.ts 
 Debounce value changes 
 SearchBar, Input 
 
 
 useLocalStorage 
 src/hooks/useLocalStorage.ts 
 Persistent local state 
 Theme, preferences 
 
 
 useMediaQuery 
 src/hooks/useMediaQuery.ts 
 Responsive breakpoint checks 
 Layout components 
 
 
 useClickOutside 
 src/hooks/useClickOutside.ts 
 Close on outside click 
 Dropdown, Modal 
 
 
 useFocusTrap 
 src/hooks/useFocusTrap.ts 
 Trap focus inside element 
 Modal, Drawer 
 
 
 useToast 
 src/hooks/useToast.ts 
 Trigger toast notifications 
 Global 
 
 
 usePermission 
 src/hooks/usePermission.ts 
 Check user permissions 
 Auth-gated components 
 
 
 {{HOOK_NAME}} 
 {{PATH}} 
 {{PURPOSE}} 
 {{CONSUMERS}} 
 
 
 
 
 7. Third-Party Component Usage 

 
 
 
 Package 
 Version 
 Components Used 
 Wrapping Strategy 
 
 
 
 
 {{@radix-ui/react-dialog}} 
 {{1.x}} 
 Modal base 
 Wrapped in src/components/ui/Modal — custom styling 
 
 
 {{@radix-ui/react-select}} 
 {{2.x}} 
 Select base 
 Wrapped in src/components/ui/Select 
 
 
 {{react-hook-form}} 
 {{7.x}} 
 Form state 
 Used directly + FormField wrapper 
 
 
 {{recharts}} 
 {{2.x}} 
 Charts 
 Wrapped in src/components/charts/ 
 
 
 
 Policy: Never use third-party components directly in feature code — always wrap in local component to control API surface and allow future swap. 
 
 8. Component Deprecation Process 

 Active → Deprecated (soft) → Deprecated (hard) → Removed
 
 
 
 
 Stage 
 Action Required 
 
 
 
 
 Deprecated (soft) 
 Add @deprecated JSDoc comment, console warning in dev, migration guide in Storybook 
 
 
 Deprecated (hard) 
 TypeScript @deprecated annotation triggers IDE warning, added to removal milestone 
 
 
 Removed 
 Delete component, update CHANGELOG, run codemod if available 
 
 
 
 Deprecation notice minimum period: 2 sprint cycles before hard removal. 
 TODO: Link to CHANGELOG.md for tracked deprecations. 
 
 Approval 
 
 
 
 Role 
 Name 
 Date 
 Signature 
 
 
 
 
 Author 
 
 
 
 
 
 Frontend Lead 
 
 
 
 
 
 Design System Owner