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

package/src/main.tsx

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

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

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

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

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

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

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

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

package/src/molecules/layout/AppLayout.tsx

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

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

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

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