@vendure/dashboard 3.5.0-minor-202510031341 → 3.5.0-minor-202510161257

package/src/lib/components/ui/pagination.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+    Pagination,
+    PaginationContent,
+    PaginationEllipsis,
+    PaginationItem,
+    PaginationLink,
+    PaginationNext,
+    PaginationPrevious,
+} from './pagination.js';
+
+const meta = {
+    title: 'UI/Pagination',
+    component: Pagination,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    render: () => (
+        <Pagination>
+            <PaginationContent>
+                <PaginationItem>
+                    <PaginationPrevious href="#" />
+                </PaginationItem>
+                <PaginationItem>
+                    <PaginationLink href="#">1</PaginationLink>
+                </PaginationItem>
+                <PaginationItem>
+                    <PaginationLink href="#" isActive>
+                        2
+                    </PaginationLink>
+                </PaginationItem>
+                <PaginationItem>
+                    <PaginationLink href="#">3</PaginationLink>
+                </PaginationItem>
+                <PaginationItem>
+                    <PaginationEllipsis />
+                </PaginationItem>
+                <PaginationItem>
+                    <PaginationNext href="#" />
+                </PaginationItem>
+            </PaginationContent>
+        </Pagination>
+    ),
+};

package/src/lib/components/ui/password-input.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { PasswordInput } from './password-input.js';
+
+const meta = {
+    title: 'UI/Password Input',
+    component: PasswordInput,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the input is disabled',
+        },
+    },
+} satisfies Meta<typeof PasswordInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    args: {
+        placeholder: 'Enter password...',
+        disabled: false,
+    },
+    render: args => <PasswordInput {...args} className="w-[300px]" />,
+};

package/src/lib/components/ui/password-input.tsx

@@ -0,0 +1,33 @@
+import { t } from '@lingui/react/macro';
+import { Eye, EyeOff } from 'lucide-react';
+import * as React from 'react';
+
+import {
+    InputGroup,
+    InputGroupAddon,
+    InputGroupButton,
+    InputGroupInput,
+} from './input-group.js';
+
+type PasswordInputProps = Readonly<Omit<React.ComponentProps<'input'>, 'type'>>;
+
+function PasswordInput({ ...props }: PasswordInputProps) {
+    const [showPassword, setShowPassword] = React.useState(false);
+
+    return (
+        <InputGroup>
+            <InputGroupInput type={showPassword ? 'text' : 'password'} {...props} />
+            <InputGroupAddon align="inline-end">
+                <InputGroupButton
+                    size="icon-xs"
+                    onClick={() => setShowPassword(!showPassword)}
+                    aria-label={showPassword ? t`Hide password` : t`Show password`}
+                >
+                    {showPassword ? <EyeOff /> : <Eye />}
+                </InputGroupButton>
+            </InputGroupAddon>
+        </InputGroup>
+    );
+}
+
+export { PasswordInput };

package/src/lib/components/ui/popover.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj} from '@storybook/react-vite';
+import { Button } from './button.js';
+import { Popover, PopoverContent, PopoverTrigger } from './popover.js';
+
+const meta = {
+    title: 'UI/Popover',
+    component: Popover,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof Popover>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    render: () => (
+        <Popover>
+            <PopoverTrigger asChild>
+                <Button variant="outline">Open popover</Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-80">
+                <div className="grid gap-4">
+                    <div className="space-y-2">
+                        <h4 className="font-medium leading-none">Dimensions</h4>
+                        <p className="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
+                    </div>
+                </div>
+            </PopoverContent>
+        </Popover>
+    ),
+};

package/src/lib/components/ui/progress.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Progress } from './progress.js';
+
+const meta = {
+    title: 'UI/Progress',
+    component: Progress,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        value: {
+            control: { type: 'range', min: 0, max: 100, step: 1 },
+            description: 'Progress value (0-100)',
+        },
+    },
+} satisfies Meta<typeof Progress>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    args: {
+        value: 60,
+    },
+    render: args => <Progress {...args} className="w-[300px]" />,
+};

package/src/lib/components/ui/radio-group.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Label } from './label.js';
+import { RadioGroup, RadioGroupItem } from './radio-group.js';
+
+const meta = {
+    title: 'UI/Radio Group',
+    component: RadioGroup,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof RadioGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    render: () => (
+        <RadioGroup defaultValue="option-one">
+            <div className="flex items-center space-x-2">
+                <RadioGroupItem value="option-one" id="option-one" />
+                <Label htmlFor="option-one">Option One</Label>
+            </div>
+            <div className="flex items-center space-x-2">
+                <RadioGroupItem value="option-two" id="option-two" />
+                <Label htmlFor="option-two">Option Two</Label>
+            </div>
+            <div className="flex items-center space-x-2">
+                <RadioGroupItem value="option-three" id="option-three" />
+                <Label htmlFor="option-three">Option Three</Label>
+            </div>
+        </RadioGroup>
+    ),
+};

package/src/lib/components/ui/resizable.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from './resizable.js';
+
+const meta = {
+    title: 'UI/Resizable',
+    component: ResizablePanelGroup,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof ResizablePanelGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    render: () => (
+        <ResizablePanelGroup direction="horizontal" className="w-[600px] h-[200px] rounded-lg border">
+            <ResizablePanel defaultSize={50}>
+                <div className="flex h-full items-center justify-center p-6">
+                    <span className="font-semibold">Left Panel</span>
+                </div>
+            </ResizablePanel>
+            <ResizableHandle />
+            <ResizablePanel defaultSize={50}>
+                <div className="flex h-full items-center justify-center p-6">
+                    <span className="font-semibold">Right Panel</span>
+                </div>
+            </ResizablePanel>
+        </ResizablePanelGroup>
+    ),
+};

package/src/lib/components/ui/scroll-area.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ScrollArea } from './scroll-area.js';
+import { Separator } from './separator.js';
+
+const meta = {
+    title: 'UI/Scroll Area',
+    component: ScrollArea,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof ScrollArea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    render: () => (
+        <ScrollArea className="h-72 w-48 rounded-md border">
+            <div className="p-4">
+                <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
+                {Array.from({ length: 50 }).map((_, i) => (
+                    <div key={i}>
+                        <div className="text-sm">Tag {i + 1}</div>
+                        <Separator className="my-2" />
+                    </div>
+                ))}
+            </div>
+        </ScrollArea>
+    ),
+};

package/src/lib/components/ui/select.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from './select.js';
+
+const meta = {
+    title: 'UI/Select',
+    component: Select,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof Select>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    render: () => (
+        <Select defaultValue="option1">
+            <SelectTrigger className="w-[200px]">
+                <SelectValue placeholder="Select an option" />
+            </SelectTrigger>
+            <SelectContent>
+                <SelectItem value="option1">Option 1</SelectItem>
+                <SelectItem value="option2">Option 2</SelectItem>
+                <SelectItem value="option3">Option 3</SelectItem>
+                <SelectItem value="option4">Option 4</SelectItem>
+            </SelectContent>
+        </Select>
+    ),
+};

package/src/lib/components/ui/separator.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Separator } from './separator.js';
+
+const meta = {
+    title: 'UI/Separator',
+    component: Separator,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof Separator>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    render: () => (
+        <div className="w-[300px]">
+            <div className="space-y-1">
+                <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
+                <p className="text-sm text-muted-foreground">
+                    An open-source UI component library.
+                </p>
+            </div>
+            <Separator className="my-4" />
+            <div className="flex h-5 items-center space-x-4 text-sm">
+                <div>Blog</div>
+                <Separator orientation="vertical" />
+                <div>Docs</div>
+                <Separator orientation="vertical" />
+                <div>Source</div>
+            </div>
+        </div>
+    ),
+};

package/src/lib/components/ui/sheet.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from './button.js';
+import {
+    Sheet,
+    SheetClose,
+    SheetContent,
+    SheetDescription,
+    SheetFooter,
+    SheetHeader,
+    SheetTitle,
+    SheetTrigger,
+} from './sheet.js';
+
+const meta = {
+    title: 'UI/Sheet',
+    component: Sheet,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof Sheet>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    render: () => (
+        <Sheet>
+            <SheetTrigger asChild>
+                <Button>Open Sheet</Button>
+            </SheetTrigger>
+            <SheetContent>
+                <SheetHeader>
+                    <SheetTitle>Edit profile</SheetTitle>
+                    <SheetDescription>
+                        Make changes to your profile here. Click save when you're done.
+                    </SheetDescription>
+                </SheetHeader>
+                <div className="grid gap-4 py-4">
+                    <p>Sheet content goes here</p>
+                </div>
+                <SheetFooter>
+                    <SheetClose asChild>
+                        <Button type="submit">Save changes</Button>
+                    </SheetClose>
+                </SheetFooter>
+            </SheetContent>
+        </Sheet>
+    ),
+};

package/src/lib/components/ui/sidebar-context.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+export type SidebarContext = {
+    state: 'expanded' | 'collapsed';
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+};
+
+// This is split into a separate file from `sidebar.tsx` because having them in the same
+// file causes the app to break on HMR in dev mode. It relates to this issue:
+// https://github.com/vitejs/vite/issues/3301#issuecomment-1080030773
+export const SidebarContext = React.createContext<SidebarContext | null>(null);

package/src/lib/components/ui/sidebar.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Slot } from '@radix-ui/react-slot';
-import { VariantProps, cva } from 'class-variance-authority';
+import { cva, VariantProps } from 'class-variance-authority';
 import { PanelLeftIcon } from 'lucide-react';
 import * as React from 'react';
 import { MouseEvent } from 'react';
@@ -10,6 +10,7 @@ import { Button } from '@/vdb/components/ui/button.js';
 import { Input } from '@/vdb/components/ui/input.js';
 import { Separator } from '@/vdb/components/ui/separator.js';
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/vdb/components/ui/sheet.js';
+import { SidebarContext } from '@/vdb/components/ui/sidebar-context.js';
 import { Skeleton } from '@/vdb/components/ui/skeleton.js';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/vdb/components/ui/tooltip.js';
 import { useIsMobile } from '@/vdb/hooks/use-mobile.js';
@@ -22,18 +23,6 @@ const SIDEBAR_WIDTH_MOBILE = '18rem';
 const SIDEBAR_WIDTH_ICON = '3rem';
 const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
 
-type SidebarContext = {
-    state: 'expanded' | 'collapsed';
-    open: boolean;
-    setOpen: (open: boolean) => void;
-    openMobile: boolean;
-    setOpenMobile: (open: boolean) => void;
-    isMobile: boolean;
-    toggleSidebar: () => void;
-};
-
-const SidebarContext = React.createContext<SidebarContext | null>(null);
-
 function useSidebar() {
     const context = React.useContext(SidebarContext);
     if (!context) {

package/src/lib/components/ui/skeleton.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Skeleton } from './skeleton.js';
+
+const meta = {
+    title: 'UI/Skeleton',
+    component: Skeleton,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    render: () => (
+        <div className="flex items-center space-x-4">
+            <Skeleton className="h-12 w-12 rounded-full" />
+            <div className="space-y-2">
+                <Skeleton className="h-4 w-[250px]" />
+                <Skeleton className="h-4 w-[200px]" />
+            </div>
+        </div>
+    ),
+};

package/src/lib/components/ui/slider.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Slider } from './slider.js';
+
+const meta = {
+    title: 'UI/Slider',
+    component: Slider,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        defaultValue: {
+            control: { type: 'array' },
+            description: 'Default value',
+        },
+        max: {
+            control: 'number',
+            description: 'Maximum value',
+        },
+        step: {
+            control: 'number',
+            description: 'Step increment',
+        },
+    },
+} satisfies Meta<typeof Slider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    args: {
+        defaultValue: [50],
+        max: 100,
+        step: 1,
+    },
+    render: args => <Slider {...args} className="w-[300px]" />,
+};

package/src/lib/components/ui/switch.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Switch } from './switch.js';
+
+const meta = {
+    title: 'UI/Switch',
+    component: Switch,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the switch is disabled',
+        },
+        checked: {
+            control: 'boolean',
+            description: 'Whether the switch is checked',
+        },
+    },
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    args: {
+        checked: false,
+        disabled: false,
+    },
+};

package/src/lib/components/ui/table.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from './table.js';
+
+const meta = {
+    title: 'UI/Table',
+    component: Table,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof Table>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    render: () => (
+        <Table className="w-[500px]">
+            <TableHeader>
+                <TableRow>
+                    <TableHead>Name</TableHead>
+                    <TableHead>Email</TableHead>
+                    <TableHead>Role</TableHead>
+                </TableRow>
+            </TableHeader>
+            <TableBody>
+                <TableRow>
+                    <TableCell>John Doe</TableCell>
+                    <TableCell>john@example.com</TableCell>
+                    <TableCell>Admin</TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell>Jane Smith</TableCell>
+                    <TableCell>jane@example.com</TableCell>
+                    <TableCell>User</TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell>Bob Johnson</TableCell>
+                    <TableCell>bob@example.com</TableCell>
+                    <TableCell>User</TableCell>
+                </TableRow>
+            </TableBody>
+        </Table>
+    ),
+};

package/src/lib/components/ui/tabs.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs.js';
+
+const meta = {
+    title: 'UI/Tabs',
+    component: Tabs,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    render: () => (
+        <Tabs defaultValue="tab1" className="w-[400px]">
+            <TabsList>
+                <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+                <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+                <TabsTrigger value="tab3">Tab 3</TabsTrigger>
+            </TabsList>
+            <TabsContent value="tab1">Content for Tab 1</TabsContent>
+            <TabsContent value="tab2">Content for Tab 2</TabsContent>
+            <TabsContent value="tab3">Content for Tab 3</TabsContent>
+        </Tabs>
+    ),
+};

package/src/lib/components/ui/textarea.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Textarea } from './textarea.js';
+
+const meta = {
+    title: 'UI/Textarea',
+    component: Textarea,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the textarea is disabled',
+        },
+    },
+} satisfies Meta<typeof Textarea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    args: {
+        placeholder: 'Type your message here...',
+        disabled: false,
+    },
+    render: args => <Textarea {...args} className="w-[400px]" />,
+};