From 4aef92cc8e585c2ec715b7fe5dfc086b69dc9614 Mon Sep 17 00:00:00 2001 From: benlister-okta Date: Tue, 23 Jul 2024 11:29:15 -0700 Subject: [PATCH 01/22] fix: update roadmap json in storybook --- .../src/guidelines/Roadmap/roadmap.json | 101 +++++++++++------- 1 file changed, 64 insertions(+), 37 deletions(-) diff --git a/packages/odyssey-storybook/src/guidelines/Roadmap/roadmap.json b/packages/odyssey-storybook/src/guidelines/Roadmap/roadmap.json index 60bc6c0be7..1dce3e2cf4 100644 --- a/packages/odyssey-storybook/src/guidelines/Roadmap/roadmap.json +++ b/packages/odyssey-storybook/src/guidelines/Roadmap/roadmap.json @@ -5,7 +5,7 @@ "status": "Released", "define": "Complete", "design": "Complete", - "develop": "In progress", + "develop": "Complete", "deliverableTiming": "Q2 FY25" }, { @@ -65,11 +65,11 @@ { "name": "Card", "type": "Component", - "status": "In Labs", - "define": "In Labs", - "design": "In Labs", - "develop": "In Labs", - "deliverableTiming": "TBD" + "status": "In progress", + "define": "Complete", + "design": "Complete", + "develop": "Complete", + "deliverableTiming": "Q2 FY25" }, { "name": "Checkbox and checkbox group", @@ -96,34 +96,34 @@ "define": "Not started", "design": "Not started", "develop": "Not started", - "deliverableTiming": "Q2 FY25" + "deliverableTiming": "Q3 FY25" }, { - "name": "Data stack (data list, resource list?)", + "name": "Date picker", "type": "Component", - "status": "In progress", - "define": "In progress", - "design": "Not started", - "develop": "Not started", + "status": "In Labs", + "define": "Complete", + "design": "Complete", + "develop": "In progress", "deliverableTiming": "Q2 FY25" }, { - "name": "Data table", + "name": "Data View: Data stack \n(data list, resource list?)", "type": "Component", - "status": "Released", + "status": "In Labs", "define": "Complete", "design": "Complete", - "develop": "Complete", - "deliverableTiming": "Q1 FY25" + "develop": "In progress", + "deliverableTiming": "Q2 FY25" }, { - "name": "Date picker", + "name": "Data View: Data table", "type": "Component", - "status": "In Labs", + "status": "Released", "define": "Complete", - "design": "In progress", - "develop": "In progress", - "deliverableTiming": "Q2 FY25" + "design": "Complete", + "develop": "Complete", + "deliverableTiming": "Q1 FY25" }, { "name": "Dialog", @@ -146,16 +146,16 @@ { "name": "Duration picker\n(or fieldset)", "type": "Component", - "status": "Not started", - "define": "Not started", - "design": "Not started", + "status": "In progress", + "define": "In progress", + "design": "In progress", "develop": "Not started", "deliverableTiming": "Q2 FY25" }, { "name": "Empty states v1 (no illustration)", "type": "Component", - "status": "In progress", + "status": "Released", "define": "Complete", "design": "Complete", "develop": "Complete", @@ -164,8 +164,8 @@ { "name": "Empty states v2 (illustration)", "type": "Component", - "status": "Not started", - "define": "Not started", + "status": "In progress", + "define": "In progress", "design": "Not started", "develop": "Not started", "deliverableTiming": "Q3 FY25" @@ -202,10 +202,28 @@ "type": "Component", "status": "In progress", "define": "In progress", - "design": "-", + "design": "In progress", "develop": "-", "deliverableTiming": "Q2 FY25" }, + { + "name": "Group picker", + "type": "Component", + "status": "In Labs", + "define": "Complete", + "design": "Complete", + "develop": "In progress", + "deliverableTiming": "Q2 FY25" + }, + { + "name": "Line text field", + "type": "Component", + "status": "Not started", + "define": "Not started", + "design": "Not started", + "develop": "Not started", + "deliverableTiming": "-" + }, { "name": "Link", "type": "Component", @@ -236,10 +254,10 @@ { "name": "Multi-select dropdown", "type": "Component", - "status": "-", - "define": "-", - "design": "-", - "develop": "-", + "status": "Not started", + "define": "Not started", + "design": "Not started", + "develop": "Not started", "deliverableTiming": "TBD" }, { @@ -254,8 +272,8 @@ { "name": "Policy Recommender\n(AI Pattern)", "type": "Pattern", - "status": "Not started", - "define": "Not started", + "status": "In progress", + "define": "In progress", "design": "Not started", "develop": "Not started", "deliverableTiming": "Q3 FY25" @@ -278,6 +296,15 @@ "develop": "Complete", "deliverableTiming": "FY24" }, + { + "name": "Search Input", + "type": "Component", + "status": "In progress", + "define": "Complete", + "design": "Complete", + "develop": "Complete", + "deliverableTiming": "Q2 FY25" + }, { "name": "Search field", "type": "Pattern", @@ -318,10 +345,10 @@ "name": "Switch", "type": "Component", "status": "In Labs", - "define": "In Labs", + "define": "Complete", "design": "In Labs", "develop": "In Labs", - "deliverableTiming": "Q1 FY25" + "deliverableTiming": "Q2 FY25" }, { "name": "Tabs", @@ -351,7 +378,7 @@ "deliverableTiming": "FY24" }, { - "name": "Time Picker\n(or field set)", + "name": "Date Time Picker (name tbd)\n(or field set)", "type": "Component", "status": "Not started", "define": "Not started", From 157492292eed761689e8447277ba79b80684d0be Mon Sep 17 00:00:00 2001 From: benlister-okta Date: Tue, 23 Jul 2024 13:41:50 -0700 Subject: [PATCH 02/22] fix: testing reducing complexity of table --- .../src/guidelines/Roadmap/RoadmapTable.tsx | 73 ++++++------------- 1 file changed, 24 insertions(+), 49 deletions(-) diff --git a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx index 12b4572475..1de6bfaa30 100644 --- a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx +++ b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx @@ -127,30 +127,30 @@ const processData = ({ export const InnerRoadmapTable = () => { // Constants for filter options - const typeOptions = [ - { label: "Component", value: "Component" }, - { label: "Pattern", value: "Pattern" }, - ]; - - const statusOptions = [ - { label: "In Progress", value: "In progress" }, - { label: "In Labs", value: "In labs" }, - { label: "Released", value: "Released" }, - { label: "Not Started", value: "Not started" }, - ]; - - const expectedOptions = [ - { label: "FY24", value: "FY24" }, - { label: "TBD", value: "TBD" }, - { label: "Q1 FY25", value: "Q1 FY25" }, - { label: "Q2 FY25", value: "Q2 FY25" }, - { label: "Q3 FY25", value: "Q3 FY25" }, - { label: "Q4 FY25", value: "Q4 FY25" }, - { label: "Q1 FY26", value: "Q1 FY26" }, - { label: "Q2 FY26", value: "Q2 FY26" }, - { label: "Q3 FY26", value: "Q3 FY26" }, - { label: "Q4 FY26", value: "Q4 FY26" }, - ]; + // const typeOptions = [ + // { label: "Component", value: "Component" }, + // { label: "Pattern", value: "Pattern" }, + // ]; + + // const statusOptions = [ + // { label: "In Progress", value: "In progress" }, + // { label: "In Labs", value: "In labs" }, + // { label: "Released", value: "Released" }, + // { label: "Not Started", value: "Not started" }, + // ]; + + // const expectedOptions = [ + // { label: "FY24", value: "FY24" }, + // { label: "TBD", value: "TBD" }, + // { label: "Q1 FY25", value: "Q1 FY25" }, + // { label: "Q2 FY25", value: "Q2 FY25" }, + // { label: "Q3 FY25", value: "Q3 FY25" }, + // { label: "Q4 FY25", value: "Q4 FY25" }, + // { label: "Q1 FY26", value: "Q1 FY26" }, + // { label: "Q2 FY26", value: "Q2 FY26" }, + // { label: "Q3 FY26", value: "Q3 FY26" }, + // { label: "Q4 FY26", value: "Q4 FY26" }, + // ]; const fetchData = ({ page, @@ -184,34 +184,9 @@ export const InnerRoadmapTable = () => { hasChangeableDensity={false} hasColumnResizing={false} hasColumnVisibility={false} - hasFilters - filters={[ - { - id: "type", - label: "Type", - variant: "select", - options: typeOptions, - }, - { - id: "status", - label: "Status", - variant: "select", - options: statusOptions, - }, - { - id: "deliverableTiming", - label: "Deliverable timing", - variant: "autocomplete", - options: expectedOptions, - }, - ]} - resultsPerPage={100} hasPagination={false} hasRowSelection={false} hasRowReordering={false} - searchDelayTime={0} - hasSearch - hasSorting /> ); }; From 44045f5e03ebbcc5e94e68d22a451342f89c1510 Mon Sep 17 00:00:00 2001 From: benlister-okta Date: Tue, 23 Jul 2024 13:48:15 -0700 Subject: [PATCH 03/22] fix: debug table --- .../src/guidelines/Roadmap/RoadmapTable.tsx | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx index 1de6bfaa30..74c38c3c93 100644 --- a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx +++ b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx @@ -175,20 +175,7 @@ export const InnerRoadmapTable = () => { }); }; - return ( - name} - getData={fetchData} - hasChangeableDensity={false} - hasColumnResizing={false} - hasColumnVisibility={false} - hasPagination={false} - hasRowSelection={false} - hasRowReordering={false} - /> - ); + return ; }; const WrappedRoadmapTable = () => { From 2df76a08591802f4a138ca6d96b7a1888b70d4d1 Mon Sep 17 00:00:00 2001 From: benlister-okta Date: Tue, 23 Jul 2024 14:57:59 -0700 Subject: [PATCH 04/22] fix: debugging --- .../src/guidelines/Roadmap/RoadmapTable.tsx | 153 ++++++++++++------ 1 file changed, 105 insertions(+), 48 deletions(-) diff --git a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx index 74c38c3c93..0dca6ec25a 100644 --- a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx +++ b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx @@ -10,6 +10,8 @@ * See the License for the specific language governing permissions and limitations under the License. */ +/* eslint-disable import/no-extraneous-dependencies */ +import React, { useMemo, useCallback } from "react"; import { DataFilter } from "@okta/odyssey-react-mui/labs"; import { DataTable, DataTableSortingState } from "@okta/odyssey-react-mui"; import { columns, data, OdysseyComponent } from "./roadmapData"; @@ -127,55 +129,110 @@ const processData = ({ export const InnerRoadmapTable = () => { // Constants for filter options - // const typeOptions = [ - // { label: "Component", value: "Component" }, - // { label: "Pattern", value: "Pattern" }, - // ]; - - // const statusOptions = [ - // { label: "In Progress", value: "In progress" }, - // { label: "In Labs", value: "In labs" }, - // { label: "Released", value: "Released" }, - // { label: "Not Started", value: "Not started" }, - // ]; - - // const expectedOptions = [ - // { label: "FY24", value: "FY24" }, - // { label: "TBD", value: "TBD" }, - // { label: "Q1 FY25", value: "Q1 FY25" }, - // { label: "Q2 FY25", value: "Q2 FY25" }, - // { label: "Q3 FY25", value: "Q3 FY25" }, - // { label: "Q4 FY25", value: "Q4 FY25" }, - // { label: "Q1 FY26", value: "Q1 FY26" }, - // { label: "Q2 FY26", value: "Q2 FY26" }, - // { label: "Q3 FY26", value: "Q3 FY26" }, - // { label: "Q4 FY26", value: "Q4 FY26" }, - // ]; - - const fetchData = ({ - page, - resultsPerPage, - search, - filters, - sort, - }: { - page?: number; - resultsPerPage?: number; - search?: string; - filters?: DataFilter[]; - sort?: DataTableSortingState; - }) => { - return processData({ - initialData: data, - page: page, - resultsPerPage: resultsPerPage, - search: search, - filters: filters, - sort: sort, - }); - }; + const typeOptions = useMemo( + () => [ + { label: "Component", value: "Component" }, + { label: "Pattern", value: "Pattern" }, + ], + [], + ); + + const statusOptions = useMemo( + () => [ + { label: "In Progress", value: "In progress" }, + { label: "In Labs", value: "In labs" }, + { label: "Released", value: "Released" }, + { label: "Not Started", value: "Not started" }, + ], + [], + ); + + const expectedOptions = useMemo( + () => [ + { label: "FY24", value: "FY24" }, + { label: "TBD", value: "TBD" }, + { label: "Q1 FY25", value: "Q1 FY25" }, + { label: "Q2 FY25", value: "Q2 FY25" }, + { label: "Q3 FY25", value: "Q3 FY25" }, + { label: "Q4 FY25", value: "Q4 FY25" }, + { label: "Q1 FY26", value: "Q1 FY26" }, + { label: "Q2 FY26", value: "Q2 FY26" }, + { label: "Q3 FY26", value: "Q3 FY26" }, + { label: "Q4 FY26", value: "Q4 FY26" }, + ], + [], + ); - return ; + // Memoize the fetchData function + const fetchData = useCallback( + ({ + page, + resultsPerPage, + search, + filters, + sort, + }: { + page?: number; + resultsPerPage?: number; + search?: string; + filters?: DataFilter[]; + sort?: DataTableSortingState; + }) => { + return processData({ + initialData: data, + page, + resultsPerPage, + search, + filters, + sort, + }); + }, + [], + ); + const tableFilters = useMemo( + () => [ + { + id: "type", + label: "Type", + variant: "select", + options: typeOptions, + }, + { + id: "status", + label: "Status", + variant: "select", + options: statusOptions, + }, + { + id: "deliverableTiming", + label: "Deliverable timing", + variant: "autocomplete", + options: expectedOptions, + }, + ], + [typeOptions, statusOptions, expectedOptions], + ); + + return ( + name} + getData={fetchData} + hasChangeableDensity={false} + hasColumnResizing={false} + hasColumnVisibility={false} + hasFilters + filters={tableFilters} + resultsPerPage={100} + hasPagination={false} + hasRowSelection={false} + hasRowReordering={false} + searchDelayTime={0} + hasSearch + hasSorting + /> + ); }; const WrappedRoadmapTable = () => { From 09f435fa78ae2733e507916ed6c7d7469ef1ebc8 Mon Sep 17 00:00:00 2001 From: benlister-okta Date: Tue, 23 Jul 2024 16:28:31 -0700 Subject: [PATCH 05/22] fix: update types --- .../src/guidelines/Roadmap/RoadmapTable.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx index 0dca6ec25a..c45a94f7bf 100644 --- a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx +++ b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx @@ -11,7 +11,7 @@ */ /* eslint-disable import/no-extraneous-dependencies */ -import React, { useMemo, useCallback } from "react"; +import { useMemo, useCallback } from "react"; import { DataFilter } from "@okta/odyssey-react-mui/labs"; import { DataTable, DataTableSortingState } from "@okta/odyssey-react-mui"; import { columns, data, OdysseyComponent } from "./roadmapData"; @@ -127,8 +127,7 @@ const processData = ({ }; export const InnerRoadmapTable = () => { - // Constants for filter options - + // Memoize filter options const typeOptions = useMemo( () => [ { label: "Component", value: "Component" }, @@ -187,9 +186,13 @@ export const InnerRoadmapTable = () => { sort, }); }, - [], + [ + /* Add data as a dependency if it can change */ + ], ); - const tableFilters = useMemo( + + // Memoize the filters array + const tableFilters = useMemo( () => [ { id: "type", From 1ad7a0b12782fe93d2ca2e10dee085870bd27b1d Mon Sep 17 00:00:00 2001 From: benlister-okta Date: Tue, 23 Jul 2024 18:46:49 -0700 Subject: [PATCH 06/22] fix: debug --- .../src/guidelines/Roadmap/RoadmapTable.tsx | 10 +- .../src/guidelines/Roadmap/roadmapData.tsx | 182 ++++++++++-------- 2 files changed, 108 insertions(+), 84 deletions(-) diff --git a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx index c45a94f7bf..21d5793cb8 100644 --- a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx +++ b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx @@ -14,7 +14,7 @@ import { useMemo, useCallback } from "react"; import { DataFilter } from "@okta/odyssey-react-mui/labs"; import { DataTable, DataTableSortingState } from "@okta/odyssey-react-mui"; -import { columns, data, OdysseyComponent } from "./roadmapData"; +import { useColumns, data, OdysseyComponent } from "./roadmapData"; import { Callout, CssBaseline, @@ -127,6 +127,8 @@ const processData = ({ }; export const InnerRoadmapTable = () => { + const columns = useColumns(); // Use the hook to get columns + // Memoize filter options const typeOptions = useMemo( () => [ @@ -186,9 +188,7 @@ export const InnerRoadmapTable = () => { sort, }); }, - [ - /* Add data as a dependency if it can change */ - ], + [data], // Add data as a dependency if it can change ); // Memoize the filters array @@ -218,7 +218,7 @@ export const InnerRoadmapTable = () => { return ( name} getData={fetchData} diff --git a/packages/odyssey-storybook/src/guidelines/Roadmap/roadmapData.tsx b/packages/odyssey-storybook/src/guidelines/Roadmap/roadmapData.tsx index ec544499c0..fca188cedc 100644 --- a/packages/odyssey-storybook/src/guidelines/Roadmap/roadmapData.tsx +++ b/packages/odyssey-storybook/src/guidelines/Roadmap/roadmapData.tsx @@ -10,6 +10,8 @@ * See the License for the specific language governing permissions and limitations under the License. */ +/* eslint-disable import/no-extraneous-dependencies */ +import { useMemo } from "react"; import { DataTableRowData, Status, @@ -19,7 +21,6 @@ import { import { DataTableColumn } from "@okta/odyssey-react-mui"; import rawData from "./roadmap.json"; -export const data: OdysseyComponent[] = rawData as OdysseyComponent[]; export type OdysseyComponent = { name: string; @@ -31,86 +32,109 @@ export type OdysseyComponent = { deliverableTiming: string; }; -export const columns: DataTableColumn[] = [ - { - accessorKey: "name", - header: "Name", - enableHiding: false, - size: 325, - }, - { - accessorKey: "type", - header: "Type", - enableHiding: true, - size: 200, - }, - { - accessorKey: "status", - header: "Status", - size: 200, - Cell: ({ cell, row }) => { - const statusValue = cell.getValue(); - const defineValue = row.original.define; - const designValue = row.original.design; - const developValue = row.original.develop; - const severityMap = new Map< - string, - (typeof statusSeverityValues)[number] - >([ - ["Released", "success"], - ["In Labs", "warning"], - ["In progress", "default"], - ["Not started", "error"], - ]); - const severity = severityMap.get(statusValue) || "default"; +export const data: OdysseyComponent[] = rawData as OdysseyComponent[]; + +const severityMap = new Map([ + ["Released", "success"], + ["In Labs", "warning"], + ["In progress", "default"], + ["Not started", "error"], +]); + +const getTooltipText = ( + defineValue: string, + designValue: string, + developValue: string, +): string => { + let text = ""; + if (defineValue === "In progress") { + text += "Project definition in progress"; + } + if (["Complete", "In progress"].includes(designValue)) { + text += (text ? " " : "") + "Design: " + designValue; + } + if (["Complete", "In progress"].includes(developValue)) { + text += (text ? " " : "") + "Develop: " + developValue; + } + return text.trim(); +}; + +type CellProps = { + cell: { getValue: () => string }; // Updated to string + row: { original: OdysseyComponent }; +}; - // First priority: Check if the define stage is "In Progress" - if (defineValue === "In Progress") { - // Return a Tooltip specifically for this condition and do nothing else - return ( - - - - ); - } +const StatusCell: React.FC = ({ cell, row }) => { + const statusValue = cell.getValue(); + const { + define: defineValue, + design: designValue, + develop: developValue, + } = row.original; - // If defineValue is not "In Progress", then proceed with this logic: - let tooltipText = ""; - if (defineValue === "In progress") { - tooltipText += "Project definition in progress"; - } - if (["Complete", "In progress"].includes(designValue)) { - tooltipText += "Design: " + designValue + " "; - } - if (["Complete", "In progress"].includes(developValue)) { - tooltipText += "Develop: " + developValue; - } + const severity = useMemo( + () => severityMap.get(statusValue) || "default", + [statusValue], + ); + const tooltipText = useMemo( + () => getTooltipText(defineValue, designValue, developValue), + [defineValue, designValue, developValue], + ); - // Only show the tooltip if there's relevant information to display - if (tooltipText && statusValue !== "Released") { - return ( - - - - ); - } + if (defineValue === "In Progress") { + return ( + + + + ); + } - // If there is no relevant tooltip text, just show the status without any tooltip - return ; - }, - }, + if (tooltipText && statusValue !== "Released") { + return ( + + + + ); + } - { - accessorKey: "deliverableTiming", - header: "Deliverable timing", - enableHiding: false, - size: 200, - }, -]; + return ; +}; + +export const useColumns = (): DataTableColumn[] => { + return useMemo( + () => + [ + { + accessorKey: "name", + header: "Name", + enableHiding: false, + size: 325, + }, + { + accessorKey: "type", + header: "Type", + enableHiding: true, + size: 200, + }, + { + accessorKey: "status", + header: "Status", + size: 200, + Cell: ({ cell, row }: CellProps) => ( + + ), + }, + { + accessorKey: "deliverableTiming", + header: "Deliverable timing", + enableHiding: false, + size: 200, + }, + ] as DataTableColumn[], + [], + ); +}; From 0abb09d9a318b0dbaa4daecdc5f8f404d5322ff7 Mon Sep 17 00:00:00 2001 From: benlister-okta Date: Tue, 23 Jul 2024 20:57:11 -0700 Subject: [PATCH 07/22] fix: testing --- .../src/guidelines/Roadmap/roadmap.json | 387 ------------------ .../src/guidelines/Roadmap/roadmapData.tsx | 61 ++- 2 files changed, 60 insertions(+), 388 deletions(-) diff --git a/packages/odyssey-storybook/src/guidelines/Roadmap/roadmap.json b/packages/odyssey-storybook/src/guidelines/Roadmap/roadmap.json index 1dce3e2cf4..4848b37871 100644 --- a/packages/odyssey-storybook/src/guidelines/Roadmap/roadmap.json +++ b/packages/odyssey-storybook/src/guidelines/Roadmap/roadmap.json @@ -25,392 +25,5 @@ "design": "Complete", "develop": "Complete", "deliverableTiming": "Q2 FY25" - }, - { - "name": "Banner", - "type": "Component", - "status": "Released", - "define": "Complete", - "design": "Complete", - "develop": "Complete", - "deliverableTiming": "Q2 FY25" - }, - { - "name": "Breadcrumbs", - "type": "Component", - "status": "Released", - "define": "Complete", - "design": "Complete", - "develop": "Complete", - "deliverableTiming": "FY24" - }, - { - "name": "Button", - "type": "Component", - "status": "Released", - "define": "Complete", - "design": "Complete", - "develop": "Complete", - "deliverableTiming": "FY24" - }, - { - "name": "Callout", - "type": "Component", - "status": "Released", - "define": "Complete", - "design": "Complete", - "develop": "Complete", - "deliverableTiming": "Q1 FY25" - }, - { - "name": "Card", - "type": "Component", - "status": "In progress", - "define": "Complete", - "design": "Complete", - "develop": "Complete", - "deliverableTiming": "Q2 FY25" - }, - { - "name": "Checkbox and checkbox group", - "type": "Component", - "status": "Released", - "define": "Complete", - "design": "Complete", - "develop": "Complete", - "deliverableTiming": "FY24" - }, - { - "name": "Circular progress", - "type": "Component", - "status": "Released", - "define": "Complete", - "design": "Complete", - "develop": "Complete", - "deliverableTiming": "FY24" - }, - { - "name": "Dashboard", - "type": "Component", - "status": "Not started", - "define": "Not started", - "design": "Not started", - "develop": "Not started", - "deliverableTiming": "Q3 FY25" - }, - { - "name": "Date picker", - "type": "Component", - "status": "In Labs", - "define": "Complete", - "design": "Complete", - "develop": "In progress", - "deliverableTiming": "Q2 FY25" - }, - { - "name": "Data View: Data stack \n(data list, resource list?)", - "type": "Component", - "status": "In Labs", - "define": "Complete", - "design": "Complete", - "develop": "In progress", - "deliverableTiming": "Q2 FY25" - }, - { - "name": "Data View: Data table", - "type": "Component", - "status": "Released", - "define": "Complete", - "design": "Complete", - "develop": "Complete", - "deliverableTiming": "Q1 FY25" - }, - { - "name": "Dialog", - "type": "Component", - "status": "Released", - "define": "Complete", - "design": "Complete", - "develop": "Complete", - "deliverableTiming": "FY24" - }, - { - "name": "Drawer", - "type": "Component", - "status": "Released", - "define": "Complete", - "design": "Complete", - "develop": "Complete", - "deliverableTiming": "Q1 FY25" - }, - { - "name": "Duration picker\n(or fieldset)", - "type": "Component", - "status": "In progress", - "define": "In progress", - "design": "In progress", - "develop": "Not started", - "deliverableTiming": "Q2 FY25" - }, - { - "name": "Empty states v1 (no illustration)", - "type": "Component", - "status": "Released", - "define": "Complete", - "design": "Complete", - "develop": "Complete", - "deliverableTiming": "Q2 FY25" - }, - { - "name": "Empty states v2 (illustration)", - "type": "Component", - "status": "In progress", - "define": "In progress", - "design": "Not started", - "develop": "Not started", - "deliverableTiming": "Q3 FY25" - }, - { - "name": "Fieldset", - "type": "Component", - "status": "Released", - "define": "Complete", - "design": "Complete", - "develop": "Complete", - "deliverableTiming": "FY24" - }, - { - "name": "File uploader", - "type": "Component", - "status": "In Labs", - "define": "In Labs", - "design": "In Labs", - "develop": "In Labs", - "deliverableTiming": "Q2 FY25" - }, - { - "name": "Form", - "type": "Component", - "status": "Released", - "define": "Complete", - "design": "Complete", - "develop": "Complete", - "deliverableTiming": "FY24" - }, - { - "name": "Form Layout (Advanced)", - "type": "Component", - "status": "In progress", - "define": "In progress", - "design": "In progress", - "develop": "-", - "deliverableTiming": "Q2 FY25" - }, - { - "name": "Group picker", - "type": "Component", - "status": "In Labs", - "define": "Complete", - "design": "Complete", - "develop": "In progress", - "deliverableTiming": "Q2 FY25" - }, - { - "name": "Line text field", - "type": "Component", - "status": "Not started", - "define": "Not started", - "design": "Not started", - "develop": "Not started", - "deliverableTiming": "-" - }, - { - "name": "Link", - "type": "Component", - "status": "Released", - "define": "Complete", - "design": "Complete", - "develop": "Complete", - "deliverableTiming": "FY24" - }, - { - "name": "Log Investigator \n(AI Pattern)", - "type": "Pattern", - "status": "Not started", - "define": "Not started", - "design": "Not started", - "develop": "Not started", - "deliverableTiming": "Q3 FY25" - }, - { - "name": "Menu button", - "type": "Component", - "status": "Released", - "define": "Complete", - "design": "Complete", - "develop": "Complete", - "deliverableTiming": "FY24" - }, - { - "name": "Multi-select dropdown", - "type": "Component", - "status": "Not started", - "define": "Not started", - "design": "Not started", - "develop": "Not started", - "deliverableTiming": "TBD" - }, - { - "name": "Navigation", - "type": "Pattern", - "status": "In progress", - "define": "Complete", - "design": "Complete", - "develop": "In progress", - "deliverableTiming": "Q2 FY25" - }, - { - "name": "Policy Recommender\n(AI Pattern)", - "type": "Pattern", - "status": "In progress", - "define": "In progress", - "design": "Not started", - "develop": "Not started", - "deliverableTiming": "Q3 FY25" - }, - { - "name": "Progress Bar", - "type": "Component", - "status": "Not started", - "define": "Not started", - "design": "Not started", - "develop": "Not started", - "deliverableTiming": "Q3 FY25" - }, - { - "name": "Radio group", - "type": "Component", - "status": "Released", - "define": "Complete", - "design": "Complete", - "develop": "Complete", - "deliverableTiming": "FY24" - }, - { - "name": "Search Input", - "type": "Component", - "status": "In progress", - "define": "Complete", - "design": "Complete", - "develop": "Complete", - "deliverableTiming": "Q2 FY25" - }, - { - "name": "Search field", - "type": "Pattern", - "status": "Not started", - "define": "Not started", - "design": "Not started", - "develop": "Not started", - "deliverableTiming": "TBD" - }, - { - "name": "Select", - "type": "Component", - "status": "Released", - "define": "Complete", - "design": "Complete", - "develop": "Complete", - "deliverableTiming": "FY24" - }, - { - "name": "Show all", - "type": "Component", - "status": "Not started", - "define": "Not started", - "design": "Not started", - "develop": "Not started", - "deliverableTiming": "Q3 FY25" - }, - { - "name": "Status", - "type": "Component", - "status": "Released", - "define": "Complete", - "design": "Complete", - "develop": "Complete", - "deliverableTiming": "FY24" - }, - { - "name": "Switch", - "type": "Component", - "status": "In Labs", - "define": "Complete", - "design": "In Labs", - "develop": "In Labs", - "deliverableTiming": "Q2 FY25" - }, - { - "name": "Tabs", - "type": "Component", - "status": "Released", - "define": "Complete", - "design": "Complete", - "develop": "Complete", - "deliverableTiming": "FY24" - }, - { - "name": "Tag", - "type": "Component", - "status": "Released", - "define": "Complete", - "design": "Complete", - "develop": "Complete", - "deliverableTiming": "FY24" - }, - { - "name": "Text field", - "type": "Component", - "status": "Released", - "define": "Complete", - "design": "Complete", - "develop": "Complete", - "deliverableTiming": "FY24" - }, - { - "name": "Date Time Picker (name tbd)\n(or field set)", - "type": "Component", - "status": "Not started", - "define": "Not started", - "design": "Not started", - "develop": "Not started", - "deliverableTiming": "Q2 FY25" - }, - { - "name": "Toast", - "type": "Component", - "status": "Released", - "define": "Complete", - "design": "Complete", - "develop": "Complete", - "deliverableTiming": "FY24" - }, - { - "name": "Tooltip", - "type": "Component", - "status": "Released", - "define": "Complete", - "design": "Complete", - "develop": "Complete", - "deliverableTiming": "FY24" - }, - { - "name": "Wizard", - "type": "Pattern", - "status": "Not started", - "define": "Not started", - "design": "Not started", - "develop": "Not started", - "deliverableTiming": "Q3 FY25" } ] diff --git a/packages/odyssey-storybook/src/guidelines/Roadmap/roadmapData.tsx b/packages/odyssey-storybook/src/guidelines/Roadmap/roadmapData.tsx index fca188cedc..c8b094b5a5 100644 --- a/packages/odyssey-storybook/src/guidelines/Roadmap/roadmapData.tsx +++ b/packages/odyssey-storybook/src/guidelines/Roadmap/roadmapData.tsx @@ -20,7 +20,66 @@ import { } from "@okta/odyssey-react-mui"; import { DataTableColumn } from "@okta/odyssey-react-mui"; -import rawData from "./roadmap.json"; +//import rawData from "./roadmap.json"; +const rawData = [ + { + name: "Accordion", + type: "Component", + status: "Released", + define: "Complete", + design: "Complete", + develop: "Complete", + deliverableTiming: "Q2 FY25", + }, + { + name: "Autocomplete", + type: "Component", + status: "Released", + define: "Complete", + design: "Complete", + develop: "Complete", + deliverableTiming: "Q1 FY25", + }, + { + name: "Badge", + type: "Component", + status: "Released", + define: "Complete", + design: "Complete", + develop: "Complete", + deliverableTiming: "Q2 FY25", + }, +]; +//Use this, not roadmap.json +// [ +// { +// "name": "Accordion", +// "type": "Component", +// "status": "Released", +// "define": "Complete", +// "design": "Complete", +// "develop": "Complete", +// "deliverableTiming": "Q2 FY25" +// }, +// { +// "name": "Autocomplete", +// "type": "Component", +// "status": "Released", +// "define": "Complete", +// "design": "Complete", +// "develop": "Complete", +// "deliverableTiming": "Q1 FY25" +// }, +// { +// "name": "Badge", +// "type": "Component", +// "status": "Released", +// "define": "Complete", +// "design": "Complete", +// "develop": "Complete", +// "deliverableTiming": "Q2 FY25" +// } +// ] export type OdysseyComponent = { name: string; From 3bd19632845ef1247d26d14cdc980e7490869786 Mon Sep 17 00:00:00 2001 From: benlister-okta Date: Tue, 23 Jul 2024 21:53:49 -0700 Subject: [PATCH 08/22] fix: debug --- .../src/guidelines/Roadmap/RoadmapTable.tsx | 154 ++++--- .../src/guidelines/Roadmap/roadmap.json | 387 ++++++++++++++++++ .../src/guidelines/Roadmap/roadmapData.tsx | 61 +-- 3 files changed, 482 insertions(+), 120 deletions(-) diff --git a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx index 21d5793cb8..9de641a481 100644 --- a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx +++ b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx @@ -11,10 +11,9 @@ */ /* eslint-disable import/no-extraneous-dependencies */ -import { useMemo, useCallback } from "react"; +import React, { useMemo, useCallback } from "react"; import { DataFilter } from "@okta/odyssey-react-mui/labs"; import { DataTable, DataTableSortingState } from "@okta/odyssey-react-mui"; -import { useColumns, data, OdysseyComponent } from "./roadmapData"; import { Callout, CssBaseline, @@ -24,6 +23,44 @@ import { } from "@okta/odyssey-react-mui"; import { ThemeProvider as StorybookThemeProvider } from "@storybook/theming"; import * as odysseyTokens from "@okta/odyssey-design-tokens"; +import { Theme } from "@mui/material/styles"; + +// Assuming this is how your data and columns are imported +import { + useColumns, + data as initialData, + OdysseyComponent, +} from "./roadmapData"; + +// Memoize the initial data +const useData = () => useMemo(() => initialData, []); + +const parseCustomDate = (dateStr: string): Date => { + if (dateStr.length <= 0) { + return new Date(2999, 0); + } + + const months = [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", + ]; + const [monthStr, yearStr] = dateStr.split(" "); + + const month = months.indexOf(monthStr); + const year = parseInt(yearStr.replace("'", ""), 10) + 2000; + + return new Date(year, month); +}; const processData = ({ initialData, @@ -42,7 +79,6 @@ const processData = ({ }) => { let filteredData = [...initialData]; - // Implement text-based query filtering if (search) { filteredData = filteredData.filter((row) => Object.values(row).some((value) => @@ -51,51 +87,19 @@ const processData = ({ ); } - // Implement column-specific filtering if (filters) { - filteredData = filteredData.filter((row) => { - return filters.every(({ id, value }) => { - // If filter value is null or undefined, skip this filter + filteredData = filteredData.filter((row) => + filters.every(({ id, value }) => { if (value === null || value === undefined) { return true; } - - // General filtering for other columns return row[id as keyof OdysseyComponent] ?.toString() .includes(value.toString()); - }); - }); - } - - function parseCustomDate(dateStr: string): Date { - if (dateStr.length <= 0) { - return new Date(2999, 0); - } - - const months = [ - "Jan", - "Feb", - "Mar", - "Apr", - "May", - "Jun", - "Jul", - "Aug", - "Sep", - "Oct", - "Nov", - "Dec", - ]; - const [monthStr, yearStr] = dateStr.split(" "); - - const month = months.indexOf(monthStr); - const year = parseInt(yearStr.replace("'", ""), 10) + 2000; // Adjust for century - - return new Date(year, month); + }), + ); } - // Implement sorting if (sort && sort.length > 0) { filteredData.sort((a, b) => { for (const { id, desc } of sort) { @@ -107,29 +111,26 @@ const processData = ({ id === "labsRelease" || id === "fullRelease" ) { - aValue = parseCustomDate(aValue); - bValue = parseCustomDate(bValue); + aValue = parseCustomDate(aValue as string); + bValue = parseCustomDate(bValue as string); } if (aValue < bValue) return desc ? 1 : -1; if (aValue > bValue) return desc ? -1 : 1; } - return 0; }); } - // Implement pagination + const startIdx = (page - 1) * resultsPerPage; const endIdx = startIdx + resultsPerPage; - const paginatedData = filteredData.slice(startIdx, endIdx); - - return paginatedData; + return filteredData.slice(startIdx, endIdx); }; -export const InnerRoadmapTable = () => { - const columns = useColumns(); // Use the hook to get columns +const InnerRoadmapTable: React.FC = React.memo(() => { + const columns = useColumns(); + const data = useData(); - // Memoize filter options const typeOptions = useMemo( () => [ { label: "Component", value: "Component" }, @@ -164,7 +165,8 @@ export const InnerRoadmapTable = () => { [], ); - // Memoize the fetchData function + const memoizedProcessData = useCallback(processData, []); + const fetchData = useCallback( ({ page, @@ -179,7 +181,7 @@ export const InnerRoadmapTable = () => { filters?: DataFilter[]; sort?: DataTableSortingState; }) => { - return processData({ + return memoizedProcessData({ initialData: data, page, resultsPerPage, @@ -188,10 +190,9 @@ export const InnerRoadmapTable = () => { sort, }); }, - [data], // Add data as a dependency if it can change + [data, memoizedProcessData], ); - // Memoize the filters array const tableFilters = useMemo( () => [ { @@ -218,7 +219,7 @@ export const InnerRoadmapTable = () => { return ( name} getData={fetchData} @@ -231,20 +232,53 @@ export const InnerRoadmapTable = () => { hasPagination={false} hasRowSelection={false} hasRowReordering={false} - searchDelayTime={0} + searchDelayTime={300} hasSearch hasSorting /> ); -}; +}); -const WrappedRoadmapTable = () => { - const odysseyTheme = createOdysseyMuiTheme({ odysseyTokens }); +const WrappedRoadmapTable: React.FC = () => { + const odysseyTheme = useMemo( + () => createOdysseyMuiTheme({ odysseyTokens }), + [], + ); + + // Create a Storybook-compatible theme object + const storybookTheme = useMemo(() => { + const theme: Partial = { + ...odysseyTheme, + typography: { + fonts: { + base: odysseyTheme.typography.fontFamily, + mono: odysseyTheme.typography.fontFamilyMonospace, + }, + weight: { + regular: odysseyTheme.typography.fontWeightRegular, + bold: odysseyTheme.typography.fontWeightBold, + }, + size: { + s1: 12, + s2: 14, + s3: 16, + m1: 20, + m2: 24, + m3: 28, + l1: 32, + l2: 40, + l3: 48, + code: 90, + }, + }, + }; + return theme; + }, [odysseyTheme]); return ( - + {/* @ts-expect-error type mismatch on "typography" */} - + diff --git a/packages/odyssey-storybook/src/guidelines/Roadmap/roadmap.json b/packages/odyssey-storybook/src/guidelines/Roadmap/roadmap.json index 4848b37871..1dce3e2cf4 100644 --- a/packages/odyssey-storybook/src/guidelines/Roadmap/roadmap.json +++ b/packages/odyssey-storybook/src/guidelines/Roadmap/roadmap.json @@ -25,5 +25,392 @@ "design": "Complete", "develop": "Complete", "deliverableTiming": "Q2 FY25" + }, + { + "name": "Banner", + "type": "Component", + "status": "Released", + "define": "Complete", + "design": "Complete", + "develop": "Complete", + "deliverableTiming": "Q2 FY25" + }, + { + "name": "Breadcrumbs", + "type": "Component", + "status": "Released", + "define": "Complete", + "design": "Complete", + "develop": "Complete", + "deliverableTiming": "FY24" + }, + { + "name": "Button", + "type": "Component", + "status": "Released", + "define": "Complete", + "design": "Complete", + "develop": "Complete", + "deliverableTiming": "FY24" + }, + { + "name": "Callout", + "type": "Component", + "status": "Released", + "define": "Complete", + "design": "Complete", + "develop": "Complete", + "deliverableTiming": "Q1 FY25" + }, + { + "name": "Card", + "type": "Component", + "status": "In progress", + "define": "Complete", + "design": "Complete", + "develop": "Complete", + "deliverableTiming": "Q2 FY25" + }, + { + "name": "Checkbox and checkbox group", + "type": "Component", + "status": "Released", + "define": "Complete", + "design": "Complete", + "develop": "Complete", + "deliverableTiming": "FY24" + }, + { + "name": "Circular progress", + "type": "Component", + "status": "Released", + "define": "Complete", + "design": "Complete", + "develop": "Complete", + "deliverableTiming": "FY24" + }, + { + "name": "Dashboard", + "type": "Component", + "status": "Not started", + "define": "Not started", + "design": "Not started", + "develop": "Not started", + "deliverableTiming": "Q3 FY25" + }, + { + "name": "Date picker", + "type": "Component", + "status": "In Labs", + "define": "Complete", + "design": "Complete", + "develop": "In progress", + "deliverableTiming": "Q2 FY25" + }, + { + "name": "Data View: Data stack \n(data list, resource list?)", + "type": "Component", + "status": "In Labs", + "define": "Complete", + "design": "Complete", + "develop": "In progress", + "deliverableTiming": "Q2 FY25" + }, + { + "name": "Data View: Data table", + "type": "Component", + "status": "Released", + "define": "Complete", + "design": "Complete", + "develop": "Complete", + "deliverableTiming": "Q1 FY25" + }, + { + "name": "Dialog", + "type": "Component", + "status": "Released", + "define": "Complete", + "design": "Complete", + "develop": "Complete", + "deliverableTiming": "FY24" + }, + { + "name": "Drawer", + "type": "Component", + "status": "Released", + "define": "Complete", + "design": "Complete", + "develop": "Complete", + "deliverableTiming": "Q1 FY25" + }, + { + "name": "Duration picker\n(or fieldset)", + "type": "Component", + "status": "In progress", + "define": "In progress", + "design": "In progress", + "develop": "Not started", + "deliverableTiming": "Q2 FY25" + }, + { + "name": "Empty states v1 (no illustration)", + "type": "Component", + "status": "Released", + "define": "Complete", + "design": "Complete", + "develop": "Complete", + "deliverableTiming": "Q2 FY25" + }, + { + "name": "Empty states v2 (illustration)", + "type": "Component", + "status": "In progress", + "define": "In progress", + "design": "Not started", + "develop": "Not started", + "deliverableTiming": "Q3 FY25" + }, + { + "name": "Fieldset", + "type": "Component", + "status": "Released", + "define": "Complete", + "design": "Complete", + "develop": "Complete", + "deliverableTiming": "FY24" + }, + { + "name": "File uploader", + "type": "Component", + "status": "In Labs", + "define": "In Labs", + "design": "In Labs", + "develop": "In Labs", + "deliverableTiming": "Q2 FY25" + }, + { + "name": "Form", + "type": "Component", + "status": "Released", + "define": "Complete", + "design": "Complete", + "develop": "Complete", + "deliverableTiming": "FY24" + }, + { + "name": "Form Layout (Advanced)", + "type": "Component", + "status": "In progress", + "define": "In progress", + "design": "In progress", + "develop": "-", + "deliverableTiming": "Q2 FY25" + }, + { + "name": "Group picker", + "type": "Component", + "status": "In Labs", + "define": "Complete", + "design": "Complete", + "develop": "In progress", + "deliverableTiming": "Q2 FY25" + }, + { + "name": "Line text field", + "type": "Component", + "status": "Not started", + "define": "Not started", + "design": "Not started", + "develop": "Not started", + "deliverableTiming": "-" + }, + { + "name": "Link", + "type": "Component", + "status": "Released", + "define": "Complete", + "design": "Complete", + "develop": "Complete", + "deliverableTiming": "FY24" + }, + { + "name": "Log Investigator \n(AI Pattern)", + "type": "Pattern", + "status": "Not started", + "define": "Not started", + "design": "Not started", + "develop": "Not started", + "deliverableTiming": "Q3 FY25" + }, + { + "name": "Menu button", + "type": "Component", + "status": "Released", + "define": "Complete", + "design": "Complete", + "develop": "Complete", + "deliverableTiming": "FY24" + }, + { + "name": "Multi-select dropdown", + "type": "Component", + "status": "Not started", + "define": "Not started", + "design": "Not started", + "develop": "Not started", + "deliverableTiming": "TBD" + }, + { + "name": "Navigation", + "type": "Pattern", + "status": "In progress", + "define": "Complete", + "design": "Complete", + "develop": "In progress", + "deliverableTiming": "Q2 FY25" + }, + { + "name": "Policy Recommender\n(AI Pattern)", + "type": "Pattern", + "status": "In progress", + "define": "In progress", + "design": "Not started", + "develop": "Not started", + "deliverableTiming": "Q3 FY25" + }, + { + "name": "Progress Bar", + "type": "Component", + "status": "Not started", + "define": "Not started", + "design": "Not started", + "develop": "Not started", + "deliverableTiming": "Q3 FY25" + }, + { + "name": "Radio group", + "type": "Component", + "status": "Released", + "define": "Complete", + "design": "Complete", + "develop": "Complete", + "deliverableTiming": "FY24" + }, + { + "name": "Search Input", + "type": "Component", + "status": "In progress", + "define": "Complete", + "design": "Complete", + "develop": "Complete", + "deliverableTiming": "Q2 FY25" + }, + { + "name": "Search field", + "type": "Pattern", + "status": "Not started", + "define": "Not started", + "design": "Not started", + "develop": "Not started", + "deliverableTiming": "TBD" + }, + { + "name": "Select", + "type": "Component", + "status": "Released", + "define": "Complete", + "design": "Complete", + "develop": "Complete", + "deliverableTiming": "FY24" + }, + { + "name": "Show all", + "type": "Component", + "status": "Not started", + "define": "Not started", + "design": "Not started", + "develop": "Not started", + "deliverableTiming": "Q3 FY25" + }, + { + "name": "Status", + "type": "Component", + "status": "Released", + "define": "Complete", + "design": "Complete", + "develop": "Complete", + "deliverableTiming": "FY24" + }, + { + "name": "Switch", + "type": "Component", + "status": "In Labs", + "define": "Complete", + "design": "In Labs", + "develop": "In Labs", + "deliverableTiming": "Q2 FY25" + }, + { + "name": "Tabs", + "type": "Component", + "status": "Released", + "define": "Complete", + "design": "Complete", + "develop": "Complete", + "deliverableTiming": "FY24" + }, + { + "name": "Tag", + "type": "Component", + "status": "Released", + "define": "Complete", + "design": "Complete", + "develop": "Complete", + "deliverableTiming": "FY24" + }, + { + "name": "Text field", + "type": "Component", + "status": "Released", + "define": "Complete", + "design": "Complete", + "develop": "Complete", + "deliverableTiming": "FY24" + }, + { + "name": "Date Time Picker (name tbd)\n(or field set)", + "type": "Component", + "status": "Not started", + "define": "Not started", + "design": "Not started", + "develop": "Not started", + "deliverableTiming": "Q2 FY25" + }, + { + "name": "Toast", + "type": "Component", + "status": "Released", + "define": "Complete", + "design": "Complete", + "develop": "Complete", + "deliverableTiming": "FY24" + }, + { + "name": "Tooltip", + "type": "Component", + "status": "Released", + "define": "Complete", + "design": "Complete", + "develop": "Complete", + "deliverableTiming": "FY24" + }, + { + "name": "Wizard", + "type": "Pattern", + "status": "Not started", + "define": "Not started", + "design": "Not started", + "develop": "Not started", + "deliverableTiming": "Q3 FY25" } ] diff --git a/packages/odyssey-storybook/src/guidelines/Roadmap/roadmapData.tsx b/packages/odyssey-storybook/src/guidelines/Roadmap/roadmapData.tsx index c8b094b5a5..fca188cedc 100644 --- a/packages/odyssey-storybook/src/guidelines/Roadmap/roadmapData.tsx +++ b/packages/odyssey-storybook/src/guidelines/Roadmap/roadmapData.tsx @@ -20,66 +20,7 @@ import { } from "@okta/odyssey-react-mui"; import { DataTableColumn } from "@okta/odyssey-react-mui"; -//import rawData from "./roadmap.json"; -const rawData = [ - { - name: "Accordion", - type: "Component", - status: "Released", - define: "Complete", - design: "Complete", - develop: "Complete", - deliverableTiming: "Q2 FY25", - }, - { - name: "Autocomplete", - type: "Component", - status: "Released", - define: "Complete", - design: "Complete", - develop: "Complete", - deliverableTiming: "Q1 FY25", - }, - { - name: "Badge", - type: "Component", - status: "Released", - define: "Complete", - design: "Complete", - develop: "Complete", - deliverableTiming: "Q2 FY25", - }, -]; -//Use this, not roadmap.json -// [ -// { -// "name": "Accordion", -// "type": "Component", -// "status": "Released", -// "define": "Complete", -// "design": "Complete", -// "develop": "Complete", -// "deliverableTiming": "Q2 FY25" -// }, -// { -// "name": "Autocomplete", -// "type": "Component", -// "status": "Released", -// "define": "Complete", -// "design": "Complete", -// "develop": "Complete", -// "deliverableTiming": "Q1 FY25" -// }, -// { -// "name": "Badge", -// "type": "Component", -// "status": "Released", -// "define": "Complete", -// "design": "Complete", -// "develop": "Complete", -// "deliverableTiming": "Q2 FY25" -// } -// ] +import rawData from "./roadmap.json"; export type OdysseyComponent = { name: string; From e39845b6b0373c1dca4571a8ec367c9917b0e518 Mon Sep 17 00:00:00 2001 From: benlister-okta Date: Tue, 23 Jul 2024 22:13:38 -0700 Subject: [PATCH 09/22] fix: debug --- .../src/guidelines/Roadmap/RoadmapTable.tsx | 35 ++----------------- 1 file changed, 2 insertions(+), 33 deletions(-) diff --git a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx index 9de641a481..d7f36f42c1 100644 --- a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx +++ b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx @@ -23,7 +23,6 @@ import { } from "@okta/odyssey-react-mui"; import { ThemeProvider as StorybookThemeProvider } from "@storybook/theming"; import * as odysseyTokens from "@okta/odyssey-design-tokens"; -import { Theme } from "@mui/material/styles"; // Assuming this is how your data and columns are imported import { @@ -245,40 +244,10 @@ const WrappedRoadmapTable: React.FC = () => { [], ); - // Create a Storybook-compatible theme object - const storybookTheme = useMemo(() => { - const theme: Partial = { - ...odysseyTheme, - typography: { - fonts: { - base: odysseyTheme.typography.fontFamily, - mono: odysseyTheme.typography.fontFamilyMonospace, - }, - weight: { - regular: odysseyTheme.typography.fontWeightRegular, - bold: odysseyTheme.typography.fontWeightBold, - }, - size: { - s1: 12, - s2: 14, - s3: 16, - m1: 20, - m2: 24, - m3: 28, - l1: 32, - l2: 40, - l3: 48, - code: 90, - }, - }, - }; - return theme; - }, [odysseyTheme]); - return ( - + {/* @ts-expect-error type mismatch on "typography" */} - + From 00458a4638967ea6d6c7e0e3847765496bfee3f4 Mon Sep 17 00:00:00 2001 From: benlister-okta Date: Tue, 23 Jul 2024 22:38:30 -0700 Subject: [PATCH 10/22] fix: testing --- .../src/guidelines/Roadmap/RoadmapTable.tsx | 114 +++++++++--------- 1 file changed, 57 insertions(+), 57 deletions(-) diff --git a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx index d7f36f42c1..b08f554df7 100644 --- a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx +++ b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx @@ -130,39 +130,39 @@ const InnerRoadmapTable: React.FC = React.memo(() => { const columns = useColumns(); const data = useData(); - const typeOptions = useMemo( - () => [ - { label: "Component", value: "Component" }, - { label: "Pattern", value: "Pattern" }, - ], - [], - ); + // const typeOptions = useMemo( + // () => [ + // { label: "Component", value: "Component" }, + // { label: "Pattern", value: "Pattern" }, + // ], + // [], + // ); - const statusOptions = useMemo( - () => [ - { label: "In Progress", value: "In progress" }, - { label: "In Labs", value: "In labs" }, - { label: "Released", value: "Released" }, - { label: "Not Started", value: "Not started" }, - ], - [], - ); + // const statusOptions = useMemo( + // () => [ + // { label: "In Progress", value: "In progress" }, + // { label: "In Labs", value: "In labs" }, + // { label: "Released", value: "Released" }, + // { label: "Not Started", value: "Not started" }, + // ], + // [], + // ); - const expectedOptions = useMemo( - () => [ - { label: "FY24", value: "FY24" }, - { label: "TBD", value: "TBD" }, - { label: "Q1 FY25", value: "Q1 FY25" }, - { label: "Q2 FY25", value: "Q2 FY25" }, - { label: "Q3 FY25", value: "Q3 FY25" }, - { label: "Q4 FY25", value: "Q4 FY25" }, - { label: "Q1 FY26", value: "Q1 FY26" }, - { label: "Q2 FY26", value: "Q2 FY26" }, - { label: "Q3 FY26", value: "Q3 FY26" }, - { label: "Q4 FY26", value: "Q4 FY26" }, - ], - [], - ); + // const expectedOptions = useMemo( + // () => [ + // { label: "FY24", value: "FY24" }, + // { label: "TBD", value: "TBD" }, + // { label: "Q1 FY25", value: "Q1 FY25" }, + // { label: "Q2 FY25", value: "Q2 FY25" }, + // { label: "Q3 FY25", value: "Q3 FY25" }, + // { label: "Q4 FY25", value: "Q4 FY25" }, + // { label: "Q1 FY26", value: "Q1 FY26" }, + // { label: "Q2 FY26", value: "Q2 FY26" }, + // { label: "Q3 FY26", value: "Q3 FY26" }, + // { label: "Q4 FY26", value: "Q4 FY26" }, + // ], + // [], + // ); const memoizedProcessData = useCallback(processData, []); @@ -192,29 +192,29 @@ const InnerRoadmapTable: React.FC = React.memo(() => { [data, memoizedProcessData], ); - const tableFilters = useMemo( - () => [ - { - id: "type", - label: "Type", - variant: "select", - options: typeOptions, - }, - { - id: "status", - label: "Status", - variant: "select", - options: statusOptions, - }, - { - id: "deliverableTiming", - label: "Deliverable timing", - variant: "autocomplete", - options: expectedOptions, - }, - ], - [typeOptions, statusOptions, expectedOptions], - ); + // const tableFilters = useMemo( + // () => [ + // { + // id: "type", + // label: "Type", + // variant: "select", + // options: typeOptions, + // }, + // { + // id: "status", + // label: "Status", + // variant: "select", + // options: statusOptions, + // }, + // { + // id: "deliverableTiming", + // label: "Deliverable timing", + // variant: "autocomplete", + // options: expectedOptions, + // }, + // ], + // [typeOptions, statusOptions, expectedOptions], + // ); return ( { hasChangeableDensity={false} hasColumnResizing={false} hasColumnVisibility={false} - hasFilters - filters={tableFilters} + // hasFilters + // filters={tableFilters} resultsPerPage={100} hasPagination={false} hasRowSelection={false} hasRowReordering={false} searchDelayTime={300} - hasSearch + // hasSearch hasSorting /> ); From 577faea7d0affbf698f0e7c57626b029f7e5e5d7 Mon Sep 17 00:00:00 2001 From: benlister-okta Date: Tue, 23 Jul 2024 22:50:00 -0700 Subject: [PATCH 11/22] fix: testing --- .../src/guidelines/Roadmap/RoadmapTable.tsx | 21 +------------------ 1 file changed, 1 insertion(+), 20 deletions(-) diff --git a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx index b08f554df7..e9f1f4506d 100644 --- a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx +++ b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx @@ -216,26 +216,7 @@ const InnerRoadmapTable: React.FC = React.memo(() => { // [typeOptions, statusOptions, expectedOptions], // ); - return ( - name} - getData={fetchData} - hasChangeableDensity={false} - hasColumnResizing={false} - hasColumnVisibility={false} - // hasFilters - // filters={tableFilters} - resultsPerPage={100} - hasPagination={false} - hasRowSelection={false} - hasRowReordering={false} - searchDelayTime={300} - // hasSearch - hasSorting - /> - ); + return ; }); const WrappedRoadmapTable: React.FC = () => { From 52e313304d407e65b2d1c1f5d7f301bcc8d8a5ec Mon Sep 17 00:00:00 2001 From: benlister-okta Date: Wed, 24 Jul 2024 10:05:03 -0700 Subject: [PATCH 12/22] fix: debugging --- .../src/guidelines/Roadmap/RoadmapTable.tsx | 130 +++++++++--------- 1 file changed, 66 insertions(+), 64 deletions(-) diff --git a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx index e9f1f4506d..c3df0a5531 100644 --- a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx +++ b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx @@ -129,61 +129,54 @@ const processData = ({ const InnerRoadmapTable: React.FC = React.memo(() => { const columns = useColumns(); const data = useData(); + const typeOptions = useMemo( + () => [ + { label: "Component", value: "Component" }, + { label: "Pattern", value: "Pattern" }, + ], + [], + ); - // const typeOptions = useMemo( - // () => [ - // { label: "Component", value: "Component" }, - // { label: "Pattern", value: "Pattern" }, - // ], - // [], - // ); - - // const statusOptions = useMemo( - // () => [ - // { label: "In Progress", value: "In progress" }, - // { label: "In Labs", value: "In labs" }, - // { label: "Released", value: "Released" }, - // { label: "Not Started", value: "Not started" }, - // ], - // [], - // ); - - // const expectedOptions = useMemo( - // () => [ - // { label: "FY24", value: "FY24" }, - // { label: "TBD", value: "TBD" }, - // { label: "Q1 FY25", value: "Q1 FY25" }, - // { label: "Q2 FY25", value: "Q2 FY25" }, - // { label: "Q3 FY25", value: "Q3 FY25" }, - // { label: "Q4 FY25", value: "Q4 FY25" }, - // { label: "Q1 FY26", value: "Q1 FY26" }, - // { label: "Q2 FY26", value: "Q2 FY26" }, - // { label: "Q3 FY26", value: "Q3 FY26" }, - // { label: "Q4 FY26", value: "Q4 FY26" }, - // ], - // [], - // ); + const statusOptions = useMemo( + () => [ + { label: "In Progress", value: "In progress" }, + { label: "In Labs", value: "In labs" }, + { label: "Released", value: "Released" }, + { label: "Not Started", value: "Not started" }, + ], + [], + ); + + const expectedOptions = useMemo( + () => [ + { label: "FY24", value: "FY24" }, + { label: "TBD", value: "TBD" }, + { label: "Q1 FY25", value: "Q1 FY25" }, + { label: "Q2 FY25", value: "Q2 FY25" }, + { label: "Q3 FY25", value: "Q3 FY25" }, + { label: "Q4 FY25", value: "Q4 FY25" }, + { label: "Q1 FY26", value: "Q1 FY26" }, + { label: "Q2 FY26", value: "Q2 FY26" }, + { label: "Q3 FY26", value: "Q3 FY26" }, + { label: "Q4 FY26", value: "Q4 FY26" }, + ], + [], + ); const memoizedProcessData = useCallback(processData, []); const fetchData = useCallback( ({ - page, - resultsPerPage, search, filters, sort, }: { - page?: number; - resultsPerPage?: number; search?: string; filters?: DataFilter[]; sort?: DataTableSortingState; }) => { return memoizedProcessData({ initialData: data, - page, - resultsPerPage, search, filters, sort, @@ -192,31 +185,40 @@ const InnerRoadmapTable: React.FC = React.memo(() => { [data, memoizedProcessData], ); - // const tableFilters = useMemo( - // () => [ - // { - // id: "type", - // label: "Type", - // variant: "select", - // options: typeOptions, - // }, - // { - // id: "status", - // label: "Status", - // variant: "select", - // options: statusOptions, - // }, - // { - // id: "deliverableTiming", - // label: "Deliverable timing", - // variant: "autocomplete", - // options: expectedOptions, - // }, - // ], - // [typeOptions, statusOptions, expectedOptions], - // ); - - return ; + const tableFilters = useMemo( + () => [ + { + id: "type", + label: "Type", + variant: "select", + options: typeOptions, + }, + { + id: "status", + label: "Status", + variant: "select", + options: statusOptions, + }, + { + id: "deliverableTiming", + label: "Deliverable timing", + variant: "autocomplete", + options: expectedOptions, + }, + ], + [typeOptions, statusOptions, expectedOptions], + ); + + return ( + + ); }); const WrappedRoadmapTable: React.FC = () => { From ee9d3adff35c38237623a7c0febbddea69765d0b Mon Sep 17 00:00:00 2001 From: benlister-okta Date: Wed, 24 Jul 2024 10:11:31 -0700 Subject: [PATCH 13/22] fix: testing --- .../src/guidelines/Roadmap/RoadmapTable.tsx | 40 ++++++++----------- 1 file changed, 17 insertions(+), 23 deletions(-) diff --git a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx index c3df0a5531..43a8d8710c 100644 --- a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx +++ b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx @@ -16,13 +16,13 @@ import { DataFilter } from "@okta/odyssey-react-mui/labs"; import { DataTable, DataTableSortingState } from "@okta/odyssey-react-mui"; import { Callout, - CssBaseline, + //CssBaseline, OdysseyThemeProvider, - ScopedCssBaseline, - createOdysseyMuiTheme, + // ScopedCssBaseline, + // createOdysseyMuiTheme, } from "@okta/odyssey-react-mui"; -import { ThemeProvider as StorybookThemeProvider } from "@storybook/theming"; -import * as odysseyTokens from "@okta/odyssey-design-tokens"; +//import { ThemeProvider as StorybookThemeProvider } from "@storybook/theming"; +//import * as odysseyTokens from "@okta/odyssey-design-tokens"; // Assuming this is how your data and columns are imported import { @@ -222,28 +222,22 @@ const InnerRoadmapTable: React.FC = React.memo(() => { }); const WrappedRoadmapTable: React.FC = () => { - const odysseyTheme = useMemo( - () => createOdysseyMuiTheme({ odysseyTokens }), - [], - ); + // const odysseyTheme = useMemo( + // () => createOdysseyMuiTheme({ odysseyTokens }), + // [], + // ); return ( {/* @ts-expect-error type mismatch on "typography" */} - - - - - Any products, features or functionality referenced in this - presentation that are not currently generally available may not be - delivered on time or at all. Product roadmaps do not represent a - commitment, obligation or promise to deliver any product, feature or - functionality, and you should not rely on them to make your purchase - decisions. - - - - + + Any products, features or functionality referenced in this presentation + that are not currently generally available may not be delivered on time + or at all. Product roadmaps do not represent a commitment, obligation or + promise to deliver any product, feature or functionality, and you should + not rely on them to make your purchase decisions. + + ); }; From 51ee0baab094c444ef7bc4ee5a54cae8a1708463 Mon Sep 17 00:00:00 2001 From: benlister-okta Date: Wed, 24 Jul 2024 10:30:44 -0700 Subject: [PATCH 14/22] fix: debug --- .../src/guidelines/Roadmap/RoadmapTable.tsx | 9 --------- 1 file changed, 9 deletions(-) diff --git a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx index 43a8d8710c..b70947b02d 100644 --- a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx +++ b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx @@ -15,7 +15,6 @@ import React, { useMemo, useCallback } from "react"; import { DataFilter } from "@okta/odyssey-react-mui/labs"; import { DataTable, DataTableSortingState } from "@okta/odyssey-react-mui"; import { - Callout, //CssBaseline, OdysseyThemeProvider, // ScopedCssBaseline, @@ -229,14 +228,6 @@ const WrappedRoadmapTable: React.FC = () => { return ( - {/* @ts-expect-error type mismatch on "typography" */} - - Any products, features or functionality referenced in this presentation - that are not currently generally available may not be delivered on time - or at all. Product roadmaps do not represent a commitment, obligation or - promise to deliver any product, feature or functionality, and you should - not rely on them to make your purchase decisions. - ); From 75612140fabacce61659df91186bf0cb505919c9 Mon Sep 17 00:00:00 2001 From: benlister-okta Date: Wed, 24 Jul 2024 10:40:18 -0700 Subject: [PATCH 15/22] fix: testing --- .../src/guidelines/Roadmap/RoadmapTable.tsx | 236 ++++++------------ 1 file changed, 73 insertions(+), 163 deletions(-) diff --git a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx index b70947b02d..84d949600a 100644 --- a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx +++ b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx @@ -13,7 +13,7 @@ /* eslint-disable import/no-extraneous-dependencies */ import React, { useMemo, useCallback } from "react"; import { DataFilter } from "@okta/odyssey-react-mui/labs"; -import { DataTable, DataTableSortingState } from "@okta/odyssey-react-mui"; +import { DataTable } from "@okta/odyssey-react-mui"; import { //CssBaseline, OdysseyThemeProvider, @@ -24,164 +24,86 @@ import { //import * as odysseyTokens from "@okta/odyssey-design-tokens"; // Assuming this is how your data and columns are imported -import { - useColumns, - data as initialData, - OdysseyComponent, -} from "./roadmapData"; +import { useColumns, data as initialData } from "./roadmapData"; // Memoize the initial data const useData = () => useMemo(() => initialData, []); -const parseCustomDate = (dateStr: string): Date => { - if (dateStr.length <= 0) { - return new Date(2999, 0); - } - - const months = [ - "Jan", - "Feb", - "Mar", - "Apr", - "May", - "Jun", - "Jul", - "Aug", - "Sep", - "Oct", - "Nov", - "Dec", - ]; - const [monthStr, yearStr] = dateStr.split(" "); - - const month = months.indexOf(monthStr); - const year = parseInt(yearStr.replace("'", ""), 10) + 2000; - - return new Date(year, month); -}; - -const processData = ({ - initialData, - page = 1, - resultsPerPage = 100, - search, - filters, - sort, -}: { - initialData: OdysseyComponent[]; - page?: number; - resultsPerPage?: number; - search?: string; - filters?: DataFilter[]; - sort?: DataTableSortingState; -}) => { - let filteredData = [...initialData]; - - if (search) { - filteredData = filteredData.filter((row) => - Object.values(row).some((value) => - value.toString().toLowerCase().includes(search.toLowerCase()), - ), - ); - } - - if (filters) { - filteredData = filteredData.filter((row) => - filters.every(({ id, value }) => { - if (value === null || value === undefined) { - return true; - } - return row[id as keyof OdysseyComponent] - ?.toString() - .includes(value.toString()); - }), - ); - } - - if (sort && sort.length > 0) { - filteredData.sort((a, b) => { - for (const { id, desc } of sort) { - let aValue: string | Date = a[id as keyof OdysseyComponent]; - let bValue: string | Date = b[id as keyof OdysseyComponent]; - - if ( - id === "startDate" || - id === "labsRelease" || - id === "fullRelease" - ) { - aValue = parseCustomDate(aValue as string); - bValue = parseCustomDate(bValue as string); - } - - if (aValue < bValue) return desc ? 1 : -1; - if (aValue > bValue) return desc ? -1 : 1; - } - return 0; - }); - } - - const startIdx = (page - 1) * resultsPerPage; - const endIdx = startIdx + resultsPerPage; - return filteredData.slice(startIdx, endIdx); -}; +// const processData = ({ +// initialData, +// page = 1, +// resultsPerPage = 100, +// search, +// filters, +// sort, +// }: { +// initialData: OdysseyComponent[]; +// page?: number; +// resultsPerPage?: number; +// search?: string; +// filters?: DataFilter[]; +// sort?: DataTableSortingState; +// }) => { +// let filteredData = [...initialData]; + +// if (search) { +// filteredData = filteredData.filter((row) => +// Object.values(row).some((value) => +// value.toString().toLowerCase().includes(search.toLowerCase()), +// ), +// ); +// } + +// if (filters) { +// filteredData = filteredData.filter((row) => +// filters.every(({ id, value }) => { +// if (value === null || value === undefined) { +// return true; +// } +// return row[id as keyof OdysseyComponent] +// ?.toString() +// .includes(value.toString()); +// }), +// ); +// } + +// if (sort && sort.length > 0) { +// filteredData.sort((a, b) => { +// for (const { id, desc } of sort) { +// let aValue: string | Date = a[id as keyof OdysseyComponent]; +// let bValue: string | Date = b[id as keyof OdysseyComponent]; + +// if ( +// id === "startDate" || +// id === "labsRelease" || +// id === "fullRelease" +// ) { +// aValue = parseCustomDate(aValue as string); +// bValue = parseCustomDate(bValue as string); +// } + +// if (aValue < bValue) return desc ? 1 : -1; +// if (aValue > bValue) return desc ? -1 : 1; +// } +// return 0; +// }); +// } + +// const startIdx = (page - 1) * resultsPerPage; +// const endIdx = startIdx + resultsPerPage; +// return filteredData.slice(startIdx, endIdx); +// }; const InnerRoadmapTable: React.FC = React.memo(() => { const columns = useColumns(); - const data = useData(); - const typeOptions = useMemo( - () => [ - { label: "Component", value: "Component" }, - { label: "Pattern", value: "Pattern" }, - ], - [], - ); - - const statusOptions = useMemo( - () => [ - { label: "In Progress", value: "In progress" }, - { label: "In Labs", value: "In labs" }, - { label: "Released", value: "Released" }, - { label: "Not Started", value: "Not started" }, - ], - [], - ); - - const expectedOptions = useMemo( - () => [ - { label: "FY24", value: "FY24" }, - { label: "TBD", value: "TBD" }, - { label: "Q1 FY25", value: "Q1 FY25" }, - { label: "Q2 FY25", value: "Q2 FY25" }, - { label: "Q3 FY25", value: "Q3 FY25" }, - { label: "Q4 FY25", value: "Q4 FY25" }, - { label: "Q1 FY26", value: "Q1 FY26" }, - { label: "Q2 FY26", value: "Q2 FY26" }, - { label: "Q3 FY26", value: "Q3 FY26" }, - { label: "Q4 FY26", value: "Q4 FY26" }, - ], - [], - ); - - const memoizedProcessData = useCallback(processData, []); + const data = useData(); // Ensure this is memoized correctly const fetchData = useCallback( - ({ - search, - filters, - sort, - }: { - search?: string; - filters?: DataFilter[]; - sort?: DataTableSortingState; - }) => { - return memoizedProcessData({ - initialData: data, - search, - filters, - sort, - }); + ({ search, filters, sort }) => { + console.log("fetchData called", { search, filters, sort }); + return data; // Simplified for testing }, - [data, memoizedProcessData], + [data], ); const tableFilters = useMemo( @@ -190,22 +112,10 @@ const InnerRoadmapTable: React.FC = React.memo(() => { id: "type", label: "Type", variant: "select", - options: typeOptions, - }, - { - id: "status", - label: "Status", - variant: "select", - options: statusOptions, - }, - { - id: "deliverableTiming", - label: "Deliverable timing", - variant: "autocomplete", - options: expectedOptions, + options: [{ label: "Component", value: "Component" }], }, ], - [typeOptions, statusOptions, expectedOptions], + [], ); return ( From 02fc03178b02c3a9c0a6e121a48b3c6a7c8515cf Mon Sep 17 00:00:00 2001 From: benlister-okta Date: Wed, 24 Jul 2024 10:58:57 -0700 Subject: [PATCH 16/22] fix: testing --- .../odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx index 84d949600a..389c51744f 100644 --- a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx +++ b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx @@ -138,6 +138,7 @@ const WrappedRoadmapTable: React.FC = () => { return ( + hello ); From e6cadaa48378eed2562e5464914ad3be9847be19 Mon Sep 17 00:00:00 2001 From: benlister-okta Date: Wed, 24 Jul 2024 11:25:14 -0700 Subject: [PATCH 17/22] fix: testing --- .../src/guidelines/Roadmap/RoadmapTable.tsx | 46 +++++++++++++------ 1 file changed, 33 insertions(+), 13 deletions(-) diff --git a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx index 389c51744f..0bdfd14630 100644 --- a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx +++ b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx @@ -13,15 +13,16 @@ /* eslint-disable import/no-extraneous-dependencies */ import React, { useMemo, useCallback } from "react"; import { DataFilter } from "@okta/odyssey-react-mui/labs"; -import { DataTable } from "@okta/odyssey-react-mui"; +import { DataTable, DataTableSortingState } from "@okta/odyssey-react-mui"; import { - //CssBaseline, + CssBaseline, OdysseyThemeProvider, - // ScopedCssBaseline, - // createOdysseyMuiTheme, + ScopedCssBaseline, + createOdysseyMuiTheme, + Callout, } from "@okta/odyssey-react-mui"; -//import { ThemeProvider as StorybookThemeProvider } from "@storybook/theming"; -//import * as odysseyTokens from "@okta/odyssey-design-tokens"; +import { ThemeProvider as StorybookThemeProvider } from "@storybook/theming"; +import * as odysseyTokens from "@okta/odyssey-design-tokens"; // Assuming this is how your data and columns are imported import { useColumns, data as initialData } from "./roadmapData"; @@ -94,12 +95,18 @@ const useData = () => useMemo(() => initialData, []); // return filteredData.slice(startIdx, endIdx); // }; +interface FetchDataParams { + search?: string; + filters?: DataFilter[]; + sort?: DataTableSortingState; +} + const InnerRoadmapTable: React.FC = React.memo(() => { const columns = useColumns(); const data = useData(); // Ensure this is memoized correctly const fetchData = useCallback( - ({ search, filters, sort }) => { + ({ search, filters, sort }: FetchDataParams) => { console.log("fetchData called", { search, filters, sort }); return data; // Simplified for testing }, @@ -131,15 +138,28 @@ const InnerRoadmapTable: React.FC = React.memo(() => { }); const WrappedRoadmapTable: React.FC = () => { - // const odysseyTheme = useMemo( - // () => createOdysseyMuiTheme({ odysseyTokens }), - // [], - // ); + const odysseyTheme = useMemo( + () => createOdysseyMuiTheme({ odysseyTokens }), + [], + ); return ( - hello - + {/* @ts-expect-error type mismatch on "typography" */} + + + + + Any products, features or functionality referenced in this + presentation that are not currently generally available may not be + delivered on time or at all. Product roadmaps do not represent a + commitment, obligation or promise to deliver any product, feature or + functionality, and you should not rely on them to make your purchase + decisions. + + + + ); }; From ad249760f9b468e1067fcdd96492c2c2d2382b8a Mon Sep 17 00:00:00 2001 From: benlister-okta Date: Thu, 25 Jul 2024 15:45:48 -0700 Subject: [PATCH 18/22] fix: update to resolve prod reload issue --- .../src/guidelines/Roadmap/RoadmapTable.tsx | 148 ++++-------------- .../src/guidelines/Roadmap/roadmapData.tsx | 10 +- 2 files changed, 39 insertions(+), 119 deletions(-) diff --git a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx index 0bdfd14630..cf0730c5f8 100644 --- a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx +++ b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx @@ -11,138 +11,50 @@ */ /* eslint-disable import/no-extraneous-dependencies */ -import React, { useMemo, useCallback } from "react"; -import { DataFilter } from "@okta/odyssey-react-mui/labs"; -import { DataTable, DataTableSortingState } from "@okta/odyssey-react-mui"; +import { memo, useCallback } from "react"; +import { Box, DataTable, DataTableGetDataType } from "@okta/odyssey-react-mui"; +import { useColumns, data, OdysseyComponent } from "./roadmapData"; import { + Callout, CssBaseline, OdysseyThemeProvider, ScopedCssBaseline, createOdysseyMuiTheme, - Callout, } from "@okta/odyssey-react-mui"; import { ThemeProvider as StorybookThemeProvider } from "@storybook/theming"; import * as odysseyTokens from "@okta/odyssey-design-tokens"; -// Assuming this is how your data and columns are imported -import { useColumns, data as initialData } from "./roadmapData"; - -// Memoize the initial data -const useData = () => useMemo(() => initialData, []); - -// const processData = ({ -// initialData, -// page = 1, -// resultsPerPage = 100, -// search, -// filters, -// sort, -// }: { -// initialData: OdysseyComponent[]; -// page?: number; -// resultsPerPage?: number; -// search?: string; -// filters?: DataFilter[]; -// sort?: DataTableSortingState; -// }) => { -// let filteredData = [...initialData]; - -// if (search) { -// filteredData = filteredData.filter((row) => -// Object.values(row).some((value) => -// value.toString().toLowerCase().includes(search.toLowerCase()), -// ), -// ); -// } - -// if (filters) { -// filteredData = filteredData.filter((row) => -// filters.every(({ id, value }) => { -// if (value === null || value === undefined) { -// return true; -// } -// return row[id as keyof OdysseyComponent] -// ?.toString() -// .includes(value.toString()); -// }), -// ); -// } - -// if (sort && sort.length > 0) { -// filteredData.sort((a, b) => { -// for (const { id, desc } of sort) { -// let aValue: string | Date = a[id as keyof OdysseyComponent]; -// let bValue: string | Date = b[id as keyof OdysseyComponent]; - -// if ( -// id === "startDate" || -// id === "labsRelease" || -// id === "fullRelease" -// ) { -// aValue = parseCustomDate(aValue as string); -// bValue = parseCustomDate(bValue as string); -// } - -// if (aValue < bValue) return desc ? 1 : -1; -// if (aValue > bValue) return desc ? -1 : 1; -// } -// return 0; -// }); -// } +export const InnerRoadmapTable = () => { + const columns = useColumns(); // Use the hook to get columns + const filterData = ({ + data, + }: { + data: OdysseyComponent[]; + } & DataTableGetDataType) => { + const filteredData = data; -// const startIdx = (page - 1) * resultsPerPage; -// const endIdx = startIdx + resultsPerPage; -// return filteredData.slice(startIdx, endIdx); -// }; + return filteredData; + }; -interface FetchDataParams { - search?: string; - filters?: DataFilter[]; - sort?: DataTableSortingState; -} - -const InnerRoadmapTable: React.FC = React.memo(() => { - const columns = useColumns(); - const data = useData(); // Ensure this is memoized correctly - - const fetchData = useCallback( - ({ search, filters, sort }: FetchDataParams) => { - console.log("fetchData called", { search, filters, sort }); - return data; // Simplified for testing - }, - [data], - ); - - const tableFilters = useMemo( - () => [ - { - id: "type", - label: "Type", - variant: "select", - options: [{ label: "Component", value: "Component" }], - }, - ], - [], - ); + const fetchData = useCallback(({ ...props }: DataTableGetDataType) => { + return filterData({ data, ...props }); + }, []); return ( ); -}); - -const WrappedRoadmapTable: React.FC = () => { - const odysseyTheme = useMemo( - () => createOdysseyMuiTheme({ odysseyTokens }), - [], - ); +}; +const WrappedRoadmapTable = () => { + const odysseyTheme = createOdysseyMuiTheme({ odysseyTokens }); + const MemoizedInnerRoadmapTable = memo(InnerRoadmapTable); return ( {/* @ts-expect-error type mismatch on "typography" */} @@ -157,7 +69,15 @@ const WrappedRoadmapTable: React.FC = () => { functionality, and you should not rely on them to make your purchase decisions. - + + + diff --git a/packages/odyssey-storybook/src/guidelines/Roadmap/roadmapData.tsx b/packages/odyssey-storybook/src/guidelines/Roadmap/roadmapData.tsx index fca188cedc..6fee43629f 100644 --- a/packages/odyssey-storybook/src/guidelines/Roadmap/roadmapData.tsx +++ b/packages/odyssey-storybook/src/guidelines/Roadmap/roadmapData.tsx @@ -60,7 +60,7 @@ const getTooltipText = ( }; type CellProps = { - cell: { getValue: () => string }; // Updated to string + cell: { getValue: () => string }; row: { original: OdysseyComponent }; }; @@ -112,18 +112,18 @@ export const useColumns = (): DataTableColumn[] => { accessorKey: "name", header: "Name", enableHiding: false, - size: 325, + size: 290, }, { accessorKey: "type", header: "Type", enableHiding: true, - size: 200, + size: 110, }, { accessorKey: "status", header: "Status", - size: 200, + size: 115, Cell: ({ cell, row }: CellProps) => ( ), @@ -132,7 +132,7 @@ export const useColumns = (): DataTableColumn[] => { accessorKey: "deliverableTiming", header: "Deliverable timing", enableHiding: false, - size: 200, + size: 155, }, ] as DataTableColumn[], [], From d114940de78a482f1d3f8685b2c3de735240cf04 Mon Sep 17 00:00:00 2001 From: benlister-okta Date: Thu, 25 Jul 2024 15:56:28 -0700 Subject: [PATCH 19/22] fix: resolve eslint error --- .../src/guidelines/Roadmap/RoadmapTable.tsx | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx index cf0730c5f8..0f8683dc11 100644 --- a/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx +++ b/packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx @@ -40,16 +40,7 @@ export const InnerRoadmapTable = () => { return filterData({ data, ...props }); }, []); - return ( - - ); + return ; }; const WrappedRoadmapTable = () => { From fc934e4e7ef81e7b0be2489150e7ef507329fe37 Mon Sep 17 00:00:00 2001 From: benlister-okta Date: Fri, 26 Jul 2024 11:15:24 -0700 Subject: [PATCH 20/22] fix: update roadmap content 7/26 --- .../src/guidelines/Roadmap/roadmap.json | 65 +++++++++++-------- 1 file changed, 37 insertions(+), 28 deletions(-) diff --git a/packages/odyssey-storybook/src/guidelines/Roadmap/roadmap.json b/packages/odyssey-storybook/src/guidelines/Roadmap/roadmap.json index 1dce3e2cf4..0875af023e 100644 --- a/packages/odyssey-storybook/src/guidelines/Roadmap/roadmap.json +++ b/packages/odyssey-storybook/src/guidelines/Roadmap/roadmap.json @@ -108,16 +108,16 @@ "deliverableTiming": "Q2 FY25" }, { - "name": "Data View: Data stack \n(data list, resource list?)", + "name": "Data Stack", "type": "Component", "status": "In Labs", - "define": "Complete", - "design": "Complete", - "develop": "In progress", - "deliverableTiming": "Q2 FY25" + "define": "In Labs", + "design": "In Labs", + "develop": "In Labs", + "deliverableTiming": "Q3 FY25" }, { - "name": "Data View: Data table", + "name": "Data table", "type": "Component", "status": "Released", "define": "Complete", @@ -125,6 +125,15 @@ "develop": "Complete", "deliverableTiming": "Q1 FY25" }, + { + "name": "Data View", + "type": "Component", + "status": "In Labs", + "define": "Complete", + "design": "Complete", + "develop": "In progress", + "deliverableTiming": "Q2 FY25" + }, { "name": "Dialog", "type": "Component", @@ -144,13 +153,13 @@ "deliverableTiming": "Q1 FY25" }, { - "name": "Duration picker\n(or fieldset)", + "name": "Duration' picker\n(or fieldset)", "type": "Component", "status": "In progress", "define": "In progress", "design": "In progress", "develop": "Not started", - "deliverableTiming": "Q2 FY25" + "deliverableTiming": "Q4 FY25" }, { "name": "Empty states v1 (no illustration)", @@ -165,8 +174,8 @@ "name": "Empty states v2 (illustration)", "type": "Component", "status": "In progress", - "define": "In progress", - "design": "Not started", + "define": "Complete", + "design": "In progress", "develop": "Not started", "deliverableTiming": "Q3 FY25" }, @@ -201,28 +210,28 @@ "name": "Form Layout (Advanced)", "type": "Component", "status": "In progress", - "define": "In progress", + "define": "Complete", "design": "In progress", - "develop": "-", - "deliverableTiming": "Q2 FY25" + "develop": "In progress", + "deliverableTiming": "Q3 FY25" }, { "name": "Group picker", "type": "Component", "status": "In Labs", - "define": "Complete", - "design": "Complete", + "define": "In progress", + "design": "In progress", "develop": "In progress", "deliverableTiming": "Q2 FY25" }, { - "name": "Line text field", + "name": "Inline text field", "type": "Component", - "status": "Not started", - "define": "Not started", - "design": "Not started", - "develop": "Not started", - "deliverableTiming": "-" + "status": "In progress", + "define": "Complete", + "design": "Complete", + "develop": "In progress", + "deliverableTiming": "Q3 FY25" }, { "name": "Link", @@ -240,7 +249,7 @@ "define": "Not started", "design": "Not started", "develop": "Not started", - "deliverableTiming": "Q3 FY25" + "deliverableTiming": "Q4 FY25" }, { "name": "Menu button", @@ -276,14 +285,14 @@ "define": "In progress", "design": "Not started", "develop": "Not started", - "deliverableTiming": "Q3 FY25" + "deliverableTiming": "Q4 FY25" }, { "name": "Progress Bar", "type": "Component", - "status": "Not started", - "define": "Not started", - "design": "Not started", + "status": "In progress", + "define": "In progress", + "design": "In progress", "develop": "Not started", "deliverableTiming": "Q3 FY25" }, @@ -312,7 +321,7 @@ "define": "Not started", "design": "Not started", "develop": "Not started", - "deliverableTiming": "TBD" + "deliverableTiming": "Q3 FY25" }, { "name": "Select", @@ -384,7 +393,7 @@ "define": "Not started", "design": "Not started", "develop": "Not started", - "deliverableTiming": "Q2 FY25" + "deliverableTiming": "Q3 FY25" }, { "name": "Toast", From 18045980c21f9107e70b40643dde1c3a7bd06bf6 Mon Sep 17 00:00:00 2001 From: benlister-okta Date: Tue, 30 Jul 2024 16:26:27 -0700 Subject: [PATCH 21/22] fix: update roadmap data --- .../src/guidelines/Roadmap/roadmap.json | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/odyssey-storybook/src/guidelines/Roadmap/roadmap.json b/packages/odyssey-storybook/src/guidelines/Roadmap/roadmap.json index 0875af023e..f16812c3ea 100644 --- a/packages/odyssey-storybook/src/guidelines/Roadmap/roadmap.json +++ b/packages/odyssey-storybook/src/guidelines/Roadmap/roadmap.json @@ -108,13 +108,13 @@ "deliverableTiming": "Q2 FY25" }, { - "name": "Data Stack", + "name": "Data stack", "type": "Component", "status": "In Labs", - "define": "In Labs", - "design": "In Labs", - "develop": "In Labs", - "deliverableTiming": "Q3 FY25" + "define": "Complete", + "design": "Complete", + "develop": "Complete", + "deliverableTiming": "Q2 FY25" }, { "name": "Data table", @@ -126,7 +126,7 @@ "deliverableTiming": "Q1 FY25" }, { - "name": "Data View", + "name": "Data view", "type": "Component", "status": "In Labs", "define": "Complete", @@ -207,7 +207,7 @@ "deliverableTiming": "FY24" }, { - "name": "Form Layout (Advanced)", + "name": "Form layout (Advanced)", "type": "Component", "status": "In progress", "define": "Complete", @@ -264,9 +264,9 @@ "name": "Multi-select dropdown", "type": "Component", "status": "Not started", - "define": "Not started", - "design": "Not started", - "develop": "Not started", + "define": "-", + "design": "-", + "develop": "-", "deliverableTiming": "TBD" }, { @@ -288,7 +288,7 @@ "deliverableTiming": "Q4 FY25" }, { - "name": "Progress Bar", + "name": "Progress bar", "type": "Component", "status": "In progress", "define": "In progress", @@ -306,7 +306,7 @@ "deliverableTiming": "FY24" }, { - "name": "Search Input", + "name": "Search input", "type": "Component", "status": "In progress", "define": "Complete", From 958fb4efd5b1f3a5e3c5e2e11abd06ee75885473 Mon Sep 17 00:00:00 2001 From: benlister-okta Date: Tue, 6 Aug 2024 10:05:36 -0700 Subject: [PATCH 22/22] fix: applitools delay added to fix VRT --- packages/odyssey-storybook/applitools.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/odyssey-storybook/applitools.config.js b/packages/odyssey-storybook/applitools.config.js index 7210a87c89..8270c58dd3 100644 --- a/packages/odyssey-storybook/applitools.config.js +++ b/packages/odyssey-storybook/applitools.config.js @@ -39,6 +39,7 @@ const applitoolsConfig = { runInDocker: true, serverUrl: "https://oktaeyes.applitools.com", testConcurrency: 20, + waitBeforeCapture: 1000, }; module.exports = applitoolsConfig;