pixel-react 1.8.0 → 1.8.2

package/src/components/LabelEditTextField/LabelEditTextField.tsx

@@ -7,6 +7,7 @@ import Icon from '../Icon';
 import Tooltip from '../Tooltip';
 import Input from '../Input/Input';
 import Select from '../Select/Select';
+import useEscapeKey from '../../hooks/keyboardevents/useEscKeyEvent.js';
 
 const getErrorMessage = (
   inputValue: string,
@@ -45,17 +46,19 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
   tooltip,
 }) => {
   const [isEditing, setIsEditing] = useState(isOpen ?? false);
-  const [inputValue, setInputValue] = useState(text);
+  const [inputValue, setInputValue] = useState(text ?? '');
   const [dropdownValue, setDropdownValue] = useState(
     dropdownData[0]?.value ?? ''
   );
   const [showError, setShowError] = useState('');
+  const [disabled, isDisabled] = useState(true);
   const [isTextFieldModified, setIsTextFieldModified] = useState(false);
   const isThrowingError = showError && isEditing ? true : false;
 
   const containerRef = useRef<HTMLDivElement | null>(null);
-  const cancelRef = useRef<HTMLDivElement | null>(null); // New ref for cancel icon
+  const cancelRef = useRef<HTMLDivElement | null>(null);
   const [clickTimeout, setClickTimeout] = useState<number | null>(null);
+  const handleEsc = useEscapeKey('Escape');
   useEffect(() => {
     return () => {
       if (clickTimeout) {
@@ -107,7 +110,7 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
   };
 
   const handleCancel = () => {
-    setInputValue(text);
+    setInputValue(text ?? '');
     setDropdownValue(dropdownData[0]?.value ?? '');
     setIsEditing(false);
     setShowError('');
@@ -117,6 +120,7 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
   const handleTextFieldChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
     setInputValue(newValue);
+    isDisabled(false);
     if (newValue.length === 0 || newValue.trim().length === 0) {
       setShowError('Please type any text.');
     } else if (newValue.length < 3) {
@@ -138,9 +142,9 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
     if (
       containerRef.current &&
       !containerRef.current.contains(e.target as Node) &&
-      cancelRef.current !== e.target // Exclude clicks on cancel icon
+      cancelRef.current !== e.target
     ) {
-      const errorMessage = getErrorMessage(inputValue, text, customError);
+      const errorMessage = getErrorMessage(inputValue, text ?? '', customError);
 
       if (errorMessage && isEditing) {
         setShowError(errorMessage);
@@ -157,7 +161,7 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
       document.removeEventListener('click', handleBlur);
     };
   }, [inputValue]);
-
+  handleEsc(handleCancel);
   return (
     <div className="ff-label-edit-text-field" ref={containerRef}>
       {isEditing ? (
@@ -212,7 +216,10 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
                 height={20}
                 width={20}
                 name={confirmIcon.name}
-                className="confirm-icon"
+                disabled={disabled}
+                className={`${
+                  disabled ? 'disabled-confirm-icon' : 'confirm-icon'
+                }`}
                 onClick={handleConfirm}
               />
             )}

package/src/components/LabelEditTextField/types.ts

@@ -16,7 +16,7 @@ export interface LabelEditTextFieldTypes {
   /** Label text displayed above the input field. */
   label?: string;
   /** Initial text displayed in the input field. */
-  text: string;
+  text?: string;
   /** Text to be highlighted within the displayed text, if provided. */
   highlightText?: string;
   /** Custom error message to be displayed, if applicable. */

package/src/components/ScriptSwitchButton/ScriptSwitchButton.scss

@@ -0,0 +1,33 @@
+/* Container Styling */
+.ff-script-switch-container {
+  display: flex;
+  background-color: var(--base-bg-color);
+  height: 24px;
+  width: 48px;
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  align-items: center;
+  justify-content: center;
+
+  /* Button Styling */
+  .ff-script-switch-button {
+    padding: 0.1px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    outline: none;
+    transition: all 0.3s ease;
+
+    /* Button Hover Effect */
+    &:hover {
+      background-color: var(--hover-color);
+      color: var(--brand-color);
+    }
+  }
+
+  /* Active Button */
+  .ff-script-switch-button.active {
+    background-color: var(--ff-line-number-bg);
+    color: var(--base-bg-color);
+  }
+}

package/src/components/ScriptSwitchButton/ScriptSwitchButton.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import ScriptSwitchButton from './ScriptSwitchButton';
+
+const meta: Meta<typeof ScriptSwitchButton> = {
+  title: 'Components/ScriptSwitchButton',
+  component: ScriptSwitchButton,
+  tags: ['autodocs'],
+  argTypes: {
+    selected: {
+      control: { type: 'radio' },
+      options: ['Automation', 'Manual'],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ScriptSwitchButton>;
+
+export const Default: Story = {
+  args: {
+    selected: 'Automation',
+    tabList: ['Automation', 'Manual'],
+    handleClick: () => {},
+  },
+};
+
+export const Switch: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<string>('Automation');
+    const handleChange = (selectedSwitch: string) => {
+      if (selectedSwitch.includes('Automation')) {
+        !selectedSwitch.includes('Add') && setSelected(selectedSwitch);
+      } else {
+        !selectedSwitch.includes('Add') && setSelected(selectedSwitch);
+      }
+    };
+
+    return (
+      <ScriptSwitchButton
+        selected={selected}
+        tabList={['Automation', 'Manual']}
+        handleClick={handleChange}
+      />
+    );
+  },
+};

package/src/components/ScriptSwitchButton/ScriptSwitchButton.tsx

@@ -0,0 +1,65 @@
+import React, { type JSX } from 'react';
+import './ScriptSwitchButton.scss';
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
+
+interface ScriptSwitchButtonProps {
+  handleClick: (selected: string) => void;
+  selected: string;
+  tabList: Array<'Automation' | 'Manual'>;
+}
+
+const ScriptSwitchButton: React.FC<ScriptSwitchButtonProps> = ({
+  selected = 'text',
+  handleClick,
+  tabList, //  ['Automation' , 'Manual']
+}): JSX.Element => {
+  const isAutomation = tabList?.includes('Automation');
+  const isManual = tabList?.includes('Manual');
+
+  return (
+    <div className="ff-script-switch-container">
+      <Tooltip
+        title={isAutomation ? 'Automation' : 'Add Automation'}
+        zIndex={1000}
+      >
+        <div
+          className={`ff-script-switch-button ${
+            selected === 'Automation' ? 'active' : ''
+          }`}
+          onClick={() =>
+            handleClick(isAutomation ? 'Automation' : 'Add Automation')
+          }
+        >
+          <Icon
+            name={isAutomation ? 'automation_testcase' : 'add_testcase'}
+            color={
+              selected === 'Automation'
+                ? 'var(--primary-button-text-color)'
+                : 'var(--description-text)'
+            }
+          />
+        </div>
+      </Tooltip>
+      <Tooltip title={isManual ? 'Manual' : 'Add Manual'} zIndex={1000}>
+        <div
+          className={`ff-script-switch-button ${
+            selected === 'Manual' ? 'active' : ''
+          }`}
+          onClick={() => handleClick(isManual ? 'Manual' : 'Add Manual')}
+        >
+          <Icon
+            name={isManual ? 'manual_testcase' : 'add_testcase'}
+            color={
+              selected === 'Manual'
+                ? 'var(--primary-button-text-color)'
+                : 'var(--description-text)'
+            }
+          />
+        </div>
+      </Tooltip>
+    </div>
+  );
+};
+
+export default ScriptSwitchButton;

package/src/components/ScriptSwitchButton/index.ts

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

package/src/components/TableTree/Components/TableBody.tsx

@@ -12,10 +12,10 @@ const TableBody = React.memo(
     onToggleExpand,
     onCheckBoxChange,
   }: TableBodyProps) => (
-    <tbody>
+    <tbody className='ff-table-tree-body'>
       <tr id="ff-table-tree-first-node" />
       {flattenedTreeData?.map(
-        ({ node, level, lines = level + 1, isLast = false }) => {
+        ({ node, level, parentSiblings = [], isLast = false }) => {
           return (
             <TableRow
               key={node.id}
@@ -27,7 +27,7 @@ const TableBody = React.memo(
               onRowClick={onRowClick}
               onToggleExpand={onToggleExpand}
               onCheckBoxChange={onCheckBoxChange}
-              lines={lines}
+              parentSiblings={parentSiblings}
               isLast={isLast}
             />
           );

package/src/components/TableTree/Components/TableCell.tsx

@@ -7,15 +7,15 @@ import React from 'react';
 
 const renderSpaces = (
   level: number,
-  lines: number,
+  parentSiblings: boolean[],
   isLast?: boolean | undefined
 ) => (
   <div className="tree-table-space-container">
-    {Array.from({ length: level }).map((_, i) => (
+    {parentSiblings.reverse().map((line, i) => (
       <span
         key={i}
-        className={`tree-table-space-block ${i >= lines ? 'no-lines' : ''} ${
-          isLast && i === 0 ? 'last-node' : ''
+        className={`tree-table-space-block ${!line ? 'no-lines' : ''} ${
+          isLast && i === level-1 ? 'last-node' : ''
         }`}
       />
     ))}
@@ -31,12 +31,12 @@ const TableCell = React.memo(
     select,
     onCheckBoxChange,
     onToggleExpand,
-    lines,
+    parentSiblings,
     isLast,
   }: TableCellProps) => (
     <td>
-      {col.isTree && renderSpaces(level + 1, lines, isLast)}
-      <div className='tree-title-container'>
+      {col.isTree && renderSpaces(level + 1, parentSiblings, isLast)}
+      <div className="tree-title-container">
         {col.isTree && (
           <span
             className={`tree-table-space-block last-block  ${

package/src/components/TableTree/Components/TableRow.tsx

@@ -12,7 +12,7 @@ const TableRow = React.memo(
     onRowClick,
     onToggleExpand,
     onCheckBoxChange,
-    lines,
+    parentSiblings,
     isLast,
   }: TableRowProps) => (
     <tr
@@ -30,7 +30,7 @@ const TableRow = React.memo(
           select={select}
           onCheckBoxChange={onCheckBoxChange}
           onToggleExpand={onToggleExpand}
-          lines={lines}
+          parentSiblings={parentSiblings}
           isLast={isLast}
         />
       ))}

package/src/components/TableTree/TableTree.scss

@@ -98,9 +98,8 @@
   width: 100%;
 }
 
-tbody {
+.ff-table-tree-body {
   overflow: scroll;
-  height: 300px;
 }
 
 .tree-table {
@@ -209,7 +208,7 @@ tr:after {
 
 .tree-table-space-container {
   display: inline-flex;
-  flex-direction: row-reverse;
+  // flex-direction: row-reverse;
 }
 
 .tree-title-container {

package/src/components/TableTree/data.ts

@@ -28,8 +28,8 @@ const data = [
       id: 'MOD1001', // Unique ID
     },
     level: 0,
-    lines: 1,
     isLast: true,
+    parentSiblings: [true],
   },
   {
     node: {
@@ -59,7 +59,7 @@ const data = [
       parentId: 'MOD1001', // Root has no parent
       id: 'MOD1002', // Unique ID
     },
-    level: 1,
+    parentSiblings: [true, false],
     lines: 1,
   },
   {
@@ -76,8 +76,7 @@ const data = [
       id: 'MOD1003', // Unique ID
     },
     level: 1,
-    lines: 1,
-    isLast: true,
+    parentSiblings: [true, false],
   },
   {
     node: {
@@ -109,7 +108,7 @@ const data = [
       id: 'MOD1004', // Unique ID
     },
     level: 2,
-    lines: 1,
+    parentSiblings: [true, true, false],
   },
   {
     node: {
@@ -140,7 +139,7 @@ const data = [
       id: 'MOD1101', // Unique ID
     },
     level: 3,
-    lines: 2,
+    parentSiblings: [true, true, true, false],
   },
   {
     node: {
@@ -171,7 +170,7 @@ const data = [
       id: 'MOD1102', // Unique ID
     },
     level: 3,
-    lines: 2,
+    parentSiblings: [true, true, true, false],
   },
   {
     node: {
@@ -202,7 +201,7 @@ const data = [
       id: 'MOD1103', // Unique ID
     },
     level: 3,
-    lines: 2,
+    parentSiblings: [true, true, true, false],
     isLast: true,
   },
   {
@@ -235,7 +234,7 @@ const data = [
       id: 'MOD1005', // Unique ID
     },
     level: 2,
-    lines: 1,
+    parentSiblings: [true, true, false],
     isLast: true,
   },
   {
@@ -267,7 +266,7 @@ const data = [
       id: 'MOD1201', // Unique ID
     },
     level: 3,
-    lines: 1,
+    parentSiblings: [true, false, true, false],
   },
   {
     node: {
@@ -298,7 +297,7 @@ const data = [
       id: 'MOD1202', // Unique ID
     },
     level: 3,
-    lines: 1,
+    parentSiblings: [true, false, true, false],
   },
   {
     node: {
@@ -329,7 +328,39 @@ const data = [
       id: 'MOD1203', // Unique ID
     },
     level: 3,
-    lines: 1,
+    parentSiblings: [true, false, true, false],
+    isLast: true,
+  },
+  {
+    node: {
+      subModuleCount: 15,
+      title: 'mod3',
+      scriptCount: 0,
+      path: '/Root',
+      expanded: true,
+      modifiedOn: '19-12-2023 15:32',
+      children: false,
+      lastExecutionOrder: 3,
+      imported: false,
+      modifiedBy: '--',
+      moduleCountWithScript: 1,
+      state: 'NEW',
+      key: 'MOD1001',
+      ver: 1,
+      hierarchy: 0,
+      assigneeCount: 0,
+      searchKey: '/MOD1001111110000000000',
+      modifiedByUname: '--',
+      executionOrder: 0,
+      createdByUname: 'Shivaprasad',
+      folder: true,
+      moduleLevelScriptCount: 0,
+      name: 'Root Module111',
+      parentId: 'MOD1001', // Root has no parent
+      id: 'MOD100222', // Unique ID
+    },
+    level: 1,
+    parentSiblings: [true, false],
     isLast: true,
   },
 ];

package/src/components/TableTree/types.ts

@@ -17,7 +17,7 @@ export interface TableCellProps {
   select: string | null;
   onCheckBoxChange: (type: string, node: any) => void;
   onToggleExpand: (node: any) => void;
-  lines: number;
+  parentSiblings: boolean[];
   isLast: boolean | undefined;
 }
 
@@ -44,7 +44,7 @@ export interface TableRowProps {
   onRowClick: (e: any, node: any) => void;
   onToggleExpand: (node: any) => void;
   onCheckBoxChange: (type: string, node: any) => void;
-  lines: number;
+  parentSiblings: boolean[];
   isLast: boolean | undefined;
 }
 

package/src/index.ts

@@ -72,6 +72,7 @@ import CreateVariableSlider from './components/CreateVariable/CreateVariableSlid
 import TableWithAccordion from './components/TableWithAccordion/TableWithAccordion';
 import ProgressBar from './components/ProgressBar';
 import ChooseFile from './components/ChooseFile/ChooseFile';
+import ScriptSwitchButton from './components/ScriptSwitchButton';
 
 // Utils imports
 import { checkEmpty } from './utils/checkEmpty/checkEmpty';
@@ -101,6 +102,53 @@ import FormatString from './utils/FormatString/FormatString';
 import ConditionalDropdown from './components/ConditionalDropdown/ConditionalDropdown';
 import { hasDuplicateFile } from './utils/checkDuplicates/checkDuplicates';
 import PhoneInputField from './components/PhoneInput';
+import {
+  EMAIL_REGEX,
+  URL_REGEX,
+  PHONE_REGEX,
+  POSTAL_CODE_REGEX,
+  IPV4_REGEX,
+  IPV6_REGEX,
+  HEX_COLOR_REGEX,
+  PASSWORD_SIMPLE_REGEX,
+  PASSWORD_COMPLEX_REGEX,
+  ALPHABET_ONLY_REGEX,
+  NUMBERS_ONLY_REGEX,
+  ALPHANUMERIC_REGEX,
+  DATE_REGEX,
+  TIME_REGEX,
+  FILE_EXTENSION_REGEX,
+  MAC_ADDRESS_REGEX,
+  CREDIT_CARD_REGEX,
+  SSN_REGEX,
+  UUID_REGEX,
+  HTML_TAG_REGEX,
+  WHITESPACE_REGEX,
+  US_ZIP_CODE_REGEX,
+  USERNAME_REGEX,
+  INDIAN_PHONE_REGEX,
+  INDIAN_PIN_CODE_REGEX,
+  GSTIN_REGEX,
+  PAN_CARD_REGEX,
+  AADHAAR_REGEX,
+  VEHICLE_REGISTRATION_REGEX,
+  INDIAN_CURRENCY_REGEX,
+  INTERNATIONAL_PHONE_REGEX,
+  INDIAN_PASSPORT_REGEX,
+  DRIVING_LICENSE_REGEX,
+  USERNAME_SPECIAL_REGEX,
+  DECIMAL_NUMBER_REGEX,
+  HTML_ATTRIBUTE_REGEX,
+  RGB_COLOR_REGEX,
+  HSL_COLOR_REGEX,
+  BASE64_REGEX,
+  BINARY_NUMBER_REGEX,
+  HEXADECIMAL_NUMBER_REGEX,
+  ROMAN_NUMERALS_REGEX,
+  CURRENCY_GENERIC_REGEX,
+  LINKEDIN_PROFILE_REGEX,
+  TWITTER_HANDLE_REGEX,
+} from './validations/regex';
 
 export {
   Button,
@@ -186,7 +234,8 @@ export {
   TableWithAccordion,
   ProgressBar,
   ChooseFile,
-  
+  ScriptSwitchButton,
+
   // utils exports
   checkEmpty,
   getExtension,
@@ -205,4 +254,49 @@ export {
   useFileDropzone,
   FormatString,
   hasDuplicateFile,
+  EMAIL_REGEX,
+  URL_REGEX,
+  PHONE_REGEX,
+  POSTAL_CODE_REGEX,
+  IPV4_REGEX,
+  IPV6_REGEX,
+  HEX_COLOR_REGEX,
+  PASSWORD_SIMPLE_REGEX,
+  PASSWORD_COMPLEX_REGEX,
+  ALPHABET_ONLY_REGEX,
+  NUMBERS_ONLY_REGEX,
+  ALPHANUMERIC_REGEX,
+  DATE_REGEX,
+  TIME_REGEX,
+  FILE_EXTENSION_REGEX,
+  MAC_ADDRESS_REGEX,
+  CREDIT_CARD_REGEX,
+  SSN_REGEX,
+  UUID_REGEX,
+  HTML_TAG_REGEX,
+  WHITESPACE_REGEX,
+  US_ZIP_CODE_REGEX,
+  USERNAME_REGEX,
+  INDIAN_PHONE_REGEX,
+  INDIAN_PIN_CODE_REGEX,
+  GSTIN_REGEX,
+  PAN_CARD_REGEX,
+  AADHAAR_REGEX,
+  VEHICLE_REGISTRATION_REGEX,
+  INDIAN_CURRENCY_REGEX,
+  INTERNATIONAL_PHONE_REGEX,
+  INDIAN_PASSPORT_REGEX,
+  DRIVING_LICENSE_REGEX,
+  USERNAME_SPECIAL_REGEX,
+  DECIMAL_NUMBER_REGEX,
+  HTML_ATTRIBUTE_REGEX,
+  RGB_COLOR_REGEX,
+  HSL_COLOR_REGEX,
+  BASE64_REGEX,
+  BINARY_NUMBER_REGEX,
+  HEXADECIMAL_NUMBER_REGEX,
+  ROMAN_NUMERALS_REGEX,
+  CURRENCY_GENERIC_REGEX,
+  LINKEDIN_PROFILE_REGEX,
+  TWITTER_HANDLE_REGEX,
 };