pixel-react-excel-sheet 1.0.11 → 1.0.13

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
+import React, { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import Checkbox from './Checkbox';
-import { useState } from 'react';
 
 const meta: Meta<typeof Checkbox> = {
   component: Checkbox,
@@ -10,38 +10,114 @@ const meta: Meta<typeof Checkbox> = {
     layout: 'centered',
   },
 };
+
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+const useCheckboxState = (initialState = false) => {
+  const [checked, setChecked] = useState(initialState);
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(event.target.checked);
+  };
+  return { checked, handleChange };
+};
+
+// Story: Default Checkbox
 export const Default: Story = {
-  args: {
-    label: 'Enter label',
+  render: () => {
+    const { checked, handleChange } = useCheckboxState();
+    return <Checkbox label="Default Checkbox" checked={checked} onChange={handleChange} />;
   },
 };
 
+// Story: Partial Checkbox
 export const Partial: Story = {
+  render: () => {
+    const { checked, handleChange } = useCheckboxState();
+    const [partial, setPartial] = useState(true);
+
+    const handlePartialChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      setPartial(!event.target.checked);
+      handleChange(event);
+    };
+
+    return (
+      <Checkbox
+        label="Partially Selected Checkbox"
+        partial={partial}
+        checked={checked}
+        onChange={handlePartialChange}
+      />
+    );
+  },
+};
+
+// Story: Disabled Checkbox
+export const Disabled: Story = {
   args: {
-    label: 'Enter label',
-    partial: true,
+    label: 'Disabled Checkbox',
+    disabled: true,
   },
 };
 
-export const Controlled: Story = {
+// Story: Checkbox Variants
+export const Variants: Story = {
   render: () => {
-    const [checked, setChecked] = useState(false);
+    const variants = ['passed', 'failed', 'warning', 'skipped', 'flaky'] as const;
+    const initialStates = variants.reduce((acc, variant) => ({ ...acc, [variant]: false }), {});
+    const [checkedStates, setCheckedStates] = useState(initialStates);
 
-    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      setChecked((event.target as HTMLInputElement).checked);
+    const handleChange = (variant: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
+      setCheckedStates({ ...checkedStates, [variant]: event.target.checked });
     };
 
     return (
-      <Checkbox
-        label="click here to proceed with controlled component"
-        disabled={false}
-        checked={checked}
-        onChange={handleChange}
-      />
+      <div style={{ display: 'flex', gap: '16px' }}>
+        {variants.map((variant) => (
+          <Checkbox
+            key={variant}
+            label={variant.charAt(0).toUpperCase() + variant.slice(1)}
+            variant={variant}
+            checked={checkedStates[variant]}
+            onChange={handleChange(variant)}
+          />
+        ))}
+      </div>
+    );
+  },
+};
+
+// Story: Controlled Checkbox
+export const Controlled: Story = {
+  render: () => {
+    const { checked, handleChange } = useCheckboxState();
+    return <Checkbox label="Controlled Checkbox" checked={checked} onChange={handleChange} />;
+  },
+};
+
+// Story: All Features Showcase
+export const AllFeatures: Story = {
+  render: () => {
+    const { checked: defaultChecked, handleChange: handleDefaultChange } = useCheckboxState();
+    const { checked: partialChecked, handleChange: handlePartialChange } = useCheckboxState(true);
+    const variants = ['passed', 'failed', 'warning', 'skipped', 'flaky'] as const;
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+        <Checkbox label="Default Checkbox" checked={defaultChecked} onChange={handleDefaultChange} />
+        <Checkbox
+          label="Partially Selected"
+          partial={partialChecked}
+          onChange={handlePartialChange}
+        />
+        <Checkbox label="Disabled Checkbox" disabled />
+        <div style={{ display: 'flex', gap: '16px' }}>
+          {variants.map((variant) => (
+            <Checkbox key={variant} label={variant} variant={variant} />
+          ))}
+        </div>
+      </div>
     );
   },
 };

package/src/components/Checkbox/Checkbox.tsx

@@ -14,6 +14,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
   checked: initialChecked = false,
   partial = false,
   onChange,
+  variant
 }) => {
   const [checked, setChecked] = useState(initialChecked);
 
@@ -34,8 +35,10 @@ const Checkbox: React.FC<CheckboxProps> = ({
       />
       <span
         className={classNames('ff-checkbox-custom', {
-          'ff-checkbox-checked': checked,
+          'ff-checkbox-checked': checked ,
           'ff-storybook-checkbox--partial': partial && !checked,
+          [`ff-checkbox--${variant}`]: variant,
+          [`ff-checkbox-checked--${variant}`]: checked && variant,
         })}
       >
         {checked && (

package/src/components/Checkbox/types.ts

@@ -27,4 +27,8 @@ export interface CheckboxProps {
    * For partially checked checkbox
    */
   partial?: boolean;
+  /**
+   * For variant color
+   */
+  variant?: 'passed' | 'failed' | 'warning' | 'skipped' | 'flaky';
 }

package/src/components/Comment/Comments.scss

@@ -0,0 +1,166 @@
+@use '../../assets/styles/fonts';
+.ff-comments-container {
+  display: flex;
+  flex-direction: column;
+
+  .comment-wrapper-one {
+    position: relative;
+    padding-left: 20px;
+  }
+  .comment-wrapper {
+    position: relative;
+    margin-bottom: 10px;
+  }
+
+  .commentContainer {
+    margin-bottom: 10px;
+    width: 75vw;
+    max-width: fit-content;
+    border-radius: 5px;
+  }
+
+  .commentContainer__avatar {
+    background-color: var(--ff-comment-input-border-color);
+    color: var(--ff-comment-avatar-text-color);
+    font-weight: bold;
+    border-radius: 4px;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 10px;
+    position: absolute;
+    top: -5px;
+    left: -40px;
+    z-index: 1;
+    @extend .fontSm;
+  }
+
+  .comment-actions {
+    display: flex;
+  }
+  .first-comment {
+    min-width: 632px;
+    min-height: 74px;
+    border-radius: 8px;
+    border: 1px solid var(--ff-comment-border-color);
+    @extend .fontSm;
+  }
+  .first-comment-heading {
+    margin: 5px;
+  }
+  .input-wrapper {
+    position: relative;
+    display: flex;
+    padding-top: 6px;
+    padding-bottom: 10px;
+  }
+
+  .inputContainer__input {
+    padding: 5px;
+    border: 1px solid var(--ff-comment-border-color);
+    border-radius: 4px;
+    resize: none;
+    margin: 0 10px;
+    outline: none;
+    &:focus,
+    &:focus-visible {
+      outline: 1px solid var(--ff-comment-input-border-color);
+    }
+  }
+  .inputEditContainer__input {
+    padding: 5px;
+    border: 1px solid var(--ff-comment-border-color);
+    border-radius: 4px;
+    width: 100%;
+    outline: none;
+    &:focus,
+    &:focus-visible {
+      outline: 1px solid var(--ff-comment-input-border-color);
+    }
+  }
+
+  .reply {
+    margin-right: 5px;
+    cursor: pointer;
+  }
+  .reply-comment {
+    right: 2%;
+    bottom: 15%;
+    position: absolute;
+    background: var(--ff-comment-avatar-text-color);
+    height: 20px;
+    width: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+  }
+  .child-comments {
+    position: relative;
+    margin-left: 15px;
+    margin-top: 10px;
+    padding-left: 20px;
+    border-left: 1px solid var(--ff-comment-border-color);
+    border-bottom-left-radius: 15px;
+    padding-top: 10px;
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -2px;
+      width: 2px;
+      height: 15px;
+      background-color: var(--ff-comment-border-color);
+      border-radius: 15px 0 0 15px;
+    }
+  }
+  .reply-text {
+    display: flex;
+  }
+  .ff-message-container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+  .ff-message {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+  }
+  .ff-message-name {
+    @extend .fontSm;
+  }
+  .ff-message-time {
+    @extend .fontXs;
+  }
+  .editable-text {
+    word-wrap: break-word;
+    color: var(--ff-comment-text-color);
+    &:focus,
+    &:focus-visible {
+      outline: 1px solid var(--ff-comment-input-border-color);
+    }
+    @extend .fontSm;
+  }
+  .adding-text,
+  .editable-text {
+    width: 95%;
+  }
+
+  .first_input {
+    width: 100%;
+    &:focus {
+      outline: none;
+      border-color: var(--ff-comment-input-border-color);
+    }
+    &::-webkit-scrollbar {
+      width: 3px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--ff-comment-text-color);
+      border-radius: 4px;
+    }
+  }
+}

package/src/components/Comment/Comments.stories.tsx

@@ -0,0 +1,212 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Comments from './Comments';
+import '../../assets/styles/_colors.scss';
+import './Comments.scss';
+import React from 'react';
+
+const meta: Meta<typeof Comments> = {
+  title: 'Components/Comments',
+  component: Comments,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Comments>;
+export const basicCommentWithOutData: Story = {
+  render: () => {
+    const handleCommentsDataChange = (inputValue: string) => {
+      //DEMO: we are getting that value from LabelEditTextField
+      console.info('Confirmed input value:', inputValue);
+    };
+    return (
+      <Comments
+        onCommentsDataChange={handleCommentsDataChange}
+        commentsData={{
+          comments: [],
+        }}
+        handleAddComment={() => {}}
+        handleEditComment={() => {}}
+        handleDeleteComment={() => {}}
+      />
+    );
+  },
+};
+
+export const basicCommentWithData: Story = {
+  render: () => {
+    const handleCommentsDataChange = (inputValue: string) => {
+      //DEMO: we are getting that value from LabelEditTextField
+      console.info('Confirmed input value:', inputValue);
+    };
+    return (
+      <Comments
+        onCommentsDataChange={handleCommentsDataChange}
+        commentsData={{
+          createdBy: 'USR29890',
+          modifiedBy: 'USR29890',
+          createdByUname: 'Asha',
+          modifiedByUname: 'Asha',
+          createdOn: '13 Nov 2024 06:05 PM',
+          modifiedOn: '13 Nov 2024 06:05 PM',
+          id: 1,
+          name: 'Asha',
+          emailId: [],
+          description: 'Comment 1',
+          commentParentId: '',
+          comments: [
+            {
+              createdBy: 'USR29890',
+              modifiedBy: 'USR29890',
+              createdByUname: 'Asha',
+              modifiedByUname: 'Asha',
+              createdOn: '13 Nov 2024 06:08 PM',
+              modifiedOn: '13 Nov 2024 06:08 PM',
+              id: 2,
+              name: 'Asha',
+              emailId: [],
+              description: 'Reply 1',
+              commentParentId: 'b995a9a0-a88e-4950-bb7e-1e2e820eca59',
+              comments: [
+                {
+                  createdBy: 'USR29890',
+                  modifiedBy: 'USR29890',
+                  createdByUname: 'Asha',
+                  modifiedByUname: 'Asha',
+                  createdOn: '13 Nov 2024 06:08 PM',
+                  modifiedOn: '13 Nov 2024 06:08 PM',
+                  id: 3,
+                  name: 'Asha',
+                  emailId: [],
+                  description: 'Sub Reply 1.1',
+                  commentParentId: '5142f486-bde3-4fca-9a1c-541cdad7422c',
+                  comments: [],
+                },
+                {
+                  createdBy: 'USR29890',
+                  modifiedBy: 'USR29890',
+                  createdByUname: 'Asha',
+                  modifiedByUname: 'Asha',
+                  createdOn: '13 Nov 2024 06:09 PM',
+                  modifiedOn: '13 Nov 2024 06:09 PM',
+                  id: 4,
+                  name: 'Asha',
+                  emailId: [],
+                  description: 'Sub Reply 1.2',
+                  commentParentId: '5142f486-bde3-4fca-9a1c-541cdad7422c',
+                  comments: [],
+                },
+                {
+                  createdBy: 'USR29890',
+                  modifiedBy: 'USR29890',
+                  createdByUname: 'Asha',
+                  modifiedByUname: 'Asha',
+                  createdOn: '13 Nov 2024 06:12 PM',
+                  modifiedOn: '13 Nov 2024 06:12 PM',
+                  id: 5,
+                  name: 'Asha',
+                  emailId: [],
+                  description: 'Reply 1.3',
+                  commentParentId: '5142f486-bde3-4fca-9a1c-541cdad7422c',
+                  comments: [],
+                },
+              ],
+            },
+            {
+              createdBy: 'USR29890',
+              modifiedBy: 'USR29890',
+              createdByUname: 'Asha',
+              modifiedByUname: 'Asha',
+              createdOn: '13 Nov 2024 06:09 PM',
+              modifiedOn: '13 Nov 2024 06:09 PM',
+              id: 6,
+              name: 'Asha',
+              emailId: [],
+              description: 'Reply 2',
+              commentParentId: 'b995a9a0-a88e-4950-bb7e-1e2e820eca59',
+              comments: [
+                {
+                  createdBy: 'USR29890',
+                  modifiedBy: 'USR29890',
+                  createdByUname: 'Asha',
+                  modifiedByUname: 'Asha',
+                  createdOn: '13 Nov 2024 06:10 PM',
+                  modifiedOn: '13 Nov 2024 06:10 PM',
+                  id: 7,
+                  name: 'Asha',
+                  emailId: [],
+                  description: 'Reply 2.1',
+                  commentParentId: '90fddbe9-f661-4dad-9a10-79160b5b8c5e',
+                  comments: [],
+                },
+                {
+                  createdBy: 'USR29890',
+                  modifiedBy: 'USR29890',
+                  createdByUname: 'Asha',
+                  modifiedByUname: 'Asha',
+                  createdOn: '13 Nov 2024 06:10 PM',
+                  modifiedOn: '13 Nov 2024 06:10 PM',
+                  id: 8,
+                  name: 'Asha',
+                  emailId: [],
+                  description: 'Reply 2.2',
+                  commentParentId: '90fddbe9-f661-4dad-9a10-79160b5b8c5e',
+                  comments: [],
+                },
+              ],
+            },
+            {
+              createdBy: 'USR29890',
+              modifiedBy: 'USR29890',
+              createdByUname: 'Asha',
+              modifiedByUname: 'Asha',
+              createdOn: '13 Nov 2024 06:11 PM',
+              modifiedOn: '13 Nov 2024 06:11 PM',
+              id: 9,
+              name: 'Asha',
+              emailId: [],
+              description: 'Reply 3',
+              commentParentId: 'b995a9a0-a88e-4950-bb7e-1e2e820eca59',
+              comments: [
+                {
+                  createdBy: 'USR29890',
+                  modifiedBy: 'USR29890',
+                  createdByUname: 'Asha',
+                  modifiedByUname: 'Asha',
+                  createdOn: '13 Nov 2024 06:11 PM',
+                  modifiedOn: '13 Nov 2024 06:11 PM',
+                  id: 10,
+                  name: 'Asha',
+                  emailId: [],
+                  description: 'Reply 3.1',
+                  commentParentId: '12c3d310-33a3-458a-9b76-e295f067fd44',
+                  comments: [],
+                },
+                {
+                  createdBy: 'USR29890',
+                  modifiedBy: 'USR29890',
+                  createdByUname: 'Asha',
+                  modifiedByUname: 'Asha',
+                  createdOn: '13 Nov 2024 06:11 PM',
+                  modifiedOn: '13 Nov 2024 06:11 PM',
+                  id: 11,
+                  name: 'Asha',
+                  emailId: [],
+                  description: 'Reply 3.2',
+                  commentParentId: '12c3d310-33a3-458a-9b76-e295f067fd44',
+                  comments: [],
+                },
+              ],
+            },
+          ],
+        }}
+        handleAddComment={() => {}}
+        handleEditComment={() => {}}
+        handleDeleteComment={() => {}}
+      />
+    );
+  },
+};
+
+export default meta;

package/src/components/Comment/Comments.tsx

@@ -0,0 +1,51 @@
+import { useState, useEffect } from 'react';
+import Comment from './comment/Comment';
+import useNode from './comment/useNode';
+import './Comments.scss';
+import { CommentType, HandleNodeFunction, CommentsProps } from './type';
+
+const initialComments: CommentType = {
+  comments: [],
+};
+
+const Comments = ({
+  commentsData,
+
+  onCommentsDataChange,
+}: CommentsProps) => {
+  const [commentData, setCommentsData] = useState(
+    commentsData ?? initialComments
+  );
+  const { insertNode, editNode, deleteNode } = useNode();
+
+  const handleInsertNode: HandleNodeFunction = (commentId, item) => {
+    const updatedTree = insertNode(commentData, commentId, item);
+    setCommentsData({ ...updatedTree });
+  };
+
+  const handleEditNode: HandleNodeFunction = (commentId, value) => {
+    const updatedTree = editNode(commentData, commentId, value);
+    setCommentsData({ ...updatedTree });
+  };
+
+  const handleDeleteNode = (commentId: number) => {
+    const updatedTree = deleteNode(commentData, commentId);
+    setCommentsData({ ...updatedTree });
+  };
+  useEffect(() => {
+    onCommentsDataChange(commentData);
+  }, [commentData, onCommentsDataChange]);
+
+  return (
+    <div className="ff-comments-container">
+      <Comment
+        handleInsertNode={handleInsertNode}
+        handleEditNode={handleEditNode}
+        handleDeleteNode={handleDeleteNode}
+        comment={commentData}
+      />
+    </div>
+  );
+};
+
+export default Comments;