pixel-react 1.4.1 → 1.4.3

package/src/components/Icon/iconList.ts

@@ -159,7 +159,9 @@ import DrawerMaximizeIcon from '../../assets/icons/drawer_maximize.svg?react';
 import SaveAsStepIcon from '../../assets/icons/save_as_step.svg?react';
 import SendToStepsIcon from '../../assets/icons/send_step.svg?react';
 import NoLicenseFound from '../../assets/icons/no_license_found.svg?react';
-import FireFlinkStandardTemplate from '../../assets/icons/fireflink_standard_template.svg?react';
+import StandardTemplate from '../../assets/icons/standard_template.svg?react';
+import SampleTemplateFirst from '../../assets/icons/sample_template_first.svg?react';
+import SampleTemplateSecond from '../../assets/icons/sample_template_second.svg?react';
 import DataProvider from '../../assets/icons/data_provider.svg?react';
 import LinkExpired from '../../assets/icons/link_expired.svg?react';
 import LinkReset from '../../assets/icons/reset-link.svg?react';
@@ -176,6 +178,8 @@ import dashboardSalesforceIcon from '../../assets/icons/salesforce_icon.svg?reac
 import dashboardMsDynamicIcon from '../../assets/icons/ms_dynamic_icon.svg?react';
 import MinimizeScript from '../../assets/icons/minimize_script.svg?react';
 import MaximizeTree from '../../assets/icons/maximize_tree.svg?react';
+import LabelIcon from '../../assets/icons/label_icon.svg?react';
+import AddLabelIcon from '../../assets/icons/add_label_icon.svg?react';
 
 Components['delete_info'] = DeleteInfoIcon;
 Components['success'] = ToastSuccessIcon;
@@ -338,7 +342,9 @@ Components['flaky_status_icon'] = FlakyStatusIcon;
 Components['drawer_maximize'] = DrawerMaximizeIcon;
 Components['save_as_step'] = SaveAsStepIcon;
 Components['send_to_steps'] = SendToStepsIcon;
-Components['fireflink_standard_template'] = FireFlinkStandardTemplate;
+Components['standard_template'] = StandardTemplate;
+Components['sample_template_first'] = SampleTemplateFirst;
+Components['sample_template_second'] = SampleTemplateSecond;
 Components['no_license_found'] = NoLicenseFound;
 Components['data_provider'] = DataProvider;
 Components['link_expired'] = LinkExpired;
@@ -349,5 +355,7 @@ Components['user_warning'] = UserWarning;
 Components['user_with_system'] = UserWithSystem;
 Components['minimize_script'] = MinimizeScript;
 Components['maximize_tree'] = MaximizeTree;
+Components['label_icon'] = LabelIcon;
+Components['add_label_icon'] = AddLabelIcon;
 
 export default Components;

package/src/components/MiniModal/MiniModal.stories.tsx

@@ -5,6 +5,7 @@ import Button from '../Button/Button';
 import './MiniModal.scss';
 import Typography from '../Typography';
 import Icon from '../Icon';
+import React from 'react';
 
 const meta: Meta<typeof MiniModal> = {
   title: 'Components/MiniModal',
@@ -41,14 +42,15 @@ const BasicModalComponent = () => {
     <div className="ff-mini-modal-buttons-flex ff-mini-modal-gap-10">
       <Button
         onClick={() => openModal(1)}
+        id='112233'
         ref={btnRef1}
-        label="1"
+        label="122"
         variant={currentModal === 1 ? 'primary' : 'secondary'}
       />
 
       {currentModal === 1 && (
         <MiniModal
-          anchorRef={btnRef1}
+          anchorRef="112233"
           modalProperties={{ width: 300, height: 180 }}
           headerProps={
             <>
@@ -254,14 +256,14 @@ export const CustomModalWithArrow = () => {
     <div className="ff-mini-modal-buttons-flex ff-mini-modal-gap-10">
       <Button
         onClick={() => openModal(1)}
-        ref={btnRef1}
-        label="1"
+        label="12"
+        id="1a2b"
         variant={currentModal === 1 ? 'primary' : 'secondary'}
       />
 
       {currentModal === 1 && (
         <MiniModal
-          anchorRef={btnRef1}
+          anchorRef='1a2b'
           modalProperties={{ width: 300, height: 250 }}
           headerProps={
             <>

package/src/components/MiniModal/MiniModal.tsx

@@ -40,6 +40,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
     });
     const [isVisible, setIsVisible] = useState(false);
     const modalRef = useRef<HTMLDivElement>(null);
+
     // Function to calculate available space
     const getAvailableSpace = (rect: Rect): AvailableSpace => {
       const { top, left, bottom, right } = rect;
@@ -53,7 +54,18 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
         spaceBottom: viewportHeight - bottom,
       };
     };
-    const anchorRect = anchorRef.current?.getBoundingClientRect();
+
+    // Helper function to get the anchor element
+    const getAnchorElement = () => {
+      if (typeof anchorRef === 'string') {
+        return document.getElementById(anchorRef);
+      }
+      return anchorRef?.current || null;
+    };
+
+    const anchorElement = getAnchorElement();
+    const anchorRect = anchorElement?.getBoundingClientRect();
+
     if (!isWrapped && anchorRect) {
       const availableSpace = getAvailableSpace(anchorRect);
       switch (modalPosition) {
@@ -82,7 +94,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
       }
     }
 
-    //specify for the wrapper div left position
+    // Specify for the wrapper div left position
     const calculateAnchorRefLeft = (anchorRefLeftNum?: number) => {
       if (anchorRefLeftNum) {
         return anchorRefLeftNum;
@@ -90,7 +102,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
       return 0;
     };
 
-    //specify for the arrow position in left or top
+    // Specify for the arrow position in left or top
     const getArrowClassName = () => {
       if (leftTopArrow && modalPosition === 'right') {
         return 'left-top-arrow';
@@ -99,13 +111,13 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
     };
     const calculatedAnchorRefLeft = calculateAnchorRefLeft(anchorRefLeftNum);
 
-    //specifying for specific wrapper modal position
+    // Specify specific wrapper modal position
     const firstAnchor =
       firstAnchorRef?.current &&
       firstAnchorRef?.current?.getBoundingClientRect().left -
         anchorLeftDistanceForWrapper;
 
-    //specifying the modal top
+    // Specifying the modal top
     const calculateModalTop = () => {
       const safeHeight = modalProperties?.height ?? 0;
       if (modalPosition === 'bottom') {
@@ -115,24 +127,18 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
       } else if (modalPosition === 'right') {
         return leftTopArrow
           ? modalPositionState.top - (extraRightSpace?.leftTopArrow ?? 30)
-          : modalPositionState?.top -
-              safeHeight / (extraRightSpace?.middleLeftArrow ?? 3.5);
+          : modalPositionState?.top - safeHeight / (extraRightSpace?.middleLeftArrow ?? 3.5);
       } else if (modalPosition === 'top') {
-        return (
-          modalPositionState.top -
-          (safeHeight + (extraTopSpace?.normalModal ?? 10))
-        );
+        return modalPositionState.top - (safeHeight + (extraTopSpace?.normalModal ?? 10));
       }
       return modalPositionState.top - safeHeight / 1.5;
     };
     const calculatedModalTop = calculateModalTop();
 
-    //specifying the modal left
+    // Specifying the modal left
     const calculateModalLeft = () => {
       if (modalPosition === 'right') {
-        return (
-          modalPositionState.left + (extraLeftSpace?.rightAlignModal ?? 40)
-        );
+        return modalPositionState.left + (extraLeftSpace?.rightAlignModal ?? 40);
       } else if (firstAnchorRef) {
         return firstAnchor;
       } else if (modalPosition === 'left') {
@@ -143,16 +149,16 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
     };
     const calculatedModalLeft = calculateModalLeft();
 
-    //specifying the modal's escape and enter functionality
+    // Handle escape and enter functionality
     const handleEsc = useEscapeKey('Escape');
     const handleEnter = useEscapeKey('Enter');
     handleEsc(cancelButtonProps?.onClick);
     handleEnter(proceedButtonProps?.onClick);
     useClickOutside(modalRef, cancelButtonProps.onClick);
 
-    //calculate the modal position
+    // Calculate the modal position
     const calculatePosition = useCallback(() => {
-      const anchorRect = anchorRef.current?.getBoundingClientRect();
+      const anchorRect = anchorElement?.getBoundingClientRect();
       if (anchorRect) {
         const { bottom, left } = anchorRect;
         const { scrollX, scrollY } = window;
@@ -164,7 +170,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
           left: leftPosition,
         });
       }
-    }, [anchorRef, modalProperties]);
+    }, [anchorElement]);
 
     useEffect(() => {
       const timeoutId = setTimeout(() => {
@@ -213,10 +219,10 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
               modalPosition === 'right'
                 ? 'left'
                 : modalPosition === 'top'
-                  ? 'bottom'
-                  : modalPosition === 'left'
-                    ? 'right'
-                    : 'top'
+                ? 'bottom'
+                : modalPosition === 'left'
+                ? 'right'
+                : 'top'
             } ${getArrowClassName()}`}
           />
         )}

package/src/components/MiniModal/types.ts

@@ -9,7 +9,7 @@ export interface MiniEditModalProps {
   /**
    * A reference to the button element that triggers the modal.
    */
-  anchorRef: RefObject<HTMLButtonElement>;
+  anchorRef: RefObject<HTMLButtonElement> | string;
   /**
    * Optional properties for configuring the modal header.
    */

package/src/components/Modal/Modal.tsx

@@ -58,9 +58,9 @@ const Modal: React.FC<ModalProps> = ({
       <div
         style={{
           boxShadow: boxShadow,
-          borderRadius: isHeaderDisplayed || isFooterDisplayed ? '12px' : '0px', // Apply based on conditions
+          borderRadius:  '12px' ,
         }}
-        className="ff-modal-container" // New container class for consistency
+        className="ff-modal-container"
       >
         <div
           className={classNames(

package/src/components/Select/Select.tsx

@@ -29,6 +29,7 @@ const Select: FC<SelectProps> = ({
   height = 32,
   width = '100%',
   onBlur = () => {},
+  disableInput = false
 }) => {
   const selectWidth = typeof width === 'number' ? `${width}px` : width;
 
@@ -176,6 +177,7 @@ const Select: FC<SelectProps> = ({
           style={{ zIndex: optionZIndex, color: selectedOptionColor }}
           disabled={disabled}
           onChange={handleChange}
+          readOnly={disableInput}
         />
         {optionsRequired && (
           <div

package/src/components/Select/types.ts

@@ -93,6 +93,11 @@ export interface SelectProps {
    *  Provide the onBlur functionality for the select
    */
   onBlur?: () => void;
+
+  /*
+  * Disable the select component input  
+  */
+  disableInput?: boolean;
 }
 
 export interface DrowdownPosition {

package/src/components/StateDropdown/StateDropdown.tsx

@@ -129,7 +129,9 @@ const StateDropdown = ({
         optionsList={options}
         selectedOption={selectedOption}
         showLabel={false}
-        showBorder={true}
+        showBorder={false}
+        disableInput={true}
+        height={24}
       />
     ) : (
       <Select
@@ -139,7 +141,9 @@ const StateDropdown = ({
         optionsList={options}
         selectedOption={selectedOption}
         showLabel={false}
-        showBorder={true}
+        showBorder={false}
+        disableInput={true}
+        height={24}
       />
     );
   } else if (
@@ -154,7 +158,9 @@ const StateDropdown = ({
         optionsList={options}
         selectedOption={selectedOption}
         showLabel={false}
-        showBorder={true}
+        showBorder={false}
+        disableInput={true}
+        height={24}
       />
     );
   } else if (currentState === 'APPROVED') {
@@ -166,7 +172,9 @@ const StateDropdown = ({
         optionsList={options}
         selectedOption={selectedOption}
         showLabel={false}
-        showBorder={true}
+        showBorder={false}
+        disableInput={true}
+        height={24}
       />
     );
   } else if (currentState === 'REJECTED' && userHasOnlyViewAccess) {
@@ -178,7 +186,9 @@ const StateDropdown = ({
         optionsList={options}
         selectedOption={selectedOption}
         showLabel={false}
-        showBorder={true}
+        showBorder={false}
+        disableInput={true}
+        height={24}
       />
     );
   } else if (currentState === 'NEW' && userHasOnlyViewAccess) {
@@ -190,7 +200,9 @@ const StateDropdown = ({
         optionsList={options}
         selectedOption={selectedOption}
         showLabel={false}
-        showBorder={true}
+        showBorder={false}
+        disableInput={true}
+        height={24}
       />
     );
   } else {

package/src/components/Typography/Typography.scss

@@ -1,10 +1,40 @@
-@import url('https://fonts.cdnfonts.com/css/poppins');
-
 @mixin fontPoppins($size: 16px) {
   font-family: 'Poppins';
   font-size: $size;
 }
 
+@font-face {
+  font-family: 'Poppins';
+  font-weight: 400;
+  src:
+    local('Poppins-Regular'),
+    url(../../fonts/Poppins/Poppins-Regular.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-weight: 500;
+  src:
+    local('Poppins-Medium'),
+    url(../../fonts/Poppins/Poppins-Medium.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-weight: 600;
+  src:
+    local('Poppins-SemiBold'),
+    url(../../fonts/Poppins/Poppins-SemiBold.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-weight: 700;
+  src:
+    local('Poppins-Bold'),
+    url(../../fonts/Poppins/Poppins-Bold.ttf) format('truetype');
+}
+
 .ff-text {
   @include fontPoppins();
 

package/src/index.ts

@@ -80,6 +80,7 @@ import MultiRadialChart from './components/Charts/MultiRadialChart';
 import Editor from './components/Editor/Editor';
 import { getSequentialPayload } from './utils/getSequentialPayload/getSequentialPayload';
 import ConnectingBranch from './components/ConnectingBranch/ConnectingBranch';
+import { saveFileFromBlob } from './utils/downloadFile/saveFileFromBlob'
 
 export {
   Button,
@@ -163,4 +164,5 @@ export {
   getEncryptedData,
   truncateText,
   getSequentialPayload,
+  saveFileFromBlob,
 };

package/src/utils/downloadFile/saveFileFromBlob.stories.tsx

@@ -0,0 +1,62 @@
+import { saveFileFromBlob } from './saveFileFromBlob';
+import { Toastify, toast } from '../../components/Toastify/Toastify';
+
+export default {
+  title: 'Utils/saveFileFromBlob',
+  component: saveFileFromBlob,
+};
+
+export const Default = () => {
+  const testCases = [
+    {
+      blob: new Blob(['Hello, world!'], { type: 'text/plain' }),
+      filename: 'hello.txt',
+    },
+    {
+      blob: new Blob(['{ "key": "value" }'], { type: 'application/json' }),
+      filename: 'data.json',
+    },
+    {
+      blob: null,
+      filename: 'invalid.txt',
+      expectedError: 'Invalid Blob object',
+    },
+  ];
+
+  const handleDownload = (blob: Blob | null, filename: string) => {
+    try {
+      if (blob instanceof Blob) {
+        saveFileFromBlob(blob, filename);
+        toast.success(`File "${filename}" downloaded successfully!`);
+      } else {
+        throw new Error('Invalid Blob object');
+      }
+    } catch (error: any) {
+      toast.error(error.message);
+    }
+  };
+
+  return (
+    <>
+      <div>
+        <h1>saveFileFromBlob - Test Cases</h1>
+        {testCases.map(({ blob, filename, expectedError }, index) => (
+          <div key={index} style={{ marginBottom: '1rem' }}>
+            <button
+              onClick={() => handleDownload(blob as Blob, filename)}
+              style={{ marginRight: '1rem' }}
+            >
+              Download {filename}
+            </button>
+            {expectedError && (
+              <span style={{ color: 'red' }}>
+                Expected Error: {expectedError}
+              </span>
+            )}
+          </div>
+        ))}
+      </div>
+      <Toastify />
+    </>
+  );
+};

package/src/utils/downloadFile/saveFileFromBlob.ts

@@ -0,0 +1,40 @@
+// saveFileFromBlob.ts
+
+/**
+ * Save a file from a Blob object.
+ * This utility handles downloading files in browsers, including IE support.
+ *
+ * @param blob - The Blob object representing the file.
+ * @param filename - The name of the file to save.
+ */
+interface NavigatorWithMsSaveBlob extends Navigator {
+  msSaveOrOpenBlob?: (_blob: Blob, _filename: string) => void;
+}
+
+export const saveFileFromBlob = (blob: Blob, filename: string): void => {
+  if (!blob || !(blob instanceof Blob)) {
+    console.error('Invalid Blob object');
+    throw new Error('Invalid Blob object');
+  }
+
+  const navigatorWithMsSaveBlob = window.navigator as NavigatorWithMsSaveBlob;
+
+  if (navigatorWithMsSaveBlob.msSaveOrOpenBlob) {
+    const saveBlob = navigatorWithMsSaveBlob.msSaveOrOpenBlob;
+    if (saveBlob) {
+      saveBlob(blob, filename);
+    }
+  } else {
+    // For modern browsers
+    const anchorElement = document.createElement('a');
+    document.body.appendChild(anchorElement);
+    const objectURL = window.URL.createObjectURL(blob);
+    anchorElement.href = objectURL;
+    anchorElement.download = filename;
+    anchorElement.click();
+    setTimeout(() => {
+      window.URL.revokeObjectURL(objectURL);
+      document.body.removeChild(anchorElement);
+    }, 0);
+  }
+};