Merge pull request #39 from scheduleonce/pythons/ONCEHUB-73610

Using IOption instead of Option

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oncehub/ui-react",
   "private": false,
-  "version": "1.4.16",
+  "version": "1.4.17",
   "repository": {
     "type": "git",
     "url": "https://github.com/scheduleonce/once-ui-react"

src/lib/components/multi-select/README.md

@@ -6,31 +6,33 @@ Import the `MultiSelect` component into your React application:
 import MultiSelect from '@/once-ui/multi-select/multi-select';
 ```
 
-## Option Interface
+## IOption Interface
 
-Before using the `MultiSelect` component, define an `Option` interface for representing the available choices. The `Option` interface should have the following properties:
+Before using the `MultiSelect` component, define an `IOption` interface for representing the available choices. The `IOption` interface should have the following properties:
 
-- `id (number)`: A unique identifier for the option.
-- `text (string)`: The text or label associated with the option.
+- `value (string)`: A unique identifier for the option.
+- `label (string)`: The text or label associated with the option.
 - `order (number, optional)`: An optional property that specifies the order of the option in a list or display.
 - `disabled (boolean, optional)`: An optional property that specifies whether the option is disabled or not.
+- `avatar (string, optional)`: An optional property that specifies the image path.
 
-Here's an example of how to define the `Option` interface:
+Here's an example of how to define the `IOption` interface:
 
 ```jsx
-export interface Option {
-	id: number;
-	text: string;
-	order?: number;
-	disabled?: boolean;
+export interface IOption {
+  value: string;
+  label: string;
+  order?: number;
+  avatar?: string;
+  disable?: boolean;
 }
 ```
 
 ## Props
 
 The `MultiSelect` component accepts the following props:
 
-- `options (Array)`: An array of Option objects representing the available choices.
+- `options (Array)`: An array of IOption objects representing the available choices.
 - `checkedValue (Array)`: An array of numbers representing the initially selected options.
 - `onSelectionChange (Function)`: A callback function that is called when the selection changes. It receives an array of selected option values.
 - `minOptions` (optional): Minimum number of options that must be selected (default: 0).
@@ -42,11 +44,11 @@ Example
 import React, { useState } from 'react';
 import MultiSelect from '@/once-ui/multi-select/multi-select';
 
-const options : Option[] = [
-	{ id: '1', text: 'Option 1', order: 1 },
-	{ id: '2', text: 'Option 2', order: 2 },
- { id: '3', text: 'Option 3', order: 3, disabled:true },
-	// Add more options here
+const options: IOption[] = [
+  { value: '1', label: 'Option 1', order: 1 },
+  { value: '2', label: 'Option 2', order: 2 },
+  { value: '3', label: 'Option 3', order: 3, disable: true },
+  //Add more options
 ];
 
 function App() {

src/lib/components/multi-select/multi-select.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { MultiSelect } from './multi-select';
-import { Option } from './multi-select.type';
+import { IOption } from '../../interfaces/select.type';
 
 const meta: Meta<typeof MultiSelect> = {
   title: 'Basic/MultiSelect',
@@ -25,7 +25,7 @@ const meta: Meta<typeof MultiSelect> = {
       },
     },
     options: {
-      description: 'An array of Option objects representing the available choices.',
+      description: 'An array of IOption objects representing the available choices.',
       type: 'string',
       table: {
         defaultValue: { summary: '' },
@@ -62,10 +62,10 @@ const meta: Meta<typeof MultiSelect> = {
 export default meta;
 type Story = StoryObj<typeof MultiSelect>;
 
-const options: Option[] = [
-  { id: '1', text: 'Option 1', order: 1 },
-  { id: '2', text: 'Option 2', order: 2 },
-  { id: '3', text: 'Option 3', order: 3, disabled: true },
+const options: IOption[] = [
+  { value: '1', label: 'Option 1', order: 1 },
+  { value: '2', label: 'Option 2', order: 2 },
+  { value: '3', label: 'Option 3', order: 3, disable: true },
 ];
 const handleSelectionChange = () => {};
 

src/lib/components/multi-select/multi-select.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, CSSProperties, KeyboardEvent } from 'react';
-import { Option } from './multi-select.type';
+import { IOption } from '../../interfaces/select.type';
 import { Button } from '../button/button';
 import styles from './multi-select.module.scss';
 import luminance from '@oncehub/relative-luminance';
@@ -8,7 +8,7 @@ import { createPortal } from 'react-dom';
 import PseudoCheckbox from '../common/pseudo-checkbox/pseudo-checkbox';
 
 interface Props {
-  options: Option[];
+  options: IOption[];
   checkedValue: string[];
   onSelectionChange: (val: string[]) => void;
   maxOptions?: number;
@@ -94,36 +94,32 @@ export const MultiSelect: React.FC<Props> = ({
   };
 
   useEffect(() => {
-    const filtered = options.filter((option) => option.text.toLowerCase().includes(searchTerm.toLowerCase()));
+    const filtered = options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
     filteredOptions.current = filtered;
   }, [options, searchTerm]);
 
   /* istanbul ignore next */
   const selectedText =
     selectedOptions.length > 0
       ? selectedOptions
-          .map((id) => {
-            const selectedOption = options.find((option) => option.id === id);
-            return selectedOption?.text !== null ? selectedOption?.text : '';
+          .map((value) => {
+            const selectedOption = options.find((option) => option.value === value);
+            return selectedOption?.label !== null ? selectedOption?.label : '';
           })
-          .filter((text) => text !== '')
+          .filter((label) => label !== '')
           .join(', ')
       : 'Select your option';
 
   const handleLiClick = (id: string) => {
-    const clickedOption = options.find((option) => option.id === id);
-    if (
-      clickedOption &&
-      !clickedOption.disabled &&
-      (maxOptions === undefined || selectedOptions.length <= maxOptions)
-    ) {
+    const clickedOption = options.find((option) => option.value === id);
+    if (clickedOption && !clickedOption.disable && (maxOptions === undefined || selectedOptions.length <= maxOptions)) {
       const isSelected = selectedOptions.includes(id);
       const newSelectedValues = isSelected ? selectedOptions.filter((val) => val !== id) : [...selectedOptions, id];
       const isWithinLimit = maxOptions === undefined || newSelectedValues.length <= maxOptions;
       if (isWithinLimit && dropdownOpen) {
         setSelectedOptions(newSelectedValues);
         onSelectionChange(newSelectedValues);
-        announceOption(`${clickedOption?.text} ${newSelectedValues.includes(id) ? 'selected' : 'not selected'}`);
+        announceOption(`${clickedOption?.label} ${newSelectedValues.includes(id) ? 'selected' : 'not selected'}`);
       }
     }
   };
@@ -257,7 +253,7 @@ export const MultiSelect: React.FC<Props> = ({
       }
     } else if (key === 'Enter' || key === 'Space' || key === ' ') {
       if (focusedIndex !== -1) {
-        handleLiClick(filteredOptions.current[focusedIndex].id);
+        handleLiClick(filteredOptions.current[focusedIndex].value);
       }
     } else if (key === 'Escape') {
       toggleDropDown(false);
@@ -400,23 +396,23 @@ export const MultiSelect: React.FC<Props> = ({
                           {filteredOptions.current.map((option, index) => (
                             // eslint-disable-next-line jsx-a11y/role-supports-aria-props
                             <li
-                              key={option.id}
+                              key={option.value}
                               className={`${styles.optionsList} ${index === focusedIndex ? styles.focused : ''}`}
-                              onClick={() => handleLiClick(option.id)}
+                              onClick={() => handleLiClick(option.value)}
                               aria-selected={index === focusedIndex}
                               role="option"
                             >
                               <PseudoCheckbox
                                 themeColor={themeColor}
-                                checked={selectedOptions.includes(option.id)}
+                                checked={selectedOptions.includes(option.value)}
                                 disabled={
-                                  option.disabled ||
+                                  option.disable ||
                                   (maxOptions !== undefined &&
                                     selectedOptions.length >= maxOptions &&
-                                    !selectedOptions.includes(option.id))
+                                    !selectedOptions.includes(option.value))
                                 }
                               />
-                              <span>{option.text}</span>
+                              <span>{option.label}</span>
                             </li>
                           ))}
                         </ul>

src/lib/components/quick-multi-select/README.md

@@ -6,31 +6,33 @@ Import the `QuickMultiSelect` component into your React application:
 import QuickMultiSelect from '@/once-ui/quick-multi-select/quick-multi-select';
 ```
 
-## Option Interface
+## IOption Interface
 
-Before using the `QuickMultiSelect` component, define an `Option` interface for representing the available choices. The `Option` interface should have the following properties:
+Before using the `QuickMultiSelect` component, define an `IOption` interface for representing the available choices. The `IOption` interface should have the following properties:
 
-- `id (number)`: A unique identifier for the option.
-- `text (string)`: The text or label associated with the option.
+- `value (string)`: A unique identifier for the option.
+- `label (string)`: The text or label associated with the option.
 - `order (number, optional)`: An optional property that specifies the order of the option in a list or display.
 - `disabled (boolean, optional)`: An optional property that specifies whether the option is disabled or not.
+- `avatar (string, optional)`: An optional property that specifies the image path.
 
-Here's an example of how to define the `Option` interface:
+Here's an example of how to define the `IOption` interface:
 
 ```jsx
-export interface Option {
-	id: number;
-	text: string;
-	order?: number;
-	disabled?: boolean;
+export interface IOption {
+  value: string;
+  label: string;
+  order?: number;
+  avatar?: string;
+  disable?: boolean;
 }
 ```
 
 ## Props
 
 The `QuickMultiSelect` component accepts the following props:
 
-- `options (Array)`: An array of Option objects representing the available choices.
+- `options (Array)`: An array of IOption objects representing the available choices.
 - `checkedValue (Array)`: An array of numbers representing the initially selected options.
 - `onSelectionChange (Function)`: A callback function that is called when the selection changes. It receives an array of selected option values.
 - `maxOptions?`: Maximum number of option that can be checked;
@@ -41,10 +43,10 @@ Example
 import React, { useState } from 'react';
 import MultiSelect from '@/once-ui/multi-select/multi-select';
 
-const options = [
-	{ id: '1', text: 'Option 1', order: 1 },
-	{ id: '2', text: 'Option 2', order: 2 },
-	{ id: '3', text: 'Option 3', order: 3, disabled: true },
+const options: IOption[] = [
+  { value: '1', label: 'Option 1', order: 1 },
+  { value: '2', label: 'Option 2', order: 2 },
+  { value: '3', label: 'Option 3', order: 3, disable: true },
 	// Add more options here
 ];
 

src/lib/components/quick-multi-select/index.tsx

@@ -1,2 +1 @@
 export * from './quick-multi-select';
-export * from './quick-multi-select.type';

src/lib/components/quick-multi-select/quick-multi-select.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { QuickMultiSelect } from './quick-multi-select';
-import { Option } from './quick-multi-select.type';
+import { IOption } from '../../interfaces/select.type';
 
 const meta: Meta<typeof QuickMultiSelect> = {
   title: 'Basic/QuickMultiSelect',
@@ -17,7 +17,7 @@ const meta: Meta<typeof QuickMultiSelect> = {
       },
     },
     options: {
-      description: 'An array of Option objects representing the available choices.',
+      description: 'An array of IOption objects representing the available choices.',
       type: 'string',
       table: {
         defaultValue: { summary: '' },
@@ -54,10 +54,10 @@ const meta: Meta<typeof QuickMultiSelect> = {
 export default meta;
 type Story = StoryObj<typeof QuickMultiSelect>;
 
-const options: Option[] = [
-  { id: '1', text: 'Option 1', order: 1 },
-  { id: '2', text: 'Option 2', order: 2 },
-  { id: '3', text: 'Option 3', order: 3, disabled: true },
+const options: IOption[] = [
+  { value: '1', label: 'Option 1', order: 1 },
+  { value: '2', label: 'Option 2', order: 2 },
+  { value: '3', label: 'Option 3', order: 3, disable: true },
 ];
 const handleSelectionChange = () => {};