MDX: Sync version with next-docs

.changeset/config.json

@@ -2,7 +2,9 @@
   "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
   "changelog": "@changesets/cli/changelog",
   "commit": false,
-  "fixed": [["next-docs-zeta", "next-docs-ui", "next-docs-mdx"]],
+  "fixed": [
+    ["next-docs-zeta", "next-docs-ui", "next-docs-mdx", "create-next-docs-app"]
+  ],
   "linked": [],
   "access": "restricted",
   "baseBranch": "dev",

.changeset/thick-berries-hope.md

@@ -0,0 +1,5 @@
+---
+'create-next-docs-app': patch
+---
+
+Sync version with next-docs

apps/docs/components/theme-switch-server.tsx

@@ -1,3 +0,0 @@
-import { ThemeSwitch as Original } from './theme-switch';
-
-export const ThemeSwitch = ((p) => <Original {...p} />) as typeof Original;

apps/docs/content/docs/headless/index.mdx

@@ -24,10 +24,6 @@ It's recommended to use Next Docs with [Tailwind CSS](https://tailwindcss.com) +
 next-docs-zeta
 ```
 
-### Demo
-
-Open in [CodeSandbox](https://githubbox.com/fuma-nama/next-docs-template).
-
 ## Guide
 
 1. ### Choose a Source

apps/docs/content/docs/ui/theme.mdx

@@ -3,7 +3,7 @@ title: Theming
 description: Add Theme to Next Docs UI
 ---
 
-import { ThemeSwitch } from '@/components/theme-switch-server';
+import { ThemeSwitch } from '@/components/theme-switch';
 import { blueTheme } from '@/components/themes.js';
 
 The design system was inspired on [Shadcn UI](https://ui.shadcn.com), allowing
@@ -58,8 +58,6 @@ You can easily customise all the properties using css variables.
 }
 ```
 
-<br />
-
 <Accordions>
 <Accordion title="Default Styles">
 

apps/docs/mdx-components.tsx

@@ -15,12 +15,12 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
       <Pre {...props} ref={undefined} pre={{ className: 'max-h-[400px]' }} />
     ),
     Image: defaultComponents.img,
-    Tabs: ((p) => <Tabs {...p} />) as typeof Tabs,
-    Tab: ((p) => <Tab {...p} />) as typeof Tab,
-    Callout: ((p) => <Callout {...p} />) as typeof Callout,
-    TypeTable: ((p) => <TypeTable {...p} />) as typeof TypeTable,
-    Accordion: ((p) => <Accordion {...p} />) as typeof Accordion,
-    Accordions: ((p) => <Accordions {...p} />) as typeof Accordions,
+    Tabs,
+    Tab,
+    Callout,
+    TypeTable,
+    Accordion,
+    Accordions,
     Wrapper,
     InstallTabs: ({
       items,

package.json

@@ -14,7 +14,6 @@
     "release": "turbo run build --filter=./packages/* && changeset publish",
     "test": "turbo run test",
     "types:check": "turbo run types:check",
-    "update-example": "node ./scripts/on-push.js",
     "version": "changeset version && pnpm install --lockfile-only"
   },
   "prettier": "@vercel/style-guide/prettier",

packages/create-next-docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-docs-app",
-  "version": "1.7.4",
+  "version": "6.0.2",
   "description": "Create a new documentation site with Next Docs UI",
   "keywords": [
     "NextJs",

packages/mdx/src/loader-mdx.ts

@@ -2,7 +2,7 @@ import path from 'node:path';
 import { createProcessor, type ProcessorOptions } from '@mdx-js/mdx';
 import type { Processor } from '@mdx-js/mdx/lib/core';
 import grayMatter from 'gray-matter';
-import type { LoaderContext } from 'webpack';
+import { type LoaderContext } from 'webpack';
 
 type Options = ProcessorOptions;
 

packages/ui/src/mdx/default.tsx

@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from 'react';
+import type { FC, HTMLAttributes } from 'react';
 import serverComponents from '@/internal/mdx-server';
 
 const { Pre } = await import('@/internal/mdx-client');
@@ -8,4 +8,28 @@ const defaultMdxComponents = {
   ...serverComponents,
 };
 
+/**
+ * Sometimes, if you directly pass a client component to MDX Components, it will throw an error
+ *
+ * To solve this, you can re-create the component in a server component like: `(props) => <Component {...props} />`
+ *
+ * This function does that for you
+ *
+ * @param c - MDX Components
+ * @returns MDX Components with re-created client components
+ */
+export function createComponents<
+  Components extends Record<string, FC<unknown>>,
+>(c: Components): Components {
+  const mapped = Object.entries(c).map(([k, V]) => {
+    // Client components are empty objects
+    return [
+      k,
+      Object.keys(V).length === 0 ? (props: object) => <V {...props} /> : V,
+    ];
+  });
+
+  return Object.fromEntries(mapped) as Components;
+}
+
 export { defaultMdxComponents as default };

scripts/on-push.js

@@ -1,17 +0,0 @@
-/* eslint-disable */
-
-// Automatically add changeset for create-next-docs-app
-const { writeFileSync, existsSync } = require('fs');
-const path = require('path');
-const dir = path.resolve(process.cwd(), '.changeset');
-if (!existsSync(dir)) throw new Error("Can't find changeset folder");
-
-const content = `---
-'create-next-docs-app': patch
----
-
-Update Examples`;
-
-writeFileSync(path.resolve(dir, 'create-next-docs-app.md'), content);
-
-console.log('Added changeset automatically');