pixel-react 1.6.5 → 1.6.7

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

@@ -87,7 +87,7 @@ export const Default3: Story = {
 };
 export const EmailGroup: Story = {
   render: () => {
-    const [options,setOptions] = useState([
+    const [options, setOptions] = useState([
       {
         label: 'Sample1@gmail.com',
         value: 'sample1@gmail.com',
@@ -109,9 +109,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
@@ -153,8 +153,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 +175,7 @@ export const Controlled: Story = {
         label={'Fruits'}
         required
         options={options}
+        displayCount
         selectedOptions={selectedOptions}
         onChange={onChange}
       />

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"
@@ -59,26 +58,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 = () => {},
+  onSelectButtonClick = () => { },
   labelAccessor = '',
   valueAccessor = labelAccessor,
   withSelectButton = variant === 'machines' ? true : false,
-  onEnter=()=>{}
+  onEnter = () => { },
 }: MultiSelectProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [allOptions, setAllOptions] = useState(options);
@@ -88,6 +87,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 +110,7 @@ const MultiSelect = ({
 
   let isFieldSkipped = isSelectFocusedOnce && selectedOptions.length === 0;
 
-  const maxVisibleChips = 2;
+  const maxVisibleChips = 12;
   const hiddenCount = selectedOptions.length - maxVisibleChips;
 
   const handleClick = () => {
@@ -132,7 +133,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 +170,7 @@ const MultiSelect = ({
           return;
         }
       }
-     onEnter?.(searchedKeyword)
+      onEnter?.(searchedKeyword);
       setSearchedKeyword('');
       setIsOpen(false);
     }
@@ -209,10 +210,16 @@ const MultiSelect = ({
       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();
@@ -250,14 +257,14 @@ const MultiSelect = ({
   }, [isOpen]);
   useEffect(() => {
     if (!checkEmpty(options?.length)) {
-      let initializeOptions=options;
-      if(!checkEmpty(selectedOptions?.length)){
-         initializeOptions = options.map((option) => ({
+      let initializeOptions = options;
+      if (!checkEmpty(selectedOptions?.length)) {
+        initializeOptions = options.map((option) => ({
           ...option,
           isChecked: selectedOptions.some(
             (selectedOption) =>
               getValue(selectedOption, valueAccessor) ===
-            getValue(option, valueAccessor)
+              getValue(option, valueAccessor)
           ),
         }));
       }
@@ -392,7 +399,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 +441,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(--select-license-header-text-color)'
 }
 
 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/Select/Select.stories.tsx

@@ -1,9 +1,9 @@
+import React, { useState } from 'react';
+
 import type { Meta, StoryObj } from '@storybook/react';
 import Select from './Select';
-import React,{ useState } from 'react';
 import { Option } from './types';
 import RadioGroup from '../RadioGroup';
-import React from 'react';
 
 const meta: Meta<typeof Select> = {
   title: 'Components/Select',

package/src/components/TableWithAccordion/TableWithAccordion.scss

@@ -0,0 +1,54 @@
+@use '../../assets/styles/fonts';
+@use '../../assets/styles/colors';
+
+.ff-accordion-table-container {
+  overflow-y: auto;
+  .ff-accordion-table {
+    width: 100%;
+    .ff-table-header,
+    .ff-table-cell {
+      text-align: left;
+      padding: 9px;
+    }
+    .ff-table-header {
+      color: var(--text-color);
+      border-bottom: 1px solid var(--slider-table-color);
+    }
+    .ff-table-body {
+      .ff-table-row:hover {
+        background-color: var(--hover-color);
+      }
+    }
+    &--primary-bg {
+      background-color: var(--table-with-accordion-header-primary-bg);
+    }
+    &--secondary-bg {
+      background-color: var(--secondary-bg);
+    }
+    &--default-bg {
+      background-color: var(--default-bg);
+    }
+  }
+  .ff-accordion-fixed-header {
+    position: sticky;
+    top: 0;
+    z-index: 99;
+    background-color: var(--file-details-bg);
+  }
+  .column-table-accordion {
+    width: 100%;
+    .accordion-header {
+      display: flex;
+      align-items: center;
+      .header-title {
+        padding: 8px;
+      }
+      .accordion-arrow {
+        img {
+          height: 30px;
+          width: 35px;
+        }
+      }
+    }
+  }
+}

package/src/components/TableWithAccordion/TableWithAccordion.stories.tsx

@@ -0,0 +1,94 @@
+import { StoryObj, Meta } from '@storybook/react';
+import TableWithAccordion from './TableWithAccordion';
+import { sampleData } from './data';
+
+const meta: Meta<typeof TableWithAccordion> = {
+  title: 'Components/TableWithAccordion',
+  component: TableWithAccordion,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof TableWithAccordion>;
+const defaultArgs = {
+  tableMeta: [],
+  tableData: [],
+};
+
+const emptyData: never[] = [];
+const columnsData = [
+  {
+    header: 'Description',
+    accessor: 'desc',
+    width: 100,
+  },
+  {
+    header: 'SUITE NAME',
+    accessor: 'suiteName',
+    width: 100,
+  },
+  {
+    header: 'SUITE TYPE',
+    accessor: 'suiteName',
+    width: 100,
+  },
+  {
+    header: 'SUITE ACCESS',
+    accessor: 'suiteName',
+    width: 100,
+  },
+  {
+    header: 'Modified By',
+    accessor: 'modifiedBy',
+    width: 100,
+  },
+];
+
+export const TableWithRowAccordion: Story = {
+  args: {
+    ...defaultArgs,
+    tableMeta: columnsData,
+    tableData: sampleData,
+    accordionType: 'row',
+    TableAccordionStateIconWidth:4,
+    TableAccordionStateIconHeight:8,
+  },
+};
+export const TableWithColumnAccordion: Story = {
+  args: {
+    ...defaultArgs,
+    tableMeta: columnsData,
+    tableData: sampleData,
+    accordionType: 'column',
+    TableAccordionStateIconWidth:4,
+    TableAccordionStateIconHeight:8,
+  },
+};
+
+export const EmtptyTableWithColumnAccordion: Story = {
+  args: {
+    ...defaultArgs,
+    tableMeta: columnsData,
+    tableData: emptyData,
+    accordionType: 'column',
+    TableAccordionStateIconWidth:4,
+    TableAccordionStateIconHeight:8,
+  },
+};
+
+export const AccordionTableWithFixedHeader: Story = {
+  args: {
+    ...defaultArgs,
+    tableMeta: columnsData,
+    tableData: sampleData,
+    accordionType: 'row',
+    height: '200px',
+    withFixedHeader: true,
+    TableAccordionStateIconWidth:4,
+    TableAccordionStateIconHeight:8,
+  },
+};
+
+export default meta;