pixel-react 1.10.15 → 1.10.16

package/src/components/Table/Table.stories.tsx

@@ -1,432 +0,0 @@
-import React from 'react';
-import { useEffect, useState } from 'react';
-import { StoryObj, Meta } from '@storybook/react';
-import Table from './Table';
-import { ffid } from '../../utils/ffID/ffid';
-import { rearrangeDragItem } from '../../utils/swapArrayItem/dragAndDropUtils';
-const meta: Meta<typeof Table> = {
-  title: 'Components/Table',
-  component: Table,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof Table>;
-const defaultArgs = {
-  data: [],
-  columns: [],
-};
-const sampleData = [
-  {
-    project: {
-      id: ffid(),
-      modifiedByUname: 'user4',
-      modifiedOn: '18-03-2024 10:47',
-      name: 'Test1',
-      type: 'Web',
-      status: 'Open',
-      checked: false,
-      disabled: true,
-    },
-  },
-  {
-    project: {
-      id: ffid(),
-      modifiedByUname: 'user3',
-      modifiedOn: '13-03-2024 15:15',
-      name: 'Test2',
-      type: 'Mobile',
-      status: 'Close',
-      checked: true,
-      disabled: true,
-    },
-  },
-  {
-    project: {
-      id: ffid(),
-      modifiedByUname: 'user2',
-      modifiedOn: '13-03-2024 15:30',
-      name: 'Test3',
-      type: 'Web',
-      status: 'Close',
-      checked: true,
-      disabled: true,
-    },
-  },
-  {
-    project: {
-      id: ffid(),
-      modifiedByUname: 'user1',
-      modifiedOn: '18-03-2024 15:36',
-      name: 'Test4',
-      type: 'Web & Mobile',
-      status: 'Open',
-      checked: false,
-      disabled: false,
-    },
-  },
-  {
-    project: {
-      id: ffid(),
-      modifiedByUname: 'user4',
-      modifiedOn: '18-03-2024 10:47',
-      name: 'Test1',
-      type: 'Web',
-      status: 'Open',
-      checked: false,
-      disabled: true,
-    },
-  },
-  {
-    project: {
-      id: ffid(),
-      modifiedByUname: 'user3',
-      modifiedOn: '13-03-2024 15:15',
-      name: 'Test2',
-      type: 'Mobile',
-      status: 'Close',
-      checked: true,
-      disabled: true,
-    },
-  },
-  {
-    project: {
-      id: ffid(),
-      modifiedByUname: 'user2',
-      modifiedOn: '13-03-2024 15:30',
-      name: 'Test3',
-      type: 'Web',
-      status: 'Close',
-      checked: true,
-      disabled: true,
-    },
-  },
-  {
-    project: {
-      id: ffid(),
-      modifiedByUname: 'user1',
-      modifiedOn: '18-03-2024 15:36',
-      name: 'Test4',
-      type: 'Web & Mobile',
-      status: 'Open',
-      checked: false,
-      disabled: false,
-    },
-  },
-  {
-    project: {
-      id: ffid(),
-      modifiedByUname: 'user4',
-      modifiedOn: '18-03-2024 10:47',
-      name: 'Test1',
-      type: 'Web',
-      status: 'Open',
-      checked: false,
-      disabled: false,
-    },
-  },
-  {
-    project: {
-      id: ffid(),
-      modifiedByUname: 'user3',
-      modifiedOn: '13-03-2024 15:15',
-      name: 'Test2',
-      type: 'Mobile',
-      status: 'Close',
-      checked: true,
-      disabled: false,
-    },
-  },
-  {
-    project: {
-      id: ffid(),
-      modifiedByUname: 'user2',
-      modifiedOn: '13-03-2024 15:30',
-      name: 'Test3',
-      type: 'Web',
-      status: 'Close',
-      checked: true,
-      disabled: false,
-    },
-  },
-  {
-    project: {
-      id: ffid(),
-      modifiedByUname: 'user1',
-      modifiedOn: '18-03-2024 15:36',
-      name: 'Test4',
-      type: 'Web & Mobile',
-      status: 'Open',
-      checked: false,
-      disabled: false,
-    },
-  },
-];
-const columnsData = [
-  {
-    header: 'Name',
-    accessor: 'name',
-    width: 150,
-    cell: (e: any) => {
-      return (
-        <div title={e.value} style={{ color: 'blue' }}>
-          {e.value}
-        </div>
-      );
-    },
-  },
-  {
-    header: 'Type',
-    accessor: 'type',
-    cell: ({ value }: any) => <div>{value}</div>,
-  },
-  {
-    header: 'Status',
-    accessor: 'status',
-    width: 150,
-    cell: ({ value }: any) => <div>{value}</div>,
-  },
-  {
-    header: 'Modified By',
-    accessor: 'modifiedByUname',
-  },
-  {
-    header: 'Modified On',
-    accessor: 'modifiedOn',
-    cell: ({ value }: any) => <div>{value}</div>,
-  },
-];
-
-export const Default: Story = {
-  args: {
-    ...defaultArgs,
-    data: sampleData.map((x) => x.project),
-
-    columns: columnsData,
-  },
-};
-
-export const PrimaryHeaderTextColor: Story = {
-  args: {
-    ...defaultArgs,
-    data: sampleData.map((x) => x.project),
-
-    columns: columnsData,
-    headerTextColor: 'primary',
-  },
-};
-
-export const TableDataTextColor: Story = {
-  args: {
-    ...defaultArgs,
-    data: sampleData.map((x) => x.project),
-
-    columns: columnsData,
-    tableDataTextColor: 'var(--brand-color)',
-  },
-};
-
-export const PageTable: Story = {
-  args: {
-    ...defaultArgs,
-    data: [],
-    columns: [],
-  },
-  render: () => {
-    const [tableData, setTableData] = useState([]);
-    useEffect(() => {
-      let sampleArray: any = [];
-      sampleData.forEach((data) => {
-        sampleArray.push(data.project);
-      });
-      setTableData(sampleArray);
-    }, []);
-    const handleIconClick = () => {};
-
-    return (
-      <>
-        <Table
-          {...defaultArgs}
-          data={tableData}
-          columns={columnsData}
-          headerType="secondary"
-          noDataContent="No data found"
-          headerIconName={'expand_icon'}
-          headerIconOnClick={handleIconClick}
-        />
-      </>
-    );
-  },
-};
-
-export const PrimaryHeader: Story = {
-  args: {
-    ...defaultArgs,
-    data: [],
-    columns: [],
-  },
-  render: () => {
-    const [tableData, setTableData] = useState([]);
-    useEffect(() => {
-      let sampleArray: any = [];
-      sampleData.forEach((data) => {
-        sampleArray.push(data.project);
-      });
-      setTableData(sampleArray);
-    }, []);
-
-    return (
-      <>
-        <Table
-          {...defaultArgs}
-          data={tableData}
-          columns={columnsData}
-          headerType="primary"
-          noDataContent="No data found"
-        />
-      </>
-    );
-  },
-};
-export const FixedHeaderWithBorder: Story = {
-  args: {
-    ...defaultArgs,
-    data: [],
-    columns: [],
-  },
-  render: () => {
-    const [tableData, setTableData] = useState([]);
-    useEffect(() => {
-      let sampleArray: any = [];
-      sampleData.forEach((data) => {
-        sampleArray.push(data.project);
-      });
-      setTableData(sampleArray);
-    }, []);
-
-    return (
-      <>
-        <Table
-          {...defaultArgs}
-          data={tableData}
-          columns={columnsData}
-          headerType="primary"
-          withFixedHeader={true}
-          borderWithRadius={true}
-          noDataContent="No data found"
-        />
-      </>
-    );
-  },
-};
-export const WithCheckBox: Story = {
-  args: {
-    ...defaultArgs,
-    data: [],
-    columns: [],
-  },
-  render: () => {
-    const [tableData, setTableData] = useState([]);
-    const [allSelected, setAllSelected] = useState(false);
-    useEffect(() => {
-      let sampleArray: any = [];
-      sampleData.forEach((data) => {
-        sampleArray.push(data.project);
-      });
-      setTableData(sampleArray);
-    }, []);
-
-    const onSelectClick = (obj: any) => {
-      if (obj['allSelected'] !== undefined) {
-        setAllSelected(!allSelected);
-      }
-    };
-
-    return (
-      <>
-        <Table
-          {...defaultArgs}
-          data={tableData}
-          columns={columnsData}
-          headerType="primary"
-          withCheckbox={true}
-          onSelect={onSelectClick}
-          allSelected={allSelected}
-          noDataContent="No data found"
-        />
-      </>
-    );
-  },
-};
-export const TableWithNoData: Story = {
-  args: {
-    ...defaultArgs,
-    data: [],
-    columns: [],
-  },
-  render: () => {
-    const tableData: [] = [];
-
-    return (
-      <>
-        <Table
-          {...defaultArgs}
-          data={tableData}
-          columns={columnsData}
-          headerType="primary"
-          noDataContent="No data found"
-          noDataImageSize="small"
-          height="500px"
-        />
-      </>
-    );
-  },
-};
-
-export const DragAndDropTable: Story = {
-  args: {
-    ...defaultArgs,
-    data: sampleData.map((x) => x.project),
-
-    columns: columnsData,
-    tableDataTextColor: 'var(--brand-color)',
-  },
-  render: () => {
-    //! Important prerequisite: tableData should have a unique ID key, which should be either _id or id.
-    const [tableData, setTableData] = useState(
-      sampleData.map((data) => data.project)
-    );
-    useEffect(() => {
-      let sampleArray: any = [];
-      sampleData.forEach((data) => {
-        sampleArray.push(data.project);
-      });
-      setTableData(sampleArray);
-    }, []);
-
-    const handleIconClick = () => {};
-
-    const onDragEnd = (oldIndex: number, newIndex: number) => {
-      const updatedData = rearrangeDragItem(tableData, oldIndex, newIndex);
-      setTableData(updatedData);
-    };
-    return (
-      <>
-        <Table
-          draggable
-          onDragEnd={onDragEnd}
-          {...defaultArgs}
-          data={tableData}
-          columns={columnsData}
-          headerType="secondary"
-          noDataContent="No data found"
-          headerIconName={'expand_icon'}
-          headerIconOnClick={handleIconClick}
-        />
-      </>
-    );
-  },
-};
-export default meta;

package/src/components/Table/Table.tsx

@@ -1,296 +0,0 @@
-import './Table.scss';
-import { isFunction } from '../../assets/utils/functionUtils';
-import classNames from 'classnames';
-import {
-  ColumnsProps,
-  DataProps,
-  TableProps,
-  SelectedItemProps,
-} from './Types';
-import { prepareData } from '../../utils/TableCell/TableCell';
-import Checkbox from '../Checkbox';
-import Typography from '../Typography';
-import Icon from '../Icon';
-import { closestCorners, DndContext, DragEndEvent } from '@dnd-kit/core';
-import {
-  SortableContext,
-  useSortable,
-  verticalListSortingStrategy,
-} from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { useEffect, useRef } from 'react';
-
-const SortableRow = ({
-  row,
-  columns,
-  tableBodyRowClass,
-  handleOnclick,
-  tableDataTextColor,
-  withCheckbox,
-  onSelectClick,
-  draggable,
-}: any) => {
-  const { attributes, listeners, setNodeRef, transform, transition } =
-    useSortable({
-      id: row?._id || row?.id,
-      disabled: row.disabled,
-    });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-  };
-  const key = row._id || row.id;
-  return (
-    <tr
-      ref={setNodeRef}
-      style={style}
-      key={key}
-      className={classNames(tableBodyRowClass, {
-        'disabled-row': row.disabled,
-      })}
-      id={key}
-    >
-      {columns.map((column: any, index: number) => {
-        return (
-          <td
-            key={column.accessor + index}
-            onClick={() => handleOnclick(column, row)}
-            className={classNames(column.className, {
-              'clickable-cell': column.onClick,
-            })}
-          >
-            <Typography
-              as="div"
-              color={tableDataTextColor}
-              className="ff-data-checkbox-container"
-            >
-              {index === 0 && withCheckbox && (
-                <span className="ff-table-checkbox">
-                  <Checkbox
-                    onChange={(e) => {
-                      onSelectClick(e, row);
-                    }}
-                    checked={row.checked}
-                    disabled={!!row.disabled}
-                  />
-                </span>
-              )}
-              {index === 0 && draggable && (
-                <span
-                  className={
-                    row.disabled ? 'ff-table-drag' : 'ff-table-drag-icon'
-                  }
-                  {...listeners}
-                  {...attributes}
-                >
-                  <Icon name="drag" />
-                </span>
-              )}
-              {prepareData(row, column)}
-            </Typography>
-          </td>
-        );
-      })}
-    </tr>
-  );
-};
-
-const Table = ({
-  data = [],
-  columns = [],
-  headerType,
-  withCheckbox = false,
-  onSelect,
-  allSelected,
-  partialSelected = false,
-  withFixedHeader = true,
-  borderWithRadius = false,
-  headerCheckboxDisabled = false,
-  noDataContent,
-  height = '100%',
-  className = '',
-  tableHeadClass = '',
-  tableBodyRowClass = '',
-  headerTextColor,
-  tableDataTextColor,
-  headerIconName = '',
-  headerIconOnClick = () => {},
-  draggable = false,
-  onDragEnd,
-  loadMore = () => {},
-}: TableProps) => {
-  const observerRef = useRef<IntersectionObserver | null>(null);
-
-  useEffect(() => {
-    const scrollContainer = document.getElementById(
-      'ff-table-scroll-container'
-    );
-    const firstNode = document.getElementById('ff-table-first-node');
-    const lastNode = document.getElementById('ff-table-last-node');
-
-    // Exit early if data is empty or elements are missing
-    if (!scrollContainer || !firstNode || !lastNode || !data?.length) {
-      return;
-    }
-
-    observerRef.current = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            const direction =
-              entry.target.id === 'ff-table-last-node' ? 'below' : 'above';
-            loadMore(direction);
-          }
-        });
-      },
-      {
-        root: scrollContainer,
-        rootMargin: '8px',
-        threshold: 0.1,
-      }
-    );
-
-    observerRef.current.observe(firstNode);
-    observerRef.current.observe(lastNode);
-
-    return () => {
-      // Cleanup observer
-      observerRef.current?.disconnect();
-    };
-  }, [data, loadMore]);
-
-  const handleOnclick = (column: ColumnsProps, row: DataProps) => {
-    let { onClick, accessor } = column;
-    if (onClick && isFunction(onClick)) {
-      onClick(accessor, row);
-    }
-  };
-
-  const onSelectClick = (e: object, item: SelectedItemProps) => {
-    if (onSelect) {
-      onSelect(e, item);
-    }
-  };
-
-  const handleDragEnd = (event: DragEndEvent) => {
-    const { active, over } = event;
-    if (!over || active.id === over.id) return;
-
-    const oldIndex = data.findIndex(
-      (item: any) => item._id === active.id || item.id === active.id
-    );
-    const newIndex = data.findIndex(
-      (item: any) => item._id === over.id || item.id === over.id
-    );
-
-    if (oldIndex === -1 || newIndex === -1) return;
-    if (onDragEnd) onDragEnd(oldIndex, newIndex);
-  };
-
-  return (
-    <DndContext collisionDetection={closestCorners} onDragEnd={handleDragEnd}>
-      <SortableContext
-        disabled={!draggable}
-        items={data?.map((row: any) => row._id || row.id)}
-        strategy={verticalListSortingStrategy}
-      >
-        <div
-          style={{ height: height, position: 'relative' }}
-          id="ff-table-scroll-container"
-          className={classNames(className, {
-            'ff-fixed-header-table': withFixedHeader,
-            'border-borderRadius': borderWithRadius,
-          })}
-        >
-          <div className="ff-table-icon">
-            <Icon
-              height={14}
-              width={14}
-              name={headerIconName}
-              onClick={headerIconOnClick}
-            />
-          </div>
-
-          <table className={classNames(`ff-table`)} cellSpacing={0}>
-            <thead
-              className={classNames(
-                {
-                  'ff-fixed-header': withFixedHeader,
-                },
-                tableHeadClass
-              )}
-            >
-              <tr>
-                {/* columns.map((column, index) */}
-                {columns.map((column, index) => (
-                  <th
-                    className={classNames(
-                      `${headerType && `${headerType}-bg`}`,
-                      `${headerTextColor && `${headerTextColor}-color`}`
-                    )}
-                    key={column.header}
-                    style={{ width: column?.width }}
-                  >
-                    <Typography
-                      as="div"
-                      fontWeight="semi-bold"
-                      className="ff-label-checkbox-container"
-                    >
-                      {index === 0 && withCheckbox && (
-                        <span className="ff-table-checkbox">
-                          <Checkbox
-                            onChange={(e) => {
-                              onSelectClick(e, {
-                                allSelected: e.target.checked,
-                              });
-                            }}
-                            checked={
-                              allSelected !== undefined ? allSelected : false
-                            }
-                            partial={!!partialSelected}
-                            disabled={headerCheckboxDisabled}
-                          />
-                        </span>
-                      )}
-
-                      {column.header}
-                    </Typography>
-                  </th>
-                ))}
-              </tr>
-            </thead>
-            <tbody className="ff-fixed-header-table">
-              <tr id="ff-table-first-node" />
-              {data?.length > 0 &&
-                data?.map((row: any) => (
-                  <SortableRow
-                    key={row?.id}
-                    row={row}
-                    columns={columns}
-                    tableBodyRowClass={tableBodyRowClass}
-                    handleOnclick={handleOnclick}
-                    tableDataTextColor={tableDataTextColor}
-                    withCheckbox={withCheckbox}
-                    onSelectClick={onSelectClick}
-                    draggable={draggable}
-                  />
-                ))}
-              <tr id="ff-table-last-node" />
-            </tbody>
-          </table>
-          {data?.length <= 0 && (
-            <div
-              className="no-data-content"
-              style={{ height: `calc(${height} - 50px)` }}
-            >
-              {noDataContent}
-            </div>
-          )}
-        </div>
-      </SortableContext>
-    </DndContext>
-  );
-};
-
-export default Table;