From 7d4bfbf68d2b1847cfe21064e7597922e003e85c Mon Sep 17 00:00:00 2001 From: Josh Wooding <12938082+joshwooding@users.noreply.github.com> Date: Thu, 7 Nov 2024 15:00:13 +0000 Subject: [PATCH 1/9] Re-next mosaic --- .prettierignore | 1 + packages/components-labs/src/index.ts | 2 + .../src/EditionFilterView/index.tsx | 13 +- .../components/src/EditionTileLink/index.tsx | 2 +- packages/components/src/Feature/Feature.tsx | 2 +- packages/components/src/FormattedContent.tsx | 70 -- packages/components/src/Hero/index.tsx | 17 +- packages/components/src/Hero/styles.css.ts | 2 +- packages/components/src/ImageProvider.ts | 9 - packages/components/src/Impact/index.tsx | 2 +- packages/components/src/LinkBase/index.tsx | 2 +- packages/components/src/LinkProvider.ts | 9 - .../components/src/SecondaryNavbar/index.tsx | 4 +- packages/components/src/Story/index.tsx | 2 +- packages/components/src/Tabs/index.tsx | 4 +- packages/components/src/TabsBase/TabsBase.tsx | 11 +- .../components/src/TabsBase/TabsButton.tsx | 3 +- packages/components/src/TabsBase/TabsLink.tsx | 3 +- .../src/TabsBase/TabsMenuButton.tsx | 3 +- packages/components/src/ThemeProvider.tsx | 2 +- packages/components/src/TileContent/index.tsx | 2 +- packages/components/src/Typography/index.tsx | 1 + packages/components/src/index.tsx | 5 +- packages/content-editor-plugin/package.json | 4 +- .../content-editor-plugin/src/LazyEditor.tsx | 11 + .../src/components/ContentPreview.tsx | 7 + .../src/components/Editor.tsx | 39 +- packages/content-editor-plugin/src/index.ts | 6 +- .../src/plugins/PreviewPlugin.tsx | 67 +- packages/layouts/src/LayoutBase/index.tsx | 28 +- packages/layouts/src/LayoutColumns/index.tsx | 46 +- .../src/LayoutConfigProvider/index.tsx | 22 - .../layouts/src/LayoutFullWidth/index.tsx | 2 +- packages/layouts/src/LayoutProvider.tsx | 37 - packages/layouts/src/hooks/useIsLoading.ts | 41 - packages/layouts/src/index.ts | 3 - .../src/layouts/Detail/DetailContentOnly.tsx | 11 +- .../src/layouts/Detail/DetailHighlight.tsx | 30 +- .../src/layouts/Detail/DetailOverview.tsx | 31 +- .../src/layouts/Detail/DetailTechnical.tsx | 41 +- packages/layouts/src/layouts/Edit/index.tsx | 40 +- .../layouts/src/layouts/FullWidth/index.tsx | 6 +- .../layouts/src/layouts/Landing/index.tsx | 8 +- .../layouts/src/layouts/Newsletter/index.tsx | 24 +- .../src/layouts/Product/ProductDiscover.tsx | 11 +- .../src/layouts/Product/ProductPreview.tsx | 8 +- .../layouts/src/layouts/PythonDoc/index.tsx | 86 -- .../src/layouts/PythonDoc/styles.css.ts | 67 -- .../layouts/TypeDoc/ExportsSidebar/index.tsx | 35 - .../TypeDoc/ExportsSidebar/styles.css.ts | 44 - .../layouts/src/layouts/TypeDoc/icons.css | 944 ------------------ .../layouts/src/layouts/TypeDoc/icons.png | Bin 9615 -> 0 bytes .../layouts/src/layouts/TypeDoc/icons@2x.png | Bin 28144 -> 0 bytes .../layouts/src/layouts/TypeDoc/index.tsx | 80 -- .../layouts/src/layouts/TypeDoc/style.css | 689 ------------- .../layouts/src/layouts/TypeDoc/styles.css.ts | 41 - .../layouts/src/layouts/TypeDoc/widgets.png | Bin 480 -> 0 bytes .../src/layouts/TypeDoc/widgets@2x.png | Bin 855 -> 0 bytes packages/layouts/src/layouts/index.ts | 2 - packages/layouts/src/types/index.tsx | 13 +- packages/loaders/README.md | 13 + packages/loaders/package.json | 46 + packages/loaders/scripts/bundle.mjs | 44 + packages/loaders/src/index.ts | 77 ++ packages/loaders/src/types/index.ts | 37 + .../tsconfig.json | 0 packages/mdx-components/README.md | 18 + packages/mdx-components/package.json | 52 + .../src/BlockQuote/index.css.ts | 24 + .../mdx-components/src/BlockQuote/index.tsx | 23 + .../src/Heading/AnchorHeading.css.ts | 64 ++ .../src/Heading/AnchorHeading.tsx | 94 ++ .../src/Heading/__tests__/Heading.test.tsx | 56 ++ .../src/Heading/__tests__/index.test.tsx | 51 + packages/mdx-components/src/Heading/index.tsx | 34 + packages/mdx-components/src/InlineCode.tsx | 10 + packages/mdx-components/src/Link.tsx | 10 + packages/mdx-components/src/Table.tsx | 11 + packages/mdx-components/src/Tbody.tsx | 9 + packages/mdx-components/src/Td.tsx | 9 + packages/mdx-components/src/Th.tsx | 9 + packages/mdx-components/src/Thead.tsx | 9 + .../src/ThematicBreak/index.css.ts | 5 + .../src/ThematicBreak/index.tsx | 10 + packages/mdx-components/src/Tr.tsx | 9 + packages/mdx-components/src/components.ts | 166 +++ packages/mdx-components/src/index.tsx | 3 + .../mdx-components/src/markdownElements.tsx | 58 ++ packages/mdx-components/src/typography.tsx | 55 + .../src/withMarkdownSpacing/index.tsx | 33 + .../src/withMarkdownSpacing/styles.css.ts | 7 + packages/mdx-components/tsconfig.json | 8 + packages/schemas/src/ActiveEnvSchema.ts | 7 + packages/schemas/src/index.ts | 1 + packages/site-components-next/package.json | 54 + .../src/AppHeader/index.tsx | 117 +++ .../src/Breadcrumbs/index.tsx | 8 + .../src/DocPaginator/index.tsx | 16 + .../src/EditionFilterView/index.tsx | 17 + .../site-components-next/src/Footer/index.tsx | 8 + .../src/MDXContent/index.tsx | 12 + .../src/SearchInput/index.tsx | 13 + .../src/Sidebar/index.tsx | 18 + .../site-components-next/src/TOC/index.tsx | 16 + .../src/actions/compile.ts | 49 + .../src/actions/preview.ts | 37 + packages/site-components-next/src/index.ts | 14 + .../site-components-next/src/mdx/elements.ts | 34 + .../site-components-next/src/mdx/index.tsx | 239 +++++ packages/site-components-next/tsconfig.json | 8 + packages/site-components/src/404.tsx | 19 +- packages/site-components/src/500.tsx | 23 +- .../src/AppHeader/AppHeader.tsx | 11 +- .../site-components/src/AppHeader/index.ts | 6 +- .../src/AppHeader/withAppHeaderAdapter.tsx | 45 - .../src/AppHeaderControls/index.tsx | 13 +- .../src/AppHeaderTabs/index.tsx | 34 +- .../site-components/src/BaseUrlProvider.tsx | 39 - packages/site-components/src/Body.tsx | 81 -- .../src/Breadcrumbs/Breadcrumbs.tsx | 2 +- .../site-components/src/Breadcrumbs/index.ts | 7 +- .../Breadcrumbs/withBreadcrumbsAdapter.tsx | 6 - .../src/DocPaginator/DocPaginator.tsx | 26 +- .../__tests__/DocPaginator.test.tsx | 10 +- .../site-components/src/DocPaginator/index.ts | 6 +- .../DocPaginator/withNavigationAdapter.tsx | 8 - packages/site-components/src/Document.tsx | 19 - packages/site-components/src/Drawer/index.tsx | 15 +- packages/site-components/src/Footer/index.ts | 7 +- .../src/Footer/withFooterAdapter.tsx | 6 - .../src/Home/__tests__/index.test.tsx | 16 - packages/site-components/src/Home/index.tsx | 77 -- .../site-components/src/Home/styles.css.ts | 57 -- packages/site-components/src/Image/index.tsx | 10 +- packages/site-components/src/Link.tsx | 21 +- packages/site-components/src/Metadata.tsx | 25 - .../site-components/src/PageNavigation.tsx | 43 +- .../src/SearchInput/Results.tsx | 2 +- .../site-components/src/SearchInput/index.tsx | 14 +- .../src/SearchInput/useSearchData.ts | 14 - .../site-components/src/SessionProvider.tsx | 5 + .../src/TableOfContents/TableOfContents.tsx | 6 +- .../TableOfContents/TableOfContentsItem.tsx | 4 +- .../src/TableOfContents/index.ts | 9 +- .../withTableOfContentsAdapter.tsx | 10 - .../site-components/src/ThemeProvider.tsx | 34 + .../src/__tests__/BaseUrlProvider.test.tsx | 40 - packages/site-components/src/index.tsx | 9 +- packages/site-components/src/mdx.tsx | 2 - packages/site-middleware/CHANGELOG.md | 858 ---------------- packages/site-middleware/README.md | 14 - packages/site-middleware/package.json | 67 -- .../site-middleware/src/MiddlewareError.ts | 26 - .../src/__tests__/compileMdx.test.ts | 19 - .../src/__tests__/withMDXContent.test.ts | 105 -- .../src/__tests__/withSearchIndex.test.ts | 175 ---- .../src/__tests__/withSharedConfig.test.ts | 155 --- packages/site-middleware/src/compileMdx.ts | 20 - .../src/createMiddlewareRunner.ts | 106 -- packages/site-middleware/src/index.ts | 9 - .../loaders/__tests__/createS3Loader.test.ts | 56 -- .../src/loaders/__tests__/getS3Config.test.ts | 45 - .../loaders/__tests__/loadLocalFile.test.ts | 38 - .../src/loaders/createS3Loader.ts | 61 -- .../src/loaders/getSnapshotFileConfig.ts | 16 - .../src/loaders/getSnapshotS3Config.ts | 19 - packages/site-middleware/src/loaders/index.ts | 4 - .../src/loaders/loadLocalFile.ts | 12 - .../site-middleware/src/middlewarePresets.ts | 47 - .../site-middleware/src/plugins/codeBlocks.ts | 87 -- .../site-middleware/src/withMDXContent.ts | 123 --- .../site-middleware/src/withMosaicMode.ts | 26 - .../site-middleware/src/withSearchIndex.ts | 104 -- packages/site-middleware/src/withSession.ts | 56 -- .../site-middleware/src/withSharedConfig.ts | 82 -- packages/site-preset-styles/src/index.js | 6 +- packages/site/next-env.d.ts | 1 + packages/site/package.json | 1 + packages/site/public/search-data.json | 2 +- packages/site/public/sitemap.xml | 5 + packages/site/src/app/[...slug]/Body.tsx | 34 + packages/site/src/app/[...slug]/View.tsx | 23 + packages/site/src/app/[...slug]/error.tsx | 22 + packages/site/src/app/[...slug]/layout.tsx | 57 ++ packages/site/src/app/[...slug]/page.tsx | 48 + packages/site/src/app/error.tsx | 29 + packages/site/src/app/favicon.ico | Bin 0 -> 15662 bytes packages/site/src/app/fonts.ts | 16 + packages/site/src/app/layout.tsx | 23 + packages/site/src/app/not-found.tsx | 18 + packages/site/src/pages/[...route].tsx | 33 - packages/site/src/pages/_app.tsx | 68 -- packages/site/src/pages/_document.tsx | 8 - .../site/src/pages/api/content/preview.ts | 26 - packages/site/src/pages/index.tsx | 21 - packages/site/src/types/mosaic.ts | 25 - packages/site/tsconfig.json | 14 +- packages/store/package.json | 2 +- packages/store/src/StoreContext.ts | 6 + packages/store/src/StoreProvider.tsx | 21 + packages/store/src/__tests__/store.test.ts | 212 +--- .../store/src/__tests__/test-utils/utils.tsx | 26 - .../store/src/__tests__/useAppHeader.test.ts | 158 --- .../src/__tests__/useBreadcrumbs.test.ts | 43 - .../store/src/__tests__/useColorMode.test.ts | 27 +- .../store/src/__tests__/useFooter.test.ts | 65 -- .../src/__tests__/useImageComponent.test.ts | 27 + .../store/src/__tests__/useLayout.test.ts | 25 - .../src/__tests__/useLinkComponent.test.ts | 27 + packages/store/src/__tests__/useMeta.test.ts | 36 - packages/store/src/__tests__/useRoute.test.ts | 25 - .../src/__tests__/useSearchIndex.test.ts | 87 -- packages/store/src/__tests__/useStore.test.ts | 29 + .../src/__tests__/useStoreActions.test.ts | 36 - .../src/__tests__/useTableOfContents.test.ts | 33 - packages/store/src/__tests__/utils/utils.tsx | 15 + packages/store/src/index.ts | 19 +- packages/store/src/store.ts | 139 +-- packages/store/src/types/breadcrumbs.ts | 8 - packages/store/src/types/index.ts | 2 - packages/store/src/types/layout.ts | 7 - packages/store/src/types/navigation.ts | 4 - packages/store/src/types/route.ts | 7 - packages/store/src/types/sharedConfig.ts | 4 - packages/store/src/types/sidebar.ts | 8 - packages/store/src/types/tableOfContents.ts | 8 - packages/store/src/useAppHeader.ts | 46 - packages/store/src/useBreadcrumbs.ts | 11 - packages/store/src/useColorMode.ts | 17 +- packages/store/src/useFooter.ts | 10 - packages/store/src/useImageComponent.ts | 7 + packages/store/src/useLayout.ts | 9 - packages/store/src/useLinkComponent.ts | 7 + packages/store/src/useMeta.ts | 17 - packages/store/src/useNavigation.ts | 10 - packages/store/src/useRoute.ts | 9 - packages/store/src/useSearchIndex.ts | 17 - packages/store/src/useSidebar.ts | 23 - packages/store/src/useStore.ts | 16 + packages/store/src/useStoreActions.ts | 2 - packages/store/src/useTableOfContents.ts | 8 - yarn.lock | 375 ++++++- 242 files changed, 2971 insertions(+), 6727 deletions(-) delete mode 100644 packages/components/src/FormattedContent.tsx delete mode 100644 packages/components/src/ImageProvider.ts delete mode 100644 packages/components/src/LinkProvider.ts create mode 100644 packages/content-editor-plugin/src/LazyEditor.tsx create mode 100644 packages/content-editor-plugin/src/components/ContentPreview.tsx delete mode 100644 packages/layouts/src/LayoutConfigProvider/index.tsx delete mode 100644 packages/layouts/src/LayoutProvider.tsx delete mode 100644 packages/layouts/src/hooks/useIsLoading.ts delete mode 100644 packages/layouts/src/layouts/PythonDoc/index.tsx delete mode 100644 packages/layouts/src/layouts/PythonDoc/styles.css.ts delete mode 100644 packages/layouts/src/layouts/TypeDoc/ExportsSidebar/index.tsx delete mode 100644 packages/layouts/src/layouts/TypeDoc/ExportsSidebar/styles.css.ts delete mode 100644 packages/layouts/src/layouts/TypeDoc/icons.css delete mode 100644 packages/layouts/src/layouts/TypeDoc/icons.png delete mode 100644 packages/layouts/src/layouts/TypeDoc/icons@2x.png delete mode 100644 packages/layouts/src/layouts/TypeDoc/index.tsx delete mode 100644 packages/layouts/src/layouts/TypeDoc/style.css delete mode 100644 packages/layouts/src/layouts/TypeDoc/styles.css.ts delete mode 100644 packages/layouts/src/layouts/TypeDoc/widgets.png delete mode 100644 packages/layouts/src/layouts/TypeDoc/widgets@2x.png create mode 100644 packages/loaders/README.md create mode 100644 packages/loaders/package.json create mode 100644 packages/loaders/scripts/bundle.mjs create mode 100644 packages/loaders/src/index.ts create mode 100644 packages/loaders/src/types/index.ts rename packages/{site-middleware => loaders}/tsconfig.json (100%) create mode 100644 packages/mdx-components/README.md create mode 100644 packages/mdx-components/package.json create mode 100644 packages/mdx-components/src/BlockQuote/index.css.ts create mode 100644 packages/mdx-components/src/BlockQuote/index.tsx create mode 100644 packages/mdx-components/src/Heading/AnchorHeading.css.ts create mode 100644 packages/mdx-components/src/Heading/AnchorHeading.tsx create mode 100644 packages/mdx-components/src/Heading/__tests__/Heading.test.tsx create mode 100644 packages/mdx-components/src/Heading/__tests__/index.test.tsx create mode 100644 packages/mdx-components/src/Heading/index.tsx create mode 100644 packages/mdx-components/src/InlineCode.tsx create mode 100644 packages/mdx-components/src/Link.tsx create mode 100644 packages/mdx-components/src/Table.tsx create mode 100644 packages/mdx-components/src/Tbody.tsx create mode 100644 packages/mdx-components/src/Td.tsx create mode 100644 packages/mdx-components/src/Th.tsx create mode 100644 packages/mdx-components/src/Thead.tsx create mode 100644 packages/mdx-components/src/ThematicBreak/index.css.ts create mode 100644 packages/mdx-components/src/ThematicBreak/index.tsx create mode 100644 packages/mdx-components/src/Tr.tsx create mode 100644 packages/mdx-components/src/components.ts create mode 100644 packages/mdx-components/src/index.tsx create mode 100644 packages/mdx-components/src/markdownElements.tsx create mode 100644 packages/mdx-components/src/typography.tsx create mode 100644 packages/mdx-components/src/withMarkdownSpacing/index.tsx create mode 100644 packages/mdx-components/src/withMarkdownSpacing/styles.css.ts create mode 100644 packages/mdx-components/tsconfig.json create mode 100644 packages/schemas/src/ActiveEnvSchema.ts create mode 100644 packages/site-components-next/package.json create mode 100644 packages/site-components-next/src/AppHeader/index.tsx create mode 100644 packages/site-components-next/src/Breadcrumbs/index.tsx create mode 100644 packages/site-components-next/src/DocPaginator/index.tsx create mode 100644 packages/site-components-next/src/EditionFilterView/index.tsx create mode 100644 packages/site-components-next/src/Footer/index.tsx create mode 100644 packages/site-components-next/src/MDXContent/index.tsx create mode 100644 packages/site-components-next/src/SearchInput/index.tsx create mode 100644 packages/site-components-next/src/Sidebar/index.tsx create mode 100644 packages/site-components-next/src/TOC/index.tsx create mode 100644 packages/site-components-next/src/actions/compile.ts create mode 100644 packages/site-components-next/src/actions/preview.ts create mode 100644 packages/site-components-next/src/index.ts create mode 100644 packages/site-components-next/src/mdx/elements.ts create mode 100644 packages/site-components-next/src/mdx/index.tsx create mode 100644 packages/site-components-next/tsconfig.json delete mode 100644 packages/site-components/src/AppHeader/withAppHeaderAdapter.tsx delete mode 100644 packages/site-components/src/BaseUrlProvider.tsx delete mode 100644 packages/site-components/src/Body.tsx delete mode 100644 packages/site-components/src/Breadcrumbs/withBreadcrumbsAdapter.tsx delete mode 100644 packages/site-components/src/DocPaginator/withNavigationAdapter.tsx delete mode 100644 packages/site-components/src/Document.tsx delete mode 100644 packages/site-components/src/Footer/withFooterAdapter.tsx delete mode 100644 packages/site-components/src/Home/__tests__/index.test.tsx delete mode 100644 packages/site-components/src/Home/index.tsx delete mode 100644 packages/site-components/src/Home/styles.css.ts delete mode 100644 packages/site-components/src/Metadata.tsx delete mode 100644 packages/site-components/src/SearchInput/useSearchData.ts create mode 100644 packages/site-components/src/SessionProvider.tsx delete mode 100644 packages/site-components/src/TableOfContents/withTableOfContentsAdapter.tsx create mode 100644 packages/site-components/src/ThemeProvider.tsx delete mode 100644 packages/site-components/src/__tests__/BaseUrlProvider.test.tsx delete mode 100644 packages/site-middleware/CHANGELOG.md delete mode 100644 packages/site-middleware/README.md delete mode 100644 packages/site-middleware/package.json delete mode 100644 packages/site-middleware/src/MiddlewareError.ts delete mode 100644 packages/site-middleware/src/__tests__/compileMdx.test.ts delete mode 100644 packages/site-middleware/src/__tests__/withMDXContent.test.ts delete mode 100644 packages/site-middleware/src/__tests__/withSearchIndex.test.ts delete mode 100644 packages/site-middleware/src/__tests__/withSharedConfig.test.ts delete mode 100644 packages/site-middleware/src/compileMdx.ts delete mode 100644 packages/site-middleware/src/createMiddlewareRunner.ts delete mode 100644 packages/site-middleware/src/index.ts delete mode 100644 packages/site-middleware/src/loaders/__tests__/createS3Loader.test.ts delete mode 100644 packages/site-middleware/src/loaders/__tests__/getS3Config.test.ts delete mode 100644 packages/site-middleware/src/loaders/__tests__/loadLocalFile.test.ts delete mode 100644 packages/site-middleware/src/loaders/createS3Loader.ts delete mode 100644 packages/site-middleware/src/loaders/getSnapshotFileConfig.ts delete mode 100644 packages/site-middleware/src/loaders/getSnapshotS3Config.ts delete mode 100644 packages/site-middleware/src/loaders/index.ts delete mode 100644 packages/site-middleware/src/loaders/loadLocalFile.ts delete mode 100644 packages/site-middleware/src/middlewarePresets.ts delete mode 100644 packages/site-middleware/src/plugins/codeBlocks.ts delete mode 100644 packages/site-middleware/src/withMDXContent.ts delete mode 100644 packages/site-middleware/src/withMosaicMode.ts delete mode 100644 packages/site-middleware/src/withSearchIndex.ts delete mode 100644 packages/site-middleware/src/withSession.ts delete mode 100644 packages/site-middleware/src/withSharedConfig.ts create mode 100644 packages/site/src/app/[...slug]/Body.tsx create mode 100644 packages/site/src/app/[...slug]/View.tsx create mode 100644 packages/site/src/app/[...slug]/error.tsx create mode 100644 packages/site/src/app/[...slug]/layout.tsx create mode 100644 packages/site/src/app/[...slug]/page.tsx create mode 100644 packages/site/src/app/error.tsx create mode 100644 packages/site/src/app/favicon.ico create mode 100644 packages/site/src/app/fonts.ts create mode 100644 packages/site/src/app/layout.tsx create mode 100644 packages/site/src/app/not-found.tsx delete mode 100755 packages/site/src/pages/[...route].tsx delete mode 100755 packages/site/src/pages/_app.tsx delete mode 100644 packages/site/src/pages/_document.tsx delete mode 100644 packages/site/src/pages/api/content/preview.ts delete mode 100644 packages/site/src/pages/index.tsx delete mode 100644 packages/site/src/types/mosaic.ts create mode 100644 packages/store/src/StoreContext.ts create mode 100644 packages/store/src/StoreProvider.tsx delete mode 100644 packages/store/src/__tests__/test-utils/utils.tsx delete mode 100644 packages/store/src/__tests__/useAppHeader.test.ts delete mode 100644 packages/store/src/__tests__/useBreadcrumbs.test.ts delete mode 100644 packages/store/src/__tests__/useFooter.test.ts create mode 100644 packages/store/src/__tests__/useImageComponent.test.ts delete mode 100644 packages/store/src/__tests__/useLayout.test.ts create mode 100644 packages/store/src/__tests__/useLinkComponent.test.ts delete mode 100644 packages/store/src/__tests__/useMeta.test.ts delete mode 100644 packages/store/src/__tests__/useRoute.test.ts delete mode 100644 packages/store/src/__tests__/useSearchIndex.test.ts create mode 100644 packages/store/src/__tests__/useStore.test.ts delete mode 100644 packages/store/src/__tests__/useStoreActions.test.ts delete mode 100644 packages/store/src/__tests__/useTableOfContents.test.ts create mode 100644 packages/store/src/__tests__/utils/utils.tsx delete mode 100644 packages/store/src/types/layout.ts delete mode 100644 packages/store/src/types/route.ts delete mode 100644 packages/store/src/useAppHeader.ts delete mode 100644 packages/store/src/useBreadcrumbs.ts delete mode 100644 packages/store/src/useFooter.ts create mode 100644 packages/store/src/useImageComponent.ts delete mode 100644 packages/store/src/useLayout.ts create mode 100644 packages/store/src/useLinkComponent.ts delete mode 100644 packages/store/src/useMeta.ts delete mode 100644 packages/store/src/useNavigation.ts delete mode 100644 packages/store/src/useRoute.ts delete mode 100644 packages/store/src/useSearchIndex.ts delete mode 100644 packages/store/src/useSidebar.ts create mode 100644 packages/store/src/useStore.ts delete mode 100644 packages/store/src/useStoreActions.ts delete mode 100644 packages/store/src/useTableOfContents.ts diff --git a/.prettierignore b/.prettierignore index 425feed8..00661863 100644 --- a/.prettierignore +++ b/.prettierignore @@ -11,6 +11,7 @@ LICENSE *.png *.hbs *.jpg +*.ico **/build **/dist diff --git a/packages/components-labs/src/index.ts b/packages/components-labs/src/index.ts index a9b2953f..78668024 100644 --- a/packages/components-labs/src/index.ts +++ b/packages/components-labs/src/index.ts @@ -1,3 +1,5 @@ +'use client'; + import { withMarkdownSpacing } from '@jpmorganchase/mosaic-components'; import { Diagram } from './Diagram'; import { Sitemap } from './Sitemap'; diff --git a/packages/components/src/EditionFilterView/index.tsx b/packages/components/src/EditionFilterView/index.tsx index 49015741..8e1ce677 100644 --- a/packages/components/src/EditionFilterView/index.tsx +++ b/packages/components/src/EditionFilterView/index.tsx @@ -1,10 +1,9 @@ -import React from 'react'; +import { ReactNode, FC } from 'react'; import classnames from 'clsx'; import { FilterResultCount, FilterView } from '../FilterView'; import { FilterDropdown, FilterSortDropdown } from '../FilterToolbar'; import { EditionTileLink } from '../EditionTileLink'; -import { FormattedContent } from '../FormattedContent'; import styles from './styles.css'; export const createCustomFilter = (view, filters) => @@ -38,7 +37,7 @@ export type Edition = { group?: string; link: string; publicationDate: string; - formattedDescription?: string; + formattedDescription?: ReactNode; title?: string; }; @@ -60,11 +59,7 @@ export type EditionFilterViewProps = { export const DefaultEditionFilterViewRenderer: EditionFilterViewRenderer = (item, itemIndex) => ( {item.formattedDescription} - ) : null - } + description={item.formattedDescription ? item.formattedDescription : null} eyebrow={item.eyebrow} image={item.image} key={`editionTile-${itemIndex}`} @@ -72,7 +67,7 @@ export const DefaultEditionFilterViewRenderer: EditionFilterViewRenderer = (item title={item.title} /> ); -export const EditionFilterView: React.FC> = ({ +export const EditionFilterView: FC = ({ className, ItemRenderer = DefaultEditionFilterViewRenderer, view, diff --git a/packages/components/src/EditionTileLink/index.tsx b/packages/components/src/EditionTileLink/index.tsx index 8307dba0..2b7f6849 100644 --- a/packages/components/src/EditionTileLink/index.tsx +++ b/packages/components/src/EditionTileLink/index.tsx @@ -1,9 +1,9 @@ import React, { FC, ReactNode } from 'react'; +import { useImageComponent } from '@jpmorganchase/mosaic-store'; import { LinkBase } from '../LinkBase'; import { LinkText } from '../LinkText'; import { TileBase, useTileState } from '../TileBase'; -import { useImageComponent } from '../ImageProvider'; import { useBreakpoint } from '../useBreakpoint'; import styles, { imageRecipe, tileImageRecipe } from './styles.css'; diff --git a/packages/components/src/Feature/Feature.tsx b/packages/components/src/Feature/Feature.tsx index 4305510b..78096b81 100644 --- a/packages/components/src/Feature/Feature.tsx +++ b/packages/components/src/Feature/Feature.tsx @@ -1,9 +1,9 @@ import React from 'react'; import classnames from 'clsx'; import { feature } from '@jpmorganchase/mosaic-theme'; +import { useImageComponent } from '@jpmorganchase/mosaic-store'; import styles from './styles.css'; -import { useImageComponent } from '../ImageProvider'; export type FeatureClassesType = { content?: string; diff --git a/packages/components/src/FormattedContent.tsx b/packages/components/src/FormattedContent.tsx deleted file mode 100644 index ecd02a32..00000000 --- a/packages/components/src/FormattedContent.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import React from 'react'; -import ReactMarkdown, { Components } from 'react-markdown'; - -import { getMarkdownElements } from './Markdown/markdownElements'; - -type SupportedComponents = Pick< - Components, - 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'em' | 'strong' | 'ul' | 'ol' | 'li' -> & { - listItem: SupportedComponents['li']; - emphasis: SupportedComponents['em']; -}; - -type FormattedContentProps = { - className?: string; - children: string; - components?: SupportedComponents; -}; - -const { - h1: H1, - h2: H2, - h3: H3, - h4: H4, - h5: H5, - h6: H6, - ol: Ol, - ul: Ul, - li: ListItem, - em: Emphasis, - p: P, - strong: Strong -} = getMarkdownElements(); - -const renderers: SupportedComponents = { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - h1: ({ node, ...props }) =>

, - // eslint-disable-next-line @typescript-eslint/no-unused-vars - h2: ({ node, ...props }) =>

, - // eslint-disable-next-line @typescript-eslint/no-unused-vars - h3: ({ node, ...props }) =>

, - // eslint-disable-next-line @typescript-eslint/no-unused-vars - h4: ({ node, ...props }) =>

, - // eslint-disable-next-line @typescript-eslint/no-unused-vars - h5: ({ node, ...props }) =>

, - // eslint-disable-next-line @typescript-eslint/no-unused-vars - h6: ({ node, ...props }) =>
, - // eslint-disable-next-line @typescript-eslint/no-unused-vars - p: ({ node, children, ...props }) =>

{children}

, - // eslint-disable-next-line @typescript-eslint/no-unused-vars - emphasis: ({ node, children, ...props }) => {children}, - // eslint-disable-next-line @typescript-eslint/no-unused-vars - strong: ({ node, children, ...props }) => {children}, - // eslint-disable-next-line @typescript-eslint/no-unused-vars - ul: ({ node, children, ...props }) =>
    {children}
, - // eslint-disable-next-line @typescript-eslint/no-unused-vars - ol: ({ node, children, ...props }) =>
    {children}
, - // eslint-disable-next-line @typescript-eslint/no-unused-vars - listItem: ({ node, children, ...props }) => {children} -}; - -export const FormattedContent: React.FC> = ({ - children, - components = {}, - ...rest -}) => ( - - {children} - -); diff --git a/packages/components/src/Hero/index.tsx b/packages/components/src/Hero/index.tsx index d9a33ecb..72b88dd6 100644 --- a/packages/components/src/Hero/index.tsx +++ b/packages/components/src/Hero/index.tsx @@ -1,10 +1,10 @@ -import React, { ReactElement } from 'react'; +import React, { ReactElement, ReactNode } from 'react'; import classnames from 'clsx'; +import { useImageComponent } from '@jpmorganchase/mosaic-store'; import { LinkButton } from '../LinkButton'; import styles from './styles.css'; import { Eyebrow, H1, P2 } from '../Typography'; -import { useImageComponent } from '../ImageProvider'; const formatTitle = (fullWidth: boolean, title: string, key: string): React.ReactNode => { const lines = title ? title.split('
') : []; @@ -30,6 +30,8 @@ export interface HeroLink { */ export interface HeroProps { backgroundImage?: string; + /** Optional children to use instead of links */ + children?: ReactNode; /** Additional class name for root class override. */ className?: string; /** Prop to provide a datestamp. */ @@ -42,7 +44,7 @@ export interface HeroProps { /** Image to be displayed. */ image?: string; /** The title of the Hero. */ - title: string | ReactElement; + title?: string | ReactElement; links?: HeroLink[]; /** Defines the variant. * @defaultValue `regular` @@ -95,8 +97,9 @@ function HeroImageContainer({ isFramed, heroBackgroundImage, heroImage, isFullWi * /> * ``` */ -export const Hero: React.FC> = ({ +export const Hero: React.FC = ({ backgroundImage, + children, className, datestamp, datestampLabel = 'Last Modified', @@ -139,7 +142,7 @@ export const Hero: React.FC> = ({ ) : null} {description ? {description} : null} {links ? ( -
+
{links.map((link, linkIndex) => { const isLastLink = linkIndex === links.length - 1; return ( @@ -157,7 +160,9 @@ export const Hero: React.FC> = ({ ); })}
- ) : null} + ) : ( +
{children}
+ )}
{image ? ( = createContext('img'); - -export const useImageComponent = (): ElementType => useContext(ImageContext); - -export const ImageProvider = ImageContext.Provider; diff --git a/packages/components/src/Impact/index.tsx b/packages/components/src/Impact/index.tsx index 32860c32..45b0c090 100644 --- a/packages/components/src/Impact/index.tsx +++ b/packages/components/src/Impact/index.tsx @@ -1,8 +1,8 @@ import React from 'react'; import classnames from 'clsx'; +import { useImageComponent } from '@jpmorganchase/mosaic-store'; import styles from './styles.css'; -import { useImageComponent } from '../ImageProvider'; export interface ImpactProps { /** Additional class name for root class override */ diff --git a/packages/components/src/LinkBase/index.tsx b/packages/components/src/LinkBase/index.tsx index 9929eeb1..add60b29 100644 --- a/packages/components/src/LinkBase/index.tsx +++ b/packages/components/src/LinkBase/index.tsx @@ -1,6 +1,6 @@ import React, { forwardRef, Ref } from 'react'; +import { useLinkComponent } from '@jpmorganchase/mosaic-store'; -import { useLinkComponent } from '../LinkProvider'; import { hasProtocol } from '../utils/hasProtocol'; export interface LinkBaseProps extends Omit, 'ref'> { diff --git a/packages/components/src/LinkProvider.ts b/packages/components/src/LinkProvider.ts deleted file mode 100644 index eff307d0..00000000 --- a/packages/components/src/LinkProvider.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { createContext, Context, ElementType, useContext } from 'react'; - -export type LinkProviderValue = ElementType; - -const LinkContext: Context = createContext('a'); - -export const useLinkComponent = (): ElementType => useContext(LinkContext); - -export const LinkProvider = LinkContext.Provider; diff --git a/packages/components/src/SecondaryNavbar/index.tsx b/packages/components/src/SecondaryNavbar/index.tsx index 356f7840..3f99cac3 100644 --- a/packages/components/src/SecondaryNavbar/index.tsx +++ b/packages/components/src/SecondaryNavbar/index.tsx @@ -3,7 +3,7 @@ import classnames from 'clsx'; import { findLastIndex } from 'lodash-es'; import { config } from '@jpmorganchase/mosaic-theme'; -import { TabsBase, TabsMenu, TabMenuItemType, TabsLinkItem } from '../TabsBase'; +import { TabsBase, TabsMenu, TabsLinkItem } from '../TabsBase'; import { canUseDOM } from '../canUseDOM'; import { StickyHeader } from '../StickyHeader'; import styles from './styles.css'; @@ -22,7 +22,7 @@ export interface SecondaryNavbarProps { const getSelectedTabIndex = (items: TabsMenu, itemPath: string): number => findLastIndex(items, (item): boolean => { - if (item.type === TabMenuItemType.MENU) { + if (item.type === 'menu') { return !!item.links.find(link => itemPath.startsWith(link.link)); } return itemPath.startsWith((item as TabsLinkItem).link); diff --git a/packages/components/src/Story/index.tsx b/packages/components/src/Story/index.tsx index 62f25b77..c581ef75 100644 --- a/packages/components/src/Story/index.tsx +++ b/packages/components/src/Story/index.tsx @@ -1,8 +1,8 @@ import React from 'react'; import classnames from 'clsx'; +import { useImageComponent } from '@jpmorganchase/mosaic-store'; import { LinkButton } from '../LinkButton'; -import { useImageComponent } from '../ImageProvider'; import styles from './styles.css'; export interface StoryProps { diff --git a/packages/components/src/Tabs/index.tsx b/packages/components/src/Tabs/index.tsx index 3e1df1d4..d23f06d6 100644 --- a/packages/components/src/Tabs/index.tsx +++ b/packages/components/src/Tabs/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import classnames from 'clsx'; -import { TabsBase, TabsButtonItem, TabMenuItemType } from '../TabsBase'; +import { TabsBase, TabsButtonItem } from '../TabsBase'; import { ViewStack } from '../ViewStack'; import type { ViewProps } from '../ViewStack/View'; import styles from './styles.css'; @@ -36,7 +36,7 @@ export const Tabs: React.FC = ({ className, children }) => { const tabButtonItem: ExtendedTabsButtonItem = { title: tabElement.props.id || `Tab ${childIndex}`, defaultView: Object.prototype.hasOwnProperty.call(child.props, 'defaultView'), - type: TabMenuItemType.BUTTON, + type: 'button', onSelect: (_event, sourceItem) => setCurrentViewId(sourceItem) }; return tabButtonItem; diff --git a/packages/components/src/TabsBase/TabsBase.tsx b/packages/components/src/TabsBase/TabsBase.tsx index bed2448b..ee09ed93 100644 --- a/packages/components/src/TabsBase/TabsBase.tsx +++ b/packages/components/src/TabsBase/TabsBase.tsx @@ -6,11 +6,8 @@ import { TabsLink, TabsLinkItem } from './TabsLink'; import { TabsMenuButton, TabsMenuButtonItem } from './TabsMenuButton'; import styles from './styles.css'; -export enum TabMenuItemType { - MENU = 'menu', - LINK = 'link', - BUTTON = 'button' -} +export type TabMenuItemType = 'menu' | 'link' | 'button'; + export interface TabsBaseProps { /** Additional class name for root class override */ className?: string; @@ -24,10 +21,10 @@ export type TabsMenu = (TabsLinkItem | TabsButtonItem | TabsMenuButtonItem)[]; function TabsItem({ children, item }) { const { type } = item; - if (type === TabMenuItemType.MENU) { + if (type === 'menu') { return {children}; } - if (type === TabMenuItemType.BUTTON) { + if (type === 'button') { return {children}; } return {children}; diff --git a/packages/components/src/TabsBase/TabsButton.tsx b/packages/components/src/TabsBase/TabsButton.tsx index b8408a0f..f09bb145 100644 --- a/packages/components/src/TabsBase/TabsButton.tsx +++ b/packages/components/src/TabsBase/TabsButton.tsx @@ -1,6 +1,5 @@ import React, { FC } from 'react'; -import { TabMenuItemType } from './index'; import styles from './styles.css'; export interface TabsButtonItem { @@ -13,7 +12,7 @@ export interface TabsButtonItem { /** Title of Tab */ title: string; /** Type of Tab */ - type: TabMenuItemType.BUTTON; + type: 'button'; } interface TabButtonProps { diff --git a/packages/components/src/TabsBase/TabsLink.tsx b/packages/components/src/TabsBase/TabsLink.tsx index 098467b2..f52ea92b 100644 --- a/packages/components/src/TabsBase/TabsLink.tsx +++ b/packages/components/src/TabsBase/TabsLink.tsx @@ -1,7 +1,6 @@ import React, { FC } from 'react'; import { Link } from '../Link'; -import { TabMenuItemType } from './index'; import styles from './styles.css'; export interface TabsLinkItem { @@ -14,7 +13,7 @@ export interface TabsLinkItem { /** Title of Tab */ title?: string; /** Type of Tab */ - type: TabMenuItemType.LINK; + type: 'link'; } export interface TabsLinkProps { diff --git a/packages/components/src/TabsBase/TabsMenuButton.tsx b/packages/components/src/TabsBase/TabsMenuButton.tsx index 81630996..56fbe58c 100644 --- a/packages/components/src/TabsBase/TabsMenuButton.tsx +++ b/packages/components/src/TabsBase/TabsMenuButton.tsx @@ -4,7 +4,6 @@ import classnames from 'clsx'; import styles from './tabsMenuButton.css'; import type { TabsLinkItem } from './TabsLink'; -import type { TabMenuItemType } from './index'; import { Icon } from '../Icon'; export interface TabsMenuButtonItem { @@ -19,7 +18,7 @@ export interface TabsMenuButtonItem { /** Title of Tab */ title: string; /** Type of Tab */ - type: TabMenuItemType.MENU; + type: 'menu'; } export interface TabsMenuButtonProps { diff --git a/packages/components/src/ThemeProvider.tsx b/packages/components/src/ThemeProvider.tsx index 9aa07d18..1f821fed 100644 --- a/packages/components/src/ThemeProvider.tsx +++ b/packages/components/src/ThemeProvider.tsx @@ -31,7 +31,7 @@ export function ThemeProvider({ children }: ThemeProviderProps) { const hasHydrated = useHasHydrated(); - const colorMode = useColorMode(); + const { colorMode } = useColorMode(); const ssrClassname = hasHydrated ? undefined : ssrClassName; diff --git a/packages/components/src/TileContent/index.tsx b/packages/components/src/TileContent/index.tsx index f9dc10c4..97ffc82d 100644 --- a/packages/components/src/TileContent/index.tsx +++ b/packages/components/src/TileContent/index.tsx @@ -1,5 +1,6 @@ import React, { FC, forwardRef, ReactNode, Ref } from 'react'; import classnames from 'clsx'; +import { useImageComponent } from '@jpmorganchase/mosaic-store'; import { useTileState } from '../TileBase'; import styles, { @@ -11,7 +12,6 @@ import styles, { titleRecipe } from './styles.css'; import { Size } from '../common/types'; -import { useImageComponent } from '../ImageProvider'; export type TileContentClassesType = { action?: string; diff --git a/packages/components/src/Typography/index.tsx b/packages/components/src/Typography/index.tsx index 99cdf295..87850597 100644 --- a/packages/components/src/Typography/index.tsx +++ b/packages/components/src/Typography/index.tsx @@ -11,6 +11,7 @@ import { } from '@jpmorganchase/mosaic-theme'; import { withStyledTypography } from './withStyledTypography'; +export { withStyledTypography } from './withStyledTypography'; export const Action1 = withStyledTypography(action({ variant: 'action1' })); export const Action2 = withStyledTypography(action({ variant: 'action2' })); diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx index 1e3bcb74..df70691f 100644 --- a/packages/components/src/index.tsx +++ b/packages/components/src/index.tsx @@ -1,3 +1,5 @@ +'use client'; + export * from './Accordion'; export * from './AudioPlayer'; export * from './Button'; @@ -12,21 +14,18 @@ export * from './Feature'; export * from './Features'; export * from './FilterToolbar'; export * from './FilterView'; -export * from './FormattedContent'; export * from './Grid'; export * from './GridBase'; export * from './HelpLinks'; export * from './Hero'; export * from './Icon'; export * from './IsomorphicSuspense'; -export * from './ImageProvider'; export * from './Impact'; export * from './Impacts'; export * from './Label'; export * from './Link'; export * from './LinkBase'; export * from './LinkButton'; -export * from './LinkProvider'; export * from './Links'; export * from './LinkText'; export * from './List'; diff --git a/packages/content-editor-plugin/package.json b/packages/content-editor-plugin/package.json index eb6c68af..0e5a2a94 100644 --- a/packages/content-editor-plugin/package.json +++ b/packages/content-editor-plugin/package.json @@ -55,14 +55,16 @@ "@lexical/utils": "^0.17.1", "@lexical/markdown": "^0.17.1", "@vanilla-extract/css": "^1.6.0", + "client-only": "^0.0.1", "clsx": "^2.0.0", "gray-matter": "^4.0.3", "lexical": "^0.17.1", "react-split": "^2.0.14", "lodash-es": "^4.17.21", "md5": "*", + "use-debounce": "^10.0.0", "yup": "^0.32.9", - "zustand": "^4.1.1" + "zustand": "^4.5.5" }, "peerDependencies": { "@types/react": "^18.3.12", diff --git a/packages/content-editor-plugin/src/LazyEditor.tsx b/packages/content-editor-plugin/src/LazyEditor.tsx new file mode 100644 index 00000000..545b2270 --- /dev/null +++ b/packages/content-editor-plugin/src/LazyEditor.tsx @@ -0,0 +1,11 @@ +import { Suspense, lazy } from 'react'; + +import type { EditorProps } from './components/Editor'; + +const LazyEditor = lazy(() => import('./components/Editor')); + +export const Editor = (props: EditorProps) => ( + Loading Editor...}> + + +); diff --git a/packages/content-editor-plugin/src/components/ContentPreview.tsx b/packages/content-editor-plugin/src/components/ContentPreview.tsx new file mode 100644 index 00000000..b765c4a2 --- /dev/null +++ b/packages/content-editor-plugin/src/components/ContentPreview.tsx @@ -0,0 +1,7 @@ +import useContentEditor from '../store/index'; + +export const ContentPreview = ({ children }) => { + const { previewContent } = useContentEditor(); + + return previewContent || children; +}; diff --git a/packages/content-editor-plugin/src/components/Editor.tsx b/packages/content-editor-plugin/src/components/Editor.tsx index dfdd7895..9d9f00ea 100644 --- a/packages/content-editor-plugin/src/components/Editor.tsx +++ b/packages/content-editor-plugin/src/components/Editor.tsx @@ -1,6 +1,5 @@ -import { ComponentType, FC, useRef, useState } from 'react'; +import { FC, ReactNode, useRef, useState } from 'react'; import classnames from 'clsx'; -import matter from 'gray-matter'; import { LexicalComposer } from '@lexical/react/LexicalComposer'; import { ListPlugin } from '@lexical/react/LexicalListPlugin'; import { TablePlugin } from '@lexical/react/LexicalTablePlugin'; @@ -13,8 +12,8 @@ import { $convertFromMarkdownString } from '@lexical/markdown'; import transformers from '../transformers'; import ContentEditor from './ContentEditor'; import { nodes } from '../nodes'; -import { useEditorUser, usePreviewContent } from '../store'; -import { PreviewPlugin } from '../plugins/PreviewPlugin'; +import { useEditorUser } from '../store'; +import { PreviewPlugin, PreviewPluginProps } from '../plugins/PreviewPlugin'; import styles from './Editor.css'; import Toolbar from './Toolbar/Toolbar'; import theme from '../theme'; @@ -27,6 +26,7 @@ import { ScrollableSection } from './ScrollableSection/ScrollableSection'; import HorizontalRulePlugin from '../plugins/HorizontalRulePlugin'; import { FloatingToolbarPlugin } from '../plugins/FloatingToolbarPlugin'; import { TableActionMenuPlugin } from '../plugins/TableActionMenuPlugin'; +import { ContentPreview } from './ContentPreview'; function onError(error: Error) { console.error(error); @@ -39,18 +39,11 @@ const initialConfig = { theme }; -interface PreviewComponentProps { - source: any; - meta?: any; - components: any; -} - -interface EditorProps extends PreviewComponentProps { +export interface EditorProps extends PreviewPluginProps { content: string; - PreviewComponent?: ComponentType; - previewUrl?: string; persistUrl?: string; user?: any; + children: ReactNode; } const gutter = () => { @@ -59,20 +52,10 @@ const gutter = () => { return gutter; }; -const Editor: FC = ({ - components, - content, - persistUrl, - PreviewComponent, - previewUrl, - source, - user -}) => { - const previewContent = usePreviewContent() || source; +const Editor: FC = ({ content, persistUrl, user, meta, children, onChange }) => { const { setUser } = useEditorUser(); const [focused, setFocused] = useState(false); const containerRef = useRef(null); - const { data: meta, content: markdown } = matter(content); const handleEditorFocus = () => { setFocused(true); @@ -87,7 +70,7 @@ const Editor: FC = ({ $convertFromMarkdownString(markdown, transformers) + editorState: () => $convertFromMarkdownString(content, transformers) }} >
@@ -119,9 +102,7 @@ const Editor: FC = ({ - {PreviewComponent && ( - - )} + {children} @@ -129,7 +110,7 @@ const Editor: FC = ({ - {previewUrl ? : null} + {onChange ? : null} diff --git a/packages/content-editor-plugin/src/index.ts b/packages/content-editor-plugin/src/index.ts index 566ff0ce..f56bbbaf 100644 --- a/packages/content-editor-plugin/src/index.ts +++ b/packages/content-editor-plugin/src/index.ts @@ -1,5 +1,7 @@ -import Editor from './components/Editor'; +import 'client-only'; + +import { Editor } from './LazyEditor'; import { EditorControls } from './components/EditorControls'; -import { default as useContentEditor, usePageState } from './store'; +import useContentEditor, { usePageState } from './store'; export { Editor, EditorControls, usePageState, useContentEditor }; diff --git a/packages/content-editor-plugin/src/plugins/PreviewPlugin.tsx b/packages/content-editor-plugin/src/plugins/PreviewPlugin.tsx index f4ea4ec8..67aa80ba 100644 --- a/packages/content-editor-plugin/src/plugins/PreviewPlugin.tsx +++ b/packages/content-editor-plugin/src/plugins/PreviewPlugin.tsx @@ -1,70 +1,55 @@ +import React from 'react'; import { $convertToMarkdownString } from '@lexical/markdown'; import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin'; import type { EditorState } from 'lexical'; -import { debounce } from 'lodash-es'; +import { useDebouncedCallback } from 'use-debounce'; import transformers from '../transformers'; -import { useContentEditor } from '../index'; +import useContentEditor from '../store/index'; -interface SourceResponse { - source: { compiledSource: string; frontmatter: any; scope: any }; +export interface SourceResponse { + result?: React.ReactNode; error?: string; - exception?: string; } -async function fetchSource(previewUrl: string, markdown: string) { - const response = await fetch(previewUrl, { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ mode: 'markdown', text: markdown }) - }); - - const data = (await response.json()) as SourceResponse; - return data; +export interface PreviewPluginProps { + onChange: ({ + source, + data + }: { + source: string; + data: Record; + }) => Promise; + meta: Record; } function usePreview(onContentChange: (markdown: string) => void) { - const handleContentChange = debounce(onContentChange, 250, { maxWait: 500 }); - - const onChange = (editorState: EditorState) => { + const onChange = useDebouncedCallback((editorState: EditorState) => { editorState.read(() => { const markdown = $convertToMarkdownString(transformers); if (markdown) { - handleContentChange(markdown); + onContentChange(markdown); } }); - }; + }, 400); return { onChange }; } -interface PreviewPluginProps { - previewUrl: string; -} - -export const PreviewPlugin = ({ previewUrl }: PreviewPluginProps) => { - const { setErrorMessage, setPreviewContent } = useContentEditor(); - +export const PreviewPlugin = ({ onChange: onChangeProp, meta }: PreviewPluginProps) => { + const { setPreviewContent, setErrorMessage } = useContentEditor(); const handleContentChange = async (content: string) => { - try { - if (content) { - const data = await fetchSource(previewUrl, content); - if (!data.error && data?.source) { - setPreviewContent(data.source); - } else { - setErrorMessage(`${data.error?.toUpperCase()}: ${data?.exception}`); - } - } - } catch (e) { - if (e instanceof Error) { - setErrorMessage(`MDX Error: ${e.message}`); + if (content) { + const previewResponse = await onChangeProp({ source: content, data: meta }); + + if (previewResponse.error) { + setErrorMessage(`MDX Error: ${previewResponse.error}`); + } else { + setPreviewContent(previewResponse.result); } } }; const { onChange } = usePreview(handleContentChange); - return ; }; diff --git a/packages/layouts/src/LayoutBase/index.tsx b/packages/layouts/src/LayoutBase/index.tsx index 618fff95..3bc33ac3 100644 --- a/packages/layouts/src/LayoutBase/index.tsx +++ b/packages/layouts/src/LayoutBase/index.tsx @@ -1,9 +1,5 @@ import React from 'react'; -import { Spinner } from '@salt-ds/core'; import classnames from 'clsx'; - -import { useIsLoading } from '../hooks/useIsLoading'; -import { Fade } from '../Fade'; import styles from './styles.css'; export const LayoutBase = ({ @@ -14,21 +10,9 @@ export const LayoutBase = ({ Header?: React.ReactNode; className?: string; children?: React.ReactNode; -}) => { - // Add a delay before showing loading state, so loading screen doesn't appear if page loads quickly - const isLoading = useIsLoading({ loadingDelay: 50 }); - return ( -
-
{Header}
-
- -
-
- -
- - {children} -
-
- ); -}; +}) => ( +
+
{Header}
+
{children}
+
+); diff --git a/packages/layouts/src/LayoutColumns/index.tsx b/packages/layouts/src/LayoutColumns/index.tsx index db94a008..efbc6b01 100644 --- a/packages/layouts/src/LayoutColumns/index.tsx +++ b/packages/layouts/src/LayoutColumns/index.tsx @@ -1,20 +1,9 @@ import React from 'react'; -import { Drawer, Sidebar, TriggerElementProps } from '@jpmorganchase/mosaic-site-components'; -import { Button, Icon, useBreakpoint } from '@jpmorganchase/mosaic-components'; +import { Sidebar } from '@jpmorganchase/mosaic-site-components'; import styles from './styles.css'; -const TriggerElement: React.FC = ({ open, onClick: handleClick }) => ( - -); - export const LayoutColumns = ({ PrimarySidebar, SecondarySidebar, @@ -25,26 +14,15 @@ export const LayoutColumns = ({ SecondarySidebar?: React.ReactNode; Footer?: React.ReactNode; children?: React.ReactNode; -}) => { - const breakpoint = useBreakpoint(); - const showDrawer = breakpoint === 'mobile' || breakpoint == 'tablet'; - return ( -
-
- {showDrawer && PrimarySidebar && ( - - {PrimarySidebar} - - )} - {!showDrawer && PrimarySidebar && {PrimarySidebar}} -
-
- {children} - {Footer && Footer} -
-
- {SecondarySidebar && !showDrawer ? {SecondarySidebar} : null} -
+}) => ( +
+
{PrimarySidebar && {PrimarySidebar}}
+
+ {children} + {Footer && Footer} +
+
+ {SecondarySidebar ? {SecondarySidebar} : null}
- ); -}; +
+); diff --git a/packages/layouts/src/LayoutConfigProvider/index.tsx b/packages/layouts/src/LayoutConfigProvider/index.tsx deleted file mode 100644 index 3edfd4cc..00000000 --- a/packages/layouts/src/LayoutConfigProvider/index.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React, { ReactNode } from 'react'; - -let LayoutContext; - -export function LayoutConfigProvider({ - children, - config -}: { - children?: ReactNode; - config: unknown; -}) { - LayoutContext = LayoutContext || React.createContext(config); - return children; -} - -export function useLayoutConfig() { - if (!LayoutContext) { - throw new Error('Trying to use `useLayoutConfig` outside of a `LayoutConfigContext`.'); - } - - return React.useContext(LayoutContext); -} diff --git a/packages/layouts/src/LayoutFullWidth/index.tsx b/packages/layouts/src/LayoutFullWidth/index.tsx index 8186b360..42967a90 100644 --- a/packages/layouts/src/LayoutFullWidth/index.tsx +++ b/packages/layouts/src/LayoutFullWidth/index.tsx @@ -4,7 +4,7 @@ import classnames from 'clsx'; import styles from './styles.css'; export interface LayoutFullWidthProps { - Footer?: React.ReactElement; + Footer?: React.ReactNode; children: React.ReactNode; className?: string; } diff --git a/packages/layouts/src/LayoutProvider.tsx b/packages/layouts/src/LayoutProvider.tsx deleted file mode 100644 index e8f1b19b..00000000 --- a/packages/layouts/src/LayoutProvider.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React, { FC, ReactNode } from 'react'; -import { useLayout } from '@jpmorganchase/mosaic-store'; -import { usePageState } from '@jpmorganchase/mosaic-content-editor-plugin'; - -import type { LayoutProps } from './types'; -import * as layouts from './layouts'; - -export type LayoutProviderProps = { - layoutComponents?: { - [name: string]: React.FC | undefined; - }; - LayoutProps?: LayoutProps; - children: ReactNode; - defaultLayout?: string; -}; - -export const LayoutProvider: FC = ({ - children, - layoutComponents, - LayoutProps = {}, - defaultLayout = 'FullWidth' -}) => { - const { layout: layoutInStore = defaultLayout } = useLayout(); - const { pageState } = usePageState(); - const layout = pageState !== 'VIEW' ? 'EditLayout' : layoutInStore; - - let LayoutComponent: FC | undefined = layoutComponents?.[layout] as FC; - if (!LayoutComponent) { - console.error(`Layout ${layout} is not supported, defaulting to ${defaultLayout}`); - LayoutComponent = layouts[defaultLayout]; - } - return LayoutComponent ? ( - {children} - ) : ( - <>children - ); -}; diff --git a/packages/layouts/src/hooks/useIsLoading.ts b/packages/layouts/src/hooks/useIsLoading.ts deleted file mode 100644 index 3f168bca..00000000 --- a/packages/layouts/src/hooks/useIsLoading.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { useState, useEffect } from 'react'; -import { useRouter } from 'next/router'; -import { debounce } from 'lodash-es'; - -// Unexported type from next/dist/shared/lib/mitt.d.ts -declare type Handler = (...evts: any[]) => void; - -export function useIsLoading({ loadingDelay }: { loadingDelay?: number } = {}) { - const router = useRouter(); - const [isLoading, setIsLoading] = useState(false); - - useEffect(() => { - const start = debounce(() => { - setIsLoading(true); - }, loadingDelay); - - const handleRouteChangeStart: Handler = (_url, { shallow }) => { - if (!shallow) { - start(); - } - }; - - const handleRouteChangeDone: Handler = (_url, { shallow }) => { - if (!shallow) { - setIsLoading(false); - } - }; - - router.events.on('routeChangeStart', handleRouteChangeStart); - router.events.on('routeChangeError', handleRouteChangeDone); - router.events.on('routeChangeComplete', handleRouteChangeDone); - - return () => { - router.events.off('routeChangeStart', handleRouteChangeStart); - router.events.off('routeChangeError', handleRouteChangeDone); - router.events.off('routeChangeComplete', handleRouteChangeDone); - }; - }, [router]); - - return isLoading; -} diff --git a/packages/layouts/src/index.ts b/packages/layouts/src/index.ts index f30ff3ca..399b7413 100644 --- a/packages/layouts/src/index.ts +++ b/packages/layouts/src/index.ts @@ -1,8 +1,5 @@ export * from './LayoutBase'; export * from './LayoutColumns'; export * from './LayoutFullWidth'; -export * from './hooks/useIsLoading'; -export * from './LayoutConfigProvider'; -export * from './LayoutProvider'; export * as layouts from './layouts'; diff --git a/packages/layouts/src/layouts/Detail/DetailContentOnly.tsx b/packages/layouts/src/layouts/Detail/DetailContentOnly.tsx index ca5a25c7..cb4fbbbf 100644 --- a/packages/layouts/src/layouts/Detail/DetailContentOnly.tsx +++ b/packages/layouts/src/layouts/Detail/DetailContentOnly.tsx @@ -1,15 +1,8 @@ import React from 'react'; -import { AppHeader, Breadcrumbs, Footer } from '@jpmorganchase/mosaic-site-components'; -import { LayoutBase } from '../../LayoutBase'; import { LayoutFullWidth } from '../../LayoutFullWidth'; import type { LayoutProps } from '../../types'; -export const DetailContentOnly: React.FC = ({ FooterProps, children }) => ( - }> - }> - - {children} - - +export const DetailContentOnly: React.FC = ({ children, FooterComponent }) => ( + {children} ); diff --git a/packages/layouts/src/layouts/Detail/DetailHighlight.tsx b/packages/layouts/src/layouts/Detail/DetailHighlight.tsx index 78af1eec..41774fac 100644 --- a/packages/layouts/src/layouts/Detail/DetailHighlight.tsx +++ b/packages/layouts/src/layouts/Detail/DetailHighlight.tsx @@ -1,24 +1,18 @@ import React from 'react'; -import { - AppHeader, - Breadcrumbs, - Footer, - TableOfContents -} from '@jpmorganchase/mosaic-site-components'; -import { LayoutBase } from '../../LayoutBase'; import { LayoutColumns } from '../../LayoutColumns'; import type { LayoutProps } from '../../types'; -export const DetailHighlight: React.FC = ({ FooterProps, children }) => ( - }> - } - Footer={