Merge pull request #256 from fuma-nama/dev

Update to 8.3.0
fuma-nama · Feb 18, 2024 · 3c20378 · 3c20378
2 parents cc4d4ac + 93a0e8f
commit 3c20378
Show file tree

Hide file tree

Showing 39 changed files with 604 additions and 407 deletions.
diff --git a/apps/docs/app/(home)/page.client.tsx b/apps/docs/app/(home)/page.client.tsx
@@ -88,7 +88,7 @@ export function Rain(
 export function Previews(): JSX.Element {
   return (
     <div className="rounded-xl border bg-background p-4 shadow-lg">
-      <p className="text-medium font-medium">I&apos;m satisfied with it</p>
+      <p className="text-sm font-medium">I&apos;m satisfied with it</p>
 
       <a
         href="https://joulev.dev"

diff --git a/apps/docs/app/(home)/page.tsx b/apps/docs/app/(home)/page.tsx
@@ -17,7 +17,7 @@ import {
   StarsIcon,
   TimerIcon,
 } from 'lucide-react';
-import { File, Files } from 'fumadocs-ui/components/files';
+import { File, Files, Folder } from 'fumadocs-ui/components/files';
 import Link from 'next/link';
 import type { HTMLAttributes, ReactNode } from 'react';
 import { cn } from '@/utils/cn';
@@ -381,11 +381,11 @@ function Introduction(): JSX.Element {
             code={code}
           />
           <Files className="z-[2] mt-20 shadow-xl">
-            <File title="content" defaultOpen>
-              <File title="index.mdx" />
-              <File title="hello.mdx" />
-              <File title="components.mdx" />
-            </File>
+            <Folder name="content" defaultOpen>
+              <File name="index.mdx" />
+              <File name="hello.mdx" />
+              <File name="components.mdx" />
+            </Folder>
           </Files>
         </div>
       </div>

diff --git a/apps/docs/app/style.css → apps/docs/app/global.css b/apps/docs/app/style.css → apps/docs/app/global.css
diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx
@@ -1,4 +1,4 @@
-import './style.css';
+import './global.css';
 import 'fumadocs-ui/twoslash.css';
 import { Star } from 'lucide-react';
 import type { Viewport } from 'next';

diff --git a/apps/docs/components/code-block.tsx b/apps/docs/components/code-block.tsx
@@ -20,43 +20,35 @@ export function CodeBlock({
   wrapper,
   ...props
 }: CodeBlockProps): JSX.Element {
-  const tokens = useMemo(
+  const html = useMemo(
     () =>
-      highlighter.codeToTokensWithThemes(code, {
+      highlighter.codeToHtml(code, {
         lang,
+        defaultColor: false,
         themes: {
           light: 'github-light',
           dark: 'github-dark',
         },
+        transformers: [
+          {
+            name: 'remove-pre',
+            root: (root) => {
+              if (root.children[0].type !== 'element') return;
+
+              return {
+                type: 'root',
+                children: root.children[0].children,
+              };
+            },
+          },
+        ],
       }),
     [code, lang],
   );
 
   return (
     <Base.CodeBlock {...wrapper}>
-      <Base.Pre {...props}>
-        <code>
-          {tokens.map((token, i) => (
-            // eslint-disable-next-line react/no-array-index-key -- Should not re-render
-            <span className="line" key={i}>
-              {token.map((s, j) => (
-                <span
-                  // eslint-disable-next-line react/no-array-index-key -- Should not re-render
-                  key={j}
-                  style={Object.fromEntries(
-                    Object.entries(s.variants).map(([k, v]) => [
-                      `--shiki-${k}`,
-                      v.color,
-                    ]),
-                  )}
-                >
-                  {s.content}
-                </span>
-              ))}
-            </span>
-          ))}
-        </code>
-      </Base.Pre>
+      <Base.Pre {...props} dangerouslySetInnerHTML={{ __html: html }} />
     </Base.CodeBlock>
   );
 }
diff --git a/apps/docs/components/preview/index.tsx b/apps/docs/components/preview/index.tsx
@@ -1,7 +1,7 @@
 import { HomeIcon } from 'lucide-react';
 import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
 import { Callout } from 'fumadocs-ui/components/callout';
-import { File, Files } from 'fumadocs-ui/components/files';
+import { File, Folder, Files } from 'fumadocs-ui/components/files';
 import { ImageZoom } from 'fumadocs-ui/components/image-zoom';
 import { InlineTOC } from 'fumadocs-ui/components/inline-toc';
 import { RollButton } from 'fumadocs-ui/components/roll-button';
@@ -90,11 +90,7 @@ export default {
   ),
   accordion: (
     <Wrapper>
-      <Accordions
-        type="single"
-        collapsible
-        className="rounded-xl bg-background px-4"
-      >
+      <Accordions type="single" collapsible>
         <Accordion id="what-is-fumadocs" title="What is Fumadocs?">
           A framework for building documentations
         </Accordion>
@@ -112,17 +108,20 @@ export default {
   files: (
     <Wrapper>
       <Files>
-        <File title="app" defaultOpen>
-          <File title="layout.tsx" />
-          <File title="page.tsx" />
-          <File title="global.css" />
-        </File>
-        <File title="components">
-          <File title="button.tsx" />
-          <File title="tabs.tsx" />
-          <File title="dialog.tsx" />
-        </File>
-        <File title="package.json" />
+        <Folder name="app" defaultOpen>
+          <Folder name="[id]" defaultOpen>
+            <File name="page.tsx" />
+          </Folder>
+          <File name="layout.tsx" />
+          <File name="page.tsx" />
+          <File name="global.css" />
+        </Folder>
+        <Folder name="components">
+          <File name="button.tsx" />
+          <File name="tabs.tsx" />
+          <File name="dialog.tsx" />
+        </Folder>
+        <File name="package.json" />
       </Files>
     </Wrapper>
   ),
@@ -194,5 +193,10 @@ export default {
       </div>
     </Wrapper>
   ),
-  'roll-button': <RollButton />,
+  'roll-button': (
+    <div className="rounded-lg border bg-card p-4 text-muted-foreground">
+      <p className="text-center text-sm">Scroll down to see the button</p>
+      <RollButton />
+    </div>
+  ),
 } as Record<string, ReactNode>;
diff --git a/apps/docs/components/ui/button.tsx b/apps/docs/components/ui/button.tsx
@@ -9,8 +9,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        outline:
-          'border border-input hover:bg-accent hover:text-accent-foreground',
+        outline: 'border hover:bg-accent hover:text-accent-foreground',
         secondary:
           'border bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',

diff --git a/apps/docs/content/docs/ui/components/files.mdx b/apps/docs/content/docs/ui/components/files.mdx
@@ -9,21 +9,27 @@ preview: 'files'
 Wrap file components in `Files`.
 
 ```mdx
-import { File, Files } from 'fumadocs-ui/components/files';
+import { File, Folder, Files } from 'fumadocs-ui/components/files';
 
 <Files>
-  <File title="app" defaultOpen>
-    <File title="layout.tsx" />
-    <File title="page.tsx" />
-    <File title="global.css" />
-  </File>
-  <File title="components">
-    <File title="button.tsx" />
-    <File title="tabs.tsx" />
-    <File title="dialog.tsx" />
-  </File>
-  <File title="package.json" />
+  <Folder name="app" defaultOpen>
+    <File name="layout.tsx" />
+    <File name="page.tsx" />
+    <File name="global.css" />
+  </Folder>
+  <Folder name="components">
+    <File name="button.tsx" />
+    <File name="tabs.tsx" />
+    <File name="dialog.tsx" />
+  </Folder>
+  <File name="package.json" />
 </Files>
 ```
 
+### File
+
 <AutoTypeTable path="ui" name="FileProps" />
+
+### Folder
+
+<AutoTypeTable path="ui" name="FolderProps" />
diff --git a/apps/docs/content/docs/ui/index.mdx b/apps/docs/content/docs/ui/index.mdx
@@ -73,7 +73,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
 
 Create a new catch-all route for our docs, and give it a proper layout.
 
-```tsx title="app/docs/[[...slug]]/layout.tsx"
+```tsx title="app/docs/layout.tsx"
 import { DocsLayout } from 'fumadocs-ui/layout';
 import type { ReactNode } from 'react';
 

diff --git a/apps/docs/content/docs/ui/props.ts b/apps/docs/content/docs/ui/props.ts
@@ -1,6 +1,6 @@
 import type { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
 import type { Callout } from 'fumadocs-ui/components/callout';
-import type { File } from 'fumadocs-ui/components/files';
+import type { File, Folder } from 'fumadocs-ui/components/files';
 import type { InlineTOC } from 'fumadocs-ui/components/inline-toc';
 import type { RollButton } from 'fumadocs-ui/components/roll-button';
 import type { TypeTable } from 'fumadocs-ui/components/type-table';
@@ -26,7 +26,15 @@ export type CalloutProps = Omit<
   keyof ComponentPropsWithoutRef<'div'>
 >;
 
-export type FileProps = ComponentPropsWithoutRef<typeof File>;
+export type FileProps = Omit<
+  ComponentPropsWithoutRef<typeof File>,
+  keyof ComponentPropsWithoutRef<'div'>
+>;
+
+export type FolderProps = Omit<
+  ComponentPropsWithoutRef<typeof Folder>,
+  keyof ComponentPropsWithoutRef<'div'>
+>;
 
 export type InlineTOCProps = Omit<
   ComponentPropsWithoutRef<typeof InlineTOC>,

diff --git a/apps/docs/content/docs/ui/theme.mdx b/apps/docs/content/docs/ui/theme.mdx
@@ -63,53 +63,9 @@ The design system was inspired by [Shadcn UI](https://ui.shadcn.com), you can ea
 }
 ```
 
-<Accordions>
-<Accordion title="Default Styles">
-
-```css
-:root {
-  --background: 0 0% 100%;
-  --foreground: 0 0% 3.9%;
-  --muted: 0 0% 96.1%;
-  --muted-foreground: 0 0% 45.1%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 0 0% 45.1%;
-  --card: 0 0% 99.7%;
-  --card-foreground: 0 0% 3.9%;
-  --border: 0 0% 89.8%;
-  --input: 0 0% 89.8%;
-  --primary: 0 0% 9%;
-  --primary-foreground: 0 0% 98%;
-  --secondary: 0 0% 96.1%;
-  --secondary-foreground: 0 0% 9%;
-  --accent: 0 0% 94.1%;
-  --accent-foreground: 0 0% 9%;
-  --ring: 0 0% 63.9%;
-}
-
-.dark {
-  --background: 0 0% 3.9%;
-  --foreground: 0 0% 98%;
-  --muted: 0 0% 14.9%;
-  --muted-foreground: 0 0% 60.9%;
-  --popover: 0 0% 7%;
-  --popover-foreground: 0 0% 98%;
-  --card: 0 0% 8%;
-  --card-foreground: 0 0% 98%;
-  --border: 0 0% 18%;
-  --input: 0 0% 14.9%;
-  --primary: 0 0% 98%;
-  --primary-foreground: 0 0% 9%;
-  --secondary: 0 0% 14.9%;
-  --secondary-foreground: 0 0% 98%;
-  --accent: 0 0% 14.9%;
-  --accent-foreground: 0 0% 98%;
-  --ring: 0 0% 14.9%;
-}
-```
-
-</Accordion>
-</Accordions>
+> Only a subset of colors are provided by Fumadocs UI.
+>
+> It may not compatible with Shadcn UI.
 
 ## DocsUI Plugin
 

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -13,11 +13,9 @@
   },
   "dependencies": {
     "@next/env": "^14.0.0",
-    "@radix-ui/react-hover-card": "^1.0.7",
     "algoliasearch": "^4.20.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "fast-glob": "^3.3.1",
     "fumadocs-core": "workspace:*",
     "fumadocs-mdx": "workspace:*",
     "fumadocs-twoslash": "workspace:^",
@@ -31,7 +29,7 @@
     "react-dom": "18.2.0",
     "rehype-katex": "^7.0.0",
     "remark-math": "^6.0.0",
-    "shiki": "^1.0.0-beta.2",
+    "shiki": "^1.1.2",
     "tailwind-merge": "^2.0.0",
     "zod": "^3.22.4"
   },

diff --git a/apps/docs/tailwind.config.js b/apps/docs/tailwind.config.js
@@ -2,7 +2,6 @@ const { createPreset } = require('fumadocs-ui/tailwind-plugin');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: 'class',
   content: [
     './components/**/*.{ts,tsx}',
     './app/**/*.{ts,tsx}',

diff --git a/examples/contentlayer/package.json b/examples/contentlayer/package.json
@@ -9,9 +9,9 @@
   },
   "dependencies": {
     "contentlayer": "0.3.4",
-    "fumadocs-contentlayer": "1.0.4",
-    "fumadocs-core": "8.2.0",
-    "fumadocs-ui": "8.2.0",
+    "fumadocs-contentlayer": "1.0.5",
+    "fumadocs-core": "8.3.0",
+    "fumadocs-ui": "8.3.0",
     "next": "14.0.4",
     "next-contentlayer": "0.3.4",
     "react": "18.2.0",

diff --git a/examples/next-mdx/package.json b/examples/next-mdx/package.json
@@ -8,9 +8,9 @@
     "start": "next start"
   },
   "dependencies": {
-    "fumadocs-core": "8.2.0",
-    "fumadocs-mdx": "8.0.3",
-    "fumadocs-ui": "8.2.0",
+    "fumadocs-core": "8.3.0",
+    "fumadocs-mdx": "8.0.4",
+    "fumadocs-ui": "8.3.0",
     "next": "14.0.4",
     "react": "18.2.0",
     "react-dom": "18.2.0"

diff --git a/package.json b/package.json
@@ -19,14 +19,14 @@
   "prettier": "@vercel/style-guide/prettier",
   "devDependencies": {
     "@changesets/cli": "^2.26.2",
-    "@typescript-eslint/eslint-plugin": "^6.7.0",
-    "@typescript-eslint/parser": "^6.7.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
     "@vercel/style-guide": "^5.1.0",
     "concurrently": "^8.2.1",
     "prettier": "^3.0.3",
     "rimraf": "^5.0.5",
     "tsup": "8.0.2",
-    "turbo": "1.12.3",
+    "turbo": "1.12.4",
     "typescript": "5.3.3",
     "vitest": "^1.0.4"
   },

diff --git a/packages/contentlayer/CHANGELOG.md b/packages/contentlayer/CHANGELOG.md
@@ -1,5 +1,11 @@
 # fumadocs-contentlayer
 
+## 1.0.5
+
+### Patch Changes
+
+- [email protected]
+
 ## 1.0.4
 
 ### Patch Changes