pixel-priya 0.0.1

package/src/components/LabelEditTextField/LabelEditTextField.tsx

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

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

package/src/components/LabelEditTextField/types.ts

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

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

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

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

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

package/src/components/LazyLoad/LazyLoading.tsx

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

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

package/src/components/MachineInputField/MachineInputField.scss

@@ -0,0 +1,59 @@
+.ff-machine-input-field-wrapper {
+  min-width: 100px;
+  height: 32px;
+  position: relative;
+  cursor: pointer;
+
+  .ff-machine-input-field,
+  .ff-machine-input-field-reverse {
+    height: 100%;
+    width: 100%;
+    border: 1px solid var(--ff-machine-input-field-border-color);
+    padding: 0 8px 0 0;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &:hover {
+      border-color: var(--ff-connecting-branch-color);
+    }
+
+    .ff-machine-icon-text-wrapper,
+    .ff-machine-icon-text-wrapper-reverse {
+      display: flex;
+      align-items: center;
+
+      .ff-machine-icon {
+        margin-left: 4px;
+      }
+
+      .ff-machine-text-reverse,
+      .ff-machine-text {
+        max-width: fit-content;
+      }
+
+      .ff-machine-text-reverse {
+        direction: ltr;
+      }
+    }
+
+    .ff-machine-icon-text-wrapper-reverse {
+      flex-direction: row-reverse;
+    }
+  }
+
+  .ff-machine-input-field-reverse {
+    flex-direction: row-reverse;
+  }
+
+  .ff-machine-input-label {
+    position: absolute;
+    top: -6px;
+    left: 8px;
+    background-color: var(--ff-machine-input-field-label-color);
+    border-radius: 4px;
+    padding: 1px 2px;
+    height: 12px;
+  }
+}

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

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

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

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

package/src/components/MachineInputField/types.ts

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

package/src/components/MenuOption/MenuOption.scss

@@ -0,0 +1,97 @@
+@use '../../assets/styles/fonts';
+
+.ff-menu-option-container {
+  cursor: pointer;
+  position: relative;
+  .ff-icon-label {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    .ff-menuicon-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      &:hover {
+        background-color: var(--hover-color);
+      }
+      &.dark {
+        background-color: var(--brand-color);
+        &:hover {
+          background-color: var(--menu-variant-dark-icon-color);
+          svg {
+            path {
+              fill: var(--brand-color);
+            }
+          }
+        }
+      }
+    }
+
+    .ff-menuicon-container-clicked {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: var(--brand-color);
+      cursor: pointer;
+      &:hover {
+        background-color: var(--brand-color);
+      }
+      &.dark {
+        background-color: var(--menu-variant-dark-icon-color);
+      }
+    }
+  }
+}
+
+.ff-option-card {
+  position: absolute;
+  margin: 4px;
+  border: 1px solid var(--option-card-border-color);
+  background: var(--option-card-bg-color);
+  overflow: hidden;
+  min-height: 32px;
+  min-width: 110px;
+  width: max-content;
+  border-radius: 4px;
+  &--primary {
+    background: var(--brand-color);
+    color: var(--primary-button-text-color);
+    svg {
+      path {
+        fill: var(--primary-icon-color);
+      }
+    }
+    :hover {
+      color: var(--brand-color);
+      svg {
+        path {
+          fill: var(--brand-color);
+        }
+      }
+    }
+  }
+  .ff-options {
+    @extend .fontSm;
+    cursor: pointer;
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    padding: 4px;
+    gap: 8px;
+    &:hover {
+      background-color: var(--hover-color);
+    }
+    label {
+      cursor: pointer;
+    }
+  }
+
+  .ff-disable-option {
+    opacity: 0.5;
+    cursor: no-drop;
+    label {
+      cursor: no-drop;
+    }
+  }
+}