pixel-react 1.0.0

package/src/components/Table/Table.scss

@@ -0,0 +1,101 @@
+@import '../../assets/styles/_fonts';
+
+.ff-fixed-header-table {
+  overflow-y: auto;
+}
+
+.ff-table {
+  th,
+  td {
+    text-align: left;
+    font-size: 12px;
+    padding: 9px 8px;
+  }
+  thead {
+    tr {
+      th {
+        @extend .fontMd;
+        color: var(--text-color);
+        border-bottom: 1px solid var(--slider-table-color);
+        text-transform: uppercase;
+      }
+      th:first-child {
+        div {
+          display: flex;
+          align-items: center;
+          .ff-table-checkbox {
+            padding-right: 8px;
+          }
+        }
+      }
+    }
+  }
+  tbody {
+    tr {
+      .action-column {
+        opacity: 0;
+      }
+      .icon-container {
+        padding-left: 10px;
+        opacity: 0;
+        display: flex;
+        justify-content: flex-end;
+        transition: opacity 0.3s ease, transform 0.3s ease;
+        transform: translateX(20px);
+      }
+      &:hover {
+        background-color: var(--slider-table-color);
+
+        .icon-container {
+          opacity: 1;
+          transform: translateX(0);
+        }
+      }
+      td {
+        position: relative;
+        color: var(--text-color);
+        @extend .fontSm;
+
+        &.clickable-cell {
+          cursor: pointer;
+        }
+      }
+      td:first-child {
+        div {
+          display: flex;
+          align-items: center;
+          .ff-table-checkbox {
+            padding-right: 8px;
+          }
+        }
+      }
+    }
+  }
+  .primary-bg {
+    background-color: var(--brand-color);
+  }
+  .secondary-bg {
+    background-color: var(--primary-icon-color);
+  }
+  .default-bg {
+    background-color: transparent;
+  }
+}
+.border-borderRadius {
+  border: 1px solid var(--slider-table-color);
+  border-radius: 5px;
+  border-collapse: none !important;
+}
+
+.ff-fixed-header {
+  position: sticky !important;
+  top: 0;
+  z-index: 99;
+  background-color: Var(--file-details-bg);
+}
+.no-data-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}

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

@@ -0,0 +1,345 @@
+import { useEffect, useState } from 'react';
+import { StoryObj, Meta } from '@storybook/react';
+import Table from './Table';
+import Icon from '../Icon';
+
+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: {
+      modifiedByUname: 'user4',
+      modifiedOn: '18-03-2024 10:47',
+      name: 'Test1',
+      type: 'Web',
+      status: 'Open',
+      checked: false,
+    },
+  },
+  {
+    project: {
+      modifiedByUname: 'user3',
+      modifiedOn: '13-03-2024 15:15',
+      name: 'Test2',
+      type: 'Mobile',
+      status: 'Close',
+      checked: true,
+    },
+  },
+  {
+    project: {
+      modifiedByUname: 'user2',
+      modifiedOn: '13-03-2024 15:30',
+      name: 'Test3',
+      type: 'Web',
+      status: 'Close',
+      checked: true,
+    },
+  },
+  {
+    project: {
+      modifiedByUname: 'user1',
+      modifiedOn: '18-03-2024 15:36',
+      name: 'Test4',
+      type: 'Web & Mobile',
+      status: 'Open',
+      checked: false,
+    },
+  },
+  {
+    project: {
+      modifiedByUname: 'user4',
+      modifiedOn: '18-03-2024 10:47',
+      name: 'Test1',
+      type: 'Web',
+      status: 'Open',
+      checked: false,
+    },
+  },
+  {
+    project: {
+      modifiedByUname: 'user3',
+      modifiedOn: '13-03-2024 15:15',
+      name: 'Test2',
+      type: 'Mobile',
+      status: 'Close',
+      checked: true,
+    },
+  },
+  {
+    project: {
+      modifiedByUname: 'user2',
+      modifiedOn: '13-03-2024 15:30',
+      name: 'Test3',
+      type: 'Web',
+      status: 'Close',
+      checked: true,
+    },
+  },
+  {
+    project: {
+      modifiedByUname: 'user1',
+      modifiedOn: '18-03-2024 15:36',
+      name: 'Test4',
+      type: 'Web & Mobile',
+      status: 'Open',
+      checked: false,
+    },
+  },
+  {
+    project: {
+      modifiedByUname: 'user4',
+      modifiedOn: '18-03-2024 10:47',
+      name: 'Test1',
+      type: 'Web',
+      status: 'Open',
+      checked: false,
+    },
+  },
+  {
+    project: {
+      modifiedByUname: 'user3',
+      modifiedOn: '13-03-2024 15:15',
+      name: 'Test2',
+      type: 'Mobile',
+      status: 'Close',
+      checked: true,
+    },
+  },
+  {
+    project: {
+      modifiedByUname: 'user2',
+      modifiedOn: '13-03-2024 15:30',
+      name: 'Test3',
+      type: 'Web',
+      status: 'Close',
+      checked: true,
+    },
+  },
+  {
+    project: {
+      modifiedByUname: 'user1',
+      modifiedOn: '18-03-2024 15:36',
+      name: 'Test4',
+      type: 'Web & Mobile',
+      status: 'Open',
+      checked: false,
+    },
+  },
+];
+const columnsData = [
+  {
+    header: 'Name',
+    accessor: 'name',
+    width: 150,
+    cell: (e: any) => {
+      return (
+        <div title={e.value} style={{ color: 'blue' }}>
+          {e.value}
+          <div style={{ textAlign: 'right' }} className="icon-container">
+            <span>
+              <Icon name="edit_icon" height={12} width={12} />
+            </span>
+            <span>
+              <Icon name="delete" height={12} width={12} />
+            </span>
+          </div>
+        </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 PageTable: 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="secondary"
+          noDataContent="No data found"
+        />
+      </>
+    );
+  },
+};
+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] = useState([]);
+
+    return (
+      <>
+        <Table
+          {...defaultArgs}
+          data={tableData}
+          columns={columnsData}
+          headerType="primary"
+          noDataContent="No data found"
+          noDataImageSize="small"
+          height="500px"
+        />
+      </>
+    );
+  },
+};
+export default meta;

package/src/components/Table/Table.tsx

@@ -0,0 +1,128 @@
+import './Table.scss';
+// import Checkbox from '../Checkbox';
+import { isFunction } from '../../assets/utils/functionUtils';
+import classNames from 'classnames';
+import { ColumnsProps, DataProps, TableProps } from './Types';
+import { prepareData } from '../../utils/TableCell/TableCell';
+
+// import NoData from '../NoData/NoData';
+
+const Table = ({
+  data = [],
+  columns = [],
+  headerType,
+  // withCheckbox,
+  // onSelect,
+  // allSelected,
+  // partialSelected = false,
+  withFixedHeader = true,
+  borderWithRadius = false,
+  // headerCheckboxDisabled = false,
+  // noDataContent,
+  // noDataImage,
+  // noDataImageSize,
+  height = '100%',
+  className = '',
+}: TableProps) => {
+  const hanleOnclick = (column: ColumnsProps, row: DataProps) => {
+    let { onClick, accessor } = column;
+    if (onClick && isFunction(onClick)) {
+      onClick(accessor, row);
+    }
+  };
+  if (!(data.length >= 0)) return null;
+  return (
+    <div
+      style={{ height: height }}
+      className={classNames(className, {
+        'ff-fixed-header-table': withFixedHeader,
+        'border-borderRadius': borderWithRadius,
+      })}
+    >
+      <table className={classNames(`ff-table`)} cellSpacing={0}>
+        <thead
+          className={classNames({
+            'ff-fixed-header': withFixedHeader,
+          })}
+        >
+          <tr>
+            {/* columns.map((column, index) */}
+            {columns.map((column) => (
+              <th
+                className={headerType && `${headerType}-bg`}
+                key={column.header}
+                style={{ width: column?.width }}
+              >
+                <div>
+                  {/* {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}
+                </div>
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data.length > 0 &&
+            data.map((row: any, index: number) => (
+              <tr key={row.id || index}>
+                {columns.map((column, i) => {
+                  return (
+                    <td
+                      key={column.accessor + i}
+                      onClick={() => hanleOnclick(column, row)}
+                      className={classNames(column.className, {
+                        'clickable-cell': column.onClick,
+                      })}
+                    >
+                      <div>
+                        {/* {i === 0 && withCheckbox && (
+                          <span className="ff-table-checkbox">
+                            <Checkbox
+                              onChange={(e) => {
+                                onSelectClick(e, row);
+                              }}
+                              checked={row.checked}
+                              disabled={!!row.disabled}
+                            />
+                          </span>
+                        )} */}
+                        {prepareData(row, column)}
+                      </div>
+                    </td>
+                  );
+                })}
+              </tr>
+            ))}
+        </tbody>
+      </table>
+      {/* {data.length <= 0 && (
+        <div
+          className="no-data-content"
+          style={{ height: `calc(${height} - 50px)` }}
+        >
+          <NoData
+            image={noDataImage ? noDataImage : 'no_data_found'}
+            content={noDataContent}
+            size={noDataImageSize}
+          />
+        </div>
+      )} */}
+    </div>
+  );
+};
+
+export default Table;

package/src/components/Table/Types.ts

@@ -0,0 +1,100 @@
+import { ReactNode } from 'react';
+
+export interface ColumnsProps {
+    /**
+     * 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;
+  
+    onClick?: (colum: string, row: DataProps) => void;
+  }
+  export interface DataProps {
+    /**
+     * data for each row
+     */
+    [key: string]: any;
+  }
+  export interface SelectedItemProps {
+    /**
+     * selected row object | All selected flag
+     */
+    [key: string]: string | number | boolean;
+  }
+  export interface TableProps {
+    /**
+     * Data for table
+     */
+    data: Array<number | string | DataProps>;
+    /**
+     * Column details for table
+     */
+    columns: Array<any>;
+    /**
+     * Header type to have different background color
+     */
+    headerType: 'default' | 'primary' | 'secondary';
+    /**
+     * withFixedHeader prop to have non-scrollable fixed table header
+     */
+    withFixedHeader?: boolean;
+    /**
+     * borderWithRadius prop to have table with border 1px and borderRadius 5px
+     */
+    borderWithRadius?: boolean;
+    /**
+     * Check box feature to select the row
+     */
+    withCheckbox?: boolean;
+    /**
+     * Event for checkbox onClick
+     */
+    onSelect?: (e: object, arg: SelectedItemProps) => void;
+    /**
+     * Check box feature to select the row
+     */
+    allSelected?: boolean;
+    /**
+     * send true to show partial checkbox in the header
+     */
+    partialSelected?: boolean;
+    /**
+     * send true to disable the checkbox in the header
+     */
+    headerCheckboxDisabled?: boolean;
+    /**
+     * The content that to be displayed if no data not found
+     */
+    noDataContent: string | ReactNode;
+    /**
+     * Image that to be displayed if you don't have data
+     */
+    noDataImage?: string;
+    /**
+     * Size of the image that to be displayed if you don't have data
+     */
+    noDataImageSize?: 'x-large' | 'large' | 'medium' | 'small' | 'x-small';
+    /**
+     *  Height of the table in string
+     */
+    height?: string;
+    /**
+     *  classNames for the table container
+     */
+    className?: string;
+  }

package/src/components/Table/index.ts

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