pixel-react-excel-sheet 1.0.30 → 1.0.32

package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx

@@ -72,12 +72,6 @@ const Branches = ({
       machineInfo: { osVersion, iconName },
       deviceInfo,
     } = machineInstance as ExecutionContext;
-    // Helper to handle device info safely
-    const getDeviceOption = (platform: string, defaultType: string = '', index = 0) =>
-      deviceInfo?.[index]?.platform?.toLowerCase().includes(platform ?? '')
-        ? defaultType
-        : undefined;
-
     const getEnvironment = (environment: string = '') => {
       if (environment.toLowerCase().includes('browserstack'))
         return 'Browserstack';
@@ -110,11 +104,11 @@ const Branches = ({
     const mobileOptions = [
       {
         label: deviceInfo?.[0]?.name,
-        type: getDeviceOption('android', 'android_icon', 0),
+        type: 'android',
       },
       {
         label: deviceInfo?.[1]?.name,
-        type: getDeviceOption('ios', 'mac_icon', 1),
+        type: 'mac',
       },
     ];
 

package/src/components/StatusCard/StatusCard.scss

@@ -1,6 +1,5 @@
 .ff-card-container {
-  width: 120px;
-  height: 93px;
+  height: 78px;
   display: flex;
   align-items: center;
   border: 1px solid var(--border-color);
@@ -31,14 +30,14 @@
   }
 
   .ff-status-bar {
-    width: 24px;
+    width: 12%;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: start;
     align-items: center;
     border-right: 1px solid var(--border-color);
-    gap: 30px;
+    gap: 17px;
 
     .ff-status-text {
       transform: rotate(-90deg);
@@ -49,18 +48,23 @@
 
   &.passed .ff-status-bar {
     background-color: var(--ff-card-passed-status-bg-color);
+    color: var(--base-bg-color);
   }
   &.failed .ff-status-bar {
     background-color: var(--ff-card-failed-status-bg-color);
+    color: var(--base-bg-color);
   }
   &.warning .ff-status-bar {
     background-color: var(--ff-card-warning-status-bg-color);
+    color: var(--base-bg-color);
   }
   &.skipped .ff-status-bar {
     background-color: var(--ff-card-skipped-status-bg-color);
+    color: var(--base-bg-color);
   }
   &.flaky .ff-status-bar {
     background-color: var(--ff-card-flaky-status-bg-color);
+    color: var(--base-bg-color);
   }
 
   .ff-content {
@@ -91,4 +95,43 @@
   &.flaky .ff-number {
     color: var(--ff-card-flaky-status-bg-color);
   }
+
+  &.toggled {
+    &.passed .ff-status-bar {
+      background-color: var(--base-bg-color);
+      color: var(--ff-card-passed-status-bg-color);
+    }
+    &.failed .ff-status-bar {
+      background-color: var(--base-bg-color);
+      color: var(--ff-card-failed-status-bg-color);
+    }
+    &.warning .ff-status-bar {
+      background-color: var(--base-bg-color);
+      color: var(--ff-card-warning-status-bg-color);
+    }
+    &.skipped .ff-status-bar {
+      background-color: var(--base-bg-color);
+      color: var(--ff-card-skipped-status-bg-color);
+    }
+    &.flaky .ff-status-bar {
+      background-color: var(--base-bg-color);
+      color: var(--ff-card-flaky-status-bg-color);
+    }
+
+    &.passed .ff-content {
+      background-color: var(--ff-card-passed-status-bg-color);
+    }
+    &.failed .ff-content {
+      background-color: var(--ff-card-failed-status-bg-color);
+    }
+    &.warning .ff-content {
+      background-color: var(--ff-card-warning-status-bg-color);
+    }
+    &.skipped .ff-content {
+      background-color: var(--ff-card-skipped-status-bg-color);
+    }
+    &.flaky .ff-content {
+      background-color: var(--ff-card-flaky-status-bg-color);
+    }
+  }
 }

package/src/components/StatusCard/StatusCard.stories.tsx

@@ -18,6 +18,7 @@ export const Passed: Story = {
     status: 'Passed',
     count: 66,
     text: 'Scripts were passed all the time.',
+    style:{width:'200px'},
   },
 };
 

package/src/components/StatusCard/StatusCard.tsx

@@ -1,12 +1,31 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './StatusCard.scss';
 import { CardProps } from './types';
 import Typography from '../Typography';
 import Icon from '../Icon';
 
-const StatusCard: React.FC<CardProps> = ({ icon, status, count, text }) => {
+const StatusCard: React.FC<CardProps> = ({
+  icon,
+  status,
+  count,
+  text,
+  style = { width: '196.4px' },
+  onSelectedStatus = (_status) => {},
+}) => {
+  const [isToggled, setIsToggled] = useState<boolean>(false);
+
+  const handleSelectStatus = (status: string) => {
+    setIsToggled(true);
+    onSelectedStatus(status);
+  };
   return (
-    <div className={`ff-card-container ${status.toLowerCase()}`}>
+    <div
+      className={`ff-card-container ${status.toLowerCase()} ${
+        isToggled ? 'toggled' : ''
+      }`}
+      style={style}
+      onClick={() => handleSelectStatus(status)}
+    >
       <div className="ff-status-bar">
         <div>
           <Icon name={icon} height={20} width={20} hoverEffect={false} />
@@ -14,7 +33,6 @@ const StatusCard: React.FC<CardProps> = ({ icon, status, count, text }) => {
         <Typography
           fontWeight="semi-bold"
           fontSize="10px"
-          color="var(--ff-status-card-text-color)"
           textAlign="center"
           lineHeight="15px"
           className="ff-status-text"
@@ -29,6 +47,7 @@ const StatusCard: React.FC<CardProps> = ({ icon, status, count, text }) => {
           fontSize="24px"
           className="ff-number"
           lineHeight="36px"
+          color={isToggled ? 'var(--base-bg-color)' : ''}
         >
           {count}
         </Typography>
@@ -37,7 +56,11 @@ const StatusCard: React.FC<CardProps> = ({ icon, status, count, text }) => {
           fontSize="10px"
           className="ff-text"
           lineHeight="15px"
-          color="var(--ff-card-status-text-color)"
+          color={
+            isToggled
+              ? 'var(--base-bg-color)'
+              : 'var(--ff-card-status-text-color)'
+          }
         >
           {text}
         </Typography>

package/src/components/StatusCard/types.ts

@@ -1,11 +1,16 @@
 export interface CardProps {
-    /** The icon to display in the card */
-    icon: string;
-    /** The status of the card (Passed, Failed, Warning, Skipped, Flaky) */
-    status: 'Passed' | 'Failed' | 'Warning' | 'Skipped' | 'Flaky';
-    /** The number displayed in the card */
-    count: number | string;
-    /** The description text displayed at the bottom of the card */
-    text: string;
-  }
-  
+  /** The icon to display in the card */
+  icon: string;
+  /** The status of the card (Passed, Failed, Warning, Skipped, Flaky) */
+  status: 'Passed' | 'Failed' | 'Warning' | 'Skipped' | 'Flaky' | 'PASSED' | 'FAIL' | 'WARNING' | 'SKIPPED' | 'FLAKY';
+  /** The number displayed in the card */
+  count: number | string;
+  /** The description text displayed at the bottom of the card */
+  text: string;
+  /** Inline Styling */
+  style?: React.CSSProperties;
+  /** toggle update */
+  handleToggleStatus?: (_status: boolean) => void;
+  /** call back */
+  onSelectedStatus?: (_status: string) => void;
+}

package/src/components/TextArea/Textarea.tsx

@@ -17,6 +17,7 @@ const Textarea = ({
   onChange,
   onBlur,
   onFocus,
+  onPaste,
   rows = 4,
   cols = 40,
   resize = false,
@@ -65,6 +66,7 @@ const Textarea = ({
         onChange={onChange}
         onBlur={onBlur}
         onFocus={onFocus}
+        onPaste={onPaste}
         required={required}
         rows={rows}
         cols={cols}

package/src/components/TextArea/Types.ts

@@ -49,6 +49,9 @@ export interface TextareaProps {
   onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
 
   onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+
+  onPaste?: (event: React.ClipboardEvent<HTMLTextAreaElement>) => void;
+  
   /**
    * id to select the textarea field uniquely
    */

package/src/components/ThemeProvider/types.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 
-export type Theme = 'ff-light-theme' | 'ff-dark-theme' | 'ff-grey-theme';
+export type Theme = 'ff-light-theme' | 'ff-dark-theme' | 'ff-grey-theme' | 'ff-blue-theme';
 
 export interface ThemeContextType {
   currentTheme: Theme;

package/src/components/Toastify/Toastify.tsx

@@ -73,6 +73,7 @@ export const Toastify = () => {
       variant={toastProps.variant}
       toastTitle={toastProps.toastTitle}
       toastMessage={toastProps.toastMessage}
+      zIndex={1000000000}
     />
   );
 };

package/src/utils/validateFile/validateFile.stories.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import {
+  validateFileExtension,
+  validateZipFileExtension,
+} from './validateFile';
+
+export default {
+  title: 'Utils/validateFile',
+};
+
+const allowedFileTypes = {
+  '.txt': 'text/plain',
+  '.zip': 'application/zip',
+  '.jpg': 'image/jpeg',
+};
+
+export const ValidateFileExtension = () => {
+  const [result, setResult] = useState<string | boolean>('');
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const isValid = validateFileExtension(event, allowedFileTypes);
+    setResult(isValid ? 'Valid file type' : 'Invalid file type');
+  };
+
+  return (
+    <div>
+      <h3>Validate File Extension</h3>
+      <input type="file" onChange={handleFileChange} />
+      <p>Result: {result.toString()}</p>
+    </div>
+  );
+};
+
+export const ValidateZipFileExtension = () => {
+  const [result, setResult] = useState<string | boolean>('');
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const isValid = validateZipFileExtension(event);
+    setResult(isValid ? 'Valid ZIP file' : 'Invalid ZIP file');
+  };
+
+  return (
+    <div>
+      <h3>Validate ZIP File Extension</h3>
+      <input type="file" onChange={handleFileChange} />
+      <p>Result: {result.toString()}</p>
+    </div>
+  );
+};

package/src/utils/validateFile/validateFile.ts

@@ -0,0 +1,39 @@
+export const validateFileExtension = (
+  file: File | React.ChangeEvent<HTMLInputElement>,
+  allowedFileTypes: Record<string, string>
+) => {
+  const selectedFile =
+    (file as React.ChangeEvent<HTMLInputElement>).target?.files?.[0] ||
+    (file as File);
+  const fileExtension =
+    '.' + selectedFile?.name?.split('.')?.pop()?.toLowerCase();
+  const fileType = selectedFile?.type;
+  if (
+    ['.ipa', '.y4m', '.yml', '.md', '.pem', '.properties'].includes(
+      fileExtension
+    ) &&
+    Object.keys(allowedFileTypes)?.includes(fileExtension)
+  ) {
+    return true;
+  }
+  return (
+    allowedFileTypes[fileExtension] &&
+    fileType === allowedFileTypes[fileExtension]
+  );
+};
+
+export const validateZipFileExtension = (
+  file: File | React.ChangeEvent<HTMLInputElement>
+) => {
+  const selectedFile =
+    (file as React.ChangeEvent<HTMLInputElement>).target?.files?.[0] ||
+    (file as File);
+  // List of valid MIME types
+  const validMimeTypes = ['application/zip', 'application/x-zip-compressed'];
+  // Validating the file extension and MIME type
+  return (
+    selectedFile &&
+    validMimeTypes?.includes(selectedFile?.type) &&
+    selectedFile?.name?.toLowerCase()?.endsWith('.zip')
+  );
+};

package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.scss

@@ -1,51 +0,0 @@
-.ff-connecting-datalist-modal-header-wrapper,
-.ff-connecting-modal-child-wrapper {
-  width: 534px;
-  padding: 0 4px;
-}
-
-.ff-connecting-datalist-modal-header-wrapper {
-  border-bottom: 1px solid var(--ff-connecting-branch-modal-border);
-  margin-bottom: 4px;
-}
-
-.ff-connecting-modal-child-wrapper {
-  .ff-branch-select-input-wrapper {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-    .ff-select-browser {
-      width: 263px;
-    }
-
-    .ff-branch-input-wrapper {
-      display: flex;
-      align-items: flex-end;
-      height: 38px;
-
-      .ff-input-browser {
-        width: 245px;
-      }
-    }
-  }
-}
-
-.ff-connecting-modal-footer-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 8px;
-  margin-top: 8px;
-  border-top: 1px solid var(--ff-connecting-branch-modal-border);
-
-  .ff-branch-toggle-wrapper,
-  .ff-datalist-button-wrapper {
-    display: flex;
-    gap: 8px;
-  }
-
-  .ff-branch-toggle-wrapper {
-    gap: 4px;
-  }
-}

package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.tsx

@@ -1,107 +0,0 @@
-import { forwardRef, RefObject } from 'react';
-import MiniModal from '../../../MiniModal';
-import Typography from '../../../Typography';
-import './AddBrowserModal.scss';
-import Select from '../../../Select';
-import Button from '../../../Button';
-import Toggle from '../../../Toggle';
-import Input from '../../../Input/Input';
-import { AddBrowserModalProps } from './types';
-
-const AddBrowserModal = forwardRef<HTMLButtonElement, AddBrowserModalProps>(
-  (props, ref) => {
-    // TODO: WILL BE REMOVE IN THE FUTURE
-    const selectOptions = [
-      { label: 'Execution Environment', inputName: 'number of runs' },
-      { label: 'Browser', inputName: 'Browser Version' },
-      { label: 'Android Device', inputName: 'os version' },
-      { label: 'IOS Device', inputName: 'os version-1' },
-    ];
-
-    const renderSelectOptions = () => (
-      <div>
-        {selectOptions.map(({ label, inputName }, index) => (
-          <div className="ff-branch-select-input-wrapper" key={index}>
-            <Select
-              optionsList={[]}
-              onChange={() => {}}
-              label={label}
-              className="ff-select-browser"
-            />
-            <div className="ff-branch-input-wrapper">
-              <Input
-                value="0"
-                label="Number of Runs"
-                type="number"
-                onChange={() => {}}
-                name={inputName}
-                className="ff-input-browser"
-              />
-            </div>
-          </div>
-        ))}
-      </div>
-    );
-
-    const renderFooterContent = () => (
-      <div className="ff-connecting-modal-footer-wrapper">
-        <div className="ff-branch-toggle-wrapper">
-          <Typography as="span" lineHeight="32px">
-            Run in Headless Mode
-          </Typography>
-          <Toggle />
-        </div>
-        <div className="ff-datalist-button-wrapper">
-          <Button label="Cancel" variant="tertiary" />
-          <Button label="Update" variant="primary" />
-        </div>
-      </div>
-    );
-
-    return (
-      <div>
-        <MiniModal
-          anchorRef={ref as RefObject<HTMLButtonElement>}
-          headerProps={
-            <div className="ff-connecting-datalist-modal-header-wrapper">
-              <Typography
-                as="span"
-                color="var(--ff-connecting-branch-modal-header)"
-                fontWeight="semi-bold"
-                fontSize={12}
-                lineHeight="38px"
-              >
-                Add Browser / Device
-              </Typography>
-            </div>
-          }
-          childContent={
-            <div className="ff-connecting-modal-child-wrapper">
-              {renderSelectOptions()}
-            </div>
-          }
-          footerContent={renderFooterContent()}
-          cancelButtonProps={{
-            text: 'Cancel',
-
-            // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
-            onClick: props.onUpdateAddBrowser,
-          }}
-          proceedButtonProps={{
-            text: 'Proceed',
-            // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
-            onClick: props.onUpdateAddBrowser,
-          }}
-          modalPosition="right"
-          isPopOver
-          leftTopArrow
-          extraRightSpace={{ leftTopArrow: 45 }}
-          extraLeftSpace={{ rightAlignModal: 115 }}
-          {...props}
-        />
-      </div>
-    );
-  }
-);
-
-export default AddBrowserModal;

package/src/components/SequentialConnectingBranch/components/AddBrowserModal/types.ts

@@ -1,5 +0,0 @@
-export interface AddBrowserModalProps {
-
-  // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
-  onUpdateAddBrowser: () => void;
-}

package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.scss

@@ -1,31 +0,0 @@
-.ff-datalist-modal-header-wrapper,
-.ff-datalist-modal-child-wrapper,
-.ff-datalist-modal-footer-wrapper {
-  margin: 0 8px;
-}
-
-.ff-datalist-modal-header-wrapper {
-  width: 255px;
-  border-bottom: 1px solid var(--ff-connecting-branch-modal-border);
-  display: flex;
-  align-items: center;
-}
-
-.ff-datalist-modal-child-wrapper {
-  .variable {
-    margin: 8px 0;
-  }
-}
-
-.ff-datalist-modal-footer-wrapper {
-  display: flex;
-  justify-content: space-between;
-  border-top: 1px solid var(--ff-connecting-branch-modal-border);
-
-  .datalist-button-wrapper {
-    display: flex;
-    gap: 10px;
-    margin-top: 4px;
-    justify-content: flex-end;
-  }
-}

package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.tsx

@@ -1,85 +0,0 @@
-import { forwardRef, RefObject } from 'react';
-import MiniModal from '../../../MiniModal';
-import Typography from '../../../Typography';
-import './DatasetListModal.scss';
-import Select from '../../../Select';
-import Checkbox from '../../../Checkbox';
-import Button from '../../../Button';
-import { DatasetListModalProps } from './types';
-
-const DatasetListModal = forwardRef<HTMLButtonElement, DatasetListModalProps>(
-  (props, ref) => {
-    const selectOptions = [
-      { label: 'Project Environment Variable' },
-      { label: 'Global Variables' },
-      { label: 'Test Data Set' },
-    ];
-
-    const renderSelectOptions = () =>
-      selectOptions.map(({ label }, idx) => (
-        <Select
-          key={idx}
-          optionsList={[]}
-          onChange={() => {}}
-          label={label}
-          className="variable"
-        />
-      ));
-
-    const renderFooterContent = () => (
-      <div className="ff-datalist-modal-footer-wrapper">
-        <Checkbox checked={false} label="Set as Default" />
-        <div className="datalist-button-wrapper">
-          <Button label="Cancel" variant="tertiary" />
-          <Button label="Update" variant="primary" />
-        </div>
-      </div>
-    );
-
-    return (
-      <div>
-        <MiniModal
-          anchorRef={ref as RefObject<HTMLButtonElement>}
-          headerProps={
-            <div className="ff-datalist-modal-header-wrapper">
-              <Typography
-                as="span"
-                color="var(--ff-connecting-branch-modal-header)"
-                fontWeight="semi-bold"
-                fontSize={12}
-                lineHeight="38px"
-              >
-                Data Sets
-              </Typography>
-            </div>
-          }
-          childContent={
-            <div className="ff-datalist-modal-child-wrapper">
-              {renderSelectOptions()}
-            </div>
-          }
-          footerContent={renderFooterContent()}
-          cancelButtonProps={{
-            text: 'Cancel',
-
-            // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
-            onClick: props?.onUpdateDatasetList,
-          }}
-          proceedButtonProps={{
-            text: 'Proceed',
-            // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
-            onClick: props?.onUpdateDatasetList,
-          }}
-          modalPosition="right"
-          isPopOver
-          leftTopArrow
-          extraRightSpace={{ leftTopArrow: 40 }}
-          extraLeftSpace={{ rightAlignModal: 110 }}
-          {...props}
-        />
-      </div>
-    );
-  }
-);
-
-export default DatasetListModal;

package/src/components/SequentialConnectingBranch/components/DatasetListModal/types.ts

@@ -1,4 +0,0 @@
-export interface DatasetListModalProps {
-  // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
-  onUpdateDatasetList: () => void;
-}