pixel-react-excel-sheet 1.2.0

package/src/components/Typography/types.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+
+export interface TypographyProps {
+  /**
+   * Font Weight
+   */
+  fontWeight?: 'regular' | 'medium' | 'semi-bold' | 'bold';
+
+  /**
+   * Font Size
+   */
+
+  fontSize?: number | string;
+
+  /**
+   * Line height
+   */
+
+  lineHeight?: string;
+
+  /**
+   * Color
+   */
+
+  color?: string;
+
+  /**
+   *  Text alignment
+   */
+  textAlign?: 'left' | 'right' | 'center' | 'justify';
+
+  /**
+   * For JSX elements
+   */
+  as?: keyof JSX.IntrinsicElements;
+  /**
+   * htmlFor attribute for element=label,
+   */
+  htmlFor?: string;
+  /**
+   * The content to display within the Typography component
+   */
+  children: React.ReactNode;
+  /**
+   * To add styles in Typography
+   */
+  className?: string;
+  /**
+   * To add letter spacing in Typography
+   */
+  letterSpacing?: string;
+  /**
+   * To add onClick function
+   */
+  onClick?: () => void;
+}

package/src/components/VariableInput/VariableInput.scss

@@ -0,0 +1,128 @@
+.ff_variable_input_container {
+  .ff_label_container {
+    display: flex;
+    align-items: center;
+    margin-bottom: 4px;
+
+    &.ff_danger_label {
+      .ff_input_label {
+        color: var(--error);
+      }
+
+      .ff_required_asterisk {
+        color: var(--error);
+      }
+    }
+  }
+
+  .ff_required_asterisk {
+    color: var(--input-error-text-color);
+    font-size: 1.1em;
+    margin-right: 4px;
+  }
+
+  .ff_input_label {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text-color);
+
+    &.ff_no_hover {
+      color: var(--toggle-disable-icon-color);
+    }
+
+    &.ff_disabled_label {
+      color: var(--toggle-disable-icon-color);
+      cursor: not-allowed;
+    }
+
+    &.ff_danger_label {
+      color: var(--error);
+    }
+  }
+
+  .ff_content_editable {
+    min-width: 8rem;
+    border: 1px solid var(--input-default-border-color);
+    padding: 8px;
+    min-height: 30px;
+    border-radius: 4px;
+    font-family: Arial, sans-serif;
+    font-size: 14px;
+    line-height: 20px;
+    transition: border-color 0.2s ease;
+    position: relative;
+    text-align: left;
+    display: flex;
+    align-items: center;
+    overflow: auto;
+
+    .ff_var_red {
+      color: var(--status-rejected-text-color);
+    }
+
+    .ff_var_def_color {
+      color: var(--text-color);
+    }
+
+    .ff_var_green {
+      color: var(--status-success-text-color);
+    }
+
+    &::after {
+      content: '*';
+      color: var(--input-error-text-color);
+      font-size: 1.2em;
+      position: absolute;
+      top: 2px;
+      right: 2px;
+      display: none;
+    }
+
+    &.ff_required::after {
+      display: inline;
+    }
+
+    &.ff_required_empty:focus-within,
+    &.ff_required_empty:focus {
+      border-color: var(--input-error-text-color);
+    }
+
+    &:empty::before {
+      content: attr(data-placeholder);
+      color: var(--ff-search-filed-placeholder-text);
+      position: absolute;
+      user-select: none;
+      pointer-events: none;
+      font-size: medium;
+    }
+
+    &.ff_disabled {
+      pointer-events: none;
+      opacity: 0.5;
+      background-color: var(--input-default-border-color);
+    }
+
+    &.ff_invalid_input {
+      border: 1px solid var(--input-error-text-color);
+    }
+  }
+
+  .ff_suggestions {
+    border: 1px solid var(--input-default-border-color);
+    margin-top: 4px;
+    padding: 4px;
+    border-radius: 4px;
+    list-style-type: none;
+    background-color: var(--ff-select-background-color);
+    max-height: 150px;
+    overflow-y: auto;
+  }
+
+  .ff_suggestion_item {
+    padding: 4px;
+    cursor: pointer;
+    &:hover {
+      background-color: var(--ff-select-background-color);
+    }
+  }
+}

package/src/components/VariableInput/VariableInput.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import VariableInput from './VariableInput';
+
+const meta: Meta<typeof VariableInput> = {
+  title: 'Components/VariableInput',
+  component: VariableInput,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof VariableInput>;
+
+const defaultArgs = {
+  name: 'input',
+  label: '',
+  disabled: false,
+  placeholder: 'Enter URL',
+  value: '',
+  type: 'url',
+  list:['name','urlName','passwork','emailId','default','errorVar']
+};
+
+export const Default: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Enter URL',
+    type: 'url',
+  },
+};
+export default meta;

package/src/components/VariableInput/VariableInput.tsx

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

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

package/src/components/VariableInput/types.ts

@@ -0,0 +1,56 @@
+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[];
+}