pixel-react 1.6.6 → 1.6.8

package/src/components/MultiSelect/MultiSelect.stories.tsx

@@ -1,273 +1,290 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import MultiSelect from './MultiSelect';
-import { useEffect, useState } from 'react';
-import { Option } from './MultiSelectTypes';
-import React from 'react';
-
-const meta: Meta<typeof MultiSelect> = {
-  title: 'Components/MultiSelect',
-  component: MultiSelect,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof MultiSelect>;
-
-const defaultArgs = {
-  label: 'Fruits',
-  disabled: false,
-};
-
-export const Default: Story = {
-  args: {
-    ...defaultArgs,
-    required: true,
-    withSelectButton: true,
-
-    options: [
-      { label: 'Apple', value: 'apple' },
-      { label: 'Banana', value: 'banana' },
-      { label: 'Cherry', value: 'cherry' },
-      { label: 'Date', value: 'date' },
-      { label: 'Grape', value: 'grape' },
-      { label: 'Kiwi', value: 'kiwi' },
-      { label: 'Mango', value: 'mango' },
-      { label: 'Orange', value: 'orange' },
-      { label: 'Peach', value: 'peach' },
-      { label: 'Strawberry', value: 'strawberry' },
-    ],
-  },
-};
-
-export const NameAccessor: Story = {
-  render: () => {
-    const [options, setOptions] = useState<Option[]>([]);
-    const [selectedOptions, setSelectedOptions] = useState<Option[]>([
-      { name: 'Apple', fruit: 'apple' },
-    ]);
-    const onChange = (options: Option[]) => {
-      setSelectedOptions(options);
-    };
-    useEffect(() => {
-      setOptions([
-        { name: 'Apple', fruit: 'apple' },
-        { name: 'Banana', fruit: 'banana' },
-        {
-          name: 'CherryCherryCherryCherryCherryCherryCherryCherryCherryCherry',
-          fruit: 'cherry',
-        },
-        { name: 'Date', fruit: 'date' },
-        { name: 'Kiwi', fruit: 'kiwi' },
-        { name: 'Mango', fruit: 'mango' },
-        { name: 'Orange', fruit: 'orange' },
-        { name: 'Peach', fruit: 'peach' },
-        { name: 'Strawberry', fruit: 'strawberry' },
-      ]);
-    }, []);
-    return (
-      <MultiSelect
-        labelAccessor="name"
-        label={'Fruits'}
-        required
-        options={options}
-        selectedOptions={selectedOptions}
-        onChange={onChange}
-        valueAccessor="fruit"
-      />
-    );
-  },
-};
-
-export const Default3: Story = {
-  args: {
-    ...defaultArgs,
-  },
-};
-export const EmailGroup: Story = {
-  render: () => {
-    const [options,setOptions] = useState([
-      {
-        label: 'Sample1@gmail.com',
-        value: 'sample1@gmail.com',
-        isDisabled: true,
-      },
-      { label: 'Sample2@gmail.com', value: 'sample2@gmail.com' },
-    ]);
-    const [selectedOptions, setSelectedOptions] = useState<
-      { label?: string; value?: string; isDisabled?: boolean }[]
-    >([
-      {
-        label: 'Sample1@gmail.com',
-        value: 'sample1@gmail.com',
-        isDisabled: true,
-      },
-    ]);
-    const onChange = (
-      options: { label?: string; value?: string; isDisabled?: boolean }[]
-    ) => {
-      setSelectedOptions(options);
-    };
-    const onEnter=(newOption:string)=>{
-setOptions(prev=>[...prev,{label:newOption,value:newOption}])
-setSelectedOptions(prev=>[...prev,{label:newOption,value:newOption}])
-    }
-    return (
-      <MultiSelect
-        label={'Enter Email'}
-        type="email"
-        required
-        options={options}
-        selectedOptions={selectedOptions}
-        onChange={onChange}
-        acceptNewOption={true}
-        displayCount={true}
-        labelAccessor="label"
-        onEnter={onEnter}
-      />
-    );
-  },
-};
-
-export const Controlled: Story = {
-  render: () => {
-    const [options, setOptions] = useState<Option[]>([]);
-    const [selectedOptions, setSelectedOptions] = useState<
-      { label?: string; value?: string }[]
-    >([]);
-    const onChange = (options: { label?: string; value?: string }[]) => {
-      setSelectedOptions(options);
-    };
-    useEffect(() => {
-      setOptions([
-        { label: 'Apple', value: 'apple' },
-        { label: 'Banana', value: 'banana' },
-        { label: 'Cherry', value: 'cherry' },
-        { label: 'Date', value: 'date' },
-        {
-          label:
-            'GrapeGrapeGrapeGrapeGrapeGrapeGrapeGrapeGrapeGrapeGrapeGrapeGrapeGrapeGrapeGrapeGrapeGrapeGrapeGrapeGrapeGrapeGrapeGrape123',
-          value: 'grape',
-        },
-        { label: 'Kiwi', value: 'kiwi' },
-        { label: 'Mango', value: 'mango' },
-        { label: 'Orange', value: 'orange' },
-        { label: 'Peach', value: 'peach' },
-        { label: 'Strawberry', value: 'strawberry' },
-      ]);
-    }, []);
-    return (
-      <MultiSelect
-        label={'Fruits'}
-        required
-        options={options}
-        selectedOptions={selectedOptions}
-        onChange={onChange}
-      />
-    );
-  },
-};
-
-export const Labels: Story = {
-  render: () => {
-    const [options] = useState<Option[]>([
-      {
-        label: 'Funtional Testing',
-        value: 'functional testing',
-      },
-      {
-        label: 'Smoke Testing',
-        value: 'smoke testing',
-      },
-      {
-        label: 'Regression Testing',
-        value: 'regression Testing',
-      },
-      {
-        label: 'Integration Testing',
-        value: 'integration testing',
-      },
-    ]);
-
-    const [selectedOptions, setSelectedOptions] = useState<Option[]>([]);
-    const onChange = (options: { label?: string; value?: string }[]) => {
-      setSelectedOptions(options);
-    };
-
-    return (
-      <div style={{ width: '250px' }}>
-        <MultiSelect
-          required
-          label={'Labels'}
-          variant="labels"
-          options={options}
-          selectedOptions={selectedOptions}
-          onChange={onChange}
-          onLabelPlusIconClick={() => {
-            alert('clicked on label plus');
-          }}
-          onManageLabelsClick={() => {
-            alert('clicked on Manage labels m');
-          }}
-        />
-      </div>
-    );
-  },
-};
-
-export const Machines: Story = {
-  render: () => {
-    const [options] = useState<Option[]>([
-      {
-        label: 'Machine 1',
-        value: 'machine 1',
-      },
-      {
-        label: 'Machine 2',
-        value: 'machine 2',
-      },
-      {
-        label: 'Machine 3',
-        value: 'machine 3',
-      },
-      {
-        label: 'Machine 4',
-        value: 'machine 4',
-      },
-    ]);
-
-    const [selectedOptions, setSelectedOptions] = useState<Option[]>([]);
-
-    const handleSelectChange = (machines: Option[]) => {
-      setSelectedOptions(machines);
-    };
-
-    return (
-      <div style={{ width: '250px' }}>
-        <div>
-          {selectedOptions.map((machine, index) => (
-            <MultiSelect
-              key={index}
-              label="Machines"
-              variant="machines"
-              options={options}
-              onSelectButtonClick={handleSelectChange}
-              highlightedMachine={machine.label}
-              selectedOptions={selectedOptions} // Pass shared state
-            />
-          ))}
-          <MultiSelect
-            label="Machines"
-            withSelectButton
-            options={options}
-            onSelectButtonClick={handleSelectChange}
-            selectedOptions={selectedOptions}
-          />
-        </div>
-      </div>
-    );
-  },
-};
-
-export default meta;
+import type { Meta, StoryObj } from '@storybook/react';
+import MultiSelect from './MultiSelect';
+import { useEffect, useState } from 'react';
+import { Option } from './MultiSelectTypes';
+import React from 'react';
+
+const meta: Meta<typeof MultiSelect> = {
+  title: 'Components/MultiSelect',
+  component: MultiSelect,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof MultiSelect>;
+
+const defaultArgs = {
+  label: 'Fruits',
+  disabled: false,
+};
+
+export const Default: Story = {
+  args: {
+    ...defaultArgs,
+    required: true,
+    withSelectButton: true,
+
+    options: [
+      { label: 'Apple', value: 'apple' },
+      { label: 'Banana', value: 'banana' },
+      { label: 'Cherry', value: 'cherry' },
+      { label: 'Date', value: 'date' },
+      { label: 'Grape', value: 'grape' },
+      { label: 'Kiwi', value: 'kiwi' },
+      { label: 'Mango', value: 'mango' },
+      { label: 'Orange', value: 'orange' },
+      { label: 'Peach', value: 'peach' },
+      { label: 'Strawberry', value: 'strawberry' },
+    ],
+  },
+};
+
+export const NameAccessor: Story = {
+  render: () => {
+    const [options, setOptions] = useState<Option[]>([]);
+    const [selectedOptions, setSelectedOptions] = useState<Option[]>([
+      { name: 'Apple', fruit: 'apple' },
+    ]);
+    const onChange = (options: Option[]) => {
+      setSelectedOptions(options);
+    };
+    useEffect(() => {
+      setOptions([
+        { name: 'Apple', fruit: 'apple' },
+        { name: 'Banana', fruit: 'banana' },
+        {
+          name: 'CherryCherryCherryCherryCherryCherryCherryCherryCherryCherry',
+          fruit: 'cherry',
+        },
+        { name: 'Date', fruit: 'date' },
+        { name: 'Kiwi', fruit: 'kiwi' },
+        { name: 'Mango', fruit: 'mango' },
+        { name: 'Orange', fruit: 'orange' },
+        { name: 'Peach', fruit: 'peach' },
+        { name: 'Strawberry', fruit: 'strawberry' },
+      ]);
+    }, []);
+    return (
+      <MultiSelect
+        labelAccessor="name"
+        label={'Fruits'}
+        required
+        options={options}
+        selectedOptions={selectedOptions}
+        onChange={onChange}
+        valueAccessor="fruit"
+      />
+    );
+  },
+};
+
+
+export const EmailGroup: Story = {
+  render: () => {
+    const [options, setOptions] = useState([
+      {
+        label: 'Sample1@gmail.com',
+        value: 'sample1@gmail.com',
+        isDisabled: true,
+      },
+      { label: 'Sample2@gmail.com', value: 'sample2@gmail.com' },
+    ]);
+    const [selectedOptions, setSelectedOptions] = useState<
+      { label?: string; value?: string; isDisabled?: boolean }[]
+    >([
+      {
+        label: 'Sample1@gmail.com',
+        value: 'sample1@gmail.com',
+        isDisabled: true,
+      },
+    ]);
+    const onChange = (
+      options: { label?: string; value?: string; isDisabled?: boolean }[]
+    ) => {
+      setSelectedOptions(options);
+    };
+    const onEnter = (newOption: string) => {
+      setOptions(prev => [...prev, { label: newOption, value: newOption }])
+      setSelectedOptions(prev => [...prev, { label: newOption, value: newOption }])
+    }
+    return (
+      <MultiSelect
+        label={'Enter Email'}
+        type="email"
+        required
+        options={options}
+        selectedOptions={selectedOptions}
+        onChange={onChange}
+        acceptNewOption={true}
+        displayCount={true}
+        labelAccessor="label"
+        valueAccessor='value'
+        onEnter={onEnter}
+      />
+    );
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [options, setOptions] = useState<Option[]>([]);
+    const [selectedOptions, setSelectedOptions] = useState<
+      { label?: string; value?: string }[]
+    >([]);
+    const onChange = (options: { label?: string; value?: string }[]) => {
+      setSelectedOptions(options);
+    };
+    useEffect(() => {
+      setOptions([
+        { label: 'Apple', value: 'apple' },
+        { label: 'Banana', value: 'banana' },
+        { label: 'Cherry', value: 'cherry' },
+        { label: 'Date', value: 'date' },
+        {
+          label:
+            'GrapeGrapeGrapeGrapeGrapeGrapeGrapeGrapeGrapeGrapeGrapeGrapeGrapeGrapeGrapeGrapeGrapeGrapeGrapeGrapeGrapeGrapeGrapeGrape123',
+          value: 'grape',
+        },
+        { label: 'Kiwi', value: 'kiwi' },
+        { label: 'Mango', value: 'mango' },
+        { label: 'Orange', value: 'orange' },
+        { label: 'Plum', value: 'plum' },
+        { label: 'Berry', value: 'berry' },
+        { label: 'Watermelon', value: 'watermelon' },
+        { label: 'Guava', value: 'guava' },
+        { label: 'Pineapple', value: 'pineapple' },
+        { label: 'Strawberry', value: 'strawberry' },
+        { label: 'Pear', value: 'pear' },
+        { label: 'Peach', value: 'peach' },
+        { label: 'Lemon', value: 'lemon' },
+        { label: 'Papaya', value: 'papaya' },
+        { label: 'Apricot', value: 'apricot' },
+        { label: 'Raspberry', value: 'raspberry' },
+        { label: 'Pomegranate', value: 'pomegranate' },
+        { label: 'Cantaloupe', value: 'cantaloupe' },
+        { label: 'Lychee', value: 'lychee' }
+      ]);
+    }, []);
+    return (
+      <MultiSelect
+        label={'Fruits'}
+        required
+        options={options}
+        displayCount
+        selectedOptions={selectedOptions}
+        onChange={onChange}
+      />
+    );
+  },
+};
+
+export const Labels: Story = {
+  render: () => {
+    const [options] = useState<Option[]>([
+      {
+        label: 'Funtional Testing',
+        value: 'functional testing',
+      },
+      {
+        label: 'Smoke Testing',
+        value: 'smoke testing',
+      },
+      {
+        label: 'Regression Testing',
+        value: 'regression Testing',
+      },
+      {
+        label: 'Integration Testing',
+        value: 'integration testing',
+      },
+    ]);
+
+    const [selectedOptions, setSelectedOptions] = useState<Option[]>([]);
+    const onChange = (options: { label?: string; value?: string }[]) => {
+      setSelectedOptions(options);
+    };
+
+    return (
+      <div style={{ width: '250px' }}>
+        <MultiSelect
+          required
+          label={'Labels'}
+          variant="labels"
+          options={options}
+          selectedOptions={selectedOptions}
+          onChange={onChange}
+          onLabelPlusIconClick={() => {
+            alert('clicked on label plus');
+          }}
+          onManageLabelsClick={() => {
+            alert('clicked on Manage labels m');
+          }}
+        />
+      </div>
+    );
+  },
+};
+
+export const Machines: Story = {
+  render: () => {
+    const [options] = useState<Option[]>([
+      {
+        label: <h2>Machine 1</h2>,
+        value: 'machine 1',
+      },
+      {
+        label: <h2>Machine 2</h2>,
+        value: 'machine 2',
+      },
+      {
+        label: <h2>Machine 3</h2>,
+        value: 'machine 3',
+      },
+      {
+        label: <h2>Machine 4</h2>,
+        value: 'machine 4',
+      },
+    ]);
+
+    const [selectedOptions, setSelectedOptions] = useState<Option[]>([]);
+
+    const handleSelectChange = (machines: Option[]) => {
+      setSelectedOptions(machines);
+    };
+
+    return (
+      <div style={{ width: '250px' }}>
+        <div>
+          {selectedOptions.map((machine, index) => (
+            <MultiSelect
+              key={index}
+              label="Machines"
+              variant="machines"
+              //  labelAccessor='label'
+            // valueAccessor='value'
+              options={options}
+              onSelectButtonClick={handleSelectChange}
+              highlightedMachine={machine.label}
+              selectedOptions={selectedOptions} // Pass shared state
+            />
+          ))}
+          <MultiSelect
+            label="Machines"
+             labelAccessor='label'
+            valueAccessor='value'
+            withSelectButton
+            options={options}
+            onSelectButtonClick={handleSelectChange}
+            selectedOptions={selectedOptions}
+          />
+        </div>
+      </div>
+    );
+  },
+};
+
+
+
+export default meta;