@erxes/ui 0.0.0-stage → 3.2.20-1

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

@@ -0,0 +1,78 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import type { Meta, StoryObj } from '@storybook/react';
+import { Command } from 'erxes-ui/components/command';
+import { IconSearch } from '@tabler/icons-react';
+import { Button } from '../button';
+import { useState } from 'react';
+
+const meta: Meta<typeof Command> = {
+  title: 'Components/Command',
+  component: Command,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Command>;
+
+export const Default: Story = {
+  render: () => {
+    return (
+      <div className="w-96">
+        <Command>
+          <Command.Input
+            placeholder="Type a command or search..."
+            variant="secondary"
+          />
+          <Command.List className="p-0">
+            <Command.Empty>No results found.</Command.Empty>
+            <Command.Group heading="Suggestions">
+              <Command.Item>Calendar</Command.Item>
+              <Command.Item>Search</Command.Item>
+              <Command.Item>Settings</Command.Item>
+            </Command.Group>
+            <Command.Separator />
+            <Command.Group heading="Recent">
+              <Command.Item>Dashboard</Command.Item>
+              <Command.Item>Projects</Command.Item>
+              <Command.Item>Team</Command.Item>
+            </Command.Group>
+          </Command.List>
+        </Command>
+      </div>
+    );
+  },
+};
+
+export const WithDialog: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+      <div className="w-96">
+        <Button variant="outline" onClick={() => setOpen(true)}>
+          Open Command
+        </Button>
+        <Command.Dialog open={open} onOpenChange={setOpen}>
+          <Command.Input placeholder="Type a command or search..." />
+          <Command.List className="p-0">
+            <Command.Empty>No results found.</Command.Empty>
+            <Command.Group heading="Actions">
+              <Command.Item>New File</Command.Item>
+              <Command.Item>New Folder</Command.Item>
+              <Command.Item>New Project</Command.Item>
+            </Command.Group>
+            <Command.Separator />
+            <Command.Group heading="Navigation">
+              <Command.Item>Go to Dashboard</Command.Item>
+              <Command.Item>Go to Settings</Command.Item>
+              <Command.Item>Go to Profile</Command.Item>
+            </Command.Group>
+          </Command.List>
+        </Command.Dialog>
+      </div>
+    );
+  },
+};

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

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CommandBar } from 'erxes-ui/components/command-bar';
+import { Button } from 'erxes-ui/components/button';
+import { IconPlus, IconTrash } from '@tabler/icons-react';
+import { Separator } from 'erxes-ui/components/separator';
+
+const meta: Meta<typeof CommandBar> = {
+  title: 'Components/CommandBar',
+  component: CommandBar,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof CommandBar>;
+
+export const Default: Story = {
+  render: () => {
+    return (
+      <div className="w-96 h-48">
+        <CommandBar open={true}>
+          <CommandBar.Bar>
+            <CommandBar.Value onClose={() => console.log('close')}>
+              24 selected
+            </CommandBar.Value>
+            <Separator.Inline />
+            <Button variant="secondary">
+              <IconTrash />
+              Delete
+            </Button>
+            <Button variant="secondary">
+              <IconPlus />
+              Add
+            </Button>
+          </CommandBar.Bar>
+        </CommandBar>
+      </div>
+    );
+  },
+};

package/src/components/__stories__/date-picker.stories.tsx

@@ -0,0 +1,83 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import type { Meta, StoryObj } from '@storybook/react';
+import { DatePicker } from 'erxes-ui/components/date-picker';
+import { useState } from 'react';
+
+const meta: Meta<typeof DatePicker> = {
+  title: 'Components/DatePicker',
+  component: DatePicker,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof DatePicker>;
+
+export const Default: Story = {
+  render: () => {
+    const [date, setDate] = useState<Date | undefined>(new Date());
+
+    return (
+      <div className="w-72">
+        <DatePicker
+          value={date}
+          onChange={(date) => setDate(date as Date)}
+          placeholder="Select date"
+        />
+      </div>
+    );
+  },
+};
+
+export const WithPastDatesOnly: Story = {
+  render: () => {
+    const [date, setDate] = useState<Date | undefined>(new Date());
+
+    return (
+      <div className="w-72">
+        <DatePicker
+          value={date}
+          onChange={(date) => setDate(date as Date)}
+          withPresent={true}
+          placeholder="Select past date"
+        />
+      </div>
+    );
+  },
+};
+
+export const MultipleSelection: Story = {
+  render: () => {
+    const [dates, setDates] = useState<Date[]>([]);
+
+    return (
+      <div className="w-72">
+        <DatePicker
+          value={dates}
+          onChange={(selected) => setDates(selected as Date[])}
+          mode="multiple"
+          placeholder="Select multiple dates"
+        />
+      </div>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: () => {
+    const [date, setDate] = useState<Date | undefined>(new Date());
+
+    return (
+      <div className="w-72">
+        <DatePicker
+          value={date}
+          onChange={(date) => setDate(date as Date)}
+          disabled={true}
+          placeholder="Disabled date picker"
+        />
+      </div>
+    );
+  },
+};

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

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Dialog } from 'erxes-ui/components/dialog';
+import { Button } from 'erxes-ui/components/button';
+import { Label } from '../label';
+import { Input } from '../input';
+
+const meta: Meta<typeof Dialog> = {
+  title: 'Components/Dialog',
+  component: Dialog,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Dialog>;
+
+export const Default: Story = {
+  render: () => (
+    <Dialog>
+      <Dialog.Trigger asChild>
+        <Button variant="outline">Edit Profile</Button>
+      </Dialog.Trigger>
+      <Dialog.Content className="sm:max-w-[425px]">
+        <Dialog.Header>
+          <Dialog.Title>Edit profile</Dialog.Title>
+          <Dialog.Description>
+            Make changes to your profile here. Click save when you're done.
+          </Dialog.Description>
+        </Dialog.Header>
+        <div className="grid gap-4 py-4">
+          <div className="space-y-2">
+            <Label htmlFor="name" className="text-right">
+              Name
+            </Label>
+            <Input id="name" value="Pedro Duarte" className="col-span-3" />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="username" className="text-right">
+              Username
+            </Label>
+            <Input id="username" value="@peduarte" className="col-span-3" />
+          </div>
+        </div>
+        <Dialog.Footer>
+          <Button type="submit">Save changes</Button>
+        </Dialog.Footer>
+      </Dialog.Content>
+    </Dialog>
+  ),
+};

package/src/components/__stories__/dropdown-menu.stories.tsx

@@ -0,0 +1,140 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import type { Meta, StoryObj } from '@storybook/react';
+import { DropdownMenu } from 'erxes-ui/components/dropdown-menu';
+import { Button } from 'erxes-ui/components/button';
+import { useState } from 'react';
+
+const meta: Meta<typeof DropdownMenu> = {
+  title: 'Components/DropdownMenu',
+  component: DropdownMenu,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DropdownMenu>;
+
+export const Default: Story = {
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenu.Trigger asChild>
+        <Button variant="outline">Open</Button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content className="w-56">
+        <DropdownMenu.Label>My Account</DropdownMenu.Label>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Group>
+          <DropdownMenu.Item>
+            Profile
+            <DropdownMenu.Shortcut>⇧⌘P</DropdownMenu.Shortcut>
+          </DropdownMenu.Item>
+          <DropdownMenu.Item>
+            Billing
+            <DropdownMenu.Shortcut>⌘B</DropdownMenu.Shortcut>
+          </DropdownMenu.Item>
+          <DropdownMenu.Item>
+            Settings
+            <DropdownMenu.Shortcut>⌘S</DropdownMenu.Shortcut>
+          </DropdownMenu.Item>
+          <DropdownMenu.Item>
+            Keyboard shortcuts
+            <DropdownMenu.Shortcut>⌘K</DropdownMenu.Shortcut>
+          </DropdownMenu.Item>
+        </DropdownMenu.Group>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Group>
+          <DropdownMenu.Item>Team</DropdownMenu.Item>
+          <DropdownMenu.Sub>
+            <DropdownMenu.SubTrigger>Invite users</DropdownMenu.SubTrigger>
+            <DropdownMenu.Portal>
+              <DropdownMenu.SubContent>
+                <DropdownMenu.Item>Email</DropdownMenu.Item>
+                <DropdownMenu.Item>Message</DropdownMenu.Item>
+                <DropdownMenu.Separator />
+                <DropdownMenu.Item>More...</DropdownMenu.Item>
+              </DropdownMenu.SubContent>
+            </DropdownMenu.Portal>
+          </DropdownMenu.Sub>
+          <DropdownMenu.Item>
+            New Team
+            <DropdownMenu.Shortcut>⌘+T</DropdownMenu.Shortcut>
+          </DropdownMenu.Item>
+        </DropdownMenu.Group>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item>GitHub</DropdownMenu.Item>
+        <DropdownMenu.Item>Support</DropdownMenu.Item>
+        <DropdownMenu.Item disabled>API</DropdownMenu.Item>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item>
+          Log out
+          <DropdownMenu.Shortcut>⇧⌘Q</DropdownMenu.Shortcut>
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  ),
+};
+
+export const WithCheckboxItems: Story = {
+  render: () => {
+    const [showStatusBar, setShowStatusBar] = useState<boolean>(true);
+    const [showActivityBar, setShowActivityBar] = useState<boolean>(false);
+    const [showPanel, setShowPanel] = useState<boolean>(false);
+    return (
+      <DropdownMenu>
+        <DropdownMenu.Trigger asChild>
+          <Button variant="outline">Open</Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content className="w-56">
+          <DropdownMenu.Label>Appearance</DropdownMenu.Label>
+          <DropdownMenu.Separator />
+          <DropdownMenu.CheckboxItem
+            checked={showStatusBar}
+            onCheckedChange={setShowStatusBar}
+          >
+            Status Bar
+          </DropdownMenu.CheckboxItem>
+          <DropdownMenu.CheckboxItem
+            checked={showActivityBar}
+            onCheckedChange={setShowActivityBar}
+            disabled
+          >
+            Activity Bar
+          </DropdownMenu.CheckboxItem>
+          <DropdownMenu.CheckboxItem
+            checked={showPanel}
+            onCheckedChange={setShowPanel}
+          >
+            Panel
+          </DropdownMenu.CheckboxItem>
+        </DropdownMenu.Content>
+      </DropdownMenu>
+    );
+  },
+};
+
+export const WithRadioItems: Story = {
+  render: () => {
+    const [position, setPosition] = useState('bottom');
+    return (
+      <DropdownMenu>
+        <DropdownMenu.Trigger asChild>
+          <Button variant="outline">Open</Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content className="w-56">
+          <DropdownMenu.Label>Panel Position</DropdownMenu.Label>
+          <DropdownMenu.Separator />
+          <DropdownMenu.RadioGroup value={position} onValueChange={setPosition}>
+            <DropdownMenu.RadioItem value="top">Top</DropdownMenu.RadioItem>
+            <DropdownMenu.RadioItem value="bottom">
+              Bottom
+            </DropdownMenu.RadioItem>
+            <DropdownMenu.RadioItem value="right">Right</DropdownMenu.RadioItem>
+          </DropdownMenu.RadioGroup>
+        </DropdownMenu.Content>
+      </DropdownMenu>
+    );
+  },
+};

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

@@ -0,0 +1,166 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import type { Meta, StoryObj } from '@storybook/react';
+import { Form } from 'erxes-ui/components/form';
+import { Input } from 'erxes-ui/components/input';
+import { Button } from 'erxes-ui/components/button';
+import { Checkbox } from 'erxes-ui/components/checkbox';
+import { Select } from 'erxes-ui/components/select';
+import { Textarea } from 'erxes-ui/components/textarea';
+import { z } from 'zod';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+const meta: Meta<typeof Form> = {
+  title: 'Components/Form',
+  component: Form,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Form>;
+
+const formSchema = z.object({
+  username: z.string().min(2, {
+    message: 'Username must be at least 2 characters.',
+  }),
+  email: z.string().email({
+    message: 'Please enter a valid email address.',
+  }),
+  bio: z.string().optional(),
+  notifications: z.boolean().default(false),
+  role: z.string({
+    required_error: 'Please select a role.',
+  }),
+});
+
+export const Default: Story = {
+  render: () => {
+    const form = useForm<z.infer<typeof formSchema>>({
+      resolver: zodResolver(formSchema),
+      defaultValues: {
+        username: '',
+        email: '',
+        bio: '',
+        notifications: false,
+        role: '',
+      },
+    });
+
+    const onSubmit = (values: z.infer<typeof formSchema>) => {
+      alert(JSON.stringify(values, null, 2));
+    };
+
+    return (
+      <div className="w-96 p-6 bg-white rounded-lg shadow-md">
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <div className="space-y-4">
+              <Form.Field
+                name="username"
+                control={form.control}
+                render={({ field }) => (
+                  <Form.Item>
+                    <Form.Label>Username</Form.Label>
+                    <Form.Control>
+                      <Input placeholder="Enter your username" {...field} />
+                    </Form.Control>
+                    <Form.Message />
+                  </Form.Item>
+                )}
+              />
+
+              <Form.Field
+                name="email"
+                control={form.control}
+                render={({ field }) => (
+                  <Form.Item>
+                    <Form.Label>Email</Form.Label>
+                    <Form.Control>
+                      <Input
+                        type="email"
+                        placeholder="Enter your email"
+                        {...field}
+                      />
+                    </Form.Control>
+                    <Form.Message />
+                  </Form.Item>
+                )}
+              />
+
+              <Form.Field
+                name="bio"
+                control={form.control}
+                render={({ field }) => (
+                  <Form.Item>
+                    <Form.Label>Bio</Form.Label>
+                    <Form.Control>
+                      <Textarea
+                        placeholder="Tell us about yourself"
+                        {...field}
+                      />
+                    </Form.Control>
+                    <Form.Message />
+                  </Form.Item>
+                )}
+              />
+
+              <Form.Field
+                name="role"
+                control={form.control}
+                render={({ field }) => (
+                  <Form.Item>
+                    <Form.Label>Role</Form.Label>
+                    <Select
+                      onValueChange={field.onChange}
+                      defaultValue={field.value}
+                    >
+                      <Form.Control>
+                        <Select.Trigger>
+                          <Select.Value placeholder="Select a role" />
+                        </Select.Trigger>
+                      </Form.Control>
+                      <Select.Content>
+                        <Select.Item value="admin">Admin</Select.Item>
+                        <Select.Item value="user">User</Select.Item>
+                        <Select.Item value="guest">Guest</Select.Item>
+                      </Select.Content>
+                    </Select>
+                    <Form.Message />
+                  </Form.Item>
+                )}
+              />
+
+              <Form.Field
+                name="notifications"
+                control={form.control}
+                render={({ field }) => (
+                  <Form.Item>
+                    <div className="flex items-center gap-2 py-2">
+                      <Form.Control>
+                        <Checkbox
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                        />
+                      </Form.Control>
+                      <Form.Label variant="peer">
+                        Receive notifications
+                      </Form.Label>
+                    </div>
+                    <Form.Message />
+                  </Form.Item>
+                )}
+              />
+
+              <Button type="submit" className="w-full">
+                Submit
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </div>
+    );
+  },
+};

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

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { HoverCard } from 'erxes-ui/components/hover-card';
+import { Button } from 'erxes-ui/components/button';
+import { Avatar } from 'erxes-ui/components/avatar';
+
+const meta: Meta<typeof HoverCard> = {
+  title: 'Components/HoverCard',
+  component: HoverCard,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof HoverCard>;
+
+export const Default: Story = {
+  render: () => {
+    return (
+      <div className="h-96">
+        <HoverCard>
+          <HoverCard.Trigger asChild>
+            <Button variant="link">@erxes</Button>
+          </HoverCard.Trigger>
+          <HoverCard.Content className="w-80">
+            <div className="flex justify-between space-x-4">
+              <Avatar size="xl">
+                <Avatar.Image src="https://github.com/erxes.png" />
+                <Avatar.Fallback>EX</Avatar.Fallback>
+              </Avatar>
+              <div className="space-y-1">
+                <h4 className="text-sm font-semibold">@erxes</h4>
+                <p className="text-sm">
+                  The open-source Hubspot alternative. XOS - Experience
+                  Operating System.
+                </p>
+                <div className="flex items-center pt-2">
+                  <span className="text-xs text-muted-foreground">
+                    Joined December 2016
+                  </span>
+                </div>
+              </div>
+            </div>
+          </HoverCard.Content>
+        </HoverCard>
+      </div>
+    );
+  },
+};

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

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Input } from 'erxes-ui/components/input';
+import { Label } from 'erxes-ui/components/label';
+
+const meta: Meta<typeof Input> = {
+  title: 'Components/Input',
+  component: Input,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+      description: 'When true, the input is disabled',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text for the input',
+    },
+    type: {
+      control: 'select',
+      options: ['text', 'password', 'email', 'search', 'tel', 'url', 'file'],
+      description: 'Type of the input element',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Input>;
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Enter text...',
+  },
+  render: (args) => <Input className="w-[300px]" {...args} />,
+};
+
+export const InputNumber: Story = {
+  render: () => (
+    <Input.Number
+      id="number"
+      placeholder="Number input"
+      className="w-[300px]"
+    />
+  ),
+};
+
+export const InputTypes: Story = {
+  render: () => (
+    <div className="flex flex-col space-y-4 w-[300px]">
+      <div className="space-y-1.5">
+        <Label htmlFor="text">Text</Label>
+        <Input id="text" placeholder="Text input" />
+      </div>
+      <div className="space-y-1.5">
+        <Label htmlFor="password">Password</Label>
+        <Input id="password" type="password" placeholder="Password input" />
+      </div>
+      <div className="space-y-1.5">
+        <Label htmlFor="disabled">Disabled</Label>
+        <Input id="disabled" disabled placeholder="Disabled input" />
+      </div>
+      <div className="space-y-1.5">
+        <Label htmlFor="number">Number</Label>
+        <Input.Number id="number" placeholder="Number input" />
+      </div>
+      <div className="space-y-1.5">
+        <Label htmlFor="file">File</Label>
+        <Input type="file" className="w-[300px]" />
+      </div>
+    </div>
+  ),
+};