@erxes/ui 0.0.0-stage → 3.2.20-1

package/src/components/__stories__/scroll-area.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ScrollArea, Separator } from 'erxes-ui/components';
+
+const meta: Meta<typeof ScrollArea> = {
+  title: 'Components/ScrollArea',
+  component: ScrollArea,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ScrollArea>;
+
+const tags = Array.from({ length: 50 }).map(
+  (_, i, a) => `v1.2.0-beta.${a.length - i}`,
+);
+export const Default: 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>
+        {tags.map((tag) => (
+          <>
+            <div key={tag} className="text-sm">
+              {tag}
+            </div>
+            <Separator className="my-2" />
+          </>
+        ))}
+      </div>
+    </ScrollArea>
+  ),
+};

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

@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Select } from 'erxes-ui/components/select';
+import { Label } from 'erxes-ui/components/label';
+
+const meta: Meta<typeof Select> = {
+  title: 'Components/Select',
+  component: Select,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Select>;
+
+export const Default: Story = {
+  render: () => (
+    <Select>
+      <Select.Trigger className="w-[200px]">
+        <Select.Value placeholder="Select a fruit" />
+      </Select.Trigger>
+      <Select.Content>
+        <Select.Item value="apple">Apple</Select.Item>
+        <Select.Item value="banana">Banana</Select.Item>
+        <Select.Item value="orange">Orange</Select.Item>
+        <Select.Item value="grape">Grape</Select.Item>
+        <Select.Item value="pineapple">Pineapple</Select.Item>
+      </Select.Content>
+    </Select>
+  ),
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="grid w-full max-w-sm items-center gap-1.5">
+      <Label htmlFor="fruit">Favorite Fruit</Label>
+      <Select>
+        <Select.Trigger className="w-[200px]" id="fruit">
+          <Select.Value placeholder="Select a fruit" />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Item value="apple">Apple</Select.Item>
+          <Select.Item value="banana">Banana</Select.Item>
+          <Select.Item value="orange">Orange</Select.Item>
+        </Select.Content>
+      </Select>
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <Select disabled>
+      <Select.Trigger className="w-[200px]">
+        <Select.Value placeholder="Disabled" />
+      </Select.Trigger>
+      <Select.Content>
+        <Select.Item value="option1">Option 1</Select.Item>
+        <Select.Item value="option2">Option 2</Select.Item>
+      </Select.Content>
+    </Select>
+  ),
+};
+
+export const WithGroups: Story = {
+  render: () => (
+    <Select>
+      <Select.Trigger className="w-[200px]">
+        <Select.Value placeholder="Select an option" />
+      </Select.Trigger>
+      <Select.Content>
+        <Select.Group>
+          <Select.Label>Fruits</Select.Label>
+          <Select.Item value="apple">Apple</Select.Item>
+          <Select.Item value="banana">Banana</Select.Item>
+          <Select.Item value="orange">Orange</Select.Item>
+        </Select.Group>
+        <Select.Separator />
+        <Select.Group>
+          <Select.Label>Vegetables</Select.Label>
+          <Select.Item value="carrot">Carrot</Select.Item>
+          <Select.Item value="broccoli">Broccoli</Select.Item>
+          <Select.Item value="spinach">Spinach</Select.Item>
+        </Select.Group>
+      </Select.Content>
+    </Select>
+  ),
+};
+
+export const WithDisabledItems: Story = {
+  render: () => (
+    <Select>
+      <Select.Trigger className="w-[200px]">
+        <Select.Value placeholder="Select an option" />
+      </Select.Trigger>
+      <Select.Content>
+        <Select.Item value="option1">Available option</Select.Item>
+        <Select.Item value="option2" disabled>
+          Disabled option
+        </Select.Item>
+        <Select.Item value="option3">Another option</Select.Item>
+      </Select.Content>
+    </Select>
+  ),
+};

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

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Separator } from 'erxes-ui/components';
+
+const meta: Meta<typeof Separator> = {
+  title: 'Components/Separator',
+  component: Separator,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+      description: 'The orientation of the separator',
+    },
+    decorative: {
+      control: 'boolean',
+      description: 'The decorative property of the separator',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Separator>;
+export const Default: Story = {
+  render: () => (
+    <div>
+      <div className="space-y-1">
+        <h4 className="text-sm font-medium leading-none mb-2">
+          Radix Primitives
+        </h4>
+        <Separator />
+        <p className="text-sm text-muted-foreground">
+          An open-source UI component library.
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+export const vertical: Story = {
+  render: () => (
+    <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>
+  ),
+};

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

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Sheet, Button, Label, Input } from 'erxes-ui/components';
+
+const meta: Meta<typeof Sheet.Content> = {
+  title: 'Components/Sheet',
+  component: Sheet,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    side: {
+      description: 'The side of the screen to open the sheet from.',
+      defaultValue: 'right',
+      control: 'select',
+      options: ['right', 'bottom', 'left', 'top'],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Sheet>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Sheet>
+      <Sheet.Trigger asChild>
+        <Button variant="outline">Open</Button>
+      </Sheet.Trigger>
+      <Sheet.Content {...args}>
+        <Sheet.Header>
+          <Sheet.Title>Edit profile</Sheet.Title>
+          <Sheet.Description>
+            Make changes to your profile here. Click save when you're done.
+          </Sheet.Description>
+        </Sheet.Header>
+        <div className="">
+          <div className="grid gap-4 py-4">
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="name" className="text-right">
+                Name
+              </Label>
+              <Input id="name" value="Pedro Duarte" className="col-span-3" />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="username" className="text-right">
+                Username
+              </Label>
+              <Input id="username" value="@peduarte" className="col-span-3" />
+            </div>
+          </div>
+        </div>
+        <Sheet.Footer>
+          <Sheet.Close>
+            <Button type="submit">Save changes</Button>
+          </Sheet.Close>
+        </Sheet.Footer>
+      </Sheet.Content>
+    </Sheet>
+  ),
+};

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

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  IconCalendar,
+  IconHome,
+  IconInbox,
+  IconSearch,
+  IconSettings,
+} from '@tabler/icons-react';
+import { Sidebar, Button, Label, Input } from 'erxes-ui/components';
+
+const meta: Meta<typeof Sidebar> = {
+  title: 'Components/Sidebar',
+  component: Sidebar,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Sidebar>;
+
+const items = [
+  {
+    title: 'Home',
+    url: '#',
+    icon: IconHome,
+  },
+  {
+    title: 'Inbox',
+    url: '#',
+    icon: IconInbox,
+  },
+  {
+    title: 'Calendar',
+    url: '#',
+    icon: IconCalendar,
+  },
+  {
+    title: 'Search',
+    url: '#',
+    icon: IconSearch,
+  },
+  {
+    title: 'Settings',
+    url: '#',
+    icon: IconSettings,
+  },
+];
+
+export const Default: Story = {
+  render: (args) => (
+    <div className="h-96 w-full">
+      <Sidebar.Provider>
+        <Sidebar {...args} className="h-full">
+          <Sidebar.Header>
+            <div className="flex items-center justify-between">
+              <h2 className="text-lg font-semibold">Erxes UI</h2>
+              <Sidebar.Trigger />
+            </div>
+            <Sidebar.Input placeholder="Search..." />
+          </Sidebar.Header>
+          <Sidebar.Content>
+            <Sidebar.Group>
+              <Sidebar.GroupLabel>Navigation</Sidebar.GroupLabel>
+              <Sidebar.GroupContent>
+                <Sidebar.Menu>
+                  {items.map((item) => (
+                    <Sidebar.MenuItem key={item.title}>
+                      <Sidebar.MenuButton
+                        tooltip={item.title}
+                        isActive={item.title === 'Home'}
+                      >
+                        <item.icon />
+                        <span>{item.title}</span>
+                      </Sidebar.MenuButton>
+                    </Sidebar.MenuItem>
+                  ))}
+                </Sidebar.Menu>
+              </Sidebar.GroupContent>
+            </Sidebar.Group>
+          </Sidebar.Content>
+          <Sidebar.Footer>
+            <div className="flex items-center justify-between px-2">
+              <div className="flex items-center gap-2">
+                <div className="h-8 w-8 rounded-full bg-primary"></div>
+                <div>
+                  <p className="text-sm font-medium">User Name</p>
+                  <p className="text-xs text-muted-foreground">
+                    user@example.com
+                  </p>
+                </div>
+              </div>
+              <Button variant="ghost" size="icon">
+                <IconSettings size={16} />
+              </Button>
+            </div>
+          </Sidebar.Footer>
+          <Sidebar.Rail />
+        </Sidebar>
+      </Sidebar.Provider>
+    </div>
+  ),
+};

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

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Skeleton } from 'erxes-ui';
+
+const meta: Meta<typeof Skeleton> = {
+  title: 'Components/Skeleton',
+  component: Skeleton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Skeleton>;
+
+export const Default: Story = {
+  render: (args) => (
+    <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/components/__stories__/slider.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Slider } from 'erxes-ui/components/slider';
+
+const meta: Meta<typeof Slider> = {
+  title: 'Components/Slider',
+  component: Slider,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    hideThumb: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Slider>;
+
+export const Default: Story = {
+  render: (args) => (
+    <div className="w-full min-w-64 max-w-sm space-y-4">
+      <Slider defaultValue={[50]} max={100} step={1} {...args} />
+    </div>
+  ),
+};
+
+export const Range: Story = {
+  render: () => (
+    <div className="w-full min-w-64 max-w-sm space-y-4">
+      <Slider defaultValue={[20, 80]} max={100} step={1} />
+    </div>
+  ),
+};
+
+export const WithValue: Story = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [value, setValue] = useState([33]);
+    return (
+      <div className="w-full min-w-64 max-w-sm space-y-4">
+        <Slider value={value} onValueChange={setValue} max={100} step={1} />
+        <div className="text-center font-medium">Value: {value}</div>
+      </div>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="w-full min-w-64 max-w-sm space-y-4">
+      <Slider defaultValue={[50]} max={100} step={1} disabled />
+    </div>
+  ),
+};
+
+export const WithLabels: Story = {
+  render: () => (
+    <div className="w-full min-w-64 max-w-sm space-y-2">
+      <div className="flex justify-between">
+        <span>0%</span>
+        <span>50%</span>
+        <span>100%</span>
+      </div>
+      <Slider defaultValue={[50]} max={100} step={1} />
+    </div>
+  ),
+};

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

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Spinner } from 'erxes-ui';
+
+const meta: Meta = {
+  title: 'Components/Spinner',
+  component: Spinner,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      options: ['small', 'medium', 'large'],
+      description: 'Size of the spinner',
+      defaultValue: 'medium',
+      control: 'select',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: (args) => (
+    <div className="flex items-center h-40">
+      <Spinner {...args} />
+    </div>
+  ),
+};
+
+export const WithMascot: Story = {
+  render: () => (
+    <div className="flex items-center h-60">
+      <Spinner withMascot />
+    </div>
+  ),
+};

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

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Switch } from 'erxes-ui/components/switch';
+import { Label } from 'erxes-ui/components/label';
+
+const meta: Meta<typeof Switch> = {
+  title: 'Components/Switch',
+  component: Switch,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    checked: {
+      control: 'boolean',
+      description: 'The controlled checked state of the switch',
+    },
+    disabled: {
+      control: 'boolean',
+      description:
+        'When true, prevents the user from interacting with the switch',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Switch>;
+
+export const Default: Story = {
+  render: (args) => <Switch {...args} />,
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="flex items-center space-x-2">
+      <Switch id="airplane-mode" />
+      <Label htmlFor="airplane-mode">Airplane Mode</Label>
+    </div>
+  ),
+};
+
+export const States: Story = {
+  render: () => (
+    <div className="flex flex-col space-y-4">
+      <div className="flex items-center space-x-2">
+        <Switch id="checked" checked={true} />
+        <Label htmlFor="checked">Checked</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <Switch id="unchecked" checked={false} />
+        <Label htmlFor="unchecked">Unchecked</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <Switch id="disabled" disabled />
+        <Label htmlFor="disabled">Disabled</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <Switch id="disabled-checked" disabled checked />
+        <Label htmlFor="disabled-checked">Disabled (Checked)</Label>
+      </div>
+    </div>
+  ),
+};