refactor(docs): update version handling and context use

docs/components/layouts/header.tsx

@@ -56,18 +56,17 @@ import {
 import { NextLinkIconButton, Tree } from "components/navigation"
 import { CONSTANT } from "constant"
 import { useI18n } from "contexts/i18n-context"
+import { usePage } from "contexts/page-context"
 import Link from "next/link"
 import { useRouter } from "next/router"
-import packageJSON from "package.json"
 import type { FC } from "react"
 import { memo, useEffect, useRef, useState } from "react"
 
-const version = `v${packageJSON.dependencies["@yamada-ui/react"].split("-")[0]}`
-
 export type HeaderProps = CenterProps & {}
 
 export const Header = memo(
   forwardRef<HeaderProps, "div">(({ ...rest }, ref) => {
+    const { currentVersion } = usePage()
     const headerRef = useRef<HTMLHeadingElement>()
     const { scrollY } = useScroll()
     const [y, setY] = useState<number>(0)
@@ -132,7 +131,7 @@ export const Header = memo(
               letterSpacing="1px"
               minW="auto"
             >
-              {version}
+              {currentVersion}
             </Tag>
 
             <Spacer />

docs/contexts/page-context.tsx

@@ -8,10 +8,14 @@ import type { FC, PropsWithChildren } from "react"
 import { createContext, useContext, useMemo } from "react"
 
 type PageContext = Omit<PageProviderProps, "children"> & {
-  documentMap: Pick<DocumentTypes, "title" | "description" | "label" | "slug">[]
+  documentMap: Pick<
+    DocumentTypeTree,
+    "title" | "description" | "label" | "slug"
+  >[]
 }
 
 const defaultValue = {
+  currentVersion: undefined,
   documentTree: [],
   documentMap: [],
 }
@@ -20,14 +24,15 @@ export const PageContext = createContext<PageContext>(defaultValue)
 
 const getDocumentMap = (
   tree: DocumentTypeTree[],
-): Pick<DocumentTypes, "title" | "slug" | "label" | "description">[] =>
+): Pick<DocumentTypeTree, "title" | "slug" | "label" | "description">[] =>
   tree.flatMap(({ title, slug, label, description, children }) => [
     { title, slug, label, description },
     ...getDocumentMap(children),
   ])
 
 export type PageProviderProps = PropsWithChildren<
   {
+    currentVersion: string | undefined | null
     documentTree: DocumentTypeTree[]
     documentTabs?: DocumentTypesNavigationItem[]
     documentBreadcrumbs?: DocumentTypesNavigationItem[]

docs/package.json

@@ -78,6 +78,7 @@
     "remark-slug": "^7.0.1",
     "typescript": "^5.4.5",
     "unified": "^10.1.2",
-    "unist-util-visit": "^5.0.0"
+    "unist-util-visit": "^5.0.0",
+    "find-packages": "^10.0.4"
   }
 }

docs/pages/404.page.tsx

@@ -12,11 +12,11 @@ export const getStaticProps = getStaticCommonProps
 
 type PageProps = InferGetStaticPropsType<typeof getStaticProps>
 
-const Page: NextPage<PageProps> = ({ documentTree }) => {
+const Page: NextPage<PageProps> = ({ currentVersion, documentTree }) => {
   const { tc } = useI18n()
 
   return (
-    <PageProvider {...{ documentTree }}>
+    <PageProvider {...{ currentVersion, documentTree }}>
       <TopLayout>
         <SEO
           title={tc("not-found.title") as string}

docs/pages/examples/[slug].page.tsx

@@ -59,18 +59,22 @@ export const getStaticProps = async ({
   params,
 }: GetStaticPropsContext) => {
   const {
-    props: { documentTree },
+    props: { currentVersion, documentTree },
   } = await getStaticCommonProps({ locale })
   const slug = params?.slug as Slug
 
-  const props = { documentTree, slug }
+  const props = { currentVersion, documentTree, slug }
 
   return { props }
 }
 
 type PageProps = InferGetStaticPropsType<typeof getStaticProps>
 
-const Page: NextPage<PageProps> = ({ slug: currentSlug, documentTree }) => {
+const Page: NextPage<PageProps> = ({
+  currentVersion,
+  slug: currentSlug,
+  documentTree,
+}) => {
   const { t, tc } = useI18n()
 
   const examples = useMemo(() => {
@@ -105,7 +109,7 @@ const Page: NextPage<PageProps> = ({ slug: currentSlug, documentTree }) => {
   }, [currentSlug])
 
   return (
-    <PageProvider {...{ documentTree }}>
+    <PageProvider {...{ currentVersion, documentTree }}>
       <TopLayout>
         <SEO
           title={t(`examples.${currentSlug}.title`)}

docs/pages/index.page.tsx

@@ -22,11 +22,11 @@ export const getStaticProps = getStaticCommonProps
 
 type PageProps = InferGetStaticPropsType<typeof getStaticProps>
 
-const Page: NextPage<PageProps> = ({ documentTree }) => {
+const Page: NextPage<PageProps> = ({ currentVersion, documentTree }) => {
   const { t, tc } = useI18n()
 
   return (
-    <PageProvider {...{ documentTree }}>
+    <PageProvider {...{ currentVersion, documentTree }}>
       <TopLayout>
         <SEO
           title={t("home.title")}

docs/utils/next.ts

@@ -13,19 +13,34 @@ import {
   getDocumentPaths,
 } from "./contentlayer"
 import { toKebabCase } from "./string"
+import { findPackages } from "find-packages"
+import path from "path"
+import { CONSTANT } from "constant"
+
+const getVersion = async () => {
+  const packages = await findPackages(
+    path.resolve(CONSTANT.PATH.ROOT, "packages", "react"),
+  )
+
+  const { version } = packages[0].manifest
+
+  return version ? `v${version}` : null
+}
 
 export const getStaticCommonProps = async ({
   locale,
 }: GetStaticPropsContext) => {
+  const currentVersion = await getVersion()
   const documents = getDocuments(locale)
   const documentTree = getDocumentTree(omitDocumentTabs(documents))()
 
-  return { props: { documents, documentTree } }
+  return { props: { currentVersion, documents, documentTree } }
 }
 
 export const getStaticDocumentProps =
   (documentTypeName: DocumentTypeNames) =>
   async ({ params, locale, defaultLocale }: GetStaticPropsContext) => {
+    const currentVersion = await getVersion()
     const paths = [
       toKebabCase(documentTypeName),
       ...toArray(params?.slug ?? []),
@@ -55,6 +70,7 @@ export const getStaticDocumentProps =
 
     return {
       props: {
+        currentVersion,
         ...document,
         documentTree,
         documentBreadcrumbs,