Merge pull request #325 from DonOmalVindula/revert-state-ci-issue

feat(react): Add Table, TableRow, TableHead, TableBody and associated components

packages/react/.storybook/story-config.ts

@@ -114,6 +114,13 @@ export type Stories =
   | 'Stepper'
   | 'Switch'
   | 'Tab'
+  | 'Table'
+  | 'TableBody'
+  | 'TableCell'
+  | 'TableContainer'
+  | 'TableFooter'
+  | 'TableHead'
+  | 'TableRow'
   | 'TabPanel'
   | 'Tabs'
   | 'TransitionStepper'
@@ -392,6 +399,27 @@ const StoryConfig: StorybookConfig = {
   Tab: {
     hierarchy: `${StorybookCategories.Navigation}/Tab`,
   },
+  Table: {
+    hierarchy: `${StorybookCategories.DataDisplay}/Table`,
+  },
+  TableBody: {
+    hierarchy: `${StorybookCategories.DataDisplay}/Table Body`,
+  },
+  TableCell: {
+    hierarchy: `${StorybookCategories.DataDisplay}/Table Cell`,
+  },
+  TableContainer: {
+    hierarchy: `${StorybookCategories.DataDisplay}/Table Container`,
+  },
+  TableFooter: {
+    hierarchy: `${StorybookCategories.DataDisplay}/Table Footer`,
+  },
+  TableHead: {
+    hierarchy: `${StorybookCategories.DataDisplay}/Table Head`,
+  },
+  TableRow: {
+    hierarchy: `${StorybookCategories.DataDisplay}/Table Row`,
+  },
   TabPanel: {
     hierarchy: `${StorybookCategories.Navigation}/Tab Panel`,
   },

packages/react/src/components/Table/Table.stories.mdx

@@ -0,0 +1,90 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import dedent from 'ts-dedent';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import Table from './Table.tsx';
+import TableRow from '../TableRow/TableRow.tsx';
+import TableHead from '../TableHead/TableHead.tsx';
+import TableBody from '../TableBody/TableBody.tsx';
+import TableCell from '../TableCell/TableCell.tsx';
+
+export const meta = {
+  component: Table,
+  title: StoryConfig.Table.hierarchy,
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = args => {
+  return (
+    <Table {...args}>
+      <TableHead>
+        <TableRow>
+          <TableCell>
+            Table Head Cell 1
+          </TableCell>
+          <TableCell>
+            Table Head Cell 2
+          </TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>
+            Table Body Cell 1
+          </TableCell>
+          <TableCell>
+            Table Body Cell 2
+          </TableCell>
+        </TableRow>
+        <TableRow hideBorder={true}>
+          <TableCell>
+            Table Body Cell 3
+          </TableCell>
+          <TableCell>
+            Table Body Cell 4
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+};
+
+# Table
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+The `Table` component is used to display a set of data in a tabular format.
+
+<Canvas>
+  <Story name="Overview">
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `Table` component in your components as follows:
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`
+import Table from '@oxygen-ui/react/Table';\n
+function Demo {
+  return (
+    <Table>
+      {/** Table content */}
+    </Table>
+  );
+}
+`}
+/>

packages/react/src/components/Table/Table.tsx

@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import MuiTable, {TableProps as MuiTableProps, TableTypeMap} from '@mui/material/Table';
+import clsx from 'clsx';
+import {forwardRef} from 'react';
+import type {ElementType, ForwardRefExoticComponent, ReactElement, Ref} from 'react';
+
+export type TableProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = TableTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiTableProps<D, P>, 'component'>;
+
+/**
+ * The Table component lets display sets of data
+ *
+ * Demos:
+ *
+ * - [Table (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-table)
+ * - [Table (MUI)](https://mui.com/material-ui/react-table/)
+ *
+ * API:
+ *
+ * - [Table API](https://mui.com/material-ui/api/table/)
+ *
+ * @remarks
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Table component.
+ * @param ref - The ref to be forwarded to the MuiTable component.
+ * @returns The rendered Table component.
+ */
+const Table: ForwardRefExoticComponent<TableProps> = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: TableProps<C>,
+    ref: Ref<HTMLTableElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-table', className);
+
+    return <MuiTable ref={ref} className={classes} {...rest} />;
+  },
+) as ForwardRefExoticComponent<TableProps>;
+
+export default Table;

packages/react/src/components/Table/__tests__/Table.test.tsx

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {render} from '@unit-testing';
+import Table from '../Table';
+
+describe('Table', () => {
+  it('should render successfully', () => {
+    const {baseElement} = render(
+      <Table>
+        <p>test Table</p>
+      </Table>,
+    );
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(
+      <Table>
+        <p>test Table</p>
+      </Table>,
+    );
+    expect(baseElement).toMatchSnapshot();
+  });
+});

packages/react/src/components/Table/__tests__/__snapshots__/Table.test.tsx.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Table should match the snapshot 1`] = `
+<body>
+  <div>
+    <table
+      class="MuiTable-root oxygen-table css-1du9rtx-MuiTable-root"
+    >
+      <p>
+        test Table
+      </p>
+    </table>
+  </div>
+</body>
+`;

packages/react/src/components/Table/index.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export {default} from './Table';
+export * from './Table';
+
+export {TablePropsSizeOverrides} from '@mui/material/Table';
+export {TableTypeMap} from '@mui/material/Table';

packages/react/src/components/TableBody/TableBody.stories.mdx

@@ -0,0 +1,65 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import dedent from 'ts-dedent';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import TableBody from './TableBody.tsx';
+import TableRow from '../TableRow/TableRow.tsx';
+import TableCell from '../TableCell/TableCell.tsx';
+
+export const meta = {
+  component: TableBody,
+  title: StoryConfig.TableBody.hierarchy,
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = args => {
+  return (
+    <TableBody {...args}>
+      <TableCell>
+        Table Body Cell 1
+      </TableCell>
+      <TableCell>
+        Table Body Cell 2
+      </TableCell>
+    </TableBody>
+  );
+};
+
+# TableBody
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+The `TableBody` component is used to define the body section within the `Table` component.
+
+<Canvas>
+  <Story name="Overview">
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `TableBody` component in your components as follows:
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`
+import TableBody from '@oxygen-ui/react/TableBody';\n
+function Demo {
+  return (
+    <TableBody>
+      {/** Table Body content */}
+    </TableBody>
+  );
+}`}
+/>