@erxes/ui 0.0.0-stage → 3.2.20-1

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

@@ -0,0 +1,140 @@
+import type { StoryObj } from '@storybook/react';
+import { Meta } from '@storybook/react';
+import { IconDotsVertical } from '@tabler/icons-react';
+import { Button } from 'erxes-ui/components/button';
+import { Checkbox } from 'erxes-ui/components/checkbox';
+import { Table } from 'erxes-ui/components/table';
+import { cn } from 'erxes-ui/lib/utils';
+
+const meta: Meta<typeof Table> = {
+  title: 'Components/Table',
+  component: Table,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Table>;
+
+interface Payment {
+  id: string;
+  amount: number;
+  status: 'pending' | 'processing' | 'success' | 'failed';
+  email: string;
+}
+
+const payments: Payment[] = [
+  {
+    id: '728ed52f',
+    amount: 100,
+    status: 'pending',
+    email: 'user1@example.com',
+  },
+  {
+    id: '489e1d42',
+    amount: 125,
+    status: 'processing',
+    email: 'user2@example.com',
+  },
+  {
+    id: 'f9d288c7',
+    amount: 200,
+    status: 'success',
+    email: 'user3@example.com',
+  },
+  {
+    id: 'a4a98b09',
+    amount: 75,
+    status: 'failed',
+    email: 'user4@example.com',
+  },
+];
+
+export const Default: Story = {
+  render: () => (
+    <div className="w-full p-1 bg-sidebar rounded-lg overflow-auto">
+      <Table>
+        <Table.Header className="[&_th]:w-40">
+          <Table.Row>
+            <Table.Head className="w-9! text-center">
+              <Checkbox />
+            </Table.Head>
+            <Table.Head>Invoice</Table.Head>
+            <Table.Head>Status</Table.Head>
+            <Table.Head>Method</Table.Head>
+            <Table.Head className="text-right">Amount</Table.Head>
+            <Table.Head className="w-9!"></Table.Head>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {payments.map((payment, index) => (
+            <Table.Row key={payment.id} className="[&>td]:w-96">
+              <Table.Cell
+                className={cn(
+                  'px-2 text-center',
+                  index === 0 && 'rounded-tl-md border-t',
+                  index === payments.length - 1 && 'rounded-bl-md',
+                )}
+              >
+                <Checkbox />
+              </Table.Cell>
+              <Table.Cell className={cn('px-2', index === 0 && ' border-t')}>
+                {payment.id}
+              </Table.Cell>
+              <Table.Cell className={cn('px-2', index === 0 && ' border-t')}>
+                {payment.status}
+              </Table.Cell>
+              <Table.Cell className={cn('px-2', index === 0 && ' border-t')}>
+                {payment.email}
+              </Table.Cell>
+              <Table.Cell className={cn('px-2', index === 0 && ' border-t')}>
+                ${payment.amount.toFixed(2)}
+              </Table.Cell>
+              <Table.Cell
+                className={cn(
+                  'px-1 w-9 text-center',
+                  index === 0 && 'rounded-tr-md border-t',
+                  index === payments.length - 1 && 'rounded-br-md',
+                )}
+              >
+                <Button variant="ghost" size="icon">
+                  <IconDotsVertical className="h-4 w-4" />
+                </Button>
+              </Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table>
+    </div>
+  ),
+};
+
+export const Empty: Story = {
+  render: () => (
+    <div className="w-full bg-sidebar p-1 rounded-lg">
+      <Table>
+        <Table.Header>
+          <Table.Row>
+            <Table.Head>Invoice</Table.Head>
+            <Table.Head>Status</Table.Head>
+            <Table.Head>Method</Table.Head>
+            <Table.Head className="text-right">Amount</Table.Head>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell
+              colSpan={4}
+              className="h-24 text-center border-t rounded-md"
+            >
+              No results found.
+            </Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+    </div>
+  ),
+};

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

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tabs } from 'erxes-ui/components/tabs';
+
+const meta: Meta<typeof Tabs> = {
+  title: 'Components/Tabs',
+  component: Tabs,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tabs>;
+
+export const Default: Story = {
+  render: () => (
+    <Tabs defaultValue="account" className="w-[400px]">
+      <Tabs.List className="grid w-full grid-cols-2">
+        <Tabs.Trigger value="account">Account</Tabs.Trigger>
+        <Tabs.Trigger value="password">Password</Tabs.Trigger>
+      </Tabs.List>
+      <Tabs.Content value="account" className="p-4">
+        <p>Account settings content goes here.</p>
+      </Tabs.Content>
+      <Tabs.Content value="password" className="p-4">
+        <p>Password settings content goes here.</p>
+      </Tabs.Content>
+    </Tabs>
+  ),
+};
+
+export const SmallSize: Story = {
+  render: () => (
+    <Tabs defaultValue="account" className="w-[400px]">
+      <Tabs.List className="w-fit">
+        <Tabs.Trigger value="account">Account</Tabs.Trigger>
+        <Tabs.Trigger value="password">Password</Tabs.Trigger>
+        <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
+      </Tabs.List>
+      <Tabs.Content value="account" className="p-4">
+        <p>Account settings content goes here.</p>
+      </Tabs.Content>
+      <Tabs.Content value="password" className="p-4">
+        <p>Password settings content goes here.</p>
+      </Tabs.Content>
+      <Tabs.Content value="settings" className="p-4">
+        <p>Other settings content goes here.</p>
+      </Tabs.Content>
+    </Tabs>
+  ),
+};
+
+export const WithDisabledTab: Story = {
+  render: () => (
+    <Tabs defaultValue="account" className="w-[400px]">
+      <Tabs.List className="grid w-full grid-cols-3">
+        <Tabs.Trigger value="account">Account</Tabs.Trigger>
+        <Tabs.Trigger value="password">Password</Tabs.Trigger>
+        <Tabs.Trigger value="settings" disabled>
+          Settings
+        </Tabs.Trigger>
+      </Tabs.List>
+      <Tabs.Content value="account" className="p-4">
+        <p>Account settings content goes here.</p>
+      </Tabs.Content>
+      <Tabs.Content value="password" className="p-4">
+        <p>Password settings content goes here.</p>
+      </Tabs.Content>
+      <Tabs.Content value="settings" className="p-4">
+        <p>Settings content goes here.</p>
+      </Tabs.Content>
+    </Tabs>
+  ),
+};

package/src/components/__stories__/text-overflow.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button, TextOverflowTooltip } from 'erxes-ui';
+const meta: Meta<typeof TextOverflowTooltip> = {
+  title: 'Components/TextOverflowTooltip',
+  component: TextOverflowTooltip,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: {
+    value: 'Hello world!',
+  },
+  argTypes: {
+    value: {
+      control: 'text',
+      description: 'The text to be displayed in the tooltip.',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TextOverflowTooltip>;
+
+export const Default: Story = {
+  render: (args) => {
+    return (
+      <Button className="w-16">
+        <TextOverflowTooltip {...args} />
+      </Button>
+    );
+  },
+};

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

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Textarea } from 'erxes-ui/components/textarea';
+import { Label } from 'erxes-ui/components/label';
+
+const meta: Meta<typeof Textarea> = {
+  title: 'Components/Textarea',
+  component: Textarea,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+      description: 'When true, the textarea is disabled',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text for the textarea',
+    },
+    rows: {
+      control: 'number',
+      description: 'Number of visible text lines',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Textarea>;
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Type your message here.',
+    className: 'w-[300px]',
+  },
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="grid w-full gap-1.5 max-w-sm">
+      <Label htmlFor="message">Your message</Label>
+      <Textarea id="message" placeholder="Type your message here." />
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <Textarea
+      disabled
+      placeholder="This textarea is disabled."
+      className="w-[300px]"
+    />
+  ),
+};
+
+export const WithRows: Story = {
+  render: () => (
+    <Textarea
+      rows={10}
+      placeholder="This textarea has 10 rows."
+      className="w-[300px]"
+    />
+  ),
+};
+
+export const WithDefaultValue: Story = {
+  render: () => (
+    <Textarea
+      defaultValue="This is some default text in the textarea that was pre-populated."
+      className="w-[300px]"
+    />
+  ),
+};

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

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Toast } from 'erxes-ui/components/toasts';
+import { Button, Toaster, useToast } from 'erxes-ui';
+const meta: Meta = {
+  title: 'Components/Toast',
+  component: Toaster,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: { variant: 'default', title: 'Title', description: 'Description' },
+  argTypes: {
+    variant: {
+      options: ['default', 'destructive'],
+      description: 'Variant of the toast',
+      defaultValue: 'default',
+      control: 'select',
+    },
+    title: {
+      description: 'Title of the toast',
+      control: 'text',
+    },
+    description: {
+      description: 'Description of the toast',
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  decorators: [
+    (Story, context) => {
+      const { toast } = useToast();
+      return (
+        <div className="flex items-center justify-center w-screen max-w-4xl h-screen ">
+          <Button
+            onClick={() => {
+              toast({ ...context.args });
+            }}
+          >
+            Click!
+          </Button>
+          <Story />
+          <Toaster />
+        </div>
+      );
+    },
+  ],
+};

package/src/components/__stories__/toggle-group.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { IconBold, IconItalic, IconUnderline } from '@tabler/icons-react';
+import { ToggleGroup } from 'erxes-ui';
+
+const meta: Meta = {
+  title: 'Components/ToggleGroup',
+  component: ToggleGroup,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      options: ['xs', 'sm', 'default', 'lg'],
+      description: 'Size of the ToggleGroup',
+      defaultValue: 'default',
+      control: 'select',
+    },
+    variant: {
+      options: ['default', 'outline'],
+      description: 'Variant of the ToggleGroup',
+      defaultValue: 'default',
+      control: 'select',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: (args) => (
+    <ToggleGroup type="multiple">
+      <ToggleGroup.Item value="bold" aria-label="Toggle bold" {...args}>
+        <IconBold className="h-4 w-4" />
+      </ToggleGroup.Item>
+      <ToggleGroup.Item value="italic" aria-label="Toggle italic" {...args}>
+        <IconItalic className="h-4 w-4" />
+      </ToggleGroup.Item>
+      <ToggleGroup.Item
+        value="strikethrough"
+        aria-label="Toggle strikethrough"
+        {...args}
+      >
+        <IconUnderline className="h-4 w-4" />
+      </ToggleGroup.Item>
+    </ToggleGroup>
+  ),
+};

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

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { IconBold } from '@tabler/icons-react';
+import { Toggle } from 'erxes-ui';
+
+const meta: Meta = {
+  title: 'Components/Toggle',
+  component: Toggle,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      options: ['xs', 'sm', 'default', 'lg'],
+      description: 'Size of the toggle',
+      defaultValue: 'default',
+      control: 'select',
+    },
+    variant: {
+      options: ['default', 'outline'],
+      description: 'Variant of the toggle',
+      defaultValue: 'default',
+      control: 'select',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: (args) => (
+    <Toggle aria-label="Toggle italic" {...args}>
+      <IconBold className="h-4 w-4" />
+    </Toggle>
+  ),
+};

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

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tooltip } from 'erxes-ui/components/tooltip';
+import { Button } from 'erxes-ui/components/button';
+
+const meta: Meta<typeof Tooltip> = {
+  title: 'Components/Tooltip',
+  component: Tooltip,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tooltip>;
+
+export const Default: Story = {
+  render: () => (
+    <Tooltip.Provider>
+      <Tooltip>
+        <Tooltip.Trigger asChild>
+          <Button variant="outline">Hover me</Button>
+        </Tooltip.Trigger>
+        <Tooltip.Content>
+          <p>This is a tooltip</p>
+        </Tooltip.Content>
+      </Tooltip>
+    </Tooltip.Provider>
+  ),
+};
+
+export const WithSideOffset: Story = {
+  render: () => (
+    <Tooltip.Provider>
+      <Tooltip>
+        <Tooltip.Trigger asChild>
+          <Button variant="outline">More space</Button>
+        </Tooltip.Trigger>
+        <Tooltip.Content sideOffset={16}>
+          <p>This tooltip has more space</p>
+        </Tooltip.Content>
+      </Tooltip>
+    </Tooltip.Provider>
+  ),
+};
+
+export const WithCustomSide: Story = {
+  render: () => (
+    <div className="flex space-x-4">
+      <Tooltip.Provider>
+        <Tooltip>
+          <Tooltip.Trigger asChild>
+            <Button variant="outline">Top</Button>
+          </Tooltip.Trigger>
+          <Tooltip.Content side="top">
+            <p>Tooltip on top</p>
+          </Tooltip.Content>
+        </Tooltip>
+
+        <Tooltip>
+          <Tooltip.Trigger asChild>
+            <Button variant="outline">Right</Button>
+          </Tooltip.Trigger>
+          <Tooltip.Content side="right">
+            <p>Tooltip on right</p>
+          </Tooltip.Content>
+        </Tooltip>
+
+        <Tooltip>
+          <Tooltip.Trigger asChild>
+            <Button variant="outline">Bottom</Button>
+          </Tooltip.Trigger>
+          <Tooltip.Content side="bottom">
+            <p>Tooltip on bottom</p>
+          </Tooltip.Content>
+        </Tooltip>
+
+        <Tooltip>
+          <Tooltip.Trigger asChild>
+            <Button variant="outline">Left</Button>
+          </Tooltip.Trigger>
+          <Tooltip.Content side="left">
+            <p>Tooltip on left</p>
+          </Tooltip.Content>
+        </Tooltip>
+      </Tooltip.Provider>
+    </div>
+  ),
+};

package/src/components/accordion.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+
+import { Accordion as AccordionPrimitive } from 'radix-ui';
+import { IconChevronDown } from '@tabler/icons-react';
+
+import { cn } from '../lib/utils';
+
+const AccordionRoot = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn('border-b border-border', className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = 'AccordionItem';
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-1 items-center justify-between py-4 text-left font-semibold transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <IconChevronDown
+        className="shrink-0 opacity-60 transition-transform duration-200 size-4"
+        aria-hidden="true"
+      />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-y-clip text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn('pb-4 pt-0', className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export const Accordion = Object.assign(AccordionRoot, {
+  Item: AccordionItem,
+  Trigger: AccordionTrigger,
+  Content: AccordionContent,
+});