@gv-tech/design-system 0.9.0 → 1.1.0

package/src/pages/components/ToggleDocs.tsx

@@ -0,0 +1,59 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { Toggle } from '@/components/ui/toggle';
+import { Bold, Italic, Underline } from 'lucide-react';
+
+export function ToggleDocs() {
+  return (
+    <ComponentSection title="Toggle" description="A two-state button that can be either on or off.">
+      <ComponentShowcase
+        title="Default"
+        description="A basic toggle button."
+        code={`<Toggle aria-label="Toggle bold">
+  <Bold className="h-4 w-4" />
+</Toggle>`}
+      >
+        <Toggle aria-label="Toggle bold">
+          <Bold className="h-4 w-4" />
+        </Toggle>
+      </ComponentShowcase>
+
+      <ComponentShowcase
+        title="Variants"
+        description="Toggle with outline variant."
+        code={`<Toggle variant="outline" aria-label="Toggle italic">
+  <Italic className="h-4 w-4" />
+</Toggle>`}
+      >
+        <Toggle variant="outline" aria-label="Toggle italic">
+          <Italic className="h-4 w-4" />
+        </Toggle>
+      </ComponentShowcase>
+
+      <ComponentShowcase
+        title="With Text"
+        description="Toggle with text content."
+        code={`<Toggle aria-label="Toggle underline">
+  <Underline className="h-4 w-4 mr-2" />
+  Underline
+</Toggle>`}
+      >
+        <Toggle aria-label="Toggle underline">
+          <Underline className="h-4 w-4 mr-2" />
+          Underline
+        </Toggle>
+      </ComponentShowcase>
+
+      <ComponentShowcase
+        title="Disabled"
+        description="A disabled toggle."
+        code={`<Toggle disabled aria-label="Toggle bold">
+  <Bold className="h-4 w-4" />
+</Toggle>`}
+      >
+        <Toggle disabled aria-label="Toggle bold">
+          <Bold className="h-4 w-4" />
+        </Toggle>
+      </ComponentShowcase>
+    </ComponentSection>
+  );
+}

package/src/pages/components/ToggleGroupDocs.tsx

@@ -0,0 +1,93 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { AlignCenter, AlignLeft, AlignRight, Bold, Italic, Underline } from 'lucide-react';
+
+export function ToggleGroupDocs() {
+  return (
+    <ComponentSection title="Toggle Group" description="A set of two-state buttons that can be toggled on or off.">
+      <ComponentShowcase
+        title="Single"
+        description="Only one item can be pressed at a time."
+        code={`<ToggleGroup type="single">
+  <ToggleGroupItem value="left" aria-label="Left aligned">
+    <AlignLeft className="h-4 w-4" />
+  </ToggleGroupItem>
+  <ToggleGroupItem value="center" aria-label="Center aligned">
+    <AlignCenter className="h-4 w-4" />
+  </ToggleGroupItem>
+  <ToggleGroupItem value="right" aria-label="Right aligned">
+    <AlignRight className="h-4 w-4" />
+  </ToggleGroupItem>
+</ToggleGroup>`}
+      >
+        <ToggleGroup type="single">
+          <ToggleGroupItem value="left" aria-label="Left aligned">
+            <AlignLeft className="h-4 w-4" />
+          </ToggleGroupItem>
+          <ToggleGroupItem value="center" aria-label="Center aligned">
+            <AlignCenter className="h-4 w-4" />
+          </ToggleGroupItem>
+          <ToggleGroupItem value="right" aria-label="Right aligned">
+            <AlignRight className="h-4 w-4" />
+          </ToggleGroupItem>
+        </ToggleGroup>
+      </ComponentShowcase>
+
+      <ComponentShowcase
+        title="Multiple"
+        description="Multiple items can be pressed at the same time."
+        code={`<ToggleGroup type="multiple">
+  <ToggleGroupItem value="bold" aria-label="Toggle bold">
+    <Bold className="h-4 w-4" />
+  </ToggleGroupItem>
+  <ToggleGroupItem value="italic" aria-label="Toggle italic">
+    <Italic className="h-4 w-4" />
+  </ToggleGroupItem>
+  <ToggleGroupItem value="underline" aria-label="Toggle underline">
+    <Underline className="h-4 w-4" />
+  </ToggleGroupItem>
+</ToggleGroup>`}
+      >
+        <ToggleGroup type="multiple">
+          <ToggleGroupItem value="bold" aria-label="Toggle bold">
+            <Bold className="h-4 w-4" />
+          </ToggleGroupItem>
+          <ToggleGroupItem value="italic" aria-label="Toggle italic">
+            <Italic className="h-4 w-4" />
+          </ToggleGroupItem>
+          <ToggleGroupItem value="underline" aria-label="Toggle underline">
+            <Underline className="h-4 w-4" />
+          </ToggleGroupItem>
+        </ToggleGroup>
+      </ComponentShowcase>
+
+      <ComponentShowcase
+        title="Outline Variant"
+        description="Toggle group with outline styling."
+        code={`<ToggleGroup variant="outline" type="single">
+  <ToggleGroupItem value="left" aria-label="Left aligned">
+    <AlignLeft className="h-4 w-4" />
+  </ToggleGroupItem>
+  <ToggleGroupItem value="center" aria-label="Center aligned">
+    <AlignCenter className="h-4 w-4" />
+  </ToggleGroupItem>
+  <ToggleGroupItem value="right" aria-label="Right aligned">
+    <AlignRight className="h-4 w-4" />
+  </ToggleGroupItem>
+</ToggleGroup>`}
+      >
+        <ToggleGroup variant="outline" type="single">
+          <ToggleGroupItem value="left" aria-label="Left aligned">
+            <AlignLeft className="h-4 w-4" />
+          </ToggleGroupItem>
+          <ToggleGroupItem value="center" aria-label="Center aligned">
+            <AlignCenter className="h-4 w-4" />
+          </ToggleGroupItem>
+          <ToggleGroupItem value="right" aria-label="Right aligned">
+            <AlignRight className="h-4 w-4" />
+          </ToggleGroupItem>
+        </ToggleGroup>
+      </ComponentShowcase>
+    </ComponentSection>
+  );
+}

package/src/pages/components/TooltipDocs.tsx

@@ -0,0 +1,38 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+
+export function TooltipDocs() {
+  return (
+    <ComponentSection
+      title="Tooltip"
+      description="A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it."
+    >
+      <ComponentShowcase
+        title="Default"
+        description="A basic tooltip."
+        code={`<TooltipProvider>
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <Button variant="outline">Hover me</Button>
+    </TooltipTrigger>
+    <TooltipContent>
+      <p>Add to library</p>
+    </TooltipContent>
+  </Tooltip>
+</TooltipProvider>`}
+      >
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="outline">Hover me</Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Add to library</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </ComponentShowcase>
+    </ComponentSection>
+  );
+}

package/src/pages/index.ts

@@ -0,0 +1,49 @@
+// Getting Started
+export { GettingStartedPage, InstallationPage } from './GettingStarted';
+
+// Component Docs
+export { AccordionDocs } from './components/AccordionDocs';
+export { AlertDialogDocs } from './components/AlertDialogDocs';
+export { AlertDocs } from './components/AlertDocs';
+export { AspectRatioDocs } from './components/AspectRatioDocs';
+export { AvatarDocs } from './components/AvatarDocs';
+export { BadgeDocs } from './components/BadgeDocs';
+export { BreadcrumbDocs } from './components/BreadcrumbDocs';
+export { ButtonDocs } from './components/ButtonDocs';
+export { CalendarDocs } from './components/CalendarDocs';
+export { CardDocs } from './components/CardDocs';
+export { CarouselDocs } from './components/CarouselDocs';
+export { ChartDocs } from './components/ChartDocs';
+export { CheckboxDocs } from './components/CheckboxDocs';
+export { CollapsibleDocs } from './components/CollapsibleDocs';
+export { CommandDocs } from './components/CommandDocs';
+export { ContextMenuDocs } from './components/ContextMenuDocs';
+export { DialogDocs } from './components/DialogDocs';
+export { DrawerDocs } from './components/DrawerDocs';
+export { DropdownMenuDocs } from './components/DropdownMenuDocs';
+export { FormDocs } from './components/FormDocs';
+export { HoverCardDocs } from './components/HoverCardDocs';
+export { InputDocs } from './components/InputDocs';
+export { LabelDocs } from './components/LabelDocs';
+export { MenubarDocs } from './components/MenubarDocs';
+export { NavigationMenuDocs } from './components/NavigationMenuDocs';
+export { PaginationDocs } from './components/PaginationDocs';
+export { PopoverDocs } from './components/PopoverDocs';
+export { ProgressDocs } from './components/ProgressDocs';
+export { RadioGroupDocs } from './components/RadioGroupDocs';
+export { ResizableDocs } from './components/ResizableDocs';
+export { ScrollAreaDocs } from './components/ScrollAreaDocs';
+export { SelectDocs } from './components/SelectDocs';
+export { SeparatorDocs } from './components/SeparatorDocs';
+export { SheetDocs } from './components/SheetDocs';
+export { SkeletonDocs } from './components/SkeletonDocs';
+export { SliderDocs } from './components/SliderDocs';
+export { SonnerDocs } from './components/SonnerDocs';
+export { SwitchDocs } from './components/SwitchDocs';
+export { TableDocs } from './components/TableDocs';
+export { TabsDocs } from './components/TabsDocs';
+export { TextareaDocs } from './components/TextareaDocs';
+export { ToastDocs } from './components/ToastDocs';
+export { ToggleDocs } from './components/ToggleDocs';
+export { ToggleGroupDocs } from './components/ToggleGroupDocs';
+export { TooltipDocs } from './components/TooltipDocs';

package/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "target": "ESNext",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
     "moduleResolution": "bundler",
@@ -13,8 +13,12 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
-  "include": ["src", ".storybook"],
+  "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

package/tsconfig.node.json

@@ -4,7 +4,8 @@
     "skipLibCheck": true,
     "module": "ESNext",
     "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "types": ["node"]
   },
   "include": ["vite.config.ts"]
 }

package/vite.config.ts

@@ -1,27 +1,41 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
+import react from '@vitejs/plugin-react-swc';
 import { resolve } from 'path';
+import { defineConfig } from 'vite';
+
+const isLibrary = process.env.VITE_LIB === 'true';
 
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+    },
+  },
   build: {
     sourcemap: true,
-    lib: {
-      entry: resolve(__dirname, 'src/index.ts'),
-      name: 'GvtechDesign',
-      fileName: 'index',
-      formats: ['es', 'cjs'],
-    },
+    outDir: isLibrary ? 'dist' : 'dist-site',
+    // Only empty the directory when building the site.
+    // For the library, we want to keep the types generated by tsc.
+    emptyOutDir: !isLibrary,
+    lib: isLibrary
+      ? {
+          entry: resolve(__dirname, 'src/index.ts'),
+          name: 'GvtechDesign',
+          // Matches the names in package.json
+          fileName: (format) => `index.${format === 'es' ? 'es' : 'cjs'}.js`,
+          formats: ['es', 'cjs'],
+        }
+      : undefined,
     rollupOptions: {
-      external: ['react', 'react-dom', 'styled-components', 'polished', 'prop-types'],
+      external: isLibrary ? ['react', 'react-dom', 'prop-types'] : [],
       output: {
-        globals: {
-          react: 'React',
-          'react-dom': 'ReactDOM',
-          'styled-components': 'styled',
-          polished: 'polished',
-          'prop-types': 'PropTypes',
-        },
+        globals: isLibrary
+          ? {
+              react: 'React',
+              'react-dom': 'ReactDOM',
+              'prop-types': 'PropTypes',
+            }
+          : {},
         manualChunks(id) {
           if (id.includes('node_modules')) {
             if (id.includes('axe-core')) return 'axe';

package/wrangler.toml

@@ -0,0 +1,22 @@
+name = "gvtech-design"
+compatibility_date = "2024-11-01"
+compatibility_flags = ["nodejs_compat"]
+pages_build_output_dir = "dist-site"
+
+[vars]
+NODE_VERSION = "24"
+APP_ENV = "production"
+
+[env.preview]
+name = "gvtech-design-preview"
+
+[env.preview.vars]
+NODE_VERSION = "24"
+APP_ENV = "preview"
+
+[env.production]
+name = "gvtech-design"
+
+[env.production.vars]
+NODE_VERSION = "24"
+APP_ENV = "production"

package/.storybook/.preview-head.html

@@ -1 +0,0 @@
-<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,700,800,900" />

package/.storybook/main.ts

@@ -1,38 +0,0 @@
-import type { UserConfig } from 'vite';
-import type { StorybookConfig } from '@storybook/react-vite';
-
-export default {
-  stories: ['../src/Intro.stories.tsx', '../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
-  staticDirs: [{ from: '../public', to: '/public' }],
-  addons: ['@storybook/addon-links', '@storybook/addon-a11y', '@storybook/addon-docs'],
-
-  framework: {
-    name: '@storybook/react-vite',
-    options: {
-      typescript: {
-        check: true,
-        // Use react-docgen-typescript for TypeScript prop documentation in Vite-based Storybook
-        // This leverages Storybook's built-in integration instead of the webpack-only plugin
-        reactDocgen: 'react-docgen-typescript',
-        reactDocgenTypescriptOptions: {
-          shouldExtractLiteralValuesFromEnum: true,
-          shouldRemoveUndefinedFromOptional: true,
-          propFilter: (prop: unknown) => {
-            const p = prop as { parent?: { fileName?: string } } | undefined;
-            return p?.parent ? !/node_modules/.test(p.parent.fileName || '') : true;
-          },
-        },
-      },
-    },
-  },
-
-  features: {
-    interactionsDebugger: true,
-  },
-
-  async viteFinal(config: UserConfig) {
-    // Use the project's Vite config as-is to avoid duplicating or re-injecting runtime plugins
-    // (adding the project's `react()` plugin here previously caused duplicate injections)
-    return config;
-  },
-} as StorybookConfig;

package/.storybook/preview.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import type { StoryFn, Preview, StoryContext } from '@storybook/react';
-import { GlobalStyle } from '../src/shared/global';
-
-export const decorators: Preview['decorators'] = [
-  (Story: StoryFn, context: StoryContext) => (
-    <>
-      <GlobalStyle />
-      {Story(context.args, context)}
-    </>
-  ),
-];
-
-export const parameters: Preview['parameters'] = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-  docs: {
-    codePanel: true,
-  },
-  a11y: {
-    config: {},
-    options: {},
-  },
-};
-export const tags: string[] = ['autodocs'];