@gv-tech/design-system 2.5.0 → 2.5.2

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

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

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

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

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

@@ -1,16 +0,0 @@
-{
-  "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

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

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

@@ -1,13 +0,0 @@
-{
-  "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

@@ -1,41 +0,0 @@
-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';
-          }
-        },
-      },
-    },
-  },
-});