pixel-react 1.2.1 → 1.2.2

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

@@ -55,13 +55,25 @@ export const Default3: Story = {
 export const EmailGroup: Story = {
   render: () => {
     const [options] = useState([
-      { label: 'Sample1@gmail.com', value: 'sample1@gmail.com' },
+      {
+        label: 'Sample1@gmail.com',
+        value: 'sample1@gmail.com',
+        isDisabled: true,
+      },
       { 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 }[]) => {
+      { label?: string; value?: string; isDisabled?: boolean }[]
+    >([
+      {
+        label: 'Sample1@gmail.com',
+        value: 'sample1@gmail.com',
+        isDisabled: true,
+      },
+    ]);
+    const onChange = (
+      options: { label?: string; value?: string; isDisabled?: boolean }[]
+    ) => {
       setSelectedOptions(options);
     };
     return (

package/src/components/MultiSelect/MultiSelect.tsx

@@ -5,6 +5,7 @@ import './MultiSelect.scss';
 import Dropdown from './Dropdown';
 import Icon from '../Icon';
 import { MultiSelectProps, Option } from './MultiSelectTypes';
+import Typography from '../Typography';
 
 const ChipElement = ({
   label,
@@ -22,6 +23,8 @@ const ChipElement = ({
           className="ff-multiselect-chip-close-icon"
           onClick={onChipCloseClick}
           name="close_pill"
+          height={13} //as per the latest chnages in icon container we have to give this
+          width={13}
         />
       </div>
     );
@@ -46,6 +49,9 @@ const MultiSelect = ({
 }: MultiSelectProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [allOptions, setAllOptions] = useState(options);
+  useEffect(() => {
+    setAllOptions(options);
+  }, [options]);
 
   const [searchedKeyword, setSearchedKeyword] = useState('');
   const [isSelectFocusedOnce, setIsSelectFocusedOnce] =
@@ -236,7 +242,8 @@ const MultiSelect = ({
     >
       <div className="ff-multiselect" onClick={handleClick}>
         <div className="ff-multiselect__main">
-          <span
+          <Typography
+            as="span"
             className={classNames({
               'active-default-label':
                 isOpen ||
@@ -244,9 +251,9 @@ const MultiSelect = ({
                 (isFieldSkipped && required),
               'default-label': !isOpen && !selectedOptions?.length,
             })}
-          >
-            {label}
-          </span>
+            children={label}
+          />
+
           <div className="ff-multiselect-chip-container">
             {displayCount ? (
               <>

package/src/components/MultiSelect/MultiSelectTypes.ts

@@ -3,10 +3,11 @@ interface Option {
   value?: string;
   accessor?: string;
   isChecked?: boolean;
+  isDisabled?: boolean;
 }
 interface MultiSelectProps {
   options: Option[];
-  type? : 'email' | 'text';
+  type?: 'email' | 'text';
   label: string;
   selectedOptions?: Option[];
   disabled?: boolean;
@@ -18,7 +19,7 @@ interface MultiSelectProps {
   errorMessage?: string;
   withSelectButton?: boolean;
   onSelect?: () => void;
-  displayCount?:boolean;
+  displayCount?: boolean;
 }
 
-export { Option, MultiSelectProps };
+export { Option, MultiSelectProps };

package/src/components/Select/Select.scss

@@ -28,6 +28,10 @@
 
 .ff-select-wrapper {
   position: relative;
+  
+  .ff-select-input {
+    cursor: pointer;
+  }
 
   .ff-select {
     @extend .fontSm;

package/src/components/Select/Select.tsx

@@ -254,8 +254,8 @@ const Select = ({
   const applyActiveOptionClasses = !isInputFocused && Boolean(option);
 
   return (
-    <div className={classNames(`ff-select-wrapper ${className}`)}>
-      <div className="ff-select">
+    <div className={classNames(`ff-select-wrapper`)}>
+      <div className={`ff-select ${className}`}>
         <input
           type="text"
           className={classNames('ff-select-input', {

package/src/components/Toastify/Toastify.stories.tsx

@@ -0,0 +1,52 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Toastify, toast } from './Toastify';
+import Button from '../Button';
+
+const meta: Meta<typeof Toastify> = {
+  title: 'Components/Toastify',
+  component: Toastify,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Toastify>;
+
+const defaultArgs = {
+  isOpen: false,
+  toastTitle: 'Success',
+  toastMessage: 'Variable name Requested for Review successfully',
+  closeButtonLabel: 'x',
+  displayDuration: 3000,
+};
+
+export const Controlled: Story = {
+  args: {
+    ...defaultArgs,
+  },
+  // import { Toastify, toast } from 'pixel-react';
+  render: () => (
+    <>
+      {/* Render Toastify to allow toast notifications */}
+      <Toastify />
+
+      {/* Button to trigger a toast notification */}
+      <Button
+        variant="primary"
+        onClick={() => toast.success('Your request was successful!')}
+      >
+        Show Success Toast
+      </Button>
+      <br/>
+      <Button
+        variant="delete"
+        onClick={() => toast.error('Something went wrong!')}
+      >
+        Show Error Toast
+      </Button>
+    </>
+  ),
+};
+
+export default meta;

package/src/components/Toastify/Toastify.tsx

@@ -0,0 +1,66 @@
+import { useState, useRef } from 'react';
+import Toaster from '../Toast/Toast';
+import { Variant, ToastProps } from './types';
+
+let openToast: (variant: Variant, message: string) => void;
+
+export const Toastify = () => {
+  const [toastProps, setToastProps] = useState<ToastProps>({
+    isOpen: false,
+    variant: 'info',
+    toastTitle: '',
+    toastMessage: '',
+  });
+
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  openToast = (variant: Variant, message: string) => {
+    // Clear the previous timeout if it exists
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+
+    const title =
+      variant === 'danger'
+        ? 'Error!'
+        : variant.charAt(0).toUpperCase() + variant.slice(1);
+    // Close the existing toast if open, and then immediately show the new one
+    setToastProps((prev) => ({
+      ...prev,
+      isOpen: false,
+    }));
+
+    setTimeout(() => {
+      setToastProps({
+        isOpen: true,
+        variant,
+        toastTitle: `${title}!`,
+        toastMessage: message,
+      });
+    }, 10);
+
+    timeoutRef.current = setTimeout(() => {
+      setToastProps((prev) => ({ ...prev, isOpen: false }));
+    }, 3000);
+  };
+
+  return (
+    <Toaster
+      isOpen={toastProps.isOpen}
+      variant={toastProps.variant}
+      toastTitle={toastProps.toastTitle}
+      toastMessage={toastProps.toastMessage}
+    />
+  );
+};
+
+export default Toastify;
+
+// Utility to trigger toast messages outside of the Toastify component
+export const toast = {
+  success: (message: string) => openToast('success', message),
+  error: (message: string) => openToast('danger', message),
+  warning: (message: string) => openToast('warning', message),
+  info: (message: string) => openToast('info', message),
+};

package/src/components/Toastify/index.ts

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

package/src/components/Toastify/types.ts

@@ -0,0 +1,8 @@
+export type Variant = 'success' | 'warning' | 'danger' | 'info' | 'confirm';
+
+export interface ToastProps {
+  isOpen: boolean;
+  variant: Variant;
+  toastTitle: string;
+  toastMessage: string;
+}

package/src/components/Tooltip/Tooltip.tsx

@@ -17,6 +17,7 @@ const Tooltip: React.FC<TooltipProps> = ({
   children,
   placement = 'bottom',
   disabled = false,
+  zIndex = 99,
 }) => {
   const [isVisible, setIsVisible] = useState(false);
   const titleRef: TitleRef = useRef(null);
@@ -178,7 +179,7 @@ const Tooltip: React.FC<TooltipProps> = ({
         createPortal(
           <div
             ref={titleRef}
-            style={styles[placement]}
+            style={{ ...styles[placement], zIndex }}
             className={classNames('ff-tooltip', currentTheme, {
               'ff-tooltip--visible': isVisible,
             })}

package/src/components/Tooltip/types.ts

@@ -46,6 +46,12 @@ interface TooltipProps {
    * @default false
    */
   disabled?: boolean;
+  /**.
+   * Z-Index is by default 99
+   * 
+   * @default 99
+   */
+  zIndex?: number | string ;
 }
 
 

package/src/components/Typography/Typography.scss

@@ -6,28 +6,32 @@
 @font-face {
   font-family: 'Poppins';
   font-weight: 400;
-  src: local('Poppins-Regular'),
+  src:
+    local('Poppins-Regular'),
     url(../../fonts/Poppins/Poppins-Regular.ttf) format('truetype');
 }
 
 @font-face {
   font-family: 'Poppins';
   font-weight: 500;
-  src: local('Poppins-Medium'),
+  src:
+    local('Poppins-Medium'),
     url(../../fonts/Poppins/Poppins-Medium.ttf) format('truetype');
 }
 
 @font-face {
   font-family: 'Poppins';
   font-weight: 600;
-  src: local('Poppins-SemiBold'),
+  src:
+    local('Poppins-SemiBold'),
     url(../../fonts/Poppins/Poppins-SemiBold.ttf) format('truetype');
 }
 
 @font-face {
   font-family: 'Poppins';
   font-weight: 700;
-  src: local('Poppins-Bold'),
+  src:
+    local('Poppins-Bold'),
     url(../../fonts/Poppins/Poppins-Bold.ttf) format('truetype');
 }
 
@@ -46,4 +50,8 @@
   &--bold {
     font-weight: 700;
   }
+  .required-asterisk {
+    color: var(--input-error-text-color);
+    padding-right: 4px;
+  }
 }

package/src/components/Typography/Typography.stories.tsx

@@ -14,6 +14,7 @@ type Story = StoryObj<typeof Typography>;
 
 export const Docs: Story = {
   args: {
+    required: false,
     children: 'Typography',
   },
 };
@@ -51,6 +52,7 @@ export const Bold14px: Story = {
     fontSize: '16px',
     as: 'h2',
     children: 'This is Bold text with 700 font weight and 16px font size.',
+    required: true,
   },
 };
 

package/src/components/Typography/Typography.tsx

@@ -14,6 +14,7 @@ const Typography: React.FC<TypographyProps> = ({
   children,
   htmlFor = '',
   onClick = () => {},
+  required = false,
 }) => {
   const fontSizeValue =
     typeof fontSize === 'number' ? `${fontSize}px` : fontSize;
@@ -31,6 +32,7 @@ const Typography: React.FC<TypographyProps> = ({
       }}
       onClick={onClick}
     >
+      {required && <span className="required-asterisk">*</span>}
       {children}
     </Element>
   );

package/src/components/Typography/types.ts

@@ -53,4 +53,5 @@ export interface TypographyProps {
    * To add onClick function
    */
   onClick?: () => void;
+  required?: boolean; // TO add * in the label
 }

package/src/index.ts

@@ -23,7 +23,7 @@ import LazyLoad from './components/LazyLoad/LazyLoad';
 import ThemeProvider from './components/ThemeProvider';
 import Typography from './components/Typography';
 import useTheme from './hooks/useTheme';
-import Form from './components/Form';
+import Forms from './components/Form/Forms';
 import InputWithDropdown from './components/InputWithDropdown';
 import RadioButton from './components/RadioButton';
 import RadioGroup from './components/RadioGroup';
@@ -50,7 +50,11 @@ import IconRadioGroup from './components/IconRadioGroup';
 import MachineInputField from './components/MachineInputField';
 import SequentialConnectingBranch from './components/SequentialConnectingBranch';
 import AttachmentButton from './components/AttachmentButton';
+import { Toastify, toast } from './components/Toastify/Toastify';
+
 import LabelEditTextField from './components/LabelEditTextField';
+import ExcelFile from './components/ExcelFile';
+import ModuleChip from './components/ModulesChip/ModuleChip';
 
 // Utils imports
 import { checkEmpty } from './utils/checkEmpty/checkEmpty';
@@ -94,7 +98,7 @@ export {
   Table,
   RadioButton,
   RadioGroup,
-  Form,
+  Forms,
   MiniModal,
   Container,
   Row,
@@ -122,7 +126,11 @@ export {
   SequentialConnectingBranch,
   AttachmentButton,
   LabelEditTextField,
+  ExcelFile,
   IconRadioGroup,
+  Toastify,
+  toast,
+  ModuleChip,
 
   // utils exports
   checkEmpty,

package/src/components/ExcelFile/ChangeExcelStyles.tsx

@@ -1,78 +0,0 @@
-import { CellBase } from "./ExcelFile/Excel";
-
-interface ChangeExcelStylesOptions {
-  sheetName: string;
-  styleType: string;
-  value: string;  
-  selectedCell: { row: number; column: number }[];
-}
-
-export default function ChangeExcelStyles(
-  setWorksheetsData: React.Dispatch<React.SetStateAction<{ [key: string]: Matrix<CellBase>; }>>,
-  options: ChangeExcelStylesOptions
-) {
-  const { sheetName, styleType, value, selectedCell } = options;
-
-  setWorksheetsData((prev) => {
-    if (!prev[sheetName]) {
-      return prev;
-    }
-
-    const sheetData = prev[sheetName]!;
-    const selectedCells = new Set(
-      selectedCell.map(({ row, column }) => `${row}-${column}`)
-    );
-
-    const updatedSheetData: Matrix<CellBase> = sheetData.map((row, rowIndex) =>
-      row.map((cell, columnIndex) => {
-        const isSelected = selectedCells.has(`${rowIndex}-${columnIndex}`);
-        if (isSelected&&cell!==undefined) {
-          let newStyle = { ...cell.style };
-    
-          switch (styleType) {
-            // case 'border':
-            //   newStyle = handleBorderChange(newStyle, value);
-            //   break;
-            // case 'alignment':
-            //   newStyle = handleAlignmentChange(newStyle, value);
-            //   break;
-            // case 'bold':
-            //   newStyle = handleBoldChange(newStyle);
-            //   break;
-            // case 'italic':
-            //   newStyle = handleItalicChange(newStyle);
-            //   break;
-            case 'color':
-              newStyle = handleColorChange(newStyle, value);              
-              break;
-            case 'backgroundColor':
-              newStyle = handleBackgroundColorChange(newStyle, value);
-              break;
-            default:
-              break;
-          }
-    
-          const newValue = cell.value ?? "";
-          
-          return { ...cell, style: newStyle, value: newValue };
-        }
-        return cell;
-      })
-    );
-    
-    
-
-    return { ...prev, [sheetName]: updatedSheetData };
-  });
-}
-
-function handleColorChange(style: CellStyle, value: string): CellStyle {
-  return { ...style, color: `#${value}` };
-}
-
-function handleBackgroundColorChange(
-  style: CellStyle,
-  value: string
-): CellStyle {
-  return { ...style, backgroundColor: `#${value}` };
-}

package/src/components/ExcelFile/ImportExcelStyles.tsx

@@ -1,86 +0,0 @@
-interface CellStyle {
-  color?: string;
-  backgroundColor?: string;
-  bold?: boolean;
-  italic?: boolean;
-  name?: string;
-  border: {
-    top: string;
-    bottom: string;
-    left: string;
-    right: string;
-  };
-  alignment: {
-    horizontal?: string;
-    vertical?: string;
-    wrapText?: boolean;
-  };
-}
-
-interface CellData {
-  style?: CellStyle;
-}
-
-type ImportExcelStylesData = Array<Array<CellData>>;
-
-export default function ImportExcelStyles(data: ImportExcelStylesData | null) {
-  const getTable = document.querySelector(
-    '.Spreadsheet__table'
-  ) as HTMLTableElement | null;
-
-  if (!getTable) {
-    return;
-  }
-
-  const tableRows = getTable.querySelectorAll('tr');
-  const tableHeader = getTable.querySelectorAll('th');
-
-  tableHeader.forEach((cell) => {
-    const cellText = cell.innerText.trim();
-    const isNumber = !isNaN(Number(cellText));
-    cell.style.width = isNumber ? '50px' : '150px';
-  });
-
-  if (data) {
-    data.forEach((row, rowIndex) => {
-      const rowData = tableRows[rowIndex + 1] as
-        | HTMLTableRowElement
-        | undefined;
-
-      if (!rowData) return;
-
-      const colData = rowData.querySelectorAll('.Spreadsheet__cell');
-
-      row.forEach((column, columnIndex) => {
-        if (colData[columnIndex] && column.style) {
-          const {
-            color,
-            backgroundColor,
-            bold,
-            italic,
-            name,
-            border,
-            alignment,
-          } = column.style;
-          const cell = colData[columnIndex] as HTMLElement;
-          cell.style.color = color ? `#${color}` : '';
-          cell.style.backgroundColor = backgroundColor
-            ? `#${backgroundColor}`
-            : 'white';
-          cell.style.fontWeight = bold ? 'bolder' : 'normal';
-          cell.style.fontStyle = italic ? 'italic' : 'normal';
-          cell.style.fontFamily = name || '';
-          cell.style.borderLeft =
-            border.left === 'NONE' ? '' : `2px solid ${'black'}`;
-          cell.style.borderRight =
-            border.right === 'NONE' ? '' : `2px solid ${'black'}`;
-          cell.style.borderBottom =
-            border.bottom === 'NONE' ? '' : `2px solid ${'black'}`;
-          cell.style.borderTop =
-            border.top === 'NONE' ? '' : `2px solid ${'black'}`;
-          cell.style.textAlign = alignment?.horizontal || 'left';
-        }
-      });
-    });
-  }
-}

package/src/components/Form/Form.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import {
-  useForm,
-  UseFormProps,
-  SubmitHandler,
-  FieldValues,
-  FieldPath,
-  FieldErrors,
-} from 'react-hook-form';
-import './Form.scss';
-
-interface FormProps<T extends FieldValues> extends UseFormProps<T> {
-  onSubmit: SubmitHandler<T>;
-  children: (props: {
-    register: (name: FieldPath<T>, options?: any) => any;
-    errors: FieldErrors<T>;
-    handleBlur: (field: FieldPath<T>) => void;
-    getValues: () => T;
-    watch: (field?: FieldPath<T>) => any;
-    setValue: (field: FieldPath<T>, value: any, options?: object) => void;
-  }) => React.ReactNode;
-}
-
-const Form = <T extends FieldValues>({
-  onSubmit,
-  children,
-  ...rest
-}: FormProps<T>) => {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-    trigger,
-    getValues,
-    watch,
-    setValue
-  } = useForm<T>(rest);
-
-  const handleBlur = async (field: FieldPath<T>) => {
-    await trigger(field);
-  };
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      {children({
-        register,
-        errors,
-        handleBlur,
-        getValues,
-        watch,
-        setValue,
-      })}
-    </form>
-  );
-};
-
-export default Form;