@gv-tech/design-system 2.5.0 → 2.5.2

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

@@ -1,96 +0,0 @@
-import {
-  Alert,
-  AlertDescription,
-  AlertTitle,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-  cn,
-} from '@gv-tech/ui-web';
-import { Info } from 'lucide-react';
-import * as React from 'react';
-import { CodeBlock } from './CodeBlock';
-import { PlatformContext } from './CombinedDocsLayout';
-
-interface ComponentShowcaseProps {
-  title: string;
-  description?: string;
-  code: string;
-  children?: React.ReactNode;
-  className?: string;
-}
-
-export function ComponentShowcase({ title, description, code, children, className }: ComponentShowcaseProps) {
-  const platform = React.useContext(PlatformContext);
-  const isNative = platform === 'native';
-
-  return (
-    <Card className={cn('overflow-hidden', className)}>
-      <CardHeader>
-        <CardTitle className="text-lg">{title}</CardTitle>
-        {description && <CardDescription>{description}</CardDescription>}
-      </CardHeader>
-      <CardContent className="p-0">
-        <Tabs defaultValue={isNative && !children ? 'code' : 'preview'} className="w-full">
-          <div className="border-b px-4 md:px-6">
-            <TabsList className="h-10 bg-transparent p-0">
-              <TabsTrigger
-                value="preview"
-                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent"
-              >
-                Preview
-              </TabsTrigger>
-              <TabsTrigger
-                value="code"
-                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent"
-              >
-                Code
-              </TabsTrigger>
-            </TabsList>
-          </div>
-          <TabsContent value="preview" className="p-4 md:p-6 mt-0">
-            {isNative && !children ? (
-              <Alert variant="info" className="bg-muted/50 border-none shadow-none">
-                <Info className="h-4 w-4" />
-                <AlertTitle>Native Preview Unavailable</AlertTitle>
-                <AlertDescription>
-                  This is a React Native component. Interactive previews are currently only available for web
-                  components. Please switch to the <strong>Code</strong> tab to see the implementation.
-                </AlertDescription>
-              </Alert>
-            ) : (
-              <div className="flex flex-wrap gap-4 items-center overflow-x-auto">{children}</div>
-            )}
-          </TabsContent>
-          <TabsContent value="code" className="mt-0">
-            <CodeBlock code={code} className="rounded-none border-0" />
-          </TabsContent>
-        </Tabs>
-      </CardContent>
-    </Card>
-  );
-}
-
-interface ComponentSectionProps {
-  title: string;
-  description?: string;
-  children: React.ReactNode;
-}
-
-export function ComponentSection({ title, description, children }: ComponentSectionProps) {
-  return (
-    <div className="space-y-6">
-      <div className="space-y-2">
-        <h1 className="text-2xl md:text-3xl font-bold tracking-tight">{title}</h1>
-        {description && <p className="text-base md:text-lg text-muted-foreground">{description}</p>}
-      </div>
-      <div className="space-y-6">{children}</div>
-    </div>
-  );
-}

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

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

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

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

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

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

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

@@ -1,9 +0,0 @@
-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';