@fr0mpy/component-system 2.0.0

package/templates/component-recipes/table.md

@@ -0,0 +1,161 @@
+# Table Component Recipe
+
+## Structure
+- Wrapper with horizontal scroll for responsive
+- Table, Header, Body, Row, Head cell, Data cell
+- Support for sorting indicators
+- Optional row selection/hover states
+
+## Tailwind Classes
+
+### Wrapper
+```
+relative w-full overflow-auto
+```
+
+### Table
+```
+w-full caption-bottom text-sm
+```
+
+### Header
+```
+[&_tr]:border-b border-border
+```
+
+### Body
+```
+[&_tr:last-child]:border-0
+```
+
+### Row
+```
+border-b border-border transition-colors
+hover:bg-muted/50
+data-[state=selected]:bg-muted
+```
+
+### Head Cell (th)
+```
+h-10 px-2 text-left align-middle font-medium text-muted-foreground
+[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]
+```
+
+### Data Cell (td)
+```
+p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]
+```
+
+### Caption
+```
+mt-4 text-sm text-muted-foreground
+```
+
+### Sortable Header
+```
+cursor-pointer select-none hover:text-foreground
+[&_svg]:ml-2 [&_svg]:h-4 [&_svg]:w-4
+```
+
+## Props Interface
+```typescript
+interface TableProps extends React.HTMLAttributes<HTMLTableElement> {}
+
+interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {}
+
+interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {}
+
+interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+  selected?: boolean
+}
+
+interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+  sortable?: boolean
+  sortDirection?: 'asc' | 'desc' | null
+  onSort?: () => void
+}
+
+interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {}
+
+interface TableCaptionProps extends React.HTMLAttributes<HTMLTableCaptionElement> {}
+```
+
+## Do
+- Use semantic table elements
+- Include hover states for rows
+- Support horizontal scroll for wide tables
+- Use muted colors for headers
+- Align numbers/dates right, text left
+
+## Don't
+- Hardcode colors
+- Use divs for table layout
+- Forget responsive scroll wrapper
+- Skip border definition
+
+## Example
+```tsx
+import { cn } from '@/lib/utils'
+import { ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react'
+
+const Table = ({ className, ...props }) => (
+  <div className="relative w-full overflow-auto">
+    <table className={cn('w-full caption-bottom text-sm', className)} {...props} />
+  </div>
+)
+
+const TableHeader = ({ className, ...props }) => (
+  <thead className={cn('[&_tr]:border-b border-border', className)} {...props} />
+)
+
+const TableBody = ({ className, ...props }) => (
+  <tbody className={cn('[&_tr:last-child]:border-0', className)} {...props} />
+)
+
+const TableRow = ({ className, selected, ...props }) => (
+  <tr
+    className={cn(
+      'border-b border-border transition-colors hover:bg-muted/50',
+      selected && 'bg-muted',
+      className
+    )}
+    data-state={selected ? 'selected' : undefined}
+    {...props}
+  />
+)
+
+const TableHead = ({ className, sortable, sortDirection, onSort, children, ...props }) => (
+  <th
+    className={cn(
+      'h-10 px-2 text-left align-middle font-medium text-muted-foreground',
+      '[&:has([role=checkbox])]:pr-0',
+      sortable && 'cursor-pointer select-none hover:text-foreground',
+      className
+    )}
+    onClick={sortable ? onSort : undefined}
+    {...props}
+  >
+    <div className="flex items-center">
+      {children}
+      {sortable && (
+        <span className="ml-2">
+          {sortDirection === 'asc' && <ArrowUp className="h-4 w-4" />}
+          {sortDirection === 'desc' && <ArrowDown className="h-4 w-4" />}
+          {!sortDirection && <ArrowUpDown className="h-4 w-4 opacity-50" />}
+        </span>
+      )}
+    </div>
+  </th>
+)
+
+const TableCell = ({ className, ...props }) => (
+  <td
+    className={cn('p-2 align-middle [&:has([role=checkbox])]:pr-0', className)}
+    {...props}
+  />
+)
+
+const TableCaption = ({ className, ...props }) => (
+  <caption className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />
+)
+```

package/templates/component-recipes/tabs.md

@@ -0,0 +1,145 @@
+# Tabs Component Recipe
+
+## Structure
+- Tab list container with tab triggers
+- Tab content panels (one per tab)
+- Support horizontal and vertical orientations
+- Keyboard navigation between tabs
+
+## Tailwind Classes
+
+### Tab List
+```
+inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground
+```
+
+### Tab Trigger
+```
+inline-flex items-center justify-center whitespace-nowrap {tokens.radius} px-3 py-1
+text-sm font-medium ring-offset-background
+transition-all
+focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2
+disabled:pointer-events-none disabled:opacity-50
+data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:{tokens.shadow}
+```
+
+### Tab Content
+```
+mt-2 ring-offset-background
+focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2
+```
+
+### Alternative: Underline Style
+```
+Tab List:
+border-b border-border
+
+Tab Trigger:
+border-b-2 border-transparent pb-3 pt-2
+data-[state=active]:border-primary data-[state=active]:text-foreground
+```
+
+### Alternative: Pills Style
+```
+Tab List:
+flex gap-2
+
+Tab Trigger:
+rounded-full px-4 py-2
+data-[state=active]:bg-primary data-[state=active]:text-primary-foreground
+```
+
+## Props Interface
+```typescript
+interface TabsProps {
+  defaultValue?: string
+  value?: string
+  onValueChange?: (value: string) => void
+  orientation?: 'horizontal' | 'vertical'
+  children: React.ReactNode
+}
+
+interface TabsListProps {
+  className?: string
+  children: React.ReactNode
+}
+
+interface TabsTriggerProps {
+  value: string
+  disabled?: boolean
+  children: React.ReactNode
+}
+
+interface TabsContentProps {
+  value: string
+  forceMount?: boolean
+  children: React.ReactNode
+}
+```
+
+## Do
+- Use Radix Tabs for accessibility
+- Support keyboard navigation (arrow keys)
+- Include focus ring for triggers
+- Use subtle background for active state
+
+## Don't
+- Hardcode colors
+- Skip focus indicators
+- Use tabs for navigation (use nav links)
+- Forget disabled state styling
+
+## Example
+```tsx
+import * as TabsPrimitive from '@radix-ui/react-tabs'
+import { cn } from '@/lib/utils'
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = ({ className, ...props }) => (
+  <TabsPrimitive.List
+    className={cn(
+      'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
+      className
+    )}
+    {...props}
+  />
+)
+
+const TabsTrigger = ({ className, ...props }) => (
+  <TabsPrimitive.Trigger
+    className={cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1',
+      'text-sm font-medium ring-offset-background transition-all',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
+      'disabled:pointer-events-none disabled:opacity-50',
+      'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      className
+    )}
+    {...props}
+  />
+)
+
+const TabsContent = ({ className, ...props }) => (
+  <TabsPrimitive.Content
+    className={cn(
+      'mt-2 ring-offset-background',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
+      className
+    )}
+    {...props}
+  />
+)
+
+// Usage
+<Tabs defaultValue="account">
+  <TabsList>
+    <TabsTrigger value="account">Account</TabsTrigger>
+    <TabsTrigger value="password">Password</TabsTrigger>
+    <TabsTrigger value="team">Team</TabsTrigger>
+  </TabsList>
+  <TabsContent value="account">Account settings...</TabsContent>
+  <TabsContent value="password">Password settings...</TabsContent>
+  <TabsContent value="team">Team settings...</TabsContent>
+</Tabs>
+```

package/templates/component-recipes/textarea.md

@@ -0,0 +1,234 @@
+# Textarea Component Recipe
+
+## Structure
+- Multi-line text input
+- Support for auto-resize
+- Character count option
+- Error state
+- Disabled state
+
+## Tailwind Classes
+
+### Base
+```
+flex min-h-[60px] w-full {tokens.radius} border border-border bg-background px-3 py-2
+text-sm text-foreground placeholder:text-muted-foreground
+transition-colors
+focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2
+disabled:cursor-not-allowed disabled:opacity-50
+resize-none
+```
+
+### With Resize
+```
+resize-y (vertical only)
+resize (both directions)
+resize-none (no resize - default for controlled height)
+```
+
+### Sizes
+```
+sm: min-h-[40px] text-sm
+md: min-h-[60px] text-sm (default)
+lg: min-h-[80px] text-base
+```
+
+### Error State
+```
+border-destructive focus-visible:ring-destructive
+```
+
+### Character Count
+```
+Container: relative
+Counter: absolute bottom-2 right-2 text-xs text-muted-foreground
+Counter error: text-destructive
+```
+
+### With Label
+```
+Container: space-y-2
+Label: text-sm font-medium leading-none
+```
+
+## Props Interface
+```typescript
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  error?: boolean
+  errorMessage?: string
+}
+
+interface TextareaWithCountProps extends TextareaProps {
+  maxLength: number
+  showCount?: boolean
+}
+
+interface AutoResizeTextareaProps extends TextareaProps {
+  minRows?: number
+  maxRows?: number
+}
+```
+
+## Auto-Resize Logic
+```typescript
+const adjustHeight = (textarea: HTMLTextAreaElement) => {
+  textarea.style.height = 'auto'
+  textarea.style.height = `${textarea.scrollHeight}px`
+}
+```
+
+## Do
+- Use for multi-line text (comments, descriptions, messages)
+- Include placeholder with example format
+- Show character count for limited inputs
+- Support auto-resize for better UX
+
+## Don't
+- Hardcode colors
+- Use for single-line inputs (use Input)
+- Make too small (frustrating to type in)
+- Forget to handle long content gracefully
+
+## Example
+```tsx
+import { forwardRef, useRef, useEffect } from 'react'
+import { cn } from '@/lib/utils'
+
+const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, error, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          'flex min-h-[60px] w-full rounded-lg border border-border bg-background px-3 py-2',
+          'text-sm text-foreground placeholder:text-muted-foreground',
+          'transition-colors',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          'resize-none',
+          error && 'border-destructive focus-visible:ring-destructive',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+
+Textarea.displayName = 'Textarea'
+
+// With character count
+const TextareaWithCount = forwardRef<HTMLTextAreaElement, TextareaWithCountProps>(
+  ({ maxLength, showCount = true, value, className, ...props }, ref) => {
+    const count = String(value || '').length
+    const isOverLimit = count > maxLength
+
+    return (
+      <div className="relative">
+        <Textarea
+          ref={ref}
+          value={value}
+          maxLength={maxLength}
+          className={cn(showCount && 'pb-6', className)}
+          {...props}
+        />
+        {showCount && (
+          <span
+            className={cn(
+              'absolute bottom-2 right-3 text-xs',
+              isOverLimit ? 'text-destructive' : 'text-muted-foreground'
+            )}
+          >
+            {count}/{maxLength}
+          </span>
+        )}
+      </div>
+    )
+  }
+)
+
+TextareaWithCount.displayName = 'TextareaWithCount'
+
+// Auto-resize textarea
+const AutoResizeTextarea = forwardRef<HTMLTextAreaElement, AutoResizeTextareaProps>(
+  ({ minRows = 2, maxRows = 10, onChange, className, ...props }, ref) => {
+    const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+    const adjustHeight = () => {
+      const textarea = textareaRef.current
+      if (!textarea) return
+
+      textarea.style.height = 'auto'
+      const lineHeight = parseInt(getComputedStyle(textarea).lineHeight)
+      const minHeight = lineHeight * minRows
+      const maxHeight = lineHeight * maxRows
+
+      const newHeight = Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight)
+      textarea.style.height = `${newHeight}px`
+    }
+
+    useEffect(() => {
+      adjustHeight()
+    }, [props.value])
+
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      adjustHeight()
+      onChange?.(e)
+    }
+
+    return (
+      <Textarea
+        ref={(node) => {
+          textareaRef.current = node
+          if (typeof ref === 'function') ref(node)
+          else if (ref) ref.current = node
+        }}
+        onChange={handleChange}
+        className={cn('resize-none overflow-hidden', className)}
+        rows={minRows}
+        {...props}
+      />
+    )
+  }
+)
+
+AutoResizeTextarea.displayName = 'AutoResizeTextarea'
+
+// With label and error
+const TextareaField = ({ label, error, errorMessage, id, ...props }) => (
+  <div className="space-y-2">
+    {label && (
+      <label htmlFor={id} className="text-sm font-medium leading-none">
+        {label}
+      </label>
+    )}
+    <Textarea id={id} error={error} {...props} />
+    {errorMessage && (
+      <p className="text-sm text-destructive">{errorMessage}</p>
+    )}
+  </div>
+)
+
+// Usage examples
+<Textarea placeholder="Type your message here..." />
+
+<TextareaWithCount
+  maxLength={280}
+  placeholder="What's happening?"
+  value={message}
+  onChange={(e) => setMessage(e.target.value)}
+/>
+
+<AutoResizeTextarea
+  placeholder="Write your comment..."
+  minRows={2}
+  maxRows={6}
+/>
+
+<TextareaField
+  label="Description"
+  placeholder="Describe your project..."
+  error={!!errors.description}
+  errorMessage={errors.description?.message}
+/>
+```