@gv-tech/design-system 1.0.0 → 1.2.0

package/src/pages/components/InputDocs.tsx

@@ -1,26 +1,19 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 
 export function InputDocs() {
   return (
-    <ComponentSection title="Input" description="Displays a form input field for collecting user text input.">
+    <ComponentSection
+      title="Input"
+      description="Displays a form input field or a component that looks like an input field."
+    >
       <ComponentShowcase
         title="Default"
-        description="The default input field."
-        code={`<Input type="text" placeholder="Enter text..." />`}
-      >
-        <Input type="text" placeholder="Enter text..." className="max-w-xs" />
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="With Label"
-        description="Pair inputs with labels for accessibility."
-        code={`<div className="grid w-full max-w-sm items-center gap-1.5">
-  <Label htmlFor="email">Email</Label>
-  <Input type="email" id="email" placeholder="Email" />
-</div>`}
+        description="A default input field."
+        code={`<Input type="email" placeholder="Email" />`}
       >
         <div className="grid w-full max-w-sm items-center gap-1.5">
           <Label htmlFor="email">Email</Label>
@@ -29,8 +22,8 @@ export function InputDocs() {
       </ComponentShowcase>
 
       <ComponentShowcase
-        title="File Input"
-        description="Input for file uploads."
+        title="File"
+        description="A file input field."
         code={`<div className="grid w-full max-w-sm items-center gap-1.5">
   <Label htmlFor="picture">Picture</Label>
   <Input id="picture" type="file" />
@@ -44,15 +37,18 @@ export function InputDocs() {
 
       <ComponentShowcase
         title="Disabled"
-        description="Disabled state prevents user interaction."
-        code={`<Input disabled type="text" placeholder="Disabled" />`}
+        description="A disabled input field."
+        code={`<Input disabled type="email" placeholder="Email" />`}
       >
-        <Input disabled type="text" placeholder="Disabled" className="max-w-xs" />
+        <div className="grid w-full max-w-sm items-center gap-1.5">
+          <Label htmlFor="email-disabled">Email</Label>
+          <Input disabled type="email" id="email-disabled" placeholder="Email" />
+        </div>
       </ComponentShowcase>
 
       <ComponentShowcase
         title="With Button"
-        description="Combine input with a button for search patterns."
+        description="An input field with a button."
         code={`<div className="flex w-full max-w-sm items-center space-x-2">
   <Input type="email" placeholder="Email" />
   <Button type="submit">Subscribe</Button>
@@ -63,6 +59,41 @@ export function InputDocs() {
           <Button type="submit">Subscribe</Button>
         </div>
       </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">The Input component extends the standard HTML input element.</p>
+        <PropsTable
+          props={[
+            {
+              name: 'type',
+              type: 'string',
+              defaultValue: '"text"',
+              description: 'The type of input to render.',
+            },
+            {
+              name: 'placeholder',
+              type: 'string',
+              description: 'The placeholder text for the input.',
+            },
+            {
+              name: 'value',
+              type: 'string | number | readonly string[]',
+              description: 'The value of the input.',
+            },
+            {
+              name: 'disabled',
+              type: 'boolean',
+              description: 'Whether the input is disabled.',
+            },
+            {
+              name: 'onChange',
+              type: '(event: React.ChangeEvent<HTMLInputElement>) => void',
+              description: 'Event handler called when the value changes.',
+            },
+          ]}
+        />
+      </div>
     </ComponentSection>
   );
 }

package/src/pages/components/LabelDocs.tsx

@@ -1,23 +1,54 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { Input } from '@/components/ui/input';
+import { PropsTable } from '@/components/docs/PropsTable';
+import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
 
 export function LabelDocs() {
   return (
-    <ComponentSection title="Label" description="Renders an accessible label associated with form controls.">
+    <ComponentSection title="Label" description="Renders an accessible label associated with controls.">
       <ComponentShowcase
         title="Default"
-        description="A basic label with an input."
-        code={`<div className="grid w-full max-w-sm items-center gap-1.5">
-  <Label htmlFor="email">Email</Label>
-  <Input type="email" id="email" placeholder="Email" />
+        description="A default label."
+        code={`<div className="flex items-center space-x-2">
+  <Checkbox id="terms" />
+  <Label htmlFor="terms">Accept terms and conditions</Label>
 </div>`}
       >
-        <div className="grid w-full max-w-sm items-center gap-1.5">
-          <Label htmlFor="email-label">Email</Label>
-          <Input type="email" id="email-label" placeholder="Email" />
+        <div className="flex items-center space-x-2">
+          <Checkbox id="terms" />
+          <Label htmlFor="terms">Accept terms and conditions</Label>
         </div>
       </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The Label component is built on top of{' '}
+          <a
+            href="https://www.radix-ui.com/primitives/docs/components/label"
+            className="underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Radix UI Label
+          </a>
+          .
+        </p>
+        <PropsTable
+          props={[
+            {
+              name: 'htmlFor',
+              type: 'string',
+              description: 'The id of the element the label is associated with.',
+            },
+            {
+              name: 'asChild',
+              type: 'boolean',
+              description: 'Change the default rendered element for the one passed as a child.',
+            },
+          ]}
+        />
+      </div>
     </ComponentSection>
   );
 }

package/src/pages/components/MenubarDocs.tsx

@@ -1,9 +1,13 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
 import {
   Menubar,
+  MenubarCheckboxItem,
   MenubarContent,
   MenubarItem,
   MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
   MenubarSeparator,
   MenubarShortcut,
   MenubarSub,
@@ -14,10 +18,13 @@ import {
 
 export function MenubarDocs() {
   return (
-    <ComponentSection title="Menubar" description="A visually persistent menu common in desktop applications.">
+    <ComponentSection
+      title="Menubar"
+      description="A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands."
+    >
       <ComponentShowcase
         title="Default"
-        description="A menubar with submenus and shortcuts."
+        description="A standard menubar."
         code={`<Menubar>
   <MenubarMenu>
     <MenubarTrigger>File</MenubarTrigger>
@@ -25,11 +32,23 @@ export function MenubarDocs() {
       <MenubarItem>
         New Tab <MenubarShortcut>⌘T</MenubarShortcut>
       </MenubarItem>
-      <MenubarItem>New Window</MenubarItem>
+      <MenubarItem>
+        New Window <MenubarShortcut>⌘N</MenubarShortcut>
+      </MenubarItem>
+      <MenubarItem disabled>New Incognito Window</MenubarItem>
       <MenubarSeparator />
-      <MenubarItem>Share</MenubarItem>
+      <MenubarSub>
+        <MenubarSubTrigger>Share</MenubarSubTrigger>
+        <MenubarSubContent>
+          <MenubarItem>Email link</MenubarItem>
+          <MenubarItem>Messages</MenubarItem>
+          <MenubarItem>Notes</MenubarItem>
+        </MenubarSubContent>
+      </MenubarSub>
       <MenubarSeparator />
-      <MenubarItem>Print</MenubarItem>
+      <MenubarItem>
+        Print... <MenubarShortcut>⌘P</MenubarShortcut>
+      </MenubarItem>
     </MenubarContent>
   </MenubarMenu>
   <MenubarMenu>
@@ -46,21 +65,50 @@ export function MenubarDocs() {
         <MenubarSubTrigger>Find</MenubarSubTrigger>
         <MenubarSubContent>
           <MenubarItem>Search the web</MenubarItem>
+          <MenubarSeparator />
           <MenubarItem>Find...</MenubarItem>
-          <MenubarItem>Find and Replace</MenubarItem>
+          <MenubarItem>Find Next</MenubarItem>
+          <MenubarItem>Find Previous</MenubarItem>
         </MenubarSubContent>
       </MenubarSub>
+      <MenubarSeparator />
+      <MenubarItem>Cut</MenubarItem>
+      <MenubarItem>Copy</MenubarItem>
+      <MenubarItem>Paste</MenubarItem>
     </MenubarContent>
   </MenubarMenu>
   <MenubarMenu>
     <MenubarTrigger>View</MenubarTrigger>
     <MenubarContent>
-      <MenubarItem>
-        Zoom In <MenubarShortcut>⌘+</MenubarShortcut>
+      <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
+      <MenubarCheckboxItem checked>
+        Always Show Full URLs
+      </MenubarCheckboxItem>
+      <MenubarSeparator />
+      <MenubarItem inset>
+        Reload <MenubarShortcut>⌘R</MenubarShortcut>
       </MenubarItem>
-      <MenubarItem>
-        Zoom Out <MenubarShortcut>⌘-</MenubarShortcut>
+      <MenubarItem disabled inset>
+        Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
       </MenubarItem>
+      <MenubarSeparator />
+      <MenubarItem inset>Toggle Fullscreen</MenubarItem>
+      <MenubarSeparator />
+      <MenubarItem inset>Hide Sidebar</MenubarItem>
+    </MenubarContent>
+  </MenubarMenu>
+  <MenubarMenu>
+    <MenubarTrigger>Profiles</MenubarTrigger>
+    <MenubarContent>
+      <MenubarRadioGroup value="benoit">
+        <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+        <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+        <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
+      </MenubarRadioGroup>
+      <MenubarSeparator />
+      <MenubarItem inset>Edit...</MenubarItem>
+      <MenubarSeparator />
+      <MenubarItem inset>Add Profile...</MenubarItem>
     </MenubarContent>
   </MenubarMenu>
 </Menubar>`}
@@ -72,11 +120,23 @@ export function MenubarDocs() {
               <MenubarItem>
                 New Tab <MenubarShortcut>⌘T</MenubarShortcut>
               </MenubarItem>
-              <MenubarItem>New Window</MenubarItem>
+              <MenubarItem>
+                New Window <MenubarShortcut>⌘N</MenubarShortcut>
+              </MenubarItem>
+              <MenubarItem disabled>New Incognito Window</MenubarItem>
               <MenubarSeparator />
-              <MenubarItem>Share</MenubarItem>
+              <MenubarSub>
+                <MenubarSubTrigger>Share</MenubarSubTrigger>
+                <MenubarSubContent>
+                  <MenubarItem>Email link</MenubarItem>
+                  <MenubarItem>Messages</MenubarItem>
+                  <MenubarItem>Notes</MenubarItem>
+                </MenubarSubContent>
+              </MenubarSub>
               <MenubarSeparator />
-              <MenubarItem>Print</MenubarItem>
+              <MenubarItem>
+                Print... <MenubarShortcut>⌘P</MenubarShortcut>
+              </MenubarItem>
             </MenubarContent>
           </MenubarMenu>
           <MenubarMenu>
@@ -93,25 +153,138 @@ export function MenubarDocs() {
                 <MenubarSubTrigger>Find</MenubarSubTrigger>
                 <MenubarSubContent>
                   <MenubarItem>Search the web</MenubarItem>
+                  <MenubarSeparator />
                   <MenubarItem>Find...</MenubarItem>
-                  <MenubarItem>Find and Replace</MenubarItem>
+                  <MenubarItem>Find Next</MenubarItem>
+                  <MenubarItem>Find Previous</MenubarItem>
                 </MenubarSubContent>
               </MenubarSub>
+              <MenubarSeparator />
+              <MenubarItem>Cut</MenubarItem>
+              <MenubarItem>Copy</MenubarItem>
+              <MenubarItem>Paste</MenubarItem>
             </MenubarContent>
           </MenubarMenu>
           <MenubarMenu>
             <MenubarTrigger>View</MenubarTrigger>
             <MenubarContent>
-              <MenubarItem>
-                Zoom In <MenubarShortcut>⌘+</MenubarShortcut>
+              <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
+              <MenubarCheckboxItem checked>Always Show Full URLs</MenubarCheckboxItem>
+              <MenubarSeparator />
+              <MenubarItem inset>
+                Reload <MenubarShortcut>⌘R</MenubarShortcut>
               </MenubarItem>
-              <MenubarItem>
-                Zoom Out <MenubarShortcut>⌘-</MenubarShortcut>
+              <MenubarItem disabled inset>
+                Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
               </MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem inset>Toggle Fullscreen</MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem inset>Hide Sidebar</MenubarItem>
+            </MenubarContent>
+          </MenubarMenu>
+          <MenubarMenu>
+            <MenubarTrigger>Profiles</MenubarTrigger>
+            <MenubarContent>
+              <MenubarRadioGroup value="benoit">
+                <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+                <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+                <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
+              </MenubarRadioGroup>
+              <MenubarSeparator />
+              <MenubarItem inset>Edit...</MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem inset>Add Profile...</MenubarItem>
             </MenubarContent>
           </MenubarMenu>
         </Menubar>
       </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The Menubar component is built on top of{' '}
+          <a
+            href="https://www.radix-ui.com/primitives/docs/components/menubar"
+            className="underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Radix UI Menubar
+          </a>
+          .
+        </p>
+
+        <h4 className="text-lg font-medium mt-6">Menubar (Root)</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'defaultValue',
+              type: 'string',
+              description: 'The value of the menu item that should be active when initially rendered.',
+            },
+            {
+              name: 'value',
+              type: 'string',
+              description: 'The controlled value of the active menu item.',
+            },
+            {
+              name: 'onValueChange',
+              type: '(value: string) => void',
+              description: 'Event handler called when the value changes.',
+            },
+            {
+              name: 'loop',
+              type: 'boolean',
+              defaultValue: 'false',
+              description: 'Whether keyboard navigation should loop from last item to first, and vice versa.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">MenubarMenu</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'value',
+              type: 'string',
+              description: 'A unique value that identifies the menu.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">MenubarCheckboxItem</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'checked',
+              type: 'boolean | "indeterminate"',
+              description: 'The controlled checked state of the item.',
+            },
+            {
+              name: 'onCheckedChange',
+              type: '(checked: boolean) => void',
+              description: 'Event handler called when the checked state changes.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">MenubarRadioGroup</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'value',
+              type: 'string',
+              description: 'The value of the selected item in the group.',
+            },
+            {
+              name: 'onValueChange',
+              type: '(value: string) => void',
+              description: 'Event handler called when the value changes.',
+            },
+          ]}
+        />
+      </div>
     </ComponentSection>
   );
 }