@erxes/ui 0.0.0-stage → 3.2.19-2

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

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Input } from 'erxes-ui/components/input';
+
+const meta: Meta<typeof Input.Number> = {
+  title: 'Components/InputNumber',
+  component: Input.Number,
+  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',
+    },
+    thousandsSeparator: {
+      control: 'text',
+      description: 'Thousands separator of the input element',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Input.Number>;
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Enter number...',
+  },
+};

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

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Kbd } from 'erxes-ui/components/kbd';
+import { Button } from '../button';
+
+const meta: Meta<typeof Kbd> = {
+  title: 'Components/Kbd',
+  component: Kbd,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['background', 'foreground'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Kbd>;
+
+export const Default: Story = {
+  render: (args) => {
+    return (
+      <div className="flex flex-col items-center gap-4">
+        <div className="text-sm text-muted-foreground">
+          Press <Kbd {...args}>Ctrl</Kbd> + <Kbd {...args}>Shift</Kbd> +{' '}
+          <Kbd {...args}>P</Kbd> to open the command palette
+        </div>
+        <div className="text-sm text-muted-foreground">
+          Press <Kbd {...args}>⌘</Kbd> + <Kbd {...args}>K</Kbd> to search
+        </div>
+      </div>
+    );
+  },
+};
+
+export const SingleKeys: Story = {
+  render: () => {
+    return (
+      <div className="flex flex-wrap gap-4">
+        <Kbd>A</Kbd>
+        <Kbd>B</Kbd>
+        <Kbd>C</Kbd>
+        <Kbd>Shift</Kbd>
+        <Kbd>Enter</Kbd>
+        <Kbd>Tab</Kbd>
+        <Kbd>Del</Kbd>
+        <Kbd>⌘</Kbd>
+        <Kbd>⌥</Kbd>
+        <Kbd>⇧</Kbd>
+        <Kbd>⌃</Kbd>
+      </div>
+    );
+  },
+};
+
+export const KeyCombinations: Story = {
+  render: () => {
+    return (
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center gap-1">
+          <Kbd>Alt</Kbd> + <Kbd>Tab</Kbd>
+        </div>
+        <div className="flex items-center gap-1">
+          <Kbd>Ctrl</Kbd> + <Kbd>C</Kbd>
+        </div>
+        <div className="flex items-center gap-1">
+          <Kbd>⌘</Kbd> + <Kbd>⇧</Kbd> + <Kbd>4</Kbd>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const WithButton: Story = {
+  render: () => {
+    return (
+      <div className="flex items-center gap-2">
+        <Button>
+          Add <Kbd>C</Kbd>
+        </Button>
+        <Button variant="outline">
+          Filter
+          <Kbd variant="foreground">F</Kbd>
+        </Button>
+      </div>
+    );
+  },
+};

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

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Label } from 'erxes-ui/components/label';
+import { Checkbox } from 'erxes-ui/components/checkbox';
+import { RadioGroup } from 'erxes-ui/components/radio-group';
+import { Switch } from 'erxes-ui/components/switch';
+
+const meta: Meta<typeof Label> = {
+  title: 'Components/Label',
+  component: Label,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'peer'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Label>;
+
+export const Default: Story = {
+  render: (args) => {
+    return (
+      <div className="grid w-full max-w-sm items-center gap-1.5">
+        <Label htmlFor="email" {...args}>
+          Email
+        </Label>
+      </div>
+    );
+  },
+};
+
+export const WithCheckbox: Story = {
+  render: () => {
+    return (
+      <div className="flex items-center space-x-2">
+        <Checkbox id="terms" />
+        <Label htmlFor="terms" variant="peer">
+          Accept terms and conditions
+        </Label>
+      </div>
+    );
+  },
+};
+
+export const WithRadioGroup: Story = {
+  render: () => {
+    return (
+      <RadioGroup defaultValue="option-one">
+        <div className="flex items-center space-x-2">
+          <RadioGroup.Item value="option-one" id="option-one" />
+          <Label htmlFor="option-one" variant="peer">
+            Option One
+          </Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <RadioGroup.Item value="option-two" id="option-two" />
+          <Label htmlFor="option-two" variant="peer">
+            Option Two
+          </Label>
+        </div>
+      </RadioGroup>
+    );
+  },
+};
+
+export const WithSwitch: Story = {
+  render: () => {
+    return (
+      <div className="flex items-center space-x-2">
+        <Switch id="airplane-mode" />
+        <Label htmlFor="airplane-mode" variant="peer">
+          Airplane Mode
+        </Label>
+      </div>
+    );
+  },
+};

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

@@ -0,0 +1,178 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { MultipleSelector, MultiSelectOption } from 'erxes-ui/components';
+
+const meta: Meta<typeof MultipleSelector> = {
+  title: 'Components/MultipleSelector',
+  component: MultipleSelector,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof MultipleSelector>;
+
+const options: MultiSelectOption[] = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'orange', label: 'Orange' },
+  { value: 'grape', label: 'Grape' },
+  { value: 'strawberry', label: 'Strawberry' },
+  { value: 'watermelon', label: 'Watermelon' },
+  { value: 'kiwi', label: 'Kiwi' },
+  { value: 'mango', label: 'Mango' },
+  { value: 'pineapple', label: 'Pineapple' },
+  { value: 'peach', label: 'Peach' },
+];
+
+const groupedOptions: MultiSelectOption[] = [
+  { value: 'apple', label: 'Apple', group: 'fruits' },
+  { value: 'banana', label: 'Banana', group: 'fruits' },
+  { value: 'orange', label: 'Orange', group: 'fruits' },
+  { value: 'carrot', label: 'Carrot', group: 'vegetables' },
+  { value: 'broccoli', label: 'Broccoli', group: 'vegetables' },
+  { value: 'cucumber', label: 'Cucumber', group: 'vegetables' },
+  { value: 'beef', label: 'Beef', group: 'meat' },
+  { value: 'chicken', label: 'Chicken', group: 'meat' },
+  { value: 'pork', label: 'Pork', group: 'meat' },
+];
+
+export const Default: Story = {
+  render: () => {
+    return (
+      <div className="w-[400px]">
+        <MultipleSelector
+          placeholder="Select fruits..."
+          defaultOptions={options}
+          onChange={(values: MultiSelectOption[]) => console.log(values)}
+        />
+      </div>
+    );
+  },
+};
+
+export const WithDefaultValue: Story = {
+  render: () => {
+    return (
+      <div className="w-[400px]">
+        <MultipleSelector
+          placeholder="Select fruits..."
+          defaultOptions={options}
+          value={[options[0], options[2]]}
+          onChange={(values: MultiSelectOption[]) => console.log(values)}
+        />
+      </div>
+    );
+  },
+};
+
+export const WithFixedOptions: Story = {
+  render: () => {
+    return (
+      <div className="w-[400px]">
+        <MultipleSelector
+          placeholder="Select fruits..."
+          defaultOptions={[{ ...options[0], fixed: true }, ...options.slice(1)]}
+          onChange={(values: MultiSelectOption[]) => console.log(values)}
+        />
+      </div>
+    );
+  },
+};
+
+export const WithMaxSelected: Story = {
+  render: () => {
+    return (
+      <div className="w-[400px]">
+        <MultipleSelector
+          placeholder="Select up to 3 fruits..."
+          defaultOptions={options}
+          maxSelected={3}
+          onChange={(values: MultiSelectOption[]) => console.log(values)}
+        />
+      </div>
+    );
+  },
+};
+
+export const WithGroupedOptions: Story = {
+  render: () => {
+    return (
+      <div className="w-[400px]">
+        <MultipleSelector
+          placeholder="Select items..."
+          defaultOptions={groupedOptions}
+          onChange={(values: MultiSelectOption[]) => console.log(values)}
+        />
+      </div>
+    );
+  },
+};
+
+export const WithSearch: Story = {
+  render: () => {
+    return (
+      <div className="w-[400px]">
+        <MultipleSelector
+          placeholder="Search and select fruits..."
+          defaultOptions={options}
+          onSearchSync={(value: string) =>
+            options.filter((option) =>
+              option.label.toLowerCase().includes(value.toLowerCase()),
+            )
+          }
+          onChange={(values: MultiSelectOption[]) => console.log(values)}
+        />
+      </div>
+    );
+  },
+};
+
+export const WithAsyncSearch: Story = {
+  render: () => {
+    return (
+      <div className="w-[400px]">
+        <MultipleSelector
+          placeholder="Search and select fruits..."
+          triggerSearchOnFocus={true}
+          onSearch={async (value: string) => {
+            // Simulate API call
+            await new Promise((resolve) => setTimeout(resolve, 1000));
+            return options.filter((option) =>
+              option.label.toLowerCase().includes(value.toLowerCase()),
+            );
+          }}
+          onChange={(values: MultiSelectOption[]) => console.log(values)}
+        />
+      </div>
+    );
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const ControlledExample = () => {
+      const [selectedOptions, setSelectedOptions] = useState<
+        MultiSelectOption[]
+      >([options[0]]);
+
+      return (
+        <div className="w-[400px]">
+          <MultipleSelector
+            placeholder="Controlled select..."
+            defaultOptions={options}
+            value={selectedOptions}
+            onChange={setSelectedOptions}
+          />
+          <div className="mt-4">
+            <p>Selected: {selectedOptions.map((o) => o.label).join(', ')}</p>
+          </div>
+        </div>
+      );
+    };
+
+    return <ControlledExample />;
+  },
+};

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

@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Popover } from 'erxes-ui/components/popover';
+import { Button } from 'erxes-ui/components/button';
+import { Input } from 'erxes-ui/components/input';
+import { Label } from 'erxes-ui/components/label';
+
+const meta: Meta<typeof Popover> = {
+  title: 'Components/Popover',
+  component: Popover,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Popover>;
+
+export const Default: Story = {
+  render: () => (
+    <Popover>
+      <Popover.Trigger asChild>
+        <Button variant="outline">Open popover</Button>
+      </Popover.Trigger>
+      <Popover.Content 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 className="grid gap-2">
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="width">Width</Label>
+              <Input
+                id="width"
+                defaultValue="100%"
+                className="col-span-2 h-8"
+              />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="height">Height</Label>
+              <Input
+                id="height"
+                defaultValue="25px"
+                className="col-span-2 h-8"
+              />
+            </div>
+          </div>
+        </div>
+      </Popover.Content>
+    </Popover>
+  ),
+};
+
+export const Placement: Story = {
+  render: () => (
+    <div className="flex items-center justify-center space-x-4">
+      <Popover>
+        <Popover.Trigger asChild>
+          <Button variant="outline">Top</Button>
+        </Popover.Trigger>
+        <Popover.Content side="top" className="w-40">
+          <div className="text-center">
+            <p>This popover appears on top</p>
+          </div>
+        </Popover.Content>
+      </Popover>
+
+      <Popover>
+        <Popover.Trigger asChild>
+          <Button variant="outline">Right</Button>
+        </Popover.Trigger>
+        <Popover.Content side="right" className="w-40">
+          <div className="text-center">
+            <p>This popover appears on the right</p>
+          </div>
+        </Popover.Content>
+      </Popover>
+
+      <Popover>
+        <Popover.Trigger asChild>
+          <Button variant="outline">Bottom</Button>
+        </Popover.Trigger>
+        <Popover.Content side="bottom" className="w-40">
+          <div className="text-center">
+            <p>This popover appears on the bottom</p>
+          </div>
+        </Popover.Content>
+      </Popover>
+
+      <Popover>
+        <Popover.Trigger asChild>
+          <Button variant="outline">Left</Button>
+        </Popover.Trigger>
+        <Popover.Content side="left" className="w-40">
+          <div className="text-center">
+            <p>This popover appears on the left</p>
+          </div>
+        </Popover.Content>
+      </Popover>
+    </div>
+  ),
+};

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

@@ -0,0 +1,97 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { RadioGroup } from 'erxes-ui/components/radio-group';
+import { Label } from 'erxes-ui/components/label';
+
+const meta: Meta<typeof RadioGroup> = {
+  title: 'Components/RadioGroup',
+  component: RadioGroup,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    defaultValue: {
+      control: 'text',
+      description:
+        'The value of the radio item that should be checked by default',
+    },
+    disabled: {
+      control: 'boolean',
+      description:
+        'When true, prevents the user from interacting with the radio items',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RadioGroup>;
+
+export const Default: Story = {
+  render: () => (
+    <RadioGroup defaultValue="option-1">
+      <div className="flex items-center space-x-2">
+        <RadioGroup.Item value="option-1" id="option-1" />
+        <Label variant="peer" htmlFor="option-1">
+          Option 1
+        </Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroup.Item value="option-2" id="option-2" />
+        <Label variant="peer" htmlFor="option-2">
+          Option 2
+        </Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroup.Item value="option-3" id="option-3" />
+        <Label variant="peer" htmlFor="option-3">
+          Option 3
+        </Label>
+      </div>
+    </RadioGroup>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <RadioGroup defaultValue="option-1" disabled>
+      <div className="flex items-center space-x-2">
+        <RadioGroup.Item value="option-1" id="disabled-1" />
+        <Label variant="peer" htmlFor="disabled-1">
+          Disabled Option 1
+        </Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroup.Item value="option-2" id="disabled-2" />
+        <Label variant="peer" htmlFor="disabled-2">
+          Disabled Option 2
+        </Label>
+      </div>
+    </RadioGroup>
+  ),
+};
+
+export const Horizontal: Story = {
+  render: () => (
+    <RadioGroup defaultValue="option-1" className="flex flex-row space-x-4">
+      <div className="flex items-center space-x-2">
+        <RadioGroup.Item value="option-1" id="horizontal-1" />
+        <Label variant="peer" htmlFor="horizontal-1">
+          Option 1
+        </Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroup.Item value="option-2" id="horizontal-2" />
+        <Label variant="peer" htmlFor="horizontal-2">
+          Option 2
+        </Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroup.Item value="option-3" id="horizontal-3" />
+        <Label variant="peer" htmlFor="horizontal-3">
+          Option 3
+        </Label>
+      </div>
+    </RadioGroup>
+  ),
+};

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

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Resizable } from 'erxes-ui/components/resizable';
+import { Button } from 'erxes-ui/components/button';
+
+const meta: Meta<typeof Resizable> = {
+  title: 'Components/Resizable',
+  component: Resizable.PanelGroup,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Resizable>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="w-[800px] h-[400px] border rounded-md">
+      <Resizable.PanelGroup direction="horizontal">
+        <Resizable.Panel className="bg-muted p-4">
+          <div className="h-full flex items-center justify-center">
+            <p>Left Panel</p>
+          </div>
+        </Resizable.Panel>
+        <Resizable.Handle />
+        <Resizable.Panel className="p-4">
+          <div className="h-full flex items-center justify-center">
+            <p>Right Panel</p>
+          </div>
+        </Resizable.Panel>
+      </Resizable.PanelGroup>
+    </div>
+  ),
+};
+
+export const Vertical: Story = {
+  render: () => (
+    <div className="w-[400px] h-[400px] border rounded-md">
+      <Resizable.PanelGroup direction="vertical">
+        <Resizable.Panel className="bg-muted p-4">
+          <div className="h-full flex items-center justify-center">
+            <p>Top Panel</p>
+          </div>
+        </Resizable.Panel>
+        <Resizable.Handle />
+        <Resizable.Panel className="p-4">
+          <div className="h-full flex items-center justify-center">
+            <p>Bottom Panel</p>
+          </div>
+        </Resizable.Panel>
+      </Resizable.PanelGroup>
+    </div>
+  ),
+};
+
+export const WithMinMax: Story = {
+  render: () => (
+    <div className="w-[400px] h-[400px] border rounded-md">
+      <Resizable.PanelGroup direction="horizontal">
+        <Resizable.Panel className="bg-muted p-4" minSize={20} maxSize={70}>
+          <div className="h-full flex items-center justify-center">
+            <p>Min: 20%, Max: 70%</p>
+          </div>
+        </Resizable.Panel>
+        <Resizable.Handle />
+        <Resizable.Panel className="p-4">
+          <div className="h-full flex items-center justify-center">
+            <p>Content Panel</p>
+          </div>
+        </Resizable.Panel>
+      </Resizable.PanelGroup>
+    </div>
+  ),
+};