@gv-tech/design-system 2.3.0 → 2.5.0

package/apps/playground-web/src/pages/web/TooltipDocs.tsx

@@ -0,0 +1,150 @@
+import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
+import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@gv-tech/ui-web';
+/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
+
+// @ts-ignore
+
+const isNative = false as boolean;
+
+// @ts-ignore
+
+const platform = 'web' as string;
+
+export function TooltipDocs() {
+  return (
+    <>
+      <ComponentShowcase
+        title="Default"
+        description="A default tooltip."
+        code={`<TooltipProvider>
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <Button variant="outline">Hover</Button>
+    </TooltipTrigger>
+    <TooltipContent>
+      <p>Add to library</p>
+    </TooltipContent>
+  </Tooltip>
+</TooltipProvider>`}
+      >
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="outline">Hover</Button>
+            </TooltipTrigger>
+            <TooltipContent>{<p>Add to library</p>}</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The Tooltip component is built on top of{' '}
+          <a
+            href="https://www.radix-ui.com/primitives/docs/components/tooltip"
+            className="underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Radix UI Tooltip
+          </a>
+          .
+        </p>
+
+        <h4 className="text-lg font-medium mt-6">TooltipProvider</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'delayDuration',
+              type: 'number',
+              defaultValue: '700',
+              description: 'The duration from when the mouse enters a tooltip trigger until the tooltip opens.',
+            },
+            {
+              name: 'skipDelayDuration',
+              type: 'number',
+              defaultValue: '300',
+              description: 'How much time a user has to enter another trigger without incurring a delay again.',
+            },
+            {
+              name: 'disableHoverableContent',
+              type: 'boolean',
+              description:
+                'When true, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">Tooltip (Root)</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'defaultOpen',
+              type: 'boolean',
+              description: 'The open state of the tooltip when it is initially rendered.',
+            },
+            {
+              name: 'open',
+              type: 'boolean',
+              description: 'The controlled open state of the tooltip.',
+            },
+            {
+              name: 'onOpenChange',
+              type: '(open: boolean) => void',
+              description: 'Event handler called when the open state of the tooltip changes.',
+            },
+            {
+              name: 'delayDuration',
+              type: 'number',
+              defaultValue: '700',
+              description: 'The duration from when the mouse enters a tooltip trigger until the tooltip opens.',
+            },
+            {
+              name: 'disableHoverableContent',
+              type: 'boolean',
+              description:
+                'When true, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">TooltipContent</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'side',
+              type: '"top" | "right" | "bottom" | "left"',
+              defaultValue: '"top"',
+              description: 'The preferred side of the trigger to render against when open.',
+            },
+            {
+              name: 'sideOffset',
+              type: 'number',
+              description: 'The distance in pixels from the trigger.',
+            },
+            {
+              name: 'align',
+              type: '"start" | "center" | "end"',
+              defaultValue: '"center"',
+              description: 'The preferred alignment against the trigger.',
+            },
+            {
+              name: 'alignOffset',
+              type: 'number',
+              description: 'An offset in pixels from the "start" or "end" alignment options.',
+            },
+            {
+              name: 'avoidCollisions',
+              type: 'boolean',
+              defaultValue: 'true',
+              description:
+                'When true, overrides the side and align preferences to prevent collisions with boundary edges.',
+            },
+          ]}
+        />
+      </div>
+    </>
+  );
+}

package/apps/playground-web/src/pages/web/index.ts

@@ -0,0 +1,47 @@
+export { AccordionDocs as WebAccordionDocs } from './AccordionDocs';
+export { AlertDialogDocs as WebAlertDialogDocs } from './AlertDialogDocs';
+export { AlertDocs as WebAlertDocs } from './AlertDocs';
+export { AspectRatioDocs as WebAspectRatioDocs } from './AspectRatioDocs';
+export { AvatarDocs as WebAvatarDocs } from './AvatarDocs';
+export { BadgeDocs as WebBadgeDocs } from './BadgeDocs';
+export { BreadcrumbDocs as WebBreadcrumbDocs } from './BreadcrumbDocs';
+export { ButtonDocs as WebButtonDocs } from './ButtonDocs';
+export { CalendarDocs as WebCalendarDocs } from './CalendarDocs';
+export { CardDocs as WebCardDocs } from './CardDocs';
+export { CarouselDocs as WebCarouselDocs } from './CarouselDocs';
+export { ChartDocs as WebChartDocs } from './ChartDocs';
+export { CheckboxDocs as WebCheckboxDocs } from './CheckboxDocs';
+export { CollapsibleDocs as WebCollapsibleDocs } from './CollapsibleDocs';
+export { CommandDocs as WebCommandDocs } from './CommandDocs';
+export { ContextMenuDocs as WebContextMenuDocs } from './ContextMenuDocs';
+export { DialogDocs as WebDialogDocs } from './DialogDocs';
+export { DrawerDocs as WebDrawerDocs } from './DrawerDocs';
+export { DropdownMenuDocs as WebDropdownMenuDocs } from './DropdownMenuDocs';
+export { FormDocs as WebFormDocs } from './FormDocs';
+export { HoverCardDocs as WebHoverCardDocs } from './HoverCardDocs';
+export { InputDocs as WebInputDocs } from './InputDocs';
+export { LabelDocs as WebLabelDocs } from './LabelDocs';
+export { MenubarDocs as WebMenubarDocs } from './MenubarDocs';
+export { NavigationMenuDocs as WebNavigationMenuDocs } from './NavigationMenuDocs';
+export { PaginationDocs as WebPaginationDocs } from './PaginationDocs';
+export { PopoverDocs as WebPopoverDocs } from './PopoverDocs';
+export { ProgressDocs as WebProgressDocs } from './ProgressDocs';
+export { RadioGroupDocs as WebRadioGroupDocs } from './RadioGroupDocs';
+export { ResizableDocs as WebResizableDocs } from './ResizableDocs';
+export { ScrollAreaDocs as WebScrollAreaDocs } from './ScrollAreaDocs';
+export { SearchDocs as WebSearchDocs } from './SearchDocs';
+export { SelectDocs as WebSelectDocs } from './SelectDocs';
+export { SeparatorDocs as WebSeparatorDocs } from './SeparatorDocs';
+export { SheetDocs as WebSheetDocs } from './SheetDocs';
+export { SkeletonDocs as WebSkeletonDocs } from './SkeletonDocs';
+export { SliderDocs as WebSliderDocs } from './SliderDocs';
+export { SonnerDocs as WebSonnerDocs } from './SonnerDocs';
+export { SwitchDocs as WebSwitchDocs } from './SwitchDocs';
+export { TableDocs as WebTableDocs } from './TableDocs';
+export { TabsDocs as WebTabsDocs } from './TabsDocs';
+export { TextareaDocs as WebTextareaDocs } from './TextareaDocs';
+export { ThemeToggleDocs as WebThemeToggleDocs } from './ThemeToggleDocs';
+export { ToastDocs as WebToastDocs } from './ToastDocs';
+export { ToggleDocs as WebToggleDocs } from './ToggleDocs';
+export { ToggleGroupDocs as WebToggleGroupDocs } from './ToggleGroupDocs';
+export { TooltipDocs as WebTooltipDocs } from './TooltipDocs';

package/apps/playground-web/src/routes/doc-routes.tsx

@@ -0,0 +1,363 @@
+import * as React from 'react';
+
+export interface DocRoute {
+  path: string;
+  title: string;
+  description: string;
+  web?: React.LazyExoticComponent<React.ComponentType>;
+  native?: React.LazyExoticComponent<React.ComponentType>;
+}
+
+// Helper to lazy load pages
+const web = (name: string) =>
+  React.lazy(() => import('@/pages/web').then((m) => ({ default: (m as Record<string, React.ComponentType>)[name] })));
+const native = (name: string) =>
+  React.lazy(() =>
+    import('@/pages/native').then((m) => ({ default: (m as Record<string, React.ComponentType>)[name] })),
+  );
+
+export const docRoutes: DocRoute[] = [
+  // Layout
+  {
+    path: 'aspect-ratio',
+    title: 'Aspect Ratio',
+    description: 'Displays content within a desired ratio.',
+    web: web('WebAspectRatioDocs'),
+    // Native: not yet implemented
+  },
+  {
+    path: 'resizable',
+    title: 'Resizable',
+    description: 'Accessible resizable panel groups and layouts with keyboard support.',
+    web: web('WebResizableDocs'),
+    // Native: not yet implemented
+  },
+  {
+    path: 'scroll-area',
+    title: 'Scroll-area',
+    description: 'Augments native scroll functionality for custom, cross-browser styling.',
+    web: web('WebScrollAreaDocs'),
+    // Native: not yet implemented
+  },
+
+  // Components
+  {
+    path: 'accordion',
+    title: 'Accordion',
+    description: 'A vertically stacked set of interactive headings that each reveal a section of content.',
+    web: web('WebAccordionDocs'),
+    native: native('NativeAccordionDocs'),
+  },
+  {
+    path: 'alert',
+    title: 'Alert',
+    description: 'Displays a callout for user attention.',
+    web: web('WebAlertDocs'),
+    native: native('NativeAlertDocs'),
+  },
+  {
+    path: 'alert-dialog',
+    title: 'Alert Dialog',
+    description: 'A modal dialog that interrupts the user with important content and expects a response.',
+    web: web('WebAlertDialogDocs'),
+    native: native('NativeAlertDialogDocs'),
+  },
+  {
+    path: 'avatar',
+    title: 'Avatar',
+    description: 'An image element with a fallback for representing the user.',
+    web: web('WebAvatarDocs'),
+    native: native('NativeAvatarDocs'),
+  },
+  {
+    path: 'badge',
+    title: 'Badge',
+    description: 'Displays a badge or a component that looks like a badge.',
+    web: web('WebBadgeDocs'),
+    native: native('NativeBadgeDocs'),
+  },
+  {
+    path: 'breadcrumb',
+    title: 'Breadcrumb',
+    description: 'Displays the path to the current resource using a hierarchy of links.',
+    web: web('WebBreadcrumbDocs'),
+    // Native: not yet implemented
+  },
+  {
+    path: 'button',
+    title: 'Button',
+    description: 'Displays a button or a component that looks like a button.',
+    web: web('WebButtonDocs'),
+    native: native('NativeButtonDocs'),
+  },
+  {
+    path: 'calendar',
+    title: 'Calendar',
+    description: 'A date field component that allows users to enter and edit dates.',
+    web: web('WebCalendarDocs'),
+    // Native: not yet implemented
+  },
+  {
+    path: 'card',
+    title: 'Card',
+    description: 'Displays a card with header, content, and footer.',
+    web: web('WebCardDocs'),
+    native: native('NativeCardDocs'),
+  },
+  {
+    path: 'carousel',
+    title: 'Carousel',
+    description: 'A carousel with next and previous buttons.',
+    web: web('WebCarouselDocs'),
+    // Native: not yet implemented
+  },
+  {
+    path: 'chart',
+    title: 'Chart',
+    description: 'A chart component with various types of charts.',
+    web: web('WebChartDocs'),
+    // Native: not yet implemented
+  },
+  {
+    path: 'checkbox',
+    title: 'Checkbox',
+    description: 'A control that allows the user to toggle between checked and not checked.',
+    web: web('WebCheckboxDocs'),
+    native: native('NativeCheckboxDocs'),
+  },
+  {
+    path: 'collapsible',
+    title: 'Collapsible',
+    description: 'An interactive component which can be expanded or collapsed.',
+    web: web('WebCollapsibleDocs'),
+    native: native('NativeCollapsibleDocs'),
+  },
+  {
+    path: 'command',
+    title: 'Command',
+    description: 'A command menu for running tasks and navigating.',
+    web: web('WebCommandDocs'),
+    // Native: not yet implemented
+  },
+  {
+    path: 'context-menu',
+    title: 'Context Menu',
+    description: 'Displays a menu located at the pointer, triggered by a right-click or a long-press.',
+    web: web('WebContextMenuDocs'),
+    // Native: not yet implemented
+  },
+  {
+    path: 'dialog',
+    title: 'Dialog',
+    description:
+      'A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.',
+    web: web('WebDialogDocs'),
+    native: native('NativeDialogDocs'),
+  },
+  {
+    path: 'drawer',
+    title: 'Drawer',
+    description: 'A responsive drawer component.',
+    web: web('WebDrawerDocs'),
+    // Native: not yet implemented
+  },
+  {
+    path: 'dropdown-menu',
+    title: 'Dropdown Menu',
+    description: 'Displays a menu to the user — such as a set of actions or functions — triggered by a button.',
+    web: web('WebDropdownMenuDocs'),
+    // Native: not yet implemented
+  },
+  {
+    path: 'form',
+    title: 'Form',
+    description: 'Building forms with React Hook Form and Zod.',
+    web: web('WebFormDocs'),
+  },
+  {
+    path: 'hover-card',
+    title: 'Hover Card',
+    description: 'For sighted users to preview content available behind a link.',
+    web: web('WebHoverCardDocs'),
+    // Native: not yet implemented
+  },
+  {
+    path: 'input',
+    title: 'Input',
+    description: 'Displays a form input field or a component that looks like an input field.',
+    web: web('WebInputDocs'),
+    native: native('NativeInputDocs'),
+  },
+  {
+    path: 'label',
+    title: 'Label',
+    description: 'Renders an accessible label associated with a form control.',
+    web: web('WebLabelDocs'),
+    native: native('NativeLabelDocs'),
+  },
+  {
+    path: 'menubar',
+    title: 'Menubar',
+    description:
+      'A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.',
+    web: web('WebMenubarDocs'),
+    // Native: not yet implemented
+  },
+  {
+    path: 'navigation-menu',
+    title: 'Navigation Menu',
+    description: 'A collection of links for navigating websites.',
+    web: web('WebNavigationMenuDocs'),
+    // Native: not yet implemented
+  },
+  {
+    path: 'pagination',
+    title: 'Pagination',
+    description: 'Pagination with next and previous buttons.',
+    web: web('WebPaginationDocs'),
+    // Native: not yet implemented
+  },
+  {
+    path: 'popover',
+    title: 'Popover',
+    description: 'Displays rich content in a portal, triggered by a button.',
+    web: web('WebPopoverDocs'),
+    // Native: not yet implemented
+  },
+  {
+    path: 'progress',
+    title: 'Progress',
+    description:
+      'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',
+    web: web('WebProgressDocs'),
+    // Native: not yet implemented
+  },
+  {
+    path: 'radio-group',
+    title: 'Radio Group',
+    description:
+      'A set of checkable buttons—known as radio buttons—where no more than one button can be checked at a time.',
+    web: web('WebRadioGroupDocs'),
+    native: native('NativeRadioGroupDocs'),
+  },
+  {
+    path: 'select',
+    title: 'Select',
+    description: 'Displays a list of options for the user to pick from—triggered by a button.',
+    web: web('WebSelectDocs'),
+    native: native('NativeSelectDocs'),
+  },
+  {
+    path: 'separator',
+    title: 'Separator',
+    description: 'Visually or semantically separates content.',
+    web: web('WebSeparatorDocs'),
+    native: native('NativeSeparatorDocs'),
+  },
+  {
+    path: 'sheet',
+    title: 'Sheet',
+    description: 'Extends the Dialog component to display content that complements the main content of the screen.',
+    web: web('WebSheetDocs'),
+    native: native('NativeSheetDocs'),
+  },
+  {
+    path: 'skeleton',
+    title: 'Skeleton',
+    description: 'Use to show a placeholder while content is loading.',
+    web: web('WebSkeletonDocs'),
+    native: native('NativeSkeletonDocs'),
+  },
+  {
+    path: 'slider',
+    title: 'Slider',
+    description: 'An input where the user selects a value from within a given range.',
+    web: web('WebSliderDocs'),
+    // Native: not yet implemented
+  },
+  {
+    path: 'sonner',
+    title: 'Sonner',
+    description: 'An opinionated toast component for React.',
+    web: web('WebSonnerDocs'),
+    // Native: not yet implemented (use Toast for native)
+  },
+  {
+    path: 'switch',
+    title: 'Switch',
+    description: 'A control that allows the user to toggle between checked and not checked.',
+    web: web('WebSwitchDocs'),
+    native: native('NativeSwitchDocs'),
+  },
+  {
+    path: 'table',
+    title: 'Table',
+    description: 'A responsive table component.',
+    web: web('WebTableDocs'),
+    native: native('NativeTableDocs'),
+  },
+  {
+    path: 'tabs',
+    title: 'Tabs',
+    description: 'A set of layered sections of content—known as tab panels—that are displayed one at a time.',
+    web: web('WebTabsDocs'),
+    native: native('NativeTabsDocs'),
+  },
+  {
+    path: 'text',
+    title: 'Text',
+    description: 'Typography component for various text styles.',
+    web: web('WebTextDocs'),
+    native: native('NativeTextDocs'),
+  },
+  {
+    path: 'textarea',
+    title: 'Textarea',
+    description: 'Displays a form textarea or a component that looks like a textarea.',
+    web: web('WebTextareaDocs'),
+    native: native('NativeTextareaDocs'),
+  },
+  {
+    path: 'theme-toggle',
+    title: 'Theme Toggle',
+    description: 'A component that allows users to switch between light, dark, and system themes.',
+    web: web('WebThemeToggleDocs'),
+    native: native('NativeThemeToggleDocs'),
+  },
+  {
+    path: 'search',
+    title: 'Search',
+    description: 'A searchable command palette for navigation and actions.',
+    web: web('WebSearchDocs'),
+    native: native('NativeSearchDocs'),
+  },
+  {
+    path: 'toast',
+    title: 'Toast',
+    description: 'A succinct message that is displayed temporarily.',
+    web: web('WebToastDocs'),
+    native: native('NativeToastDocs'),
+  },
+  {
+    path: 'toggle',
+    title: 'Toggle',
+    description: 'A two-state button that can be either on or off.',
+    web: web('WebToggleDocs'),
+    native: native('NativeToggleDocs'),
+  },
+  {
+    path: 'toggle-group',
+    title: 'Toggle Group',
+    description: 'A set of two-state buttons that can be toggled on or off.',
+    web: web('WebToggleGroupDocs'),
+    native: native('NativeToggleGroupDocs'),
+  },
+  {
+    path: 'tooltip',
+    title: 'Tooltip',
+    description:
+      'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',
+    web: web('WebTooltipDocs'),
+    native: native('NativeTooltipDocs'),
+  },
+];

package/apps/playground-web/tailwind.config.js

@@ -0,0 +1,47 @@
+const { theme: designTokens } = require('../../packages/design-tokens/src/theme');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}', '../../packages/ui-web/src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+      },
+      borderRadius: designTokens.light.radius,
+    },
+  },
+  plugins: [],
+};

package/apps/playground-web/tsconfig.app.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "useDefineForClassFields": true,
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/apps/playground-web/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
+}

package/apps/playground-web/tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

package/apps/playground-web/vite.config.ts

@@ -0,0 +1,41 @@
+import react from '@vitejs/plugin-react-swc';
+import { resolve } from 'path';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [react()],
+  define: {
+    global: 'window',
+    __DEV__: JSON.stringify(process.env.NODE_ENV !== 'production'),
+    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
+  },
+  resolve: {
+    alias: [
+      {
+        find: /^react-native$/,
+        replacement: resolve(__dirname, 'src/lib/react-native-shim.js'),
+      },
+      {
+        find: /^react-native\/(.*)$/,
+        replacement: resolve(__dirname, 'src/lib/react-native-shim.js'),
+      },
+      { find: '@', replacement: resolve(__dirname, './src') },
+    ],
+    extensions: ['.web.tsx', '.tsx', '.ts', '.js'],
+  },
+  build: {
+    outDir: 'dist-site',
+    emptyOutDir: true,
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes('node_modules')) {
+            if (id.includes('axe-core')) return 'axe';
+            if (id.includes('react-docgen')) return 'docgen';
+            return 'vendor';
+          }
+        },
+      },
+    },
+  },
+});