fix: renamed DataGrid to DataTable

okta · Jun 23, 2023 · 5764656 · 5764656
1 parent e2a58ad
commit 5764656
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 54 deletions.
diff --git a/...yssey-react-mui/src/PaginatedDataGrid.tsx → ...ssey-react-mui/src/PaginatedDataTable.tsx b/...yssey-react-mui/src/PaginatedDataGrid.tsx → ...ssey-react-mui/src/PaginatedDataTable.tsx
@@ -34,7 +34,7 @@ import type {
   MaterialReactTableProps,
 } from "./materialReactTableTypes";
 
-export type PaginatedDataGridProps<
+export type PaginatedDataTableProps<
   TData extends DefaultMaterialReactTableData
 > = {
   columns: MaterialReactTableProps<TData>["columns"];
@@ -55,7 +55,7 @@ export type PaginatedDataGridProps<
   >;
 };
 
-const PaginatedDataGrid = <TData extends DefaultMaterialReactTableData>({
+const PaginatedDataTable = <TData extends DefaultMaterialReactTableData>({
   columns,
   data,
   fetchMoreData,
@@ -70,7 +70,7 @@ const PaginatedDataGrid = <TData extends DefaultMaterialReactTableData>({
   rowsPerPage = 10,
   state,
   ToolbarButtons,
-}: PaginatedDataGridProps<TData>) => {
+}: PaginatedDataTableProps<TData>) => {
   const { t } = useTranslation();
 
   const rowVirtualizerInstanceRef =
@@ -105,7 +105,7 @@ const PaginatedDataGrid = <TData extends DefaultMaterialReactTableData>({
         <Typography>
           <Trans
             count={totalFetchedRows}
-            i18nKey="datagrid.fetchedrows.text"
+            i18nKey="dataTable.fetchedrows.text"
             values={{
               totalRows: totalFetchedRows,
             }}
@@ -115,7 +115,7 @@ const PaginatedDataGrid = <TData extends DefaultMaterialReactTableData>({
         <Typography>
           <Trans
             count={totalFetchedRows}
-            i18nKey="datagrid.rows.text"
+            i18nKey="dataTable.rows.text"
             values={{
               totalRows: totalFetchedRows,
             }}
@@ -209,7 +209,7 @@ const PaginatedDataGrid = <TData extends DefaultMaterialReactTableData>({
     () =>
       hasError
         ? {
-            children: t("datagrid.error"),
+            children: t("dataTable.error"),
             severity: "error",
           }
         : {},
@@ -252,11 +252,11 @@ const PaginatedDataGrid = <TData extends DefaultMaterialReactTableData>({
   );
 };
 
-const MemoizedPaginatedDataGrid = memo(
-  PaginatedDataGrid
-) as typeof PaginatedDataGrid;
+const MemoizedPaginatedDataTable = memo(
+  PaginatedDataTable
+) as typeof PaginatedDataTable;
 
 // @ts-expect-error | This is going to error because the component isn't and can't be defined as a `FunctionComponent`, and therefore, doesn't have a `displayName` prop.
-MemoizedPaginatedDataGrid.displayName = "PaginatedDataGrid";
+MemoizedPaginatedDataTable.displayName = "PaginatedDataTable";
 
-export { MemoizedPaginatedDataGrid as PaginatedDataGrid };
+export { MemoizedPaginatedDataTable as PaginatedDataTable };
diff --git a/packages/odyssey-react-mui/src/Select.tsx b/packages/odyssey-react-mui/src/Select.tsx
@@ -25,8 +25,8 @@ import { Field } from "./Field";
 
 export type SelectOption = {
   text: string;
-  value?: string;
   type?: "heading" | "option";
+  value?: string;
 };
 
 export type SelectProps = {

diff --git a/.../odyssey-react-mui/src/StaticDataGrid.tsx → ...odyssey-react-mui/src/StaticDataTable.tsx b/.../odyssey-react-mui/src/StaticDataGrid.tsx → ...odyssey-react-mui/src/StaticDataTable.tsx
@@ -30,20 +30,21 @@ import type {
   MaterialReactTableProps,
 } from "./materialReactTableTypes";
 
-export type StaticDataGridProps<TData extends DefaultMaterialReactTableData> = {
-  columns: MaterialReactTableProps<TData>["columns"];
-  data: MaterialReactTableProps<TData>["data"];
-  getRowId?: MaterialReactTableProps<TData>["getRowId"];
-  hasError?: boolean;
-  initialState?: MaterialReactTableProps<TData>["initialState"];
-  onGlobalFilterChange?: MaterialReactTableProps<TData>["onGlobalFilterChange"];
-  state?: MaterialReactTableProps<TData>["state"];
-  ToolbarButtons?: FunctionComponent<
-    { table: MRT_TableInstance<TData> } & unknown
-  >;
-};
+export type StaticDataTableProps<TData extends DefaultMaterialReactTableData> =
+  {
+    columns: MaterialReactTableProps<TData>["columns"];
+    data: MaterialReactTableProps<TData>["data"];
+    getRowId?: MaterialReactTableProps<TData>["getRowId"];
+    hasError?: boolean;
+    initialState?: MaterialReactTableProps<TData>["initialState"];
+    onGlobalFilterChange?: MaterialReactTableProps<TData>["onGlobalFilterChange"];
+    state?: MaterialReactTableProps<TData>["state"];
+    ToolbarButtons?: FunctionComponent<
+      { table: MRT_TableInstance<TData> } & unknown
+    >;
+  };
 
-const StaticDataGrid = <TData extends DefaultMaterialReactTableData>({
+const StaticDataTable = <TData extends DefaultMaterialReactTableData>({
   columns,
   data,
   getRowId,
@@ -52,7 +53,7 @@ const StaticDataGrid = <TData extends DefaultMaterialReactTableData>({
   onGlobalFilterChange,
   state,
   ToolbarButtons,
-}: StaticDataGridProps<TData>) => {
+}: StaticDataTableProps<TData>) => {
   const { t } = useTranslation();
 
   const rowVirtualizerInstanceRef =
@@ -102,7 +103,7 @@ const StaticDataGrid = <TData extends DefaultMaterialReactTableData>({
       muiToolbarAlertBannerProps={
         hasError
           ? {
-              children: t("datagrid.error"),
+              children: t("dataTable.error"),
               color: "error",
             }
           : undefined
@@ -117,6 +118,6 @@ const StaticDataGrid = <TData extends DefaultMaterialReactTableData>({
   );
 };
 
-const MemoizedStaticDataGrid = memo(StaticDataGrid) as typeof StaticDataGrid;
+const MemoizedStaticDataTable = memo(StaticDataTable) as typeof StaticDataTable;
 
-export { MemoizedStaticDataGrid as StaticDataGrid };
+export { MemoizedStaticDataTable as StaticDataTable };
diff --git a/packages/odyssey-react-mui/src/index.ts b/packages/odyssey-react-mui/src/index.ts
@@ -101,7 +101,7 @@ export { default as FavoriteIcon } from "@mui/icons-material/Favorite";
 
 export { deepmerge, visuallyHidden } from "@mui/utils";
 
-export type { MRT_ColumnDef as DataGridColumn } from "material-react-table";
+export type { MRT_ColumnDef as DataTableColumn } from "material-react-table";
 
 export * from "./Autocomplete";
 export * from "./Banner";
@@ -125,14 +125,14 @@ export * from "./OdysseyCacheProvider";
 export * from "./OdysseyProvider";
 export * from "./OdysseyThemeProvider";
 export * from "./OdysseyTranslationProvider";
-export * from "./PaginatedDataGrid";
+export * from "./PaginatedDataTable";
 export * from "./PasswordField";
 export * from "./Radio";
 export * from "./RadioGroup";
 export * from "./ScreenReaderText";
 export * from "./SearchField";
 export * from "./Select";
-export * from "./StaticDataGrid";
+export * from "./StaticDataTable";
 export * from "./Status";
 export * from "./Tabs";
 export * from "./Tag";

diff --git a/...ui/DataGrid/PaginatedDataGrid.stories.tsx → .../DataTable/PaginatedDataTable.stories.tsx b/...ui/DataGrid/PaginatedDataGrid.stories.tsx → .../DataTable/PaginatedDataTable.stories.tsx
@@ -13,17 +13,17 @@
 import { Meta, StoryObj } from "@storybook/react";
 import {
   Button,
-  DataGridColumn,
-  PaginatedDataGrid,
-  PaginatedDataGridProps,
+  DataTableColumn,
+  PaginatedDataTable,
+  PaginatedDataTableProps,
 } from "@okta/odyssey-react-mui";
 
 import { MuiThemeDecorator } from "../../../../.storybook/components";
 import { useCallback, useRef, useState } from "react";
 
 const storybookMeta: Meta = {
-  title: "MUI Components/Data Grid/Paginated",
-  component: PaginatedDataGrid,
+  title: "MUI Components/Data Table/Paginated",
+  component: PaginatedDataTable,
   argTypes: {
     columns: {
       control: "array",
@@ -81,7 +81,7 @@ type Person = {
   state: string;
 };
 
-const columns: DataGridColumn<Person>[] = [
+const columns: DataTableColumn<Person>[] = [
   {
     accessorKey: "name.firstName",
     header: "First Name",
@@ -508,15 +508,15 @@ const data: Person[] = [
   },
 ];
 
-export const BasicUsage: StoryObj<PaginatedDataGridProps<Person>> = {
+export const BasicUsage: StoryObj<PaginatedDataTableProps<Person>> = {
   args: {
     columns,
     data,
     getRowId: ({ id }: { id: string }) => id,
   },
 };
 
-export const Pagination: StoryObj<PaginatedDataGridProps<Person>> = {
+export const Pagination: StoryObj<PaginatedDataTableProps<Person>> = {
   args: {
     columns,
     data,
@@ -533,12 +533,12 @@ export const Pagination: StoryObj<PaginatedDataGridProps<Person>> = {
     }, [args.data]);
 
     return (
-      <PaginatedDataGrid {...args} data={data} fetchMoreData={fetchMoreData} />
+      <PaginatedDataTable {...args} data={data} fetchMoreData={fetchMoreData} />
     );
   },
 };
 
-export const Selection: StoryObj<PaginatedDataGridProps<Person>> = {
+export const Selection: StoryObj<PaginatedDataTableProps<Person>> = {
   args: {
     columns,
     data,
@@ -547,7 +547,7 @@ export const Selection: StoryObj<PaginatedDataGridProps<Person>> = {
   },
 };
 
-export const CustomToolbar: StoryObj<PaginatedDataGridProps<Person>> = {
+export const CustomToolbar: StoryObj<PaginatedDataTableProps<Person>> = {
   args: {
     columns,
     data,
@@ -561,7 +561,7 @@ export const CustomToolbar: StoryObj<PaginatedDataGridProps<Person>> = {
   },
 };
 
-// const reportColumns: DataGridColumn<any>[] = [
+// const reportColumns: DataTableColumn<any>[] = [
 //   {
 //     accessorKey: "name",
 //     Cell: ({ cell }) => <Link href="#none">{cell.getValue<string>()}</Link>,
@@ -669,7 +669,7 @@ export const CustomToolbar: StoryObj<PaginatedDataGridProps<Person>> = {
 - Infinite scroll.
 */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-// export const Reports: StoryObj<DataGridProps<any>> = {
+// export const Reports: StoryObj<DataTableProps<any>> = {
 //   args: {
 //     columns: reportColumns,
 //     data: reportData,
@@ -698,5 +698,5 @@ export const CustomToolbar: StoryObj<PaginatedDataGridProps<Person>> = {
   - Text Alignment
   - `MenuButton`
   - Date display
-- `StaticDataGrid` with virtualization, no pagination, and no footer display nor toolbars.
+- `StaticDataTable` with virtualization, no pagination, and no footer display nor toolbars.
 */
diff --git a/...y-mui/DataGrid/StaticDataGrid.stories.tsx → ...mui/DataTable/StaticDataTable.stories.tsx b/...y-mui/DataGrid/StaticDataGrid.stories.tsx → ...mui/DataTable/StaticDataTable.stories.tsx
@@ -13,16 +13,16 @@
 import { Meta, StoryObj } from "@storybook/react";
 import {
   Button,
-  DataGridColumn,
-  StaticDataGrid,
-  StaticDataGridProps,
+  DataTableColumn,
+  StaticDataTable,
+  StaticDataTableProps,
 } from "@okta/odyssey-react-mui";
 
 import { MuiThemeDecorator } from "../../../../.storybook/components";
 
 const storybookMeta: Meta = {
-  title: "MUI Components/Data Grid/Static",
-  component: StaticDataGrid,
+  title: "MUI Components/Data Table/Static",
+  component: StaticDataTable,
   argTypes: {
     columns: {
       control: "array",
@@ -77,7 +77,7 @@ type Person = {
   state: string;
 };
 
-const columns: DataGridColumn<Person>[] = [
+const columns: DataTableColumn<Person>[] = [
   {
     accessorKey: "name.firstName",
     header: "First Name",
@@ -504,15 +504,15 @@ const data: Person[] = [
   },
 ];
 
-export const BasicUsage: StoryObj<StaticDataGridProps<Person>> = {
+export const BasicUsage: StoryObj<StaticDataTableProps<Person>> = {
   args: {
     columns,
     data,
     getRowId: ({ id }: { id: string }) => id,
   },
 };
 
-export const CustomToolbar: StoryObj<StaticDataGridProps<Person>> = {
+export const CustomToolbar: StoryObj<StaticDataTableProps<Person>> = {
   args: {
     columns,
     data,