@pattern-stack/frontend-patterns 0.0.1 → 0.0.3

package/src/atoms/types/index.ts

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

package/src/atoms/types/loading.ts

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

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

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

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

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

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

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

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

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