pixel-react-excel-sheet 1.0.11 → 1.0.12

package/src/components/Comment/type.ts

@@ -0,0 +1,36 @@
+export interface CommentType {
+  id?: string | number;
+  description?: string;
+  createdBy?: string;
+  modifiedBy?: string;
+  createdByUname?: string;
+  modifiedByUname?: string;
+  createdOn?: string;
+  modifiedOn?: string;
+  name?: string;
+  emailId?: string[];
+  commentParentId?: string;
+  comments: CommentType[];
+}
+
+export type HandleAddComment = (
+  newComment: CommentType,
+  parentCommentId?: string
+) => void;
+
+// Handles editing an existing comment
+export type HandleEditComment = (
+  commentId: string,
+  updatedDescription: string
+) => void;
+
+// Handles deleting a comment
+export type HandleDeleteComment = (commentId: string) => void;
+export type HandleNodeFunction = (commentId: string, value: string) => void;
+export interface CommentsProps {
+  commentsData: any;
+  handleAddComment: HandleAddComment;
+  handleEditComment: HandleEditComment;
+  handleDeleteComment: HandleDeleteComment;
+  onCommentsDataChange: (data: any) => void;
+}

package/src/components/CreateVariable/CreateVariableSlider.scss

@@ -0,0 +1,18 @@
+.ff-create-variable-slider {
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  .ff-hide-value-content {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.ff-create-slider-footer {
+  width: 100%;
+  gap: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}

package/src/components/CreateVariable/CreateVariableSlider.stories.tsx

@@ -0,0 +1,66 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import CreateVariableSlider from './CreateVariableSlider';
+import { CreateVariableProps } from './types';
+import React from 'react';
+
+const meta: Meta<typeof CreateVariableSlider> = {
+  title: 'Components/CreateVariableSlider',
+  component: CreateVariableSlider,
+};
+
+export default meta;
+type Story = StoryObj<typeof CreateVariableSlider>;
+
+export const WithState: Story = {
+  render: (args) => {
+    const [variableName, setVariableName] = useState('');
+    const [value, setValue] = useState('');
+    const [selectedVariableType, setSelectedVariableType] = useState({
+      label: 'Local Variable',
+      value: 'LOCAL',
+    });
+    const [hideValue, setHideValue] = useState(false);
+
+    const variableTypeList = [
+      { label: 'Local Variable', value: 'LOCAL' },
+      { label: 'Global Variable', value: 'GLOBAL' },
+      { label: 'Project Environment Variable', value: 'PROJECT_ENVIRONMENT' },
+    ];
+    const handleNameChange = (value) => {
+      setVariableName(value);
+    };
+    const handleValueChange = (value) => {
+      setValue(value);
+    };
+    const handleTypeChange = (value) => {
+      setSelectedVariableType(value);
+    };
+    const handleSubmit = () => {
+      let variable = {
+        name: variableName,
+        value,
+        type: selectedVariableType.value,
+        hideValue,
+      };
+      console.log('Variable :', variable);
+    };
+
+    return (
+      <CreateVariableSlider
+        {...args}
+        isOpen={true} // Ensures the drawer is open for interaction
+        variableName={variableName}
+        value={value}
+        selectedVariableType={selectedVariableType}
+        hideValue={hideValue}
+        variableTypesList={variableTypeList}
+        onNameChange={handleNameChange}
+        onValueChange={handleValueChange}
+        onVariableTypeChange={handleTypeChange}
+        onHideChange={setHideValue}
+        handleSubmit={handleSubmit}
+      />
+    );
+  },
+};

package/src/components/CreateVariable/CreateVariableSlider.tsx

@@ -0,0 +1,95 @@
+import { type FC, type JSX } from 'react';
+import Drawer from '../Drawer';
+import { CreateVariableProps } from './types';
+import Input from '../Input';
+import Select from '../Select';
+import './CreateVariableSlider.scss';
+import Checkbox from '../Checkbox';
+import Icon from '../Icon';
+import Button from '../Button';
+import Tooltip from '../Tooltip';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+
+const CreateVariableSlider: FC<CreateVariableProps> = ({
+  isOpen,
+  variableTypesList = [],
+  onClose,
+  onNameChange,
+  onValueChange,
+  variableName,
+  value,
+  onVariableTypeChange,
+  selectedVariableType,
+  hideValue = false,
+  onHideChange,
+  handleSubmit,
+}): JSX.Element => {
+  const FooterContent: FC = (): JSX.Element => {
+    return (
+      <div className="ff-create-slider-footer">
+        <Button onClick={onClose} label="Cancel" variant="tertiary" />
+        <Button
+          variant="primary"
+          label="create"
+          type="submit"
+          onClick={handleSubmit}
+          disabled={checkEmpty(variableName) || checkEmpty(value)}
+        />
+      </div>
+    );
+  };
+  return (
+    <Drawer
+      onClose={onClose}
+      isOpen={isOpen}
+      title="Create Variable"
+      width="284px"
+      height="222px"
+      top="35%"
+      right={8}
+      isFooterRequired={true}
+      overlay
+      footerContent={<FooterContent />}
+    >
+      <div className="ff-create-variable-slider">
+        <Input
+          label="Variable Name"
+          required
+          type="text"
+          name="variable name"
+          value={variableName}
+          onChange={(event) => onNameChange(event.target.value)}
+        />
+        <Select
+          label="Variable Type"
+          required
+          onChange={(option: any) => onVariableTypeChange(option)}
+          selectedOption={selectedVariableType}
+          optionsList={variableTypesList}
+          optionZIndex={99999}
+        />
+        <Input
+          label="Variable Value"
+          required
+          type="text"
+          name="value"
+          value={value}
+          onChange={(event) => onValueChange(event.target.value)}
+        />
+        <div className="ff-hide-value-content">
+          <Checkbox
+            onChange={(event) => onHideChange(event.target.checked)}
+            name="hide value"
+            label="Hide Value"
+            checked={hideValue}
+          />
+          <Tooltip title="Once the value is hidden, it cannot be undone">
+            <Icon name="info" width={12} height={12} />
+          </Tooltip>
+        </div>
+      </div>
+    </Drawer>
+  );
+};
+
+export default CreateVariableSlider;

package/src/components/CreateVariable/index.ts

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

package/src/components/CreateVariable/types.ts

@@ -0,0 +1,58 @@
+export type variableType = 'LOCAL' | 'GLOBAL' | 'GROUP' | 'PROJECT_ENVIRONMENT';
+
+export type DynamicObj = {
+  [key: string]: any;
+};
+
+export interface CreateVariableProps {
+  /**
+   * Open Create variable Slider
+   */
+  isOpen: boolean;
+  /**
+   * Value for the variable name
+   */
+  variableName: string;
+  /**
+   * Value for the variable to be created
+   */
+  value: string;
+  /**
+   * List for the variable types
+   */
+  variableTypesList: DynamicObj[];
+  /**
+   * Selected variable type
+   */
+  selectedVariableType: DynamicObj;
+  /**
+   * Function to handle variable type change
+   * @param option
+   * @returns
+   */
+  onVariableTypeChange: (option: DynamicObj) => void;
+  /**
+   * Function to handle close
+   */
+  onClose?: () => void;
+  /**
+   * onChange of name
+   */
+  onNameChange: (value: string | boolean) => void;
+  /**
+   * onChange of value
+   */
+  onValueChange: (value: string | boolean) => void;
+  /**
+   * Hide value
+   */
+  hideValue: boolean;
+  /**
+   * onChange for hide value
+   */
+  onHideChange: (value: boolean) => void;
+  /**
+   * Function to handle submit
+   */
+  handleSubmit: () => void;
+}

package/src/components/Drawer/Drawer.scss

@@ -19,7 +19,6 @@
     right: 0;
     bottom: 0;
     top: 87px;
-    min-width: 450px;
     background-color: var(--primary-button-text-color);
     z-index: 999;
     transform: translateX(100%);
@@ -78,7 +77,7 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        gap: 12px;
+        gap: 8px;
         height: 24px;
 
         .ff-action-button {
@@ -101,6 +100,7 @@
           .ff-custom-header {
             background-color: var(--drawer-footer-bg);
             padding: 4px 8px;
+            width: 100%;
           }
         }
       }
@@ -123,6 +123,7 @@
       z-index: 1000;
       background-color: var(--base-bg-color);
       transform: translateY(3px);
+      border-radius: 0 0 4px 4px;
 
       .button-container {
         display: flex;

package/src/components/Drawer/Drawer.stories.tsx

@@ -115,7 +115,6 @@ export const WithTertiaryButtons: Story = {
   },
 };
 
-
 export const WithCustomZIndex: Story = {
   args: {
     ...defaultArgs,

package/src/components/Drawer/Drawer.tsx

@@ -36,6 +36,9 @@ const Drawer: FC<DrawerProps> = ({
   zIndex = 999,
   secondLayerZIndex = false,
   top,
+  height,
+  width,
+  right = 0,
 }: DrawerProps) => {
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -85,7 +88,7 @@ const Drawer: FC<DrawerProps> = ({
         className={classNames('ff-drawer', `ff-drawer--${drawerSize}`, {
           'ff-drawer--open': isOpen,
         })}
-        style={{ zIndex, top }}
+        style={{ zIndex, top, height, width, right }}
       >
         {showHeader && (
           <div

package/src/components/Drawer/Types.ts

@@ -141,4 +141,17 @@ export interface DrawerProps {
    * Custom top for the drawer
    */
   top?: string;
+  /**
+   * Height of the drawer
+   */
+  height?: string;
+  /**
+   *
+   * width of the drawer
+   */
+  width?: string;
+  /**
+   * Position from right
+   */
+  right?: string | number;
 }

package/src/components/Editor/Editor.stories.tsx

@@ -2,7 +2,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import Editor from './Editor';
 import { EditorProps } from './types';
-import { varibaleList } from './constants';
+import { variableList } from './constants';
 import { useState } from 'react';
 
 const meta: Meta<EditorProps> = {
@@ -49,6 +49,6 @@ export const Default: Story = {
     width: '100%',
     height: '90vh',
     readOnly: false,
-    variableOptionsList: varibaleList,
+    variableOptionsList: variableList,
   },
 };

package/src/components/Editor/Editor.tsx

@@ -115,8 +115,8 @@ const Editor = forwardRef<any, EditorProps>(
         option?.type === 'GLOBAL'
           ? 'GV'
           : option?.type === 'LOCAL'
-            ? 'LV'
-            : 'PEV'
+          ? 'LV'
+          : 'PEV'
       );
     };
 
@@ -235,6 +235,8 @@ const Editor = forwardRef<any, EditorProps>(
         />
         {showDropdown && dropdownPosition && (
           <VariableDropdown
+            position="absolute"
+            width="300px"
             optionsList={variableOptionsList}
             onSelectVariable={handleSelectVariable}
             dropdownPosition={dropdownPosition}

package/src/components/Editor/VariableDropdown.scss

@@ -1,6 +1,4 @@
 .ff-variable-dropdown {
-  position: absolute;
-  width: 200px;
   height: 300px;
   display: flex;
   flex-direction: column;
@@ -8,6 +6,14 @@
   border: 1px solid var(--border-color);
   border-radius: 3px;
   z-index: 9999;
+  overflow: hidden;
+  overflow-y: auto;
+  &.absolute {
+    position: absolute;
+  }
+  &.relative {
+    position: relative;
+  }
 }
 .ff-variable-option {
   display: flex;

package/src/components/Editor/VariableDropdown.tsx

@@ -3,19 +3,27 @@ import { VariableDropdownProps, DyanamicObj } from './types';
 import Icon from '../Icon';
 import './VariableDropdown.scss';
 import Typography from '../Typography';
+import cx from 'classnames';
 
 const VariableDropdown: FC<VariableDropdownProps> = ({
   optionsList = [],
   onSelectVariable,
   dropdownPosition,
+  position = 'relative',
+  width = '300px',
 }): ReactNode => {
   return (
     <div
-      className="ff-variable-dropdown"
-      style={{
-        top: dropdownPosition.top + 30,
-        left: dropdownPosition.left - 30,
-      }}
+      className={cx('ff-variable-dropdown', position)}
+      style={
+        dropdownPosition
+          ? {
+              top: dropdownPosition.top + 30,
+              left: dropdownPosition.left - 30,
+              width,
+            }
+          : { width }
+      }
     >
       {optionsList?.map((option: DyanamicObj): ReactNode => {
         return (
@@ -32,8 +40,8 @@ const VariableDropdown: FC<VariableDropdownProps> = ({
                 option?.type === 'LOCAL'
                   ? 'local_variable_icon'
                   : option?.type === 'GLOBAL'
-                    ? 'global_variable_icon'
-                    : 'project_env_variable_icon'
+                  ? 'global_variable_icon'
+                  : 'project_env_variable_icon'
               }
               height={16}
               width={16}

package/src/components/Editor/constants.ts

@@ -8,7 +8,7 @@ export const optionsList: option[] = [
   { label: 'Plain Text', value: 'plaintext' },
 ];
 
-export const varibaleList: DyanamicObj[] = [
+export const variableList: DyanamicObj[] = [
   {
     createdBy: 'USR1428',
     modifiedBy: '--',

package/src/components/Editor/types.ts

@@ -58,10 +58,20 @@ export interface dropdownPositionType {
 }
 
 export interface VariableDropdownProps {
+  /**
+   * Position whether absoloute or relative
+   */
+  position: 'absolute' | 'relative';
+
+  /**
+   * Dropdown width
+   */
+  width: string;
+
   /**
    * List of variables
    */
-  optionsList: {}[];
+  optionsList: DyanamicObj[];
 
   /**
    * Function to handle click on variable
@@ -71,7 +81,7 @@ export interface VariableDropdownProps {
   /**
    * Dropdown postion used for dropdown placement
    */
-  dropdownPosition: dropdownPositionType;
+  dropdownPosition?: dropdownPositionType;
 }
 
 export interface option {

package/src/components/Excel/ExcelFile/ExcelFile.scss

@@ -2,11 +2,12 @@
   .ff-excel-book {
     // position: relative;
     z-index: 1000;
+    height: 564px;
+
 
     .ff-excel-sheet {
       position: static;
       top: 0;
-      height: auto;
     }
 
     .ff-excel-sheet-bar {

package/src/components/Excel/ExcelFile/ExcelFile.tsx

@@ -9,7 +9,10 @@ import { toast } from '../../Toastify/Toastify';
 import { ContextMenuState } from './ExcelFileComponents/types';
 import ExcelContextMenu from '../ExcelContextMenu/ExcelContextMenu';
 import Typography from '../../Typography';
-import { convertStyleToBackend, convertStyleToFrontend } from '../dataConversion';
+import {
+  convertStyleToBackend,
+  convertStyleToFrontend,
+} from '../dataConversion';
 import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
 
 interface ExcelFileProps {
@@ -34,7 +37,9 @@ interface ExcelFileProps {
 
 const ExcelFile: React.FC<ExcelFileProps> = ({
   excelData,
-  onSave = (saveData) => {saveData()},
+  onSave = (saveData) => {
+    saveData();
+  },
 }) => {
   const [sheetNames, setSheetNames] = useState<string[]>([]);
   const [contextMenu, setContextMenu] = React.useState<ContextMenuState>({
@@ -46,11 +51,19 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
   const EmptyRow: CellBase = {
     value: '',
     style: {
-      color: 'var(--text-color)',
+      color: 'var(--input-hover-border-color)',
       backgroundColor: 'var(--drawer-footer-bg)',
-      borderColor: 'var(--toggle-strip-color)',
-      textDecoration: 'none',
-      textDecorationStyle: 'solid',
+      borderColor: 'var(--excel-sheet-border)',
+      textDecoration: 'none solid',
+      borderRight: `1px solid var(--excel-sheet-border)`,
+      borderLeft: `1px solid var(--excel-sheet-border)`,
+      borderTop: `1px solid var(--excel-sheet-border)`,
+      borderBottom: `1px solid var(--excel-sheet-border)`,
+      fontSize: '15px',
+      fontWeight: 'normal',
+      fontStyle: 'normal',
+      fontFamily: 'Times New Roman',
+      textAlign: 'center',
     },
   };
 
@@ -128,7 +141,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
             }
             spreadsheetData[rowIndex][colIndex] = {
               value: checkVal(cell.value),
-              style: convertStyleToFrontend(cell?.style) ,
+              style: convertStyleToFrontend(cell?.style),
               type: true,
             };
           }
@@ -153,7 +166,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
     },
     [onSave]
   );
-  
+
   React.useEffect(() => {
     document.addEventListener('keydown', handleSave);
     return () => {
@@ -176,18 +189,21 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
             }, -1);
 
             const filteredRow = row
-            .map((cell, index) => {
-              if (cell && cell.value !== null) {
-                return {
-                  value: cell.value,
-                  styles: convertStyleToBackend(cell.style ?? {}),
-                };
-              } else if (cell && cell.type || index <= lastIndex) {
-                return { value: '', styles: convertStyleToBackend(cell?.style ?? {}) };
-              }
-              return null;
-            })
-            .filter((cell) => cell !== null);
+              .map((cell, index) => {
+                if (cell && cell.value !== null) {
+                  return {
+                    value: cell.value,
+                    styles: convertStyleToBackend(cell.style ?? {}),
+                  };
+                } else if ((cell && cell.type) || index <= lastIndex) {
+                  return {
+                    value: '',
+                    styles: convertStyleToBackend(cell?.style ?? {}),
+                  };
+                }
+                return null;
+              })
+              .filter((cell) => cell !== null);
 
             return filteredRow.length > 0 ? filteredRow : [];
           }) || [];
@@ -208,7 +224,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
     onSave(savedData);
     toast.success('File saved successfully!');
   };
-  
+
   const onEvaluateChange = (data: Matrix.Matrix<CellBase>) => {
     setWorksheetsData((prev) => ({ ...prev, [pageRef.current]: data }));
     onSaveWorksheetData();

package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx

@@ -21,6 +21,10 @@ const ActiveCell: React.FC<Props> = (props) => {
     [dispatch]
   );
   const edit = React.useCallback(() => dispatch(Actions.edit()), [dispatch]);
+  const autoFill = React.useCallback(
+    (value: boolean) => dispatch(Actions.autoFill(value)),
+    [dispatch]
+  );
   const commit = React.useCallback(
     (changes: Types.CommitChanges<Types.CellBase>) =>
       dispatch(Actions.commit(changes)),
@@ -103,6 +107,10 @@ const ActiveCell: React.FC<Props> = (props) => {
   const DataEditor = (cell && cell.DataEditor) || props.DataEditor;
   const readOnly = cell && cell.readOnly;
 
+  const handleMouseDown = React.useCallback(() => {
+    mode === 'view' ? autoFill(true) : autoFill(false);
+  }, [mode, autoFill]);
+
   return hidden ? null : (
     <div
       ref={rootRef}
@@ -124,6 +132,10 @@ const ActiveCell: React.FC<Props> = (props) => {
           exitEditMode={view}
         />
       )}
+      <div
+        onMouseDown={handleMouseDown}
+        className="select_dot"
+      ></div>
     </div>
   );
 };