From 49a91fd40e41c75ba1f92129870fdce1658fd885 Mon Sep 17 00:00:00 2001 From: Shahed Nasser Date: Fri, 11 Oct 2024 10:10:00 +0300 Subject: [PATCH] docs: redesigned navigation (#9525) Redesign navigation bar to reflect new design and allow for dropdowns Closes DX-943 --- www/apps/api-reference/app/layout.tsx | 1 + www/apps/api-reference/config/index.ts | 10 +- www/apps/api-reference/providers/main-nav.tsx | 7 +- www/apps/api-reference/providers/search.tsx | 4 +- www/apps/book/config/index.ts | 9 +- www/apps/book/config/sidebar.tsx | 13 +- www/apps/book/providers/main-nav.tsx | 6 - www/apps/book/providers/search.tsx | 4 +- www/apps/resources/config/index.ts | 13 +- www/apps/resources/providers/main-nav.tsx | 9 +- www/apps/resources/providers/search.tsx | 4 +- www/apps/ui/src/config/docs.tsx | 7 +- www/apps/ui/src/config/site.ts | 7 + www/apps/ui/src/providers/main-nav.tsx | 3 - www/apps/ui/src/providers/search.tsx | 4 +- www/apps/ui/src/styles/globals.css | 6 + www/apps/user-guide/config/index.ts | 13 +- www/apps/user-guide/providers/main-nav.tsx | 3 - www/apps/user-guide/providers/search.tsx | 7 +- .../src/components/Breadcrumbs/index.tsx | 140 +++++--- .../components/MainNav/Breadcrumb/index.tsx | 115 ------- .../components/MainNav/ColorMode/index.tsx | 24 -- .../MainNav/DesktopMenu/ThemeMenu/index.tsx | 73 +++++ .../components/MainNav/DesktopMenu/index.tsx | 91 ++++++ .../src/components/MainNav/Divider/index.tsx | 10 - .../src/components/MainNav/EditDate/index.tsx | 2 +- .../components/MainNav/HelpButton/index.tsx | 76 ----- .../MainNav/Items/Dropdown/index.tsx | 55 ++++ .../components/MainNav/Items/Link/index.tsx | 25 ++ .../src/components/MainNav/Items/index.tsx | 35 ++ .../MainNav/MobileMenu/Main/index.tsx | 59 ++++ .../MainNav/MobileMenu/SubMenu/index.tsx | 42 +++ .../components/MainNav/MobileMenu/index.tsx | 77 +++++ .../MainNav/NavigationDropdown/Icon/index.tsx | 21 -- .../NavigationDropdown/Menu/Item/index.tsx | 50 --- .../MainNav/NavigationDropdown/Menu/index.tsx | 36 --- .../NavigationDropdown/Selected/index.tsx | 49 --- .../MainNav/NavigationDropdown/index.tsx | 55 ---- .../MainNav/SidebarOpener/index.tsx | 24 -- .../docs-ui/src/components/MainNav/index.tsx | 60 ++-- .../src/components/Menu/Action/index.tsx | 10 +- .../src/components/Menu/Item/index.tsx | 14 +- .../docs-ui/src/components/Menu/index.tsx | 12 +- .../src/components/MobileNavigation/index.tsx | 32 -- .../components/Search/ModalOpener/index.tsx | 45 +-- .../src/components/Sidebar/Top/index.tsx | 5 +- .../docs-ui/src/components/Sidebar/index.tsx | 8 +- www/packages/docs-ui/src/constants.tsx | 300 ++++++------------ .../docs-ui/src/layouts/main-content.tsx | 3 +- www/packages/docs-ui/src/layouts/root.tsx | 3 +- www/packages/docs-ui/src/layouts/tight.tsx | 4 +- www/packages/docs-ui/src/layouts/wide.tsx | 4 +- .../docs-ui/src/providers/MainNav/index.tsx | 87 +++-- .../src/providers/SiteConifg/index.tsx | 7 + .../src/utils/get-mobile-sidebar-items.ts | 25 -- .../docs-ui/src/utils/get-navbar-items.ts | 38 ++- www/packages/docs-ui/src/utils/index.ts | 1 - www/packages/tailwind/base.tailwind.config.js | 18 +- www/packages/types/src/config.ts | 9 + www/packages/types/src/index.ts | 1 + www/packages/types/src/menu.ts | 13 +- www/packages/types/src/navigation-dropdown.ts | 4 - www/packages/types/src/navigation.ts | 20 ++ 63 files changed, 934 insertions(+), 978 deletions(-) delete mode 100644 www/packages/docs-ui/src/components/MainNav/Breadcrumb/index.tsx delete mode 100644 www/packages/docs-ui/src/components/MainNav/ColorMode/index.tsx create mode 100644 www/packages/docs-ui/src/components/MainNav/DesktopMenu/ThemeMenu/index.tsx create mode 100644 www/packages/docs-ui/src/components/MainNav/DesktopMenu/index.tsx delete mode 100644 www/packages/docs-ui/src/components/MainNav/Divider/index.tsx delete mode 100644 www/packages/docs-ui/src/components/MainNav/HelpButton/index.tsx create mode 100644 www/packages/docs-ui/src/components/MainNav/Items/Dropdown/index.tsx create mode 100644 www/packages/docs-ui/src/components/MainNav/Items/Link/index.tsx create mode 100644 www/packages/docs-ui/src/components/MainNav/Items/index.tsx create mode 100644 www/packages/docs-ui/src/components/MainNav/MobileMenu/Main/index.tsx create mode 100644 www/packages/docs-ui/src/components/MainNav/MobileMenu/SubMenu/index.tsx create mode 100644 www/packages/docs-ui/src/components/MainNav/MobileMenu/index.tsx delete mode 100644 www/packages/docs-ui/src/components/MainNav/NavigationDropdown/Icon/index.tsx delete mode 100644 www/packages/docs-ui/src/components/MainNav/NavigationDropdown/Menu/Item/index.tsx delete mode 100644 www/packages/docs-ui/src/components/MainNav/NavigationDropdown/Menu/index.tsx delete mode 100644 www/packages/docs-ui/src/components/MainNav/NavigationDropdown/Selected/index.tsx delete mode 100644 www/packages/docs-ui/src/components/MainNav/NavigationDropdown/index.tsx delete mode 100644 www/packages/docs-ui/src/components/MainNav/SidebarOpener/index.tsx delete mode 100644 www/packages/docs-ui/src/components/MobileNavigation/index.tsx delete mode 100644 www/packages/docs-ui/src/utils/get-mobile-sidebar-items.ts create mode 100644 www/packages/types/src/navigation.ts diff --git a/www/apps/api-reference/app/layout.tsx b/www/apps/api-reference/app/layout.tsx index 0cb2f90475..1aaad14356 100644 --- a/www/apps/api-reference/app/layout.tsx +++ b/www/apps/api-reference/app/layout.tsx @@ -34,6 +34,7 @@ export default function RootLayout({ bodyClassName={clsx(inter.variable, robotoMono.variable)} showToc={false} showBanner={false} + showBreadcrumbs={false} > {children} diff --git a/www/apps/api-reference/config/index.ts b/www/apps/api-reference/config/index.ts index e66ba06f65..b4a875caf6 100644 --- a/www/apps/api-reference/config/index.ts +++ b/www/apps/api-reference/config/index.ts @@ -1,5 +1,4 @@ import { DocsConfig } from "types" -import { getMobileSidebarItems } from "docs-ui" const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000" @@ -16,9 +15,10 @@ export const config: DocsConfig = { loaded: true, }, ], - mobile: getMobileSidebarItems({ - baseUrl, - version: "v2", - }), + mobile: [], + }, + project: { + title: "API Reference", + key: "api-reference", }, } diff --git a/www/apps/api-reference/providers/main-nav.tsx b/www/apps/api-reference/providers/main-nav.tsx index afe9e60ba4..8b44883e5d 100644 --- a/www/apps/api-reference/providers/main-nav.tsx +++ b/www/apps/api-reference/providers/main-nav.tsx @@ -8,8 +8,6 @@ import { } from "docs-ui" import { useMemo } from "react" import { config } from "../config" -import { usePathname } from "next/navigation" -import basePathUrl from "../utils/base-path-url" type MainNavProviderProps = { children?: React.ReactNode @@ -17,15 +15,12 @@ type MainNavProviderProps = { export const MainNavProvider = ({ children }: MainNavProviderProps) => { const { isBrowser } = useIsBrowser() - const pathname = usePathname() const navigationDropdownItems = useMemo( () => getNavDropdownItems({ basePath: config.baseUrl, - activePath: basePathUrl(pathname), - version: "v2", }), - [pathname] + [] ) const reportLink = useMemo( diff --git a/www/apps/api-reference/providers/search.tsx b/www/apps/api-reference/providers/search.tsx index 9f0cebeb57..6d784e551d 100644 --- a/www/apps/api-reference/providers/search.tsx +++ b/www/apps/api-reference/providers/search.tsx @@ -3,7 +3,7 @@ import { usePageLoading, SearchProvider as UiSearchProvider, - searchFiltersV2, + searchFilters, AiAssistantIcon, AiAssistantProvider, } from "docs-ui" @@ -51,7 +51,7 @@ const SearchProvider = ({ children }: SearchProviderProps) => { checkInternalPattern: new RegExp( `^${config.baseUrl}${basePathUrl(`/(admin|store)`)}` ), - filterOptions: searchFiltersV2, + filterOptions: searchFilters, }} commands={[ { diff --git a/www/apps/book/config/index.ts b/www/apps/book/config/index.ts index 7633e17214..8535ed7e77 100644 --- a/www/apps/book/config/index.ts +++ b/www/apps/book/config/index.ts @@ -7,5 +7,12 @@ export const config: DocsConfig = { titleSuffix: "Medusa v2 Docs", baseUrl, basePath: process.env.NEXT_PUBLIC_BASE_PATH, - sidebar: sidebarConfig(baseUrl), + sidebar: sidebarConfig, + project: { + title: "Documentation", + key: "book", + }, + breadcrumbOptions: { + showCategories: false, + }, } diff --git a/www/apps/book/config/sidebar.tsx b/www/apps/book/config/sidebar.tsx index c43accc36b..392a601721 100644 --- a/www/apps/book/config/sidebar.tsx +++ b/www/apps/book/config/sidebar.tsx @@ -1,4 +1,4 @@ -import { Badge, getMobileSidebarItems } from "docs-ui" +import { Badge } from "docs-ui" import type { SidebarConfig, SidebarItem } from "@/types" import { sidebar } from "../sidebar.mjs" @@ -20,12 +20,7 @@ const normalizeSidebarItems = (items: SidebarItem[]) => return item }) -export const sidebarConfig = (baseUrl: string): SidebarConfig => { - return { - default: normalizeSidebarItems(sidebar), - mobile: getMobileSidebarItems({ - baseUrl, - version: "v2", - }), - } +export const sidebarConfig: SidebarConfig = { + default: normalizeSidebarItems(sidebar), + mobile: [], } diff --git a/www/apps/book/providers/main-nav.tsx b/www/apps/book/providers/main-nav.tsx index b756862a15..2c7f92eddd 100644 --- a/www/apps/book/providers/main-nav.tsx +++ b/www/apps/book/providers/main-nav.tsx @@ -8,7 +8,6 @@ import { } from "docs-ui" import { useMemo } from "react" import { config } from "../config" -import { basePathUrl } from "../utils/base-path-url" import { usePathname } from "next/navigation" import { generatedEditDates } from "../generated/edit-dates.mjs" @@ -23,8 +22,6 @@ export const MainNavProvider = ({ children }: MainNavProviderProps) => { () => getNavDropdownItems({ basePath: config.baseUrl, - activePath: basePathUrl(), - version: "v2", }), [] ) @@ -51,9 +48,6 @@ export const MainNavProvider = ({ children }: MainNavProviderProps) => { navItems={navigationDropdownItems} reportIssueLink={reportLink} editDate={editDate} - breadcrumbOptions={{ - showCategories: false, - }} > {children} diff --git a/www/apps/book/providers/search.tsx b/www/apps/book/providers/search.tsx index 2836ae0c9a..723a1ae09e 100644 --- a/www/apps/book/providers/search.tsx +++ b/www/apps/book/providers/search.tsx @@ -4,7 +4,7 @@ import { AiAssistantIcon, AiAssistantProvider, SearchProvider as UiSearchProvider, - searchFiltersV2, + searchFilters, } from "docs-ui" import { config } from "../config" @@ -50,7 +50,7 @@ const SearchProvider = ({ children }: SearchProviderProps) => { checkInternalPattern: new RegExp( `^${config.baseUrl}/v2/([^(resources)])*` ), - filterOptions: searchFiltersV2, + filterOptions: searchFilters, }} commands={[ { diff --git a/www/apps/resources/config/index.ts b/www/apps/resources/config/index.ts index d989fae0ec..caf5a1006f 100644 --- a/www/apps/resources/config/index.ts +++ b/www/apps/resources/config/index.ts @@ -1,5 +1,4 @@ import { DocsConfig, SidebarItem } from "types" -import { getMobileSidebarItems } from "docs-ui" import { generatedSidebar } from "../generated/sidebar.mjs" const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000" @@ -10,9 +9,13 @@ export const config: DocsConfig = { basePath: process.env.NEXT_PUBLIC_BASE_PATH, sidebar: { default: generatedSidebar as SidebarItem[], - mobile: getMobileSidebarItems({ - baseUrl, - version: "v2", - }), + mobile: [], + }, + project: { + title: "Development Resources", + key: "resources", + }, + breadcrumbOptions: { + showCategories: true, }, } diff --git a/www/apps/resources/providers/main-nav.tsx b/www/apps/resources/providers/main-nav.tsx index 2a356f4c5f..2c7f92eddd 100644 --- a/www/apps/resources/providers/main-nav.tsx +++ b/www/apps/resources/providers/main-nav.tsx @@ -8,7 +8,6 @@ import { } from "docs-ui" import { useMemo } from "react" import { config } from "../config" -import { basePathUrl } from "../utils/base-path-url" import { usePathname } from "next/navigation" import { generatedEditDates } from "../generated/edit-dates.mjs" @@ -23,14 +22,8 @@ export const MainNavProvider = ({ children }: MainNavProviderProps) => { () => getNavDropdownItems({ basePath: config.baseUrl, - activePath: basePathUrl( - pathname.startsWith("/commerce-modules") - ? "/commerce-modules" - : undefined - ), - version: "v2", }), - [pathname] + [] ) const reportLink = useMemo( diff --git a/www/apps/resources/providers/search.tsx b/www/apps/resources/providers/search.tsx index a936ef6f11..b092132610 100644 --- a/www/apps/resources/providers/search.tsx +++ b/www/apps/resources/providers/search.tsx @@ -4,7 +4,7 @@ import { AiAssistantIcon, AiAssistantProvider, SearchProvider as UiSearchProvider, - searchFiltersV2, + searchFilters, } from "docs-ui" import { config } from "../config" @@ -39,7 +39,7 @@ const SearchProvider = ({ children }: SearchProviderProps) => { }, ], checkInternalPattern: new RegExp(`^${config.baseUrl}/v2/resources/.*`), - filterOptions: searchFiltersV2, + filterOptions: searchFilters, }} commands={[ { diff --git a/www/apps/ui/src/config/docs.tsx b/www/apps/ui/src/config/docs.tsx index 162796d23a..2357d134d9 100644 --- a/www/apps/ui/src/config/docs.tsx +++ b/www/apps/ui/src/config/docs.tsx @@ -1,6 +1,4 @@ -import { getMobileSidebarItems } from "docs-ui" import { SidebarSectionItems } from "types" -import { siteConfig } from "./site" type DocsConfig = { sidebar: SidebarSectionItems @@ -359,9 +357,6 @@ export const docsConfig: DocsConfig = { ], }, ], - mobile: getMobileSidebarItems({ - baseUrl: siteConfig.baseUrl, - version: "v1", - }), + mobile: [], }, } diff --git a/www/apps/ui/src/config/site.ts b/www/apps/ui/src/config/site.ts index e07645fcda..081ecc616b 100644 --- a/www/apps/ui/src/config/site.ts +++ b/www/apps/ui/src/config/site.ts @@ -19,4 +19,11 @@ export const siteConfig: SiteConfig = { default: [], mobile: [], }, + project: { + title: "Medusa UI", + key: "ui", + }, + breadcrumbOptions: { + showCategories: true, + }, } diff --git a/www/apps/ui/src/providers/main-nav.tsx b/www/apps/ui/src/providers/main-nav.tsx index 81162494c3..84784d6a2c 100644 --- a/www/apps/ui/src/providers/main-nav.tsx +++ b/www/apps/ui/src/providers/main-nav.tsx @@ -8,7 +8,6 @@ import { } from "docs-ui" import { useMemo } from "react" import { siteConfig } from "../config/site" -import { basePathUrl } from "../lib/base-path-url" type MainNavProviderProps = { children?: React.ReactNode @@ -20,8 +19,6 @@ export const MainNavProvider = ({ children }: MainNavProviderProps) => { () => getNavDropdownItems({ basePath: siteConfig.baseUrl, - activePath: basePathUrl(), - version: "v1", }), [] ) diff --git a/www/apps/ui/src/providers/search.tsx b/www/apps/ui/src/providers/search.tsx index f6c574ab68..ca67dd9c22 100644 --- a/www/apps/ui/src/providers/search.tsx +++ b/www/apps/ui/src/providers/search.tsx @@ -4,7 +4,7 @@ import { AiAssistantIcon, AiAssistantProvider, SearchProvider as UiSearchProvider, - searchFiltersV1, + searchFilters, } from "docs-ui" import { absoluteUrl } from "../lib/absolute-url" @@ -34,7 +34,7 @@ const SearchProvider = ({ children }: SearchProviderProps) => { }, ], checkInternalPattern: new RegExp(`^${absoluteUrl()}/ui`), - filterOptions: searchFiltersV1, + filterOptions: searchFilters, }} initialDefaultFilters={["ui"]} commands={[ diff --git a/www/apps/ui/src/styles/globals.css b/www/apps/ui/src/styles/globals.css index 109767840f..dfc59ca786 100644 --- a/www/apps/ui/src/styles/globals.css +++ b/www/apps/ui/src/styles/globals.css @@ -30,6 +30,12 @@ @apply text-ui-fg-subtle; } + /* Hack to hide navbar / toc when some components like prompt are opened. */ + body[data-scroll-locked] .z-20, + body[data-scroll-locked] .z-10 { + z-index: 0 !important; + } + body[data-modal="opened"] { @apply !overflow-hidden text-ui-fg-base; } diff --git a/www/apps/user-guide/config/index.ts b/www/apps/user-guide/config/index.ts index 8d2e6faaf2..5113d4f24b 100644 --- a/www/apps/user-guide/config/index.ts +++ b/www/apps/user-guide/config/index.ts @@ -1,5 +1,4 @@ import { DocsConfig, SidebarItem } from "types" -import { getMobileSidebarItems } from "docs-ui" import { generatedSidebar as sidebar } from "@/generated/sidebar.mjs" const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000" @@ -10,9 +9,13 @@ export const config: DocsConfig = { basePath: process.env.NEXT_PUBLIC_BASE_PATH, sidebar: { default: sidebar as SidebarItem[], - mobile: getMobileSidebarItems({ - baseUrl, - version: "v2", - }), + mobile: [], + }, + project: { + title: "User Guide", + key: "user-guide", + }, + breadcrumbOptions: { + showCategories: true, }, } diff --git a/www/apps/user-guide/providers/main-nav.tsx b/www/apps/user-guide/providers/main-nav.tsx index 264bf9a88b..8b44883e5d 100644 --- a/www/apps/user-guide/providers/main-nav.tsx +++ b/www/apps/user-guide/providers/main-nav.tsx @@ -8,7 +8,6 @@ import { } from "docs-ui" import { useMemo } from "react" import { config } from "../config" -import { basePathUrl } from "../utils/base-path-url" type MainNavProviderProps = { children?: React.ReactNode @@ -20,8 +19,6 @@ export const MainNavProvider = ({ children }: MainNavProviderProps) => { () => getNavDropdownItems({ basePath: config.baseUrl, - activePath: basePathUrl(), - version: "v2", }), [] ) diff --git a/www/apps/user-guide/providers/search.tsx b/www/apps/user-guide/providers/search.tsx index fca080eac7..bf3125ce4b 100644 --- a/www/apps/user-guide/providers/search.tsx +++ b/www/apps/user-guide/providers/search.tsx @@ -4,7 +4,7 @@ import { SearchProvider as UiSearchProvider, AiAssistantIcon, AiAssistantProvider, - searchFiltersV1, + searchFilters, } from "docs-ui" import { config } from "../config" @@ -42,9 +42,10 @@ const SearchProvider = ({ children }: SearchProviderProps) => { }, ], checkInternalPattern: new RegExp(`^${config.baseUrl}/user-guide`), - filterOptions: searchFiltersV1, + filterOptions: searchFilters, }} - initialDefaultFilters={["user-guide"]} + // TODO change later when we have a user guide filter + initialDefaultFilters={["guides"]} commands={[ { name: "ai-assistant", diff --git a/www/packages/docs-ui/src/components/Breadcrumbs/index.tsx b/www/packages/docs-ui/src/components/Breadcrumbs/index.tsx index 83ad81a08f..bdf952ff8a 100644 --- a/www/packages/docs-ui/src/components/Breadcrumbs/index.tsx +++ b/www/packages/docs-ui/src/components/Breadcrumbs/index.tsx @@ -1,29 +1,55 @@ "use client" import React, { useMemo } from "react" -import { CurrentItemsState, useSidebar } from "@/providers" -import { TriangleRightMini } from "@medusajs/icons" -import Link from "next/link" import clsx from "clsx" - -type BreadcrumbItem = Map +import Link from "next/link" +import { SidebarItemLink } from "types" +import { CurrentItemsState, useSidebar, useSiteConfig } from "../../providers" +import { Button } from "../Button" +import { TriangleRightMini } from "@medusajs/icons" export const Breadcrumbs = () => { - const { currentItems } = useSidebar() + const { currentItems, activeItem: sidebarActiveItem } = useSidebar() + const { + config: { breadcrumbOptions, project, baseUrl, basePath }, + } = useSiteConfig() - const getBreadcrumbsOfItem = (item: CurrentItemsState): BreadcrumbItem => { - let tempBreadcrumbItems: BreadcrumbItem = new Map() + const getLinkPath = (item?: SidebarItemLink): string | undefined => { + if (!item) { + return + } + return item.isPathHref ? item.path : `#${item.path}` + } + + const getBreadcrumbsOfItem = ( + item: CurrentItemsState + ): Map => { + let tempBreadcrumbItems: Map = new Map() if (item.previousSidebar) { tempBreadcrumbItems = getBreadcrumbsOfItem(item.previousSidebar) } const parentPath = - item.parentItem?.type === "link" ? item.parentItem.path : undefined + item.parentItem?.type === "link" + ? getLinkPath(item.parentItem) + : (item.parentItem?.type === "category" && + breadcrumbOptions?.showCategories) || + item.parentItem?.type === "sub-category" + ? "#" + : undefined const firstItemPath = - item.default[0].type === "link" ? item.default[0].path : undefined + item.default[0].type === "link" + ? getLinkPath(item.default[0]) + : (item.default[0].type === "category" && + breadcrumbOptions?.showCategories) || + item.default[0].type === "sub-category" + ? "#" + : undefined + + const breadcrumbPath = parentPath || firstItemPath || "/" tempBreadcrumbItems.set( - parentPath || firstItemPath || "/", + breadcrumbPath, item.parentItem?.childSidebarTitle || item.parentItem?.title || "" ) @@ -31,51 +57,65 @@ export const Breadcrumbs = () => { } const breadcrumbItems = useMemo(() => { - const tempBreadcrumbItems: BreadcrumbItem = new Map() - if (!currentItems) { - return tempBreadcrumbItems + const tempBreadcrumbItems: Map = new Map() + tempBreadcrumbItems.set(`${baseUrl}${basePath}`, project.title) + + if (currentItems) { + getBreadcrumbsOfItem(currentItems).forEach((value, key) => + tempBreadcrumbItems.set(key, value) + ) } - tempBreadcrumbItems.set("/", "Home") - - getBreadcrumbsOfItem(currentItems).forEach((value, key) => - tempBreadcrumbItems.set(key, value) - ) + if (sidebarActiveItem) { + if ( + sidebarActiveItem.parentItem && + (sidebarActiveItem.parentItem.type !== "category" || + breadcrumbOptions?.showCategories) + ) { + tempBreadcrumbItems.set( + sidebarActiveItem.parentItem.type === "link" + ? getLinkPath(sidebarActiveItem.parentItem) || "#" + : "#", + sidebarActiveItem.parentItem.title || "" + ) + } + tempBreadcrumbItems.set( + getLinkPath(sidebarActiveItem) || "/", + sidebarActiveItem.title || "" + ) + } return tempBreadcrumbItems - }, [currentItems]) - - const getBreadcrumbItemElms = (): React.ReactNode[] => { - const elms: React.ReactNode[] = [] - breadcrumbItems.forEach((title, path) => { - elms.push( - - {elms.length !== 0 && ( - - )} - - {title} - - - ) - }) - - return elms - } + }, [currentItems, sidebarActiveItem, breadcrumbOptions]) return ( - <> - {breadcrumbItems.size > 0 && ( -
- {...getBreadcrumbItemElms()} -
+
+ > + {Array.from(breadcrumbItems).map(([link, title], index) => ( + + {index > 0 && } + + + ))} +
) } diff --git a/www/packages/docs-ui/src/components/MainNav/Breadcrumb/index.tsx b/www/packages/docs-ui/src/components/MainNav/Breadcrumb/index.tsx deleted file mode 100644 index d2947ddf5a..0000000000 --- a/www/packages/docs-ui/src/components/MainNav/Breadcrumb/index.tsx +++ /dev/null @@ -1,115 +0,0 @@ -"use client" - -import React, { useMemo } from "react" -import { Button, CurrentItemsState, useMainNav, useSidebar } from "../../.." -import clsx from "clsx" -import Link from "next/link" -import { SidebarItemLink } from "types" - -export const MainNavBreadcrumbs = () => { - const { currentItems, activeItem } = useSidebar() - const { - activeItem: mainNavActiveItem, - breadcrumbOptions: { showCategories }, - } = useMainNav() - - const getLinkPath = (item?: SidebarItemLink): string | undefined => { - if (!item) { - return - } - return item.isPathHref ? item.path : `#${item.path}` - } - - const getBreadcrumbsOfItem = ( - item: CurrentItemsState - ): Map => { - let tempBreadcrumbItems: Map = new Map() - if (item.previousSidebar) { - tempBreadcrumbItems = getBreadcrumbsOfItem(item.previousSidebar) - } - - const parentPath = - item.parentItem?.type === "link" - ? getLinkPath(item.parentItem) - : (item.parentItem?.type === "category" && showCategories) || - item.parentItem?.type === "sub-category" - ? "#" - : undefined - const firstItemPath = - item.default[0].type === "link" - ? getLinkPath(item.default[0]) - : (item.default[0].type === "category" && showCategories) || - item.default[0].type === "sub-category" - ? "#" - : undefined - - const breadcrumbPath = parentPath || firstItemPath || "/" - - if (!mainNavActiveItem?.path.endsWith(breadcrumbPath)) { - tempBreadcrumbItems.set( - breadcrumbPath, - item.parentItem?.childSidebarTitle || item.parentItem?.title || "" - ) - } - - return tempBreadcrumbItems - } - - const breadcrumbItems = useMemo(() => { - const tempBreadcrumbItems: Map = new Map() - if (currentItems) { - getBreadcrumbsOfItem(currentItems).forEach((value, key) => - tempBreadcrumbItems.set(key, value) - ) - } - - if (activeItem && !mainNavActiveItem?.path.endsWith(activeItem.path)) { - if ( - activeItem.parentItem && - (activeItem.parentItem.type !== "category" || showCategories) - ) { - tempBreadcrumbItems.set( - activeItem.parentItem.type === "link" - ? getLinkPath(activeItem.parentItem) || "#" - : "#", - activeItem.parentItem.title || "" - ) - } - tempBreadcrumbItems.set( - getLinkPath(activeItem) || "/", - activeItem.title || "" - ) - } - - return tempBreadcrumbItems - }, [currentItems, activeItem]) - - return ( -
- {Array.from(breadcrumbItems).map(([link, title]) => ( - - / - - - ))} -
- ) -} diff --git a/www/packages/docs-ui/src/components/MainNav/ColorMode/index.tsx b/www/packages/docs-ui/src/components/MainNav/ColorMode/index.tsx deleted file mode 100644 index bcdeba74ba..0000000000 --- a/www/packages/docs-ui/src/components/MainNav/ColorMode/index.tsx +++ /dev/null @@ -1,24 +0,0 @@ -"use client" - -import React from "react" -import { useColorMode } from "../../../providers" -import { Button, Tooltip } from "../../.." -import { Moon, Sun } from "@medusajs/icons" -import clsx from "clsx" - -export const MainNavColorMode = () => { - const { colorMode, toggleColorMode } = useColorMode() - - return ( - - - - ) -} diff --git a/www/packages/docs-ui/src/components/MainNav/DesktopMenu/ThemeMenu/index.tsx b/www/packages/docs-ui/src/components/MainNav/DesktopMenu/ThemeMenu/index.tsx new file mode 100644 index 0000000000..78268dbdf2 --- /dev/null +++ b/www/packages/docs-ui/src/components/MainNav/DesktopMenu/ThemeMenu/index.tsx @@ -0,0 +1,73 @@ +"use client" + +import React from "react" +import { useColorMode } from "../../../../providers" +import clsx from "clsx" +import { EllipseMiniSolid } from "@medusajs/icons" + +export const MainNavThemeMenu = () => { + const { colorMode, setColorMode } = useColorMode() + + return ( + <> +
+ Theme +
+
+
setColorMode("light")} + > + + + Light + +
+
+
+
setColorMode("dark")} + > + + + Dark + +
+
+ + ) +} diff --git a/www/packages/docs-ui/src/components/MainNav/DesktopMenu/index.tsx b/www/packages/docs-ui/src/components/MainNav/DesktopMenu/index.tsx new file mode 100644 index 0000000000..1c9eef04d7 --- /dev/null +++ b/www/packages/docs-ui/src/components/MainNav/DesktopMenu/index.tsx @@ -0,0 +1,91 @@ +"use client" + +import { + BarsThree, + QuestionMarkCircle, + SidebarLeft, + TimelineVertical, +} from "@medusajs/icons" +import React, { useRef, useState } from "react" +import { + Button, + getOsShortcut, + Menu, + useClickOutside, + useSidebar, +} from "../../.." +import clsx from "clsx" +import { HouseIcon } from "../../Icons/House" +import { MainNavThemeMenu } from "./ThemeMenu" + +export const MainNavDesktopMenu = () => { + const [isOpen, setIsOpen] = useState(false) + const { setDesktopSidebarOpen } = useSidebar() + const ref = useRef(null) + + useClickOutside({ + elmRef: ref, + onClickOutside: () => setIsOpen(false), + }) + + return ( +
+ + , + title: "Homepage", + link: "https://medusajs.com", + }, + { + type: "link", + icon: , + title: "Changelog", + link: "https://medusajs.com/changelog", + }, + { + type: "link", + icon: , + title: "Troubleshooting", + link: "https://docs.medusajs.com/v2/resources/troubleshooting", + }, + { + type: "divider", + }, + { + type: "action", + title: "Hide Sidebar", + icon: , + shortcut: `${getOsShortcut()}\\`, + action: () => { + setDesktopSidebarOpen((prev) => !prev) + setIsOpen(false) + }, + }, + { + type: "divider", + }, + { + type: "custom", + content: , + }, + ]} + /> +
+ ) +} diff --git a/www/packages/docs-ui/src/components/MainNav/Divider/index.tsx b/www/packages/docs-ui/src/components/MainNav/Divider/index.tsx deleted file mode 100644 index 8ecd2a6cfc..0000000000 --- a/www/packages/docs-ui/src/components/MainNav/Divider/index.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import clsx from "clsx" -import React from "react" - -export const MainNavDivider = () => { - return ( - - ) -} diff --git a/www/packages/docs-ui/src/components/MainNav/EditDate/index.tsx b/www/packages/docs-ui/src/components/MainNav/EditDate/index.tsx index 52ebe7774f..fffc4d27ca 100644 --- a/www/packages/docs-ui/src/components/MainNav/EditDate/index.tsx +++ b/www/packages/docs-ui/src/components/MainNav/EditDate/index.tsx @@ -18,7 +18,7 @@ export const MainNavEditDate = ({ date }: MainNavEditDateProps) => { return ( <> - + Edited {dateMatch.groups.month} {dateObj.getDate()} {dateObj.getFullYear() !== today.getFullYear() ? `, ${dateObj.getFullYear()}` diff --git a/www/packages/docs-ui/src/components/MainNav/HelpButton/index.tsx b/www/packages/docs-ui/src/components/MainNav/HelpButton/index.tsx deleted file mode 100644 index e2988a7d1b..0000000000 --- a/www/packages/docs-ui/src/components/MainNav/HelpButton/index.tsx +++ /dev/null @@ -1,76 +0,0 @@ -"use client" - -import React, { useRef, useState } from "react" -import { Button, Kbd, Tooltip } from "@/components" -import { Bug, Discord, QuestionMark } from "@medusajs/icons" -import { Menu, useClickOutside } from "../../.." -import { MenuItem } from "types" -import clsx from "clsx" -import { GithubIcon } from "../../Icons/Github" - -export const MainNavHelpButton = () => { - const [showMenu, setShowMenu] = useState(false) - const ref = useRef(null) - useClickOutside({ - elmRef: ref, - onClickOutside: () => { - setShowMenu(false) - }, - }) - - const menuItems: MenuItem[] = [ - { - type: "link", - title: "Create a GitHub Issue", - link: "https://github.com/medusajs/medusa/issues/new/choose", - icon: , - }, - { - type: "link", - title: "Get Support on Discord", - link: "https://discord.gg/medusajs", - icon: , - }, - { - type: "divider", - }, - { - type: "link", - title: "Troubleshooting Guides", - link: "https://docs.medusajs.com/v2/resources/troubleshooting", - icon: , - }, - ] - - return ( -
- - Need help? - ? - - } - place="bottom" - hidden={showMenu} - > - - -
- -
-
- ) -} diff --git a/www/packages/docs-ui/src/components/MainNav/Items/Dropdown/index.tsx b/www/packages/docs-ui/src/components/MainNav/Items/Dropdown/index.tsx new file mode 100644 index 0000000000..dde6072016 --- /dev/null +++ b/www/packages/docs-ui/src/components/MainNav/Items/Dropdown/index.tsx @@ -0,0 +1,55 @@ +"use client" + +import { TriangleDownMini } from "@medusajs/icons" +import clsx from "clsx" +import React, { useRef, useState } from "react" +import { NavigationItemDropdown } from "types" +import { Menu, useClickOutside } from "../../../.." + +type MainNavItemDropdownProps = { + item: NavigationItemDropdown + isActive: boolean +} + +export const MainNavItemDropdown = ({ + item, + isActive, +}: MainNavItemDropdownProps) => { + const [isOpen, setIsOpen] = useState(false) + const ref = useRef(null) + + useClickOutside({ + elmRef: ref, + onClickOutside: () => setIsOpen(false), + }) + + return ( +
+
setIsOpen((prev) => !prev)} + > + {item.title} + +
+ setIsOpen(false)} + /> +
+ ) +} diff --git a/www/packages/docs-ui/src/components/MainNav/Items/Link/index.tsx b/www/packages/docs-ui/src/components/MainNav/Items/Link/index.tsx new file mode 100644 index 0000000000..4933423ed8 --- /dev/null +++ b/www/packages/docs-ui/src/components/MainNav/Items/Link/index.tsx @@ -0,0 +1,25 @@ +"use client" + +import React from "react" +import { NavigationItemLink } from "types" +import { LinkButton } from "../../../.." +import clsx from "clsx" + +type MainNavItemLinkProps = { + item: NavigationItemLink + isActive: boolean +} + +export const MainNavItemLink = ({ item, isActive }: MainNavItemLinkProps) => { + return ( + + {item.title} + + ) +} diff --git a/www/packages/docs-ui/src/components/MainNav/Items/index.tsx b/www/packages/docs-ui/src/components/MainNav/Items/index.tsx new file mode 100644 index 0000000000..e1b8da42de --- /dev/null +++ b/www/packages/docs-ui/src/components/MainNav/Items/index.tsx @@ -0,0 +1,35 @@ +"use client" + +import React from "react" +import { useMainNav } from "../../.." +import clsx from "clsx" +import { MainNavItemLink } from "./Link" +import { MainNavItemDropdown } from "./Dropdown" + +export const MainNavItems = () => { + const { navItems, activeItemIndex } = useMainNav() + + return ( +
    + {navItems.map((item, index) => { + const isActive = index === activeItemIndex + + return ( +
  • + {item.type === "link" && ( + + )} + {item.type === "dropdown" && ( + + )} +
    • + ) + })} +
+ ) +} diff --git a/www/packages/docs-ui/src/components/MainNav/MobileMenu/Main/index.tsx b/www/packages/docs-ui/src/components/MainNav/MobileMenu/Main/index.tsx new file mode 100644 index 0000000000..49ca53d773 --- /dev/null +++ b/www/packages/docs-ui/src/components/MainNav/MobileMenu/Main/index.tsx @@ -0,0 +1,59 @@ +"use client" + +import React from "react" +import { useMainNav } from "../../../../providers" +import Link from "next/link" +import { TriangleRightMini } from "@medusajs/icons" +import clsx from "clsx" +import { SelectedMenu } from ".." + +type MainNavMobileMainMenu = { + setSelectedMenu: (menu: SelectedMenu) => void +} + +export const MainNavMobileMainMenu = ({ + setSelectedMenu, +}: MainNavMobileMainMenu) => { + const { navItems } = useMainNav() + + return ( +
+ + Menu + +
    + {navItems.map((item, index) => ( +
  • { + if (item.type !== "dropdown") { + return + } + + setSelectedMenu({ + title: item.title, + menu: item.children, + }) + }} + > + {item.type === "link" && ( + + {item.title} + + )} + {item.type === "dropdown" && ( + <> + {item.title} + + + )} +
    • + ))} +
+
+ ) +} diff --git a/www/packages/docs-ui/src/components/MainNav/MobileMenu/SubMenu/index.tsx b/www/packages/docs-ui/src/components/MainNav/MobileMenu/SubMenu/index.tsx new file mode 100644 index 0000000000..fad4c39460 --- /dev/null +++ b/www/packages/docs-ui/src/components/MainNav/MobileMenu/SubMenu/index.tsx @@ -0,0 +1,42 @@ +"use client" + +import clsx from "clsx" +import Link from "next/link" +import React, { useMemo } from "react" +import { MenuItem, MenuItemLink } from "types" + +type MainNavMobileSubMenuProps = { + menu: MenuItem[] + title: string +} + +export const MainNavMobileSubMenu = ({ + menu, + title, +}: MainNavMobileSubMenuProps) => { + const filteredItems: MenuItemLink[] = useMemo(() => { + return menu.filter((item) => item.type === "link") as MenuItemLink[] + }, [menu]) + return ( +
+ + {title} + +
    + {filteredItems.map((item, index) => ( +
  • + + {item.title} + +
    • + ))} +
+
+ ) +} diff --git a/www/packages/docs-ui/src/components/MainNav/MobileMenu/index.tsx b/www/packages/docs-ui/src/components/MainNav/MobileMenu/index.tsx new file mode 100644 index 0000000000..f4cfe5c8f8 --- /dev/null +++ b/www/packages/docs-ui/src/components/MainNav/MobileMenu/index.tsx @@ -0,0 +1,77 @@ +"use client" + +import React, { useRef, useState } from "react" +import { Button } from "../../Button" +import { ArrowUturnLeft, BarsThree, XMark } from "@medusajs/icons" +import clsx from "clsx" +import { MenuItem } from "types" +import { CSSTransition, SwitchTransition } from "react-transition-group" +import { MainNavMobileMainMenu } from "./Main" +import { MainNavMobileSubMenu } from "./SubMenu" + +export type SelectedMenu = { + title: string + menu: MenuItem[] +} + +export const MainNavMobileMenu = () => { + const [isOpen, setIsOpen] = useState(false) + const [selectedMenu, setSelectedMenu] = useState() + const ref = useRef(null) + + return ( +
+ +
+ + +
+ {!selectedMenu && ( + + )} + {selectedMenu && ( + <> +
setSelectedMenu(undefined)} + > + + Back +
+ + + )} +
+ + +
+
+ ) +} diff --git a/www/packages/docs-ui/src/components/MainNav/NavigationDropdown/Icon/index.tsx b/www/packages/docs-ui/src/components/MainNav/NavigationDropdown/Icon/index.tsx deleted file mode 100644 index 4820d0b20b..0000000000 --- a/www/packages/docs-ui/src/components/MainNav/NavigationDropdown/Icon/index.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from "react" -import { BorderedIcon } from "@/components" -import { IconProps } from "@medusajs/icons/dist/types" - -export type MainNavigationDropdownIconProps = { - icon: React.FC - inDropdown?: boolean -} - -export const MainNavigationDropdownIcon = ({ - icon, - inDropdown = false, -}: MainNavigationDropdownIconProps) => { - return ( - - ) -} diff --git a/www/packages/docs-ui/src/components/MainNav/NavigationDropdown/Menu/Item/index.tsx b/www/packages/docs-ui/src/components/MainNav/NavigationDropdown/Menu/Item/index.tsx deleted file mode 100644 index 10e0085428..0000000000 --- a/www/packages/docs-ui/src/components/MainNav/NavigationDropdown/Menu/Item/index.tsx +++ /dev/null @@ -1,50 +0,0 @@ -"use client" - -import React from "react" -import { NavigationDropdownItem } from "types" -import Link from "next/link" -import clsx from "clsx" -import { EllipseMiniSolid } from "@medusajs/icons" -import { MainNavigationDropdownIcon } from "../../Icon" -import { DottedSeparator } from "../../../.." - -export type MainNavigationDropdownMenuItemProps = { - item: NavigationDropdownItem - onSelect: () => void -} - -export const MainNavigationDropdownMenuItem = ({ - item, - onSelect, -}: MainNavigationDropdownMenuItemProps) => { - switch (item.type) { - case "divider": - return - case "link": - return ( - -
  • - - - - - {item.title} -
    • - - ) - } -} diff --git a/www/packages/docs-ui/src/components/MainNav/NavigationDropdown/Menu/index.tsx b/www/packages/docs-ui/src/components/MainNav/NavigationDropdown/Menu/index.tsx deleted file mode 100644 index 2f9090da58..0000000000 --- a/www/packages/docs-ui/src/components/MainNav/NavigationDropdown/Menu/index.tsx +++ /dev/null @@ -1,36 +0,0 @@ -"use client" - -import clsx from "clsx" -import React from "react" -import { NavigationDropdownItem } from "types" -import { MainNavigationDropdownMenuItem } from "./Item" - -export type MainNavigationDropdownMenuProps = { - items: NavigationDropdownItem[] - open: boolean - onSelect: () => void -} - -export const MainNavigationDropdownMenu = ({ - items, - open, - onSelect, -}: MainNavigationDropdownMenuProps) => { - return ( -
      - {items.map((item, index) => ( - - ))} -
    - ) -} diff --git a/www/packages/docs-ui/src/components/MainNav/NavigationDropdown/Selected/index.tsx b/www/packages/docs-ui/src/components/MainNav/NavigationDropdown/Selected/index.tsx deleted file mode 100644 index e543a9ee6f..0000000000 --- a/www/packages/docs-ui/src/components/MainNav/NavigationDropdown/Selected/index.tsx +++ /dev/null @@ -1,49 +0,0 @@ -"use client" - -import React from "react" -import { NavigationDropdownItem } from "types" -import { TrianglesMini } from "@medusajs/icons" -import clsx from "clsx" -import { MainNavigationDropdownIcon } from "../Icon" - -export type MainNavigationDropdownSelectedProps = { - item: NavigationDropdownItem - onClick: () => void - isActive: boolean -} - -export const MainNavigationDropdownSelected = ({ - item, - onClick, - isActive, -}: MainNavigationDropdownSelectedProps) => { - if (item.type === "divider") { - return <> - } - - return ( -
    - -
    - - {item.title} - - -
    -
    - ) -} diff --git a/www/packages/docs-ui/src/components/MainNav/NavigationDropdown/index.tsx b/www/packages/docs-ui/src/components/MainNav/NavigationDropdown/index.tsx deleted file mode 100644 index c1a4b429e4..0000000000 --- a/www/packages/docs-ui/src/components/MainNav/NavigationDropdown/index.tsx +++ /dev/null @@ -1,55 +0,0 @@ -"use client" - -import clsx from "clsx" -import React, { useMemo, useRef, useState } from "react" -import { MainNavigationDropdownSelected } from "./Selected" -import { MainNavigationDropdownMenu } from "./Menu" -import { useAnalytics, useClickOutside, useMainNav } from "../../.." - -export const MainNavigationDropdown = () => { - const { navItems: items } = useMainNav() - const navigationRef = useRef(null) - const [menuOpen, setMenuOpen] = useState(false) - const { track } = useAnalytics() - useClickOutside({ - elmRef: navigationRef, - onClickOutside: () => { - setMenuOpen(false) - }, - }) - - const selectedItem = useMemo(() => { - const activeItem = items.find( - (item) => item.type === "link" && item.isActive - ) - - if (!activeItem) { - return items.length ? items[0] : undefined - } - - return activeItem - }, [items]) - return ( -
    - {selectedItem && ( - { - setMenuOpen((prev) => !prev) - if (!menuOpen) { - track("nav_main_open", { - url: window.location.href, - }) - } - }} - isActive={menuOpen} - /> - )} - setMenuOpen(false)} - /> -
    - ) -} diff --git a/www/packages/docs-ui/src/components/MainNav/SidebarOpener/index.tsx b/www/packages/docs-ui/src/components/MainNav/SidebarOpener/index.tsx deleted file mode 100644 index 458a768965..0000000000 --- a/www/packages/docs-ui/src/components/MainNav/SidebarOpener/index.tsx +++ /dev/null @@ -1,24 +0,0 @@ -"use client" - -import React from "react" -import { Button, useSidebar } from "../../.." -import clsx from "clsx" -import { SidebarLeft } from "@medusajs/icons" - -export const MainNavSidebarOpener = () => { - const { desktopSidebarOpen, setDesktopSidebarOpen } = useSidebar() - - if (desktopSidebarOpen) { - return <> - } - - return ( - - ) -} diff --git a/www/packages/docs-ui/src/components/MainNav/index.tsx b/www/packages/docs-ui/src/components/MainNav/index.tsx index 58bd6ae92e..1b67a4069b 100644 --- a/www/packages/docs-ui/src/components/MainNav/index.tsx +++ b/www/packages/docs-ui/src/components/MainNav/index.tsx @@ -2,57 +2,65 @@ import clsx from "clsx" import React from "react" -import { MainNavigationDropdown } from "./NavigationDropdown" -import { MainNavBreadcrumbs } from "./Breadcrumb" import { + BorderedIcon, Button, LinkButton, SearchModalOpener, useMainNav, useSidebar, } from "../.." -import { MainNavColorMode } from "./ColorMode" -import { MainNavDivider } from "./Divider" -import { MainNavSidebarOpener } from "./SidebarOpener" -import { MainNavHelpButton } from "./HelpButton" -import { SidebarLeftIcon } from "../Icons/SidebarLeft" import { MainNavEditDate } from "./EditDate" +import { MainNavItems } from "./Items" +import { MedusaIcon } from "../Icons/MedusaLogo" +import { MainNavDesktopMenu } from "./DesktopMenu" +import { SidebarLeftIcon } from "../Icons/SidebarLeft" +import { MainNavMobileMenu } from "./MobileMenu" export const MainNav = () => { const { reportIssueLink, editDate } = useMainNav() const { setMobileSidebarOpen } = useSidebar() + return (
    -
    - - - - +
    +
    + + +
    +
    -
    -
    +
    +
    {editDate && } - + Report Issue
    -
    - - + +
    diff --git a/www/packages/docs-ui/src/components/Menu/Action/index.tsx b/www/packages/docs-ui/src/components/Menu/Action/index.tsx index 92bc53b04e..16dc17df7b 100644 --- a/www/packages/docs-ui/src/components/Menu/Action/index.tsx +++ b/www/packages/docs-ui/src/components/Menu/Action/index.tsx @@ -2,13 +2,14 @@ import clsx from "clsx" import React from "react" -import { MenuItemAction } from "types" +import { MenuItem, MenuItemAction } from "types" export type MenuActionProps = { item: MenuItemAction + onClick?: (item: MenuItem) => void } -export const MenuAction = ({ item }: MenuActionProps) => { +export const MenuAction = ({ item, onClick }: MenuActionProps) => { return (
    { "text-medusa-fg-base cursor-pointer" )} tabIndex={-1} - onClick={item.action} + onClick={() => { + item.action() + onClick?.(item) + }} > {item.icon} diff --git a/www/packages/docs-ui/src/components/Menu/Item/index.tsx b/www/packages/docs-ui/src/components/Menu/Item/index.tsx index bf5b4a2914..2612e29218 100644 --- a/www/packages/docs-ui/src/components/Menu/Item/index.tsx +++ b/www/packages/docs-ui/src/components/Menu/Item/index.tsx @@ -3,13 +3,14 @@ import clsx from "clsx" import Link from "next/link" import React from "react" -import { MenuItemLink } from "types" +import { MenuItem as MenuItemType, MenuItemLink } from "types" export type MenuItemProps = { item: MenuItemLink + onClick?: (item: MenuItemType) => void } -export const MenuItem = ({ item }: MenuItemProps) => { +export const MenuItem = ({ item, onClick }: MenuItemProps) => { return (
    { "text-medusa-fg-base" )} href={item.link} + onClick={() => onClick?.(item)} > - - {item.icon} - + {item.icon && ( + + {item.icon} + + )} {item.title}
    diff --git a/www/packages/docs-ui/src/components/Menu/index.tsx b/www/packages/docs-ui/src/components/Menu/index.tsx index deb6a917da..d803b8c6f3 100644 --- a/www/packages/docs-ui/src/components/Menu/index.tsx +++ b/www/packages/docs-ui/src/components/Menu/index.tsx @@ -8,9 +8,10 @@ import { MenuAction } from "./Action" export type MenuProps = { items: MenuItemType[] className?: string + itemsOnClick?: (item: MenuItemType) => void } -export const Menu = ({ items, className }: MenuProps) => { +export const Menu = ({ items, className, itemsOnClick }: MenuProps) => { return (
    { > {items.map((item, index) => ( - {item.type === "link" && } - {item.type === "action" && } + {item.type === "link" && ( + + )} + {item.type === "action" && ( + + )} {item.type === "divider" && } + {item.type === "custom" && item.content} ))}
    diff --git a/www/packages/docs-ui/src/components/MobileNavigation/index.tsx b/www/packages/docs-ui/src/components/MobileNavigation/index.tsx deleted file mode 100644 index 5dfba165fc..0000000000 --- a/www/packages/docs-ui/src/components/MobileNavigation/index.tsx +++ /dev/null @@ -1,32 +0,0 @@ -"use client" - -import clsx from "clsx" -import React from "react" -import { SidebarLeftIcon } from "../Icons/SidebarLeft" -import { Button, SearchModalOpener, useSidebar } from "../.." -import { MainNavigationDropdown } from "../MainNav/NavigationDropdown" - -export const MobileNavigation = () => { - const { setMobileSidebarOpen } = useSidebar() - - return ( -
    - - - -
    - ) -} diff --git a/www/packages/docs-ui/src/components/Search/ModalOpener/index.tsx b/www/packages/docs-ui/src/components/Search/ModalOpener/index.tsx index 132da8ecf9..7a73425005 100644 --- a/www/packages/docs-ui/src/components/Search/ModalOpener/index.tsx +++ b/www/packages/docs-ui/src/components/Search/ModalOpener/index.tsx @@ -1,9 +1,8 @@ "use client" -import React, { MouseEvent, useMemo } from "react" -import clsx from "clsx" -import { useMobile, useSearch } from "@/providers" -import { Button, Tooltip } from "@/components" +import React, { MouseEvent } from "react" +import { useSearch } from "@/providers" +import { Button } from "@/components" import { MagnifyingGlass } from "@medusajs/icons" import { useKeyboardShortcut } from "@/hooks" @@ -14,15 +13,8 @@ export type SearchModalOpenerProps = { export const SearchModalOpener = ({ isLoading = false, - className, }: SearchModalOpenerProps) => { - const { isMobile } = useMobile() const { setIsOpen } = useSearch() - const isApple = useMemo(() => { - return typeof navigator !== "undefined" - ? navigator.userAgent.toLowerCase().indexOf("mac") !== 0 - : true - }, []) useKeyboardShortcut({ shortcutKeys: ["k"], action: () => setIsOpen((prev) => !prev), @@ -46,29 +38,12 @@ export const SearchModalOpener = ({ } return ( - <> - {isMobile && ( - - )} - {!isMobile && ( - - - - )} - + ) } diff --git a/www/packages/docs-ui/src/components/Sidebar/Top/index.tsx b/www/packages/docs-ui/src/components/Sidebar/Top/index.tsx index efef5d071a..4768378039 100644 --- a/www/packages/docs-ui/src/components/Sidebar/Top/index.tsx +++ b/www/packages/docs-ui/src/components/Sidebar/Top/index.tsx @@ -4,7 +4,6 @@ import React from "react" import { SidebarChild } from "../Child" import { InteractiveSidebarItem } from "types" import { SidebarTopMobileClose } from "./MobileClose" -import { SidebarTopMedusaMenu } from "./MedusaMenu" import { DottedSeparator } from "../../.." export type SidebarTopProps = { @@ -17,14 +16,12 @@ export const SidebarTop = React.forwardRef(
    - {parentItem && ( <> - + )} -
    ) diff --git a/www/packages/docs-ui/src/components/Sidebar/index.tsx b/www/packages/docs-ui/src/components/Sidebar/index.tsx index 89d915cb77..4f3ad134dc 100644 --- a/www/packages/docs-ui/src/components/Sidebar/index.tsx +++ b/www/packages/docs-ui/src/components/Sidebar/index.tsx @@ -118,8 +118,8 @@ export const Sidebar = ({ }} id="sidebar" > - {/* MOBILE SIDEBAR */} -
    + {/* MOBILE SIDEBAR - keeping this in case we need it in the future */} + {/*
    {!sidebarItems.mobile.length && !staticSidebarItems && ( )} @@ -131,8 +131,8 @@ export const Sidebar = ({ hasNextItems={index !== sidebarItems.default.length - 1} /> ))} - -
    + {sidebarItems.mobile.length > 0 && } +
    */} {/* DESKTOP SIDEBAR */}
    {!sidebarItems.default.length && !staticSidebarItems && ( diff --git a/www/packages/docs-ui/src/constants.tsx b/www/packages/docs-ui/src/constants.tsx index 974a27a818..0be95106b9 100644 --- a/www/packages/docs-ui/src/constants.tsx +++ b/www/packages/docs-ui/src/constants.tsx @@ -1,195 +1,118 @@ -import React from "react" -import { Badge } from "@/components" import { OptionType } from "@/hooks" -import { NavigationDropdownItem, SidebarItem } from "types" -import { NavigationDropdownDocIcon } from "./components/Icons/NavigationDropdown/Doc" -import { NavigationDropdownStoreIcon } from "./components/Icons/NavigationDropdown/Store" -import { NavigationDropdownAdminIcon } from "./components/Icons/NavigationDropdown/Admin" -import { NavigationDropdownUiIcon } from "./components/Icons/NavigationDropdown/Ui" -import { NavigationDropdownDocV1Icon } from "./components/Icons/NavigationDropdown/DocV1" -import { NavigationDropdownUserIcon } from "./components/Icons/NavigationDropdown/User" -import { NavigationDropdownResourcesIcon } from "./components/Icons/NavigationDropdown/Resources" -import { NavigationDropdownModulesIcon } from "./components/Icons/NavigationDropdown/Modules" +import { NavigationItem } from "types" export const GITHUB_ISSUES_PREFIX = `https://github.com/medusajs/medusa/issues/new?assignees=&labels=type%3A+docs&template=docs.yml` export const GITHUB_UI_ISSUES_PREFIX = `https://github.com/medusajs/ui/issues/new?labels=documentation` -export const navDropdownItemsV2: NavigationDropdownItem[] = [ +export const navDropdownItems: NavigationItem[] = [ { type: "link", path: `/v2`, - icon: NavigationDropdownDocIcon, - title: "Documentation", + title: "Get Started", + project: "book", }, { - type: "link", - path: `/v2/resources/commerce-modules`, - icon: NavigationDropdownModulesIcon, - title: "Commerce Modules", + type: "dropdown", + title: "Product", + children: [ + { + type: "link", + title: "Commerce Modules", + link: "/v2/resources/commerce-modules", + }, + { + type: "link", + title: "Architectural Modules", + link: "/v2/resources/architectural-modules", + }, + ], }, { - type: "link", - path: `/v2/resources`, - icon: NavigationDropdownResourcesIcon, - title: "Development Resources", + type: "dropdown", + title: "Resources", + children: [ + { + type: "link", + title: "Guides", + link: "/v2/resources", + useAsFallback: true, + }, + { + type: "link", + title: "Recipes", + link: "/v2/resources/recipes", + }, + { + type: "link", + title: "UI Library", + link: "/ui", + }, + { + type: "divider", + }, + { + type: "link", + title: "Storefront Development", + link: "/v2/resources/storefront-development", + }, + ], }, { - type: "link", - path: `/v2/api/store`, - icon: NavigationDropdownStoreIcon, - title: "Store API", + type: "dropdown", + title: "Tools & SDKs", + children: [ + { + type: "link", + title: "Medusa CLI", + link: "/v2/resources/medusa-cli", + }, + { + type: "link", + title: "Next.js Starter", + link: "/v2/resources/nextjs-starter", + }, + { + type: "divider", + }, + { + type: "link", + title: "Integrations", + link: "/v2/resources/integrations", + }, + ], }, { - type: "link", - path: `/v2/api/admin`, - icon: NavigationDropdownAdminIcon, - title: "Admin API", - }, - { - type: "link", - path: `/ui`, - icon: NavigationDropdownUiIcon, - title: "UI", - }, - { - type: "link", - path: `/`, - icon: NavigationDropdownDocV1Icon, - title: "Medusa v1", + type: "dropdown", + title: "Reference", + children: [ + { + type: "link", + title: "Admin API", + link: "/v2/api/admin", + }, + { + type: "link", + title: "Store API", + link: "/v2/api/store", + }, + { + type: "divider", + }, + { + type: "link", + title: "Workflows", + link: "/v2/resources/medusa-workflows-reference", + }, + { + type: "link", + title: "Data Model API", + link: "/v2/resources/references/data-model", + }, + ], }, ] -export const navDropdownItemsV1: NavigationDropdownItem[] = [ - { - type: "link", - path: `/`, - icon: NavigationDropdownDocV1Icon, - title: "Documentation", - }, - { - type: "link", - path: `/user-guide`, - icon: NavigationDropdownUserIcon, - title: "User Guide", - }, - { - type: "link", - path: `/api/store`, - icon: NavigationDropdownStoreIcon, - title: "Store API", - }, - { - type: "link", - path: `/api/admin`, - icon: NavigationDropdownAdminIcon, - title: "Admin API", - }, - { - type: "link", - path: `/ui`, - icon: NavigationDropdownUiIcon, - title: "UI", - }, - { - type: "link", - path: `/v2`, - icon: NavigationDropdownDocIcon, - title: "Medusa v2", - }, -] - -export const mobileSidebarItemsV1: SidebarItem[] = [ - { - type: "link", - title: "Docs", - path: `/`, - loaded: true, - isPathHref: true, - }, - { - type: "link", - title: "User Guide", - path: `/user-guide`, - loaded: true, - isPathHref: true, - }, - { - type: "link", - title: "Store API", - path: `/api/store`, - loaded: true, - isPathHref: true, - }, - { - type: "link", - title: "Admin API", - path: `/api/admin`, - loaded: true, - isPathHref: true, - }, - { - type: "link", - title: "UI", - path: `/ui`, - loaded: true, - isPathHref: true, - }, - { - type: "link", - title: "Learn Medusa V2", - path: `/v2`, - loaded: true, - isPathHref: true, - additionalElms: v2, - }, -] - -export const mobileSidebarItemsV2: SidebarItem[] = [ - { - type: "link", - title: "Docs", - path: `/v2`, - loaded: true, - isPathHref: true, - }, - { - type: "link", - title: "Learning Resources", - path: `/v2/resources`, - loaded: true, - isPathHref: true, - }, - { - type: "link", - title: "Store API", - path: `/v2/api/store`, - loaded: true, - isPathHref: true, - }, - { - type: "link", - title: "Admin API", - path: `/v2/api/admin`, - loaded: true, - isPathHref: true, - }, - { - type: "link", - title: "UI", - path: `/ui`, - loaded: true, - isPathHref: true, - }, - { - type: "link", - title: "Medusa v1", - path: `/`, - loaded: true, - isPathHref: true, - }, -] - -export const searchFiltersV2: OptionType[] = [ +export const searchFilters: OptionType[] = [ { value: "guides", label: "Guides", @@ -206,36 +129,9 @@ export const searchFiltersV2: OptionType[] = [ value: "store-v2", label: "Store API (v2)", }, - // TODO add more filters -] - -export const searchFiltersV1: OptionType[] = [ - { - value: "admin", - label: "Admin API", - }, - { - value: "store", - label: "Store API", - }, - { - value: "docs", - label: "Docs", - }, - { - value: "user-guide", - label: "User Guide", - }, - { - value: "plugins", - label: "Plugins", - }, - { - value: "reference", - label: "References", - }, { value: "ui", - label: "UI", + label: "Medusa UI", }, + // TODO add more filters ] diff --git a/www/packages/docs-ui/src/layouts/main-content.tsx b/www/packages/docs-ui/src/layouts/main-content.tsx index 42c770856d..290986e530 100644 --- a/www/packages/docs-ui/src/layouts/main-content.tsx +++ b/www/packages/docs-ui/src/layouts/main-content.tsx @@ -50,7 +50,8 @@ export const MainContentLayout = ({ "flex-col items-center", "h-full w-full", "overflow-y-scroll overflow-x-hidden", - "md:rounded-t-docs_DEFAULT shadow-elevation-card-rest", + "md:rounded-t-docs_DEFAULT", + "shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark", mainWrapperClasses )} id="main" diff --git a/www/packages/docs-ui/src/layouts/root.tsx b/www/packages/docs-ui/src/layouts/root.tsx index 7dd7e22734..9fbac1e12e 100644 --- a/www/packages/docs-ui/src/layouts/root.tsx +++ b/www/packages/docs-ui/src/layouts/root.tsx @@ -1,7 +1,6 @@ import React from "react" import clsx from "clsx" import { RootProviders, Sidebar, SidebarProps } from "@/components" -import { MobileNavigation } from "../components/MobileNavigation" import { Toc } from "../components/Toc" import { MainContentLayout, MainContentLayoutProps } from "./main-content" @@ -14,6 +13,7 @@ export type RootLayoutProps = { showPagination?: boolean feedbackComponent?: React.ReactNode editComponent?: React.ReactNode + showBreadcrumbs?: boolean } & MainContentLayoutProps export const RootLayout = ({ @@ -38,7 +38,6 @@ export const RootLayout = ({ > -
    diff --git a/www/packages/docs-ui/src/layouts/tight.tsx b/www/packages/docs-ui/src/layouts/tight.tsx index c0d26055fd..154fd87c3b 100644 --- a/www/packages/docs-ui/src/layouts/tight.tsx +++ b/www/packages/docs-ui/src/layouts/tight.tsx @@ -1,13 +1,14 @@ import React from "react" import { RootLayout, RootLayoutProps } from "./root" import clsx from "clsx" -import { Pagination } from ".." +import { Breadcrumbs, Pagination } from ".." export const TightLayout = ({ children, showPagination, feedbackComponent, editComponent, + showBreadcrumbs = true, ...props }: RootLayoutProps) => { return ( @@ -21,6 +22,7 @@ export const TightLayout = ({ "px-docs_1 md:px-docs_4 lg:px-0" )} > + {showBreadcrumbs && } {children} {feedbackComponent} {showPagination && } diff --git a/www/packages/docs-ui/src/layouts/wide.tsx b/www/packages/docs-ui/src/layouts/wide.tsx index 8c442946ee..605bae7d7d 100644 --- a/www/packages/docs-ui/src/layouts/wide.tsx +++ b/www/packages/docs-ui/src/layouts/wide.tsx @@ -1,13 +1,14 @@ import React from "react" import { RootLayout, RootLayoutProps } from "./root" import clsx from "clsx" -import { Pagination } from ".." +import { Breadcrumbs, Pagination } from ".." export const WideLayout = ({ children, showPagination, feedbackComponent, editComponent, + showBreadcrumbs = true, ...props }: RootLayoutProps) => { return ( @@ -22,6 +23,7 @@ export const WideLayout = ({ "lg:max-w-lg-wide-content xl:max-w-xl-wide-content relative mt-4 w-full flex-1 lg:mt-7" )} > + {showBreadcrumbs && } {children} {feedbackComponent} {showPagination && } diff --git a/www/packages/docs-ui/src/providers/MainNav/index.tsx b/www/packages/docs-ui/src/providers/MainNav/index.tsx index 6b050e4943..960e41e0b7 100644 --- a/www/packages/docs-ui/src/providers/MainNav/index.tsx +++ b/www/packages/docs-ui/src/providers/MainNav/index.tsx @@ -1,27 +1,24 @@ "use client" +import { usePathname } from "next/navigation" import React, { createContext, useContext, useMemo } from "react" -import { - BreadcrumbOptions, - NavigationDropdownItem, - NavigationDropdownItemLink, -} from "types" +import { NavigationItem } from "types" +import { useSiteConfig } from "../SiteConifg" export type MainNavContext = { - navItems: NavigationDropdownItem[] - activeItem?: NavigationDropdownItemLink + navItems: NavigationItem[] + activeItemIndex?: number + activeItem?: NavigationItem reportIssueLink: string editDate?: string - breadcrumbOptions: BreadcrumbOptions } const MainNavContext = createContext(null) export type MainNavProviderProps = { - navItems: NavigationDropdownItem[] + navItems: NavigationItem[] reportIssueLink: string editDate?: string - breadcrumbOptions?: BreadcrumbOptions children?: React.ReactNode } @@ -30,26 +27,72 @@ export const MainNavProvider = ({ reportIssueLink, children, editDate, - breadcrumbOptions = { - showCategories: true, - }, }: MainNavProviderProps) => { - const activeItem = useMemo( - () => - navItems.find( - (item) => item.type === "link" && item.isActive - ) as NavigationDropdownItemLink, - [navItems] - ) + const pathname = usePathname() + const { config } = useSiteConfig() + + const baseUrl = `${config.baseUrl}${config.basePath}` + + const activeItemIndex = useMemo(() => { + const currentUrl = `${baseUrl}${pathname}`.replace(/\/$/, "") + + let fallbackIndex: number | undefined + + const index = navItems.findIndex((item, index) => { + if (item.type === "dropdown") { + return item.children.some((childItem) => { + if (childItem.type !== "link") { + return + } + + const isItemActive = currentUrl.startsWith(childItem.link) + + if ( + isItemActive && + childItem.useAsFallback && + fallbackIndex === undefined + ) { + fallbackIndex = index + return false + } + + return isItemActive + }) + } + + if (item.project && item.project !== config.project.key) { + return false + } + + const isItemActive = currentUrl.startsWith(item.path) + + if (isItemActive && item.useAsFallback && fallbackIndex === undefined) { + fallbackIndex = index + return false + } + + return isItemActive + }) + + return index !== -1 ? index : fallbackIndex + }, [navItems, pathname, baseUrl, config]) + + const activeItem = useMemo(() => { + if (activeItemIndex === undefined) { + return + } + + return navItems[activeItemIndex] + }, [navItems, activeItemIndex]) return ( {children} diff --git a/www/packages/docs-ui/src/providers/SiteConifg/index.tsx b/www/packages/docs-ui/src/providers/SiteConifg/index.tsx index f272cd604c..6a85ad82e9 100644 --- a/www/packages/docs-ui/src/providers/SiteConifg/index.tsx +++ b/www/packages/docs-ui/src/providers/SiteConifg/index.tsx @@ -26,6 +26,13 @@ export const SiteConfigProvider = ({ default: [], mobile: [], }, + project: { + title: "", + key: "", + }, + breadcrumbOptions: { + showCategories: true, + }, } ) diff --git a/www/packages/docs-ui/src/utils/get-mobile-sidebar-items.ts b/www/packages/docs-ui/src/utils/get-mobile-sidebar-items.ts deleted file mode 100644 index bd21574e02..0000000000 --- a/www/packages/docs-ui/src/utils/get-mobile-sidebar-items.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { SidebarItem } from "types" -import { mobileSidebarItemsV1, mobileSidebarItemsV2 } from ".." - -type Options = { - baseUrl: string - version?: "v1" | "v2" -} - -export function getMobileSidebarItems({ - baseUrl, - version = "v1", -}: Options): SidebarItem[] { - const mobileItems = - version === "v2" ? mobileSidebarItemsV2 : mobileSidebarItemsV1 - return mobileItems.map((item) => { - if (item.type !== "link") { - return item - } - - return { - ...item, - path: `${baseUrl}${item.path}`, - } - }) -} diff --git a/www/packages/docs-ui/src/utils/get-navbar-items.ts b/www/packages/docs-ui/src/utils/get-navbar-items.ts index fb8fba9863..9caa5b31cc 100644 --- a/www/packages/docs-ui/src/utils/get-navbar-items.ts +++ b/www/packages/docs-ui/src/utils/get-navbar-items.ts @@ -1,27 +1,31 @@ -import { NavigationDropdownItem } from "types" -import { navDropdownItemsV1, navDropdownItemsV2 } from ".." +import { NavigationItem } from "types" +import { navDropdownItems } from ".." type Options = { basePath: string - activePath: string - version?: "v1" | "v2" } -export function getNavDropdownItems({ - basePath, - activePath, - version = "v1", -}: Options): NavigationDropdownItem[] { - const items = version === "v2" ? navDropdownItemsV2 : navDropdownItemsV1 - return items.map((item) => { - if (item.type === "divider") { - return item +export function getNavDropdownItems({ basePath }: Options): NavigationItem[] { + return navDropdownItems.map((item) => { + const newItem = { + ...item, } - return { - ...item, - isActive: activePath === item.path, - path: `${basePath}${item.path}`, + if (newItem.type === "link") { + newItem.path = `${basePath}${newItem.path}` + } else { + newItem.children = newItem.children.map((childItem) => { + if (childItem.type !== "link") { + return childItem + } + + return { + ...childItem, + link: `${basePath}${childItem.link}`, + } + }) } + + return newItem }) } diff --git a/www/packages/docs-ui/src/utils/index.ts b/www/packages/docs-ui/src/utils/index.ts index c5f2b62699..b45425c45e 100644 --- a/www/packages/docs-ui/src/utils/index.ts +++ b/www/packages/docs-ui/src/utils/index.ts @@ -5,7 +5,6 @@ export * from "./decode-str" export * from "./dom-utils" export * from "./format-report-link" export * from "./get-link-with-base-path" -export * from "./get-mobile-sidebar-items" export * from "./get-navbar-items" export * from "./get-os-shortcut" export * from "./get-scrolled-top" diff --git a/www/packages/tailwind/base.tailwind.config.js b/www/packages/tailwind/base.tailwind.config.js index 7a91a7d55d..13e50a8cfe 100644 --- a/www/packages/tailwind/base.tailwind.config.js +++ b/www/packages/tailwind/base.tailwind.config.js @@ -191,23 +191,23 @@ module.exports = { "elevation-card-rest": "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.04)", "elevation-card-rest-dark": - "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 1px 2px 0px rgba(0, 0, 0, 0.32), 0px 2px 4px 0px rgba(0, 0, 0, 0.32)", + "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px #27272A, 0px 1px 2px 0px rgba(0, 0, 0, 0.32), 0px 2px 4px 0px rgba(0, 0, 0, 0.32)", "elevation-card-hover": - "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 8px 0px rgba(0, 0, 0, 0.1)", + "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 8px 0px rgba(0, 0, 0, 0.10)", "elevation-card-hover-dark": - "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 1px 4px 0px rgba(0, 0, 0, 0.48), 0px 2px 8px 0px rgba(0, 0, 0, 0.48)", + "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px #27272A, 0px 1px 4px 0px rgba(0, 0, 0, 0.48), 0px 2px 8px 0px rgba(0, 0, 0, 0.48)", "elevation-tooltip": "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.08), 0px 4px 8px 0px rgba(0, 0, 0, 0.08)", "elevation-tooltip-dark": - "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 2px 4px 0px rgba(0, 0, 0, 0.32), 0px 4px 8px 0px rgba(0, 0, 0, 0.32)", + "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.10), 0px 2px 4px 0px rgba(0, 0, 0, 0.32), 0px 4px 8px 0px rgba(0, 0, 0, 0.32)", "elevation-flyout": "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 4px 8px 0px rgba(0, 0, 0, 0.08), 0px 8px 16px 0px rgba(0, 0, 0, 0.08)", "elevation-flyout-dark": - "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.32), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)", + "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.10), 0px 4px 8px 0px rgba(0, 0, 0, 0.32), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)", "elevation-modal": - "0px 0px 0px 1px rgba(255, 255, 255, 1) inset, 0px 0px 0px 1.5px rgba(228, 228, 231, 0.6) inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 16px 32px 0px rgba(0, 0, 0, 0.08)", + "0px 0px 0px 1px #FFF inset, 0px 0px 0px 1.5px rgba(228, 228, 231, 0.60) inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 16px 32px 0px rgba(0, 0, 0, 0.08)", "elevation-modal-dark": - "0px 0px 0px 1px rgba(24, 24, 27, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.06) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.32), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)", + "0px 0px 0px 1px #18181B inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.06) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.10), 0px 4px 8px 0px rgba(0, 0, 0, 0.32), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)", "button-neutral": "0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(0, 0, 0, 0.08)", "button-neutral-dark": @@ -234,7 +234,7 @@ module.exports = { "0px -1px 0px 0px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(82, 82, 91, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)", "elevation-code-block": - "0px 0px 0px 1px #18181B, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.20)", + "0px 0px 0px 1px #18181B inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.20) inset", "elevation-code-block-dark": "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px #27272A, 0px 1px 2px 0px rgba(0, 0, 0, 0.32), 0px 2px 4px 0px rgba(0, 0, 0, 0.32)", active: "0px 0px 0px 3px #E1F0FF", @@ -326,7 +326,7 @@ module.exports = { h1: [ "24px", { - lineHeight: "36px", + lineHeight: "125%", fontWeight: "500", }, ], diff --git a/www/packages/types/src/config.ts b/www/packages/types/src/config.ts index 2f535e9cfe..d298e6b7cc 100644 --- a/www/packages/types/src/config.ts +++ b/www/packages/types/src/config.ts @@ -1,5 +1,9 @@ import { SidebarSectionItems } from "./sidebar.js" +export type BreadcrumbOptions = { + showCategories?: boolean +} + export declare type DocsConfig = { titleSuffix?: string baseUrl: string @@ -7,4 +11,9 @@ export declare type DocsConfig = { sidebar: SidebarSectionItems filesBasePath?: string useNextLinks?: boolean + project: { + title: string + key: string + } + breadcrumbOptions?: BreadcrumbOptions } diff --git a/www/packages/types/src/index.ts b/www/packages/types/src/index.ts index b9d50568d1..8bc8df0ebf 100644 --- a/www/packages/types/src/index.ts +++ b/www/packages/types/src/index.ts @@ -2,6 +2,7 @@ export * from "./api-testing.js" export * from "./config.js" export * from "./general.js" export * from "./menu.js" +export * from "./navigation.js" export * from "./navigation-dropdown.js" export * from "./sidebar.js" export * from "./toc.js" diff --git a/www/packages/types/src/menu.ts b/www/packages/types/src/menu.ts index 51b4644588..b548344889 100644 --- a/www/packages/types/src/menu.ts +++ b/www/packages/types/src/menu.ts @@ -1,6 +1,6 @@ export type MenuItemLink = { type: "link" - icon: React.ReactNode + icon?: React.ReactNode title: string link: string } @@ -17,4 +17,13 @@ export type MenuItemAction = { action: () => void } -export type MenuItem = MenuItemLink | MenuItemDivider | MenuItemAction +export type MenuItemCustom = { + type: "custom" + content: React.ReactNode +} + +export type MenuItem = + | MenuItemLink + | MenuItemDivider + | MenuItemAction + | MenuItemCustom diff --git a/www/packages/types/src/navigation-dropdown.ts b/www/packages/types/src/navigation-dropdown.ts index 1fce274a6b..c7f1a8044e 100644 --- a/www/packages/types/src/navigation-dropdown.ts +++ b/www/packages/types/src/navigation-dropdown.ts @@ -14,7 +14,3 @@ export type NavigationDropdownItem = | { type: "divider" } - -export type BreadcrumbOptions = { - showCategories?: boolean -} diff --git a/www/packages/types/src/navigation.ts b/www/packages/types/src/navigation.ts new file mode 100644 index 0000000000..8ac7535e78 --- /dev/null +++ b/www/packages/types/src/navigation.ts @@ -0,0 +1,20 @@ +import { MenuItem } from "./menu.js" + +export type NavigationItemDropdown = { + type: "dropdown" + title: string + children: (MenuItem & { + useAsFallback?: boolean + })[] + project?: string +} + +export type NavigationItemLink = { + type: "link" + path: string + title: string + project?: string + useAsFallback?: boolean +} + +export type NavigationItem = NavigationItemLink | NavigationItemDropdown