pixel-react 1.2.1 → 1.2.3

package/src/components/MiniModal/MiniModal.tsx

@@ -14,8 +14,8 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
       anchorRef,
       headerProps,
       childContent,
-      cancelButtonProps,
-      proceedButtonProps,
+      cancelButtonProps = () => {},
+      proceedButtonProps = () => {},
       footerContent,
       isWrapped = false,
       isAnimated = false,
@@ -29,6 +29,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
       extraTopSpace,
       extraRightSpace,
       extraLeftSpace,
+      isIconModel,
     },
     ref
   ) => {
@@ -144,8 +145,8 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
     //specifying the modal's escape and enter functionality
     const handleEsc = useEscapeKey('Escape');
     const handleEnter = useEscapeKey('Enter');
-    handleEsc(cancelButtonProps.onClick);
-    handleEnter(proceedButtonProps.onClick);
+    handleEsc(cancelButtonProps?.onClick);
+    handleEnter(proceedButtonProps?.onClick);
     useClickOutside(modalRef, cancelButtonProps.onClick);
 
     //calculate the modal position
@@ -227,6 +228,8 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
         >
           {headerProps ? (
             <Typography as="div">{headerProps}</Typography>
+          ) : isIconModel ? (
+            <></>
           ) : (
             <Typography as="header">
               <Typography as="h2">Header text</Typography>
@@ -236,13 +239,15 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
           <div className="modal-content">{childContent}</div>
           {footerContent ? (
             <Typography as="footer">{footerContent}</Typography>
+          ) : isIconModel ? (
+            <></>
           ) : (
             <footer className="modal-footer">
               <Button
                 variant="primary"
                 className="btn-cancel"
-                onClick={cancelButtonProps.onClick}
-                label={cancelButtonProps.text}
+                onClick={cancelButtonProps?.onClick}
+                label={cancelButtonProps?.text}
               />
               <Button
                 variant="secondary"

package/src/components/MiniModal/types.ts

@@ -1,8 +1,4 @@
 import { ReactNode, RefObject } from 'react';
-interface ButtonProps {
-  text: string;
-  onClick: () => void;
-}
 interface ModalDimensions {
   width?: number;
   height?: number;
@@ -23,11 +19,11 @@ export interface MiniEditModalProps {
   /**
    * Props for the cancel button inside the modal
    */
-  cancelButtonProps: ButtonProps;
+  cancelButtonProps?: any;
   /**
    * Props for the proceed button inside the modal.
    */
-  proceedButtonProps: ButtonProps;
+  proceedButtonProps?: any;
   /**
    * Optional content for the footer of the modal.
    */
@@ -44,6 +40,10 @@ export interface MiniEditModalProps {
    * Specifies if the modal should behave as a popover with an arrow.
    */
   isPopOver?: boolean;
+  /**
+   * Specifies if the modal should behave as a popover with an arrow.
+   */
+  isIconModel?: boolean;
   /**
    * Sets the position of the modal relative to its anchor.
    * bottom: The modal appears below the anchor.

package/src/components/ModulesChip/ModuleChip.scss

@@ -0,0 +1,20 @@
+@use '../../assets/styles/fonts';
+@use '../../assets/styles/mixins';
+
+.ff-expandable-chip-menu {
+  width: 75px;
+  height: 32px;
+  border: 0.5px solid;
+  border-radius: 16px;
+  color: var(--brand-color);
+  cursor: pointer;
+  @include mixins.center-content();
+  .ff-label-chip {
+    &--active {
+      color: var(--ff-header-text-color);
+    }
+  }
+  &--active {
+    background: var(--brand-color);
+  }
+}

package/src/components/ModulesChip/ModuleChip.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ModuleChip from './ModuleChip';
+import { useState } from 'react';
+
+const meta: Meta<typeof ModuleChip> = {
+  title: 'Components/ModuleChip',
+  component: ModuleChip,
+  parameters: {
+    layout: 'center',
+  },
+  argTypes: {
+    isActive: Boolean,
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof ModuleChip>;
+
+const defaultArgs = {
+  label: 'Modules',
+  isActive: false,
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [selectedMenu, setSelectedMenu] = useState<boolean>(true);
+    const handleChipClick = () => {
+      setSelectedMenu(!selectedMenu);
+    };
+
+    return (
+      <ModuleChip
+        {...defaultArgs}
+        isActive={selectedMenu}
+        onClick={handleChipClick}
+      />
+    );
+  },
+};
+
+export default meta;

package/src/components/ModulesChip/ModuleChip.tsx

@@ -0,0 +1,31 @@
+import './ModuleChip.scss';
+import classNames from 'classnames';
+import { ModuleChipProps } from './types';
+import Typography from '../Typography';
+
+const ModuleChip: React.FC<ModuleChipProps> = ({
+  label = '',
+  isActive = true,
+  onClick = () => {},
+}) => {
+  return (
+    <div
+      className={classNames('ff-expandable-chip-menu', {
+        'ff-expandable-chip-menu--active': isActive,
+      })}
+      onClick={onClick}
+    >
+      <div
+        className={classNames(`ff-label-chip `, {
+          'ff-label-chip--active': isActive,
+        })}
+      >
+        <Typography fontSize={'14px'} fontWeight="regular" lineHeight="21px">
+          {label}
+        </Typography>
+      </div>
+    </div>
+  );
+};
+
+export default ModuleChip;

package/src/components/ModulesChip/index.ts

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

package/src/components/ModulesChip/types.ts

@@ -0,0 +1,14 @@
+export interface ModuleChipProps {
+  /**
+   * mandatory | label for the ModuleChip component
+   */
+  label: string;
+  /**
+   * mandatory | isActive for the ModuleChip component
+   */
+  isActive: boolean;
+  /**
+   * mandatory | onClick for the ModuleChip component
+   */
+  onClick: () => void;
+}

package/src/components/MultiSelect/Dropdown.tsx

@@ -5,6 +5,7 @@ import './Dropdown.scss';
 import { ThemeContext } from '../ThemeProvider/ThemeProvider';
 import classNames from 'classnames';
 import Button from '../Button';
+import Typography from '../Typography';
 
 const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
   (
@@ -82,7 +83,11 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
                 onClick={() => handleOptionChange(info, !info.isChecked)}
               >
                 <input type="checkbox" checked={info.isChecked} readOnly />
-                <span className="dropdown-option-label">{info.label}</span>
+                <Typography
+                  as="span"
+                  className="dropdown-option-label"
+                  children={info.label}
+                />
               </div>
             ))
           )}

package/src/components/MultiSelect/MultiSelect.scss

@@ -38,16 +38,16 @@
   cursor: pointer;
   position: relative;
   border: 1px solid var(--default-icon-color);
-  border-radius: 8px;
+  border-radius: 4px;
   background: var(--drawer-footer-bg);
   min-width: 150px;
   width: 100%;
   height: 32px;
   .ff-multiselect {
     position: relative;
-    padding: 6px;
+    padding: 3px;
     border: none;
-    border-radius: 8px;
+    border-radius: 4px;
     @include flex-center;
     &__main {
       display: flex;
@@ -61,6 +61,8 @@
 
       .active-default-label {
         @extend .font-size-8;
+        font-size: 8px !important;
+        height: 8px;
         @include label-styles;
         background-color: var(--multi-select-label-bg);
         line-height: 12px;
@@ -87,6 +89,9 @@
             @extend .fontXs;
             line-height: 14px;
             color: var(--tooltip-bg-color);
+            &.pr-2 {
+              padding: 5px 2px;
+            }
           }
           .ff-multiselect-chip-close-icon {
             cursor: pointer;
@@ -108,13 +113,15 @@
             }
           }
         }
-        .ff-multiselect-more-chip{
-          width: 1.2rem;
-          @extend .fontSm;
-          font-weight: 600;
-          line-height: 16px;
-          color: var(--brand-color);
-        }
+      }
+      .ff-multiselect-more-chip {
+        display: flex;
+        align-items: center;
+        width: 1.2rem;
+        @extend .fontSm;
+        font-weight: 600;
+        line-height: 16px;
+        color: var(--brand-color);
       }
     }
     &__toggle {

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
 }