Merge pull request #151 from ChanikaRuchini/main

feat(react): add DataGrid component

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

@@ -57,6 +57,7 @@ export type Stories =
   | 'ColorModeToggle'
   | 'Colors'
   | 'Container'
+  | 'DataGrid'
   | 'Divider'
   | 'Drawer'
   | 'CountryFlag'
@@ -194,6 +195,9 @@ const StoryConfig: StorybookConfig = {
   Container: {
     hierarchy: `${StorybookCategories.Layout}/Container`,
   },
+  DataGrid: {
+    hierarchy: `${StorybookCategories.DataDisplay}/DataGrid`,
+  },
   Divider: {
     hierarchy: `${StorybookCategories.DataDisplay}/Divider`,
   },

packages/react/package.json

@@ -38,6 +38,7 @@
     "typecheck": "tsc --noemit -p tsconfig.json"
   },
   "dependencies": {
+    "@mui/x-data-grid": "^6.9.2",
     "@oxygen-ui/primitives": "1.1.11",
     "@oxygen-ui/react-icons": "1.1.11",
     "clsx": "^1.2.1",

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

@@ -0,0 +1,92 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import dedent from 'ts-dedent';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import DataGrid from './DataGrid.tsx';
+
+export const meta = {
+  component: DataGrid,
+  title: StoryConfig.DataGrid.hierarchy,
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = args => <DataGrid {...args} />;
+
+# DataGrid
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+Use the DataGrid component to display information in a grid-like format of rows and columns.
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      columns: [
+        {field: 'id', headerName: 'ID', width: 90},
+        {
+          field: 'firstName',
+          headerName: 'First name',
+          width: 150,
+          editable: true,
+        },
+        {
+          field: 'lastName',
+          headerName: 'Last name',
+          width: 150,
+          editable: true,
+        },
+        {
+          field: 'age',
+          headerName: 'Age',
+          type: 'number',
+          width: 110,
+          editable: true,
+        },
+      ],
+      rows: [
+        {id: 1, lastName: 'Snow', firstName: 'Jon', age: 35},
+        {id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42},
+        {id: 3, lastName: 'Clifford', firstName: 'Ferrara', age: 44},
+        {id: 4, lastName: 'Frances', firstName: 'Rossini', age: 36},
+        {id: 5, lastName: 'Roxie', firstName: 'Harvey', age: 65},
+      ],
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `DataGrid` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`
+import DataGrid from '@oxygen-ui/react/DataGrid';\n
+function Demo() {
+  const rows = [
+  { id: 1, col1: 'Lannister', col2: 'Cersei' },
+  { id: 2, col1: 'Clifford', col2: 'Ferrara' },
+  { id: 3, col1: 'Frances', col2: 'Rossini' },
+];
+  const columns = [
+  { field: 'col1', headerName: 'First name', width: 150 },
+  { field: 'col2', headerName: 'Last name', width: 150 },
+];\n
+  return (
+    <DataGrid rows={rows} columns={columns} />
+  );
+}`}
+/>

packages/react/src/components/DataGrid/DataGrid.tsx

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * 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 {DataGrid as MuiDataGrid, DataGridProps as MuiDataGridProps} from '@mui/x-data-grid';
+import clsx from 'clsx';
+import {FC, ReactElement} from 'react';
+import {WithWrapperProps} from '../../models';
+import {composeComponentDisplayName} from '../../utils';
+import './data-grid.scss';
+
+export type DataGridProps = MuiDataGridProps;
+
+const COMPONENT_NAME: string = 'DataGrid';
+
+const DataGrid: FC<DataGridProps> & WithWrapperProps = (props: DataGridProps): ReactElement => {
+  const {className, ...rest} = props;
+
+  const classes: string = clsx('oxygen-data-grid', className);
+
+  return <MuiDataGrid className={classes} {...rest} />;
+};
+
+DataGrid.displayName = composeComponentDisplayName(COMPONENT_NAME);
+DataGrid.muiName = COMPONENT_NAME;
+DataGrid.defaultProps = {};
+
+export default DataGrid;

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

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * 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 DataGrid from '../DataGrid';
+
+describe('DataGrid', () => {
+  it('should render successfully', () => {
+    const {baseElement} = render(<DataGrid columns={[]} rows={[]} />);
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(<DataGrid columns={[]} rows={[]} />);
+    expect(baseElement).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,167 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataGrid should match the snapshot 1`] = `
+<body>
+  <div>
+    <div
+      aria-colcount="0"
+      aria-multiselectable="false"
+      aria-rowcount="1"
+      class="oxygen-data-grid MuiDataGrid-root MuiDataGrid-root--densityStandard MuiDataGrid-withBorderColor css-7jr54o-MuiDataGrid-root"
+      role="grid"
+    >
+      <div
+        class="MuiDataGrid-main css-204u17-MuiDataGrid-main"
+      >
+        <div
+          class="MuiDataGrid-columnHeaders MuiDataGrid-withBorderColor css-1iyq7zh-MuiDataGrid-columnHeaders"
+          style="min-height: 56px; max-height: 56px; line-height: 56px;"
+        >
+          <div
+            class="MuiDataGrid-columnHeadersInner css-gl260s-MuiDataGrid-columnHeadersInner"
+            role="rowgroup"
+            style="transform: translate3d(0px, 0px, 0px);"
+          >
+            <div
+              aria-rowindex="1"
+              class="css-yrdy0g-MuiDataGrid-columnHeaderRow"
+              role="row"
+            />
+          </div>
+        </div>
+        <div
+          class="MuiDataGrid-virtualScroller css-axafay-MuiDataGrid-virtualScroller"
+          style="overflow-x: hidden;"
+        >
+          <div
+            class="MuiDataGrid-overlayWrapper css-ql19fo-MuiDataGrid-overlayWrapper"
+          >
+            <div
+              class="MuiDataGrid-overlayWrapperInner css-1akuw9y-MuiDataGrid-overlayWrapperInner"
+              style="height: -56px; width: 0px;"
+            >
+              <div
+                class="MuiDataGrid-overlay css-1w53k9d-MuiDataGrid-overlay"
+              >
+                No rows
+              </div>
+            </div>
+          </div>
+          <div
+            class="MuiDataGrid-virtualScrollerContent MuiDataGrid-virtualScrollerContent--overflowed css-1kwdphh-MuiDataGrid-virtualScrollerContent"
+            style="width: auto; height: 1px; min-height: auto;"
+          >
+            <div
+              class="MuiDataGrid-virtualScrollerRenderZone css-s1v7zr-MuiDataGrid-virtualScrollerRenderZone"
+              style="transform: translate3d(NaNpx, undefinedpx, 0px);"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="MuiDataGrid-footerContainer MuiDataGrid-withBorderColor css-wop1k0-MuiDataGrid-footerContainer"
+      >
+        <div />
+        <div
+          class="MuiTablePagination-root css-16tg15x-MuiTablePagination-root"
+        >
+          <div
+            class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular MuiTablePagination-toolbar css-78c6dr-MuiToolbar-root-MuiTablePagination-toolbar"
+          >
+            <div
+              class="MuiTablePagination-spacer css-1psng7p-MuiTablePagination-spacer"
+            />
+            <p
+              class="MuiTablePagination-selectLabel css-3kw8qf-MuiTablePagination-selectLabel"
+              id=":r3:"
+            >
+              Rows per page:
+            </p>
+            <div
+              class="MuiInputBase-root MuiInputBase-colorPrimary css-1ob4j9x-MuiInputBase-root-MuiTablePagination-select"
+            >
+              <div
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby=":r3: :r2:"
+                class="MuiSelect-select MuiTablePagination-select MuiSelect-standard MuiInputBase-input css-110apic-MuiSelect-select-MuiInputBase-input"
+                id=":r2:"
+                role="button"
+                tabindex="0"
+              >
+                100
+              </div>
+              <input
+                aria-hidden="true"
+                class="MuiSelect-nativeInput css-yf8vq0-MuiSelect-nativeInput"
+                tabindex="-1"
+                value="100"
+              />
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiTablePagination-selectIcon MuiSelect-iconStandard css-4aq7rr-MuiSvgIcon-root-MuiSelect-icon"
+                data-testid="ArrowDropDownIcon"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7 10l5 5 5-5z"
+                />
+              </svg>
+            </div>
+            <p
+              class="MuiTablePagination-displayedRows css-yyokbk-MuiTablePagination-displayedRows"
+            >
+              0–0 of 0
+            </p>
+            <div
+              class="MuiTablePagination-actions"
+            >
+              <button
+                aria-label="Go to previous page"
+                class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-colorInherit MuiIconButton-sizeMedium css-155nkjq-MuiButtonBase-root-MuiIconButton-root"
+                disabled=""
+                tabindex="-1"
+                title="Go to previous page"
+                type="button"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                  data-testid="KeyboardArrowLeftIcon"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                  />
+                </svg>
+              </button>
+              <button
+                aria-label="Go to next page"
+                class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-colorInherit MuiIconButton-sizeMedium css-155nkjq-MuiButtonBase-root-MuiIconButton-root"
+                disabled=""
+                tabindex="-1"
+                title="Go to next page"
+                type="button"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                  data-testid="KeyboardArrowRightIcon"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;

packages/react/src/components/DataGrid/data-grid.scss

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * 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-data-grid {
+  /* Add Styles */
+}