feat: add new pages overview and props on components

packages/Accordion/docs/index.mdx

@@ -1,4 +1,5 @@
 ---
+parent: components
 category: data-display
 ---
 

packages/Alert/docs/index.mdx

@@ -1,4 +1,5 @@
 ---
+parent: components
 category: feedback
 ---
 

packages/Avatar/docs/index.mdx

@@ -1,4 +1,5 @@
 ---
+parent: components
 category: data-display
 ---
 

packages/Box/package.json

@@ -15,7 +15,7 @@
     "./dist/index.doc.json": "./dist/index.doc.json"
   },
   "scripts": {
-    "build": "node ../../scripts/build.js --useClient",
+    "build": "node ../../scripts/build.js",
     "test": "jest",
     "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
     "doc": "node -r esm ../../scripts/doc-props.js --name Box"

packages/Copy/docs/index.mdx

@@ -1,5 +1,6 @@
 ---
-category: utilities
+parent: hooks
+name: 'useCopy'
 ---
 
 import { useCopyText } from '@welcome-ui/utils.copy'

packages/Core/package.json

@@ -13,7 +13,7 @@
     }
   },
   "scripts": {
-    "build": "node ../../scripts/build.js --useClient",
+    "build": "node ../../scripts/build.js",
     "test": "jest",
     "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
   },

packages/Link/package.json

@@ -15,7 +15,7 @@
     "./dist/index.doc.json": "./dist/index.doc.json"
   },
   "scripts": {
-    "build": "node ../../scripts/build.js --useClient",
+    "build": "node ../../scripts/build.js",
     "test": "jest",
     "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
     "doc": "node -r esm ../../scripts/doc-props.js --name Link"

packages/Text/package.json

@@ -15,7 +15,7 @@
     "./dist/index.doc.json": "./dist/index.doc.json"
   },
   "scripts": {
-    "build": "node ../../scripts/build.js --useClient",
+    "build": "node ../../scripts/build.js",
     "test": "jest",
     "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
     "doc": "node -r esm ../../scripts/doc-props.js --name Text"

packages/Utils/package.json

@@ -13,7 +13,7 @@
     }
   },
   "scripts": {
-    "build": "node ../../scripts/build.js --useClient",
+    "build": "node ../../scripts/build.js",
     "test": "jest",
     "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
   },

scripts/build.js

@@ -34,7 +34,7 @@ const options = {
     }),
   ],
   banner: {
-    js: useClient ? '"use client"' : '',
+    js: '"use client"',
   },
 }
 

website/app/components/[category]/layout.tsx

@@ -0,0 +1,18 @@
+import { Sidebar } from '@/build-app/components/Sidebar'
+import { DocumentationLayout } from '@/build-app/layouts/Documentation'
+import { getDocsPages } from '@/build-app/utils/pages-docs'
+import { Tabs } from './tabs'
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  const pages = getDocsPages()
+
+  return (
+    <DocumentationLayout>
+      <Sidebar pages={pages} />
+      <div>
+        <Tabs />
+        {children}
+      </div>
+    </DocumentationLayout>
+  )
+}

website/app/design/[category]/page.tsx → website/app/components/[category]/page.tsx

@@ -1,36 +1,39 @@
 import { Mdx } from '@/build-app/components/Mdx'
-import { Sidebar } from '@/build-app/components/Sidebar'
 import { TableOfContent } from '@/build-app/components/TableOfContent'
-import { DocumentationLayout } from '@/build-app/layouts/Documentation'
 import { getPageContent } from '@/build-app/utils/page-content'
-import { getDesignPages } from '@/build-app/utils/pages-design'
-import Link from 'next/link'
+import { getDocsPages, getStaticParams } from '@/build-app/utils/pages-docs'
+import { startCase } from 'lodash'
 import { notFound } from 'next/navigation'
 
 type PageProps = {
   params: {
+    page: string
     category: string
   }
 }
 
+export async function generateStaticParams() {
+  const pages = getDocsPages()
+
+  return getStaticParams(pages)
+}
+
 export default function Page({ params }: PageProps) {
   const { category } = params
 
-  const { isNotFound, tree, contentWithoutMatter } = getPageContent(`design/${category}.md`)
-  const pages = getDesignPages()
+  const { isNotFound, tree, contentWithoutMatter } = getPageContent(
+    `${startCase(category)}/docs/index.mdx`,
+    true
+  )
 
   if (isNotFound) return notFound()
 
   return (
-    <DocumentationLayout>
-      <div>
-        <Link href={`/design`}>Go to main page</Link>
-        <Sidebar pages={pages} relativePath="/design" />
-      </div>
+    <>
       <main>
         <Mdx>{contentWithoutMatter}</Mdx>
       </main>
       <TableOfContent tree={tree} />
-    </DocumentationLayout>
+    </>
   )
 }

website/app/components/[category]/props/page.tsx

@@ -0,0 +1,22 @@
+import { Properties } from '@/build-app/components/Props'
+import { getComponentProperties } from '@/build-app/utils/components-properties'
+import { getDocsPages, getStaticParams } from '@/build-app/utils/pages-docs'
+
+type PageProps = {
+  params: {
+    category: string
+  }
+}
+
+export async function generateStaticParams() {
+  const pages = getDocsPages()
+
+  return getStaticParams(pages)
+}
+
+export default function Page({ params }: PageProps) {
+  console.log(params)
+  const properties = getComponentProperties(params.category)
+
+  return <Properties items={properties} />
+}

website/app/components/[category]/tabs.tsx

@@ -0,0 +1,22 @@
+'use client'
+
+import { Tab, useTab } from '@welcome-ui/tabs'
+import Link from 'next/link'
+import { useParams, usePathname } from 'next/navigation'
+
+export function Tabs() {
+  const pathname = usePathname()
+  const tab = useTab({ selectedId: pathname.split('/').pop() })
+  const { category } = useParams()
+
+  return (
+    <Tab.List aria-label="Tabs" store={tab}>
+      <Tab as={Link} href={`/components/${category}`} store={tab} id={category as string}>
+        Overview
+      </Tab>
+      <Tab store={tab} as={Link} href={`/components/${category}/props`} id="props">
+        Props
+      </Tab>
+    </Tab.List>
+  )
+}

website/app/docs/page.tsx → website/app/components/page.tsx

@@ -1,15 +1,13 @@
 import { Sidebar } from '@/build-app/components/Sidebar'
 import { getDocsPages } from '@/build-app/utils/pages-docs'
-import Link from 'next/link'
 
 export default function Page() {
   const pages = getDocsPages()
 
   return (
-    <div>
-      <h1>Docs</h1>
-      <Link href="/">Back Home</Link>
-      <Sidebar pages={pages} relativePath="/docs" />
-    </div>
+    <>
+      <h1>Components</h1>
+      <Sidebar pages={pages} />
+    </>
   )
 }

website/app/docs/[category]/[page]/page.tsx → website/app/hooks/[category]/page.tsx

@@ -5,7 +5,6 @@ import { DocumentationLayout } from '@/build-app/layouts/Documentation'
 import { getPageContent } from '@/build-app/utils/page-content'
 import { getDocsPages, getStaticParams } from '@/build-app/utils/pages-docs'
 import { startCase } from 'lodash'
-import Link from 'next/link'
 import { notFound } from 'next/navigation'
 
 type PageProps = {
@@ -16,28 +15,25 @@ type PageProps = {
 }
 
 export async function generateStaticParams() {
-  const pages = getDocsPages()
-
+  const pages = getDocsPages('hooks')
+  console.log(pages)
   return getStaticParams(pages)
 }
 
 export default function Page({ params }: PageProps) {
-  const { page } = params
+  const { category } = params
 
   const { isNotFound, tree, contentWithoutMatter } = getPageContent(
-    `${startCase(page)}/docs/index.mdx`,
+    `${startCase(category)}/docs/index.mdx`,
     true
   )
-  const pages = getDocsPages()
+  const pages = getDocsPages('hooks')
 
   if (isNotFound) return notFound()
 
   return (
     <DocumentationLayout>
-      <div>
-        <Link href={`/docs`}>Go to main page</Link>
-        <Sidebar pages={pages} relativePath="/docs" />
-      </div>
+      <Sidebar pages={pages} />
       <main>
         <Mdx>{contentWithoutMatter}</Mdx>
       </main>

website/app/hooks/page.tsx

@@ -0,0 +1,13 @@
+import { Sidebar } from '@/build-app/components/Sidebar'
+import { getDocsPages } from '@/build-app/utils/pages-docs'
+
+export default function Page() {
+  const pages = getDocsPages('hooks')
+
+  return (
+    <>
+      <h1>Hooks</h1>
+      <Sidebar pages={pages} />
+    </>
+  )
+}

website/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from 'next'
 import StyledComponentsRegistry from '@/build-app/registry'
 import { ThemeProvider } from '@/build-app/components/ThemeProvider'
+import Link from 'next/link'
 
 export const metadata: Metadata = {
   title: 'Welcome UI - Customizable design system with react',
@@ -16,7 +17,22 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       </head>
       <body>
         <StyledComponentsRegistry>
-          <ThemeProvider>{children}</ThemeProvider>
+          <ThemeProvider>
+            <header>
+              <ul style={{ display: 'flex', gap: 10 }}>
+                <li>
+                  <Link href="/">Home</Link>
+                </li>
+                <li>
+                  <Link href="/components">Components</Link>
+                </li>
+                <li>
+                  <Link href="/hooks">Hooks</Link>
+                </li>
+              </ul>
+            </header>
+            {children}
+          </ThemeProvider>
         </StyledComponentsRegistry>
       </body>
     </html>

website/app/page.tsx

@@ -1,10 +1,3 @@
-import Link from 'next/link'
-
 export default function Home() {
-  return (
-    <div style={{ display: 'grid', gap: 20 }}>
-      <Link href="/design">Design</Link>
-      <Link href="/docs">Docs</Link>
-    </div>
-  )
+  return <h1>Home</h1>
 }