pixel-react-excel-sheet 1.0.19 → 1.0.21

package/src/components/Chip/Chip.stories.tsx

@@ -1,8 +1,10 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import Chip from './Chip';
 import '../../assets/styles/_colors.scss';
 import './Chip.scss';
 import Typography from '../Typography';
+
 const meta: Meta<typeof Chip> = {
   title: 'Components/Chip',
   component: Chip,
@@ -111,7 +113,14 @@ export const Disabled: Story = {
     ...defaultArgs,
     variant: 'disabled',
     fullText: 'Sub Modules 0',
-  },  
+  },    
+};
+export const Count: Story = {
+  args: {
+    ...defaultArgs,
+    variant: 'count',
+    fullText: 'Sub Modules 0',
+  },
 };
 
 export default meta;

package/src/components/Chip/Chip.tsx

@@ -26,7 +26,11 @@ const Chip = ({
           { ['ff-default-chip-style--fullText']: !!fullText }
         )}
       >
-        {labelText && <Typography as="p">{labelText}</Typography>}
+        {labelText && (
+          <Typography as="p" fontSize={10} fontWeight="semi-bold">
+            {labelText}
+          </Typography>
+        )}
       </button>
     </div>
   );

package/src/components/Chip/types.ts

@@ -10,7 +10,7 @@ export interface ChipsProps {
   /**
    * The variant of the Chip.
    */
-  variant?: 'primary' | 'success' | 'error' | 'warning' | 'custom' | 'public' | 'partial-public' | 'private' | 'disabled';
+  variant?: 'primary' | 'success' | 'error' | 'warning' | 'custom' | 'public' | 'partial-public' | 'private' | 'disabled' | 'count';
 
   /**
    * The callback function to be executed when the Chip is clicked.

package/src/components/{AddVariables/AddVariables.scss → ConditionalDropdown/ConditionalDropdown.scss}

@@ -12,3 +12,7 @@
     gap: 8px;
   }
 }
+.ff-variable-dropdown {
+  padding: 4px;
+  width: auto;
+}

package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx

@@ -0,0 +1,147 @@
+import React, { useState } from 'react';
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import ConditionalDropdown from './ConditionalDropdown';
+import { ConditionalDropdownProps, dynamicObject } from './types';
+import { variableList } from '../Editor/constants';
+import CreateVariableSlider from '../CreateVariable/CreateVariableSlider';
+
+export default {
+  title: 'Components/ConditionalDropdown',
+  component: ConditionalDropdown,
+  args: {
+    label: 'Add Variables',
+    placeholder: 'Enter text',
+    variableList,
+    dropdownWidth: '138px',
+    variant: 'primary',
+  },
+  parameters: {
+    layout: 'centered',
+  },
+} as Meta<ConditionalDropdownProps>;
+
+type Story = StoryObj<typeof ConditionalDropdown>;
+
+const Template: StoryFn<ConditionalDropdownProps> = (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 (
+    <>
+      <ConditionalDropdown
+        {...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'),
+};
+
+export const WithInitialValue = Template.bind({});
+WithInitialValue.args = {
+  inputValue: 'Initial Text with $',
+  onCreateVariableClick: () => alert('Create Variable clicked'),
+};
+
+export const DropdownOnHash: Story = {
+  render: () => {
+    const [hashInputValue, setHashInputValue] = useState<
+      dynamicObject | undefined
+    >();
+    const testData = [
+      {
+        _id: '1',
+        name: 'File1.txt',
+        actualPath: '/documents/File1.txt',
+        searchKey: 'file1',
+        parentId: 'root',
+      },
+      {
+        _id: '2',
+        name: 'File2.doc',
+        actualPath: '/documents/File2.doc',
+        searchKey: 'file2',
+        parentId: 'root',
+      },
+      {
+        _id: '3',
+        name: 'Image1.png',
+        actualPath: '/images/Image1.png',
+        searchKey: 'image1',
+        parentId: 'folder1',
+      },
+      {
+        _id: '4',
+        name: 'Presentation.ppt',
+        actualPath: '/presentations/Presentation.ppt',
+        searchKey: 'presentation',
+        parentId: 'folder2',
+      },
+      {
+        _id: '5',
+        name: 'Spreadsheet.xlsx',
+        actualPath: '/spreadsheets/Spreadsheet.xlsx',
+        searchKey: 'spreadsheet',
+        parentId: 'folder3',
+      },
+      {
+        _id: '6',
+        name: 'Code.js',
+        actualPath: '/projects/Code.js',
+        searchKey: 'code',
+        parentId: 'folder4',
+      },
+    ];
+
+    return (
+      <>
+        <ConditionalDropdown
+          label="Select Path Using #"
+          placeholder="Enter # to search files"
+          isHash
+          dataFiles={testData}
+          dropdownWidth="auto"
+          setHashInputValue={setHashInputValue}
+        />
+      </>
+    );
+  },
+};

package/src/components/ConditionalDropdown/ConditionalDropdown.tsx

@@ -0,0 +1,159 @@
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+import VariableDropdown from '../Editor/VariableDropdown';
+import Icon from '../Icon';
+import Input from '../Input';
+import { ConditionalDropdownProps, dynamicObject } from './types';
+import './ConditionalDropdown.scss';
+import React, { useState, useRef, useEffect } from 'react';
+import OptionsDropdown from './OptionsDropdown';
+
+const ConditionalDropdown: React.FC<ConditionalDropdownProps> = ({
+  label = '',
+  hashInputValue = '',
+  setHashInputValue,
+  variableList = [],
+  placeholder = 'Enter text',
+  onChange,
+  onCreateVariableClick,
+  value = '',
+  dropdownWidth = 'inherit',
+  isHash = false,
+  dataFiles = [],
+  ...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 [filteredOptions, setFilteredOptions] = useState<dynamicObject[]>([]);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (cursorPosition !== null && inputRef.current) {
+      inputRef.current.setSelectionRange(cursorPosition, cursorPosition);
+      inputRef.current.focus();
+    }
+  }, [cursorPosition]);
+
+  useEffect(() => {
+    if (inputValue.startsWith('#') && isHash) {
+      const searchQuery = inputValue.slice(1).toLowerCase();
+      const filtered = dataFiles.filter((file) =>
+        file.name.toLowerCase().includes(searchQuery)
+      );
+
+      setFilteredOptions(filtered);
+      setShowDropdown(filtered.length > 0);
+    } else if (!isHash) {
+      const newPayload = replaceVariablesWithIds(inputValue);
+      onChange?.(newPayload);
+    }
+  }, [inputValue]);
+
+  const replaceVariablesWithIds = (input: string): string => {
+    return input.replace(/\${.*?_(.*?)}/g, (_, variableName) => {
+      const foundVariable = variableList.find(
+        (varaible) => varaible.name === variableName.trim()
+      );
+      return foundVariable ? `\${${foundVariable.id}}` : `\${${variableName}}`;
+    });
+  };
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const fieldValue = event.target.value;
+    setInputValue(fieldValue);
+    const cursorPos = inputRef.current?.selectionStart || 0;
+    const isDollarTyped = fieldValue[cursorPos - 1] === '$';
+
+    if (isHash) {
+      setShowDropdown(fieldValue.startsWith('#'));
+    } else {
+      if (isDollarTyped) {
+        setShowDropdown(true);
+      } else {
+        setShowDropdown(false);
+      }
+      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}}`;
+
+      let newValue;
+      if (isHash && inputValue[0] === '#') {
+        newValue = item.name + inputValue.slice(selectionEnd || 1);
+      } else {
+        newValue =
+          inputValue.slice(0, selectionStart || 0) +
+          dollarSyntax +
+          inputValue.slice(selectionEnd || 0);
+      }
+      setHashInputValue?.(item);
+      setInputValue(newValue);
+      setCursorPosition((selectionStart || 0) + dollarSyntax.length);
+      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) && !isHash && showCreateVariableIcon && (
+          <Icon
+            onClick={onCreateVariableClick}
+            name="add_variable"
+            width={24}
+            height={24}
+            hoverEffect
+          />
+        )}
+      </div>
+      {showDropdown && (
+    isHash ? (
+      <OptionsDropdown
+        position="relative"
+        width={dropdownWidth}
+        filteredOptions={filteredOptions}
+        onSelectVariable={handleDropdownClick}
+      />
+    ) : (
+      <VariableDropdown
+        position="relative"
+        width={dropdownWidth}
+        optionsList={variableList}
+        onSelectVariable={handleDropdownClick}
+      />
+    )
+  )}
+    </div>
+  );
+};
+
+export default ConditionalDropdown;

package/src/components/ConditionalDropdown/OptionsDropdown.tsx

@@ -0,0 +1,44 @@
+import type { FC, ReactNode } from 'react';
+import { dynamicObject, OptionsDropdownProps } from './types';
+import './ConditionalDropdown.scss';
+import Typography from '../Typography';
+import classNames from 'classnames';
+
+const OptionsDropdown:FC<OptionsDropdownProps> = ({
+    onSelectVariable,
+    dropdownPosition,
+    filteredOptions= [],
+    position = 'relative',
+    width = '300px',
+  }): ReactNode => {
+    return (
+      <div
+        className={classNames('ff-variable-dropdown', position)}
+        style={
+          dropdownPosition
+            ? {
+                top: dropdownPosition.top + 30,
+                left: dropdownPosition.left - 30,
+                width,
+              }
+            : { width }
+        }
+      >
+        {filteredOptions?.map((option: dynamicObject): ReactNode => {
+          return (
+            <div
+              className="ff-variable-option"
+              onClick={() => onSelectVariable(option)}
+              key={option?.id}
+            >
+              <Typography as="span" fontSize={14}>
+                {option?.name}
+              </Typography>
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+export default OptionsDropdown;

package/src/components/ConditionalDropdown/index.ts

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

package/src/components/ConditionalDropdown/types.ts

@@ -0,0 +1,160 @@
+import { dropdownPositionType } from "../Editor/types";
+
+export type dynamicObject = {
+  [key: string]: any;
+};
+
+export type TestDataObject = {
+  _id: string;
+  name: string;
+  actualPath: string;
+  searchKey: string;
+  parentId: string;
+}
+
+export interface ConditionalDropdownProps {
+  /**
+   * Label for the field
+   */
+  label?: string;
+
+  /**
+   * Value in the input should stored in this state
+   */
+  hashInputValue?: TestDataObject | dynamicObject;
+
+  /**
+   * Function storing and updating the inputValue state
+   */
+  setHashInputValue?:(value: dynamicObject | undefined) => void;
+
+  /**
+   * 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;
+
+   /**
+   * If true, dropdown opens when '#' is entered at the first position.
+   */
+   isHash?: boolean;
+   /**
+    * Options for the dropdown when `isHash` is true.
+    */
+   dataFiles?: dynamicObject[];
+}
+
+export interface OptionsDropdownProps {
+   /**
+   * Position whether absoloute or relative
+   */
+   position: 'absolute' | 'relative';
+
+   /**
+    * Dropdown width
+    */
+   width: string;
+   
+   /**
+    * chars entered to search in Input : 
+    */
+   filteredOptions?: dynamicObject[];
+ 
+   /**
+    * Function to handle click on variable
+    */
+   onSelectVariable: (variable: object) => void;
+ 
+   /**
+    * Dropdown postion used for dropdown placement
+    */
+   dropdownPosition?: dropdownPositionType;
+}

package/src/components/CreateVariable/CreateVariableSlider.tsx

@@ -57,7 +57,7 @@ const CreateVariableSlider: FC<CreateVariableProps> = ({
           required
           type="text"
           name="variable name"
-          value={variableName}
+          value={variableName || ''}
           onChange={(event) => onNameChange(event.target.value)}
         />
         <Select
@@ -73,7 +73,7 @@ const CreateVariableSlider: FC<CreateVariableProps> = ({
           required
           type="text"
           name="value"
-          value={value}
+          value={value || ''}
           onChange={(event) => onValueChange(event.target.value)}
         />
         <div className="ff-hide-value-content">

package/src/components/CreateVariable/types.ts

@@ -38,11 +38,11 @@ export interface CreateVariableProps {
   /**
    * onChange of name
    */
-  onNameChange: (value: string | boolean) => void;
+  onNameChange: (value: string) => void;
   /**
    * onChange of value
    */
-  onValueChange: (value: string | boolean) => void;
+  onValueChange: (value: string) => void;
   /**
    * Hide value
    */

package/src/components/EditTextField/EditTextField.scss

@@ -9,7 +9,7 @@
   .display-text-container {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 5px;
 
     .edit-button {
       padding: 4px 8px;

package/src/components/EditTextField/EditTextField.tsx

@@ -6,6 +6,7 @@ import HighlightText from '../HighlightText';
 import Icon from '../Icon';
 import Tooltip from '../Tooltip';
 import { capitalize } from '../../utils/capitalize/capitalize';
+import Input from '../Input/Input';
 
 const getErrorMessage = (
   inputValue: string,
@@ -38,8 +39,8 @@ const EditTextField: FC<LabelEditTextFieldTypes> = ({
   cancelIcon,
   editIcon,
   dropdownData = [],
-  width = '300px',
-  height = '22px',
+  // width = '',
+  // height = '',
   isOpen = false,
   confirmAction,
   onClick,
@@ -52,6 +53,7 @@ const EditTextField: FC<LabelEditTextFieldTypes> = ({
   );
   const [showError, setShowError] = useState('');
   const [isTextFieldModified, setIsTextFieldModified] = useState(false);
+  const isThrowingError = showError && isEditing ? true : false;
   const containerRef = useRef<HTMLDivElement | null>(null);
   const cancelRef = useRef<HTMLDivElement | null>(null);
 
@@ -96,27 +98,19 @@ const EditTextField: FC<LabelEditTextFieldTypes> = ({
       {isEditing ? (
         <div className="ff-label-text-field">
           <div className="ff-label-text-field-without-dropdown">
-            <input
-              type="text"
+            <Input
+              name="input"
+              label={label ? label : ''}
+              disabled={false}
+              error={isThrowingError}
+              placeholder="Enter your name"
               value={inputValue}
               onChange={handleTextFieldChange}
-              className={`ff-text-field ${
-                showError && isEditing
-                  ? 'ff-text-field-error-border'
-                  : 'ff-text-field-border'
-              } ${isTextFieldModified ? 'modified' : ''}`}
-              placeholder=" "
-              style={{ width, height }}
+              className={`
+                
+               ${isTextFieldModified ? 'modified' : ''}`}
+              type="text"
             />
-            <label
-              className={`ff-textfield-label  ${
-                showError && isEditing
-                  ? 'ff-text-field-error-text'
-                  : 'ff-text-field-text'
-              }`}
-            >
-              {label}
-            </label>
           </div>
           <div className="ff-icon-container">
             {confirmIcon && (