@gv-tech/design-system 2.4.0 → 2.5.0

package/apps/playground-web/src/components/docs/ErrorBoundary.tsx

@@ -0,0 +1,55 @@
+import { Button } from '@gv-tech/ui-web';
+import { AlertTriangle } from 'lucide-react';
+import { Component, ErrorInfo, ReactNode } from 'react';
+
+interface Props {
+  children?: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+    error: null,
+  };
+
+  public static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('Uncaught error:', error, errorInfo);
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <div className="flex flex-col items-center justify-center min-h-[400px] p-6 text-center border-2 border-dashed border-destructive/50 rounded-lg bg-destructive/5">
+          <AlertTriangle className="h-12 w-12 text-destructive mb-4" />
+          <h2 className="text-xl font-semibold mb-2">Something went wrong</h2>
+          <p className="text-muted-foreground mb-6 max-w-md">
+            This documentation page encountered an error during rendering. This usually happens when a native component
+            fails to shim correctly on the web.
+          </p>
+          <div className="bg-background p-4 rounded border mb-6 text-left overflow-auto max-w-full font-mono text-sm text-destructive">
+            {this.state.error?.message}
+          </div>
+          <Button variant="outline" onClick={() => this.setState({ hasError: false, error: null })}>
+            Try Again
+          </Button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/apps/playground-web/src/components/docs/Footer.tsx

@@ -0,0 +1,146 @@
+import { Button, Separator, Tooltip, TooltipContent, TooltipTrigger } from '@gv-tech/ui-web';
+import { SiGithub, SiLinkedin, SiX } from 'react-icons/si';
+
+export function Footer() {
+  return (
+    <footer className="border-t bg-muted/30">
+      <div className="p-8 space-y-6">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {/* Brand */}
+          <div className="space-y-3">
+            <h3 className="font-semibold">GV Tech Design System</h3>
+            <p className="text-sm text-muted-foreground">
+              A comprehensive React component library for building modern applications.
+            </p>
+          </div>
+
+          {/* Resources */}
+          <div className="space-y-3">
+            <h4 className="font-medium text-sm">Resources</h4>
+            <ul className="space-y-2 text-sm text-muted-foreground">
+              <li>
+                <a
+                  href="https://github.com/Garcia-Ventures/gvtech-design"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:text-foreground transition-colors"
+                >
+                  GitHub Repository
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://www.npmjs.com/package/@gv-tech/design-system"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:text-foreground transition-colors"
+                >
+                  NPM Package
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://ui.shadcn.com"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:text-foreground transition-colors"
+                >
+                  shadcn/ui
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://reactnativereusables.com/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:text-foreground transition-colors"
+                >
+                  React Native Reusables
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          <div className="space-y-3">
+            <h4 className="font-medium text-sm">Connect</h4>
+            <div className="flex items-center space-x-2">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground" asChild>
+                    <a
+                      href="https://github.com/Garcia-Ventures"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      aria-label="GitHub"
+                    >
+                      <SiGithub className="h-5 w-5" />
+                    </a>
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>GitHub</TooltipContent>
+              </Tooltip>
+
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground" asChild>
+                    <a
+                      href="https://twitter.com/garciaericn"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      aria-label="X (formerly Twitter)"
+                    >
+                      <SiX className="h-4 w-4" />
+                    </a>
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>X (formerly Twitter)</TooltipContent>
+              </Tooltip>
+
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground" asChild>
+                    <a
+                      href="https://www.linkedin.com/in/garciaericn/"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      aria-label="LinkedIn"
+                    >
+                      <SiLinkedin className="h-5 w-5" />
+                    </a>
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>LinkedIn</TooltipContent>
+              </Tooltip>
+            </div>
+          </div>
+        </div>
+
+        <Separator />
+
+        <div className="flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-muted-foreground">
+          <p>© GVTech 2026. All rights reserved.</p>
+          <p>
+            Built with{' '}
+            <a
+              href="https://ui.shadcn.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="underline underline-offset-4 hover:text-foreground"
+            >
+              shadcn/ui
+            </a>{' '}
+            and{' '}
+            <a
+              href="https://tailwindcss.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="underline underline-offset-4 hover:text-foreground"
+            >
+              Tailwind CSS
+            </a>
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/apps/playground-web/src/components/docs/PropsTable.tsx

@@ -0,0 +1,43 @@
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@gv-tech/ui-web';
+
+export interface PropDefinition {
+  name: string;
+  type: string;
+  defaultValue?: string;
+  description: string;
+  required?: boolean;
+}
+
+interface PropsTableProps {
+  props: PropDefinition[];
+}
+
+export function PropsTable({ props }: PropsTableProps) {
+  return (
+    <div className="my-6 w-full overflow-y-auto">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Prop</TableHead>
+            <TableHead>Type</TableHead>
+            <TableHead>Default</TableHead>
+            <TableHead>Description</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {props.map((prop) => (
+            <TableRow key={prop.name}>
+              <TableCell className="font-mono text-sm font-semibold">
+                {prop.name}
+                {prop.required && <span className="ml-1 text-destructive">*</span>}
+              </TableCell>
+              <TableCell className="font-mono text-xs text-muted-foreground">{prop.type}</TableCell>
+              <TableCell className="font-mono text-xs text-muted-foreground">{prop.defaultValue || '-'}</TableCell>
+              <TableCell className="text-sm text-muted-foreground">{prop.description}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

package/apps/playground-web/src/components/docs/Search.tsx

@@ -0,0 +1,75 @@
+import { docConfig } from '@/config/docs';
+import {
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  Search,
+  SearchTrigger,
+} from '@gv-tech/ui-web';
+import * as React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+interface SearchContextType {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+const SearchContext = React.createContext<SearchContextType | undefined>(undefined);
+
+export function DocSearchProvider({ children }: { children: React.ReactNode }) {
+  const [open, setOpen] = React.useState(false);
+  const navigate = useNavigate();
+
+  const onSelect = React.useCallback(
+    (href: string) => {
+      setOpen(false);
+      navigate(`/docs/${href}`);
+    },
+    [navigate],
+  );
+
+  return (
+    <SearchContext.Provider value={{ open, setOpen }}>
+      {children}
+      <Search open={open} onOpenChange={setOpen}>
+        <CommandInput placeholder="Search documentation..." />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          {docConfig.map((category) => (
+            <CommandGroup key={category.title} heading={category.title}>
+              {category.items.map((item) => (
+                <CommandItem key={item.href} value={item.title} onSelect={() => onSelect(item.href)}>
+                  {item.title}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          ))}
+        </CommandList>
+      </Search>
+    </SearchContext.Provider>
+  );
+}
+
+interface DocSearchProps {
+  variant?: 'default' | 'compact';
+  className?: string;
+  placeholder?: string;
+}
+
+export function DocSearch({ variant = 'default', className, placeholder = 'Search documentation...' }: DocSearchProps) {
+  const context = React.useContext(SearchContext);
+  if (!context) {
+    throw new Error('DocSearch must be used within a DocSearchProvider');
+  }
+
+  return (
+    <SearchTrigger
+      onClick={() => context.setOpen(true)}
+      variant={variant}
+      className={className}
+      placeholder={placeholder}
+    />
+  );
+}

package/apps/playground-web/src/components/docs/Sidebar.tsx

@@ -0,0 +1,77 @@
+import { docConfig } from '@/config/docs';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ScrollArea, cn } from '@gv-tech/ui-web';
+import { NavLink } from 'react-router-dom';
+import { version } from '../../../../../package.json';
+
+interface SidebarProps {
+  className?: string;
+  onLinkClick?: () => void;
+}
+
+export function Sidebar({ className, onLinkClick }: SidebarProps) {
+  return (
+    <div className={cn('w-64 border-r bg-card flex flex-col h-full', className)}>
+      <div className="p-6 h-14 flex items-center border-b shrink-0">
+        <div className="flex items-center gap-2 font-bold text-xl">
+          <div className="h-6 w-6 rounded bg-primary flex items-center justify-center text-primary-foreground text-xs">
+            GV
+          </div>
+          GVTech Design
+        </div>
+        <div className="ml-auto flex flex-col items-end gap-0.5">
+          <span className="text-[10px] text-muted-foreground font-mono">v{version}</span>
+        </div>
+      </div>
+
+      <ScrollArea className="flex-1">
+        <div className="p-4">
+          <Accordion type="multiple" defaultValue={docConfig.map((c) => c.title)} className="w-full">
+            {docConfig.map((category) => {
+              const items = category.items;
+              const filteredItems = items; // Show all items regardless of platform
+
+              return (
+                <AccordionItem value={category.title} key={category.title} className="border-none">
+                  <AccordionTrigger className="py-2 text-sm font-semibold hover:no-underline">
+                    {category.title}
+                  </AccordionTrigger>
+                  <AccordionContent className="pb-2">
+                    <div className="flex flex-col space-y-1">
+                      {filteredItems.map((item) => {
+                        const isUniversal =
+                          category.title !== 'Getting Started' &&
+                          item.platforms.includes('web') &&
+                          item.platforms.includes('native');
+                        return (
+                          <NavLink
+                            key={item.href}
+                            to={`/docs/${item.href}`}
+                            onClick={onLinkClick}
+                            className={({ isActive }) =>
+                              cn(
+                                'group px-2 py-1.5 text-sm rounded-md transition-colors hover:bg-muted/50 text-muted-foreground flex items-center justify-between',
+                                isActive && 'bg-accent text-accent-foreground font-medium',
+                              )
+                            }
+                          >
+                            <span>{item.title}</span>
+                            {isUniversal && (
+                              <span
+                                className="h-1.5 w-1.5 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]"
+                                title="Universal Component (available on both Web & Native)"
+                              />
+                            )}
+                          </NavLink>
+                        );
+                      })}
+                    </div>
+                  </AccordionContent>
+                </AccordionItem>
+              );
+            })}
+          </Accordion>
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}

package/apps/playground-web/src/components/docs/ThemeToggle.tsx

@@ -0,0 +1,19 @@
+import { Button } from '@gv-tech/ui-web';
+import { Moon, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+      aria-label="Toggle theme"
+    >
+      <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+    </Button>
+  );
+}

package/apps/playground-web/src/components/docs/index.ts

@@ -0,0 +1,9 @@
+export { CodeBlock } from './CodeBlock';
+export { CombinedDocsLayout } from './CombinedDocsLayout';
+export { ComponentSection, ComponentShowcase } from './ComponentShowcase';
+export { ErrorBoundary } from './ErrorBoundary';
+export { Footer } from './Footer';
+export { PropsTable, type PropDefinition } from './PropsTable';
+export { DocSearch, DocSearchProvider } from './Search';
+export { Sidebar } from './Sidebar';
+export { ThemeToggle } from './ThemeToggle';