pixel-react 1.2.6 → 1.2.8

package/src/components/Table/Table.tsx

@@ -89,7 +89,7 @@ const Table = ({
                 key={column.header}
                 style={{ width: column?.width }}
               >
-                <div>
+                <div className='ff-label-checkbox-container'>
                   {index === 0 && withCheckbox && (
                     <span className="ff-table-checkbox">
                       <Checkbox
@@ -129,7 +129,7 @@ const Table = ({
                         'clickable-cell': column.onClick,
                       })}
                     >
-                      <Typography as="div" color={tableDataTextColor}>
+                      <Typography as="div" color={tableDataTextColor} className='ff-data-checkbox-container'>
                         {i === 0 && withCheckbox && (
                           <span className="ff-table-checkbox">
                             <Checkbox

package/src/components/TableTree/TableTree.scss

@@ -107,7 +107,7 @@
 
   .ff-node-li {
     position: relative;
-    --indent-size: 16px;
+    --indent-size: 18px;
     --total-children-height: var(--node-height);
 
     td:first-child {

package/src/components/TableTree/TableTree.tsx

@@ -10,6 +10,8 @@ import './TableTree.scss';
 import RadioButton from '../RadioButton';
 import Typography from '../Typography';
 
+import Arrow from '../../assets/icons/arrows_down_icon.svg?react';
+
 interface ColumnDataProps {
   name: string;
   accessor: string;
@@ -146,7 +148,7 @@ const TableTree = ({
                       isExpanded ? 'ff-expanded' : 'ff-collapsed'
                     }`}
                   >
-                    <Icon name="arrows_down_icon" height={12} width={12} />
+                    <Arrow />
                   </span>
                 )}
               </span>

package/src/components/Toastify/Toastify.stories.tsx

@@ -25,27 +25,46 @@ export const Controlled: Story = {
   args: {
     ...defaultArgs,
   },
-  // import { Toastify, toast } from 'pixel-react';
   render: () => (
-    <>
+    
+    /*
+      Note:-
+      import { Toastify, toast } from 'pixel-react';
+    */
+
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
       {/* Render Toastify to allow toast notifications */}
       <Toastify />
 
       {/* Button to trigger a toast notification */}
       <Button
         variant="primary"
+        label="Show Success Toast"
         onClick={() => toast.success('Your request was successful!')}
-      >
-        Show Success Toast
-      </Button>
-      <br/>
+      />
       <Button
         variant="delete"
+        label="Show Error Toast"
         onClick={() => toast.error('Something went wrong!')}
-      >
-        Show Error Toast
-      </Button>
-    </>
+      />
+      <Button
+        variant="warning"
+        label="Show Object Toast"
+        onClick={() =>
+          toast.warning('Something went wrong!', { a: 'hi', b: '5', c: 10 })
+        }
+      />
+      <Button
+        variant="warning"
+        label="Show Array Toast"
+        onClick={() => toast.warning('Something went wrong!', ['1', 4, 'hi'])}
+      />
+      <Button
+        variant="warning"
+        label="Show function Toast"
+        onClick={() => toast.warning('Something went wrong!', () => {})}
+      />
+    </div>
   ),
 };
 

package/src/components/Toastify/Toastify.tsx

@@ -1,8 +1,12 @@
 import { useState, useRef } from 'react';
 import Toaster from '../Toast/Toast';
-import { Variant, ToastProps } from './types';
+import { Variant, ToastProps, AcceptedType } from './types';
 
-let openToast: (variant: Variant, message: string) => void;
+let openToast: (
+  variant: Variant,
+  arg1: AcceptedType,
+  arg2?: AcceptedType
+) => void;
 
 export const Toastify = () => {
   const [toastProps, setToastProps] = useState<ToastProps>({
@@ -14,28 +18,46 @@ export const Toastify = () => {
 
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  openToast = (variant: Variant, message: string) => {
+  openToast = (variant: Variant, arg1: AcceptedType, arg2?: AcceptedType) => {
     // 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);
+    // Set the title and message based on the arguments
+    let title = '';
+    let message = '';
+
+    // Function to format message
+    const formatMessage = (input: AcceptedType) => {
+      if (input && typeof input === 'object') {
+        return JSON.stringify(input, null, 2);
+      } else if (typeof input === 'function') {
+        return input.toString();
+      }
+      return String(input);
+    };
+
+    // If arg2 exists, use it as the message
+    if (arg2 !== undefined) {
+      title = formatMessage(arg1);
+      message = formatMessage(arg2);
+    } else {
+      title = formatMessage(arg1);
+      message = '';
+    }
+
+    const formattedTitle = title.charAt(0).toUpperCase() + title.slice(1);
+
     // Close the existing toast if open, and then immediately show the new one
-    setToastProps((prev) => ({
-      ...prev,
-      isOpen: false,
-    }));
+    setToastProps((prev) => ({ ...prev, isOpen: false }));
 
     setTimeout(() => {
       setToastProps({
         isOpen: true,
         variant,
-        toastTitle: `${title}!`,
+        toastTitle: formattedTitle,
         toastMessage: message,
       });
     }, 10);
@@ -59,8 +81,12 @@ 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),
+  success: (arg1: AcceptedType, arg2?: AcceptedType) =>
+    openToast('success', arg1, arg2),
+  error: (arg1: AcceptedType, arg2?: AcceptedType) =>
+    openToast('danger', arg1, arg2),
+  warning: (arg1: AcceptedType, arg2?: AcceptedType) =>
+    openToast('warning', arg1, arg2),
+  info: (arg1: AcceptedType, arg2?: AcceptedType) =>
+    openToast('info', arg1, arg2),
 };

package/src/components/Toastify/types.ts

@@ -6,3 +6,5 @@ export interface ToastProps {
   toastTitle: string;
   toastMessage: string;
 }
+
+export type AcceptedType = string | (() => void) | Record<string, unknown> | unknown[];

package/src/components/Tooltip/Tooltip.scss

@@ -1,7 +1,7 @@
 @use '../../assets/styles/fonts';
 
 .ff-tooltip-container {
-  cursor: auto;
+  cursor: pointer;
   display: inline-block;
 }
 

package/src/index.ts

@@ -53,7 +53,7 @@ import AttachmentButton from './components/AttachmentButton';
 import { Toastify, toast } from './components/Toastify/Toastify';
 
 import LabelEditTextField from './components/LabelEditTextField';
-import ExcelFile from './components/ExcelFile';
+import Excel from './components/Excel';
 import ModuleChip from './components/ModulesChip/ModuleChip';
 
 // Utils imports
@@ -70,6 +70,7 @@ import { compareObjects } from './utils/compareObjects/compareObjects';
 import { getEncryptedData } from './utils/getEncryptedData/getEncryptedData';
 import { throttle } from './utils/throttle/throttle';
 import { truncateText } from './utils/truncateText/truncateText';
+import { getSequentialPayload } from './utils/getSequentialPayload/getSequentialPayload';
 
 export {
   Button,
@@ -126,7 +127,7 @@ export {
   SequentialConnectingBranch,
   AttachmentButton,
   LabelEditTextField,
-  ExcelFile,
+  Excel,
   IconRadioGroup,
   Toastify,
   toast,
@@ -144,4 +145,5 @@ export {
   throttle,
   getEncryptedData,
   truncateText,
+  getSequentialPayload,
 };

package/src/utils/getSequentialPayload/getSequentialPayload.stories.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { getSequentialPayload } from './getSequentialPayload';
+import {
+  SequentialMachineInstance,
+  MachineExecutionInstanceDataSet,
+} from './types';
+import { ffid } from '../ffID/ffid';
+
+const SequentialPayloadComponent: React.FC<{
+  machineInstances: MachineExecutionInstanceDataSet[];
+}> = ({ machineInstances }) => {
+  const payload: SequentialMachineInstance[] =
+    getSequentialPayload(machineInstances);
+
+  return (
+    <div>
+      <h3>Converted Payload</h3>
+      <pre>{JSON.stringify(payload, null, 2)}</pre>
+    </div>
+  );
+};
+
+const meta: Meta<typeof SequentialPayloadComponent> = {
+  title: 'Utils/getSequentialPayload',
+  component: SequentialPayloadComponent,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof SequentialPayloadComponent>;
+
+export const Primary: Story = {
+  args: {
+    machineInstances: [
+      {
+        id: ffid(),
+        clientId: 'flinko-client-win-daa67320-d70c-438e-b417-62d76669e7a2',
+        numberOfRuns: '3',
+        executionEnv: 'Local',
+        browserName: 'Google Chrome',
+        browserVersion: '107.0.5304.88',
+        systemUrl: '',
+        machineInfo: {
+          osName: 'Windows 11 Home Single Language',
+          osVersion: '10.0.22000',
+          hostName: 'LAPTOP-T793RVQN',
+        },
+        deviceInfo: [],
+        headless: false,
+        runLevelExecutionDataSets: [
+          {
+            peVariableSetId: 'UUID',
+            globalVariableSetId: 'UUID',
+            testDataSetId: 'UUID',
+          },
+          {
+            peVariableSetId: 'UUID',
+            globalVariableSetId: 'UUID',
+            testDataSetId: 'UUID',
+          },
+          {
+            peVariableSetId: 'UUID',
+            globalVariableSetId: 'UUID',
+            testDataSetId: 'UUID',
+          },
+        ],
+      },
+    ],
+  },
+};
+
+export default meta;

package/src/utils/getSequentialPayload/getSequentialPayload.ts

@@ -0,0 +1,29 @@
+import {
+  SequentialMachineInstance,
+  MachineExecutionInstanceDataSet,
+} from './types';
+
+export const getSequentialPayload = (
+  machineInstances: MachineExecutionInstanceDataSet[] = []
+): SequentialMachineInstance[] => {
+  return machineInstances.flatMap(
+    (machineInstance: MachineExecutionInstanceDataSet) =>
+      machineInstance.runLevelExecutionDataSets.map(
+        (runLevelExecutionDataSet) => ({
+          id: machineInstance.id,
+          clientId: machineInstance.clientId,
+          numberOfRuns: machineInstance.numberOfRuns,
+          executionEnv: machineInstance.executionEnv,
+          browserName: machineInstance.browserName,
+          browserVersion: machineInstance.browserVersion,
+          systemUrl: machineInstance.systemUrl,
+          machineInfo: machineInstance.machineInfo,
+          deviceInfo: machineInstance.deviceInfo,
+          headless: machineInstance.headless,
+          peVariableSetId: runLevelExecutionDataSet.peVariableSetId,
+          globalVariableSetId: runLevelExecutionDataSet.globalVariableSetId,
+          testDataSetId: runLevelExecutionDataSet.testDataSetId,
+        })
+      )
+  );
+};

package/src/utils/getSequentialPayload/types.ts

@@ -0,0 +1,35 @@
+export interface OperatingSystemInfo {
+  osName: string;
+  osVersion: string;
+  hostName: string;
+}
+
+export interface RunLevelExecutionDataSet {
+  peVariableSetId: string;
+  globalVariableSetId: string;
+  testDataSetId: string;
+}
+
+export interface MachineExecutionInstance {
+  id: string;
+  clientId: string;
+  numberOfRuns: string | number;
+  executionEnv: string;
+  browserName: string;
+  browserVersion: string;
+  systemUrl: string;
+  machineInfo: OperatingSystemInfo;
+  deviceInfo: any[];
+  headless: boolean;
+}
+
+export interface MachineExecutionInstanceDataSet
+  extends MachineExecutionInstance {
+  runLevelExecutionDataSets: RunLevelExecutionDataSet[];
+}
+
+export interface SequentialMachineInstance extends MachineExecutionInstance {
+  peVariableSetId: string;
+  globalVariableSetId: string;
+  testDataSetId: string;
+}

package/lib/components/AddButton/AddButton.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import './AddButton.scss';
-import { AddButtonProps } from './types';
-declare const AddButton: React.FC<AddButtonProps>;
-export default AddButton;

package/lib/components/AddButton/AddButton.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import AddButton from './AddButton';
-declare const meta: Meta<typeof AddButton>;
-type Story = StoryObj<typeof AddButton>;
-export declare const PrimaryAddButton: Story;
-export default meta;

package/lib/components/AddButton/index.d.ts

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

package/lib/components/AddButton/types.d.ts

@@ -1,4 +0,0 @@
-export interface AddButtonProps {
-    name: string;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-}

package/lib/components/ExcelFile/ChangeExcelStyles.d.ts

@@ -1,14 +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): void;
-export {};

package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts

@@ -1,27 +0,0 @@
-import * as Matrix from './matrix';
-import * as Types from './types';
-import * as Point from './point';
-import { Selection, RangeSelection, EntireColumnsSelection, EntireRowsSelection } from './selection';
-import * as Actions from './actions';
-export declare const INITIAL_STATE: Types.StoreState;
-export default function reducer(state: Types.StoreState, action: Actions.Action): Types.StoreState;
-export declare const go: (rowDelta: number, columnDelta: number) => KeyDownHandler;
-export type KeyDownHandler = (state: Types.StoreState, event: React.KeyboardEvent) => Types.StoreState | void;
-export declare enum Direction {
-    Left = "Left",
-    Right = "Right",
-    Top = "Top",
-    Bottom = "Bottom"
-}
-export declare function getKeyDownHandler(state: Types.StoreState, event: React.KeyboardEvent): KeyDownHandler | undefined;
-/** Returns whether the reducer has a handler for the given keydown event */
-export declare function hasKeyDownHandler(state: Types.StoreState, event: React.KeyboardEvent): boolean;
-/** Returns whether the active cell is read only */
-export declare function isActiveReadOnly(state: Types.StoreState): boolean;
-/** Gets active cell from given state */
-export declare function getActive(state: Types.StoreState): Types.CellBase | null;
-/** Modify given edge according to given active point and data */
-export declare function modifyEdge<T extends Selection>(selection: T, active: Point.Point | null, data: Matrix.Matrix<unknown>, direction: Direction): T;
-export declare function modifyRangeSelectionEdge(rangeSelection: RangeSelection, active: Point.Point, data: Matrix.Matrix<unknown>, edge: Direction): RangeSelection;
-export declare function modifyEntireRowsSelection(selection: EntireRowsSelection, active: Point.Point, data: Matrix.Matrix<unknown>, edge: Direction): EntireRowsSelection;
-export declare function modifyEntireColumnsSelection(selection: EntireColumnsSelection, active: Point.Point, data: Matrix.Matrix<unknown>, edge: Direction): EntireColumnsSelection;

package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-interface ExcelSheetBarProps {
-    fileDetails: {
-        sheetNames: string[];
-    };
-    handleSheetChange: (name: string, index: number) => void;
-    selectedSheet: {
-        name: string;
-    };
-}
-declare const ExcelSheetBar: React.FC<ExcelSheetBarProps>;
-export default ExcelSheetBar;

package/lib/components/ExcelFile/ImportExcelStyles.d.ts

@@ -1,24 +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): void;
-export {};

package/lib/utils/find/findAndInsert.d.ts

@@ -1,7 +0,0 @@
-export type AnyObject = {
-    id: number;
-    [key: string]: any;
-};
-export declare function findAndInsert<T extends AnyObject>(data: T[], key: keyof T, targetId: number, newEntry: T, insertPosition: 'above' | 'below' | 'replace', childrenKey?: string): {
-    updatedArray: T[];
-} | null;

package/lib/utils/find/findAndInsert.stories.d.ts

@@ -1,7 +0,0 @@
-import { findAndInsert } from './findAndInsert';
-declare const _default: {
-    title: string;
-    component: typeof findAndInsert;
-};
-export default _default;
-export declare const InteractivePlayground: () => import("react/jsx-runtime").JSX.Element;