pixel-react 1.1.4 → 1.1.5

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

@@ -0,0 +1,203 @@
+import classNames from 'classnames';
+import { checkEmpty } from '../../../../utils/checkEmpty/checkEmpty';
+import { BranchesProps } from './types';
+import { Fragment } from 'react/jsx-runtime';
+import { ffid } from '../../../../utils/ffID/ffid';
+import { ExecutionContext } from '../../types';
+import MachineInputField from '../../../MachineInputField';
+import Icon from '../../../Icon';
+import Typography from '../../../Typography';
+import Button from '../../../Button';
+import './Branches.scss';
+
+const Branches = ({
+  machineInstances,
+  rowIndex,
+  machineColumnCount,
+  machineColumnWidth,
+  nextRowMachineInstance,
+  previousRowMachineInstance,
+  onAddBrowser,
+  onDeleteBrowser,
+  onAddRunBrowser,
+}: BranchesProps) => {
+  const evenRow = rowIndex % 2 === 0;
+  const lastMachineInstance = checkEmpty(
+    machineInstances[machineColumnCount - 1]
+  );
+
+  const getBorderStyle = (
+    currentBranch: ExecutionContext | {} | undefined,
+    nextBranch: ExecutionContext | {} | undefined
+  ) => {
+    if (
+      currentBranch &&
+      nextBranch &&
+      'id' in currentBranch &&
+      'id' in nextBranch
+    ) {
+      return currentBranch.id === nextBranch.id ? 'dotted' : 'solid';
+    }
+    return 'solid';
+  };
+
+  const showMiddleArrow = (index: number) =>
+    machineInstances.length - 1 !== index && machineColumnCount > 1;
+
+  const getGridTemplateColumnStyle = () => {
+    if (machineColumnCount === 1) {
+      return `24px ${machineColumnWidth}px 24px`;
+    }
+    return `24px ${machineColumnWidth}px repeat(${
+      machineColumnCount - 1
+    }, 40px ${machineColumnWidth}px) 24px`;
+  };
+
+  return (
+    <div
+      className={classNames({
+        'ff-connecting-branch-grid': evenRow,
+        'ff-connecting-branch-grid-reverse': !evenRow,
+      })}
+      style={{
+        gridTemplateColumns: getGridTemplateColumnStyle(),
+      }}
+    >
+      <div className="ff-connecting-branch-start-wrapper">
+        <div
+          className={classNames({
+            'ff-connecting-branch-arrow': evenRow,
+            'ff-connecting-branch-arrow-reverse': !evenRow,
+          })}
+        ></div>
+        <div
+          className={classNames({
+            'ff-connecting-branch-container': evenRow,
+            'ff-connecting-branch-container-reverse': !evenRow,
+          })}
+          style={{
+            border: `1px ${getBorderStyle(
+              machineInstances[0],
+              previousRowMachineInstance
+            )} var(--ff-connecting-branch-color)`,
+            borderTop: 'none',
+            borderLeft: `${!evenRow && 'none'}`,
+            borderRight: `${evenRow && 'none'}`,
+          }}
+        ></div>
+      </div>
+      {machineInstances?.map((machineInstance, index) => {
+        const {
+          executionEnv = 'Local',
+          browserName = 'Local',
+          browserVersion = '1',
+          runCount = 0,
+          id = '',
+        } = machineInstance as ExecutionContext;
+        return (
+          <Fragment key={ffid()}>
+            {!checkEmpty(machineInstance) ? (
+              <div>
+                <div className="ff-connecting-branch-input-point-wrapper">
+                  <div
+                    className={classNames({
+                      'ff-connecting-branch-point': evenRow,
+                      'ff-connecting-branch-point-reverse': !evenRow,
+                    })}
+                  ></div>
+                  <MachineInputField
+                    width="180px"
+                    runCount={runCount}
+                    key={ffid()}
+                    options={[
+                      { label: executionEnv, type: executionEnv },
+                      { label: browserVersion, type: browserName },
+                    ]}
+                    contentReverse={!evenRow}
+                  />
+                </div>
+                <div
+                  className={classNames({
+                    'ff-connecting-branch-datalist': evenRow,
+                    'ff-connecting-branch-datalist-reverse': !evenRow,
+                  })}
+                >
+                  <Icon name="datalist_icon" className="ff-connecting-icon" />
+                  <Typography
+                    className="ff-connecting-text"
+                    color="var(--ff-connecting-branch-color)"
+                  >
+                    Dataset List
+                  </Typography>
+                  <Icon
+                    name="plus_icon"
+                    className="ff-connecting-icon"
+                    onClick={() => onAddRunBrowser(id)}
+                    color="var(--ff-connecting-branch-color)"
+                  />
+                  <Typography
+                    className="ff-connecting-text"
+                    color="var(--ff-connecting-branch-color)"
+                  >
+                    Run
+                  </Typography>
+                  <Icon
+                    name="delete"
+                    className="ff-connecting-delete-icon"
+                    onClick={() => onDeleteBrowser(id, runCount)}
+                    color="var(--ff-connecting-branch-delete-color)"
+                  />
+                </div>
+              </div>
+            ) : (
+              <div className="ff-connecting-branch-browser-button">
+                <Button
+                  variant="tertiary"
+                  label="Browser / Devices"
+                  onClick={onAddBrowser}
+                />
+              </div>
+            )}
+            {showMiddleArrow(index) && (
+              <div
+                className="ff-connecting-branch-middle-arrow"
+                style={{
+                  borderTop: `1px ${getBorderStyle(
+                    machineInstance,
+                    machineInstances[index + 1]
+                  )} var(--ff-connecting-branch-color)`,
+                }}
+              >
+                <div
+                  className={classNames({
+                    'ff-connecting-branch-arrow': evenRow,
+                    'ff-connecting-branch-arrow-reverse': !evenRow,
+                  })}
+                ></div>
+              </div>
+            )}
+          </Fragment>
+        );
+      })}
+      {!lastMachineInstance && (
+        <div
+          className={classNames({
+            'ff-connecting-branch-end-arrow': evenRow,
+            'ff-connecting-branch-end-arrow-reverse': !evenRow,
+          })}
+          style={{
+            border: `1px ${getBorderStyle(
+              machineInstances[machineColumnCount - 1],
+              nextRowMachineInstance
+            )} var(--ff-connecting-branch-color)`,
+            borderBottom: 'none',
+            borderLeft: `${evenRow && 'none'}`,
+            borderRight: `${!evenRow && 'none'}`,
+          }}
+        ></div>
+      )}
+    </div>
+  );
+};
+
+export default Branches;

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

@@ -0,0 +1,18 @@
+import { ExecutionContext } from '../../types';
+
+export interface BranchesProps {
+  machineInstances: ExecutionContext[] | {}[];
+  rowIndex: number;
+  machineColumnCount: number;
+  machineColumnWidth: number;
+  nextRowMachineInstance?: ExecutionContext | {} | undefined;
+  previousRowMachineInstance?: ExecutionContext | {} | undefined;
+  onAddBrowser: () => void;
+  onDeleteBrowser: (id: string, runCount: number) => void;
+  onAddRunBrowser: (id: string) => void;
+}
+
+export interface branchTypeProps {
+  currentBranch: ExecutionContext | undefined | {};
+  nextBranch: ExecutionContext | undefined | {};
+}

package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.scss

@@ -0,0 +1,3 @@
+.ff-connecting-branch-grid-wrapper {
+  box-sizing: border-box;
+}

package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from 'react';
+import { ExecutionContext } from '../../types';
+import { ConnectingBranchesProps } from './types';
+import { Fragment } from 'react/jsx-runtime';
+import {ffid} from '../../../../utils/ffID/ffid';
+import Branches from '../Branches/Branches';
+import './ConnectingBranches.scss';
+
+const ConnectingBranches = ({
+  machineBranchInstances,
+  machineColumnCount,
+  machineColumnWidth,
+  onAddBrowser,
+  onDeleteBrowser,
+  onAddRunBrowser,
+}: ConnectingBranchesProps) => {
+  const [machineInstance, setMachineInstance] = useState<
+    ExecutionContext[] | {}[]
+  >(machineBranchInstances);
+
+  useEffect(() => {
+    setMachineInstance(machineBranchInstances);
+  }, [machineBranchInstances]);
+
+  const getMachineBranchInstancesChunk = (
+    machineBranchInstances: ExecutionContext[] | {}[],
+    chunkSize: number
+  ) => {
+    const machineBranchInstancesChunk = [];
+    for (let i = 0; i < machineBranchInstances.length; i += chunkSize) {
+      machineBranchInstancesChunk.push(
+        machineBranchInstances.slice(i, i + chunkSize)
+      );
+    }
+    return machineBranchInstancesChunk;
+  };
+
+  const machineInstancesRow = getMachineBranchInstancesChunk(
+    machineInstance,
+    machineColumnCount
+  );
+
+  return (
+    <div className="ff-connecting-branch-grid-wrapper">
+      {machineInstancesRow.map((machineInstances, index) => (
+        <Fragment key={ffid()}>
+          <Branches
+            machineInstances={machineInstances}
+            rowIndex={index}
+            machineColumnCount={machineColumnCount}
+            machineColumnWidth={machineColumnWidth}
+            onAddBrowser={onAddBrowser}
+            onDeleteBrowser={onDeleteBrowser}
+            onAddRunBrowser={onAddRunBrowser}
+            nextRowMachineInstance={machineInstancesRow[index + 1]?.[0]}
+            previousRowMachineInstance={
+              machineInstancesRow[index - 1]?.[machineColumnCount - 1]
+            }
+          />
+        </Fragment>
+      ))}
+    </div>
+  );
+};
+
+export default ConnectingBranches;

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

@@ -0,0 +1,10 @@
+import { ExecutionContext } from '../../types';
+
+export interface ConnectingBranchesProps {
+  machineBranchInstances: ExecutionContext[] | {}[];
+  machineColumnCount: number;
+  machineColumnWidth: number;
+  onAddBrowser: () => void;
+  onDeleteBrowser: (id: string, runCount: number) => void;
+  onAddRunBrowser: (id: string) => void;
+}

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

@@ -0,0 +1,31 @@
+.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

@@ -0,0 +1,85 @@
+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

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

package/src/components/SequentialConnectingBranch/index.ts

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

package/src/components/SequentialConnectingBranch/types.ts

@@ -0,0 +1,42 @@
+import { Option } from '../Select/types';
+
+export interface SequentialConnectingBranchProps {
+  machineInstances?: ExecutionContext[] | {}[];
+  machineColumnWidth?: number;
+  machineColumnCount?: number;
+  machineInstance: ExecutionContext;
+  selectedMachine?: string; // TODO: type will change in the future
+  onMachineSelectionChange?: (selectedMachine: Option) => void; // TODO: function will change in the future
+  machineOptionsList?: Option[];
+}
+
+// Type for machine information
+export interface MachineInfo {
+  osName: string;
+  osVersion: string;
+  hostName: string;
+}
+
+// Type for device information
+export interface DeviceInfo {
+  // Define properties as needed; assuming it can have various structures.
+  // For example:
+  // deviceName: string;
+  // deviceType: string;
+}
+
+export interface ExecutionContext {
+  id: string;
+  clientId: string;
+  runCount: number;
+  executionEnv?: 'Local'; // Change to specific enum if more environments exist
+  browserName?: 'Local' | 'mac' | 'android' | 'Google Chrome';
+  browserVersion: string;
+  systemUrl: string;
+  machineInfo: MachineInfo;
+  deviceInfo: DeviceInfo[];
+  headless: boolean;
+  peVariableSetId: string;
+  globalVariableSetId: string;
+  testDataSetId: string;
+}

package/src/components/Tabs/Tabs.stories.tsx

@@ -39,15 +39,15 @@ const TabContentFour = () => (
   </div>
 );
 
+const tabsData = [
+  { id: 'tab-1', label: 'Tab--1', component: <TabContentOne /> },
+  { id: 'tab-2', label: 'Tab--2', component: <TabContentTwo /> },
+  { id: 'tab-3', label: 'Tab--3', component: <TabContentThree /> },
+];
+
 export const DefaultTabs: Story = {
   render: () => {
-    const [activeTabIdDefault, setActiveTabIdDefault] = useState<string>('0');
-
-    const tabsData = [
-      { label: 'Tab--1', component: <TabContentOne /> },
-      { label: 'Tab--2', component: <TabContentTwo /> },
-      { label: 'Tab--3', component: <TabContentThree /> },
-    ];
+    const [activeTabIdDefault, setActiveTabIdDefault] = useState<string>('tab-1');
 
     return (
       <Tabs
@@ -60,14 +60,14 @@ export const DefaultTabs: Story = {
 };
 export const CapsuleTabs: Story = {
   render: () => {
-    const [activeTabIdCapsule, setActiveTabIdCapsule] = useState<string>('0');
+    const [activeTabIdCapsule, setActiveTabIdCapsule] = useState<string>('tab-1');
 
     const tabsDataForCapsule = [
-      { label: 'Loremipsum_1', component: <TabContentOne /> },
-      { label: 'Loremipsum_2', component: <TabContentTwo /> },
-      { label: 'Loremipsum_3', component: <TabContentThree /> },
-      { label: 'Loremipsum_4', component: <TabContentFour /> },
-      { label: 'Loremipsum_5', component: <TabContentFour /> },
+      { id: 'tab-1', label: 'Loremipsum_1', component: <TabContentOne /> },
+      { id: 'tab-2', label: 'Loremipsum_2', component: <TabContentTwo /> },
+      { id: 'tab-3', label: 'Loremipsum_3', component: <TabContentThree /> },
+      { id: 'tab-4', label: 'Loremipsum_4', component: <TabContentFour /> },
+      { id: 'tab-5', label: 'Loremipsum_5', component: <TabContentFour /> },
     ];
 
     return (
@@ -83,12 +83,17 @@ export const CapsuleTabs: Story = {
 
 export const TabsWithDisabledTab: Story = {
   render: () => {
-    const [activeTabId, setActiveTabId] = useState<string>('0');
+    const [activeTabId, setActiveTabId] = useState<string>('tab-1');
 
     const tabsDataWithOneDisableAttribute = [
-      { label: 'Tab--1', component: <TabContentOne /> },
-      { label: 'Tab--2', component: <TabContentTwo />, disabled: true },
-      { label: 'Tab--3', component: <TabContentThree /> },
+      { id: 'tab-1', label: 'Tab--1', component: <TabContentOne /> },
+      {
+        id: 'tab-2',
+        label: 'Tab--2',
+        component: <TabContentTwo />,
+        disabled: true,
+      },
+      { id: 'tab-3', label: 'Tab--3', component: <TabContentThree /> },
     ];
 
     return (
@@ -103,13 +108,7 @@ export const TabsWithDisabledTab: Story = {
 
 export const WithoutBorder: Story = {
   render: () => {
-    const [activeTabIdDefault, setActiveTabIdDefault] = useState<string>('0');
-
-    const tabsData = [
-      { label: 'Tab--1', component: <TabContentOne /> },
-      { label: 'Tab--2', component: <TabContentTwo /> },
-      { label: 'Tab--3', component: <TabContentThree /> },
-    ];
+    const [activeTabIdDefault, setActiveTabIdDefault] = useState<string>('tab-1');
 
     return (
       <div style={{ display: 'flex', gap: '10px' }}>
@@ -132,4 +131,4 @@ export const WithoutBorder: Story = {
   },
 };
 
-export default meta;
+export default meta;

package/src/components/Tabs/Tabs.tsx

@@ -11,13 +11,6 @@ const Tabs = ({
   onTabClick,
   noBorder = false,
 }: TabsProps) => {
-  const tabs = tabsData.map((tab, index) => ({
-    id: index.toString(),
-    label: tab.label,
-    component: tab.component,
-    disabled: tab.disabled,
-  }));
-
   return (
     <div className={`ff-tabs-container`}>
       <div
@@ -25,7 +18,7 @@ const Tabs = ({
           'ff-tab-row--no-border': noBorder,
         })}
       >
-        {tabs.map((tab) => (
+        {tabsData.map((tab) => (
           <button
             key={tab.id}
             onClick={() => !tab.disabled && onTabClick(tab.id)}
@@ -60,10 +53,10 @@ const Tabs = ({
         ))}
       </div>
       <div className={`ff-tab-content`}>
-        {tabs.find((tab) => tab.id === activeTabId)?.component}
+        {tabsData.find((tab) => tab.id === activeTabId)?.component}
       </div>
     </div>
   );
 };
 
-export default Tabs;
+export default Tabs;

package/src/components/Tabs/types.ts

@@ -21,7 +21,12 @@ export interface TabsProps {
   /**
    * An array of tab objects containing label, component, and optional disabled status.
    */
-  tabsData: { label: string; component?: JSX.Element; disabled?: boolean }[];
+  tabsData: {
+    id: string;
+    label: string;
+    component?: JSX.Element;
+    disabled?: boolean;
+  }[];
   /**
    * Defines the styling variant of the tabs.
    */
@@ -40,3 +45,4 @@ export interface TabsProps {
    */
   noBorder?: boolean;
 }
+

package/src/index.ts

@@ -46,6 +46,8 @@ import Paper from './components/Paper';
 import DashboardDonutChart from './components/Charts/DashboardDonutChart';
 import Recaptcha from './components/FF_Captcha/Recaptcha';
 import NLPInput from './components/NLPInput';
+import MachineInputField from './components/MachineInputField';
+import SequentialConnectingBranch from './components/SequentialConnectingBranch';
 
 // Utils imports
 import { checkEmpty } from './utils/checkEmpty/checkEmpty';
@@ -119,6 +121,9 @@ export {
   Paper,
   Recaptcha,
   NLPInput,
+  MachineInputField,
+  SequentialConnectingBranch,
+
   // utils exports
   checkEmpty,
   getExtension,