pixel-react-excel-sheet 1.0.11 → 1.0.13

package/src/components/Comment/comment/Comment.tsx

@@ -0,0 +1,206 @@
+import { CommentType } from '../type';
+import { useState, useEffect } from 'react';
+import '../Comments.scss';
+import Icon from '../../Icon';
+
+interface CommentProps {
+  handleInsertNode: any;
+  handleEditNode: any;
+  handleDeleteNode: (commentId: any) => any;
+  comment: CommentType;
+  depth?: number;
+}
+
+const Comment = ({
+  handleInsertNode,
+  handleEditNode,
+  handleDeleteNode,
+  comment,
+  depth = 0,
+}: CommentProps) => {
+  const [input, setInput] = useState('');
+  const [editMode, setEditMode] = useState(false);
+  const [showInput, setShowInput] = useState(false);
+  const [expand, setExpand] = useState(true);
+
+  const { modifiedByUname, createdByUname, modifiedOn, createdOn } =
+    comment || {};
+  const randomPastTime = modifiedOn ?? createdOn ?? new Date().toLocaleString();
+  const firstName = modifiedByUname ?? createdByUname ?? 'Anonymous';
+
+  const isDepthLimitReached = depth > 2;
+  const avatar = firstName ? firstName.charAt(0).toUpperCase() : 'A';
+
+  useEffect(() => {
+    if (editMode && comment.description) {
+      setInput(comment.description);
+    }
+  }, [editMode, comment.description]);
+
+  const handleNewComment = () => {
+    setExpand(!expand);
+    setShowInput(true);
+  };
+
+  const onAddComment = () => {
+    if (input.length === 0) return;
+    if (editMode) {
+      handleEditNode(comment.id, input);
+    } else {
+      setExpand(true);
+      handleInsertNode(comment.id, input);
+      setShowInput(false);
+      setInput('');
+    }
+    if (editMode) setEditMode(false);
+  };
+  return (
+    <div className="commentsContainer">
+      <div className={depth === 0 ? 'comment-wrapper-one' : 'comment-wrapper'}>
+        <div className={depth === 0 ? 'inputContainer' : 'commentContainer'}>
+          {depth === 0 ? (
+            <div className="first-comment">
+              <h5 className="first-comment-heading">Comments</h5>
+              <div className="input-wrapper">
+                <textarea
+                  className="inputContainer__input first_input"
+                  rows={3}
+                  autoFocus
+                  value={input}
+                  onChange={(e) => setInput(e.target.value)}
+                  placeholder={'Add a comment'}
+                />
+                <span className="reply comment reply-comment">
+                  <Icon
+                    name="send_to_steps"
+                    onClick={onAddComment}
+                    color="71347B"
+                  />
+                </span>
+              </div>
+            </div>
+          ) : (
+            <>
+              <div className="commentContainer__avatar">{avatar}</div>
+              <div className="ff-message-container">
+                <div className="ff-message">
+                  <div className="ff-message-name" style={{ fontWeight: 700 }}>
+                    {firstName}
+                  </div>
+                  <div className="ff-message-time">{randomPastTime}</div>
+                </div>
+
+                <div className="editable-text">{comment.description}</div>
+              </div>
+            </>
+          )}
+        </div>
+
+        {editMode && (
+          <div className="inputContainer">
+            <input
+              type="text"
+              className="editable-text inputContainer__input"
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              autoFocus
+            />
+          </div>
+        )}
+        {depth > 0 && (
+          <div className="comment-actions">
+            {editMode ? (
+              <>
+                <div
+                  className="reply"
+                  onClick={() => {
+                    onAddComment();
+                    setEditMode(false);
+                  }}
+                >
+                  <Icon name="save_as_step" width={12} height={12} />
+                </div>
+                <div
+                  className="reply"
+                  onClick={() => {
+                    setEditMode(false);
+                  }}
+                >
+                  <Icon name="close" color="#A91224" width={10} height={10} />
+                </div>
+              </>
+            ) : (
+              <>
+                {!isDepthLimitReached && (
+                  <div className="reply" onClick={handleNewComment}>
+                    {expand ? (
+                      <Icon name="window_minimize" width={12} height={12} />
+                    ) : (
+                      <>
+                        <Icon name="plus_icon" width={12} height={12} />
+                        <Icon name="add_page" width={12} height={12} />
+                      </>
+                    )}
+                  </div>
+                )}
+                <div className="reply" onClick={() => setEditMode(true)}>
+                  <Icon name="edit" width={12} height={12} />
+                </div>
+                <div
+                  className="reply"
+                  onClick={() => handleDeleteNode(comment.id)}
+                >
+                  <Icon name="delete" color="#A91224" width={12} height={12} />
+                </div>
+              </>
+            )}
+          </div>
+        )}
+        <div
+          className={comment?.comments?.length > 0 ? 'child-comments' : ''}
+          style={{
+            display: expand ? 'block' : 'none',
+            paddingLeft: 25,
+          }}
+        >
+          {showInput && (
+            <div className="inputContainer">
+              <input
+                type="text"
+                className="inputContainer__input adding-text"
+                autoFocus
+                onChange={(e) => setInput(e.target.value)}
+              />
+              <div className="reply-text">
+                <div className="reply" onClick={onAddComment}>
+                  <Icon name="send_to_steps" width={12} height={12} />
+                </div>
+                <div
+                  className="reply"
+                  onClick={() => {
+                    setShowInput(false);
+                    if (!comment?.comments?.length) setExpand(false);
+                  }}
+                >
+                  <Icon name="close" width={10} height={10} color="#A91224" />
+                </div>
+              </div>
+            </div>
+          )}
+          {comment?.comments?.map((cmnt) => (
+            <Comment
+              key={cmnt.id}
+              handleInsertNode={handleInsertNode}
+              handleEditNode={handleEditNode}
+              handleDeleteNode={handleDeleteNode}
+              comment={cmnt}
+              depth={depth + 1}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Comment;

package/src/components/Comment/comment/useNode.ts

@@ -0,0 +1,51 @@
+import { CommentType } from '../type';
+
+const useNode = () => {
+  const insertNode = (
+    tree: CommentType,
+    commentId: number | string,
+    item: string
+  ): CommentType => {
+    if (tree.id === commentId) {
+      tree.comments.push({
+        id: Date.now().toString(),
+        description: item,
+        comments: [],
+      });
+      return tree;
+    }
+
+    tree.comments = tree.comments.map((child) =>
+      insertNode(child, commentId, item)
+    );
+    return tree;
+  };
+
+  const editNode = (
+    tree: CommentType,
+    commentId: number | string,
+    value: string
+  ): CommentType => {
+    if (tree.id === commentId) {
+      tree.description = value;
+      return tree;
+    }
+
+    tree.comments = tree.comments.map((child) =>
+      editNode(child, commentId, value)
+    );
+    return tree;
+  };
+
+  const deleteNode = (tree: CommentType, commentId: number): CommentType => {
+    if (!tree) return tree;
+    tree.comments = tree.comments
+      .filter((child) => child.id !== commentId)
+      .map((child) => deleteNode(child, commentId));
+    return tree;
+  };
+
+  return { insertNode, editNode, deleteNode };
+};
+
+export default useNode;

package/src/components/Comment/index.ts

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

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/DatePicker/DatePicker.scss

@@ -8,6 +8,8 @@
     --rdp-accent-color: var(--brand-color);
     --rdp-day-height: 24px;
     --rdp-day-width: 36px;
+    --rdp-day_button-height: 24px;
+    --rdp-day_button-width: 36px;
     @include fonts.fontPoppins(12px);
     --rdp-font-family: 'Poppins', sans-serif;
   }
@@ -157,6 +159,15 @@
           background-color: var(--brand-color);
           color: var(--primary-button-text-color);
         }
+        &--disabled {
+          color: var(--text-color-light);
+          cursor: default;
+
+          &.ff-custom-month--selected,
+          &.ff-custom-year--selected {
+            background-color: var(--disable-color);
+          }
+        }
       }
     }
 

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -172,3 +172,22 @@ export const Dateonly: Story = {
     );
   },
 };
+
+export const PastOneYear: Story = {
+  render: (args) => {
+    const [selectedDate, setSelectDate] = useState<Date | undefined>();
+
+    return (
+      <CustomDatePicker
+        {...args}
+        value={selectedDate}
+        onChange={setSelectDate}
+        calendarWidth={240}
+        maxDate={new Date()}
+        minDate={new Date(new Date().setFullYear(new Date().getFullYear() - 1))}
+        dateOnly
+        dateFormat="dd MMM yyyy"
+      />
+    );
+  },
+};