pixel-react 1.1.1 → 1.1.3

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,9 +38,14 @@ 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 Paper from './components/Paper';
+import DashboardDonutChart from './components/Charts/DashboardDonutChart';
 import Recaptcha from './components/FF_Captcha/Recaptcha';
+import NLPInput from './components/NLPInput';
 
 // Utils imports
 import { checkEmpty } from './utils/checkEmpty/checkEmpty';
@@ -49,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,
@@ -91,14 +110,25 @@ export {
   StatusButton,
   IconButton,
   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

@@ -0,0 +1,55 @@
+// getEncryptData.stories.tsx
+import { useState } from 'react';
+import { getEncryptedData } from './getEncryptedData';
+
+export default {
+  title: 'Utils/getEncryptedData',
+  component: getEncryptedData,
+};
+
+export const InteractivePlayground = () => {
+  const [data, setData] = useState<string>('Sensitive information');
+  const [publicKey, setPublicKey] = useState<string>(`Add your public key`);
+  const [encryptedData, setEncryptedData] = useState<string | null>(null);
+
+  const handleEncrypt = () => {
+    const result = getEncryptedData(data, publicKey);
+    setEncryptedData(result.toString());
+  };
+
+  return (
+    <div>
+      <h1>Interactive Playground for getEncryptData</h1>
+
+      <div>
+        <label htmlFor="data">Data to Encrypt:</label>
+        <input
+          type="text"
+          id="data"
+          value={data}
+          onChange={(e) => setData(e.target.value)}
+        />
+      </div>
+
+      <div>
+        <label htmlFor="publicKey">Public Key:</label>
+        <textarea
+          id="publicKey"
+          value={publicKey}
+          onChange={(e) => setPublicKey(e.target.value)}
+          rows={5}
+          cols={50}
+        />
+      </div>
+
+      <button onClick={handleEncrypt}>Encrypt Data</button>
+
+      <h2>Encrypted Data:</h2>
+      {encryptedData ? (
+        <pre>{encryptedData}</pre>
+      ) : (
+        <p>No encrypted data yet. Click "Encrypt Data" to generate it.</p>
+      )}
+    </div>
+  );
+};

package/src/utils/getEncryptedData/getEncryptedData.ts

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

package/lib/components/AddButton/AddButton.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import './AddButton.scss';
-import { AddButtonProps } from './types';
-declare const AddButton: React.FC<AddButtonProps>;
-export default AddButton;

package/lib/components/AddButton/AddButton.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import AddButton from './AddButton';
-declare const meta: Meta<typeof AddButton>;
-type Story = StoryObj<typeof AddButton>;
-export declare const PrimaryAddButton: Story;
-export default meta;

package/lib/components/AddButton/index.d.ts

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

package/lib/components/AddButton/types.d.ts

@@ -1,4 +0,0 @@
-export interface AddButtonProps {
-    name: string;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-}