From 57646561ffe73b4d12300fddfd05ece1dc5b576d Mon Sep 17 00:00:00 2001 From: Kevin Ghadyani Date: Fri, 23 Jun 2023 13:43:21 -0500 Subject: [PATCH] fix: renamed DataGrid to DataTable --- ...tedDataGrid.tsx => PaginatedDataTable.tsx} | 22 ++++++------ packages/odyssey-react-mui/src/Select.tsx | 2 +- ...StaticDataGrid.tsx => StaticDataTable.tsx} | 35 ++++++++++--------- packages/odyssey-react-mui/src/index.ts | 6 ++-- .../PaginatedDataTable.stories.tsx} | 28 +++++++-------- .../StaticDataTable.stories.tsx} | 16 ++++----- 6 files changed, 55 insertions(+), 54 deletions(-) rename packages/odyssey-react-mui/src/{PaginatedDataGrid.tsx => PaginatedDataTable.tsx} (93%) rename packages/odyssey-react-mui/src/{StaticDataGrid.tsx => StaticDataTable.tsx} (76%) rename packages/odyssey-storybook/src/components/odyssey-mui/{DataGrid/PaginatedDataGrid.stories.tsx => DataTable/PaginatedDataTable.stories.tsx} (95%) rename packages/odyssey-storybook/src/components/odyssey-mui/{DataGrid/StaticDataGrid.stories.tsx => DataTable/StaticDataTable.stories.tsx} (96%) diff --git a/packages/odyssey-react-mui/src/PaginatedDataGrid.tsx b/packages/odyssey-react-mui/src/PaginatedDataTable.tsx similarity index 93% rename from packages/odyssey-react-mui/src/PaginatedDataGrid.tsx rename to packages/odyssey-react-mui/src/PaginatedDataTable.tsx index fe622ee47b..a485c5fac6 100644 --- a/packages/odyssey-react-mui/src/PaginatedDataGrid.tsx +++ b/packages/odyssey-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["columns"]; @@ -55,7 +55,7 @@ export type PaginatedDataGridProps< >; }; -const PaginatedDataGrid = ({ +const PaginatedDataTable = ({ columns, data, fetchMoreData, @@ -70,7 +70,7 @@ const PaginatedDataGrid = ({ rowsPerPage = 10, state, ToolbarButtons, -}: PaginatedDataGridProps) => { +}: PaginatedDataTableProps) => { const { t } = useTranslation(); const rowVirtualizerInstanceRef = @@ -105,7 +105,7 @@ const PaginatedDataGrid = ({ ({ ({ () => hasError ? { - children: t("datagrid.error"), + children: t("dataTable.error"), severity: "error", } : {}, @@ -252,11 +252,11 @@ const PaginatedDataGrid = ({ ); }; -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 index 04c33d2c0a..b816ee9f85 100644 --- 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/packages/odyssey-react-mui/src/StaticDataGrid.tsx b/packages/odyssey-react-mui/src/StaticDataTable.tsx similarity index 76% rename from packages/odyssey-react-mui/src/StaticDataGrid.tsx rename to packages/odyssey-react-mui/src/StaticDataTable.tsx index 01bf77a314..854dfaf466 100644 --- a/packages/odyssey-react-mui/src/StaticDataGrid.tsx +++ b/packages/odyssey-react-mui/src/StaticDataTable.tsx @@ -30,20 +30,21 @@ import type { MaterialReactTableProps, } from "./materialReactTableTypes"; -export type StaticDataGridProps = { - columns: MaterialReactTableProps["columns"]; - data: MaterialReactTableProps["data"]; - getRowId?: MaterialReactTableProps["getRowId"]; - hasError?: boolean; - initialState?: MaterialReactTableProps["initialState"]; - onGlobalFilterChange?: MaterialReactTableProps["onGlobalFilterChange"]; - state?: MaterialReactTableProps["state"]; - ToolbarButtons?: FunctionComponent< - { table: MRT_TableInstance } & unknown - >; -}; +export type StaticDataTableProps = + { + columns: MaterialReactTableProps["columns"]; + data: MaterialReactTableProps["data"]; + getRowId?: MaterialReactTableProps["getRowId"]; + hasError?: boolean; + initialState?: MaterialReactTableProps["initialState"]; + onGlobalFilterChange?: MaterialReactTableProps["onGlobalFilterChange"]; + state?: MaterialReactTableProps["state"]; + ToolbarButtons?: FunctionComponent< + { table: MRT_TableInstance } & unknown + >; + }; -const StaticDataGrid = ({ +const StaticDataTable = ({ columns, data, getRowId, @@ -52,7 +53,7 @@ const StaticDataGrid = ({ onGlobalFilterChange, state, ToolbarButtons, -}: StaticDataGridProps) => { +}: StaticDataTableProps) => { const { t } = useTranslation(); const rowVirtualizerInstanceRef = @@ -102,7 +103,7 @@ const StaticDataGrid = ({ muiToolbarAlertBannerProps={ hasError ? { - children: t("datagrid.error"), + children: t("dataTable.error"), color: "error", } : undefined @@ -117,6 +118,6 @@ const StaticDataGrid = ({ ); }; -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 index 8946a119f3..58f1856b03 100644 --- 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/packages/odyssey-storybook/src/components/odyssey-mui/DataGrid/PaginatedDataGrid.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/DataTable/PaginatedDataTable.stories.tsx similarity index 95% rename from packages/odyssey-storybook/src/components/odyssey-mui/DataGrid/PaginatedDataGrid.stories.tsx rename to packages/odyssey-storybook/src/components/odyssey-mui/DataTable/PaginatedDataTable.stories.tsx index 08110cd39e..227a0963a3 100644 --- a/packages/odyssey-storybook/src/components/odyssey-mui/DataGrid/PaginatedDataGrid.stories.tsx +++ b/packages/odyssey-storybook/src/components/odyssey-mui/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[] = [ +const columns: DataTableColumn[] = [ { accessorKey: "name.firstName", header: "First Name", @@ -508,7 +508,7 @@ const data: Person[] = [ }, ]; -export const BasicUsage: StoryObj> = { +export const BasicUsage: StoryObj> = { args: { columns, data, @@ -516,7 +516,7 @@ export const BasicUsage: StoryObj> = { }, }; -export const Pagination: StoryObj> = { +export const Pagination: StoryObj> = { args: { columns, data, @@ -533,12 +533,12 @@ export const Pagination: StoryObj> = { }, [args.data]); return ( - + ); }, }; -export const Selection: StoryObj> = { +export const Selection: StoryObj> = { args: { columns, data, @@ -547,7 +547,7 @@ export const Selection: StoryObj> = { }, }; -export const CustomToolbar: StoryObj> = { +export const CustomToolbar: StoryObj> = { args: { columns, data, @@ -561,7 +561,7 @@ export const CustomToolbar: StoryObj> = { }, }; -// const reportColumns: DataGridColumn[] = [ +// const reportColumns: DataTableColumn[] = [ // { // accessorKey: "name", // Cell: ({ cell }) => {cell.getValue()}, @@ -669,7 +669,7 @@ export const CustomToolbar: StoryObj> = { - Infinite scroll. */ // eslint-disable-next-line @typescript-eslint/no-explicit-any -// export const Reports: StoryObj> = { +// export const Reports: StoryObj> = { // args: { // columns: reportColumns, // data: reportData, @@ -698,5 +698,5 @@ export const CustomToolbar: StoryObj> = { - 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/packages/odyssey-storybook/src/components/odyssey-mui/DataGrid/StaticDataGrid.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/DataTable/StaticDataTable.stories.tsx similarity index 96% rename from packages/odyssey-storybook/src/components/odyssey-mui/DataGrid/StaticDataGrid.stories.tsx rename to packages/odyssey-storybook/src/components/odyssey-mui/DataTable/StaticDataTable.stories.tsx index d34b6e3aa9..35fa64fbf9 100644 --- a/packages/odyssey-storybook/src/components/odyssey-mui/DataGrid/StaticDataGrid.stories.tsx +++ b/packages/odyssey-storybook/src/components/odyssey-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[] = [ +const columns: DataTableColumn[] = [ { accessorKey: "name.firstName", header: "First Name", @@ -504,7 +504,7 @@ const data: Person[] = [ }, ]; -export const BasicUsage: StoryObj> = { +export const BasicUsage: StoryObj> = { args: { columns, data, @@ -512,7 +512,7 @@ export const BasicUsage: StoryObj> = { }, }; -export const CustomToolbar: StoryObj> = { +export const CustomToolbar: StoryObj> = { args: { columns, data,