pixel-react-excel-sheet 1.0.11 → 1.0.13

package/src/components/MultiSelect/MultiSelect.scss

@@ -32,6 +32,31 @@
     }
   }
 }
+
+@mixin ff-scroll-style {
+
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 40px;
+      border-radius: 12px 0px 0px 0px;
+      background: var(--description-text);
+  
+      &-track {
+        background: var(--ff-select-scroll-track-bg);
+      }
+  
+      &-thumb {
+        background: var(--ff-select-scroll-thumb-color);
+        border-radius: 10px;
+  
+        &:hover {
+          background: var(--ff-select-scroll-thumb-hover);
+        }
+      }
+    }
+}
+
+
 .ff-multiselect-container-with-icon {
   display: flex;
   align-items: center;
@@ -83,7 +108,11 @@
           display: flex;
           flex-wrap: wrap;
           align-items: center;
+          overflow-y: auto;
+          max-height: 64px;
           gap: 5px;
+          @include ff-scroll-style;
+
           .ff-multiselect-chip {
             @include flex-center;
             box-sizing: border-box;

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

@@ -80,14 +80,10 @@ export const NameAccessor: Story = {
   },
 };
 
-export const Default3: Story = {
-  args: {
-    ...defaultArgs,
-  },
-};
+
 export const EmailGroup: Story = {
   render: () => {
-    const [options,setOptions] = useState([
+    const [options, setOptions] = useState([
       {
         label: 'Sample1@gmail.com',
         value: 'sample1@gmail.com',
@@ -109,9 +105,9 @@ export const EmailGroup: Story = {
     ) => {
       setSelectedOptions(options);
     };
-    const onEnter=(newOption:string)=>{
-setOptions(prev=>[...prev,{label:newOption,value:newOption}])
-setSelectedOptions(prev=>[...prev,{label:newOption,value:newOption}])
+    const onEnter = (newOption: string) => {
+      setOptions(prev => [...prev, { label: newOption, value: newOption }])
+      setSelectedOptions(prev => [...prev, { label: newOption, value: newOption }])
     }
     return (
       <MultiSelect
@@ -124,6 +120,7 @@ setSelectedOptions(prev=>[...prev,{label:newOption,value:newOption}])
         acceptNewOption={true}
         displayCount={true}
         labelAccessor="label"
+        valueAccessor='value'
         onEnter={onEnter}
       />
     );
@@ -153,8 +150,21 @@ export const Controlled: Story = {
         { label: 'Kiwi', value: 'kiwi' },
         { label: 'Mango', value: 'mango' },
         { label: 'Orange', value: 'orange' },
-        { label: 'Peach', value: 'peach' },
+        { 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 (
@@ -162,6 +172,7 @@ export const Controlled: Story = {
         label={'Fruits'}
         required
         options={options}
+        displayCount
         selectedOptions={selectedOptions}
         onChange={onChange}
       />
@@ -220,19 +231,19 @@ export const Machines: Story = {
   render: () => {
     const [options] = useState<Option[]>([
       {
-        label: 'Machine 1',
+        label: <h2>Machine 1</h2>,
         value: 'machine 1',
       },
       {
-        label: 'Machine 2',
+        label: <h2>Machine 2</h2>,
         value: 'machine 2',
       },
       {
-        label: 'Machine 3',
+        label: <h2>Machine 3</h2>,
         value: 'machine 3',
       },
       {
-        label: 'Machine 4',
+        label: <h2>Machine 4</h2>,
         value: 'machine 4',
       },
     ]);
@@ -251,6 +262,8 @@ export const Machines: Story = {
               key={index}
               label="Machines"
               variant="machines"
+              //  labelAccessor='label'
+            // valueAccessor='value'
               options={options}
               onSelectButtonClick={handleSelectChange}
               highlightedMachine={machine.label}
@@ -259,6 +272,8 @@ export const Machines: Story = {
           ))}
           <MultiSelect
             label="Machines"
+             labelAccessor='label'
+            valueAccessor='value'
             withSelectButton
             options={options}
             onSelectButtonClick={handleSelectChange}
@@ -270,4 +285,6 @@ export const Machines: Story = {
   },
 };
 
+
+
 export default meta;

package/src/components/MultiSelect/MultiSelect.tsx

@@ -29,9 +29,8 @@ const ChipElement = ({
     return (
       <div className="ff-multiselect-chip">
         <span
-          className={`ff-multiselect-chip-label ${
-            disableChip && 'label-padding'
-          }`}
+          className={`ff-multiselect-chip-label ${disableChip && 'label-padding'
+            }`}
         >
           <Tooltip
             placement="bottom"
@@ -39,7 +38,8 @@ const ChipElement = ({
             zIndex={zIndex + 1}
           >
             <Typography fontSize={10} lineHeight={'14px'} className="stye">
-              {truncateText(label, 25)}
+
+              {typeof label==='string'? truncateText(label, 25):label}
             </Typography>
           </Tooltip>
         </span>
@@ -59,26 +59,26 @@ const MultiSelect = ({
   options = [],
   type = 'text',
   selectedOptions = [],
-  onChange = () => {},
+  onChange = () => { },
   acceptNewOption = false,
   zIndex = 100,
   label = '',
-  onSearch = () => {},
+  onSearch = () => { },
   required = false,
   disabled = false,
   errorMessage = 'Fill this field',
-  displayCount = false,
+  displayCount: initialDisplayCount = false,
   placeholderForSearching = 'Search',
   variant = 'default',
-  onLabelPlusIconClick = () => {},
-  onManageLabelsClick = () => {},
+  onLabelPlusIconClick = () => { },
+  onManageLabelsClick = () => { },
   className = '',
   highlightedMachine = '',
   onSelectButtonClick = () => {},
-  labelAccessor = '',
-  valueAccessor = labelAccessor,
+  labelAccessor = 'label',
+  valueAccessor = 'value',
   withSelectButton = variant === 'machines' ? true : false,
-  onEnter=()=>{}
+  onEnter = () => { },
 }: MultiSelectProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [allOptions, setAllOptions] = useState(options);
@@ -88,6 +88,8 @@ const MultiSelect = ({
     useState<boolean>(false);
   const [inputError, setInputError] = useState<string>('');
   const [displayIcon, setDisplayIcon] = useState<boolean>(false);
+  const [displayCount, setDisplayCount] =
+    useState<boolean>(initialDisplayCount);
 
   const [dropdownPosition, setDropdownPosition] = useState<{
     top: number;
@@ -109,7 +111,7 @@ const MultiSelect = ({
 
   let isFieldSkipped = isSelectFocusedOnce && selectedOptions.length === 0;
 
-  const maxVisibleChips = 2;
+  const maxVisibleChips = 12;
   const hiddenCount = selectedOptions.length - maxVisibleChips;
 
   const handleClick = () => {
@@ -132,7 +134,7 @@ const MultiSelect = ({
     inputRef.current?.focus();
     const updatedOptions = allOptions.map((option) =>
       getValue(option, valueAccessor) ===
-      getValue(selectedOption, valueAccessor)
+        getValue(selectedOption, valueAccessor)
         ? { ...option, isChecked }
         : option
     );
@@ -169,7 +171,7 @@ const MultiSelect = ({
           return;
         }
       }
-     onEnter?.(searchedKeyword)
+      onEnter?.(searchedKeyword);
       setSearchedKeyword('');
       setIsOpen(false);
     }
@@ -202,17 +204,23 @@ const MultiSelect = ({
     if (input.length > 2) {
       const matchedOption = allOptions.find(
         (option) =>
-          getLabel(option, labelAccessor)?.toLowerCase() === input.toLowerCase()
+          getLabel(option, valueAccessor)?.toLowerCase() === input.toLowerCase()
       );
       setDisplayIcon(!matchedOption);
     } else {
       setDisplayIcon(false);
     }
   };
+
+  const handleHiddenChips = () => {
+    setIsOpen(false);
+    setDisplayCount(false);
+  };
   useEffect(() => {
     const rect = dropdownWrapper.current?.getBoundingClientRect();
     setDropdownPosition((prev) => ({ ...prev, width: rect?.width as number }));
   }, [displayIcon]);
+
   useEffect(() => {
     if (isOpen) {
       calculatePosition();
@@ -249,15 +257,15 @@ const MultiSelect = ({
     };
   }, [isOpen]);
   useEffect(() => {
-    if (!checkEmpty(options?.length)) {
+    if (!checkEmpty(options)) {
       let initializeOptions=options;
-      if(!checkEmpty(selectedOptions?.length)){
+      if(!checkEmpty(selectedOptions)){
          initializeOptions = options.map((option) => ({
           ...option,
           isChecked: selectedOptions.some(
             (selectedOption) =>
               getValue(selectedOption, valueAccessor) ===
-            getValue(option, valueAccessor)
+              getValue(option, valueAccessor)
           ),
         }));
       }
@@ -392,7 +400,10 @@ const MultiSelect = ({
             )}
           </div>
           {hiddenCount > 0 && displayCount && (
-            <div className="ff-multiselect-more-chip" onClick={toggleDropdown}>
+            <div
+              className="ff-multiselect-more-chip"
+              onClick={handleHiddenChips}
+            >
               <Typography
                 fontSize={12}
                 fontWeight="semi-bold"
@@ -431,7 +442,7 @@ const MultiSelect = ({
               className="error-text"
             />
           )}
-          {displayIcon && variant==='labels' && (
+          {displayIcon && variant === 'labels' && (
             <Typography
               onClick={onManageLabelsClick}
               fontSize={8}

package/src/components/PhoneInput/PhoneInput.d.ts

@@ -0,0 +1,3 @@
+declare module 'react-phone-input-2' {
+  export * from 'react-phone-input-2';
+}

package/src/components/PhoneInput/PhoneInput.stories.tsx

@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import { PhoneInputProps } from './types';
+import PhoneInputField from './PhoneInput';
+
+export default {
+  title: 'Components/PhoneInputComponent',
+  component: PhoneInputField,
+};
+
+const Template = ({
+  value,
+  country,
+  width,
+  onChange,
+  placeholder,
+  onFocus,
+  onBlur,
+  isValid,
+}: PhoneInputProps) => {
+  const [phone, setPhone] = useState<string>(value || '');
+  const [valid, setValid] = useState(true);
+
+  const handlePhoneChange = (newPhone: string) => {
+    setPhone(newPhone);
+    const validPhoneNumberLength = country === 'IN' ? 10 : newPhone.length;
+    const phoneIsValid = newPhone.length === validPhoneNumberLength;
+    setValid(phoneIsValid);
+    onChange(newPhone);
+  };
+
+  return (
+    <PhoneInputField
+      value={phone}
+      country={country}
+      onChange={handlePhoneChange}
+      width={width}
+      placeholder={placeholder}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      isValid={valid}
+    />
+  );
+};
+
+// Default story
+export const Default = Template.bind({});
+Default.args = {
+  country: 'IN',
+  value: '9134567890',
+  width: '400px',
+  placeholder: 'Enter phone number',
+  onChange: () => {},
+  onFocus: () => {},
+  onBlur: () => {},
+  isValid: true,
+};
+
+// Story with initial value
+export const WithInitialValue = Template.bind({});
+WithInitialValue.args = {
+  country: 'IN',
+  value: '9176543210',
+  width: '300px',
+  onChange: () => {},
+  placeholder: 'Enter phone number',
+  onFocus: () => {},
+  onBlur: () => {},
+  isValid: true,
+};
+
+// Story with a custom country
+export const WithCustomCountry = Template.bind({});
+WithCustomCountry.args = {
+  country: 'IN',
+  value: '9176543210',
+  width: '300px',
+  onChange: () => {},
+  placeholder: 'Enter phone number',
+  onFocus: () => {},
+  onBlur: () => {},
+  isValid: true,
+};
+
+// Story with empty value
+export const EmptyValue = Template.bind({});
+EmptyValue.args = {
+  country: 'IN',
+  value: '91',
+  width: '500px',
+  onChange: () => {},
+  placeholder: 'Enter phone number',
+  onFocus: () => {},
+  onBlur: () => {},
+  isValid: false,
+};

package/src/components/PhoneInput/PhoneInput.tsx

@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from 'react';
+import PhoneInput from 'react-phone-input-2';
+import 'react-phone-input-2/lib/style.css';
+import { PhoneInputProps } from './types';
+import Typography from '../Typography';
+import './PhoneInput.scss';
+
+const PhoneInputField: React.FC<PhoneInputProps> = ({
+  country,
+  value,
+  onChange,
+  width = '100%',
+  placeholder = 'Enter phone number',
+  onFocus,
+  onBlur,
+}) => {
+  const [phone, setPhone] = useState<string>(value);
+  const [isFocused, setIsFocused] = useState(false);
+  const [error, setError] = useState<string>('');
+
+  useEffect(() => {
+    if (value !== phone) {
+      setPhone(value);
+    }
+  }, [value]);
+
+  const handlePhoneChange = (phone: string) => {
+    const numericPhone = phone.replace(/[^0-9+]/g, '');
+    const countryCode = numericPhone.startsWith('+')
+      ? numericPhone.substring(0, 3)
+      : '';
+    let phoneNumber = numericPhone.replace(countryCode, '');
+
+    let validPhoneNumberLength = 10;
+    if (country === 'IN') {
+      if (phoneNumber.length < validPhoneNumberLength) {
+        setError('Phone number should be exactly 10 digits');
+      } else {
+        setError('');
+      }
+    }
+
+    if (phoneNumber.length <= validPhoneNumberLength) {
+      setPhone(numericPhone);
+      onChange(numericPhone);
+    }
+  };
+
+  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
+    setIsFocused(true);
+    if (onFocus) onFocus(event);
+  };
+
+  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+    setIsFocused(false);
+    if (onBlur) onBlur(event);
+  };
+
+  return (
+    <div>
+      <PhoneInput
+        country={country}
+        value={phone}
+        onChange={handlePhoneChange}
+        inputStyle={{
+          width,
+          height: '32px',
+          border: isFocused
+            ? '1px solid var(--brand-color)'
+            : error
+            ? '1px solid var(--error_light)'
+            : '1px solid var(--default-color)',
+          borderRadius: '4px',
+          fontSize: '14px',
+          transition: 'border-color 0.3s ease',
+        }}
+        placeholder={placeholder}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+      />
+      {error && !isFocused && (
+        <Typography color={'var(--error_light)'} className="error">
+          {error}
+        </Typography>
+      )}
+    </div>
+  );
+};
+
+export default PhoneInputField;

package/src/components/PhoneInput/index.ts

@@ -0,0 +1 @@
+export { default } from './PhoneInput';

package/src/components/PhoneInput/phoneInput.scss

@@ -0,0 +1,3 @@
+.error {
+  margin-top: 5px;
+}

package/src/components/PhoneInput/types.ts

@@ -0,0 +1,10 @@
+export interface PhoneInputProps {
+  country: string;
+  value: string;
+  onChange: (phone: string) => void;
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  width?: string;
+  placeholder?: string;
+  isValid: any;
+}

package/src/components/PopUpModal/PopUpModal.stories.tsx

@@ -15,15 +15,16 @@ const meta: Meta<typeof PopUpModal> = {
 type Story = StoryObj<typeof PopUpModal>;
 
 const defaultArgs = {
-    iconName:"license_warning",
-    titleMessage:"Warning!",
-    subTitleMessage:"Unsaved Changes.",
-    modalMessage:"Your web service data will be lost. Are you sure you want to exit?",
-    footerMessage:"How do you want to proceed?",
-    firstButtonLabel:"Cancel",
-    secondButtonLabel:"Continue",
-    buttonVariant:"warning",
-    border:'1px solid var(--warning-modal-border-color)'
+  iconName: "license_warning",
+  titleMessage: "Warning!",
+  subTitleMessage: "Unsaved Changes.",
+  modalMessage: "Your web service data will be lost. Are you sure you want to exit?",
+  footerMessage: "How do you want to proceed?",
+  firstButtonLabel: "Cancel",
+  secondButtonLabel: "Continue",
+  buttonVariant: "warning",
+  border: '1px solid var(--warning-modal-border-color)',
+  colorForTitleMessage: 'var(--status-button-bg-warning)'
 }
 
 export const DefaultModal: Story = {
@@ -41,12 +42,12 @@ export const ControlledPopUp: Story = {
   render: () => {
     const [isOpen, setIsOpen] = useState(false);
     const handleContinue = () => {
-        alert('Continued!');
-        setIsOpen(false);
-      };
+      alert('Continued!');
+      setIsOpen(false);
+    };
     return (
       <>
-        <Button variant="warning" onClick={() => setIsOpen(true)} label='Open PopUp'/>
+        <Button variant="warning" onClick={() => setIsOpen(true)} label='Open PopUp' />
         <PopUpModal
           {...defaultArgs}
           isOpen={isOpen}

package/src/components/PopUpModal/PopUpModal.tsx

@@ -19,6 +19,7 @@ const PopUpModal: FC<PopUpModalProps> = ({
   secondButtonLabel = 'Continue',
   buttonVariant = 'warning',
   border = '1px solid var(--warning-modal-border-color)',
+  colorForTitleMessage = 'var(--status-button-bg-warning)'
 }) => {
   return (
     <Modal
@@ -43,7 +44,7 @@ const PopUpModal: FC<PopUpModalProps> = ({
               >
                 {' '}
                 <Typography
-                  color="var(--status-button-bg-warning)"
+                  color={`${colorForTitleMessage}`}
                   fontSize={20}
                   fontWeight="semi-bold"
                 >

package/src/components/PopUpModal/types.ts

@@ -1,14 +1,15 @@
 export interface PopUpModalProps {
-    isOpen: boolean;
-    onClose: () => void;
-    onContinue?: () => void;
-    titleMessage:string,
-    subTitleMessage?:string,
-    iconName:string,
-    modalMessage:string,
-    footerMessage:string,
-    firstButtonLabel?:string,
-    secondButtonLabel:string,
-    buttonVariant:any,
-    border:string,
-  }
+  isOpen: boolean;
+  onClose: () => void;
+  onContinue?: () => void;
+  titleMessage: string;
+  subTitleMessage?: string;
+  iconName: string;
+  modalMessage: string;
+  footerMessage: string;
+  firstButtonLabel?: string;
+  secondButtonLabel: string;
+  buttonVariant: any;
+  border: string;
+  colorForTitleMessage?: string;
+}

package/src/components/Search/Search.stories.tsx

@@ -1,6 +1,6 @@
-
 import type { Meta, StoryObj } from '@storybook/react';
 import Search from './Search';
+import React,{ useState } from 'react';
 const meta: Meta<typeof Search> = {
   title: 'Components/Search',
   component: Search,
@@ -11,15 +11,34 @@ const meta: Meta<typeof Search> = {
 };
 
 type Story = StoryObj<typeof Search>;
-const defaultArgs = {
-  placeholder: 'Search',
-  onSearch: (query: string) => alert(`Searching for: ${query}`),
-  disabled: false,
-  width: 200,
-};
 export const Default: Story = {
-  args: {
-    ...defaultArgs,
+  render: () => {
+    const [isExpand, setIsExpand] = useState(false);
+    const [searchValue, setSearchValue] = useState('');
+
+    const handleSearch = (value: string) => {
+      alert(`Searching for: ${value}`);
+      setSearchValue(value);
+    };
+
+    const handleClose = () => {
+      setIsExpand(false);
+      setSearchValue('');
+    };
+    return (
+      <div>
+        <Search
+          placeholder="Search here..."
+          isExpand={isExpand}
+          value={searchValue}
+          onSearch={handleSearch}
+          onExpand={(expand) => setIsExpand(expand)}
+          onClose={handleClose}
+          disabled={false}
+          width={200}
+        />
+      </div>
+    );
   },
 };