@pattern-stack/frontend-patterns 0.1.0 → 0.1.2

package/src/atoms/types/index.ts

@@ -0,0 +1,4 @@
+// Export all type definitions
+export * from './generated';
+export * from './loading';
+export * from './auth';

package/src/atoms/types/loading.ts

@@ -0,0 +1,28 @@
+/**
+ * Base interface for components that support loading states
+ */
+export interface ILoadable {
+  /** Whether the component is in a loading state */
+  isLoading?: boolean;
+}
+
+/**
+ * Interface for list components that support configurable loading item counts
+ */
+export interface IListLoadable extends ILoadable {
+  /** Number of skeleton items to show when loading */
+  loadingItemCount?: number;
+}
+
+/**
+ * Common loading states for data components
+ */
+export type LoadingState = 'idle' | 'loading' | 'error' | 'success';
+
+/**
+ * Props for components that need loading state management
+ */
+export interface LoadingStateProps {
+  loadingState?: LoadingState;
+  error?: string | null;
+}

package/src/atoms/ui/Badge.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { cn } from '../utils/utils';
+
+interface BadgeProps {
+  children: React.ReactNode;
+  variant?: 'default' | 'secondary' | 'destructive' | 'outline';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+export const Badge = ({ children, variant = 'default', size = 'md', className }: BadgeProps) => {
+  const baseClasses = 'inline-flex items-center rounded-full font-medium transition-all duration-150';
+  const sizeClasses = {
+    sm: 'px-2 py-0.5 text-xs',
+    md: 'px-2.5 py-1 text-xs', 
+    lg: 'px-3 py-1.5 text-sm'
+  };
+  const variantClasses = {
+    default: 'bg-primary/10 text-primary border border-primary/20 hover:bg-primary/20',
+    secondary: 'bg-gray-100 text-gray-700 border border-gray-200 hover:bg-gray-200',
+    destructive: 'bg-destructive/10 text-destructive border border-destructive/20 hover:bg-destructive/20',
+    outline: 'border border-gray-300 text-gray-700 bg-white hover:bg-gray-50'
+  };
+  
+  return (
+    <span className={cn(baseClasses, sizeClasses[size], variantClasses[variant], className)}>
+      {children}
+    </span>
+  );
+};

package/src/atoms/ui/ErrorBoundary.tsx

@@ -0,0 +1,59 @@
+import { Component } from 'react';
+import type { ErrorInfo, ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+  };
+
+  public static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <div className="p-6 bg-destructive/10 border border-destructive/20 rounded-[--radius]">
+          <h3 className="text-destructive font-medium mb-2">Something went wrong</h3>
+          <p className="text-muted-foreground text-sm mb-4">
+            An unexpected error occurred. Please refresh the page or try again later.
+          </p>
+          <details className="text-xs text-destructive/80">
+            <summary className="cursor-pointer">Error details</summary>
+            <pre className="mt-2 whitespace-pre-wrap">
+              {this.state.error?.message}
+              {'\n'}
+              {this.state.error?.stack}
+            </pre>
+          </details>
+          <button
+            onClick={() => window.location.reload()}
+            className="mt-4 px-4 py-2 bg-destructive text-destructive-foreground rounded-[--radius] hover:bg-destructive/90 text-sm"
+          >
+            Reload Page
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/src/atoms/ui/Select.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { cn } from '../utils/utils';
+
+interface SelectProps {
+  children: React.ReactNode;
+  onValueChange?: (value: string) => void;
+  defaultValue?: string;
+  value?: string;
+}
+
+export const Select = ({ children }: SelectProps) => (
+  <div className="relative">{children}</div>
+);
+
+interface SelectTriggerProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const SelectTrigger = ({ children, className }: SelectTriggerProps) => (
+  <button className={cn("flex h-10 w-full items-center justify-between rounded-[--radius] border px-3 py-2 text-sm", className)}>
+    {children}
+  </button>
+);
+
+interface SelectValueProps {
+  placeholder?: string;
+}
+
+export const SelectValue = ({ placeholder }: SelectValueProps) => (
+  <span className="text-muted-foreground">{placeholder}</span>
+);
+
+interface SelectContentProps {
+  children: React.ReactNode;
+}
+
+export const SelectContent = ({ children }: SelectContentProps) => (
+  <div className="absolute top-full left-0 z-50 w-full rounded-[--radius] border bg-popover shadow-[0_10px_15px_-3px_rgb(0_0_0_/_0.1),0_4px_6px_-4px_rgb(0_0_0_/_0.1)]">
+    {children}
+  </div>
+);
+
+interface SelectItemProps {
+  children: React.ReactNode;
+  value: string;
+}
+
+export const SelectItem = ({ children }: SelectItemProps) => (
+  <div className="relative flex w-full cursor-default select-none items-center rounded-[calc(var(--radius)-2px)] py-1.5 px-2 text-sm hover:bg-accent hover:text-accent-foreground">
+    {children}
+  </div>
+);

package/src/atoms/ui/Switch.tsx

@@ -0,0 +1,42 @@
+import { cn } from '../utils/utils';
+
+interface SwitchProps {
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  className?: string;
+  disabled?: boolean;
+}
+
+export const Switch = ({ checked, onCheckedChange, className, disabled }: SwitchProps) => {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      data-1p-ignore
+      data-lpignore="true"
+      className={cn(
+        'relative inline-flex h-6 w-11 items-center rounded-full transition-all duration-200',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        checked 
+          ? 'bg-category-1 shadow-sm' 
+          : 'bg-muted border-2 border-border shadow-inner',
+        !disabled && 'hover:shadow-md',
+        className
+      )}
+      onClick={() => !disabled && onCheckedChange?.(!checked)}
+      disabled={disabled}
+    >
+      <span
+        className={cn(
+          'inline-block h-4 w-4 transform rounded-full transition-all duration-200 shadow-md',
+          'ring-0 bg-background border border-border/20',
+          checked 
+            ? 'translate-x-5 bg-white border-white/50' 
+            : 'translate-x-0.5 bg-background'
+        )}
+      />
+    </button>
+  );
+};

package/src/atoms/ui/Tabs.tsx

@@ -0,0 +1,118 @@
+import React, { createContext, useContext, useState } from 'react';
+import { cn } from '../utils/utils';
+import { getAnimationClasses, animationPresets } from '../utils/animations';
+
+interface TabsContextType {
+  activeTab: string;
+  setActiveTab: (tab: string) => void;
+}
+
+const TabsContext = createContext<TabsContextType | null>(null);
+
+interface TabsProps {
+  children: React.ReactNode;
+  defaultValue?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  className?: string;
+}
+
+export const Tabs = ({ children, defaultValue, value, onValueChange, className }: TabsProps) => {
+  const [internalActiveTab, setInternalActiveTab] = useState(defaultValue || '');
+  
+  const activeTab = value !== undefined ? value : internalActiveTab;
+  const setActiveTab = (tab: string) => {
+    if (onValueChange) {
+      onValueChange(tab);
+    } else {
+      setInternalActiveTab(tab);
+    }
+  };
+  
+  return (
+    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
+      <div className={className}>{children}</div>
+    </TabsContext.Provider>
+  );
+};
+
+interface TabsListProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const TabsList = ({ children, className }: TabsListProps) => (
+  <div 
+    className={cn(
+      'h-auto min-h-10 items-center justify-center rounded-lg bg-card border border-border shadow-sm',
+      'flex flex-wrap gap-1 sm:gap-2 lg:gap-3 w-full lg:w-fit mx-auto mb-6 p-1',
+      className
+    )}
+    data-component-name="TabsList"
+  >
+    {children}
+  </div>
+);
+
+interface TabsTriggerProps {
+  children: React.ReactNode;
+  value: string;
+  className?: string;
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+  'data-category'?: string;
+}
+
+export const TabsTrigger = ({ children, value, className, category, 'data-category': dataCategory }: TabsTriggerProps) => {
+  // Use data-category if provided, otherwise fallback to category prop, then default to 1
+  const effectiveCategory = dataCategory ? parseInt(dataCategory) as 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 : category || 1;
+  const context = useContext(TabsContext);
+  const isActive = context?.activeTab === value;
+  
+  const activeStyles = isActive ? {
+    backgroundColor: `hsl(var(--category-${effectiveCategory}) / 0.15)`,
+    color: `hsl(var(--category-${effectiveCategory}))`,
+    borderColor: `hsl(var(--category-${effectiveCategory}) / 0.3)`,
+    boxShadow: 'var(--shadow-sm)'
+  } : {};
+  
+  return (
+    <button
+      className={cn(
+        'w-auto flex-grow items-center justify-center whitespace-nowrap rounded-md px-1 sm:px-2 md:px-3 py-1 sm:py-2 text-sm font-medium',
+        // Always have a border to prevent layout shifts
+        'border',
+        isActive 
+          ? '' // Remove class-based styling when using inline styles
+          : cn(
+              'text-muted-foreground hover:text-foreground border-transparent hover:bg-muted/80',
+              getAnimationClasses(animationPresets.tab)
+            ),
+        className
+      )}
+      style={activeStyles}
+      onClick={() => context?.setActiveTab(value)}
+      data-component-name="TabsTrigger"
+    >
+      {children}
+    </button>
+  );
+};
+
+interface TabsContentProps {
+  children: React.ReactNode;
+  value: string;
+  className?: string;
+}
+
+export const TabsContent = ({ children, value, className }: TabsContentProps) => {
+  const context = useContext(TabsContext);
+  const isActive = context?.activeTab === value;
+  
+  if (!isActive) return null;
+  
+  return (
+    <div className={cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', className)}>
+      {children}
+    </div>
+  );
+};

package/src/atoms/ui/avatar.tsx

@@ -0,0 +1,48 @@
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from '../utils/utils'
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }

package/src/atoms/ui/button.tsx

@@ -0,0 +1,70 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from '../utils/utils'
+import { Tooltip } from '../composed/Tooltip'
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98]",
+  {
+    variants: {
+      variant: {
+        default: "bg-gradient-to-r from-primary to-primary/90 text-primary-foreground hover:from-primary/90 hover:to-primary/80 shadow-sm hover:shadow-md",
+        destructive:
+          "bg-gradient-to-r from-destructive to-destructive/90 text-destructive-foreground hover:from-destructive/90 hover:to-destructive/80 shadow-sm hover:shadow-md",
+        outline:
+          "border border-gray-300 bg-white hover:bg-gray-50 hover:border-primary/50 shadow-sm",
+        secondary:
+          "bg-gray-100 text-gray-900 hover:bg-gray-200 shadow-sm",
+        ghost: "hover:bg-muted/80 hover:text-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-5 py-2",
+        sm: "h-9 rounded-lg px-3 text-xs",
+        lg: "h-12 rounded-lg px-8 text-base",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+  /** Tooltip to show on hover (especially useful for icon-only buttons) */
+  tooltip?: string
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, tooltip, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    
+    const button = (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+
+    // Show tooltip for icon-only buttons or when explicitly provided
+    if (tooltip && !asChild) {
+      return (
+        <Tooltip content={tooltip} position="top" size="sm">
+          {button}
+        </Tooltip>
+      )
+    }
+
+    return button
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

package/src/atoms/ui/card.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+import { cn } from '../utils/utils'
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+}
+
+const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ className, category, style, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "rounded-lg border border-border bg-card text-card-foreground shadow-sm hover:shadow-md",
+          category && [
+            "border-l-4 hover:border-border/80",
+            `card-category-${category}`
+          ],
+          className
+        )}
+        style={style}
+        {...props}
+      />
+    );
+  }
+);
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }