@erxes/ui 0.0.0-stage → 3.2.19-2

package/src/components/__stories__/avatar.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Avatar } from 'erxes-ui/components/avatar';
+
+const meta: Meta<typeof Avatar> = {
+  title: 'Components/Avatar',
+  component: Avatar,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'default', 'lg', 'xl'],
+      description: 'Size of the avatar',
+      defaultValue: 'default',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Avatar>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Avatar {...args}>
+      <Avatar.Image src="https://github.com/shadcn.png" alt="User avatar" />
+      <Avatar.Fallback>CN</Avatar.Fallback>
+    </Avatar>
+  ),
+};

package/src/components/__stories__/badge.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Badge } from 'erxes-ui/components/badge';
+
+const meta: Meta<typeof Badge> = {
+  title: 'Components/Badge',
+  component: Badge,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'secondary', 'success', 'warning', 'destructive'],
+      description: 'Visual style of the badge',
+      defaultValue: 'default',
+    },
+    onClose: {
+      control: 'boolean',
+      description: 'Whether to show the close button',
+      defaultValue: false,
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Badge>;
+
+export const Default: Story = {
+  args: {
+    children: 'Badge',
+  },
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="flex gap-2">
+      <Badge variant="default">Default</Badge>
+      <Badge variant="secondary">Secondary</Badge>
+      <Badge variant="success">Success</Badge>
+      <Badge variant="warning">Warning</Badge>
+      <Badge variant="destructive">Destructive</Badge>
+    </div>
+  ),
+};

package/src/components/__stories__/breadcrumb.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Breadcrumb } from '../breadcrumb';
+import { DropdownMenu } from '../dropdown-menu';
+
+const meta: Meta<typeof Breadcrumb> = {
+  title: 'Components/Breadcrumb',
+  component: Breadcrumb,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Breadcrumb>;
+
+export const Default: Story = {
+  render: () => (
+    <Breadcrumb>
+      <Breadcrumb.List>
+        <Breadcrumb.Item>
+          <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+        </Breadcrumb.Item>
+        <Breadcrumb.Separator />
+        <Breadcrumb.Item>
+          <DropdownMenu>
+            <DropdownMenu.Trigger className="flex items-center gap-1">
+              <Breadcrumb.Ellipsis className="h-4 w-4" />
+              <span className="sr-only">Toggle menu</span>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content align="start">
+              <DropdownMenu.Item>Documentation</DropdownMenu.Item>
+              <DropdownMenu.Item>Themes</DropdownMenu.Item>
+              <DropdownMenu.Item>GitHub</DropdownMenu.Item>
+            </DropdownMenu.Content>
+          </DropdownMenu>
+        </Breadcrumb.Item>
+        <Breadcrumb.Separator />
+        <Breadcrumb.Item>
+          <Breadcrumb.Link href="/docs/components">Components</Breadcrumb.Link>
+        </Breadcrumb.Item>
+        <Breadcrumb.Separator />
+        <Breadcrumb.Item>
+          <Breadcrumb.Page>Breadcrumb.</Breadcrumb.Page>
+        </Breadcrumb.Item>
+      </Breadcrumb.List>
+    </Breadcrumb>
+  ),
+};

package/src/components/__stories__/button.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '../button';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+  args: {
+    children: 'Button',
+    variant: 'default',
+    size: 'default',
+  },
+};

package/src/components/__stories__/calendar.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Calendar } from '../calendar';
+import { addDays } from 'date-fns';
+
+const meta: Meta<typeof Calendar> = {
+  title: 'Components/Calendar',
+  component: Calendar,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Calendar>;
+
+export const Default: Story = {
+  args: {
+    mode: 'single',
+    selected: new Date(),
+  },
+};
+
+export const Range: Story = {
+  args: {
+    mode: 'range',
+    selected: {
+      from: new Date(),
+      to: addDays(new Date(), 7),
+    },
+  },
+};
+
+export const Multiple: Story = {
+  args: {
+    mode: 'multiple',
+    selected: [new Date(), addDays(new Date(), 3), addDays(new Date(), 7)],
+  },
+};
+
+export const WithDisabledDates: Story = {
+  args: {
+    mode: 'single',
+    selected: new Date(),
+    disabled: [{ from: addDays(new Date(), 10), to: addDays(new Date(), 15) }],
+  },
+};

package/src/components/__stories__/calendarTwoMonths.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CalendarTwoMonths } from 'erxes-ui/components/calendar';
+import { addDays } from 'date-fns';
+
+const meta: Meta<typeof CalendarTwoMonths> = {
+  title: 'Components/CalendarTwoMonths',
+  component: CalendarTwoMonths,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof CalendarTwoMonths>;
+
+export const Default: Story = {
+  args: {
+    mode: 'single',
+    selected: new Date(),
+  },
+};
+
+export const Range: Story = {
+  args: {
+    mode: 'range',
+    selected: {
+      from: new Date(),
+      to: addDays(new Date(), 14),
+    },
+  },
+};
+
+export const Multiple: Story = {
+  args: {
+    mode: 'multiple',
+    selected: [new Date(), addDays(new Date(), 5), addDays(new Date(), 10)],
+  },
+};
+
+export const WithDisabledDates: Story = {
+  args: {
+    mode: 'single',
+    selected: new Date(),
+    disabled: [{ from: addDays(new Date(), 10), to: addDays(new Date(), 15) }],
+  },
+};

package/src/components/__stories__/card.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Card } from 'erxes-ui/components/card';
+import { Button } from 'erxes-ui/components/button';
+import { Label } from '../label';
+import { Input } from '../input';
+import { Select } from '../select';
+
+const meta: Meta<typeof Card> = {
+  title: 'Components/Card',
+  component: Card,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Card>;
+
+export const Default: Story = {
+  render: () => (
+    <Card className="w-[350px]">
+      <Card.Header>
+        <Card.Title>Create project</Card.Title>
+        <Card.Description>
+          Deploy your new project in one-click.
+        </Card.Description>
+      </Card.Header>
+      <Card.Content>
+        <form>
+          <div className="grid w-full items-center gap-4">
+            <div className="flex flex-col space-y-1.5">
+              <Label htmlFor="name">Name</Label>
+              <Input id="name" placeholder="Name of your project" />
+            </div>
+            <div className="flex flex-col space-y-1.5">
+              <Label htmlFor="framework">Framework</Label>
+              <Select>
+                <Select.Trigger id="framework">
+                  <Select.Value placeholder="Select" />
+                </Select.Trigger>
+                <Select.Content position="popper">
+                  <Select.Item value="next">Next.js</Select.Item>
+                  <Select.Item value="sveltekit">SvelteKit</Select.Item>
+                  <Select.Item value="astro">Astro</Select.Item>
+                  <Select.Item value="nuxt">Nuxt.js</Select.Item>
+                </Select.Content>
+              </Select>
+            </div>
+          </div>
+        </form>
+      </Card.Content>
+      <Card.Footer className="flex justify-between">
+        <Button variant="outline">Cancel</Button>
+        <Button>Deploy</Button>
+      </Card.Footer>
+    </Card>
+  ),
+};

package/src/components/__stories__/checkbox.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Checkbox } from '../checkbox';
+import { Label } from '../label';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    checked: {
+      control: 'select',
+      options: [true, false, 'indeterminate'],
+      description: 'The controlled checked state of the checkbox',
+    },
+    disabled: {
+      control: 'boolean',
+      description:
+        'When true, prevents the user from interacting with the checkbox',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Checkbox>;
+
+export const Default: Story = {
+  render: (args) => <Checkbox {...args} />,
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="flex items-center space-x-2">
+      <Checkbox id="terms" />
+      <Label htmlFor="terms" variant="peer">
+        Accept terms and conditions
+      </Label>
+    </div>
+  ),
+};
+
+export const States: Story = {
+  render: () => (
+    <div className="flex items-center space-x-4">
+      <div className="flex items-center space-x-2">
+        <Checkbox id="checked" checked={true} />
+        <Label htmlFor="checked" variant="peer">
+          Checked
+        </Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <Checkbox id="unchecked" checked={false} />
+        <Label htmlFor="unchecked" variant="peer">
+          Unchecked
+        </Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <Checkbox id="indeterminate" checked="indeterminate" />
+        <Label htmlFor="indeterminate" variant="peer">
+          Indeterminate
+        </Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <Checkbox id="disabled" disabled />
+        <Label htmlFor="disabled" variant="peer">
+          Disabled
+        </Label>
+      </div>
+    </div>
+  ),
+};

package/src/components/__stories__/collapsible.stories.tsx

@@ -0,0 +1,78 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import type { Meta, StoryObj } from '@storybook/react';
+import { Collapsible } from 'erxes-ui/components/collapsible';
+import { Button } from 'erxes-ui/components';
+import { useState } from 'react';
+
+const meta: Meta<typeof Collapsible> = {
+  title: 'Components/Collapsible',
+  component: Collapsible,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    open: {
+      control: 'boolean',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Collapsible>;
+
+export const Default: Story = {
+  render: ({ open }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+      <Collapsible
+        open={open || isOpen}
+        onOpenChange={setIsOpen}
+        className="w-[350px] space-y-2"
+      >
+        <div className="flex items-center justify-between space-x-4 px-4">
+          <h4 className="text-sm font-semibold">
+            @peduarte starred 3 repositories
+          </h4>
+          <Collapsible.Trigger asChild>
+            <Button variant="ghost" size="sm">
+              <Collapsible.TriggerIcon className="h-4 w-4" />
+              <span className="sr-only">Toggle</span>
+            </Button>
+          </Collapsible.Trigger>
+        </div>
+        <div className="rounded-md px-4 py-2 font-mono text-sm shadow-sm">
+          @radix-ui/primitives
+        </div>
+        <Collapsible.Content className="space-y-2">
+          <div className="rounded-md px-4 py-2 font-mono text-sm shadow-sm">
+            @radix-ui/colors
+          </div>
+          <div className="rounded-md px-4 py-2 font-mono text-sm shadow-sm">
+            @stitches/react
+          </div>
+        </Collapsible.Content>
+      </Collapsible>
+    );
+  },
+};
+
+export const WithTriggerButton: Story = {
+  render: () => (
+    <div className="min-h-[500px]">
+      <Collapsible className="w-[350px] space-y-2">
+        <Collapsible.TriggerButton className="px-4">
+          <div className="flex items-center gap-2">
+            <Collapsible.TriggerIcon className="h-4 w-4" />
+            <span>Click to expand</span>
+          </div>
+        </Collapsible.TriggerButton>
+        <Collapsible.Content className="space-y-2 px-4 py-2">
+          <div className="rounded-md px-4 py-3 font-mono text-sm">
+            This content uses the TriggerButton component.
+          </div>
+        </Collapsible.Content>
+      </Collapsible>
+    </div>
+  ),
+};

package/src/components/__stories__/combobox.stories.tsx

@@ -0,0 +1,158 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import type { Meta, StoryObj } from '@storybook/react';
+import { Combobox } from 'erxes-ui/components/combobox';
+import { Popover } from 'erxes-ui/components/popover';
+import { Command } from 'erxes-ui/components/command';
+import { useState } from 'react';
+
+const meta: Meta<typeof Combobox> = {
+  title: 'Components/Combobox',
+  component: Combobox.Trigger,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Combobox>;
+
+const frameworks = [
+  { value: 'next.js', label: 'Next.js' },
+  { value: 'sveltekit', label: 'SvelteKit' },
+  { value: 'nuxt', label: 'Nuxt' },
+  { value: 'remix', label: 'Remix' },
+  { value: 'astro', label: 'Astro' },
+];
+
+export const Default: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    const [value, setValue] = useState('');
+
+    return (
+      <div className="w-[300px]">
+        <Popover open={open} onOpenChange={setOpen}>
+          <Combobox.Trigger>
+            <Combobox.Value value={value} placeholder="Select framework..." />
+          </Combobox.Trigger>
+          <Combobox.Content>
+            <Command>
+              <Command.Input placeholder="Search framework..." />
+              <Command.Empty>No framework found.</Command.Empty>
+              <Command.List>
+                {frameworks.map((framework) => (
+                  <Command.Item
+                    key={framework.value}
+                    value={framework.value}
+                    onSelect={(currentValue) => {
+                      setValue(currentValue === value ? '' : currentValue);
+                      setOpen(false);
+                    }}
+                  >
+                    {framework.label}
+                    <Combobox.Check checked={value === framework.value} />
+                  </Command.Item>
+                ))}
+              </Command.List>
+            </Command>
+          </Combobox.Content>
+        </Popover>
+      </div>
+    );
+  },
+};
+
+export const WithLoading: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+      <div className="w-[300px]">
+        <Popover open={open} onOpenChange={setOpen}>
+          <Combobox.Trigger>
+            <Combobox.Value placeholder="Select framework..." />
+          </Combobox.Trigger>
+          <Combobox.Content>
+            <Command>
+              <Command.Input placeholder="Search framework..." />
+              <Command.List>
+                <Combobox.Empty loading={true} />
+              </Command.List>
+            </Command>
+          </Combobox.Content>
+        </Popover>
+      </div>
+    );
+  },
+};
+
+export const WithError: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+      <div className="w-[300px]">
+        <Popover open={open} onOpenChange={setOpen}>
+          <Combobox.Trigger>
+            <Combobox.Value placeholder="Select framework..." />
+          </Combobox.Trigger>
+          <Combobox.Content>
+            <Command>
+              <Command.Input placeholder="Search framework..." />
+              <Command.List>
+                <Combobox.Empty
+                  error={{ message: 'Failed to load frameworks' } as any}
+                />
+              </Command.List>
+            </Command>
+          </Combobox.Content>
+        </Popover>
+      </div>
+    );
+  },
+};
+
+export const WithFetchMore: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    const [value, setValue] = useState('');
+
+    return (
+      <div className="w-[300px]">
+        <Popover open={open} onOpenChange={setOpen}>
+          <Combobox.Trigger>
+            <Combobox.Value value={value} placeholder="Select framework..." />
+          </Combobox.Trigger>
+          <Combobox.Content>
+            <Command>
+              <Command.Input placeholder="Search framework..." />
+
+              <Command.List>
+                <Command.Empty>No framework found.</Command.Empty>
+                {frameworks.map((framework) => (
+                  <Command.Item
+                    key={framework.value}
+                    value={framework.value}
+                    onSelect={(currentValue) => {
+                      setValue(currentValue === value ? '' : currentValue);
+                      setOpen(false);
+                    }}
+                  >
+                    {framework.label}
+                    <Combobox.Check checked={value === framework.value} />
+                  </Command.Item>
+                ))}
+                <Combobox.FetchMore
+                  currentLength={5}
+                  totalCount={10}
+                  fetchMore={() => console.log('Fetching more...')}
+                />
+              </Command.List>
+            </Command>
+          </Combobox.Content>
+        </Popover>
+      </div>
+    );
+  },
+};