@pattern-stack/frontend-patterns 0.1.2 → 0.2.0-alpha.0

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

@@ -1,199 +0,0 @@
-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

@@ -1,39 +0,0 @@
-// 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

@@ -1,23 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,116 +0,0 @@
-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

@@ -1,135 +0,0 @@
-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;