@a2v2ai/uikit 0.0.36 → 0.0.38

package/Loader/Loader.stories.tsx

@@ -0,0 +1,170 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Button } from "../Button/Button"
+import { Flex } from "../Flex/Flex"
+import { Typography } from "../Typography/Typography"
+import { Loader } from "./Loader"
+
+const meta: Meta<typeof Loader> = {
+  title: "Components/Loader",
+  component: Loader,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["mini", "small", "regular", "large"],
+      description: "The size of the loader",
+    },
+    color: {
+      control: "select",
+      options: ["main", "grey", "white", "current"],
+      description: "The color of the loader",
+    },
+    label: {
+      control: "text",
+      description: "Accessibility label for the loader",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Loader>
+
+export const Default: Story = {
+  args: {
+    size: "regular",
+    color: "main",
+  },
+}
+
+export const Mini: Story = {
+  args: {
+    size: "mini",
+    color: "main",
+  },
+}
+
+export const Small: Story = {
+  args: {
+    size: "small",
+    color: "main",
+  },
+}
+
+export const Regular: Story = {
+  args: {
+    size: "regular",
+    color: "main",
+  },
+}
+
+export const Large: Story = {
+  args: {
+    size: "large",
+    color: "main",
+  },
+}
+
+export const Grey: Story = {
+  args: {
+    size: "regular",
+    color: "grey",
+  },
+}
+
+export const White: Story = {
+  args: {
+    size: "regular",
+    color: "white",
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+  },
+  decorators: [
+    (Story) => (
+      <Flex className="bg-main-600 p-4 rounded-lg">
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+
+export const InButton: Story = {
+  render: () => (
+    <Button disabled>
+      <Loader size="small" color="current" className="mr-2" />
+      Loading...
+    </Button>
+  ),
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <Flex gap={8}>
+      {/* Sizes */}
+      <Flex gap={4}>
+        <Typography variant="subtitle1" color="main-700">Sizes</Typography>
+        <Flex direction="row" align="center" gap={6}>
+          <Flex align="center" gap={2}>
+            <Loader size="mini" />
+            <Typography variant="body3" color="main-500">Mini</Typography>
+          </Flex>
+          <Flex align="center" gap={2}>
+            <Loader size="small" />
+            <Typography variant="body3" color="main-500">Small</Typography>
+          </Flex>
+          <Flex align="center" gap={2}>
+            <Loader size="regular" />
+            <Typography variant="body3" color="main-500">Regular</Typography>
+          </Flex>
+          <Flex align="center" gap={2}>
+            <Loader size="large" />
+            <Typography variant="body3" color="main-500">Large</Typography>
+          </Flex>
+        </Flex>
+      </Flex>
+
+      {/* Colors */}
+      <Flex gap={4}>
+        <Typography variant="subtitle1" color="main-700">Colors</Typography>
+        <Flex direction="row" align="center" gap={6}>
+          <Flex align="center" gap={2}>
+            <Loader color="main" />
+            <Typography variant="body3" color="main-500">Main</Typography>
+          </Flex>
+          <Flex align="center" gap={2}>
+            <Loader color="grey" />
+            <Typography variant="body3" color="main-500">Grey</Typography>
+          </Flex>
+          <Flex align="center" gap={2} className="bg-main-600 p-3 rounded-lg">
+            <Loader color="white" />
+            <Typography variant="body3" className="text-white">White</Typography>
+          </Flex>
+        </Flex>
+      </Flex>
+
+      {/* Usage Examples */}
+      <Flex gap={4}>
+        <Typography variant="subtitle1" color="main-700">Usage Examples</Typography>
+        <Flex gap={4}>
+          <Flex direction="row" align="center" gap={4}>
+            <Button disabled>
+              <Loader size="small" color="current" className="mr-2" />
+              Loading...
+            </Button>
+            <Typography variant="body3" color="main-500">In Button</Typography>
+          </Flex>
+          <Flex direction="row" align="center" gap={4}>
+            <Flex direction="row" align="center" gap={2} className="text-main-600">
+              <Loader size="small" color="current" />
+              <Typography variant="body2">Processing...</Typography>
+            </Flex>
+            <Typography variant="body3" color="main-500">Inline with text</Typography>
+          </Flex>
+        </Flex>
+      </Flex>
+    </Flex>
+  ),
+}

package/Loader/Loader.tsx

@@ -0,0 +1,62 @@
+import * as React from "react"
+import { Loader2 } from "lucide-react"
+import { cva } from "class-variance-authority"
+
+import { Flex } from "../Flex/Flex"
+import { Typography } from "../Typography/Typography"
+import { cn } from "../lib/utils"
+
+type LoaderSize = "mini" | "small" | "regular" | "large"
+type LoaderColor = "main" | "grey" | "white" | "current"
+
+const loaderVariants = cva(
+  "animate-spin",
+  {
+    variants: {
+      size: {
+        mini: "size-3",
+        small: "size-4",
+        regular: "size-6",
+        large: "size-8",
+      },
+      color: {
+        main: "text-main-600",
+        grey: "text-grey-600",
+        white: "text-white",
+        current: "text-current",
+      },
+    },
+    defaultVariants: {
+      size: "regular",
+      color: "main",
+    },
+  }
+)
+
+export type LoaderProps = Omit<React.HTMLAttributes<HTMLDivElement>, "color"> & {
+  size?: LoaderSize
+  color?: LoaderColor
+  /** Optional label for accessibility */
+  label?: string
+}
+
+const Loader = React.forwardRef<HTMLDivElement, LoaderProps>(
+  ({ className, size, color, label = "Loading...", ...props }, ref) => (
+    <Flex
+      ref={ref}
+      role="status"
+      aria-label={label}
+      align="center"
+      justify="center"
+      className={cn("inline-flex", className)}
+      {...props}
+    >
+      <Loader2 className={cn(loaderVariants({ size, color }))} />
+      <Typography className="sr-only">{label}</Typography>
+    </Flex>
+  )
+)
+Loader.displayName = "Loader"
+
+export { Loader, loaderVariants }
+export type { LoaderSize, LoaderColor }

package/Menubar/Menubar.stories.tsx

@@ -0,0 +1,382 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Flex } from "../Flex/Flex"
+import { Typography } from "../Typography/Typography"
+import {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+  MenubarLabel,
+} from "./Menubar"
+
+const meta: Meta<typeof Menubar> = {
+  title: "Components/Menubar",
+  component: Menubar,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof Menubar>
+
+export const Default: Story = {
+  render: () => (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            New Tab <MenubarShortcut>Ctrl+T</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            New Window <MenubarShortcut>Ctrl+N</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled>New Incognito Window</MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Share</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Email link</MenubarItem>
+              <MenubarItem>Messages</MenubarItem>
+              <MenubarItem>Notes</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>
+            Print... <MenubarShortcut>Ctrl+P</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Edit</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            Undo <MenubarShortcut>Ctrl+Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Redo <MenubarShortcut>Ctrl+Y</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Find</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Search the web</MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem>Find...</MenubarItem>
+              <MenubarItem>Find Next</MenubarItem>
+              <MenubarItem>Find Previous</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>
+            Cut <MenubarShortcut>Ctrl+X</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Copy <MenubarShortcut>Ctrl+C</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Paste <MenubarShortcut>Ctrl+V</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>View</MenubarTrigger>
+        <MenubarContent>
+          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
+          <MenubarCheckboxItem checked>
+            Always Show Full URLs
+          </MenubarCheckboxItem>
+          <MenubarSeparator />
+          <MenubarItem>
+            Reload <MenubarShortcut>Ctrl+R</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled>
+            Force Reload <MenubarShortcut>Ctrl+Shift+R</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>Toggle Fullscreen</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>Hide Sidebar</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Profiles</MenubarTrigger>
+        <MenubarContent>
+          <MenubarRadioGroup value="andy">
+            <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+            <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+            <MenubarRadioItem value="luis">Luis</MenubarRadioItem>
+          </MenubarRadioGroup>
+          <MenubarSeparator />
+          <MenubarItem>Edit...</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>Add Profile...</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  ),
+}
+
+export const Simple: Story = {
+  render: () => (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>New</MenubarItem>
+          <MenubarItem>Open</MenubarItem>
+          <MenubarItem>Save</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>Exit</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Edit</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>Undo</MenubarItem>
+          <MenubarItem>Redo</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>Cut</MenubarItem>
+          <MenubarItem>Copy</MenubarItem>
+          <MenubarItem>Paste</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Help</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>Documentation</MenubarItem>
+          <MenubarItem>About</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  ),
+}
+
+export const WithLabels: Story = {
+  render: () => (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>Actions</MenubarTrigger>
+        <MenubarContent>
+          <MenubarLabel>File Actions</MenubarLabel>
+          <MenubarItem>New File</MenubarItem>
+          <MenubarItem>New Folder</MenubarItem>
+          <MenubarSeparator />
+          <MenubarLabel>Edit Actions</MenubarLabel>
+          <MenubarItem>Rename</MenubarItem>
+          <MenubarItem>Delete</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  ),
+}
+
+export const WithCheckboxes: Story = {
+  render: () => (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>Options</MenubarTrigger>
+        <MenubarContent>
+          <MenubarCheckboxItem checked>Show Toolbar</MenubarCheckboxItem>
+          <MenubarCheckboxItem checked>Show Sidebar</MenubarCheckboxItem>
+          <MenubarCheckboxItem>Show Status Bar</MenubarCheckboxItem>
+          <MenubarSeparator />
+          <MenubarCheckboxItem>Enable Spell Check</MenubarCheckboxItem>
+          <MenubarCheckboxItem checked>Auto Save</MenubarCheckboxItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  ),
+}
+
+export const WithRadioGroup: Story = {
+  render: () => (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>Theme</MenubarTrigger>
+        <MenubarContent>
+          <MenubarRadioGroup value="system">
+            <MenubarRadioItem value="light">Light</MenubarRadioItem>
+            <MenubarRadioItem value="dark">Dark</MenubarRadioItem>
+            <MenubarRadioItem value="system">System</MenubarRadioItem>
+          </MenubarRadioGroup>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Font Size</MenubarTrigger>
+        <MenubarContent>
+          <MenubarRadioGroup value="medium">
+            <MenubarRadioItem value="small">Small</MenubarRadioItem>
+            <MenubarRadioItem value="medium">Medium</MenubarRadioItem>
+            <MenubarRadioItem value="large">Large</MenubarRadioItem>
+          </MenubarRadioGroup>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  ),
+}
+
+export const WithSubmenus: Story = {
+  render: () => (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>Insert</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>Text</MenubarItem>
+          <MenubarSub>
+            <MenubarSubTrigger>Shape</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Rectangle</MenubarItem>
+              <MenubarItem>Circle</MenubarItem>
+              <MenubarItem>Triangle</MenubarItem>
+              <MenubarSub>
+                <MenubarSubTrigger>More Shapes</MenubarSubTrigger>
+                <MenubarSubContent>
+                  <MenubarItem>Star</MenubarItem>
+                  <MenubarItem>Heart</MenubarItem>
+                  <MenubarItem>Arrow</MenubarItem>
+                </MenubarSubContent>
+              </MenubarSub>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSub>
+            <MenubarSubTrigger>Image</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>From File...</MenubarItem>
+              <MenubarItem>From URL...</MenubarItem>
+              <MenubarItem>From Clipboard</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarItem>Table</MenubarItem>
+          <MenubarItem>Chart</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  ),
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <Flex gap={8}>
+      <Flex gap={4}>
+        <Typography variant="subtitle1" color="main-700">
+          Full Featured Menubar
+        </Typography>
+        <Menubar>
+          <MenubarMenu>
+            <MenubarTrigger>File</MenubarTrigger>
+            <MenubarContent>
+              <MenubarItem>
+                New <MenubarShortcut>Ctrl+N</MenubarShortcut>
+              </MenubarItem>
+              <MenubarItem>
+                Open <MenubarShortcut>Ctrl+O</MenubarShortcut>
+              </MenubarItem>
+              <MenubarItem>
+                Save <MenubarShortcut>Ctrl+S</MenubarShortcut>
+              </MenubarItem>
+              <MenubarSeparator />
+              <MenubarSub>
+                <MenubarSubTrigger>Export</MenubarSubTrigger>
+                <MenubarSubContent>
+                  <MenubarItem>PDF</MenubarItem>
+                  <MenubarItem>PNG</MenubarItem>
+                  <MenubarItem>JPEG</MenubarItem>
+                </MenubarSubContent>
+              </MenubarSub>
+              <MenubarSeparator />
+              <MenubarItem>Exit</MenubarItem>
+            </MenubarContent>
+          </MenubarMenu>
+          <MenubarMenu>
+            <MenubarTrigger>Edit</MenubarTrigger>
+            <MenubarContent>
+              <MenubarItem>
+                Undo <MenubarShortcut>Ctrl+Z</MenubarShortcut>
+              </MenubarItem>
+              <MenubarItem>
+                Redo <MenubarShortcut>Ctrl+Y</MenubarShortcut>
+              </MenubarItem>
+            </MenubarContent>
+          </MenubarMenu>
+          <MenubarMenu>
+            <MenubarTrigger>View</MenubarTrigger>
+            <MenubarContent>
+              <MenubarCheckboxItem checked>Toolbar</MenubarCheckboxItem>
+              <MenubarCheckboxItem>Status Bar</MenubarCheckboxItem>
+              <MenubarSeparator />
+              <MenubarRadioGroup value="100">
+                <MenubarLabel>Zoom</MenubarLabel>
+                <MenubarRadioItem value="50">50%</MenubarRadioItem>
+                <MenubarRadioItem value="100">100%</MenubarRadioItem>
+                <MenubarRadioItem value="150">150%</MenubarRadioItem>
+              </MenubarRadioGroup>
+            </MenubarContent>
+          </MenubarMenu>
+        </Menubar>
+      </Flex>
+
+      <Flex gap={4}>
+        <Typography variant="subtitle1" color="main-700">
+          Minimal Menubar
+        </Typography>
+        <Menubar>
+          <MenubarMenu>
+            <MenubarTrigger>Menu</MenubarTrigger>
+            <MenubarContent>
+              <MenubarItem>Option 1</MenubarItem>
+              <MenubarItem>Option 2</MenubarItem>
+              <MenubarItem>Option 3</MenubarItem>
+            </MenubarContent>
+          </MenubarMenu>
+        </Menubar>
+      </Flex>
+
+      <Flex gap={4}>
+        <Typography variant="subtitle1" color="main-700">
+          Application Menubar
+        </Typography>
+        <Menubar>
+          <MenubarMenu>
+            <MenubarTrigger>App</MenubarTrigger>
+            <MenubarContent>
+              <MenubarItem>About</MenubarItem>
+              <MenubarItem>Preferences</MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem>Quit</MenubarItem>
+            </MenubarContent>
+          </MenubarMenu>
+          <MenubarMenu>
+            <MenubarTrigger>Account</MenubarTrigger>
+            <MenubarContent>
+              <MenubarItem>Profile</MenubarItem>
+              <MenubarItem>Settings</MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem>Sign Out</MenubarItem>
+            </MenubarContent>
+          </MenubarMenu>
+          <MenubarMenu>
+            <MenubarTrigger>Help</MenubarTrigger>
+            <MenubarContent>
+              <MenubarItem>Documentation</MenubarItem>
+              <MenubarItem>Support</MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem>Check for Updates</MenubarItem>
+            </MenubarContent>
+          </MenubarMenu>
+        </Menubar>
+      </Flex>
+    </Flex>
+  ),
+}