pixel-react 1.10.15 → 1.10.16

package/src/components/VariableInput/VariableInput.tsx

@@ -1,352 +0,0 @@
-import classNames from 'classnames';
-import React, { useState, useRef, useEffect } from 'react';
-import './VariableInput.scss';
-import { VariableInputProps } from './types';
-import Typography from '../Typography';
-
-interface ParsedPart {
-  text: string;
-  textType: string;
-}
-
-const VariableInput = ({
-  type = 'url',
-  name = '',
-  label,
-  disabled = false,
-  required = false,
-  placeholder = '',
-  value = '',
-  error,
-  className = '',
-  onChange,
-  onKeyDown,
-  onBlur,
-  onFocus,
-  list=[],
-  ...props
-}: VariableInputProps) => {
-  const [inputValue, setInputValue] = useState<string>('');
-  const [cursorPosition, setCursorPosition] = useState<number>(0);
-  const [isAddingText, setIsAddingText] = useState<boolean>(true);
-  const [suggestions, setSuggestions] = useState<string[]>([]);
-  const [showSuggestions, setShowSuggestions] = useState<boolean>(false);
-  const contentEditableRef = useRef<HTMLDivElement>(null);
-  const undoStack = useRef<string[]>([]);
-  const redoStack = useRef<string[]>([]);
-
-  useEffect(() => {
-    if (value) {
-      setInputValue(value);
-    }
-  }, [value]);
-
-  const parseUrl = (url: string): ParsedPart[] => {
-    const regex = /\$\{(\w+)\}/g; //checking the text variable or not
-    const parts: ParsedPart[] = [];
-    let lastIndex = 0;
-    let match;
-
-    while ((match = regex.exec(url)) !== null) {
-      const [fullMatch, variable] = match;
-      const isInList = list?.includes(variable ?? '');
-
-      if (match.index > lastIndex) {
-        parts.push({ text: url.slice(lastIndex, match.index), textType: 'normal' });
-      }
-
-      parts.push({
-        text: fullMatch,
-        textType: isInList ? 'variable' : 'nonVariable',
-      });
-
-      lastIndex = match.index + fullMatch.length;
-    }
-
-    if (lastIndex < url.length) {
-      parts.push({ text: url.slice(lastIndex), textType: 'normal' });
-    }
-
-    return parts;
-  };
-
-  const updateContentEditable = () => {
-    const parsedParts = parseUrl(inputValue);
-    const contentEditableElement = contentEditableRef.current;
-
-    if (contentEditableElement) {
-      contentEditableElement.innerHTML = parsedParts
-        .map((part) => {
-          const varClassName = classNames({
-            ['ff_var_red']: part.textType === 'nonVariable',
-            ['ff_var_green']: part.textType === 'variable',
-            ['ff_var_def_textType']:
-              part.textType !== 'nonVariable' && part.textType !== 'variable',
-          });
-
-          return `<Typography class="${varClassName}">${part.text}</Typography>`;
-        })
-        .join('');
-      restoreCursorPosition(contentEditableElement);
-    }
-  };
-
-  const restoreCursorPosition = (element: HTMLDivElement) => {
-    const selection = window.getSelection();
-    const range = document.createRange();
-    const textNodes = getTextNodes(element);
-
-    if (textNodes.length > 0) {
-      const lastNode = textNodes[textNodes.length - 1];
-      const positionAdjustment = isAddingText ? 1 : -1;
-
-      const newOffset = Math.max(
-        0,
-        Math.min(
-          cursorPosition + positionAdjustment,
-          (lastNode as Text).length || 0
-        )
-      );
-      if (lastNode) {
-        range.setStart(lastNode, newOffset);
-      }
-      range.collapse(true);
-    } else {
-      range.selectNodeContents(element);
-      range.collapse(false);
-    }
-
-    selection?.removeAllRanges();
-    selection?.addRange(range);
-    element.focus();
-  };
-
-  const getTextNodes = (element: HTMLDivElement): Node[] => {
-    const nodes: Node[] = [];
-    const walker = document.createTreeWalker(
-      element,
-      NodeFilter.SHOW_TEXT,
-      null
-    );
-    let node;
-    while ((node = walker.nextNode())) {
-      nodes.push(node);
-    }
-    return nodes;
-  };
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const text = e.currentTarget.innerText.split('\n').join('');
-    setInputValue(text);
-    undoStack.current.push(text);
-    redoStack.current = [];
-
-    if (required && !text.trim()) {
-      e.currentTarget.classList.add('ff_required_empty');
-    } else {
-      e.currentTarget.classList.remove('ff_required_empty');
-    }
-
-    if (type === 'url') {
-      const urlPattern = new RegExp(
-        '^(https?://)?([\\w.-]+)\\.([a-zA-Z]{2,})(/([\\w.-]+|\\$\\{[\\w.-]+\\}))*/?$'
-      );
-
-      if (!urlPattern.test(text)) {
-        e.currentTarget.classList.add('ff_invalid_input');
-      } else {
-        e.currentTarget.classList.remove('ff_invalid_input');
-        e.currentTarget.classList.remove('ff_required_empty');
-      }
-    } else {
-      e.currentTarget.classList.add('ff_invalid_input');
-    }
-
-    if (onChange) {
-      onChange(text);
-    }
-
-    const match = /\$\{(\w*)$/.exec(text);
-    if (match) {
-      const query = match[1];
-      const filteredSuggestions = list?.filter((item: string) =>
-        item.startsWith(query ?? '')
-      );
-      setSuggestions(filteredSuggestions);
-      setShowSuggestions(true);
-    } else {
-      setShowSuggestions(false);
-    }
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-    const cursorPos = getCursorPosition();
-    setCursorPosition(cursorPos);
-    setIsAddingText(true);
-
-    const currentText = contentEditableRef.current
-      ? contentEditableRef.current.textContent || ''
-      : '';
-
-    if (e.key === 'Backspace' || e.key === 'Delete') {
-      setIsAddingText(false);
-      if (!currentText.trim()) {
-        e.preventDefault();
-        if (contentEditableRef.current) {
-          contentEditableRef.current.textContent = '';
-          contentEditableRef.current.blur();
-        }
-        return;
-      }
-    }
-
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      insertTextAtCursor('\n');
-    } else if (e.ctrlKey && e.key === 'z') {
-      e.preventDefault();
-      undo();
-    } else if (e.ctrlKey && e.key === 'y') {
-      e.preventDefault();
-      redo();
-    }
-
-    if (onKeyDown) {
-      onKeyDown(e as React.KeyboardEvent<HTMLInputElement>);
-    }
-  };
-
-  const getCursorPosition = (): number => {
-    const selection = window.getSelection();
-    if (selection && selection.rangeCount > 0) {
-      const range = selection.getRangeAt(0);
-      return range.startOffset;
-    }
-    return 0;
-  };
-
-  const undo = () => {
-    if (undoStack.current.length > 1) {
-      redoStack.current.push(undoStack.current.pop()!);
-      setInputValue(undoStack.current[undoStack.current.length - 1] ?? '');
-      setIsAddingText(false);
-    }
-  };
-
-  const redo = () => {
-    if (redoStack.current.length > 0) {
-      const textToRedo = redoStack.current.pop()!;
-      setInputValue(textToRedo);
-      undoStack.current.push(textToRedo);
-      setIsAddingText(true);
-    }
-  };
-
-  const insertTextAtCursor = (text: string) => {
-    const selection = window.getSelection();
-    const range = selection?.getRangeAt(0);
-    if (range) {
-      range.deleteContents();
-      const newTextNode = document.createTextNode(text);
-      range.insertNode(newTextNode);
-
-      const lineBreak = document.createElement('br');
-      range.insertNode(lineBreak);
-
-      range.setStartAfter(lineBreak);
-      range.collapse(true);
-
-      selection?.removeAllRanges();
-      selection?.addRange(range);
-      contentEditableRef.current?.focus();
-      setInputValue(contentEditableRef.current?.innerText || '');
-    }
-  };
-
-  const handleSuggestionClick = (suggestion: string) => {
-    const newText = inputValue.replace(/\$\{\w*$/, `\$\{${suggestion}`);
-    setInputValue(newText);
-    setShowSuggestions(false);
-  };
-
-  useEffect(() => {
-    updateContentEditable();
-  }, [inputValue]);
-
-  const inputClasses = classNames('ff_content_editable', {
-    ['ff_placeholder']: !inputValue,
-    ['ff_disabled']: disabled,
-    ['ff_required']: required,
-    ['ff_invalid_input']: error,
-  });
-
-  return (
-    <div className={'ff_variable_input_container'}>
-      {label && (
-        <label
-          htmlFor={name}
-          className={classNames('ff_label_container', {
-            ['ff_labelDanger']: error,
-          })}
-        >
-          {required && (
-            <Typography className={'ff_required_asterisk'}>*</Typography>
-          )}
-          <Typography
-            className={classNames('ff_input_label', {
-              ['ff_no_hover']: value,
-              ['ff_disabled_label']: disabled,
-              ['ff_danger_label']: error,
-            })}
-          >
-            {label}
-          </Typography>
-        </label>
-      )}
-      <div
-        id={name}
-        contentEditable={!disabled}
-        ref={contentEditableRef}
-        onInput={handleInputChange}
-        onKeyDown={handleKeyDown}
-        onFocus={(e) => {
-          e.currentTarget.style.outline = 'none';
-          if (onFocus) onFocus(e as React.FocusEvent<HTMLInputElement>);
-        }}
-        onBlur={(e) => {
-          e.currentTarget.style.outline = 'none';
-          if (onBlur) onBlur(e as React.FocusEvent<HTMLInputElement>);
-
-          if (required && !inputValue.trim()) {
-            e.currentTarget.classList.add('ff_required_empty');
-          } else {
-            e.currentTarget.classList.remove('ff_required_empty');
-          }
-        }}
-        className={inputClasses}
-        suppressContentEditableWarning
-        aria-required={required ? 'true' : 'false'}
-        data-name={name}
-        data-type={type}
-        data-placeholder={placeholder}
-        spellCheck={false}
-        {...props}
-      />
-      {showSuggestions && (
-        <ul className={'ff_suggestions'}>
-          {suggestions.map((suggestion) => (
-            <li
-              key={suggestion}
-              onClick={() => handleSuggestionClick(suggestion)}
-              className={'ff_suggestion_item'}
-            >
-              {suggestion}
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-};
-
-export default VariableInput;

package/src/components/VariableInput/index.ts

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

package/src/components/VariableInput/types.ts

@@ -1,56 +0,0 @@
-export interface VariableInputProps {
-  /**
-   * Name | name of the input field
-   */
-  name: string;
-  /**
-   * Label | field label to be displayed
-   */
-  label: string;
-  /**
-   * value | input field value
-   */
-  value: string | null;
-  /**
-   * type to set color/style of the input field
-   */
-  type: 'text' | 'password' | 'number' | 'email' | 'url' | 'time';
-  /**
-   * error | If true, error message will be displayed
-   */
-  error?: boolean;
-  /**
-   * to disable the input field
-   */
-  disabled?: boolean;
-  /**
-   * if true, input field will be mandatory
-   */
-  required?: boolean;
-  /**
-   * placeholder for the input field
-   */
-  placeholder?: string;
-  /**
-   * classnames to style the input field
-   */
-  className?: string;
-  /**
-   * onChange, onKeyDown, onBlur, onFocus actions
-   */
-  onChange?: (value: string) => void | undefined;
-
-  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-
-  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-
-  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-  /**
-   * id to select the input field uniquely
-   */
-  id?: string;
-  /**
-   * list of variables
-   */
-  list?: string[];
-}

package/src/components/variableSuggestionInputDropDown/OptionsDropdown.tsx

@@ -1,51 +0,0 @@
-import type { FC, ReactNode } from 'react';
-import { dynamicObject, OptionsDropdownProps } from './types';
-import './VariableSuggestionInputDropDown.scss';
-import Typography from '../Typography';
-import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-
-const OptionsDropdown:FC<OptionsDropdownProps> = ({
-    onSelectVariable,
-    dropdownPosition,
-    filteredOptions= [],
-    position = 'relative',
-    width = '100%',
-  }): ReactNode => {
-    return (
-      <div
-        className={`ff-variable-dropdown ${position}`}
-        style={
-          dropdownPosition
-            ? {
-                top: dropdownPosition.top + 30,
-                left: dropdownPosition.left - 30,
-                width,
-              }
-            : { width }
-        }
-      >
-        {!checkEmpty(filteredOptions)? filteredOptions?.map((option: dynamicObject): ReactNode => {
-          return (
-            <div
-              className="ff-variable-option"
-              onClick={() => onSelectVariable(option)}
-              key={option?.id}
-            >
-              <Typography as="span" fontSize={14}>
-                {option?.name}
-              </Typography>
-            </div>
-          );
-        }) : (
-          <div
-              className="ff-variable-option"
-            >
-              <Typography as='div' children='No Option' fontSize={14} />
-            </div>
-          
-        )}
-      </div>
-    );
-  };
-
-export default OptionsDropdown;

package/src/components/variableSuggestionInputDropDown/VariableSuggestionInputDropDown.stories.tsx

@@ -1,155 +0,0 @@
-import React, { useRef, useState } from 'react';
-import { Meta, StoryFn, StoryObj } from '@storybook/react';
-import VariableSuggestionInputDropDown from './VariableSuggestionInputDropDown';
-import { VariableSuggestionInputDropDownProps, dynamicObject } from './types';
-import { variableList } from '../Editor/constants';
-import CreateVariableSlider from '../CreateVariable/CreateVariableSlider';
-
-export default {
-  title: 'Components/VariableSuggestionInputDropDown',
-  component: VariableSuggestionInputDropDown,
-  args: {
-    label: 'Add Variables',
-    placeholder: 'Enter text',
-    variableList,
-    dropdownWidth: '100%',
-    variant: 'primary',
-  },
-  parameters: {
-    layout: 'centered',
-  },
-} as Meta<VariableSuggestionInputDropDownProps>;
-
-type Story = StoryObj<typeof VariableSuggestionInputDropDown>;
-
-const Template: StoryFn<VariableSuggestionInputDropDownProps> = (args) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [inputValue, setInputValue] = useState<string>('');
-  const [openCreateVariable, setOpenCreateVariable] = useState<boolean>(false);
-  const [variableName, setVariableName] = useState<string>('');
-  const [variableValue, setVariableValue] = useState<string>('');
-  const [selectedVariable, setSelectedVariable] = useState<dynamicObject>({
-    label: 'Local Variable',
-    value: 'LOCAL',
-  });
-  const [hideValue, setHideValue] = useState<boolean>(false);
-
-  return (
-    <>
-      <VariableSuggestionInputDropDown
-        {...args}
-        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-          setInputValue(event.target.value)
-        }
-        value={inputValue}
-        onCreateVariableClick={() => setOpenCreateVariable(true)}
-        ref={inputRef}
-        showAddVariableIcon
-      />
-      {openCreateVariable && (
-        <CreateVariableSlider
-          isOpen={openCreateVariable}
-          onClose={() => setOpenCreateVariable(false)}
-          variableName={variableName}
-          value={variableValue}
-          hideValue={hideValue}
-          handleSubmit={() => {
-            alert('Variable Created');
-          }}
-          onHideChange={(value) => {
-            setHideValue(value);
-          }}
-          onNameChange={(value) => {
-            setVariableName(value);
-          }}
-          onValueChange={(value) => setVariableValue(value)}
-          onVariableTypeChange={(option) => setSelectedVariable(option)}
-          selectedVariableType={selectedVariable}
-          variableTypesList={[
-            { label: 'Local Variable', value: 'LOCAL' },
-            { label: 'Global Variable', value: 'GLOBAL' },
-          ]}
-        />
-      )}
-    </>
-  );
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  onCreateVariableClick: () => alert('Create Variable clicked'),
-};
-
-export const WithInitialValue = Template.bind({});
-WithInitialValue.args = {
-  inputValue: 'Initial Text with $',
-  onCreateVariableClick: () => alert('Create Variable clicked'),
-};
-
-export const DropdownOnHash: Story = {
-  render: () => {
-    const [hashInputValue, setHashInputValue] =
-      useState<dynamicObject | null>();
-    const [value, setValue] = useState<string>('');
-    const testData = [
-      {
-        _id: '1',
-        name: 'File1.txt',
-        actualPath: '/documents/File1.txt',
-        searchKey: 'file1',
-        parentId: 'root',
-      },
-      {
-        _id: '2',
-        name: 'File2.doc',
-        actualPath: '/documents/File2.doc',
-        searchKey: 'file2',
-        parentId: 'root',
-      },
-      {
-        _id: '3',
-        name: 'Image1.png',
-        actualPath: '/images/Image1.png',
-        searchKey: 'image1',
-        parentId: 'folder1',
-      },
-      {
-        _id: '4',
-        name: 'Presentation.ppt',
-        actualPath: '/presentations/Presentation.ppt',
-        searchKey: 'presentation',
-        parentId: 'folder2',
-      },
-      {
-        _id: '5',
-        name: 'Spreadsheet.xlsx',
-        actualPath: '/spreadsheets/Spreadsheet.xlsx',
-        searchKey: 'spreadsheet',
-        parentId: 'folder3',
-      },
-      {
-        _id: '6',
-        name: 'Code.js',
-        actualPath: '/projects/Code.js',
-        searchKey: 'code',
-        parentId: 'folder4',
-      },
-    ];
-
-    return (
-      <>
-        <VariableSuggestionInputDropDown
-          label="Select Path Using #"
-          placeholder="Enter # to search files"
-          isHash
-          dataFiles={testData}
-          dropdownWidth="100%"
-          setHashInputValue={setHashInputValue}
-          hashInputValue={hashInputValue || {}}
-          value={value}
-          onChange={(e) => setValue(e.target.value)}
-        />
-      </>
-    );
-  },
-};