@pattern-stack/frontend-patterns 1.0.0

package/src/main.tsx

@@ -0,0 +1,48 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { AuthProvider } from './features/auth'
+import { SidebarProvider } from './molecules/layout'
+import './index.css'
+import App from './App.tsx'
+
+// Suppress browser extension errors in development
+if (import.meta.env.DEV) {
+  const originalError = console.error;
+  console.error = (...args) => {
+    const message = args[0];
+    if (
+      typeof message === 'string' && 
+      (message.includes('Deprecated API for given entry type') ||
+       message.includes('message channel closed before a response was received') ||
+       message.includes('Extension context invalidated'))
+    ) {
+      return; // Suppress extension-related errors
+    }
+    originalError(...args);
+  };
+}
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1,
+      refetchOnWindowFocus: false,
+      staleTime: 5 * 60 * 1000, // 5 minutes
+    },
+  },
+})
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <AuthProvider>
+        <SidebarProvider>
+          <App />
+        </SidebarProvider>
+      </AuthProvider>
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  </StrictMode>,
+)

package/src/molecules/forms/FormGroup.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { cn } from '../../atoms/utils/utils';
+
+export interface FormGroupProps {
+  /** Group title */
+  title?: string;
+  /** Group description */
+  description?: string;
+  /** Group content */
+  children: React.ReactNode;
+  /** Visual variant */
+  variant?: 'default' | 'card' | 'section';
+  /** Additional CSS classes */
+  className?: string;
+  /** Category-based styling */
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+}
+
+export const FormGroup: React.FC<FormGroupProps> = ({
+  title,
+  description,
+  children,
+  variant = 'default',
+  className,
+  category
+}) => {
+  const variantClasses = {
+    default: 'space-y-4',
+    card: 'space-y-4 p-6 bg-card border border-border rounded-lg',
+    section: 'space-y-6 pb-6 border-b border-border last:border-b-0 last:pb-0'
+  };
+
+  const titleClasses = {
+    default: 'text-lg font-semibold text-foreground',
+    card: 'text-lg font-semibold text-foreground',
+    section: 'text-xl font-semibold text-foreground'
+  };
+
+  return (
+    <div
+      className={cn(
+        variantClasses[variant],
+        category && variant === 'card' && `border-category-${category}/20`,
+        className
+      )}
+      data-component-name="FormGroup"
+    >
+      {/* Header */}
+      {(title || description) && (
+        <div className="space-y-1">
+          {title && (
+            <h3 
+              className={cn(
+                titleClasses[variant],
+                category && `text-category-${category}`
+              )}
+            >
+              {title}
+            </h3>
+          )}
+          {description && (
+            <p className="text-sm text-muted-foreground">
+              {description}
+            </p>
+          )}
+        </div>
+      )}
+
+      {/* Content */}
+      <div className="space-y-4">
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/molecules/forms/SearchInput.tsx

@@ -0,0 +1,259 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Search, X, Loader2 } from 'lucide-react';
+import { cn } from '../../atoms/utils/utils';
+import { Input } from '../../atoms/ui/input';
+import { Button } from '../../atoms/ui/button';
+import { getAnimationClasses, animationPresets } from '../../atoms/utils/animations';
+
+export interface SearchResult {
+  id: string;
+  label: string;
+  description?: string;
+  category?: string;
+  icon?: React.ReactNode;
+}
+
+export interface SearchInputProps {
+  /** Search placeholder text */
+  placeholder?: string;
+  /** Current search value */
+  value?: string;
+  /** Value change handler */
+  onChange?: (value: string) => void;
+  /** Search results */
+  results?: SearchResult[];
+  /** Loading state */
+  loading?: boolean;
+  /** Result selection handler */
+  onSelect?: (result: SearchResult) => void;
+  /** Search debounce delay in ms */
+  debounceMs?: number;
+  /** Whether to show clear button */
+  clearable?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+  /** Category-based styling */
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+  /** Maximum results to show */
+  maxResults?: number;
+  /** No results message */
+  noResultsText?: string;
+}
+
+export const SearchInput: React.FC<SearchInputProps> = ({
+  placeholder = 'Search...',
+  value = '',
+  onChange,
+  results = [],
+  loading = false,
+  onSelect,
+  debounceMs = 300,
+  clearable = true,
+  className,
+  category = 1,
+  maxResults = 10,
+  noResultsText = 'No results found'
+}) => {
+  const [internalValue, setInternalValue] = useState(value);
+  const [isOpen, setIsOpen] = useState(false);
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  
+  const inputRef = useRef<HTMLInputElement>(null);
+  const resultsRef = useRef<HTMLDivElement>(null);
+  const debounceRef = useRef<NodeJS.Timeout | undefined>(undefined);
+
+  const displayResults = results.slice(0, maxResults);
+  const showResults = isOpen && (displayResults.length > 0 || (internalValue && !loading));
+
+  // Debounced search
+  useEffect(() => {
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+
+    debounceRef.current = setTimeout(() => {
+      if (onChange) onChange(internalValue);
+    }, debounceMs);
+
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+    };
+  }, [internalValue, onChange, debounceMs]);
+
+  // Sync external value
+  useEffect(() => {
+    setInternalValue(value);
+  }, [value]);
+
+  // Keyboard navigation
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (!showResults) return;
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        setHighlightedIndex(prev => 
+          prev < displayResults.length - 1 ? prev + 1 : prev
+        );
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        setHighlightedIndex(prev => prev > 0 ? prev - 1 : prev);
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if (highlightedIndex >= 0 && displayResults[highlightedIndex]) {
+          handleSelect(displayResults[highlightedIndex]);
+        }
+        break;
+      case 'Escape':
+        setIsOpen(false);
+        setHighlightedIndex(-1);
+        inputRef.current?.blur();
+        break;
+    }
+  };
+
+  const handleSelect = (result: SearchResult) => {
+    onSelect?.(result);
+    setIsOpen(false);
+    setHighlightedIndex(-1);
+    inputRef.current?.blur();
+  };
+
+  const handleClear = () => {
+    setInternalValue('');
+    onChange?.('');
+    setIsOpen(false);
+    inputRef.current?.focus();
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setInternalValue(newValue);
+    setIsOpen(true);
+    setHighlightedIndex(-1);
+  };
+
+  const handleFocus = () => {
+    if (internalValue) {
+      setIsOpen(true);
+    }
+  };
+
+  const handleBlur = () => {
+    // Delay closing to allow for result clicks
+    setTimeout(() => {
+      if (!resultsRef.current?.contains(document.activeElement)) {
+        setIsOpen(false);
+        setHighlightedIndex(-1);
+      }
+    }, 150);
+  };
+
+  return (
+    <div className={cn('relative w-full', className)} data-component-name="SearchInput">
+      {/* Input container */}
+      <div className="relative">
+        <div className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">
+          {loading ? (
+            <Loader2 className="w-4 h-4 animate-spin" />
+          ) : (
+            <Search className="w-4 h-4" />
+          )}
+        </div>
+        
+        <Input
+          ref={inputRef}
+          type="text"
+          value={internalValue}
+          onChange={handleInputChange}
+          onKeyDown={handleKeyDown}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          placeholder={placeholder}
+          className={cn(
+            'pl-10',
+            clearable && internalValue && 'pr-10',
+            showResults && `ring-2 ring-category-${category}/20`
+          )}
+        />
+        
+        {clearable && internalValue && (
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={handleClear}
+            className="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7 p-0 hover:bg-muted"
+          >
+            <X className="w-4 h-4" />
+          </Button>
+        )}
+      </div>
+
+      {/* Results dropdown */}
+      {showResults && (
+        <div
+          ref={resultsRef}
+          className={cn(
+            'absolute top-full left-0 right-0 z-50 mt-1',
+            'bg-popover border border-border rounded-md shadow-lg',
+            'max-h-64 overflow-y-auto',
+            getAnimationClasses(animationPresets.card)
+          )}
+        >
+          {displayResults.length > 0 ? (
+            <div className="py-1">
+              {displayResults.map((result, index) => (
+                <button
+                  key={result.id}
+                  type="button"
+                  onClick={() => handleSelect(result)}
+                  className={cn(
+                    'w-full text-left px-3 py-2 text-sm',
+                    'hover:bg-muted/50 focus:bg-muted/50',
+                    'transition-colors duration-150',
+                    index === highlightedIndex && [
+                      `bg-category-${category}/10`,
+                      `text-category-${category}`
+                    ]
+                  )}
+                >
+                  <div className="flex items-center gap-2">
+                    {result.icon && (
+                      <span className="flex-shrink-0 text-muted-foreground">
+                        {result.icon}
+                      </span>
+                    )}
+                    <div className="flex-1 min-w-0">
+                      <div className="font-medium truncate">
+                        {result.label}
+                      </div>
+                      {result.description && (
+                        <div className="text-xs text-muted-foreground truncate">
+                          {result.description}
+                        </div>
+                      )}
+                    </div>
+                    {result.category && (
+                      <span className="text-xs text-muted-foreground">
+                        {result.category}
+                      </span>
+                    )}
+                  </div>
+                </button>
+              ))}
+            </div>
+          ) : internalValue && !loading ? (
+            <div className="px-3 py-2 text-sm text-muted-foreground">
+              {noResultsText}
+            </div>
+          ) : null}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/molecules/forms/index.ts

@@ -0,0 +1,4 @@
+// Form molecules - reusable form patterns and workflows
+// Note: FormField moved to @/atoms/composed as it is a business UI component
+export { FormGroup, type FormGroupProps } from './FormGroup';
+export { SearchInput, type SearchInputProps, type SearchResult } from './SearchInput';

package/src/molecules/index.ts

@@ -0,0 +1,4 @@
+// Molecule layer exports - combinations of atoms and features
+export * from './layout';
+export * from './navigation';
+export * from './forms';

package/src/molecules/layout/AppHeader/AppHeader.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { GlobalSearch, UserMenu } from '../../../atoms/composed';
+import { cn } from '../../../atoms/utils/utils';
+
+interface AppHeaderProps {
+  className?: string;
+}
+
+export const AppHeader: React.FC<AppHeaderProps> = ({ className }) => {
+  return (
+    <header className={cn(
+      "fixed top-0 left-0 right-0 z-50",
+      "bg-card/95 backdrop-blur-sm border-b border-border",
+      "supports-[backdrop-filter]:bg-card/95",
+      className
+    )}>
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="flex h-16 items-center justify-between">
+          {/* App Title */}
+          <div className="flex items-center">
+            <h1 className="text-xl font-bold text-foreground">
+              Data Trust Navigator
+            </h1>
+          </div>
+          
+          {/* Centered Global Search */}
+          <div className="flex-1 max-w-2xl mx-8">
+            <GlobalSearch 
+              className="w-full" 
+              placeholder="Search models, tests, jobs, and components..."
+            />
+          </div>
+          
+          {/* User Menu */}
+          <div className="flex items-center space-x-4">
+            <UserMenu category={8} />
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};

package/src/molecules/layout/AppHeader/index.ts

@@ -0,0 +1 @@
+export { AppHeader } from './AppHeader';

package/src/molecules/layout/AppLayout.tsx

@@ -0,0 +1,29 @@
+import { Outlet } from 'react-router-dom';
+import { Sidebar } from './Sidebar';
+import { AppHeader } from './AppHeader';
+import { useSidebar } from './SidebarContext';
+import { cn } from '../../atoms/utils/utils';
+
+export const AppLayout = () => {
+  const { isExpanded } = useSidebar();
+  
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Header spans full width */}
+      <AppHeader />
+      
+      {/* Sidebar positioned fixed */}
+      <Sidebar />
+      
+      {/* Main content with proper spacing for fixed sidebar */}
+      <main 
+        className={cn(
+          "pt-16 min-h-screen transition-all duration-300 ease-in-out",
+          isExpanded ? 'ml-64' : 'ml-16'
+        )}
+      >
+        <Outlet />
+      </main>
+    </div>
+  );
+};

package/src/molecules/layout/PageTemplate.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { cn } from '../../atoms/utils/utils';
+import { getAnimationClasses } from '../../atoms/utils/animations';
+
+export interface PageTemplateProps {
+  /** Main page title */
+  title: string;
+  /** Optional subtitle/description */
+  subtitle?: string;
+  /** Optional icon element to display with title */
+  icon?: React.ReactNode;
+  /** Optional action buttons/controls for the header */
+  actions?: React.ReactNode;
+  /** Page content */
+  children: React.ReactNode;
+  /** Additional CSS classes for the container */
+  className?: string;
+  /** Whether to apply animation to the page content */
+  animated?: boolean;
+}
+
+export const PageTemplate: React.FC<PageTemplateProps> = ({
+  title,
+  subtitle,
+  icon,
+  actions,
+  children,
+  className,
+  animated = true
+}) => {
+  return (
+    <div 
+      className={cn(
+        'min-h-screen bg-background',
+        animated && getAnimationClasses({ type: 'subtle', timing: 'slow' }),
+        className
+      )}
+      data-component-name="PageTemplate"
+    >
+      {/* Page Header */}
+      <header className="border-b border-border bg-card/50 backdrop-blur-sm sticky top-0 z-10">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex items-center justify-between py-6 sm:py-8">
+            <div className="flex items-center space-x-4 min-w-0 flex-1">
+              {icon && (
+                <div className="flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 flex items-center justify-center rounded bg-primary/10 text-primary">
+                  {icon}
+                </div>
+              )}
+              
+              <div className="min-w-0 flex-1">
+                <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-foreground tracking-tight">
+                  {title}
+                </h1>
+                {subtitle && (
+                  <p className="mt-2 text-base sm:text-lg text-muted-foreground max-w-3xl">
+                    {subtitle}
+                  </p>
+                )}
+              </div>
+            </div>
+            
+            {actions && (
+              <div className="flex-shrink-0 ml-4">
+                <div className="flex items-center space-x-3">
+                  {actions}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </header>
+
+      {/* Page Content */}
+      <main className="container mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8 lg:py-12">
+        <div 
+          className={cn(
+            'space-y-8',
+            animated && 'animate-fade-in'
+          )}
+        >
+          {children}
+        </div>
+      </main>
+    </div>
+  );
+};

package/src/molecules/layout/SectionHeader/SectionHeader.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { cn } from '../../../atoms/utils/utils';
+import { DataBadge } from '../../../atoms/composed/DataBadge';
+
+export interface SectionHeaderProps {
+  /** Main heading text */
+  title: string;
+  /** Optional description text */
+  description?: string;
+  /** Optional subtitle text */
+  subtitle?: string;
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Additional CSS classes */
+  className?: string;
+  /** Optional icon element */
+  icon?: React.ReactNode;
+  /** Optional badge configuration */
+  badge?: {
+    text: string;
+    variant?: 'category' | 'status';
+    category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+    status?: 'success' | 'warning' | 'error' | 'info' | 'neutral';
+  };
+}
+
+export const SectionHeader: React.FC<SectionHeaderProps> = ({
+  title,
+  description,
+  subtitle,
+  size = 'md',
+  className,
+  icon,
+  badge
+}) => {
+  const titleSizes = {
+    sm: 'text-lg',
+    md: 'text-xl', 
+    lg: 'text-2xl'
+  };
+
+  const spacingSizes = {
+    sm: 'space-y-1',
+    md: 'space-y-2',
+    lg: 'space-y-3'
+  };
+
+  return (
+    <div 
+      className={cn(
+        'text-center',
+        spacingSizes[size],
+        className
+      )}
+      data-component-name="SectionHeader"
+    >
+      <div className="flex items-center justify-center gap-3">
+        {icon}
+        <h3 className={cn('font-semibold text-foreground', titleSizes[size])}>
+          {title}
+        </h3>
+        {badge && (
+          <DataBadge
+            variant={badge.variant || 'status'}
+            status={badge.status}
+            category={badge.category}
+            size="sm"
+          >
+            {badge.text}
+          </DataBadge>
+        )}
+      </div>
+      
+      {subtitle && (
+        <p className="text-muted-foreground text-sm font-medium">
+          {subtitle}
+        </p>
+      )}
+      
+      {description && (
+        <p className="text-muted-foreground text-sm max-w-2xl mx-auto">
+          {description}
+        </p>
+      )}
+    </div>
+  );
+};

package/src/molecules/layout/SectionHeader/index.ts

@@ -0,0 +1 @@
+export { SectionHeader, type SectionHeaderProps } from './SectionHeader';