asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

docs: redesign sidebar (#8408)

Browse Source 
* initial changes

* redesign the sidebar + nav drawer

* changes to sidebar items

* finish up sidebar redesign

* support new sidebar in resources

* general fixes

* integrate in ui

* support api reference

* refactor

* integrate in user guide

* docs: fix build errors

* fix user guide build

* more refactoring

* added banner

* added bottom logo + icon

* fix up sidebar

* fix up paddings

* fix shadow bottom

* docs: add table of content (#8445)

* add toc types

* implement toc functionality

* finished toc redesign

* redesigned table of content

* mobile fixes

* truncate text in toc

* mobile fixes

* merge fixes

* implement redesign

* add hide sidebar

* add menu action item

* finish up hide sidebar design

* implement redesign in resources

* integrate in api reference

* integrate changes in ui

* fixes to api reference scrolling

* fix build error

* fix build errors

* fixes

* fixes to sidebar

* general fixes

* fix active category not closing

* fix long titles
This commit is contained in:
Shahed Nasser
2024-08-15 12:13:13 +03:00
committed by GitHub
parent 4cb28531e5
commit b4f3b8a79d
157 changed files with 5080 additions and 2010 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/apps/ui/contentlayer.config.ts
+2 -1
View File
@@ -1,5 +1,6 @@
import { defineDocumentType, makeSource } from "contentlayer/source-files"
import { rehypeComponent } from "./src/lib/rehype-component"
import rehypeSlug from "rehype-slug"
export const Doc = defineDocumentType(() => ({
name: "Doc",
@@ -26,6 +27,6 @@ export default makeSource({
contentDirPath: "./src/content",
documentTypes: [Doc],
mdx: {
rehypePlugins: [rehypeComponent],
rehypePlugins: [[rehypeComponent], [rehypeSlug]],
},
})
www/apps/ui/package.json
+1
View File
@@ -37,6 +37,7 @@
"react": "18.2.0",
"react-day-picker": "^8.10.0",
"react-dom": "18.2.0",
"rehype-slug": "^6.0.0",
"remark": "^14.0.3",
"tailwind": "*",
"tailwindcss": "3.3.3",
www/apps/ui/src/app/assets/sitemap.ts
+10 -9
View File
@@ -2,7 +2,7 @@ import { MetadataRoute } from "next"
import { docsConfig } from "@/config/docs"
import { absoluteUrl } from "@/lib/absolute-url"
import { SidebarItemType } from "types"
import { SidebarItem } from "types"
export default function sitemap(): MetadataRoute.Sitemap {
const now = new Date()
@@ -12,23 +12,24 @@ export default function sitemap(): MetadataRoute.Sitemap {
lastModified?: string | Date
}> = []
function pushItems(newItems: SidebarItemType[]) {
function pushItems(newItems: SidebarItem[]) {
newItems.forEach((item) => {
if (item.path) {
items.push({
url: absoluteUrl(item.path),
lastModified: now,
})
if (item.type !== "link") {
return
}
items.push({
url: absoluteUrl(item.path),
lastModified: now,
})
if (item.children) {
pushItems(item.children)
}
})
}
pushItems(docsConfig.sidebar.top)
pushItems(docsConfig.sidebar.bottom)
pushItems(docsConfig.sidebar.default)
return items
}
www/apps/ui/src/app/layout.tsx
+1 -2
View File
@@ -1,6 +1,5 @@
import type { Metadata } from "next"
import { Navbar } from "@/components/navbar"
import { Providers } from "@/providers"
import { siteConfig } from "@/config/site"
@@ -36,11 +35,11 @@ export default function RootLayout({
return (
<TightLayout
ProvidersComponent={Providers}
NavbarComponent={Navbar}
sidebarProps={{
expandItems: true,
}}
bodyClassName={clsx(inter.variable, robotoMono.variable)}
showBanner={false}
>
{children}
</TightLayout>
www/apps/ui/src/components/navbar.tsx
-25
View File
@@ -1,25 +0,0 @@
"use client"
import { docsConfig } from "@/config/docs"
import { basePathUrl } from "@/lib/base-path-url"
import { Navbar as UiNavbar, useSidebar } from "docs-ui"
const Navbar = () => {
const { mobileSidebarOpen, setMobileSidebarOpen } = useSidebar()
return (
<UiNavbar
logo={{
light: basePathUrl("/images/logo-icon.png"),
dark: basePathUrl("/images/logo-icon-dark.png"),
}}
items={docsConfig.mainNav}
mobileMenuButton={{
setMobileSidebarOpen,
mobileSidebarOpen,
}}
/>
)
}
export { Navbar }
www/apps/ui/src/config/docs.tsx
+113 -34
View File
@@ -1,281 +1,360 @@
import { ArrowUpRightOnBox } from "@medusajs/icons"
import { NavbarItem, getMobileSidebarItems, getNavbarItems } from "docs-ui"
import { SidebarSectionItemsType } from "types"
import { getMobileSidebarItems } from "docs-ui"
import { SidebarSectionItems } from "types"
import { siteConfig } from "./site"
type DocsConfig = {
mainNav: NavbarItem[]
sidebar: SidebarSectionItemsType
sidebar: SidebarSectionItems
}
export const docsConfig: DocsConfig = {
mainNav: getNavbarItems({
basePath: siteConfig.baseUrl,
activePath: process.env.NEXT_PUBLIC_BASE_PATH || "/ui",
version: "v1",
}),
sidebar: {
top: [
default: [
{
title: "Getting Started",
children: [
{
title: "Introduction",
path: "/",
loaded: true,
isPathHref: true,
},
],
type: "link",
title: "Introduction",
path: "/",
loaded: true,
isPathHref: true,
},
{
type: "separator",
},
{
type: "category",
title: "Installation",
loaded: true,
children: [
{
type: "link",
title: "Medusa Admin Extension",
path: "/installation/medusa-admin-extension",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Standalone Project",
path: "/installation/standalone-project",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Upgrade Guides",
path: `${process.env.NEXT_PUBLIC_DOCS_URL}/upgrade-guides/medusa-ui`,
isPathHref: true,
additionalElms: <ArrowUpRightOnBox />,
linkProps: {
target: "_blank",
rel: "noreferrer",
},
loaded: true,
},
],
},
],
bottom: [
{
type: "category",
title: "Colors",
loaded: true,
children: [
{
type: "link",
title: "Overview",
path: "/colors/overview",
isPathHref: true,
loaded: true,
},
],
},
{
type: "link",
title: "Icons",
children: [
{
title: "Overview",
path: "/icons/overview",
isPathHref: true,
},
],
path: "/icons/overview",
isPathHref: true,
loaded: true,
},
{
type: "separator",
},
{
type: "category",
title: "Components",
loaded: true,
children: [
{
type: "link",
title: "Alert",
path: "/components/alert",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Avatar",
path: "/components/avatar",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Badge",
path: "/components/badge",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Button",
path: "/components/button",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Calendar",
path: "/components/calendar",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Checkbox",
path: "/components/checkbox",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Code Block",
path: "/components/code-block",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Command",
path: "/components/command",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Command Bar",
path: "/components/command-bar",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Container",
path: "/components/container",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Copy",
path: "/components/copy",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Currency Input",
path: "/components/currency-input",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Date Picker",
path: "/components/date-picker",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Drawer",
path: "/components/drawer",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Dropdown Menu",
path: "/components/dropdown-menu",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Focus Modal",
path: "/components/focus-modal",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Heading",
path: "/components/heading",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Icon Badge",
path: "/components/icon-badge",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Icon Button",
path: "/components/icon-button",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Input",
path: "/components/input",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Kbd",
path: "/components/kbd",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Label",
path: "/components/label",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Progress Accordion",
path: "/components/progress-accordion",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Progress Tabs",
path: "/components/progress-tabs",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Prompt",
path: "/components/prompt",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Radio Group",
path: "/components/radio-group",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Select",
path: "/components/select",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Status Badge",
path: "/components/status-badge",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Switch",
path: "/components/switch",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Table",
path: "/components/table",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Tabs",
path: "/components/tabs",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Text",
path: "/components/text",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Textarea",
path: "/components/textarea",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Toast",
path: "/components/toast",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "Tooltip",
path: "/components/tooltip",
isPathHref: true,
loaded: true,
},
],
},
{
type: "category",
title: "Hooks",
loaded: true,
children: [
{
type: "link",
title: "usePrompt",
path: "/hooks/use-prompt",
isPathHref: true,
loaded: true,
},
{
type: "link",
title: "useToggleState",
path: "/hooks/use-toggle-state",
isPathHref: true,
loaded: true,
},
],
},
{
type: "category",
title: "Utils",
loaded: true,
children: [
{
type: "link",
title: "clx",
path: "/utils/clx",
isPathHref: true,
loaded: true,
},
],
},
www/apps/ui/src/config/site.ts
+1 -2
View File
@@ -16,8 +16,7 @@ export const siteConfig: SiteConfig = {
description: "Primitives for building Medusa applications.",
// sidebar is defined in docs.tsx
sidebar: {
top: [],
bottom: [],
default: [],
mobile: [],
},
}
www/apps/ui/src/providers/index.tsx
+4 -1
View File
@@ -11,6 +11,7 @@ import {
import SearchProvider from "./search"
import SidebarProvider from "./sidebar"
import { siteConfig } from "../config/site"
import { MainNavProvider } from "./main-nav"
type ProvidersProps = {
children: React.ReactNode
@@ -25,7 +26,9 @@ const Providers = ({ children }: ProvidersProps) => {
<ModalProvider>
<ScrollControllerProvider scrollableSelector="#main">
<SidebarProvider>
<SearchProvider>{children}</SearchProvider>
<MainNavProvider>
<SearchProvider>{children}</SearchProvider>
</MainNavProvider>
</SidebarProvider>
</ScrollControllerProvider>
</ModalProvider>
www/apps/ui/src/providers/main-nav.tsx
+42
View File
@@ -0,0 +1,42 @@
"use client"
import {
formatReportLink,
getNavDropdownItems,
MainNavProvider as UiMainNavProvider,
useIsBrowser,
} from "docs-ui"
import { useMemo } from "react"
import { siteConfig } from "../config/site"
import { basePathUrl } from "../lib/base-path-url"
type MainNavProviderProps = {
children?: React.ReactNode
}
export const MainNavProvider = ({ children }: MainNavProviderProps) => {
const isBrowser = useIsBrowser()
const navigationDropdownItems = useMemo(
() =>
getNavDropdownItems({
basePath: siteConfig.baseUrl,
activePath: basePathUrl(),
version: "v1",
}),
[]
)
const reportLink = useMemo(
() => formatReportLink("UI Docs", isBrowser ? document.title : "", "ui"),
[isBrowser]
)
return (
<UiMainNavProvider
navItems={navigationDropdownItems}
reportIssueLink={reportLink}
>
{children}
</UiMainNavProvider>
)
}
www/apps/ui/src/providers/sidebar.tsx
+1
View File
@@ -10,6 +10,7 @@ type SidebarProviderProps = {
const SidebarProvider = ({ children }: SidebarProviderProps) => {
const { scrollableElement } = useScrollController()
return (
<UiSidebarProvider
initialItems={docsConfig.sidebar}