pixel-react 1.2.0 → 1.2.2

package/src/components/Select/components/Dropdown/Dropdown.tsx

@@ -7,6 +7,7 @@ import Typography from '../../../Typography';
 import { ffid } from '../../../../utils/ffID/ffid';
 import { ThemeContext } from '../../../ThemeProvider/ThemeProvider';
 import classNames from 'classnames';
+import { getLabel } from '../../../../utils/getSelectOptionValue/getSelectOptionValue';
 
 const Dropdown = ({
   onSelectBlur,
@@ -15,6 +16,7 @@ const Dropdown = ({
   options = [],
   optionZIndex = 100,
   inputRef,
+  labelAccessor,
 }: DropDownListProps) => {
   const themeContext = useContext(ThemeContext);
   const currentTheme = themeContext?.currentTheme;
@@ -71,7 +73,7 @@ const Dropdown = ({
               color="var(--ff-select-text-color)"
               onClick={() => onSelectOptionSelector(option)}
             >
-              {option.label}
+              {getLabel(option, labelAccessor)}
             </Typography>
           ))
         ) : (

package/src/components/Select/components/Dropdown/dropdownTypes.ts

@@ -7,6 +7,8 @@ export interface DropDownListProps {
   options?: Option[];
   optionZIndex?: number;
   inputRef?: React.RefObject<HTMLInputElement>;
+  labelAccessor?: string;
+  valueAccessor?: string;
 }
 
 export const dropdownDefaultCSSData = {
@@ -17,3 +19,4 @@ export const dropdownDefaultCSSData = {
   // Future use case if we provide padding-top, padding-bottom for option wrapper
   dropDownWrapperPadding: 0,
 };
+

package/src/components/Select/types.ts

@@ -1,5 +1,3 @@
-import { ReactNode } from 'react';
-
 export interface SelectProps {
   /*
    * Label for the select dropdown
@@ -69,6 +67,15 @@ export interface SelectProps {
    * selectedOptionColor prop provides the custom color for the selected option
    */
   selectedOptionColor?: string;
+
+  /**
+   * Label accessor
+   */
+  labelAccessor?: string;
+  /**
+   * Value accessor
+   */
+  valueAccessor?: string;
 }
 
 export interface DrowdownPosition {
@@ -124,8 +131,8 @@ export type SelectAction =
       };
     };
 
+type OptionValue = any;
+
 export interface Option {
-  label: string | ReactNode;
-  value: string;
-  disabled?: boolean;
+  [key: string]: OptionValue;
 }

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,6 +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';
@@ -93,7 +98,7 @@ export {
   Table,
   RadioButton,
   RadioGroup,
-  Form,
+  Forms,
   MiniModal,
   Container,
   Row,
@@ -120,7 +125,12 @@ export {
   MachineInputField,
   SequentialConnectingBranch,
   AttachmentButton,
+  LabelEditTextField,
+  ExcelFile,
   IconRadioGroup,
+  Toastify,
+  toast,
+  ModuleChip,
 
   // utils exports
   checkEmpty,

package/src/utils/getSelectOptionValue/getSelectOptionValue.ts

@@ -0,0 +1,31 @@
+type DynamicValues = any;
+
+interface dynamicObject {
+  [key: string]: DynamicValues;
+}
+
+type accessorType = string | undefined;
+
+export const getLabel = (
+  option: dynamicObject,
+  accessor: accessorType = ''
+) => {
+  if (!accessor) {
+    if (option.hasOwnProperty('label')) {
+      return option.label;
+    }
+  }
+  return option[accessor];
+};
+
+export const getValue = (
+  option: dynamicObject,
+  accessor: accessorType = ''
+) => {
+  if (!accessor) {
+    if (option.hasOwnProperty('value')) {
+      return option.label;
+    }
+  }
+  return option[accessor];
+};

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;