pixel-react 1.0.7 → 1.0.9

package/src/components/GridLayout/types.ts

@@ -25,6 +25,13 @@ export interface ContainerProps {
    * @type {string}
    */
   gap?: string;
+
+  /**
+   * Classname for Container
+   * @default ''
+   * @type {string}
+   */
+  className?:string
 }
 
 export interface RowProps {
@@ -43,6 +50,12 @@ export interface RowProps {
    * @type {string}
    */
   gap?: string;
+
+  /**
+   * @default ''
+   * @type string
+   */
+  className?:string
 }
 
 export interface ColProps {
@@ -61,4 +74,11 @@ export interface ColProps {
    * @type {number}
    */
   size?: number;
+
+  /**
+   * @default  ''
+   * @type string
+   * 
+   */
+  className?: string;
 }

package/src/components/Icon/iconList.ts

@@ -26,6 +26,7 @@ import MoonStarsIcon from '../../assets/icons/moon_stars.svg?react';
 import SunIcon from '../../assets/icons/sun_icon.svg?react';
 import CheckMarkIcon from '../../assets/icons/check_mark.svg?react';
 import WrongMarkIcon from '../../assets/icons/wrong_mark.svg?react';
+import FireflinkIcon from '../../assets/Icons/fireflink_icon.svg?react';
 import Tick from '../../assets/Icons/tick_icon.svg?react';
 import Search from '../../assets/icons/search.svg?react';
 import Filter from '../../assets/icons/filter.svg?react';
@@ -45,6 +46,7 @@ import ImpactListIcon from '../../assets/icons/impactList.svg?react';
 import InfoIcon from '../../assets/icons/info_icon.svg?react';
 import CalendarIcon from '../../assets/icons/calendar_icon.svg?react';
 import HideIcon from '../../assets/icons/hide_icon.svg?react';
+import VerticalSeparator from '../../assets/icons/vertical_separator.svg?react';
 import CollapseIcon from '../../assets/icons/collapse-icon.svg?react';
 import ExpandIcon from '../../assets/icons/expand-icon.svg?react';
 import CopyIcon from '../../assets/icons/copy-icon.svg?react';
@@ -52,6 +54,17 @@ import DownloadFile from '../../assets/icons/download-icon.svg?react';
 import RefreshIcon from '../../assets/icons/refresh-icon.svg?react';
 import LicenseInfo from '../../assets/icons/license_info.svg?react';
 import LicenseWarning from '../../assets/icons/license_warning.svg?react';
+import DownloadIcon from '../../assets/icons/download_icon.svg?react';
+import WebIcon from '../../assets/icons/web_icon.svg?react';
+import WebMobileIcon from '../../assets/icons/web&mobile_icon.svg?react';
+import MobileIcon from '../../assets/icons/mobile_icon.svg?react';
+import SalesForceIcon from '../../assets/icons/sales_force.svg?react';
+import MSDynamicIcon from '../../assets/icons/ms_dynamic.svg?react';
+import AllProjectsIcon from '../../assets/icons/all_projects.svg?react';
+import AndroidIcon from '../../assets/icons/android_icon.svg?react';
+
+import SwitchLicenseIcon from '../../assets/icons/switch_license_icon.svg?react';
+import FireflinkLogo from '../../assets/icons/fireflink_logo.svg?react';
 //icons
 Components['delete_info'] = DeleteInfoIcon;
 Components['success'] = ToastSuccessIcon;
@@ -78,6 +91,7 @@ Components['moon_stars_icon'] = MoonStarsIcon;
 Components['sun_icon'] = SunIcon;
 Components['check_mark'] = CheckMarkIcon;
 Components['wrong_mark'] = WrongMarkIcon;
+Components['fireflink_icon'] = FireflinkIcon;
 Components['tick'] = Tick;
 Components['arrow_right'] = ArrowRight;
 Components['search'] = Search;
@@ -97,6 +111,7 @@ Components['add_variable'] = AddVariable;
 Components['info'] = InfoIcon;
 Components['calendar_icon'] = CalendarIcon;
 Components['hide_icon'] = HideIcon;
+Components['vertical_separator'] = VerticalSeparator;
 Components['collapse_icon'] = CollapseIcon;
 Components['refresh_icon'] = RefreshIcon;
 Components['download_file'] = DownloadFile;
@@ -104,5 +119,16 @@ Components['copy_icon'] = CopyIcon;
 Components['expand_icon'] = ExpandIcon;
 Components['license_info'] = LicenseInfo;
 Components['license_warning'] = LicenseWarning;
+Components['download_icon'] = DownloadIcon;
+Components['web_icon'] = WebIcon;
+Components['web&mobile_icon'] = WebMobileIcon;
+Components['mobile_icon'] = MobileIcon;
+Components['sales_force'] = SalesForceIcon;
+Components['ms_dynamic'] = MSDynamicIcon;
+Components['all_projects'] = AllProjectsIcon;
+Components['android_icon'] = AndroidIcon;
+
+Components['select_license'] = SwitchLicenseIcon;
+Components['fireflink-logo'] = FireflinkLogo;
 
 export default Components;

package/src/components/IconButton/IconButton.scss

@@ -21,8 +21,8 @@
   }
   .icon-name {
     min-width: 33px;
-    min-height: 20px;
     color: var(--primary-icon-color);
+    @include mixins.center-content();
   }
   &:hover {
     border: 1px solid var(--secondary-icon-color);
@@ -32,6 +32,7 @@
       min-height: 20px;
       font-weight: 600;
       color: var(--secondary-icon-color);
+      @include mixins.center-content();
     }
     .ff-icon-color {
       path {

package/src/components/Input/types.ts

@@ -6,7 +6,7 @@ export interface InputProps {
   /**
    * Label | field label to be displayed
    */
-  label: string;
+  label?: string;
   /**
    * value | input field value
    */

package/src/components/InputWithDropdown/types.ts

@@ -14,7 +14,7 @@ export interface InputWithDropdownProps {
   /**
    * Label | field label to be displayed
    */
-  label: string;
+  label?: string;
 
   /**
    * value | input field value
@@ -26,8 +26,6 @@ export interface InputWithDropdownProps {
    */
   variant?: 'default' | 'primary';
 
-  
-
   /**
    * error | If true, error message will be displayed
    */

package/src/components/Modal/Modal.stories.tsx

@@ -22,8 +22,10 @@ export const DefaultModalStory: Story = {
     isHeaderDisplayed: true,
     headerContent: <h2>title</h2>,
     children: <h2>Hello</h2>,
-    isFooterDisplayed:true,
+    isFooterDisplayed: true,
     footerContent: <Button variant="primary" label="continue" />,
+    customWidth: '660px',
+    customHeight: 'auto',
   },
 };
 
@@ -52,7 +54,9 @@ export const Controlled: Story = {
             children={<div>Hello</div>}
             ariaHideApp={true}
             isFooterDisplayed={true}
-            footerContent={<Button variant="primary" label='continue'/>}
+            footerContent={<Button variant="primary" label="continue" />}
+            customWidth="660px"
+            customHeight="auto"
           />
         )}
       </>

package/src/components/Modal/Modal.tsx

@@ -4,7 +4,6 @@ import './modal.scss';
 import { ModalProps } from './types';
 import { ThemeContext } from '../ThemeProvider/ThemeProvider';
 
-
 const Modal: React.FC<ModalProps> = ({
   isOpen,
   onClose,
@@ -18,6 +17,8 @@ const Modal: React.FC<ModalProps> = ({
   shouldCloseOnEsc = true,
   ariaHideApp = true,
   shouldCloseOnOverlayClick = true,
+  customWidth = '660px', // default width
+  customHeight = 'auto', // default height
   children,
 }) => {
   useEffect(() => {
@@ -52,6 +53,7 @@ const Modal: React.FC<ModalProps> = ({
     >
       <div
         className={`ff-modal-content ${currentTheme} ${contentClassName || ''}`}
+        style={{ width: customWidth, height: customHeight }}
         onClick={(e) => e.stopPropagation()}
         aria-label={contentLabel}
       >
@@ -61,7 +63,9 @@ const Modal: React.FC<ModalProps> = ({
         {children}
       </div>
       {isFooterDisplayed && (
-        <div className="ff-modal-footer">{footerContent}</div>
+        <div className="ff-modal-footer" style={{ width: customWidth }}>
+          {footerContent}
+        </div>
       )}
     </div>,
     document.body

package/src/components/Modal/modal.scss

@@ -1,4 +1,5 @@
 @use '../../assets/styles/mixins' as *;
+
 .ff-modal-overlay {
   position: fixed;
   top: 0;
@@ -13,18 +14,19 @@
 .ff-modal-content {
   background: var(--ff-mini-modal-border);
   position: relative;
-  max-width: 549px;
-  width: 100%;
+  max-width: 100%;
   border-radius: 12px 12px 0 0;
   padding: 16px;
+  
   .ff-modal-header {
     height: 32px;
-    width: 448px;
+    width: 100%;
   }
 }
+
 .ff-modal-footer {
   background-color: var(--expandable-menu-option-bg);
-  max-width: 549px;
+  max-width: 100%;
   width: 100%;
   height: 32px;
   border-radius: 0 0 12px 12px;

package/src/components/Modal/types.ts

@@ -34,4 +34,6 @@ export interface ModalProps {
   /***Content to be displayed inside the modal */
   children: ReactNode;
   isFooterDisplayed: boolean;
+  customWidth: string;
+  customHeight?: string;
 }

package/src/components/MultiSelect/MultiSelect.scss

@@ -108,6 +108,13 @@
             }
           }
         }
+        .ff-multiselect-more-chip{
+          width: 1rem;
+          @extend .fontXs;
+          font-weight: 600;
+          line-height: 16px;
+          color: var(--brand-color);
+        }
       }
     }
     &__toggle {
@@ -182,7 +189,7 @@
   .error-text {
     @extend .font-size-8;
     position: absolute;
-    top: 36px;
+    margin-top: 0.25rem;
     left: 12px;
     color: var(--error-light);
     letter-spacing: 0.5px;

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

@@ -52,6 +52,32 @@ export const Default3: Story = {
     ...defaultArgs,
   },
 };
+export const EmailGroup: Story = {
+  render: () => {
+    const [options] = useState([
+      { label: 'Sample1@gmail.com', value: 'sample1@gmail.com' },
+      { label: 'Sample2@gmail.com', value: 'sample2@gmail.com' },
+    ]);
+    const [selectedOptions, setSelectedOptions] = useState<
+      { label?: string; value?: string }[]
+    >([{ label: 'Sample1@gmail.com', value: 'sample1@gmail.com'}]);
+    const onChange = (options: { label?: string; value?: string }[]) => {
+      setSelectedOptions(options);
+    };
+    return (
+      <MultiSelect
+        label={'Enter Email'}
+        type='email'
+        required
+        options={options}
+        selectedOptions={selectedOptions}
+        onChange={onChange}
+        acceptNewOption={true}
+        displayCount={true}
+      />
+    );
+  },
+};
 
 export const Controlled: Story = {
   render: () => {

package/src/components/MultiSelect/MultiSelect.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 import './MultiSelect.scss';
@@ -30,8 +30,10 @@ const ChipElement = ({
 };
 const MultiSelect = ({
   options,
+  type = "text",
   selectedOptions = [],
   onChange = () => {},
+  acceptNewOption = false,
   zIndex = 100,
   label = '',
   onSearch = () => {},
@@ -40,6 +42,7 @@ const MultiSelect = ({
   errorMessage = 'Fill this field',
   withSelectButton = false,
   onSelect = () => {},
+  displayCount = false
 }: MultiSelectProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [allOptions, setAllOptions] = useState(options);
@@ -47,6 +50,7 @@ const MultiSelect = ({
   const [searchedKeyword, setSearchedKeyword] = useState('');
   const [isSelectFocusedOnce, setIsSelectFocusedOnce] =
     useState<boolean>(false);
+  const [inputError, setInputError] = useState<string>('')
 
   const [dropdownPosition, setDropdownPosition] = useState<{
     top: number;
@@ -67,6 +71,9 @@ const MultiSelect = ({
   const selectWrapper = useRef<HTMLInputElement>(null);
   let isFieldSkipped = isSelectFocusedOnce && selectedOptions.length === 0;
 
+  const maxVisibleChips = 2;
+  const hiddenCount = selectedOptions.length - maxVisibleChips;
+
   const handleClick = () => {
     if (!isOpen) {
       setIsOpen(true);
@@ -102,6 +109,32 @@ const MultiSelect = ({
     e.stopPropagation();
     handleOptionChange(option, false);
   };
+  const handleKeyEnter = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (acceptNewOption && e.key === "Enter") {
+      setInputError('');
+      if (type === "email") {
+        const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (!emailPattern.test(searchedKeyword)) {
+          setIsOpen(false);
+          setInputError("Please enter a valid email address.");
+          return;
+        }
+      }
+
+      const newOption = {
+        label: searchedKeyword,
+        value: searchedKeyword.toLowerCase(),
+        isChecked: true,
+      };
+      const filteredOptions = [...allOptions].filter(option => option.isChecked === true);
+
+      setAllOptions([...allOptions, newOption]);
+      setSearchedKeyword('');
+      onChange?.([...filteredOptions, { label: searchedKeyword, value: searchedKeyword.toLocaleLowerCase() }]);
+      setIsOpen(false);
+    }
+  };
+
   const calculatePosition = () => {
     if (dropdownWrapper.current && selectWrapper.current) {
       const rect = dropdownWrapper.current?.getBoundingClientRect();
@@ -159,6 +192,7 @@ const MultiSelect = ({
         !dropdownRef.current.contains(event?.target as Node) &&
         !selectWrapper.current.contains(event?.target as Node)
       ) {
+        setInputError('')
         setIsOpen(false);
         if (!isSelectFocusedOnce) {
           setIsSelectFocusedOnce(true);
@@ -179,7 +213,7 @@ const MultiSelect = ({
       className={classNames('ff-multiselect-wrapper', {
         'ff-multiselect-wrapper--with-options': selectedOptions?.length,
         'ff-multiselect-wrapper--opened-dropdown': isOpen,
-        'ff-multiselect-wrapper--error': isFieldSkipped && required,
+        'ff-multiselect-wrapper--error': (isFieldSkipped && required) || inputError,
         'ff-multiselect-wrapper--disabled': disabled,
       })}
     >
@@ -197,15 +231,28 @@ const MultiSelect = ({
             {label}
           </span>
           <div className="ff-multiselect-chip-container">
-            {selectedOptions.map((option) => (
-              <ChipElement
-                key={option?.label}
-                label={option?.label || ''}
-                onChipCloseClick={(e) => handleChipCloseClick(option, e)}
-              />
-            ))}
+            {displayCount ?
+              <>
+                {selectedOptions.slice(0, maxVisibleChips).map((option) => (
+                  <ChipElement
+                    key={option?.label}
+                    label={option?.label || ''}
+                    onChipCloseClick={(e) => handleChipCloseClick(option, e)}
+                  />
+                ))}
+              </> :
+              selectedOptions.map((option) => (
+                <ChipElement
+                  key={option?.label}
+                  label={option?.label || ''}
+                  onChipCloseClick={(e) => handleChipCloseClick(option, e)}
+                />
+              ))
+            }
             <div className="ff-multiselect-input-container">
               <input
+                value={searchedKeyword}
+                type={type}
                 autoComplete="off"
                 placeholder="search..."
                 ref={inputRef}
@@ -216,6 +263,7 @@ const MultiSelect = ({
                   setSearchedKeyword(e.target.value);
                   onSearch?.(e.target.value);
                 }}
+                onKeyDown={handleKeyEnter}
                 id="input-ele"
                 className="ff-select-input"
                 style={{
@@ -224,6 +272,14 @@ const MultiSelect = ({
                 }}
               />
             </div>
+            {hiddenCount > 0 && (
+              <div
+                className="ff-multiselect-more-chip"
+                onClick={toggleDropdown}
+              >
+                +{hiddenCount}
+              </div>
+            )}
           </div>
         </div>
         <div onClick={toggleDropdown} className="ff-multiselect__toggle">
@@ -238,8 +294,8 @@ const MultiSelect = ({
         </div>
       </div>
       <div ref={dropdownWrapper}>
-        {isFieldSkipped && required && errorMessage && (
-          <div className="error-text">{errorMessage}</div>
+        {(inputError || (isFieldSkipped && required && errorMessage)) && (
+          <div className="error-text">{inputError || errorMessage }</div>
         )}
         {isOpen &&
           createPortal(
@@ -261,4 +317,4 @@ const MultiSelect = ({
   );
 };
 
-export default MultiSelect;
+export default MultiSelect;

package/src/components/MultiSelect/MultiSelectTypes.ts

@@ -6,16 +6,19 @@ interface Option {
 }
 interface MultiSelectProps {
   options: Option[];
+  type? : 'email' | 'text';
   label: string;
   selectedOptions?: Option[];
   disabled?: boolean;
   onSearch?: (searchedKeyword: string) => void;
   onChange?: (selectedOptions: Option[]) => void;
+  acceptNewOption?: boolean;
   zIndex?: number;
   required?: boolean;
   errorMessage?: string;
   withSelectButton?: boolean;
   onSelect?: () => void;
+  displayCount?:boolean;
 }
 
 export { Option, MultiSelectProps };

package/src/components/Select/Select.scss

@@ -112,7 +112,7 @@
       @include absolute-position(6px, auto, auto, auto);
       width: calc(100% - 38px);
       min-height: calc(100% - 8px);
-      padding: 0 8px;
+      padding: 0 28px 0 8px;
       border-radius: 4px;
       border: 1px solid transparent;
       z-index: 100;

package/src/index.ts

@@ -36,7 +36,9 @@ import Search from './components/Search/Search';
 import DatePicker from './components/DatePicker';
 import StateDropdown from './components/StateDropdown';
 import IconButton from './components/IconButton';
+import Modal from './components/Modal';
 import DragAndDrop from './components/DragAndDrop/DragAndDrop';
+import AllProjectsDropdown from './components/AllProjectsDropdown';
 
 // Utils imports
 import { checkEmpty } from './utils/checkEmpty/checkEmpty';
@@ -86,7 +88,10 @@ export {
   StateDropdown,
   StatusButton,
   IconButton,
+  Modal,
+
   DragAndDrop,
+  AllProjectsDropdown,
 
   // utils exports
   checkEmpty,

package/lib/components/ThemeProvider/CustomThemeProvider.d.ts

@@ -1,8 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ThemeContextType } from './types';
-declare const ThemeContext: React.Context<ThemeContextType | undefined>;
-declare const CustomThemeProvider: React.FC<{
-    children: ReactNode;
-}>;
-export { ThemeContext };
-export default CustomThemeProvider;

package/lib/hooks/useCustomThemeProvider.d.ts

@@ -1,11 +0,0 @@
-import React, { ReactNode } from 'react';
-interface ThemeContextType {
-    currentTheme: string;
-    setCurrentTheme: React.Dispatch<React.SetStateAction<string>>;
-    applyTheme: (newTheme: string) => void;
-}
-export declare const useCustomThemeProvider: React.FC<{
-    children: ReactNode;
-}>;
-export declare const useTheme: () => ThemeContextType;
-export {};