pixel-react 1.5.4 → 1.5.6

package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.scss

@@ -1,119 +1,119 @@
-@mixin item-center {
-  display: flex;
-  align-items: center;
-}
-
-@mixin circle($size, $color) {
-  width: $size;
-  height: $size;
-  border-radius: 50%;
-  background-color: $color;
-}
-
-@mixin arrow($color, $width, $height) {
-  width: $width;
-  height: $height;
-  background-color: $color;
-  clip-path: polygon(100% 50%, 0 100%, 0 0);
-  position: absolute;
-}
-
-.ff-sequential-connecting-branch-wrapper {
-  .ff-connecting-select-branch-wrapper {
-    height: 66px;
-    box-sizing: border-box;
-    width: fit-content;
-    margin-bottom: 16px;
-
-    .ff-select-branch-wrapper {
-      position: relative;
-      display: flex;
-      box-sizing: border-box;
-
-      .ff-sequential-select-branch {
-        width: 240px;
-      }
-
-      .ff-select-branch-arrow {
-        @include item-center;
-        position: relative;
-
-        .ff-branch-arrow-wrapper {
-          margin: 0;
-          width: 40px;
-          border-top: 1px solid var(--ff-connecting-branch-color);
-          position: relative;
-
-          .ff-branch-arrow {
-            @include arrow(var(--ff-connecting-branch-color), 6px, 6px);
-            right: -1px;
-            top: -3px;
-          }
-        }
-
-        .ff-select-branch-point {
-          @include circle(5px, var(--ff-connecting-branch-color));
-          position: absolute;
-          left: -3px;
-          z-index: 102;
-          top: 50%;
-          transform: translateY(-50%);
-        }
-      }
-
-      .ff-select-branch-arrow-down {
-        position: absolute;
-        height: 38px;
-
-        .ff-select-branch-point {
-          @include circle(5px, var(--ff-connecting-branch-color));
-          position: absolute;
-          left: -2px;
-          z-index: 102;
-          top: 50%;
-          transform: translateY(-50%);
-        }
-
-        .ff-select-branch-arrow {
-          width: 0;
-          height: 62px;
-          top: calc(50% + 1px);
-          border-left: 1px solid var(--ff-connecting-branch-color);
-          z-index: 102;
-        }
-      }
-    }
-
-    .ff-select-scope-datalist {
-      box-sizing: border-box;
-      width: 240px;
-      display: flex;
-      justify-content: space-between;
-
-      .ff-scope-wrapper {
-        @include item-center;
-        margin-right: 12px;
-      }
-
-      .ff-datalist-wrapper {
-        @include item-center;
-
-        .ff-dataset-icon,
-        .ff-run-delete-icon,
-        .ff-datalist-text {
-          cursor: pointer;
-        }
-
-        .ff-datalist-text {
-          margin: 0 12px 0 0;
-        }
-      }
-    }
-  }
-
-  .ff-sequential-branches-wrapper {
-    box-sizing: border-box;
-    width: fit-content;
-    height: fit-content;
-  }
-}
+@mixin item-center {
+  display: flex;
+  align-items: center;
+}
+
+@mixin circle($size, $color) {
+  width: $size;
+  height: $size;
+  border-radius: 50%;
+  background-color: $color;
+}
+
+@mixin arrow($color, $width, $height) {
+  width: $width;
+  height: $height;
+  background-color: $color;
+  clip-path: polygon(100% 50%, 0 100%, 0 0);
+  position: absolute;
+}
+
+.ff-sequential-connecting-branch-wrapper {
+  .ff-connecting-select-branch-wrapper {
+    height: 66px;
+    box-sizing: border-box;
+    width: fit-content;
+    margin-bottom: 16px;
+
+    .ff-select-branch-wrapper {
+      position: relative;
+      display: flex;
+      box-sizing: border-box;
+
+      .ff-sequential-select-branch {
+        width: 240px;
+      }
+
+      .ff-select-branch-arrow {
+        @include item-center;
+        position: relative;
+
+        .ff-branch-arrow-wrapper {
+          margin: 0;
+          width: 40px;
+          border-top: 1px solid var(--ff-connecting-branch-color);
+          position: relative;
+
+          .ff-branch-arrow {
+            @include arrow(var(--ff-connecting-branch-color), 6px, 6px);
+            right: -1px;
+            top: -3px;
+          }
+        }
+
+        .ff-select-branch-point {
+          @include circle(5px, var(--ff-connecting-branch-color));
+          position: absolute;
+          left: -3px;
+          z-index: 102;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+      }
+
+      .ff-select-branch-arrow-down {
+        position: absolute;
+        height: 38px;
+
+        .ff-select-branch-point {
+          @include circle(5px, var(--ff-connecting-branch-color));
+          position: absolute;
+          left: -2px;
+          z-index: 102;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+
+        .ff-select-branch-arrow {
+          width: 0;
+          height: 62px;
+          top: calc(50% + 1px);
+          border-left: 1px solid var(--ff-connecting-branch-color);
+          z-index: 102;
+        }
+      }
+    }
+
+    .ff-select-scope-datalist {
+      box-sizing: border-box;
+      width: 240px;
+      display: flex;
+      justify-content: space-between;
+
+      .ff-scope-wrapper {
+        @include item-center;
+        margin-right: 12px;
+      }
+
+      .ff-datalist-wrapper {
+        @include item-center;
+
+        .ff-dataset-icon,
+        .ff-run-delete-icon,
+        .ff-datalist-text {
+          cursor: pointer;
+        }
+
+        .ff-datalist-text {
+          margin: 0 12px 0 0;
+        }
+      }
+    }
+  }
+
+  .ff-sequential-branches-wrapper {
+    box-sizing: border-box;
+    width: fit-content;
+    height: fit-content;
+  }
+}

package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx

@@ -1,56 +1,56 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import SequentialConnectingBranch from './SequentialConnectingBranch';
-import { useState } from 'react';
-
-const meta: Meta<typeof SequentialConnectingBranch> = {
-  title: 'Components/SequentialConnectingBranch',
-  component: SequentialConnectingBranch,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof SequentialConnectingBranch>;
-
-export const Primary: Story = {
-  render: () => {
-    const machineList = [
-      {
-        label: 'FFE 123',
-        value: 'FFE 123',
-      },
-      {
-        label: 'FFE 234',
-        value: 'FFE 234',
-      },
-      {
-        label: 'FFE 345',
-        value: 'FFE 345',
-      },
-      {
-        label: 'FFE 456',
-        value: 'FFE 456',
-      },
-    ];
-    const [selectedMachine, setSelectedMachine] = useState({});
-    const [machineInstances, setMachineInstances] = useState<any>([]);
-    return (
-      <>
-        <SequentialConnectingBranch
-          machineOptionsList={machineList}
-          machineInstances={machineInstances}
-          selectedMachine={selectedMachine}
-          onHandleSelect={(option) => {
-            setSelectedMachine(option);
-          }}
-          onAddBrowserInstance={() => {
-            setMachineInstances([...machineInstances, {}]);
-          }}
-        />
-      </>
-    );
-  },
-};
-
-export default meta;
+import type { Meta, StoryObj } from '@storybook/react';
+import SequentialConnectingBranch from './SequentialConnectingBranch';
+import { useState } from 'react';
+
+const meta: Meta<typeof SequentialConnectingBranch> = {
+  title: 'Components/SequentialConnectingBranch',
+  component: SequentialConnectingBranch,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof SequentialConnectingBranch>;
+
+export const Primary: Story = {
+  render: () => {
+    const machineList = [
+      {
+        label: 'FFE 123',
+        value: 'FFE 123',
+      },
+      {
+        label: 'FFE 234',
+        value: 'FFE 234',
+      },
+      {
+        label: 'FFE 345',
+        value: 'FFE 345',
+      },
+      {
+        label: 'FFE 456',
+        value: 'FFE 456',
+      },
+    ];
+    const [selectedMachine, setSelectedMachine] = useState({});
+    const [machineInstances, setMachineInstances] = useState<any>([]);
+    return (
+      <>
+        <SequentialConnectingBranch
+          machineOptionsList={machineList}
+          machineInstances={machineInstances}
+          selectedMachine={selectedMachine}
+          onHandleSelect={(option) => {
+            setSelectedMachine(option);
+          }}
+          onAddBrowserInstance={() => {
+            setMachineInstances([...machineInstances, {}]);
+          }}
+        />
+      </>
+    );
+  },
+};
+
+export default meta;

package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx

@@ -1,136 +1,136 @@
-import classNames from 'classnames';
-import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-import Button from '../Button';
-import Icon from '../Icon';
-import Select from '../Select';
-import Typography from '../Typography';
-import './SequentialConnectingBranch.scss';
-import { useEffect, useRef, useState } from 'react';
-import ConnectingBranches from './components/ConnectingBranches/ConnectingBranches';
-import { ExecutionContext, SequentialConnectingBranchProps } from './types';
-
-const SequentialConnectingBranch = ({
-  machineInstances = [],
-  machineColumnWidth = 180,
-  machineColumnCount = 1,
-  selectedMachine = {},
-  machineOptionsList = [],
-  onHandleSelect = () => {},
-  onAddBrowserInstance = () => {},
-  onAddRunBrowserInstance = () => {},
-  onDeleteBrowserInstance = () => {},
-}: SequentialConnectingBranchProps) => {
-  const dataListRef = useRef<HTMLButtonElement>(null);
-  const selectButtonRef = useRef<HTMLButtonElement>(null);
-  const defaultMachineColumnCount = Math.max(machineColumnCount, 1);
-  const defaultMachineColumnWidth = Math.max(machineColumnWidth, 180);
-
-  const [machineBranchInstances, setMachineBranchInstances] = useState<
-    ExecutionContext[] | {}[]
-  >([]);
-
-  const isMachineInstances = checkEmpty(machineInstances);
-  const isMachineSelected = checkEmpty(selectedMachine);
-
-  useEffect(() => {
-    setMachineBranchInstances([...machineInstances, {}]);
-  }, [machineInstances]);
-  console.log(machineInstances, 'machineInstances');
-  console.log(machineBranchInstances, 'machineBranchInstances');
-  return (
-    <div className="ff-sequential-connecting-branch-wrapper">
-      <div className="ff-connecting-select-branch-wrapper">
-        <div className="ff-select-branch-wrapper">
-          <Select
-            onChange={onHandleSelect}
-            optionsList={machineOptionsList}
-            required={true}
-            label="Choose Machine"
-            showLabel={true}
-            className="ff-sequential-select-branch"
-            width={'240px'}
-            selectedOption={selectedMachine}
-            valueAccessor={'name'}
-          />
-          {!isMachineSelected && (
-            <div
-              className={classNames({
-                'ff-select-branch-arrow': isMachineInstances,
-                'ff-select-branch-arrow-down': !isMachineInstances,
-              })}
-            >
-              <div className="ff-select-branch-point"></div>
-              <div className="ff-select-branch-arrow">
-                <div className="ff-branch-arrow-wrapper">
-                  {isMachineInstances && (
-                    <div className="ff-branch-arrow"></div>
-                  )}
-                </div>
-                {isMachineInstances && (
-                  <>
-                    <Button
-                      variant="tertiary"
-                      label="Browser / Device"
-                      size="small"
-                      className="branch-button"
-                      ref={selectButtonRef}
-                      onClick={onAddBrowserInstance}
-                    />
-                  </>
-                )}
-              </div>
-            </div>
-          )}
-        </div>
-        <div className="ff-select-scope-datalist">
-          <div className="ff-scope-wrapper">
-            <Icon name="windows" />
-            <Typography
-              as="span"
-              fontSize={12}
-              color="var(--ff-connecting-branch-scope-color)"
-              className="ff-scope-text"
-            >
-              Private
-            </Typography>
-          </div>
-
-          <div className="ff-datalist-wrapper">
-            <Icon
-              name="datalist_icon"
-              className="ff-dataset-icon"
-              ref={dataListRef}
-            />
-            <Typography
-              as="span"
-              fontSize={12}
-              color="var(--ff-connecting-branch-color)"
-              className="ff-datalist-text"
-            >
-              Dataset List
-            </Typography>
-            <Icon
-              name="delete"
-              className="ff-run-delete-icon"
-              color="var(--ff-connecting-branch-delete-color)"
-            />
-          </div>
-        </div>
-      </div>
-      <div className="ff-sequential-branches-wrapper">
-        {!isMachineInstances && (
-          <ConnectingBranches
-            machineBranchInstances={machineBranchInstances}
-            machineColumnCount={defaultMachineColumnCount}
-            machineColumnWidth={defaultMachineColumnWidth}
-            onAddBrowser={onAddBrowserInstance}
-            onDeleteBrowser={onDeleteBrowserInstance}
-            onAddRunBrowser={onAddRunBrowserInstance}
-          />
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default SequentialConnectingBranch;
+import classNames from 'classnames';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+import Button from '../Button';
+import Icon from '../Icon';
+import Select from '../Select';
+import Typography from '../Typography';
+import './SequentialConnectingBranch.scss';
+import { useEffect, useRef, useState } from 'react';
+import ConnectingBranches from './components/ConnectingBranches/ConnectingBranches';
+import { ExecutionContext, SequentialConnectingBranchProps } from './types';
+
+const SequentialConnectingBranch = ({
+  machineInstances = [],
+  machineColumnWidth = 180,
+  machineColumnCount = 1,
+  selectedMachine = {},
+  machineOptionsList = [],
+  onHandleSelect = () => {},
+  onAddBrowserInstance = () => {},
+  onAddRunBrowserInstance = () => {},
+  onDeleteBrowserInstance = () => {},
+}: SequentialConnectingBranchProps) => {
+  const dataListRef = useRef<HTMLButtonElement>(null);
+  const selectButtonRef = useRef<HTMLButtonElement>(null);
+  const defaultMachineColumnCount = Math.max(machineColumnCount, 1);
+  const defaultMachineColumnWidth = Math.max(machineColumnWidth, 180);
+
+  const [machineBranchInstances, setMachineBranchInstances] = useState<
+    ExecutionContext[] | {}[]
+  >([]);
+
+  const isMachineInstances = checkEmpty(machineInstances);
+  const isMachineSelected = checkEmpty(selectedMachine);
+
+  useEffect(() => {
+    setMachineBranchInstances([...machineInstances, {}]);
+  }, [machineInstances]);
+  console.log(machineInstances, 'machineInstances');
+  console.log(machineBranchInstances, 'machineBranchInstances');
+  return (
+    <div className="ff-sequential-connecting-branch-wrapper">
+      <div className="ff-connecting-select-branch-wrapper">
+        <div className="ff-select-branch-wrapper">
+          <Select
+            onChange={onHandleSelect}
+            optionsList={machineOptionsList}
+            required={true}
+            label="Choose Machine"
+            showLabel={true}
+            className="ff-sequential-select-branch"
+            width={'240px'}
+            selectedOption={selectedMachine}
+            valueAccessor={'name'}
+          />
+          {!isMachineSelected && (
+            <div
+              className={classNames({
+                'ff-select-branch-arrow': isMachineInstances,
+                'ff-select-branch-arrow-down': !isMachineInstances,
+              })}
+            >
+              <div className="ff-select-branch-point"></div>
+              <div className="ff-select-branch-arrow">
+                <div className="ff-branch-arrow-wrapper">
+                  {isMachineInstances && (
+                    <div className="ff-branch-arrow"></div>
+                  )}
+                </div>
+                {isMachineInstances && (
+                  <>
+                    <Button
+                      variant="tertiary"
+                      label="Browser / Device"
+                      size="small"
+                      className="branch-button"
+                      ref={selectButtonRef}
+                      onClick={onAddBrowserInstance}
+                    />
+                  </>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+        <div className="ff-select-scope-datalist">
+          <div className="ff-scope-wrapper">
+            <Icon name="windows" />
+            <Typography
+              as="span"
+              fontSize={12}
+              color="var(--ff-connecting-branch-scope-color)"
+              className="ff-scope-text"
+            >
+              Private
+            </Typography>
+          </div>
+
+          <div className="ff-datalist-wrapper">
+            <Icon
+              name="datalist_icon"
+              className="ff-dataset-icon"
+              ref={dataListRef}
+            />
+            <Typography
+              as="span"
+              fontSize={12}
+              color="var(--ff-connecting-branch-color)"
+              className="ff-datalist-text"
+            >
+              Dataset List
+            </Typography>
+            <Icon
+              name="delete"
+              className="ff-run-delete-icon"
+              color="var(--ff-connecting-branch-delete-color)"
+            />
+          </div>
+        </div>
+      </div>
+      <div className="ff-sequential-branches-wrapper">
+        {!isMachineInstances && (
+          <ConnectingBranches
+            machineBranchInstances={machineBranchInstances}
+            machineColumnCount={defaultMachineColumnCount}
+            machineColumnWidth={defaultMachineColumnWidth}
+            onAddBrowser={onAddBrowserInstance}
+            onDeleteBrowser={onDeleteBrowserInstance}
+            onAddRunBrowser={onAddRunBrowserInstance}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default SequentialConnectingBranch;