pixel-react 1.1.2 → 1.1.4

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[];
+}

package/src/index.ts

@@ -38,10 +38,12 @@ import StateDropdown from './components/StateDropdown';
 import IconButton from './components/IconButton';
 import Modal from './components/Modal';
 import DragAndDrop from './components/DragAndDrop/DragAndDrop';
+import VariableInput from './components/VariableInput';
 import AllProjectsDropdown from './components/AllProjectsDropdown';
 import PieChart from './components/Charts/PieChart';
 import AppHeader from './components/AppHeader';
-import DashboardDonutChart from './components/Charts/DashboardDonutChart'
+import Paper from './components/Paper';
+import DashboardDonutChart from './components/Charts/DashboardDonutChart';
 import Recaptcha from './components/FF_Captcha/Recaptcha';
 import NLPInput from './components/NLPInput';
 
@@ -52,6 +54,20 @@ import {
   getExtensionWithPeriod,
 } from './utils/getExtension/getExtension';
 
+import { findAndInsert } from './utils/findAndInsert/findAndInsert';
+import { ffid } from './utils/ffID/ffid';
+
+import { debounce } from './utils/debounce/debounce';
+import { compareArrays } from './utils/compareArrays/compareArrays';
+
+import { compareObjects } from './utils/compareObjects/compareObjects';
+
+import { getEncryptedData } from './utils/getEncryptedData/getEncryptedData';
+
+import { throttle } from './utils/throttle/throttle';
+
+import { truncateText } from './utils/truncateText/truncateText';
+
 export {
   Button,
   Tooltip,
@@ -96,14 +112,23 @@ export {
   Modal,
   PieChart,
   DashboardDonutChart,
-
   DragAndDrop,
   AllProjectsDropdown,
   AppHeader,
+  VariableInput,
+  Paper,
   Recaptcha,
   NLPInput,
   // utils exports
   checkEmpty,
   getExtension,
   getExtensionWithPeriod,
+  findAndInsert,
+  ffid,
+  compareArrays,
+  compareObjects,
+  debounce,
+  throttle,
+  getEncryptedData,
+  truncateText,
 };

package/src/utils/ffID/ffID.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import ffid from './ffid'; // Adjust the import path if needed
+import { ffid } from './ffid'; // Adjust the import path if needed
 import { useState } from 'react';
 
 const meta: Meta<typeof ffid> = {

package/src/utils/ffID/ffid.ts

@@ -1,9 +1,7 @@
-const ffid = (): string =>
+export const ffid = (): string =>
   'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (char) =>
     (
       (char === 'x' ? Math.random() * 16 : ((Math.random() * 16) & 0x3) | 0x8) |
       0
     ).toString(16)
   );
-
-export default ffid;

package/src/utils/getEncryptedData/getEncryptedData.stories.tsx

@@ -1,10 +1,10 @@
 // getEncryptData.stories.tsx
 import { useState } from 'react';
-import getEncryptData from './getEncryptedData';
+import { getEncryptedData } from './getEncryptedData';
 
 export default {
   title: 'Utils/getEncryptedData',
-  component: getEncryptData,
+  component: getEncryptedData,
 };
 
 export const InteractivePlayground = () => {
@@ -13,7 +13,7 @@ export const InteractivePlayground = () => {
   const [encryptedData, setEncryptedData] = useState<string | null>(null);
 
   const handleEncrypt = () => {
-    const result = getEncryptData(data, publicKey);
+    const result = getEncryptedData(data, publicKey);
     setEncryptedData(result.toString());
   };
 

package/src/utils/getEncryptedData/getEncryptedData.ts

@@ -1,10 +1,8 @@
 import JSEncrypt from 'jsencrypt';
 
-const getEncryptedData = (data: string, publicKey: string) => {
+export const getEncryptedData = (data: string, publicKey: string) => {
   const encrypt = new JSEncrypt();
   encrypt.setPublicKey(publicKey);
   const enData = encrypt.encrypt(data);
   return enData;
 };
-
-export default getEncryptedData;