pixel-react 1.2.7 → 1.2.9

package/src/components/Select/types.ts

@@ -63,19 +63,31 @@ export interface SelectProps {
    */
   optionsRequired?: boolean;
 
-  /**
+  /*
    * selectedOptionColor prop provides the custom color for the selected option
    */
   selectedOptionColor?: string;
 
-  /**
+  /*
    * Label accessor
    */
+
   labelAccessor?: string;
-  /**
+
+  /*
    * Value accessor
    */
   valueAccessor?: string;
+
+  /*
+   * Provide the custom height for the select container
+   */
+  height?: number;
+
+  /*
+   * Provide the custom width for the select container
+   */
+  width?: number;
 }
 
 export interface DrowdownPosition {
@@ -95,42 +107,6 @@ export interface SelectState {
   dropdownPosition: DrowdownPosition;
 }
 
-export type SelectAction =
-  | { type: 'FOCUS_INPUT' }
-  | {
-      type: 'BLUR_INPUT';
-      payload: {
-        optionsList: Option[];
-        option: Option['value'];
-      };
-    }
-  | { type: 'MOUSE_ENTER' }
-  | { type: 'MOUSE_LEAVE' }
-  | {
-      type: 'UPDATE_DROPDOWN_POSITION';
-      payload: {
-        positionX: number;
-        positionY: number;
-        width: number;
-        fromBottom: number;
-      };
-    }
-  | {
-      type: 'UPDATE_OPTION';
-      payload: string;
-    }
-  | {
-      type: 'UPDATE_OPTION_LIST';
-      payload: Option[];
-    }
-  | {
-      type: 'SHOW_ERROR';
-      payload: {
-        optionsList: Option[];
-        option: Option['value'];
-      };
-    };
-
 type OptionValue = any;
 
 export interface Option {

package/src/components/Table/Table.scss

@@ -24,10 +24,10 @@
       th {
         @extend .fontMd;
         border-bottom: 1px solid var(--slider-table-color);
-        text-transform: uppercase;
       }
-      th:first-child {
-        div {
+      th{
+        .ff-label-checkbox-container{
+          display: flex;
           align-items: center;
           .ff-table-checkbox {
             padding-right: 8px;
@@ -66,8 +66,9 @@
           cursor: pointer;
         }
       }
-      td:first-child {
-        div {
+      td{
+        .ff-data-checkbox-container {
+          display: flex;
           align-items: center;
           .ff-table-checkbox {
             padding-right: 8px;

package/src/components/Table/Table.stories.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import Table from './Table';
-import Icon from '../Icon';
 
 const meta: Meta<typeof Table> = {
   title: 'Components/Table',
@@ -160,14 +159,6 @@ const columnsData = [
       return (
         <div title={e.value} style={{ color: 'blue' }}>
           {e.value}
-          <div style={{ textAlign: 'right' }} className="icon-container">
-            <span>
-              <Icon name="edit_icon" height={12} width={12} />
-            </span>
-            <span>
-              <Icon name="delete" height={12} width={12} />
-            </span>
-          </div>
         </div>
       );
     },

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/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/getSelectOptionValue/getSelectOptionValue.ts

@@ -24,7 +24,7 @@ export const getValue = (
 ) => {
   if (!accessor) {
     if (option.hasOwnProperty('value')) {
-      return option.label;
+      return option.value;
     }
   }
   return option[accessor];

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