pixel-react 1.4.4 → 1.4.5

package/lib/utils/checkEmpty/checkEmpty.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: (value: any) => boolean;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/lib/utils/compareArrays/compareArrays.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: (arr1: unknown[], arr2: unknown[]) => boolean;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/lib/utils/compareObjects/compareObjects.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: (obj1: import("./compareObjects").AnyObject | null, obj2: import("./compareObjects").AnyObject | null) => boolean;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/lib/utils/debounce/debounce.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: (func: (...args: any[]) => void, delay: number) => import("./debounce").DebouncedFunction;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/lib/utils/ffID/ffID.stories.d.ts

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

package/lib/utils/find/findAndInsert.d.ts

@@ -0,0 +1,7 @@
+export type AnyObject = {
+    id: number;
+    [key: string]: any;
+};
+export declare function findAndInsert<T extends AnyObject>(data: T[], key: keyof T, targetId: number, newEntry: T, insertPosition: 'above' | 'below' | 'replace', childrenKey?: string): {
+    updatedArray: T[];
+} | null;

package/lib/utils/find/findAndInsert.stories.d.ts

@@ -0,0 +1,7 @@
+import { findAndInsert } from './findAndInsert';
+declare const _default: {
+    title: string;
+    component: typeof findAndInsert;
+};
+export default _default;
+export declare const InteractivePlayground: () => import("react/jsx-runtime").JSX.Element;

package/lib/utils/findAndInsert/findAndInsert.stories.d.ts

@@ -0,0 +1,7 @@
+import { findAndInsert } from './findAndInsert';
+declare const _default: {
+    title: string;
+    component: typeof findAndInsert;
+};
+export default _default;
+export declare const InteractivePlayground: () => import("react/jsx-runtime").JSX.Element;

package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: (data: string, publicKey: string) => string | false;
+};
+export default _default;
+export declare const InteractivePlayground: () => import("react/jsx-runtime").JSX.Element;

package/lib/utils/getExtension/getExtension.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: (value: string | File) => string | undefined;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { MachineExecutionInstanceDataSet } from './types';
+declare const SequentialPayloadComponent: React.FC<{
+    machineInstances: MachineExecutionInstanceDataSet[];
+}>;
+declare const meta: Meta<typeof SequentialPayloadComponent>;
+type Story = StoryObj<typeof SequentialPayloadComponent>;
+export declare const Primary: Story;
+export default meta;

package/lib/utils/throttle/throttle.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: (func: (...args: any[]) => void, limit: number) => import("./throttle").ThrottledFunction;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/lib/utils/truncateText/truncateText.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: (text: string, maxLength: number) => string;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",
@@ -29,6 +29,7 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/react-google-recaptcha": "^2.1.9",
+    "@types/js-beautify": "^1.14.3",
     "chromatic": "^11.16.5",
     "postcss": "^8.4.35",
     "react": "^18.2.0",
@@ -66,7 +67,6 @@
     "date-fns-tz": "^3.2.0",
     "js-beautify": "^1.15.1",
     "jsencrypt": "^3.3.2",
-    "prettier": "^3.3.3",
     "react-archer": "^4.4.0",
     "react-day-picker": "^9.2.1",
     "react-google-recaptcha": "^3.1.0",

package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx

@@ -141,7 +141,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
             {legendData.map((item, index) => (
               <div className="ff-legend-item" key={index}>
                 <Typography
-                  fontSize={20}
+                  fontSize={22}
                   fontWeight="semi-bold"
                   className="ff-legend-value"
                   color={
@@ -152,7 +152,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
                 >
                   {item.value} {showUnit && unit?.toUpperCase()}
                 </Typography>
-                <Typography fontSize={10} className="ff-legend-key">
+                <Typography fontSize={12} className="ff-legend-key">
                   {item.key}
                 </Typography>
               </div>

package/src/components/Editor/Editor.tsx

@@ -1,215 +1,248 @@
-import React, { useRef, useState, useEffect } from 'react';
-import MonacoEditor, { OnMount } from '@monaco-editor/react';
 import {
-  dropdownPositionType,
-  EditorProps,
-  option,
-  DyanamicObj,
-} from './types';
-import Icon from '../Icon';
+  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 Select from '../Select';
-import Button from '../Button';
 import VariableDropdown from './VariableDropdown';
-import Drawer from '../Drawer';
-import FileDropzone from '../FileDropzone';
-import Tooltip from '../Tooltip';
-import { optionsList } from './constants';
 
-const Editor: React.FC<EditorProps> = ({
-  width,
-  height,
-  showToolbar,
-  readOnly,
-  value = '',
-  handleChange,
-  setValue,
-  variableOptionsList = [],
-  language = 'javascript',
-  theme = 'light',
-}) => {
-  const editorRef = useRef<Parameters<OnMount>[0] | null>(null);
-  const decorationsRef = useRef<string[]>([]);
-  const [contentType, setContentType] = useState<string>(language);
-  const [currentLine, setCurrentLine] = useState<number>(0);
-  const [showDropdown, setShowDropdown] = useState<boolean>(false);
-  const [showDrawer, setShowDrawer] = useState<boolean>(false);
-  const [selectedOption, setSelectedOption] = useState<option>({
-    label: 'JSON',
-    value: 'json',
-  });
-  const [dropdownPosition, setDropdownPosition] =
-    useState<dropdownPositionType>({ top: 0, left: 0 });
+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;
+    const handleEditorDidMount: OnMount = (editor: any) => {
+      editorRef.current = editor;
 
-    editor.onDidChangeCursorPosition((e: any) => {
-      setCurrentLine(e.position.lineNumber);
-    });
+      editor.onDidChangeCursorPosition((e: any) => {
+        setCurrentLine(e.position.lineNumber);
+      });
 
-    editor.onDidChangeModelContent(() => {
-      const content = editor.getValue();
-      setValue(content);
+      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);
+        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);
           }
-        } else {
-          setShowDropdown(false);
         }
-      }
-    });
-  };
+      });
+    };
 
-  useEffect(() => {
-    if (editorRef.current && currentLine) {
-      // Define decoration for the current line
-      const decorations = [
-        {
-          range: {
-            startLineNumber: currentLine,
-            startColumn: 1,
-            endLineNumber: currentLine,
-            endColumn: 1,
-          },
-          options: {
-            isWholeLine: true,
-            className: 'current-line-background', // Custom CSS class for background color
+    useEffect(() => {
+      if (editorRef.current && currentLine) {
+        const decorations = [
+          {
+            range: {
+              startLineNumber: currentLine,
+              startColumn: 1,
+              endLineNumber: currentLine,
+              endColumn: 1,
+            },
+            options: {
+              isWholeLine: true,
+              className: 'current-line-background',
+            },
           },
-        },
-      ];
-
-      // Apply decorations
-      decorationsRef.current = editorRef.current.deltaDecorations(
-        decorationsRef.current,
-        decorations
-      );
-    }
-  }, [currentLine]);
+        ];
 
-  const handleBeautify = () => {
-    let beautifiedContent = value;
-    if (contentType === 'json') {
-      try {
-        beautifiedContent = JSON.stringify(JSON.parse(value), null, 2);
-      } catch (e) {
-        alert('Invalid JSON format');
+        decorationsRef.current = editorRef.current.deltaDecorations(
+          decorationsRef.current,
+          decorations
+        );
       }
-    }
-    setValue(beautifiedContent);
-  };
+    }, [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,
+    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}}`,
             },
-            text: `{${type}_${suggestion}}`,
-          },
-        ]);
-        setShowDropdown(false);
+          ]);
+          setShowDropdown(false);
+        }
       }
-    }
-  };
+    };
 
-  const handleFileUpload = () => {
-    setShowDrawer(true);
-  };
+    const handleSelectVariable = (option: DyanamicObj) => {
+      handleSelectSuggestion(
+        option?.name,
+        option?.type === 'GLOBAL'
+          ? 'GV'
+          : option?.type === 'LOCAL'
+            ? 'LV'
+            : 'PEV'
+      );
+    };
 
-  const onDropdownChangeHandler = (option: option) => {
-    setContentType(option.value);
-    setSelectedOption(option);
-  };
+    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 handleSelectVariable = (option: DyanamicObj) => {
-    handleSelectSuggestion(
-      option?.name,
-      option?.type === 'GLOBAL' ? 'GV' : option?.type === 'LOCAL' ? 'LV' : 'PEV'
-    );
-  };
+    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;
+      }
+    };
 
-  return (
-    <div style={{ width, height }} className="ff-editor-container">
-      {showToolbar && (
-        <div className="ff-top-toolbar">
-          <Tooltip title="Beautify">
-            <Icon name="beautify_icon" hoverEffect onClick={handleBeautify} />
-          </Tooltip>
-          <Select
-            labelAccessor="label"
-            valueAccessor="value"
-            optionsList={optionsList}
-            selectedOption={selectedOption}
-            showBorder={true}
-            onChange={onDropdownChangeHandler}
-            showLabel={true}
-            height={24}
-            width={98}
-          />
-          <Button
-            onClick={handleFileUpload}
-            variant="secondary"
-            label="Choose File"
-          />
-        </div>
-      )}
-      <MonacoEditor
-        height="90%"
-        width="100%"
-        language={contentType}
-        value={value}
-        options={{
-          lineNumbers: 'on',
-          wordWrap: 'on',
-          autoClosingBrackets: 'always',
-          scrollBeyondLastLine: false,
-          readOnly,
-          fontFamily: 'font-poppins',
-          theme,
-        }}
-        onMount={handleEditorDidMount}
-        onChange={(newValue, event) => handleChange(newValue, event)}
-      />
-      {showDrawer && (
-        <Drawer
-          title="Choose File"
-          isOpen={showDrawer}
-          onClose={() => setShowDrawer(false)}
-        >
-          <FileDropzone
-            buttonLabel="Upload"
-            accept={['.json', '.js', '.html']}
-          />
-        </Drawer>
-      )}
-      {showDropdown && dropdownPosition && (
-        <VariableDropdown
-          optionsList={variableOptionsList}
-          onSelectVariable={handleSelectVariable}
-          dropdownPosition={dropdownPosition}
+    // 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="90%"
+          width="100%"
+          language={language}
+          value={value}
+          options={{
+            lineNumbers: 'on',
+            wordWrap: 'on',
+            autoClosingBrackets: 'always',
+            scrollBeyondLastLine: false,
+            readOnly,
+          }}
+          onMount={handleEditorDidMount}
+          onChange={(newValue, event) => handleChange(newValue, event)}
+          theme={theme}
         />
-      )}
-    </div>
-  );
-};
+        {showDropdown && dropdownPosition && (
+          <VariableDropdown
+            optionsList={variableOptionsList}
+            onSelectVariable={handleSelectVariable}
+            dropdownPosition={dropdownPosition}
+          />
+        )}
+      </div>
+    );
+  }
+);
 
 export default Editor;

package/src/components/Editor/types.ts

@@ -5,7 +5,7 @@ export interface EditorProps {
   /**
    * Editor Content Type
    */
-  language?: 'javascript' | 'html' | 'json' | 'plaintext' | 'xml';
+  language: 'javascript' | 'html' | 'json' | 'plain text' | 'xml';
 
   /**
    *
@@ -18,10 +18,6 @@ export interface EditorProps {
    */
   height: string;
 
-  /**
-   * Show toolbar
-   */
-  showToolbar?: boolean;
 
   /**
    * read only

package/src/index.ts

@@ -52,6 +52,7 @@ import SequentialConnectingBranch from './components/SequentialConnectingBranch'
 import AttachmentButton from './components/AttachmentButton';
 import { Toastify, toast } from './components/Toastify/Toastify';
 import ToggleSwitch from './components/ToggleSwitch/ToggleSwitch';
+import Avatar from './components/Avatar/Avatar';
 
 import LabelEditTextField from './components/LabelEditTextField';
 import EditTextField from './components/EditTextField';
@@ -81,7 +82,7 @@ import MultiRadialChart from './components/Charts/MultiRadialChart';
 import Editor from './components/Editor/Editor';
 import { getSequentialPayload } from './utils/getSequentialPayload/getSequentialPayload';
 import ConnectingBranch from './components/ConnectingBranch/ConnectingBranch';
-import { saveFileFromBlob } from './utils/downloadFile/saveFileFromBlob'
+import { saveFileFromBlob } from './utils/downloadFile/saveFileFromBlob';
 
 export {
   Button,
@@ -153,6 +154,7 @@ export {
   EditTextField,
   AttachImage,
   ToggleSwitch,
+  Avatar,
   // utils exports
   checkEmpty,
   getExtension,