pixel-react 1.6.9 → 1.7.0

package/src/components/Select/Select.stories.tsx

@@ -1,355 +1,355 @@
-import React, { useState } from 'react';
-
-import type { Meta, StoryObj } from '@storybook/react';
-import Select from './Select';
-import { Option } from './types';
-import RadioGroup from '../RadioGroup';
-
-const meta: Meta<typeof Select> = {
-  title: 'Components/Select',
-  component: Select,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof Select>;
-
-export const Primary: Story = {
-  args: {
-    label: 'Select',
-    labelAccessor: 'name',
-    valueAccessor: 'value',
-    optionsList: [
-      {
-        label: 'fire-flink-LIC4900-onPrem',
-        value: 'fire-flink-LIC4900-onPrem',
-        name: 'fireflink',
-        disable: true,
-      },
-      {
-        label: 'fire-flink-LIC3179',
-        value: 'fire-flink-LIC3179',
-        name: 'local',
-        disable: false,
-      },
-      {
-        label: 'fire-flink-LIC4937',
-        value: 'fire-flink-LIC4937',
-        name: 'browser stack',
-      },
-      {
-        label: 'fire-flink-LIC4999',
-        value: 'fire-flink-LIC4999',
-        name: 'lambda test',
-      },
-    ],
-  },
-};
-
-export const WithError: Story = {
-  args: {
-    label: 'Select',
-    optionsList: [
-      {
-        label: 'fire-flink-LIC4900-onPrem',
-        value: 'fire-flink-LIC4900-onPrem',
-      },
-      {
-        label: 'fire-flink-LIC3179',
-        value: 'fire-flink-LIC3179',
-      },
-      {
-        label: 'fire-flink-LIC4937',
-        value: 'fire-flink-LIC4937',
-      },
-      {
-        label: 'fire-flink-LIC4999',
-        value: 'fire-flink-LIC4999',
-      },
-    ],
-    errorMsg: 'Please select a option',
-  },
-};
-
-export const WithoutLabel: Story = {
-  args: {
-    showLabel: false,
-    optionsList: [
-      {
-        label: 'fire-flink-LIC4900-onPrem',
-        value: 'fire-flink-LIC4900-onPrem',
-      },
-      {
-        label: 'fire-flink-LIC3179',
-        value: 'fire-flink-LIC3179',
-      },
-      {
-        label: 'fire-flink-LIC4937',
-        value: 'fire-flink-LIC4937',
-      },
-      {
-        label: 'fire-flink-LIC4999',
-        value: 'fire-flink-LIC4999',
-      },
-    ],
-  },
-};
-
-export const EmptyOptions: Story = {
-  args: {
-    label: 'Select',
-    optionsList: [],
-    errorMsg: 'No options available',
-  },
-};
-
-export const Disable: Story = {
-  args: {
-    label: 'Select',
-    optionsList: [],
-    disabled: true,
-  },
-};
-
-export const WithInitialValue: Story = {
-  args: {
-    label: 'Select',
-    selectedOption: {
-      label: 'fire-flink-LIC4900-onPrem',
-      value: 'fire-flink-LIC4900-onPrem',
-    },
-    optionsList: [
-      {
-        label: 'fire-flink-LIC4900-onPrem',
-        value: 'fire-flink-LIC4900-onPrem',
-      },
-      {
-        label: 'fire-flink-LIC3179',
-        value: 'fire-flink-LIC3179',
-      },
-      {
-        label: 'fire-flink-LIC4937',
-        value: 'fire-flink-LIC4937',
-      },
-      {
-        label: 'fire-flink-LIC4999',
-        value: 'fire-flink-LIC4999',
-      },
-    ],
-  },
-};
-
-export const OptionSelection: Story = {
-  render: () => {
-    const optionsList = [
-      {
-        label: 'fire-flink-LIC4900-onPrem',
-        value: 'fire-flink-LIC4900-onPrem',
-      },
-      {
-        label: 'fire-flink-LIC3179',
-        value: 'fire-flink-LIC3179',
-      },
-      {
-        label: 'fire-flink-LIC4937',
-        value: 'fire-flink-LIC4937',
-      },
-      {
-        label: 'fire-flink-LIC4999',
-        value: 'fire-flink-LIC4999',
-      },
-    ];
-
-    const [selectedOption, setSelectedOption] = useState<Option>({
-      label: 'fire-flink-LIC3179',
-      value: 'fire-flink-LIC3179',
-    });
-
-    const handleChange = (option: Option) => {
-      setSelectedOption(option);
-    };
-
-    return (
-      <Select
-        label="Option"
-        optionsList={optionsList}
-        selectedOption={selectedOption}
-        onChange={handleChange}
-      />
-    );
-  },
-};
-
-export const CustomJSX: Story = {
-  render: () => {
-    const optionsList: Option[] = [
-      {
-        label: <p style={{ color: 'red' }}>Option 1</p>,
-        value: 'option 1',
-      },
-      {
-        label: <p style={{ color: 'green' }}>Option 2</p>,
-        value: 'option 2',
-      },
-      {
-        label: <p style={{ color: 'beige' }}>Option 3</p>,
-        value: 'option 3',
-      },
-      {
-        label: <p style={{ color: 'crimson' }}>Option 4</p>,
-        value: 'option 4',
-      },
-      {
-        label: <p style={{ color: 'cyan' }}>Option 5</p>,
-        value: 'option 5',
-      },
-      {
-        label: <p style={{ color: 'red' }}>Option 6</p>,
-        value: 'option 6',
-      },
-    ];
-
-    const [selectedOption, setSelectedOption] = useState<Option>({
-      label: <p style={{ color: 'red' }}>Option 6</p>,
-      value: 'option 6',
-    });
-
-    const handleChange = (option: Option) => {
-      setSelectedOption(option);
-    };
-
-    return (
-      <Select
-        label="Option"
-        optionsList={optionsList}
-        selectedOption={selectedOption}
-        onChange={handleChange}
-      />
-    );
-  },
-};
-
-export const updateOptionFromOutside: Story = {
-  render: () => {
-    const [selectedOption, setSelectedOption] = useState<Option>({
-      label: 'fire-flink-LIC4900-onPrem',
-      value: 'fire-flink-LIC4900-onPrem',
-    });
-
-    const optionsList = [
-      {
-        label: 'fire-flink-LIC4900-onPrem',
-        value: 'fire-flink-LIC4900-onPrem',
-      },
-      {
-        label: 'fire-flink-LIC3179',
-        value: 'fire-flink-LIC3179',
-      },
-      {
-        label: 'fire-flink-LIC4937',
-        value: 'fire-flink-LIC4937',
-      },
-      {
-        label: 'fire-flink-LIC4999',
-        value: 'fire-flink-LIC4999',
-      },
-    ];
-
-    const handleChange = (option: Option) => {
-      setSelectedOption(option);
-    };
-
-    const radioOptions = [
-      {
-        label: 'fire-flink-LIC4900-onPrem',
-        value: 'fire-flink-LIC4900-onPrem',
-      },
-      {
-        label: 'fire-flink-LIC3179',
-        value: 'fire-flink-LIC3179',
-      },
-      {
-        label: 'fire-flink-LIC4937',
-        value: 'fire-flink-LIC4937',
-      },
-      {
-        label: 'fire-flink-LIC4999',
-        value: 'fire-flink-LIC4999',
-      },
-    ];
-    const [selectedRadioOption, setSelectedRadioOption] = useState('option2');
-    const handleOptionChange = (option: Option) => {
-      setSelectedRadioOption(option.value);
-      setSelectedOption(option);
-    };
-
-    return (
-      <div>
-        <Select
-          optionsList={optionsList}
-          selectedOption={selectedOption}
-          onChange={handleChange}
-          showLabel={false}
-        />
-        <RadioGroup
-          selectedValue={selectedRadioOption}
-          onChange={handleOptionChange}
-          name="option"
-          options={radioOptions}
-        />
-      </div>
-    );
-  },
-};
-
-export const IconOptionSelection: Story = {
-  render: () => {
-    const optionsList = [
-      {
-        label: 'fire-flink-LIC4900-onPrem',
-        value: 'fire-flink-LIC4900-onPrem',
-        iconName: 'local',
-      },
-      {
-        label: 'fire-flink-LIC3179',
-        value: 'fire-flink-LIC3179',
-        iconName: 'chrome_icon',
-      },
-      {
-        label: 'fire-flink-LIC4937',
-        value: 'fire-flink-LIC4937',
-        iconName: 'mac_icon',
-      },
-      {
-        label: 'fire-flink-LIC4999',
-        value: 'fire-flink-LIC4999',
-        iconName: 'web_icon',
-      },
-    ];
-
-    const [selectedOption, setSelectedOption] = useState<Option>({
-      label: 'fire-flink-LIC3179',
-      value: 'fire-flink-LIC3179',
-      iconName: 'local',
-    });
-
-    const handleChange = (option: Option) => {
-      setSelectedOption(option);
-    };
-
-    return (
-      <Select
-        label="Option"
-        optionsList={optionsList}
-        selectedOption={selectedOption}
-        onChange={handleChange}
-        showIcon={true}
-        width={200}
-      />
-    );
-  },
-};
-
-export default meta;
+import React, { useState } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import Select from './Select';
+import { Option } from './types';
+import RadioGroup from '../RadioGroup';
+
+const meta: Meta<typeof Select> = {
+  title: 'Components/Select',
+  component: Select,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Select>;
+
+export const Primary: Story = {
+  args: {
+    label: 'Select',
+    labelAccessor: 'name',
+    valueAccessor: 'value',
+    optionsList: [
+      {
+        label: 'fire-flink-LIC4900-onPrem',
+        value: 'fire-flink-LIC4900-onPrem',
+        name: 'fireflink',
+        disable: true,
+      },
+      {
+        label: 'fire-flink-LIC3179',
+        value: 'fire-flink-LIC3179',
+        name: 'local',
+        disable: false,
+      },
+      {
+        label: 'fire-flink-LIC4937',
+        value: 'fire-flink-LIC4937',
+        name: 'browser stack',
+      },
+      {
+        label: 'fire-flink-LIC4999',
+        value: 'fire-flink-LIC4999',
+        name: 'lambda test',
+      },
+    ],
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    label: 'Select',
+    optionsList: [
+      {
+        label: 'fire-flink-LIC4900-onPrem',
+        value: 'fire-flink-LIC4900-onPrem',
+      },
+      {
+        label: 'fire-flink-LIC3179',
+        value: 'fire-flink-LIC3179',
+      },
+      {
+        label: 'fire-flink-LIC4937',
+        value: 'fire-flink-LIC4937',
+      },
+      {
+        label: 'fire-flink-LIC4999',
+        value: 'fire-flink-LIC4999',
+      },
+    ],
+    errorMsg: 'Please select a option',
+  },
+};
+
+export const WithoutLabel: Story = {
+  args: {
+    showLabel: false,
+    optionsList: [
+      {
+        label: 'fire-flink-LIC4900-onPrem',
+        value: 'fire-flink-LIC4900-onPrem',
+      },
+      {
+        label: 'fire-flink-LIC3179',
+        value: 'fire-flink-LIC3179',
+      },
+      {
+        label: 'fire-flink-LIC4937',
+        value: 'fire-flink-LIC4937',
+      },
+      {
+        label: 'fire-flink-LIC4999',
+        value: 'fire-flink-LIC4999',
+      },
+    ],
+  },
+};
+
+export const EmptyOptions: Story = {
+  args: {
+    label: 'Select',
+    optionsList: [],
+    errorMsg: 'No options available',
+  },
+};
+
+export const Disable: Story = {
+  args: {
+    label: 'Select',
+    optionsList: [],
+    disabled: true,
+  },
+};
+
+export const WithInitialValue: Story = {
+  args: {
+    label: 'Select',
+    selectedOption: {
+      label: 'fire-flink-LIC4900-onPrem',
+      value: 'fire-flink-LIC4900-onPrem',
+    },
+    optionsList: [
+      {
+        label: 'fire-flink-LIC4900-onPrem',
+        value: 'fire-flink-LIC4900-onPrem',
+      },
+      {
+        label: 'fire-flink-LIC3179',
+        value: 'fire-flink-LIC3179',
+      },
+      {
+        label: 'fire-flink-LIC4937',
+        value: 'fire-flink-LIC4937',
+      },
+      {
+        label: 'fire-flink-LIC4999',
+        value: 'fire-flink-LIC4999',
+      },
+    ],
+  },
+};
+
+export const OptionSelection: Story = {
+  render: () => {
+    const optionsList = [
+      {
+        label: 'fire-flink-LIC4900-onPrem',
+        value: 'fire-flink-LIC4900-onPrem',
+      },
+      {
+        label: 'fire-flink-LIC3179',
+        value: 'fire-flink-LIC3179',
+      },
+      {
+        label: 'fire-flink-LIC4937',
+        value: 'fire-flink-LIC4937',
+      },
+      {
+        label: 'fire-flink-LIC4999',
+        value: 'fire-flink-LIC4999',
+      },
+    ];
+
+    const [selectedOption, setSelectedOption] = useState<Option>({
+      label: 'fire-flink-LIC3179',
+      value: 'fire-flink-LIC3179',
+    });
+
+    const handleChange = (option: Option) => {
+      setSelectedOption(option);
+    };
+
+    return (
+      <Select
+        label="Option"
+        optionsList={optionsList}
+        selectedOption={selectedOption}
+        onChange={handleChange}
+      />
+    );
+  },
+};
+
+export const CustomJSX: Story = {
+  render: () => {
+    const optionsList: Option[] = [
+      {
+        label: <p style={{ color: 'red' }}>Option 1</p>,
+        value: 'option 1',
+      },
+      {
+        label: <p style={{ color: 'green' }}>Option 2</p>,
+        value: 'option 2',
+      },
+      {
+        label: <p style={{ color: 'beige' }}>Option 3</p>,
+        value: 'option 3',
+      },
+      {
+        label: <p style={{ color: 'crimson' }}>Option 4</p>,
+        value: 'option 4',
+      },
+      {
+        label: <p style={{ color: 'cyan' }}>Option 5</p>,
+        value: 'option 5',
+      },
+      {
+        label: <p style={{ color: 'red' }}>Option 6</p>,
+        value: 'option 6',
+      },
+    ];
+
+    const [selectedOption, setSelectedOption] = useState<Option>({
+      label: <p style={{ color: 'red' }}>Option 6</p>,
+      value: 'option 6',
+    });
+
+    const handleChange = (option: Option) => {
+      setSelectedOption(option);
+    };
+
+    return (
+      <Select
+        label="Option"
+        optionsList={optionsList}
+        selectedOption={selectedOption}
+        onChange={handleChange}
+      />
+    );
+  },
+};
+
+export const updateOptionFromOutside: Story = {
+  render: () => {
+    const [selectedOption, setSelectedOption] = useState<Option>({
+      label: 'fire-flink-LIC4900-onPrem',
+      value: 'fire-flink-LIC4900-onPrem',
+    });
+
+    const optionsList = [
+      {
+        label: 'fire-flink-LIC4900-onPrem',
+        value: 'fire-flink-LIC4900-onPrem',
+      },
+      {
+        label: 'fire-flink-LIC3179',
+        value: 'fire-flink-LIC3179',
+      },
+      {
+        label: 'fire-flink-LIC4937',
+        value: 'fire-flink-LIC4937',
+      },
+      {
+        label: 'fire-flink-LIC4999',
+        value: 'fire-flink-LIC4999',
+      },
+    ];
+
+    const handleChange = (option: Option) => {
+      setSelectedOption(option);
+    };
+
+    const radioOptions = [
+      {
+        label: 'fire-flink-LIC4900-onPrem',
+        value: 'fire-flink-LIC4900-onPrem',
+      },
+      {
+        label: 'fire-flink-LIC3179',
+        value: 'fire-flink-LIC3179',
+      },
+      {
+        label: 'fire-flink-LIC4937',
+        value: 'fire-flink-LIC4937',
+      },
+      {
+        label: 'fire-flink-LIC4999',
+        value: 'fire-flink-LIC4999',
+      },
+    ];
+    const [selectedRadioOption, setSelectedRadioOption] = useState('option2');
+    const handleOptionChange = (option: Option) => {
+      setSelectedRadioOption(option.value);
+      setSelectedOption(option);
+    };
+
+    return (
+      <div>
+        <Select
+          optionsList={optionsList}
+          selectedOption={selectedOption}
+          onChange={handleChange}
+          showLabel={false}
+        />
+        <RadioGroup
+          selectedValue={selectedRadioOption}
+          onChange={handleOptionChange}
+          name="option"
+          options={radioOptions}
+        />
+      </div>
+    );
+  },
+};
+
+export const IconOptionSelection: Story = {
+  render: () => {
+    const optionsList = [
+      {
+        label: 'fire-flink-LIC4900-onPrem',
+        value: 'fire-flink-LIC4900-onPrem',
+        iconName: 'local',
+      },
+      {
+        label: 'fire-flink-LIC3179',
+        value: 'fire-flink-LIC3179',
+        iconName: 'chrome_icon',
+      },
+      {
+        label: 'fire-flink-LIC4937',
+        value: 'fire-flink-LIC4937',
+        iconName: 'mac_icon',
+      },
+      {
+        label: 'fire-flink-LIC4999',
+        value: 'fire-flink-LIC4999',
+        iconName: 'web_icon',
+      },
+    ];
+
+    const [selectedOption, setSelectedOption] = useState<Option>({
+      label: 'fire-flink-LIC3179',
+      value: 'fire-flink-LIC3179',
+      iconName: 'local',
+    });
+
+    const handleChange = (option: Option) => {
+      setSelectedOption(option);
+    };
+
+    return (
+      <Select
+        label="Option"
+        optionsList={optionsList}
+        selectedOption={selectedOption}
+        onChange={handleChange}
+        showIcon={true}
+        width={200}
+      />
+    );
+  },
+};
+
+export default meta;