@pattern-stack/frontend-patterns 0.0.1

package/src/atoms/ui/dropdown-menu.tsx

@@ -0,0 +1,199 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from '../utils/utils'
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}

package/src/atoms/ui/index.ts

@@ -0,0 +1,39 @@
+// Export shared UI components here
+export { ErrorBoundary } from './ErrorBoundary';
+
+// Export ShadCN UI components (local)
+export { Button } from './button';
+export { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from './card';
+export { Input } from './input';
+export { Label } from './label';
+export { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, TableFooter } from './table';
+
+// Export custom components
+export { Badge } from './Badge';
+export { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './Select';
+export { Switch } from './Switch';
+export { Tabs, TabsContent, TabsList, TabsTrigger } from './Tabs';
+export { Avatar, AvatarImage, AvatarFallback } from './avatar';
+export { 
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup
+} from './dropdown-menu';
+
+// Export skeleton component
+export { Skeleton } from './skeleton';
+
+// Export loading components
+export { Spinner, Loading } from './spinner';

package/src/atoms/ui/input.tsx

@@ -0,0 +1,23 @@
+import * as React from "react"
+import { cn } from '../utils/utils'
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded border border-border bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 transition-all",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

package/src/atoms/ui/label.tsx

@@ -0,0 +1,23 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from '../utils/utils'
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

package/src/atoms/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from '../utils/utils'
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/src/atoms/ui/spinner.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { cn } from '../utils/utils';
+import { Loader2 } from 'lucide-react';
+
+interface SpinnerProps {
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const sizeMap = {
+  sm: 'w-4 h-4',
+  md: 'w-6 h-6', 
+  lg: 'w-8 h-8'
+};
+
+export const Spinner: React.FC<SpinnerProps> = ({ 
+  size = 'md', 
+  className 
+}) => {
+  return (
+    <Loader2 
+      className={cn(
+        'animate-spin text-muted-foreground',
+        sizeMap[size],
+        className
+      )} 
+    />
+  );
+};
+
+// Alternative loading component for inline use
+interface LoadingProps {
+  text?: string;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+export const Loading: React.FC<LoadingProps> = ({ 
+  text = 'Loading...', 
+  size = 'md', 
+  className 
+}) => {
+  return (
+    <div className={cn('flex items-center gap-2 text-muted-foreground', className)}>
+      <Spinner size={size} />
+      <span className="text-sm">{text}</span>
+    </div>
+  );
+};

package/src/atoms/ui/table.tsx

@@ -0,0 +1,116 @@
+import * as React from "react"
+import { cn } from '../utils/utils'
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b border-gray-100 transition-all duration-150 hover:bg-gray-50/50 data-[state=selected]:bg-gray-100",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-semibold text-gray-700 text-xs uppercase tracking-wider [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

package/src/atoms/utils/animations.ts

@@ -0,0 +1,135 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+/**
+ * Centralized animation variants system for consistent interactions across components.
+ * 
+ * Based on analysis of successful patterns:
+ * - DataBadge: scale + shadow effects work well (tactile feel)
+ * - Tab hover: needs consistency in timing
+ * - Overall: standardize timing and easing
+ */
+
+export const interactionVariants = cva(
+  // Base transition classes applied to all interactive elements
+  'transition-all ease-out',
+  {
+    variants: {
+      /**
+       * Animation type based on component purpose and successful patterns
+       */
+      type: {
+        /**
+         * Subtle: minimal hover effects for navigation elements
+         * Used for: secondary buttons, nav links, subtle interactive elements
+         */
+        subtle: 'duration-200 hover:bg-accent/50 hover:text-accent-foreground',
+        
+        /**
+         * Tactile: badges, chips with satisfying scale + shadow feedback
+         * Used for: DataBadge, chips, small interactive elements
+         * PRESERVE: This pattern works well and should be maintained
+         */
+        tactile: 'duration-200 hover:scale-105 active:scale-95 shadow hover:shadow-md',
+        
+        /**
+         * Card: cards and major content blocks with elevation
+         * Used for: content cards, major clickable areas
+         */
+        card: 'duration-300 hover:shadow-lg hover:-translate-y-0.5',
+        
+        /**
+         * Button: primary actions with clear feedback
+         * Used for: primary buttons, call-to-action elements
+         */
+        button: 'duration-200 hover:scale-[1.02] active:scale-[0.98] hover:shadow-md',
+        
+        /**
+         * Tab: header navigation tabs with tactile feedback
+         * UPDATED: Removed scale and border changes to prevent layout jitter
+         */
+        tab: 'duration-200 hover:shadow-sm hover:bg-accent/30',
+      },
+      
+      /**
+       * Size affects the scale intensity for different component sizes
+       */
+      size: {
+        sm: '', // Default scaling
+        md: '', // Default scaling  
+        lg: 'hover:scale-[1.03] active:scale-[0.97]', // Reduced scaling for larger elements
+        xl: 'hover:scale-[1.02] active:scale-[0.98]', // Minimal scaling for very large elements
+      },
+      
+      /**
+       * Timing variants for special cases
+       */
+      timing: {
+        instant: 'duration-100',
+        fast: 'duration-150', 
+        normal: 'duration-200',
+        slow: 'duration-300',
+        slower: 'duration-500',
+      },
+      
+      /**
+       * Disable animations for accessibility or performance
+       */
+      disabled: {
+        true: 'transition-none',
+        false: '',
+      }
+    },
+    defaultVariants: {
+      type: 'subtle',
+      size: 'md',
+      timing: 'normal',
+      disabled: false,
+    },
+  }
+);
+
+export type InteractionVariants = VariantProps<typeof interactionVariants>;
+
+/**
+ * Helper function to get animation classes
+ * @param variants - Animation variant configuration
+ * @returns Tailwind classes for the animation
+ */
+export const getAnimationClasses = (variants?: InteractionVariants) => {
+  return interactionVariants(variants);
+};
+
+/**
+ * Predefined animation configurations for common use cases
+ */
+export const animationPresets = {
+  // Preserve successful DataBadge pattern
+  dataBadge: { type: 'tactile' as const, timing: 'normal' as const },
+  
+  // Improved tab pattern to match tactile feel
+  tab: { type: 'tab' as const, timing: 'normal' as const },
+  
+  // Other common patterns
+  button: { type: 'button' as const, timing: 'normal' as const },
+  card: { type: 'card' as const, timing: 'slow' as const },
+  subtle: { type: 'subtle' as const, timing: 'normal' as const },
+  
+  // Size-specific presets
+  smallTactile: { type: 'tactile' as const, size: 'sm' as const },
+  largeTactile: { type: 'tactile' as const, size: 'lg' as const },
+} as const;
+
+/**
+ * Legacy class combinations for migration reference
+ * These can be replaced with the new animation system
+ */
+export const legacyPatterns = {
+  // Current DataBadge: 'hover:scale-105 active:scale-95 shadow hover:shadow'
+  dataBadgeLegacy: 'transition-all hover:scale-105 active:scale-95 shadow hover:shadow',
+  
+  // Current TabsTrigger: 'hover:scale-105 active:scale-95 hover:shadow transition-all duration-150'
+  tabTriggerLegacy: 'transition-all duration-150 hover:scale-105 active:scale-95 hover:shadow',
+  
+  // Current TabsList: 'hover:shadow-md transition-all duration-200'
+  tabsListLegacy: 'transition-all duration-200 hover:shadow-md',
+} as const;