pixel-react-excel-sheet 1.0.10 → 1.0.12

package/src/components/TableWithAccordion/TableWithAccordion.scss

@@ -0,0 +1,54 @@
+@use '../../assets/styles/fonts';
+@use '../../assets/styles/colors';
+
+.ff-accordion-table-container {
+  overflow-y: auto;
+  .ff-accordion-table {
+    width: 100%;
+    .ff-table-header,
+    .ff-table-cell {
+      text-align: left;
+      padding: 9px;
+    }
+    .ff-table-header {
+      color: var(--text-color);
+      border-bottom: 1px solid var(--slider-table-color);
+    }
+    .ff-table-body {
+      .ff-table-row:hover {
+        background-color: var(--hover-color);
+      }
+    }
+    &--primary-bg {
+      background-color: var(--table-with-accordion-header-primary-bg);
+    }
+    &--secondary-bg {
+      background-color: var(--secondary-bg);
+    }
+    &--default-bg {
+      background-color: var(--default-bg);
+    }
+  }
+  .ff-accordion-fixed-header {
+    position: sticky;
+    top: 0;
+    z-index: 99;
+    background-color: var(--file-details-bg);
+  }
+  .column-table-accordion {
+    width: 100%;
+    .accordion-header {
+      display: flex;
+      align-items: center;
+      .header-title {
+        padding: 8px;
+      }
+      .accordion-arrow {
+        img {
+          height: 30px;
+          width: 35px;
+        }
+      }
+    }
+  }
+}

package/src/components/TableWithAccordion/TableWithAccordion.stories.tsx

@@ -0,0 +1,94 @@
+import { StoryObj, Meta } from '@storybook/react';
+import TableWithAccordion from './TableWithAccordion';
+import { sampleData } from './data';
+
+const meta: Meta<typeof TableWithAccordion> = {
+  title: 'Components/TableWithAccordion',
+  component: TableWithAccordion,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof TableWithAccordion>;
+const defaultArgs = {
+  tableMeta: [],
+  tableData: [],
+};
+
+const emptyData: never[] = [];
+const columnsData = [
+  {
+    header: 'Description',
+    accessor: 'desc',
+    width: 100,
+  },
+  {
+    header: 'SUITE NAME',
+    accessor: 'suiteName',
+    width: 100,
+  },
+  {
+    header: 'SUITE TYPE',
+    accessor: 'suiteName',
+    width: 100,
+  },
+  {
+    header: 'SUITE ACCESS',
+    accessor: 'suiteName',
+    width: 100,
+  },
+  {
+    header: 'Modified By',
+    accessor: 'modifiedBy',
+    width: 100,
+  },
+];
+
+export const TableWithRowAccordion: Story = {
+  args: {
+    ...defaultArgs,
+    tableMeta: columnsData,
+    tableData: sampleData,
+    accordionType: 'row',
+    TableAccordionStateIconWidth:4,
+    TableAccordionStateIconHeight:8,
+  },
+};
+export const TableWithColumnAccordion: Story = {
+  args: {
+    ...defaultArgs,
+    tableMeta: columnsData,
+    tableData: sampleData,
+    accordionType: 'column',
+    TableAccordionStateIconWidth:4,
+    TableAccordionStateIconHeight:8,
+  },
+};
+
+export const EmtptyTableWithColumnAccordion: Story = {
+  args: {
+    ...defaultArgs,
+    tableMeta: columnsData,
+    tableData: emptyData,
+    accordionType: 'column',
+    TableAccordionStateIconWidth:4,
+    TableAccordionStateIconHeight:8,
+  },
+};
+
+export const AccordionTableWithFixedHeader: Story = {
+  args: {
+    ...defaultArgs,
+    tableMeta: columnsData,
+    tableData: sampleData,
+    accordionType: 'row',
+    height: '200px',
+    withFixedHeader: true,
+    TableAccordionStateIconWidth:4,
+    TableAccordionStateIconHeight:8,
+  },
+};
+
+export default meta;

package/src/components/TableWithAccordion/TableWithAccordion.tsx

@@ -0,0 +1,174 @@
+import { useState } from 'react';
+import classNames from 'classnames';
+import Accordion from '../Accordion';
+import './TableWithAccordion.scss';
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
+import '../../../index.scss';
+import Typography from '../Typography';
+import { ColumnProps, TableProps } from './types';
+
+const TableWithAccordion = ({
+  tableMeta = [],
+  tableData = [],
+  accordionType = 'row',
+  noDataContent,
+  height = '100%',
+  withFixedHeader = false,
+  headerType,
+  TableAccordionStateIconWidth = 4,
+  TableAccordionStateIconHeight = 8,
+}: TableProps) => {
+  const [expandedRowIndex, setExpandedRowIndex] = useState(-1);
+  const onAccordionClick = (index: number) => {
+    setExpandedRowIndex(index === expandedRowIndex ? -1 : index);
+  };
+  const getAccordionTableCellContent = (
+    dataObj: any,
+    columnObj: ColumnProps
+  ) => {
+    let cellData = dataObj[columnObj.accessor];
+    if (columnObj.cell) {
+      return columnObj.cell({
+        value: cellData,
+        row: dataObj,
+        column: columnObj.accessor,
+      });
+    } else if (columnObj.accessor) {
+      return cellData;
+    } else if (cellData && typeof cellData !== 'object') {
+      return cellData;
+    } else {
+      return '--';
+    }
+  };
+  const getAccordionTableContent = (dataArray: any) => {
+    const accordionSubTable = dataArray.map((rowData: any, index: number) => {
+      return (
+        <table className="ff-accordion-table" cellSpacing={0}>
+          <tbody className="ff-table-body">
+            <tr className="ff-table-row" key={rowData.id || index}>
+              {tableMeta.map((column, i) => {
+                return (
+                  <td
+                    className="ff-table-cell"
+                    key={column.accessor + i}
+                    style={{ width: column.width }}
+                  >
+                    {accordionType === 'column' && i === 0 ? (
+                      ''
+                    ) : (
+                      <Typography>
+                        {getAccordionTableCellContent(rowData, column)}
+                      </Typography>
+                    )}
+                  </td>
+                );
+              })}
+            </tr>
+          </tbody>
+        </table>
+      );
+    });
+    return accordionSubTable;
+  };
+  return (
+    <div
+      style={{ height: height }}
+      className={classNames('ff-accordion-table-container', {
+        'ff-accordion-fixed-header-table': withFixedHeader,
+      })}
+    >
+      <table
+        cellSpacing={0}
+        className={classNames('ff-accordion-table', {
+          'ff-accordion-fixed-header': withFixedHeader,
+        })}
+      >
+        <thead>
+          <tr className="ff-table-row">
+            {tableMeta.map((column) => (
+              <th
+                key={column.header}
+                style={{ width: column.width }}
+                className={classNames(
+                  'ff-table-header',
+                  headerType && `ff-accordion-table--${headerType}-bg`
+                )}
+              >
+                <div>
+                  <Typography fontWeight="medium" fontSize={12}>
+                    {column.header}
+                  </Typography>
+                </div>
+              </th>
+            ))}
+          </tr>
+        </thead>
+      </table>
+      {accordionType === 'row' &&
+        tableData.map((row: any) => (
+          <Accordion
+            headerTitle={row.title}
+            color="var(--text-color)"
+            accordionContent={getAccordionTableContent(row.data)}
+            disable={row.disable}
+            disableInfoMessage={row.disableInfoMessage}
+            accordionStateIconName="arrows_down_icon"
+            AccordionStateIconWidth={TableAccordionStateIconWidth}
+            AccordionStateIconHeight={TableAccordionStateIconHeight}
+          />
+        ))}
+      {accordionType === 'column' &&
+        tableData.map((row: any, index: number) => (
+          <div className="column-table-accordion">
+            <div className="ff-display-flex">
+              <Tooltip title={row?.disableInfoMessage}>
+                <div
+                  className={`accordion-header ${row.disable && 'ff-disabled'}`}
+                >
+                  <div className="header-title">
+                    <span>
+                      <Typography fontWeight="regular">{row.title}</Typography>
+                    </span>
+                  </div>
+
+                  <div
+                    className="accordion-arrow"
+                    onClick={() => {
+                      !row.disable && onAccordionClick(index);
+                    }}
+                  >
+                    <Icon
+                      name={
+                        expandedRowIndex === index
+                          ? 'arrows_down_icon'
+                          : 'arrows_right_icon'
+                      }
+                      color="var(--table-with-accordion-icon-color)"
+                      width={TableAccordionStateIconWidth}
+                      height={TableAccordionStateIconHeight}
+                      hoverEffect={false}
+                    />
+                  </div>
+                </div>
+              </Tooltip>
+            </div>
+            {expandedRowIndex === index && (
+              <div>{getAccordionTableContent(row.data)}</div>
+            )}
+          </div>
+        ))}
+      {tableData.length <= 0 && (
+        <div
+          className="no-data-content"
+          style={{ height: `calc(${height} - 50px)` }}
+        >
+          {noDataContent}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TableWithAccordion;

package/src/components/TableWithAccordion/data.ts

@@ -0,0 +1,37 @@
+export const sampleData = [
+    {
+      title: 'Pre conditions',
+      data: [
+        {
+          desc: 'Open Browser',
+          modifiedBy: 'Ram',
+          suiteName: 'test',
+        },
+      ],
+    },
+    {
+      title: 'Steps',
+      data: [
+        {
+          desc: '1. SG1',
+          modifiedBy: 'Ram',
+          suiteName: 'suite1',
+        },
+        {
+          desc: '2. SG2',
+          modifiedBy: 'Laxman',
+          suiteName: 'suite 2',
+        },
+      ],
+    },
+    {
+      title: 'Post conditions',
+      data: [
+        {
+          desc: 'close browser',
+          modifiedBy: 'Krishna',
+          suiteName: 'test 2',
+        },
+      ],
+    },
+  ];

package/src/components/TableWithAccordion/index.ts

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

package/src/components/TableWithAccordion/types.ts

@@ -0,0 +1,70 @@
+import { ReactNode } from "react";
+
+export interface ColumnProps {
+    /**
+     * column name
+     */
+    header: string;
+    /**
+     * data key for particular column
+     */
+    accessor: string;
+    /**
+     * className for a column
+     */
+    className?: string;
+    /**
+     * width of a column
+     */
+    width?: number;
+    /**
+     * data for the column
+     */
+    cell?: (e: any) => JSX.Element | string | ReactNode;
+  }
+
+export interface DataProps {
+    /**
+     * data for each row
+     */
+    [key: string]: any;
+  }
+
+export interface TableProps {
+    /**
+     * Column details for table
+     */
+    tableMeta: Array<ColumnProps>;
+    /**
+     * Data for table
+     */
+    tableData: Array<DataProps>;
+    /**
+     * Table type
+     */
+    accordionType: 'row' | 'column';
+    /**
+     *  Specific sentence to be displayed data not found
+     */
+    noDataContent?: string | ReactNode;
+    /**
+     * withFixedHeader prop to have non-scrollable fixed accordion table header
+     */
+    withFixedHeader?: boolean;
+    /**
+     *  Height of the table in string
+     */
+    height?: string;
+    /**
+     * Header type to have different background color
+     */
+    headerType: 'default' | 'primary' | 'secondary';
+    /**
+     * Accordion collapse and expand Icon width
+     */
+    TableAccordionStateIconWidth:number,
+    /**
+     * Accordion collapse and expand Icon height
+     */
+    TableAccordionStateIconHeight:number,
+  }

package/src/components/Tabs/Tabs.scss

@@ -8,7 +8,6 @@
     &--default {
       display: flex;
       gap: 8px;
-      border: 1px solid var(--tabs-border-color);
       border-radius: 8px 8px 0 0;
       padding: 7px 8px 0;
 

package/src/index.ts

@@ -54,7 +54,7 @@ import SequentialConnectingBranch from './components/SequentialConnectingBranch'
 import AttachmentButton from './components/AttachmentButton';
 import { Toastify, toast } from './components/Toastify/Toastify';
 import ToggleSwitch from './components/ToggleSwitch/ToggleSwitch';
-import Avatar from './components/Avatar/Avatar';
+import Avatar from './components/Avatar';
 
 import LabelEditTextField from './components/LabelEditTextField';
 import EditTextField from './components/EditTextField';
@@ -68,6 +68,9 @@ import VariableDropdown from './components/Editor/VariableDropdown';
 import LineChart from './components/Charts/LineChart';
 import DownloadClient from './components/DownloadClient/DownloadClient';
 import FieldSet from './components/FieldSet';
+import CreateVariableSlider from './components/CreateVariable/CreateVariableSlider';
+import TableWithAccordion from './components/TableWithAccordion/TableWithAccordion';
+
 // Utils imports
 import { checkEmpty } from './utils/checkEmpty/checkEmpty';
 import {
@@ -88,8 +91,12 @@ import Editor from './components/Editor/Editor';
 import { getSequentialPayload } from './utils/getSequentialPayload/getSequentialPayload';
 import ConnectingBranch from './components/ConnectingBranch/ConnectingBranch';
 import { saveFileFromBlob } from './utils/downloadFile/saveFileFromBlob';
+import Comments from './components/Comment/Comments';
 import useFileDropzone from './hooks/useFileDropzone';
 import PopUpModal from './components/PopUpModal/PopUpModal';
+import AddVariables from './components/AddVariables/AddVariables';
+import { hasDuplicateFile } from './utils/checkDuplicates/checkDuplicates';
+import PhoneInputField from './components/PhoneInput';
 
 export {
   Button,
@@ -167,8 +174,13 @@ export {
   VariableDropdown,
   DownloadClient,
   FieldSet,
+  Comments,
   PopUpModal,
+  CreateVariableSlider,
+  AddVariables,
+  PhoneInputField,
 
+  TableWithAccordion,
   // utils exports
   checkEmpty,
   getExtension,
@@ -184,4 +196,5 @@ export {
   getSequentialPayload,
   saveFileFromBlob,
   useFileDropzone,
+  hasDuplicateFile,
 };

package/src/utils/checkDuplicates/CheckDuplicates.stories.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { hasDuplicateFile } from './checkDuplicates';
+
+export default {
+  title: 'Utils/HasDuplicateFile',
+  argTypes: {
+    array: {
+      control: 'object',
+      description: 'Array of objects to check for duplicates.',
+    },
+    property: {
+      control: 'text',
+      description: 'Optional property to check for duplicates.',
+    },
+  },
+} satisfies Meta;
+
+export const Default: StoryObj = {
+  args: {
+    array: [
+      { id: 1, name: 'file1' },
+      { id: 2, name: 'file2' },
+      { id: 1, name: 'file1' },
+    ],
+    property: 'id',
+  },
+  render: (args) => {
+    const result = hasDuplicateFile(args.array, args.property);
+    return (
+      <div>
+        <h3>
+          Duplicate Check Result:{' '}
+          {result ? 'Duplicates Found' : 'No Duplicates'}
+        </h3>
+        <pre>{JSON.stringify(args.array, null, 2)}</pre>
+      </div>
+    );
+  },
+};

package/src/utils/checkDuplicates/checkDuplicates.ts

@@ -0,0 +1,13 @@
+// Will be used to find duplicate key-value pair in an array of objects.
+
+export const hasDuplicateFile = (array: any[], property: string): boolean => {
+  const seen = new Set();
+  for (const obj of array) {
+    const key = property ? obj[property] : JSON.stringify(obj);
+    if (seen.has(key)) {
+      return true;
+    }
+    seen.add(key);
+  }
+  return false;
+};