pixel-react 1.10.15 → 1.10.16

package/src/components/EditTextField/EditTextField.stories.tsx

@@ -1,127 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import EditTextField from './EditTextField';
-import '../../assets/styles/_colors.scss';
-import './EditTextField.scss';
-import React, { useState } from 'react';
-
-const meta: Meta<typeof EditTextField> = {
-  title: 'Components/EditTextField',
-  component: EditTextField,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof EditTextField>;
-
-export const textFieldWithLabel: Story = {
-  render: () => {
-    const [customError, setCustomError] = useState<string>('');
-
-    const handleConfirmAction = (inputValue: string) => {
-      setCustomError(inputValue);
-    };
-    return (
-      <EditTextField
-        text="Verify The Function Of Categories For"
-        label="Add Module"
-        customError={customError} // Updated to use state
-        confirmIcon={{
-          name: 'update_icon',
-          onClick: () => {},
-          color: 'var(--label-edit-confirm-icon)',
-          height: 20,
-          width: 20,
-        }}
-        cancelIcon={{
-          name: 'close',
-          onClick: () => {},
-          color: 'var(--label-edit-cancel-icon)',
-          height: 16,
-          width: 16,
-        }}
-        width="300px"
-        height="22px"
-        confirmAction={handleConfirmAction}
-        customErrorCondition={false}
-      />
-    );
-  },
-};
-
-export const textFieldWithOutLabel: Story = {
-  render: () => {
-    const handleConfirmAction = (inputValue: string) => {
-      //DEMO: we are getting that value from LabelEditTextField
-      console.info('Confirmed input value:', inputValue);
-    };
-    return (
-      <EditTextField
-        text="Verify The Function Of Categories For" //it might be state
-        confirmIcon={{
-          name: 'update_icon',
-          onClick: () => {},
-          color: 'var(--label-edit-confirm-icon)',
-          height: 20,
-          width: 20,
-        }}
-        cancelIcon={{
-          name: 'close',
-          onClick: () => {},
-          color: 'var(--label-edit-cancel-icon)',
-          height: 16,
-          width: 16,
-        }}
-        width="300px"
-        height="22px"
-        confirmAction={handleConfirmAction}
-        customErrorCondition={false}
-      />
-    );
-  },
-};
-export const openTextField: Story = {
-  render: () => {
-    const handleConfirmAction = (inputValue: string) => {
-      //DEMO: we are getting that value from LabelEditTextField
-      console.info('Confirmed input value:', inputValue);
-    };
-    let demoText = 'Verify The Function Of Categories For';
-    return (
-      <EditTextField
-        text={demoText} //it might be state
-        confirmIcon={{
-          name: 'update_icon',
-          onClick: () => {},
-          color: 'yellow',
-          height: 20,
-          width: 20,
-        }}
-        cancelIcon={{
-          name: 'close',
-          onClick: () => {},
-          color: 'yellow',
-          height: 16,
-          width: 16,
-        }}
-        editIcon={{
-          name: 'close',
-          onClick: () => {},
-          color: 'yellow',
-          height: 16,
-          width: 16,
-        }}
-        width="200px"
-        height="50px"
-        isOpen={true}
-        confirmAction={handleConfirmAction}
-        customError="max char 10"
-        customErrorCondition={demoText.length > 10}
-        onClick={() => {}}
-      />
-    );
-  },
-};
-
-export default meta;

package/src/components/EditTextField/EditTextField.tsx

@@ -1,175 +0,0 @@
-import React, { useState, useRef, FC } from 'react';
-import './EditTextField.scss';
-import { LabelEditTextFieldTypes } from './types';
-import Typography from '../Typography';
-import HighlightText from '../HighlightText';
-import Icon from '../Icon';
-import Tooltip from '../Tooltip';
-import { capitalize } from '../../utils/capitalize/capitalize';
-import Input from '../Input/Input';
-
-const getErrorMessage = (
-  inputValue: string,
-  text: string,
-  customError?: string,
-  customErrorCondition?: boolean
-): string => {
-  if (inputValue === text) {
-    return 'No changes were made.';
-  }
-  if (!inputValue) {
-    return 'Text is required';
-  }
-  if (inputValue.length < 3) {
-    return 'Please enter at least 3 characters.';
-  }
-  if (customErrorCondition) {
-    return customError ?? '';
-  }
-  return '';
-};
-
-const EditTextField: FC<LabelEditTextFieldTypes> = ({
-  label,
-  text,
-  highlightText,
-  customError,
-  customErrorCondition = false,
-  confirmIcon,
-  cancelIcon,
-  editIcon,
-  dropdownData = [],
-  // width = '',
-  // height = '',
-  isOpen = false,
-  confirmAction,
-  onClick,
-  nameTooltipTitle,
-}) => {
-  const [isEditing, setIsEditing] = useState(isOpen ?? false);
-  const [inputValue, setInputValue] = useState(text);
-  const [dropdownValue, setDropdownValue] = useState(
-    dropdownData[0]?.value ?? ''
-  );
-  const [showError, setShowError] = useState('');
-  const [isTextFieldModified, setIsTextFieldModified] = useState(false);
-  const isThrowingError = showError && isEditing ? true : false;
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const cancelRef = useRef<HTMLDivElement | null>(null);
-
-  const handleEditButtonClick = () => {
-    setIsEditing(true);
-    setShowError('');
-  };
-
-  const handleConfirm = () => {
-    const errorMessage = getErrorMessage(
-      inputValue,
-      text,
-      customError,
-      customErrorCondition
-    );
-
-    if (errorMessage && isEditing) {
-      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>) => {
-    setInputValue(e.target.value);
-    setIsTextFieldModified(true);
-    setShowError('');
-  };
-
-  return (
-    <div className="ff-label-edit-text-field" ref={containerRef}>
-      {isEditing ? (
-        <div className="ff-label-text-field">
-          <div className="ff-label-text-field-without-dropdown">
-            <Input
-              name="input"
-              label={label ? label : ''}
-              disabled={false}
-              error={isThrowingError}
-              placeholder="Enter your name"
-              value={inputValue}
-              onChange={handleTextFieldChange}
-              className={`
-                
-               ${isTextFieldModified ? 'modified' : ''}`}
-              type="text"
-            />
-          </div>
-          <div className="ff-icon-container">
-            {confirmIcon && (
-              <Icon
-                color={
-                  confirmIcon?.color ?? 'var(--default-confirm-icon-color)'
-                }
-                height={confirmIcon?.height ?? 20}
-                width={confirmIcon?.width ?? 20}
-                name={confirmIcon?.name ?? 'default-confirm-icon'}
-                className={confirmIcon?.className ?? 'default-confirm-class'}
-                onClick={handleConfirm}
-              />
-            )}
-            {cancelIcon && (
-              <Icon
-                color={cancelIcon?.color ?? 'var(--label-edit-cancel-icon)'}
-                height={cancelIcon?.height ?? 12}
-                width={cancelIcon?.width ?? 20}
-                name={cancelIcon?.name ?? 'default-cancel-icon'}
-                className={cancelIcon?.className ?? 'cancel-icon'}
-                onClick={handleCancel}
-                ref={cancelRef}
-              />
-            )}
-          </div>
-        </div>
-      ) : (
-        <div className="display-text-container">
-          {nameTooltipTitle ? (
-            <Tooltip title={nameTooltipTitle}>
-              <span className="display-text" onClick={onClick}>
-                <HighlightText text={inputValue} highlight={highlightText} />
-              </span>
-            </Tooltip>
-          ) : (
-            <span className="display-text" onClick={onClick}>
-              <HighlightText text={inputValue} highlight={highlightText} />
-            </span>
-          )}
-          <Tooltip title={capitalize(editIcon?.name || '') ?? 'Edit'}>
-            <Icon
-              color={editIcon?.color ?? 'var(--label-edit-cancel-icon)'}
-              height={editIcon?.height ?? 20}
-              width={editIcon?.width ?? 20}
-              name={editIcon?.name ?? 'edit'}
-              className={editIcon?.className ?? 'edit-icon'}
-              onClick={handleEditButtonClick}
-            />
-          </Tooltip>
-        </div>
-      )}
-      {showError && isEditing && (
-        <Typography as="p" fontSize={8} className="error-text">
-          {showError}
-        </Typography>
-      )}
-    </div>
-  );
-};
-
-export default EditTextField;

package/src/components/EditTextField/index.ts

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

package/src/components/EditTextField/types.ts

@@ -1,55 +0,0 @@
-export interface IconProps {
-  /** Name of the icon to be displayed. */
-  name: string;
-  /** Optional click handler function for the icon. */
-  onClick?: () => void;
-  /** Optional color for the icon. */
-  color?: string;
-  /** Optional height for the icon. */
-  height?: number;
-  /** Optional width for the icon. */
-  width?: number;
-  /** Optional className for the icon. */
-  className?: string;
-}
-
-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;
-  /** 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;
-  editIcon?: 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;
-  onClick?: () => void;
-  nameTooltipTitle?: string;
-}

package/src/components/Editor/Editor.stories.tsx

@@ -1,54 +0,0 @@
-// EditorComponent.stories.tsx
-import { Meta, StoryObj } from '@storybook/react';
-import Editor from './Editor';
-import { EditorProps } from './types';
-import { variableList } from './constants';
-import { useState } from 'react';
-
-const meta: Meta<EditorProps> = {
-  title: 'Components/Editor',
-  component: Editor,
-  parameters: {
-    layout: 'padded',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    language: {
-      control: {
-        type: 'select',
-        options: ['javascript', 'html', 'json', 'plaintext', 'xml'],
-      },
-      description: 'Select the content type for the editor',
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<EditorProps>;
-
-export const Default: Story = {
-  render: (args) => {
-    const [value, setValue] = useState('// Start typing your code here');
-
-    const handleChange = (newValue: string | undefined): void => {
-      setValue(newValue || '');
-    };
-
-    return (
-      <Editor
-        {...args}
-        value={value}
-        setValue={setValue}
-        handleChange={handleChange}
-      />
-    );
-  },
-  args: {
-    language: 'javascript',
-    width: '100%',
-    height: '90vh',
-    readOnly: false,
-    variableOptionsList: variableList,
-  },
-};

package/src/components/Editor/Editor.tsx

@@ -1,250 +0,0 @@
-import {
-  useRef,
-  useState,
-  useEffect,
-  forwardRef,
-  useImperativeHandle,
-} from 'react';
-import MonacoEditor, { OnMount } from '@monaco-editor/react';
-import { js as beautifyJS, html as beautifyHTML } from 'js-beautify';
-import { dropdownPositionType, EditorProps, DyanamicObj } from './types';
-import './Editor.scss';
-import VariableDropdown from './VariableDropdown';
-
-const Editor = forwardRef<any, EditorProps>(
-  (
-    {
-      width,
-      height,
-      readOnly,
-      value = '',
-      handleChange,
-      setValue,
-      variableOptionsList = [],
-      language = 'json',
-      theme = 'light',
-    },
-    ref
-  ) => {
-    const editorRef = useRef<Parameters<OnMount>[0] | null>(null);
-    const decorationsRef = useRef<string[]>([]);
-    const [currentLine, setCurrentLine] = useState<number>(0);
-    const [showDropdown, setShowDropdown] = useState<boolean>(false);
-    const [dropdownPosition, setDropdownPosition] =
-      useState<dropdownPositionType>({ top: 0, left: 0 });
-
-    const handleEditorDidMount: OnMount = (editor: any) => {
-      editorRef.current = editor;
-
-      editor.onDidChangeCursorPosition((e: any) => {
-        setCurrentLine(e.position.lineNumber);
-      });
-
-      editor.onDidChangeModelContent(() => {
-        const content = editor.getValue();
-        setValue(content);
-
-        const position = editor.getPosition();
-        const model = editor.getModel();
-        if (position && model) {
-          const currentLineContent = model.getLineContent(position.lineNumber);
-          if (currentLineContent[position.column - 2] === '$') {
-            const visiblePosition = editor.getScrolledVisiblePosition(position);
-            if (visiblePosition) {
-              setDropdownPosition({
-                top: visiblePosition.top,
-                left: visiblePosition.left,
-              });
-              setShowDropdown(true);
-            }
-          } else {
-            setShowDropdown(false);
-          }
-        }
-      });
-    };
-
-    useEffect(() => {
-      if (editorRef.current && currentLine) {
-        const decorations = [
-          {
-            range: {
-              startLineNumber: currentLine,
-              startColumn: 1,
-              endLineNumber: currentLine,
-              endColumn: 1,
-            },
-            options: {
-              isWholeLine: true,
-              className: 'current-line-background',
-            },
-          },
-        ];
-
-        decorationsRef.current = editorRef.current.deltaDecorations(
-          decorationsRef.current,
-          decorations
-        );
-      }
-    }, [currentLine]);
-
-    const handleSelectSuggestion = (suggestion: string, type: string) => {
-      if (editorRef.current) {
-        const editor = editorRef.current;
-        const position = editor.getPosition();
-        if (position) {
-          editor.executeEdits('', [
-            {
-              range: {
-                startLineNumber: position.lineNumber,
-                startColumn: position.column,
-                endLineNumber: position.lineNumber,
-                endColumn: position.column,
-              },
-              text: `{${type}_${suggestion}}`,
-            },
-          ]);
-          setShowDropdown(false);
-        }
-      }
-    };
-
-    const handleSelectVariable = (option: DyanamicObj) => {
-      handleSelectSuggestion(
-        option?.name,
-        option?.type === 'GLOBAL'
-          ? 'GV'
-          : option?.type === 'LOCAL'
-          ? 'LV'
-          : 'PEV'
-      );
-    };
-
-    const mapLanguageToContentType = (language: string | undefined): string => {
-      switch (language) {
-        case 'javascript':
-        case 'typescript':
-          return 'javascript';
-        case 'json':
-          return 'json';
-        case 'html':
-          return 'html';
-        case 'xml':
-          return 'xml';
-        default:
-          return 'plain text';
-      }
-    };
-
-    const beautifyContent = (content: string, language: string): string => {
-      switch (language) {
-        case 'json':
-          return beautifyJS(content, {
-            indent_size: 4,
-            indent_char: ' ',
-            max_preserve_newlines: 5,
-            preserve_newlines: true,
-            keep_array_indentation: true,
-            break_chained_methods: true,
-            brace_style: 'collapse',
-            space_before_conditional: true,
-            unescape_strings: true,
-            jslint_happy: true,
-            end_with_newline: true,
-            wrap_line_length: 0,
-            comma_first: true,
-            e4x: true,
-            indent_empty_lines: true,
-          });
-        case 'javascript':
-          return beautifyJS(content, {
-            indent_size: 4,
-            indent_char: ' ',
-            max_preserve_newlines: 5,
-            preserve_newlines: true,
-            keep_array_indentation: true,
-            break_chained_methods: true,
-            brace_style: 'collapse',
-            space_before_conditional: true,
-            unescape_strings: true,
-            jslint_happy: true,
-            end_with_newline: true,
-            wrap_line_length: 0,
-            comma_first: true,
-            e4x: true,
-            indent_empty_lines: true,
-          });
-        case 'html':
-          return beautifyHTML(content, {
-            indent_size: 4,
-            indent_char: ' ',
-            max_preserve_newlines: 5,
-            preserve_newlines: true,
-            end_with_newline: true,
-            wrap_line_length: 0,
-            indent_empty_lines: true,
-          });
-        case 'xml':
-          return beautifyHTML(content, {
-            indent_size: 4,
-            indent_char: ' ',
-            max_preserve_newlines: 5,
-            preserve_newlines: true,
-            end_with_newline: true,
-            wrap_line_length: 0,
-            indent_empty_lines: true,
-          });
-        case 'plain text':
-          return content;
-        default:
-          return content;
-      }
-    };
-
-    // Expose editorRef and helper functions to parent via forwarded ref
-    useImperativeHandle(ref, () => ({
-      getEditorInstance: () => editorRef.current,
-      beautify: () => {
-        if (editorRef.current) {
-          const content = editorRef.current.getValue();
-          const lang = editorRef.current.getModel()?.getLanguageId();
-          const language = mapLanguageToContentType(lang);
-          const beautifiedContent = beautifyContent(content, language);
-          editorRef.current.setValue(beautifiedContent);
-        }
-      },
-    }));
-
-    return (
-      <div style={{ width, height }} className="ff-editor-container">
-        <MonacoEditor
-          height={height}
-          width={width}
-          language={language}
-          value={value}
-          options={{
-            lineNumbers: 'on',
-            wordWrap: 'on',
-            autoClosingBrackets: 'always',
-            scrollBeyondLastLine: false,
-            readOnly,
-          }}
-          onMount={handleEditorDidMount}
-          onChange={(newValue, event) => handleChange(newValue, event)}
-          theme={theme}
-        />
-        {showDropdown && dropdownPosition && (
-          <VariableDropdown
-            position="absolute"
-            width="300px"
-            optionsList={variableOptionsList}
-            onSelectVariable={handleSelectVariable}
-            dropdownPosition={dropdownPosition}
-          />
-        )}
-      </div>
-    );
-  }
-);
-
-export default Editor;