From 9a2b75e5b9ce5675e72bdb134efa4a0d272b5313 Mon Sep 17 00:00:00 2001 From: DonOmalVindula Date: Fri, 10 Jan 2025 17:10:19 +0530 Subject: [PATCH 1/2] feat(react): Add Table, TableRow, TableHead, TableBody, TableCell and TableContainer components --- packages/react/.storybook/story-config.ts | 30 ++++++- .../src/components/Table/Table.stories.mdx | 90 +++++++++++++++++++ packages/react/src/components/Table/Table.tsx | 67 ++++++++++++++ .../components/Table/__tests__/Table.test.tsx | 40 +++++++++ .../__snapshots__/Table.test.tsx.snap | 15 ++++ packages/react/src/components/Table/index.ts | 23 +++++ .../TableBody/TableBody.stories.mdx | 65 ++++++++++++++ .../src/components/TableBody/TableBody.tsx | 61 +++++++++++++ .../TableBody/__tests__/TableBody.test.tsx | 40 +++++++++ .../__snapshots__/TableBody.test.tsx.snap | 15 ++++ .../react/src/components/TableBody/index.ts | 22 +++++ .../TableCell/TableCell.stories.mdx | 60 +++++++++++++ .../src/components/TableCell/TableCell.tsx | 63 +++++++++++++ .../TableCell/__tests__/TableCell.test.tsx | 40 +++++++++ .../__snapshots__/TableCell.test.tsx.snap | 15 ++++ .../react/src/components/TableCell/index.ts | 24 +++++ .../TableContainer/TableContainer.stories.mdx | 73 +++++++++++++++ .../TableContainer/TableContainer.tsx | 68 ++++++++++++++ .../__tests__/TableContainer.test.tsx | 40 +++++++++ .../TableContainer.test.tsx.snap | 15 ++++ .../src/components/TableContainer/index.ts | 22 +++++ .../TableFooter/TableFooter.stories.mdx | 68 ++++++++++++++ .../components/TableFooter/TableFooter.tsx | 62 +++++++++++++ .../__tests__/TableFooter.test.tsx | 40 +++++++++ .../__snapshots__/TableFooter.test.tsx.snap | 15 ++++ .../react/src/components/TableFooter/index.ts | 22 +++++ .../TableHead/TableHead.stories.mdx | 67 ++++++++++++++ .../src/components/TableHead/TableHead.tsx | 63 +++++++++++++ .../TableHead/__tests__/TableHead.test.tsx | 40 +++++++++ .../__snapshots__/TableHead.test.tsx.snap | 15 ++++ .../react/src/components/TableHead/index.ts | 22 +++++ .../src/components/TableHead/table-head.scss | 22 +++++ .../components/TableRow/TableRow.stories.mdx | 68 ++++++++++++++ .../src/components/TableRow/TableRow.tsx | 80 +++++++++++++++++ .../TableRow/__tests__/TableRow.test.tsx | 40 +++++++++ .../__snapshots__/TableRow.test.tsx.snap | 15 ++++ .../react/src/components/TableRow/index.ts | 22 +++++ packages/react/src/components/index.ts | 21 +++++ 38 files changed, 1569 insertions(+), 1 deletion(-) create mode 100644 packages/react/src/components/Table/Table.stories.mdx create mode 100644 packages/react/src/components/Table/Table.tsx create mode 100644 packages/react/src/components/Table/__tests__/Table.test.tsx create mode 100644 packages/react/src/components/Table/__tests__/__snapshots__/Table.test.tsx.snap create mode 100644 packages/react/src/components/Table/index.ts create mode 100644 packages/react/src/components/TableBody/TableBody.stories.mdx create mode 100644 packages/react/src/components/TableBody/TableBody.tsx create mode 100644 packages/react/src/components/TableBody/__tests__/TableBody.test.tsx create mode 100644 packages/react/src/components/TableBody/__tests__/__snapshots__/TableBody.test.tsx.snap create mode 100644 packages/react/src/components/TableBody/index.ts create mode 100644 packages/react/src/components/TableCell/TableCell.stories.mdx create mode 100644 packages/react/src/components/TableCell/TableCell.tsx create mode 100644 packages/react/src/components/TableCell/__tests__/TableCell.test.tsx create mode 100644 packages/react/src/components/TableCell/__tests__/__snapshots__/TableCell.test.tsx.snap create mode 100644 packages/react/src/components/TableCell/index.ts create mode 100644 packages/react/src/components/TableContainer/TableContainer.stories.mdx create mode 100644 packages/react/src/components/TableContainer/TableContainer.tsx create mode 100644 packages/react/src/components/TableContainer/__tests__/TableContainer.test.tsx create mode 100644 packages/react/src/components/TableContainer/__tests__/__snapshots__/TableContainer.test.tsx.snap create mode 100644 packages/react/src/components/TableContainer/index.ts create mode 100644 packages/react/src/components/TableFooter/TableFooter.stories.mdx create mode 100644 packages/react/src/components/TableFooter/TableFooter.tsx create mode 100644 packages/react/src/components/TableFooter/__tests__/TableFooter.test.tsx create mode 100644 packages/react/src/components/TableFooter/__tests__/__snapshots__/TableFooter.test.tsx.snap create mode 100644 packages/react/src/components/TableFooter/index.ts create mode 100644 packages/react/src/components/TableHead/TableHead.stories.mdx create mode 100644 packages/react/src/components/TableHead/TableHead.tsx create mode 100644 packages/react/src/components/TableHead/__tests__/TableHead.test.tsx create mode 100644 packages/react/src/components/TableHead/__tests__/__snapshots__/TableHead.test.tsx.snap create mode 100644 packages/react/src/components/TableHead/index.ts create mode 100644 packages/react/src/components/TableHead/table-head.scss create mode 100644 packages/react/src/components/TableRow/TableRow.stories.mdx create mode 100644 packages/react/src/components/TableRow/TableRow.tsx create mode 100644 packages/react/src/components/TableRow/__tests__/TableRow.test.tsx create mode 100644 packages/react/src/components/TableRow/__tests__/__snapshots__/TableRow.test.tsx.snap create mode 100644 packages/react/src/components/TableRow/index.ts diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index 6cf57714..b08da459 100644 --- a/packages/react/.storybook/story-config.ts +++ b/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`, }, @@ -424,4 +452,4 @@ const StoryConfig: StorybookConfig = { } }; -export default StoryConfig; +export default StoryConfig; \ No newline at end of file diff --git a/packages/react/src/components/Table/Table.stories.mdx b/packages/react/src/components/Table/Table.stories.mdx new file mode 100644 index 00000000..2163e5fc --- /dev/null +++ b/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, +}; + + + +export const Template = args => { + return ( + + + + + Table Head Cell 1 + + + Table Head Cell 2 + + + + + + + Table Body Cell 1 + + + Table Body Cell 2 + + + + + Table Body Cell 3 + + + Table Body Cell 4 + + + +
+ ); +}; + +# Table + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +The `Table` component is used to display a set of data in a tabular format. + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `Table` component in your components as follows: + + + {/** Table content */} + + ); +} +`} +/> diff --git a/packages/react/src/components/Table/Table.tsx b/packages/react/src/components/Table/Table.tsx new file mode 100644 index 00000000..5b2552ce --- /dev/null +++ b/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, '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 = forwardRef( + ( + {className, ...rest}: TableProps, + ref: Ref, + ): ReactElement => { + const classes: string = clsx('oxygen-table', className); + + return ; + }, +) as ForwardRefExoticComponent; + +export default Table; diff --git a/packages/react/src/components/Table/__tests__/Table.test.tsx b/packages/react/src/components/Table/__tests__/Table.test.tsx new file mode 100644 index 00000000..bfa8f838 --- /dev/null +++ b/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( + +

test Table

+
, + ); + expect(baseElement).toBeTruthy(); + }); + + it('should match the snapshot', () => { + const {baseElement} = render( + +

test Table

+
, + ); + expect(baseElement).toMatchSnapshot(); + }); +}); diff --git a/packages/react/src/components/Table/__tests__/__snapshots__/Table.test.tsx.snap b/packages/react/src/components/Table/__tests__/__snapshots__/Table.test.tsx.snap new file mode 100644 index 00000000..ac2b2e08 --- /dev/null +++ b/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`] = ` + +
+ +

+ test Table +

+
+
+ +`; diff --git a/packages/react/src/components/Table/index.ts b/packages/react/src/components/Table/index.ts new file mode 100644 index 00000000..d617b210 --- /dev/null +++ b/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'; diff --git a/packages/react/src/components/TableBody/TableBody.stories.mdx b/packages/react/src/components/TableBody/TableBody.stories.mdx new file mode 100644 index 00000000..a195b696 --- /dev/null +++ b/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, +}; + + + +export const Template = args => { + return ( + + + Table Body Cell 1 + + + Table Body Cell 2 + + + ); +}; + +# TableBody + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +The `TableBody` component is used to define the body section within the `Table` component. + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `TableBody` component in your components as follows: + + + {/** Table Body content */} + + ); +}`} +/> diff --git a/packages/react/src/components/TableBody/TableBody.tsx b/packages/react/src/components/TableBody/TableBody.tsx new file mode 100644 index 00000000..8cc8bb68 --- /dev/null +++ b/packages/react/src/components/TableBody/TableBody.tsx @@ -0,0 +1,61 @@ +/** + * 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 MuiTableBody, {TableBodyProps as MuiTableBodyProps, TableBodyTypeMap} from '@mui/material/TableBody'; +import clsx from 'clsx'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, ReactElement, Ref} from 'react'; + +export type TableBodyProps< + C extends ElementType = ElementType, + D extends ElementType = TableBodyTypeMap['defaultComponent'], + P = {}, +> = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ + component?: C; +} & Omit, 'component'>; + +/** + * The TableBody component lets display a body of the Table + * + * API: + * - [TableBody API](https://mui.com/material-ui/api/table-head/) + * + * @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 TableBody component. + * @param ref - The ref to be forwarded to the MuiTable component. + * @returns The rendered TableBody component. + */ +const TableBody: ForwardRefExoticComponent = forwardRef( + ( + {className, ...rest}: TableBodyProps, + ref: Ref, + ): ReactElement => { + const classes: string = clsx('oxygen-table-body', className); + + return ; + }, +) as ForwardRefExoticComponent; + +export default TableBody; diff --git a/packages/react/src/components/TableBody/__tests__/TableBody.test.tsx b/packages/react/src/components/TableBody/__tests__/TableBody.test.tsx new file mode 100644 index 00000000..6414a8e6 --- /dev/null +++ b/packages/react/src/components/TableBody/__tests__/TableBody.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 TableBody from '../TableBody'; + +describe('TableBody', () => { + it('should render successfully', () => { + const {baseElement} = render( + +

test TableBody

+ , + ); + expect(baseElement).toBeTruthy(); + }); + + it('should match the snapshot', () => { + const {baseElement} = render( + +

test TableBody

+ , + ); + expect(baseElement).toMatchSnapshot(); + }); +}); diff --git a/packages/react/src/components/TableBody/__tests__/__snapshots__/TableBody.test.tsx.snap b/packages/react/src/components/TableBody/__tests__/__snapshots__/TableBody.test.tsx.snap new file mode 100644 index 00000000..d07bd6a2 --- /dev/null +++ b/packages/react/src/components/TableBody/__tests__/__snapshots__/TableBody.test.tsx.snap @@ -0,0 +1,15 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`TableBody should match the snapshot 1`] = ` + +
+ +

+ test TableBody +

+ +
+ +`; diff --git a/packages/react/src/components/TableBody/index.ts b/packages/react/src/components/TableBody/index.ts new file mode 100644 index 00000000..c44444d0 --- /dev/null +++ b/packages/react/src/components/TableBody/index.ts @@ -0,0 +1,22 @@ +/** + * 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 './TableBody'; +export * from './TableBody'; + +export {TableBodyTypeMap} from '@mui/material/TableBody'; diff --git a/packages/react/src/components/TableCell/TableCell.stories.mdx b/packages/react/src/components/TableCell/TableCell.stories.mdx new file mode 100644 index 00000000..03cf2774 --- /dev/null +++ b/packages/react/src/components/TableCell/TableCell.stories.mdx @@ -0,0 +1,60 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import TableCell from './TableCell.tsx'; + +export const meta = { + component: TableCell, + title: StoryConfig.TableCell.hierarchy +}; + + + +export const Template = args => { + return ( + + Table Cell + + ); +}; + +# TableCell + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +The `TableCell` component is used to display individual cells within a `Table` component. + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `TableCell` component in your components as follows: + + + {/** Cell content */} + + ); +}`} +/> diff --git a/packages/react/src/components/TableCell/TableCell.tsx b/packages/react/src/components/TableCell/TableCell.tsx new file mode 100644 index 00000000..5aceb2a5 --- /dev/null +++ b/packages/react/src/components/TableCell/TableCell.tsx @@ -0,0 +1,63 @@ +/** + * 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 MuiTableCell, {TableCellProps as MuiTableCellProps} from '@mui/material/TableCell'; +import clsx from 'clsx'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, ReactElement, Ref} from 'react'; + +export type TableCellProps = { + /** + * Additional class names for the TableCell. + */ + className?: string; + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ + component?: C; +} & Omit; + +/** + * The TableCell component lets display a cell of the Table + * + * + * API: + * - [TableCell API](https://mui.com/material-ui/api/table-cell/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ✅ `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 TableCell component. + * @param ref - The ref to be forwarded to the MuiTableCell component. + * @returns The rendered TableCell component. + */ +const TableCell: ForwardRefExoticComponent = forwardRef( + ( + {className, ...rest}: TableCellProps, + ref: Ref, + ): ReactElement => { + const classes: string = clsx('oxygen-table-cell', className); + + return ; + }, +) as ForwardRefExoticComponent; + +export default TableCell; diff --git a/packages/react/src/components/TableCell/__tests__/TableCell.test.tsx b/packages/react/src/components/TableCell/__tests__/TableCell.test.tsx new file mode 100644 index 00000000..775a4847 --- /dev/null +++ b/packages/react/src/components/TableCell/__tests__/TableCell.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 TableCell from '../TableCell'; + +describe('TableCell', () => { + it('should render successfully', () => { + const {baseElement} = render( + +

test TableCell

+ , + ); + expect(baseElement).toBeTruthy(); + }); + + it('should match the snapshot', () => { + const {baseElement} = render( + +

test TableCell

+ , + ); + expect(baseElement).toMatchSnapshot(); + }); +}); diff --git a/packages/react/src/components/TableCell/__tests__/__snapshots__/TableCell.test.tsx.snap b/packages/react/src/components/TableCell/__tests__/__snapshots__/TableCell.test.tsx.snap new file mode 100644 index 00000000..74efe10e --- /dev/null +++ b/packages/react/src/components/TableCell/__tests__/__snapshots__/TableCell.test.tsx.snap @@ -0,0 +1,15 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`TableCell should match the snapshot 1`] = ` + +
+ +

+ test TableCell +

+ +
+ +`; diff --git a/packages/react/src/components/TableCell/index.ts b/packages/react/src/components/TableCell/index.ts new file mode 100644 index 00000000..18af3936 --- /dev/null +++ b/packages/react/src/components/TableCell/index.ts @@ -0,0 +1,24 @@ +/** + * 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 './TableCell'; +export * from './TableCell'; + +export {TableCellPropsSizeOverrides} from '@mui/material/TableCell'; +export {TableCellPropsVariantOverrides} from '@mui/material/TableCell'; +export {SortDirection} from '@mui/material/TableCell'; diff --git a/packages/react/src/components/TableContainer/TableContainer.stories.mdx b/packages/react/src/components/TableContainer/TableContainer.stories.mdx new file mode 100644 index 00000000..efc5e4f3 --- /dev/null +++ b/packages/react/src/components/TableContainer/TableContainer.stories.mdx @@ -0,0 +1,73 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import TableContainer from './TableContainer.tsx'; +import TableCell from '../TableCell/TableCell.tsx'; +import TableRow from '../TableRow/TableRow.tsx'; +import Table from '../Table/Table.tsx'; +import Paper from '../Paper/Paper.tsx'; + +export const meta = { + component: TableContainer, + title: StoryConfig.TableContainer.hierarchy, +}; + + + +export const Template = args => { + return ( + + + + + Table Cell 1 + + + Table Cell 2 + + +
+ + ); +}; + +# TableContainer + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## TableContainer + +The `TableContainer` component is used to define a container for the `Table` component. + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `TableContainer` component in your components as follows: + + + {/** TableContainer content */} + + ); +} +`} +/> diff --git a/packages/react/src/components/TableContainer/TableContainer.tsx b/packages/react/src/components/TableContainer/TableContainer.tsx new file mode 100644 index 00000000..40a8bfc3 --- /dev/null +++ b/packages/react/src/components/TableContainer/TableContainer.tsx @@ -0,0 +1,68 @@ +/** + * 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 MuiTableContainer, { + TableContainerProps as MuiTableContainerProps, + TableContainerTypeMap, +} from '@mui/material/TableContainer'; +import clsx from 'clsx'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, ReactElement, Ref} from 'react'; + +export type TableContainerProps< + C extends ElementType = ElementType, + D extends ElementType = TableContainerTypeMap['defaultComponent'], + P = {}, +> = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ + component?: C; +} & Omit, 'component'>; + +/** + * The TableContainer component lets display a container of the table + * + * Demos: + * + * - [Table](https://mui.com/material-ui/react-table/) + * + * API: + * + * - [TableContainer API](https://mui.com/material-ui/api/table-container/) + * @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 Tablee component. + */ +const TableContainer: ForwardRefExoticComponent = forwardRef( + ( + {className, ...rest}: TableContainerProps, + ref: Ref, + ): ReactElement => { + const classes: string = clsx('oxygen-table-container', className); + + return ; + }, +) as ForwardRefExoticComponent; + +export default TableContainer; diff --git a/packages/react/src/components/TableContainer/__tests__/TableContainer.test.tsx b/packages/react/src/components/TableContainer/__tests__/TableContainer.test.tsx new file mode 100644 index 00000000..3ee6c2c2 --- /dev/null +++ b/packages/react/src/components/TableContainer/__tests__/TableContainer.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 TableContainer from '../TableContainer'; + +describe('TableContainer', () => { + it('should render successfully', () => { + const {baseElement} = render( + +

test TableContainer

+ , + ); + expect(baseElement).toBeTruthy(); + }); + + it('should match the snapshot', () => { + const {baseElement} = render( + +

test TableContainer

+ , + ); + expect(baseElement).toMatchSnapshot(); + }); +}); diff --git a/packages/react/src/components/TableContainer/__tests__/__snapshots__/TableContainer.test.tsx.snap b/packages/react/src/components/TableContainer/__tests__/__snapshots__/TableContainer.test.tsx.snap new file mode 100644 index 00000000..3799e8df --- /dev/null +++ b/packages/react/src/components/TableContainer/__tests__/__snapshots__/TableContainer.test.tsx.snap @@ -0,0 +1,15 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`TableContainer should match the snapshot 1`] = ` + +
+
+

+ test TableContainer +

+
+
+ +`; diff --git a/packages/react/src/components/TableContainer/index.ts b/packages/react/src/components/TableContainer/index.ts new file mode 100644 index 00000000..cc5d48d8 --- /dev/null +++ b/packages/react/src/components/TableContainer/index.ts @@ -0,0 +1,22 @@ +/** + * 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 './TableContainer'; +export * from './TableContainer'; + +export {TableContainerTypeMap} from '@mui/material/TableContainer'; diff --git a/packages/react/src/components/TableFooter/TableFooter.stories.mdx b/packages/react/src/components/TableFooter/TableFooter.stories.mdx new file mode 100644 index 00000000..e1c3734a --- /dev/null +++ b/packages/react/src/components/TableFooter/TableFooter.stories.mdx @@ -0,0 +1,68 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import TableFooter from './TableFooter.tsx'; +import TableCell from '../TableCell/TableCell.tsx'; +import Table from '../Table/Table.tsx'; + +export const meta = { + component: TableFooter, + title: StoryConfig.TableFooter.hierarchy, +}; + + + +export const Template = args => { + return ( + + + + Table Cell 1 + + + Table Cell 2 + + +
+ ); +}; + +# TableFooter + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## TableFooter + +The `TableFooter` component is used to define a footer for the `Table` component. + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `TableFooter` component in your components as follows: + + + {/** TableFooter content */} + + ); +} +`} +/> diff --git a/packages/react/src/components/TableFooter/TableFooter.tsx b/packages/react/src/components/TableFooter/TableFooter.tsx new file mode 100644 index 00000000..d2490acd --- /dev/null +++ b/packages/react/src/components/TableFooter/TableFooter.tsx @@ -0,0 +1,62 @@ +/** + * 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 MuiTableFooter, {TableFooterProps as MuiTableFooterProps, TableFooterTypeMap} from '@mui/material/TableFooter'; +import clsx from 'clsx'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, ReactElement, Ref} from 'react'; + +export type TableFooterProps< + C extends ElementType = ElementType, + D extends ElementType = TableFooterTypeMap['defaultComponent'], + P = {}, +> = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ + component?: C; +} & Omit, 'component'>; + +/** + * The TableFooter component lets display a footer of the table + * + * + * API: + * - [TableFooter API](https://mui.com/material-ui/api/table-footer/) + * + * @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 TableFooter component. + * @param ref - The ref to be forwarded to the MuiTableFooter component. + * @returns The rendered TableFooter component. + */ +const TableFooter: ForwardRefExoticComponent = forwardRef( + ( + {className, ...rest}: TableFooterProps, + ref: Ref, + ): ReactElement => { + const classes: string = clsx('oxygen-table-footer', className); + + return ; + }, +) as ForwardRefExoticComponent; + +export default TableFooter; diff --git a/packages/react/src/components/TableFooter/__tests__/TableFooter.test.tsx b/packages/react/src/components/TableFooter/__tests__/TableFooter.test.tsx new file mode 100644 index 00000000..aa1f7624 --- /dev/null +++ b/packages/react/src/components/TableFooter/__tests__/TableFooter.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 TableFooter from '../TableFooter'; + +describe('TableFooter', () => { + it('should render successfully', () => { + const {baseElement} = render( + +

test TableFooter

+ , + ); + expect(baseElement).toBeTruthy(); + }); + + it('should match the snapshot', () => { + const {baseElement} = render( + +

test TableFooter

+ , + ); + expect(baseElement).toMatchSnapshot(); + }); +}); diff --git a/packages/react/src/components/TableFooter/__tests__/__snapshots__/TableFooter.test.tsx.snap b/packages/react/src/components/TableFooter/__tests__/__snapshots__/TableFooter.test.tsx.snap new file mode 100644 index 00000000..53cae3e0 --- /dev/null +++ b/packages/react/src/components/TableFooter/__tests__/__snapshots__/TableFooter.test.tsx.snap @@ -0,0 +1,15 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`TableFooter should match the snapshot 1`] = ` + +
+ +

+ test TableFooter +

+ +
+ +`; diff --git a/packages/react/src/components/TableFooter/index.ts b/packages/react/src/components/TableFooter/index.ts new file mode 100644 index 00000000..51a67d8a --- /dev/null +++ b/packages/react/src/components/TableFooter/index.ts @@ -0,0 +1,22 @@ +/** + * 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 './TableFooter'; +export * from './TableFooter'; + +export {TableFooterTypeMap} from '@mui/material/TableFooter'; diff --git a/packages/react/src/components/TableHead/TableHead.stories.mdx b/packages/react/src/components/TableHead/TableHead.stories.mdx new file mode 100644 index 00000000..91b93e48 --- /dev/null +++ b/packages/react/src/components/TableHead/TableHead.stories.mdx @@ -0,0 +1,67 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import TableHead from './TableHead.tsx'; +import TableRow from '../TableRow/TableRow.tsx'; +import TableCell from '../TableCell/TableCell.tsx'; + +export const meta = { + component: TableHead, + title: StoryConfig.TableHead.hierarchy, +}; + + + +export const Template = args => { + return ( + + + + Table Head Cell 1 + + + Table Head Cell 2 + + + + ); +}; + +# TableHead + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +The `TableHead` component is used to define the header section within the `Table` component. + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `TableHead` component in your components as follows: + + + {/** Table Head content */} + + ); +}`} +/> diff --git a/packages/react/src/components/TableHead/TableHead.tsx b/packages/react/src/components/TableHead/TableHead.tsx new file mode 100644 index 00000000..b6ccde8b --- /dev/null +++ b/packages/react/src/components/TableHead/TableHead.tsx @@ -0,0 +1,63 @@ +/** + * 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 MuiTableHead, {TableHeadProps as MuiTableHeadProps, TableHeadTypeMap} from '@mui/material/TableHead'; +import clsx from 'clsx'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, ReactElement, Ref} from 'react'; +import './table-head.scss'; + +export type TableHeadProps< + C extends ElementType = ElementType, + D extends ElementType = TableHeadTypeMap['defaultComponent'], + P = {}, +> = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ + component?: C; +} & Omit, 'component'>; + +/** + * The TableHead component lets display a header of the Table + * + * + * API: + * - [TableHead API](https://mui.com/material-ui/api/table-head/) + * + * @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 Tablee component. + */ +const TableHead: ForwardRefExoticComponent = forwardRef( + ( + {className, ...rest}: TableHeadProps, + ref: Ref, + ): ReactElement => { + const classes: string = clsx('oxygen-table-head', className); + + return ; + }, +) as ForwardRefExoticComponent; + +export default TableHead; diff --git a/packages/react/src/components/TableHead/__tests__/TableHead.test.tsx b/packages/react/src/components/TableHead/__tests__/TableHead.test.tsx new file mode 100644 index 00000000..156b0f35 --- /dev/null +++ b/packages/react/src/components/TableHead/__tests__/TableHead.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 TableHead from '../TableHead'; + +describe('TableHead', () => { + it('should render successfully', () => { + const {baseElement} = render( + +

test TableHead

+ , + ); + expect(baseElement).toBeTruthy(); + }); + + it('should match the snapshot', () => { + const {baseElement} = render( + +

test TableHead

+ , + ); + expect(baseElement).toMatchSnapshot(); + }); +}); diff --git a/packages/react/src/components/TableHead/__tests__/__snapshots__/TableHead.test.tsx.snap b/packages/react/src/components/TableHead/__tests__/__snapshots__/TableHead.test.tsx.snap new file mode 100644 index 00000000..f7417664 --- /dev/null +++ b/packages/react/src/components/TableHead/__tests__/__snapshots__/TableHead.test.tsx.snap @@ -0,0 +1,15 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`TableHead should match the snapshot 1`] = ` + +
+ +

+ test TableHead +

+ +
+ +`; diff --git a/packages/react/src/components/TableHead/index.ts b/packages/react/src/components/TableHead/index.ts new file mode 100644 index 00000000..b448e484 --- /dev/null +++ b/packages/react/src/components/TableHead/index.ts @@ -0,0 +1,22 @@ +/** + * 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 './TableHead'; +export * from './TableHead'; + +export {TableHeadTypeMap} from '@mui/material/TableHead'; diff --git a/packages/react/src/components/TableHead/table-head.scss b/packages/react/src/components/TableHead/table-head.scss new file mode 100644 index 00000000..5c2137ba --- /dev/null +++ b/packages/react/src/components/TableHead/table-head.scss @@ -0,0 +1,22 @@ +/** + * 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. + */ + +.oxygen-table-head { + /** Add Styles */ + background-color: var(--oxygen-palette-customComponents-Code-background); +} diff --git a/packages/react/src/components/TableRow/TableRow.stories.mdx b/packages/react/src/components/TableRow/TableRow.stories.mdx new file mode 100644 index 00000000..59ca4c2f --- /dev/null +++ b/packages/react/src/components/TableRow/TableRow.stories.mdx @@ -0,0 +1,68 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import TableRow from './TableRow.tsx'; +import TableCell from '../TableCell/TableCell.tsx'; +import Table from '../Table/Table.tsx'; + +export const meta = { + component: TableRow, + title: StoryConfig.TableRow.hierarchy, +}; + + + +export const Template = args => { + return ( + + + + Table Cell 1 + + + Table Cell 2 + + +
+ ); +}; + +# TableRow + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## TableRow + +The `TableRow` component is used to define a row within the `Table` component. + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `TableRow` component in your components as follows: + + + {/** Row content */} + + ); +} +`} +/> diff --git a/packages/react/src/components/TableRow/TableRow.tsx b/packages/react/src/components/TableRow/TableRow.tsx new file mode 100644 index 00000000..5629c6eb --- /dev/null +++ b/packages/react/src/components/TableRow/TableRow.tsx @@ -0,0 +1,80 @@ +/** + * 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 {styled} from '@mui/material/styles'; +import MuiTableRow, {TableRowProps as MuiTableRowProps, TableRowTypeMap} from '@mui/material/TableRow'; +import clsx from 'clsx'; +import {forwardRef} from 'react'; +import type {ElementType, ForwardRefExoticComponent, ReactElement, Ref} from 'react'; + +const TableRowWithoutBorder: typeof MuiTableRow = styled(MuiTableRow)(() => ({ + 'td, th': { + border: 0, + }, +})); + +export type TableRowProps< + C extends ElementType = ElementType, + D extends ElementType = TableRowTypeMap['defaultComponent'], + P = {}, +> = { + /** + * The component used for the root node. Either a string to use a HTML element or a component. + */ + component?: C; + /** + * If `true`, the table row will not have a bottom border. + * @default false + * @optional + * @type boolean + */ + hideBorder?: boolean; +} & Omit, 'component'>; + +/** + * The TableRow component lets display a row of data + * + * + * API: + * - [TableRow API](https://mui.com/material-ui/api/table-row/) + * + * @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 Tablee component. + */ +const TableRow: ForwardRefExoticComponent = forwardRef( + ( + {className, hideBorder, ...rest}: TableRowProps, + ref: Ref, + ): ReactElement => { + const classes: string = clsx('oxygen-table-row', className); + + if (hideBorder) { + return ; + } + + return ; + }, +) as ForwardRefExoticComponent; + +export default TableRow; diff --git a/packages/react/src/components/TableRow/__tests__/TableRow.test.tsx b/packages/react/src/components/TableRow/__tests__/TableRow.test.tsx new file mode 100644 index 00000000..baefac2e --- /dev/null +++ b/packages/react/src/components/TableRow/__tests__/TableRow.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 TableRow from '../TableRow'; + +describe('TableRow', () => { + it('should render successfully', () => { + const {baseElement} = render( + +

test TableRow

+ , + ); + expect(baseElement).toBeTruthy(); + }); + + it('should match the snapshot', () => { + const {baseElement} = render( + +

test TableRow

+ , + ); + expect(baseElement).toMatchSnapshot(); + }); +}); diff --git a/packages/react/src/components/TableRow/__tests__/__snapshots__/TableRow.test.tsx.snap b/packages/react/src/components/TableRow/__tests__/__snapshots__/TableRow.test.tsx.snap new file mode 100644 index 00000000..ca1fa590 --- /dev/null +++ b/packages/react/src/components/TableRow/__tests__/__snapshots__/TableRow.test.tsx.snap @@ -0,0 +1,15 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`TableRow should match the snapshot 1`] = ` + +
+ +

+ test TableRow +

+ +
+ +`; diff --git a/packages/react/src/components/TableRow/index.ts b/packages/react/src/components/TableRow/index.ts new file mode 100644 index 00000000..aec2a209 --- /dev/null +++ b/packages/react/src/components/TableRow/index.ts @@ -0,0 +1,22 @@ +/** + * 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 './TableRow'; +export * from './TableRow'; + +export {TableRowTypeMap} from '@mui/material/TableRow'; diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index ef397e47..ae7b805a 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -250,6 +250,27 @@ export * from './Switch'; export {default as Tab} from './Tab'; export * from './Tab'; +export {default as Table} from './Table'; +export * from './Table'; + +export {default as TableBody} from './TableBody'; +export * from './TableBody'; + +export {default as TableCell} from './TableCell'; +export * from './TableCell'; + +export {default as TableContainer} from './TableContainer'; +export * from './TableContainer'; + +export {default as TableFooter} from './TableFooter'; +export * from './TableFooter'; + +export {default as TableHead} from './TableHead'; +export * from './TableHead'; + +export {default as TableRow} from './TableRow'; +export * from './TableRow'; + export {default as TabPanel} from './TabPanel'; export * from './TabPanel'; From 82ad6a1ce0e7168cef4f6c919968bb8b4899bd06 Mon Sep 17 00:00:00 2001 From: DonOmalVindula Date: Fri, 10 Jan 2025 17:12:19 +0530 Subject: [PATCH 2/2] chore(react): add new line at EoF --- packages/react/.storybook/story-config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index b08da459..6c3e13d9 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -452,4 +452,4 @@ const StoryConfig: StorybookConfig = { } }; -export default StoryConfig; \ No newline at end of file +export default StoryConfig;