pixel-react 1.6.8 → 1.6.9

package/src/components/AddVariables/AddVariables.stories.tsx

@@ -1,44 +1,82 @@
-import React, { useState } from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import AddVariables from './AddVariables';
-import { AddVariableProps } from './types';
-import { variableList } from '../Editor/constants';
-
-export default {
-  title: 'Components/AddVariables',
-  component: AddVariables,
-  args: {
-    label: 'Add Variables',
-    placeholder: 'Enter text',
-    variableList,
-    dropdownWidth: '138px',
-  },
-  parameters: {
-    layout: 'centered',
-  },
-} as Meta<AddVariableProps>;
-
-// Wrapper component to handle state inside Storybook stories
-const Template: StoryFn<AddVariableProps> = (args) => {
-  const [inputValue, setInputValue] = useState<string>('');
-
-  return (
-    <AddVariables
-      {...args}
-      onChange={(value: string) => setInputValue(value)}
-      value={inputValue}
-    />
-  );
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  onCreateVariableClick: () => alert('Create Variable clicked'),
-};
-
-// Customized story with pre-filled input value
-export const WithInitialValue = Template.bind({});
-WithInitialValue.args = {
-  inputValue: 'Initial Text with $',
-  onCreateVariableClick: () => alert('Create Variable clicked'),
-};
+import React, { useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import AddVariables from './AddVariables';
+import { AddVariableProps, dynamicObject } from './types';
+import { variableList } from '../Editor/constants';
+import CreateVariableSlider from '../CreateVariable/CreateVariableSlider';
+
+export default {
+  title: 'Components/AddVariables',
+  component: AddVariables,
+  args: {
+    label: 'Add Variables',
+    placeholder: 'Enter text',
+    variableList,
+    dropdownWidth: '138px',
+    variant: 'primary',
+  },
+  parameters: {
+    layout: 'centered',
+  },
+} as Meta<AddVariableProps>;
+
+// Wrapper component to handle state inside Storybook stories
+const Template: StoryFn<AddVariableProps> = (args) => {
+  const [inputValue, setInputValue] = useState<string>('');
+  const [openCreateVariable, setOpenCreateVariable] = useState<boolean>(false);
+  const [variableName, setVariableName] = useState<string>('');
+  const [variableValue, setVariableValue] = useState<string>('');
+  const [selectedVariable, setSelectedVariable] = useState<dynamicObject>({
+    label: 'Local Variable',
+    value: 'LOCAL',
+  });
+  const [hideValue, setHideValue] = useState<boolean>(false);
+
+  return (
+    <>
+      <AddVariables
+        {...args}
+        onChange={(value: string) => setInputValue(value)}
+        value={inputValue}
+        onCreateVariableClick={() => setOpenCreateVariable(true)}
+      />
+      {openCreateVariable && (
+        <CreateVariableSlider
+          isOpen={openCreateVariable}
+          onClose={() => setOpenCreateVariable(false)}
+          variableName={variableName}
+          value={variableValue}
+          hideValue={hideValue}
+          handleSubmit={() => {
+            alert('Variable Created');
+          }}
+          onHideChange={(value) => {
+            setHideValue(value);
+          }}
+          onNameChange={(value) => {
+            setVariableName(value);
+          }}
+          onValueChange={(value) => setVariableValue(value)}
+          onVariableTypeChange={(option) => setSelectedVariable(option)}
+          selectedVariableType={selectedVariable}
+          variableTypesList={[
+            { label: 'Local Variable', value: 'LOCAL' },
+            { label: 'Global Variable', value: 'GLOBAL' },
+          ]}
+        />
+      )}
+    </>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  onCreateVariableClick: () => alert('Create Variable clicked'),
+};
+
+// Customized story with pre-filled input value
+export const WithInitialValue = Template.bind({});
+WithInitialValue.args = {
+  inputValue: 'Initial Text with $',
+  onCreateVariableClick: () => alert('Create Variable clicked'),
+};

package/src/components/AddVariables/AddVariables.tsx

@@ -1,113 +1,129 @@
-import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-import VariableDropdown from '../Editor/VariableDropdown';
-import Icon from '../Icon';
-import Input from '../Input';
-import { AddVariableProps, dynamicObject } from './types';
-import './AddVariables.scss';
-import React, { useState, useRef, useEffect } from 'react';
-
-const AddVariables: React.FC<AddVariableProps> = ({
-  label = '',
-  variableList = [],
-  placeholder = 'Enter text',
-  onChange,
-  onCreateVariableClick,
-  value = '',
-  dropdownWidth = 'inherit',
-}) => {
-  const [showDropdown, setShowDropdown] = useState<boolean>(false);
-  const [cursorPosition, setCursorPosition] = useState<number | null>(null);
-  const [showCreateVariableIcon, setShowCreateVariableIcon] =
-    useState<boolean>(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (cursorPosition !== null && inputRef.current) {
-      inputRef.current.setSelectionRange(cursorPosition, cursorPosition);
-      inputRef.current.focus();
-    }
-  }, [cursorPosition]);
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = event.target.value;
-    onChange?.(value);
-
-    // Show dropdown only if the last character typed is `$`
-    const cursorPos = inputRef.current?.selectionStart || 0;
-    const isDollarTyped = value[cursorPos - 1] === '$';
-
-    if (isDollarTyped) {
-      setShowDropdown(true);
-    } else {
-      setShowDropdown(false); // Close if it's a space or other characters
-    }
-    if (value?.includes('$')) {
-      setShowCreateVariableIcon(false);
-    } else {
-      setShowCreateVariableIcon(true);
-    }
-  };
-
-  const handleDropdownClick = (item: dynamicObject) => {
-    if (inputRef.current) {
-      const { selectionStart, selectionEnd } = inputRef.current;
-      const dollarSyntax = `{${
-        item.type === 'LOCAL'
-          ? 'LV'
-          : item.type === 'GLOBAL'
-          ? 'GV'
-          : item.type === 'GROUP'
-          ? 'SG'
-          : 'PEV'
-      }_${item.name}}`;
-
-      const newValue =
-        value.slice(0, selectionStart || 0) +
-        dollarSyntax +
-        value.slice(selectionEnd || 0);
-
-      onChange(newValue);
-      setCursorPosition((selectionStart || 0) + dollarSyntax.length);
-
-      // Close the dropdown after inserting the variable
-      setShowDropdown(false);
-      onChange?.(newValue);
-    }
-  };
-
-  return (
-    <div className="ff-add-variable-container">
-      <div className="ff-add-variable-input">
-        <Input
-          name="add_variable"
-          ref={inputRef}
-          type="text"
-          value={value}
-          onChange={handleChange}
-          variant="primary"
-          label={label}
-          placeholder={placeholder}
-        />
-        {!checkEmpty(value) && showCreateVariableIcon && (
-          <Icon
-            onClick={onCreateVariableClick}
-            name="add_variable"
-            width={24}
-            height={24}
-            hoverEffect
-          />
-        )}
-      </div>
-      {showDropdown && (
-        <VariableDropdown
-          position="relative"
-          width={dropdownWidth}
-          optionsList={variableList}
-          onSelectVariable={handleDropdownClick}
-        />
-      )}
-    </div>
-  );
-};
-
-export default AddVariables;
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+import VariableDropdown from '../Editor/VariableDropdown';
+import Icon from '../Icon';
+import Input from '../Input';
+import { AddVariableProps, dynamicObject } from './types';
+import './AddVariables.scss';
+import React, { useState, useRef, useEffect } from 'react';
+
+const AddVariables: React.FC<AddVariableProps> = ({
+  label = '',
+  variableList = [],
+  placeholder = 'Enter text',
+  onChange,
+  onCreateVariableClick,
+  value = '',
+  dropdownWidth = 'inherit',
+  ...props
+}) => {
+  const [inputValue, setInputValue] = useState<string>('');
+  const [showDropdown, setShowDropdown] = useState<boolean>(false);
+  const [cursorPosition, setCursorPosition] = useState<number | null>(null);
+  const [showCreateVariableIcon, setShowCreateVariableIcon] =
+    useState<boolean>(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (cursorPosition !== null && inputRef.current) {
+      inputRef.current.setSelectionRange(cursorPosition, cursorPosition);
+      inputRef.current.focus();
+    }
+  }, [cursorPosition]);
+
+  useEffect(() => {
+    const newPayload = replaceVariablesWithIds(inputValue);
+    onChange(newPayload);
+  }, [inputValue]);
+
+  const replaceVariablesWithIds = (input: string): string => {
+    return input.replace(/\${.*?_(.*?)}/g, (_, variableName) => {
+      // Find the matching variable in the list by name
+      const foundVariable = variableList.find(
+        (varaible) => varaible.name === variableName.trim()
+      );
+      return foundVariable ? `\${${foundVariable.id}}` : `\${${variableName}}`; // Replace if found, otherwise keep as is
+    });
+  };
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const fieldValue = event.target.value;
+    setInputValue(fieldValue);
+
+    // Show dropdown only if the last character typed is `$`
+    const cursorPos = inputRef.current?.selectionStart || 0;
+    const isDollarTyped = fieldValue[cursorPos - 1] === '$';
+
+    if (isDollarTyped) {
+      setShowDropdown(true);
+    } else {
+      setShowDropdown(false); // Close if it's a space or other characters
+    }
+    if (fieldValue?.includes('$')) {
+      setShowCreateVariableIcon(false);
+    } else {
+      setShowCreateVariableIcon(true);
+    }
+  };
+
+  const handleDropdownClick = (item: dynamicObject) => {
+    if (inputRef.current) {
+      const { selectionStart, selectionEnd } = inputRef.current;
+      const dollarSyntax = `{${
+        item.type === 'LOCAL'
+          ? 'LV'
+          : item.type === 'GLOBAL'
+          ? 'GV'
+          : item.type === 'GROUP'
+          ? 'SG'
+          : 'PEV'
+      }_${item.name}}`;
+
+      const newValue =
+        inputValue.slice(0, selectionStart || 0) +
+        dollarSyntax +
+        inputValue.slice(selectionEnd || 0);
+      setInputValue(newValue);
+      setCursorPosition((selectionStart || 0) + dollarSyntax.length);
+
+      // Close the dropdown after inserting the variable
+      setShowDropdown(false);
+    }
+  };
+
+  return (
+    <div className="ff-add-variable-container">
+      <div className="ff-add-variable-input">
+        <Input
+          {...props}
+          name="add_variable"
+          ref={inputRef}
+          type="text"
+          value={inputValue}
+          onChange={handleChange}
+          variant="primary"
+          label={label}
+          placeholder={placeholder}
+        />
+        {!checkEmpty(value) && showCreateVariableIcon && (
+          <Icon
+            onClick={onCreateVariableClick}
+            name="add_variable"
+            width={24}
+            height={24}
+            hoverEffect
+          />
+        )}
+      </div>
+      {showDropdown && (
+        <VariableDropdown
+          position="relative"
+          width={dropdownWidth}
+          optionsList={variableList}
+          onSelectVariable={handleDropdownClick}
+        />
+      )}
+    </div>
+  );
+};
+
+export default AddVariables;

package/src/components/AddVariables/index.ts

@@ -1 +1 @@
-export { default } from './AddVariables';
+export { default } from './AddVariables';

package/src/components/AddVariables/types.ts

@@ -1,36 +1,103 @@
-export type dynamicObject = {
-  [key: string]: any;
-};
-
-export interface AddVariableProps {
-  /**
-   * Label for the field
-   */
-  label?: string;
-  /**
-   * List of variables
-   */
-  variableList?: dynamicObject[];
-  /**
-   * Place holder for the input field
-   */
-  placeholder?: string;
-  /**
-   * Function to handle input change
-   * @param value
-   * @returns
-   */
-  onChange: (value: string) => void;
-  /**
-   * Function to handle create variable icon click
-   */
-  onCreateVariableClick?: () => void;
-  /**
-   * Value of the input field
-   */
-  value: string;
-  /**
-   * Width of the dropdown
-   */
-  dropdownWidth?: string;
-}
+export type dynamicObject = {
+  [key: string]: any;
+};
+
+export interface AddVariableProps {
+  /**
+   * Label for the field
+   */
+  label?: string;
+  /**
+   * List of variables
+   */
+  variableList?: dynamicObject[];
+  /**
+   * Place holder for the input field
+   */
+  placeholder?: string;
+  /**
+   * Function to handle input change
+   * @param value
+   * @returns
+   */
+  onChange: (value: string) => void;
+  /**
+   * Function to handle create variable icon click
+   */
+  onCreateVariableClick?: () => void;
+  /**
+   * Width of the dropdown
+   */
+  dropdownWidth?: string;
+  /**
+   * Name | name of the input field
+   */
+  name: string;
+  /**
+   * value | input field value
+   */
+  value: string;
+  /**
+   * variants to set color/style of the input field
+   */
+  variant?: 'default' | 'primary';
+  /**
+   * 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;
+  /**
+   * helperText | error, success, warning message to be shown
+   */
+  helperText?: string;
+  /**
+   * to disable the input field
+   */
+  disabled?: boolean;
+  /**
+   * if true, input field will be mandatory
+   */
+  required?: boolean;
+  /**
+   * classnames to style the input field
+   */
+  className?: string;
+  /**
+   * noBorder prop 'true' removes border of input
+   */
+  noBorder?: boolean;
+
+  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;
+  /**
+   * if on, suggestion popup will be displayed
+   */
+  autoComplete?: 'on' | 'off';
+  /**
+   *  minimum and maximum values for the number type input field and their functions
+   */
+  minValue?: number;
+  maxValue?: number;
+  /**
+   * background of the input field prop
+   */
+  transparentBackground?: boolean;
+  /**
+   * size for the input field
+   */
+  size?: 'small' | 'medium';
+  /**
+   * isLabelRequired for the input field without label,showing placeholder
+   */
+  isLabelRequired?: boolean;
+}