pixel-react 1.10.15 → 1.10.16

package/src/components/LabelEditTextField/LabelEditTextField.tsx

@@ -1,267 +0,0 @@
-import React, { useState, useRef, useEffect, FC } from 'react';
-import './LabelEditTextField.scss';
-import { LabelEditTextFieldTypes } from './types';
-import Typography from '../Typography';
-import HighlightText from '../HighlightText';
-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,
-  text: string,
-  customError?: string,
-  customErrorCondition?: boolean
-): string => {
-  if (inputValue === text) {
-    return 'No changes were made.';
-  } else if (!inputValue) {
-    return 'Text is required';
-  } else if (inputValue.length < 3) {
-    return 'Please enter at least 3 characters.';
-  } else if (customErrorCondition) {
-    return customError ?? 'Custom error occurred';
-  }
-  return '';
-};
-const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
-  label,
-  placeholder,
-  text,
-  showText = true,
-  highlightText,
-  customError,
-  confirmIcon,
-  customErrorCondition,
-  cancelIcon,
-  variant = 'textField',
-  onInputChange,
-  dropdownData = [],
-  // width,
-  className,
-  height,
-  isOpen = false,
-  confirmAction,
-  onClick,
-  tooltip,
-}) => {
-  const [isEditing, setIsEditing] = useState(isOpen ?? false);
-  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);
-  const [clickTimeout, setClickTimeout] = useState<number | null>(null);
-  const handleEsc = useEscapeKey('Escape');
-  useEffect(() => {
-    return () => {
-      if (clickTimeout) {
-        clearTimeout(clickTimeout);
-      }
-    };
-  }, [clickTimeout]);
-  const handleDoubleClick = () => {
-    if (clickTimeout) {
-      clearTimeout(clickTimeout);
-      setClickTimeout(null);
-    }
-    setIsEditing(true);
-    setShowError('');
-  };
-  const handleSingleClick = () => {
-    if (onClick) onClick();
-  };
-  const handleClick = () => {
-    if (clickTimeout) {
-      clearTimeout(clickTimeout);
-      setClickTimeout(null);
-    }
-
-    const timeout = window.setTimeout(() => {
-      handleSingleClick();
-      setClickTimeout(null);
-    }, 1000);
-
-    setClickTimeout(timeout);
-  };
-  const handleConfirm = () => {
-    let errorMessage = '';
-    if (inputValue.length === 0 || inputValue.trim().length === 0) {
-      errorMessage = 'Please type any text.';
-    } else if (inputValue.length < 3) {
-      errorMessage = 'Please enter at least 3 characters.';
-    } else if (customErrorCondition) {
-      errorMessage = customError ?? 'Invalid input.';
-    }
-
-    if (errorMessage) {
-      setShowError(errorMessage);
-    } else {
-      setIsEditing(false);
-      setShowError('');
-      if (confirmAction) confirmAction(inputValue, dropdownValue);
-    }
-  };
-
-  const handleCancel = () => {
-    setInputValue(text ?? '');
-    setDropdownValue(dropdownData[0]?.value ?? '');
-    setIsEditing(false);
-    setShowError('');
-    setIsTextFieldModified(false);
-  };
-
-  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) {
-      setShowError('Please enter at least 3 characters.');
-    } else if (customErrorCondition) {
-      setShowError(customError ?? 'Invalid input.');
-    } else {
-      setShowError('');
-    }
-
-    setIsTextFieldModified(newValue !== text);
-
-    if (onInputChange) {
-      onInputChange(newValue);
-    }
-  };
-
-  const handleBlur = (e: MouseEvent) => {
-    if (
-      containerRef.current &&
-      !containerRef.current.contains(e.target as Node) &&
-      cancelRef.current !== e.target
-    ) {
-      const errorMessage = getErrorMessage(inputValue, text ?? '', customError);
-
-      if (errorMessage && isEditing) {
-        setShowError(errorMessage);
-      } else {
-        setIsEditing(false);
-        setShowError('');
-      }
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener('click', handleBlur);
-    return () => {
-      document.removeEventListener('click', handleBlur);
-    };
-  }, [inputValue]);
-  handleEsc(handleCancel);
-  return (
-    <div className="ff-label-edit-text-field" ref={containerRef}>
-      {isEditing ? (
-        <div className="ff-label-text-field">
-          {variant === 'textFieldWithDropdown' ? (
-            <div
-              className={`ff-label-text-field-with-dropdown ${
-                isEditing ? 'open' : ''
-              }`}
-              style={{ height }}
-            >
-              <Input
-                name="input"
-                type="text"
-                label={label ? label : ''}
-                disabled={false}
-                error={isThrowingError}
-                placeholder={placeholder ? placeholder : ''}
-                value={inputValue}
-                onChange={handleTextFieldChange}
-                className={`${className} 
-                
-               ${isTextFieldModified ? 'modified' : ''}`}
-              />
-              <Select
-                label={''}
-                optionsList={dropdownData}
-                selectedOption={{ value: dropdownValue, label: dropdownValue }}
-                onChange={(option) => setDropdownValue(option.value)}
-              />
-            </div>
-          ) : (
-            <div className="ff-label-text-field-without-dropdown">
-              <Input
-                name="input"
-                type="text"
-                label={label ? label : ''}
-                disabled={false}
-                placeholder={placeholder ? placeholder : ''}
-                value={inputValue}
-                onChange={handleTextFieldChange}
-                className={`${className} 
-               
-               ${isTextFieldModified ? 'modified' : ''}`}
-              />
-            </div>
-          )}
-          <div className="ff-icon-container">
-            {confirmIcon && (
-              <Icon
-                color="var(--label-edit-confirm-icon)"
-                height={20}
-                width={20}
-                name={confirmIcon.name}
-                disabled={disabled}
-                className={`${
-                  disabled ? 'disabled-confirm-icon' : 'confirm-icon'
-                }`}
-                onClick={handleConfirm}
-              />
-            )}
-            {cancelIcon && (
-              <Icon
-                color="var(--label-edit-cancel-icon)"
-                height={12}
-                width={20}
-                name={cancelIcon.name}
-                className="cancel-icon"
-                onClick={handleCancel}
-                ref={cancelRef}
-              />
-            )}
-          </div>
-        </div>
-      ) : (
-        <Tooltip
-          title={tooltip?.tooltipTitle ? tooltip?.tooltipTitle : ''}
-          placement={'bottom'}
-        >
-          {showText && (
-            <span
-              className="display-text"
-              onDoubleClick={handleDoubleClick}
-              role="button"
-              onClick={handleClick}
-            >
-              <HighlightText text={inputValue} highlight={highlightText} />
-            </span>
-          )}
-        </Tooltip>
-      )}
-      {showError && isEditing && (
-        <Typography as="p" fontSize={8} className="error-text">
-          {showError}
-        </Typography>
-      )}
-    </div>
-  );
-};
-
-export default LabelEditTextField;

package/src/components/LabelEditTextField/index.ts

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

package/src/components/LabelEditTextField/types.ts

@@ -1,51 +0,0 @@
-export interface IconProps {
-  /** Name of the icon to be displayed. */
-  name: string;
-  /** Optional click handler function for the icon. */
-  onClick?: () => void;
-}
-export interface DropdownOption {
-  /** Unique identifier for the dropdown option. */
-  id: number;
-  /** Value associated with the dropdown option. */
-  value: string;
-  /** Label displayed for the dropdown option. */
-  label: string;
-}
-export interface LabelEditTextFieldTypes {
-  /** Label text displayed above the input field. */
-  label?: string;
-  /** Initial text displayed in the input field. */
-  text?: string;
-  showText?: boolean;
-  /** Text to be highlighted within the displayed text, if provided. */
-  highlightText?: string;
-  /** Custom error message to be displayed, if applicable. */
-  customError?: string;
-  /** Confirm icon properties including icon name and click handler. */
-  confirmIcon?: IconProps;
-  /** Cancel icon properties including icon name and click handler. */
-  cancelIcon?: IconProps;
-  /** Type of input field - standard text field or text field with a dropdown. */
-  variant?: 'textFieldWithDropdown' | 'textField';
-  /** Array of dropdown options used if the dropdown variant is selected. */
-  dropdownData?: DropdownOption[];
-  /** Width of the input field component. */
-  width?: string;
-  /** Height of the input field component. */
-  height?: string;
-  /** Function called when confirming input changes, with input and dropdown values as arguments. */
-  confirmAction?: (inputValue: string, dropdownValue: string) => void;
-  isOpen?: boolean;
-  /**for conditionally handle custom error */
-  customErrorCondition?: boolean;
-  placeholder?: string;
-  onClick?: () => void;
-  /** Function called when every input character got changed */
-  onInputChange?: (newInputValue: string) => void;
-  className?: string;
-  tooltip?: {
-    tooltipTitle?: string;
-    tooltipPlacement?: string;
-  };
-}

package/src/components/LazyLoad/LazyLoad.d.ts

@@ -1,3 +0,0 @@
-declare module 'LazyLoad' {
-  export * from 'react-window';
-}

package/src/components/LazyLoad/LazyLoad.stories.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import LazyLoading from './LazyLoading';
-
-const meta: Meta = {
-  title: 'Components/LazyLoad',
-  component: LazyLoading,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: `
-        The \`LazyLoading\` component is designed to optimize performance by only rendering the necessary parts of a large dataset that are visible within the viewport.
-        This component is particularly useful for applications that handle a significant amount of content, such as image galleries or infinite scrolling lists.
-
-        LazyLoad works by only rendering part of a large data set (just enough to fill the viewport). This helps address some common performance bottlenecks:
-
-          i) It reduces the amount of work (and time) required to render the initial view and to process updates. \n
-          ii) It reduces the memory footprint by avoiding over-allocation of DOM nodes.`,
-        story:
-          'This is a description with [library](https://www.npmjs.com/package/react-window) to an external website.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof LazyLoading>;
-
-export const Primary: Story = {
-  render: () => <LazyLoading />,
-};
-
-export default meta;

package/src/components/LazyLoad/LazyLoad.ts

@@ -1,2 +0,0 @@
-import * as LazyLoad from 'react-window';
-export default LazyLoad;

package/src/components/LazyLoad/LazyLoading.tsx

@@ -1,28 +0,0 @@
-import React, { ComponentType } from 'react';
-import LazyLoad from './LazyLoad';
-const { FixedSizeList: _FixedSizeList } = LazyLoad;
-
-const FixedSizeList = _FixedSizeList as unknown as ComponentType<{
-  height: number;
-  itemCount: number;
-  itemSize: number;
-  width: number;
-  children: (props: { index: number; style: React.CSSProperties }) => JSX.Element;
-}>;
-const Row = ({
-  index,
-  style,
-}: {
-  index: number;
-  style: React.CSSProperties;
-}) => <div style={style}>Row {index}</div>;
-
-const LazyLoading = () => {
-  return (
-    <FixedSizeList height={300} itemCount={100000} itemSize={30} width={400}>
-      {Row}
-    </FixedSizeList>
-  );
-};
-
-export default LazyLoading;

package/src/components/LazyLoad/index.ts

@@ -1 +0,0 @@
-export * from './LazyLoad';

package/src/components/MachineInputField/MachineInputField.stories.tsx

@@ -1,33 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import MachineInputField from './MachineInputField';
-import { MachineType } from './types';
-
-const meta: Meta<typeof MachineInputField> = {
-  title: 'Components/MachineInputField',
-  component: MachineInputField,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof MachineInputField>;
-
-// Sample data for the MachineInputField
-const sampleOptions: MachineType[] = [
-  { label: 'Local Environment', type: 'local' },
-  { label: '10.100.233.23', type: 'windows' },
-  { label: '121.25.333.344.2', type: 'Browserstack' },
-  { label: 'iphone 17 pro max', type: 'mac' },
-  { label: 'samsung galaxy s23', type: 'android' },
-];
-
-export const Primary: Story = {
-  args: {
-    width: '530px', // Example width
-    options: sampleOptions,
-    runCount: 1,
-  },
-};
-
-export default meta;

package/src/components/MachineInputField/MachineInputField.tsx

@@ -1,85 +0,0 @@
-import './MachineInputField.scss';
-import Typography from '../Typography';
-import Icon from '../Icon';
-import { MachineInputFieldProps, MachineType } from './types';
-import classNames from 'classnames';
-import { truncateText } from '../../utils/truncateText/truncateText';
-
-const MachineInputField = ({
-  width = '',
-  options = [],
-  runCount = 0,
-  className = '',
-  contentReverse = false,
-  onClick = () => {},
-  modalId = '',
-}: MachineInputFieldProps) => {
-  const getIcon: Record<MachineType['type'], string> = {
-    local: 'local',
-    browserstack: 'browserstack_icon',
-    sauceLabs: 'sause_lab',
-    lambdaTest: 'lambda_icon',
-    mac: 'mac_icon',
-    mac_icon: 'mac_icon',
-    android: 'android_icon',
-    linux: 'linux',
-    'google chrome': 'chrome_icon',
-    'mozilla firefox': 'fire_fox',
-    'microsoft edge': 'edge',
-    'internet explorer': 'internet_explorer',
-    safari: 'safari_icon',
-    opera: 'opera',
-    windows: 'windows',
-  };
-
-  return (
-    <div
-      id={modalId}
-      style={{ width: width }}
-      className={classNames('ff-machine-input-field-wrapper', className)}
-      onClick={() => onClick()}
-    >
-      <Typography
-        as="span"
-        color="var(--ff-machine-input-field-text-color)"
-        fontSize={8}
-        textAlign="center"
-        className="ff-machine-input-label"
-      >
-        Run {runCount}
-      </Typography>
-
-      <div
-        className={classNames('ff-machine-input-field', {
-          'ff-machine-input-field-reverse': contentReverse,
-        })}
-      >
-        {options.map(({ label, type = 'local' }) => (
-          <div
-            key={type}
-            className={classNames('ff-machine-icon-text-wrapper', {
-              'ff-machine-icon-text-wrapper-reverse': contentReverse,
-            })}
-          >
-            <Icon
-              name={getIcon[type?.toLowerCase()] || 'local'}
-              className="ff-machine-icon"
-            />
-            <Typography
-              className={classNames('ff-machine-text', {
-                'ff-machine-text-reverse': contentReverse,
-              })}
-              color="var(--ff-machine-input-field-text-color)"
-            >
-              {truncateText(label, 15)}
-            </Typography>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-MachineInputField.displayName = 'MachineInputField';
-
-export default MachineInputField;

package/src/components/MachineInputField/index.ts

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

package/src/components/MachineInputField/types.ts

@@ -1,15 +0,0 @@
-
-export interface MachineType {
-  type: string;
-  label: string;
-}
-
-export interface MachineInputFieldProps {
-  width: string;
-  options: MachineType[];
-  runCount: number;
-  className?: string;
-  contentReverse?: boolean;
-  onClick?: () => void;
-  modalId?: string;
-}