pixel-react 1.3.8 → 1.4.0

package/src/assets/styles/_fonts.scss

@@ -8,7 +8,7 @@
   font-weight: 400;
   src:
     local('Poppins-Regular'),
-    url(../../assets/fonts/Poppins/Poppins-Regular.ttf) format('truetype');
+    url(../../assets/fonts/Poppins-Regular.ttf) format('truetype');
 }
 
 @font-face {
@@ -16,7 +16,7 @@
   font-weight: 500;
   src:
     local('Poppins-Medium'),
-    url(../../assets/fonts/Poppins/Poppins-Medium.ttf) format('truetype');
+    url(../../assets/fonts/Poppins-Medium.ttf) format('truetype');
 }
 
 @font-face {
@@ -24,7 +24,7 @@
   font-weight: 600;
   src:
     local('Poppins-SemiBold'),
-    url(../../assets/fonts/Poppins/Poppins-SemiBold.ttf) format('truetype');
+    url(../../assets/fonts/Poppins-SemiBold.ttf) format('truetype');
 }
 
 @font-face {
@@ -32,7 +32,7 @@
   font-weight: 700;
   src:
     local('Poppins-Bold'),
-    url(../../assets/fonts/Poppins/Poppins-Bold.ttf) format('truetype');
+    url(../../assets/fonts/Poppins-Bold.ttf) format('truetype');
 }
 
 .fontXs {

package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss

@@ -47,9 +47,8 @@
       }
     }
     .scroll {
-      max-height: 90px;
-      // overflow-y: scroll;
-      overflow: hidden;
+      max-height: 256px;
+      overflow-x: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       &::-webkit-scrollbar {

package/src/components/AllProjectsDropdown/AllProjectsDropdown.tsx

@@ -63,6 +63,7 @@ const AllProjectsDropdown = ({
             color="var(--primary-icon-color)"
             height={8}
             width={8}
+            hoverEffect={false}
           />
         </div>
       </div>

package/src/components/AppHeader/AppHeader.scss

@@ -20,7 +20,6 @@
     border-radius: 20px;
     padding: 5px;
     z-index: 1000;
-    // overflow-x: hidden;
     .ff-app-header-nav-bar-items {
       display: flex;
       align-items: center;

package/src/components/Icon/Icon.tsx

@@ -54,6 +54,7 @@ const Icon = forwardRef<HTMLSpanElement, IconProps>(
       className: classNames('ff-icon-container', {
         'ff-icon-click': hoverEffect,
         'ff-icon-disabled': disabled,
+        'ff-icon-dark': variant === "dark",
         [className]: !!className,
       }),
       ...props,

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';
@@ -338,7 +340,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;

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/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);
+  }
+};