From 63496daf0848f4ece7ce4bbd7d91c6f7a4ac162e Mon Sep 17 00:00:00 2001 From: fuma-nama Date: Thu, 12 Sep 2024 19:23:41 +0800 Subject: [PATCH] UI & Twoslash: Move Twoslash UI components to `fumadocs-twoslash` --- .changeset/red-queens-bake.md | 28 +++++++++ apps/docs/app/docs/[...slug]/page.tsx | 2 +- apps/docs/app/docs/layout.tsx | 2 +- .../docs/ui/(integrations)/twoslash.mdx | 4 +- packages/twoslash/package.json | 21 ++++++- packages/twoslash/postcss.config.js | 8 +++ packages/twoslash/src/ui/cn.ts | 1 + packages/twoslash/src/ui/index.ts | 1 + packages/twoslash/src/ui/popover.tsx | 31 ++++++++++ .../twoslash => twoslash/src/ui}/popup.tsx | 8 +-- .../{ui/css => twoslash/styles}/twoslash.css | 0 packages/twoslash/tailwind.config.js | 7 +++ packages/twoslash/tsup.config.ts | 5 +- packages/ui/package.json | 36 ------------ packages/ui/tsup.config.ts | 1 - pnpm-lock.yaml | 57 +++++++++++++------ 16 files changed, 146 insertions(+), 66 deletions(-) create mode 100644 .changeset/red-queens-bake.md create mode 100644 packages/twoslash/postcss.config.js create mode 100644 packages/twoslash/src/ui/cn.ts create mode 100644 packages/twoslash/src/ui/index.ts create mode 100644 packages/twoslash/src/ui/popover.tsx rename packages/{ui/src/twoslash => twoslash/src/ui}/popup.tsx (95%) rename packages/{ui/css => twoslash/styles}/twoslash.css (100%) create mode 100644 packages/twoslash/tailwind.config.js diff --git a/.changeset/red-queens-bake.md b/.changeset/red-queens-bake.md new file mode 100644 index 000000000..6f5c27976 --- /dev/null +++ b/.changeset/red-queens-bake.md @@ -0,0 +1,28 @@ +--- +'fumadocs-twoslash': major +'fumadocs-ui': major +--- + +**Move Twoslash UI components to `fumadocs-twoslash`** + +**why:** Isolate logic from Fumadocs UI + +**migrate:** + +Before: + +```ts +import "fumadocs-ui/twoslash.css" + +import { Popup } from "fumadocs-ui/twoslash/popup" +``` + +After: + +```ts +import "fumadocs-twoslash/twoslash.css" + +import { Popup } from "fumadocs-twoslash/ui" +``` + +**Tailwind CSS is now required for Twoslash integration.** diff --git a/apps/docs/app/docs/[...slug]/page.tsx b/apps/docs/app/docs/[...slug]/page.tsx index c89e5d172..17f09d682 100644 --- a/apps/docs/app/docs/[...slug]/page.tsx +++ b/apps/docs/app/docs/[...slug]/page.tsx @@ -9,7 +9,7 @@ import { import { notFound } from 'next/navigation'; import { type ComponentProps, type FC, Fragment } from 'react'; import defaultComponents from 'fumadocs-ui/mdx'; -import { Popup, PopupContent, PopupTrigger } from 'fumadocs-ui/twoslash/popup'; +import { Popup, PopupContent, PopupTrigger } from 'fumadocs-twoslash/ui'; import { Tab, Tabs } from 'fumadocs-ui/components/tabs'; import { Callout } from 'fumadocs-ui/components/callout'; import { TypeTable } from 'fumadocs-ui/components/type-table'; diff --git a/apps/docs/app/docs/layout.tsx b/apps/docs/app/docs/layout.tsx index 024598e8c..491ad2e1f 100644 --- a/apps/docs/app/docs/layout.tsx +++ b/apps/docs/app/docs/layout.tsx @@ -1,7 +1,7 @@ import { DocsLayout } from 'fumadocs-ui/layouts/docs'; import type { ReactNode } from 'react'; import { docsOptions } from '@/app/layout.config'; -import 'fumadocs-ui/twoslash.css'; +import 'fumadocs-twoslash/twoslash.css'; export default function Layout({ children, diff --git a/apps/docs/content/docs/ui/(integrations)/twoslash.mdx b/apps/docs/content/docs/ui/(integrations)/twoslash.mdx index 9627ca7f6..9ad0c0858 100644 --- a/apps/docs/content/docs/ui/(integrations)/twoslash.mdx +++ b/apps/docs/content/docs/ui/(integrations)/twoslash.mdx @@ -40,11 +40,11 @@ export default withMDX(config); Add stylings and components. ```ts title="layout.tsx" -import 'fumadocs-ui/twoslash.css'; +import 'fumadocs-twoslash/twoslash.css'; ``` ```ts -import { Popup, PopupContent, PopupTrigger } from 'fumadocs-ui/twoslash/popup'; +import { Popup, PopupContent, PopupTrigger } from 'fumadocs-twoslash/ui'; const mdxComponents = { Popup, diff --git a/packages/twoslash/package.json b/packages/twoslash/package.json index 5a654e53f..3a3398f40 100644 --- a/packages/twoslash/package.json +++ b/packages/twoslash/package.json @@ -12,6 +12,17 @@ "license": "MIT", "author": "Fuma Nama", "type": "module", + "exports": { + "./twoslash.css": "./dist/twoslash.css", + ".": { + "import": "./dist/index.js", + "types": "./dist/index.d.ts" + }, + "./ui": { + "import": "./dist/ui/index.js", + "types": "./dist/ui/index.d.ts" + } + }, "main": "./dist/index.js", "types": "./dist/index.d.ts", "files": [ @@ -25,21 +36,29 @@ "types:check": "tsc --noEmit" }, "dependencies": { + "@radix-ui/react-popover": "^1.1.1", "@shikijs/twoslash": "^1.16.2", "mdast-util-from-markdown": "^2.0.1", "mdast-util-gfm": "^3.0.0", - "mdast-util-to-hast": "^13.2.0" + "mdast-util-to-hast": "^13.2.0", + "tailwind-merge": "^2.5.2" }, "devDependencies": { "@types/hast": "^3.0.4", "@types/mdast": "^4.0.3", + "@types/node": "22.5.4", + "@types/react": "^18.3.5", "eslint-config-custom": "workspace:*", "fumadocs-ui": "workspace:*", + "postcss": "^8.4.45", + "postcss-lightningcss": "^1.0.1", "shiki": "^1.16.2", + "tailwindcss": "^3.4.10", "tsconfig": "workspace:*" }, "peerDependencies": { "fumadocs-ui": "13.x.x", + "react": ">= 18", "shiki": "1.x.x" }, "publishConfig": { diff --git a/packages/twoslash/postcss.config.js b/packages/twoslash/postcss.config.js new file mode 100644 index 000000000..8abe9017f --- /dev/null +++ b/packages/twoslash/postcss.config.js @@ -0,0 +1,8 @@ +export default { + plugins: { + tailwindcss: {}, + 'postcss-lightningcss': { + browsers: '>= .25%', + }, + }, +}; diff --git a/packages/twoslash/src/ui/cn.ts b/packages/twoslash/src/ui/cn.ts new file mode 100644 index 000000000..ba66fd250 --- /dev/null +++ b/packages/twoslash/src/ui/cn.ts @@ -0,0 +1 @@ +export { twMerge as cn } from 'tailwind-merge'; diff --git a/packages/twoslash/src/ui/index.ts b/packages/twoslash/src/ui/index.ts new file mode 100644 index 000000000..beb7b990a --- /dev/null +++ b/packages/twoslash/src/ui/index.ts @@ -0,0 +1 @@ +export * from './popup'; diff --git a/packages/twoslash/src/ui/popover.tsx b/packages/twoslash/src/ui/popover.tsx new file mode 100644 index 000000000..66829f20a --- /dev/null +++ b/packages/twoslash/src/ui/popover.tsx @@ -0,0 +1,31 @@ +import * as PopoverPrimitive from '@radix-ui/react-popover'; +import * as React from 'react'; +import { cn } from './cn'; + +const Popover = PopoverPrimitive.Root; + +const PopoverTrigger = PopoverPrimitive.Trigger; + +const PopoverContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => ( + + + +)); +PopoverContent.displayName = PopoverPrimitive.Content.displayName; + +const PopoverClose = PopoverPrimitive.PopoverClose; + +export { Popover, PopoverTrigger, PopoverContent, PopoverClose }; diff --git a/packages/ui/src/twoslash/popup.tsx b/packages/twoslash/src/ui/popup.tsx similarity index 95% rename from packages/ui/src/twoslash/popup.tsx rename to packages/twoslash/src/ui/popup.tsx index 7309a6225..531ea44ae 100644 --- a/packages/ui/src/twoslash/popup.tsx +++ b/packages/twoslash/src/ui/popup.tsx @@ -1,12 +1,8 @@ 'use client'; import * as React from 'react'; -import { - Popover, - PopoverContent, - PopoverTrigger, -} from '@/components/ui/popover'; -import { cn } from '@/utils/cn'; +import { Popover, PopoverContent, PopoverTrigger } from './popover'; +import { cn } from './cn'; interface PopupContextObject { open: boolean; diff --git a/packages/ui/css/twoslash.css b/packages/twoslash/styles/twoslash.css similarity index 100% rename from packages/ui/css/twoslash.css rename to packages/twoslash/styles/twoslash.css diff --git a/packages/twoslash/tailwind.config.js b/packages/twoslash/tailwind.config.js new file mode 100644 index 000000000..a3b70f137 --- /dev/null +++ b/packages/twoslash/tailwind.config.js @@ -0,0 +1,7 @@ +import { createPreset } from 'fumadocs-ui/tailwind-plugin'; + +/** @type {import('tailwindcss').Config} */ +export default { + content: ['./src/**/*.{ts,tsx}'], + presets: [createPreset()], +}; diff --git a/packages/twoslash/tsup.config.ts b/packages/twoslash/tsup.config.ts index 5851c745b..99e3851c6 100644 --- a/packages/twoslash/tsup.config.ts +++ b/packages/twoslash/tsup.config.ts @@ -1,8 +1,11 @@ +import * as fs from 'node:fs'; import { defineConfig } from 'tsup'; +fs.copyFileSync('./styles/twoslash.css', './dist/twoslash.css'); + export default defineConfig({ dts: true, target: 'es6', format: 'esm', - entry: ['src/index.ts'], + entry: ['src/index.ts', 'src/ui/index.ts'], }); diff --git a/packages/ui/package.json b/packages/ui/package.json index 15427880c..9a9120b4f 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -13,7 +13,6 @@ "type": "module", "exports": { "./style.css": "./dist/style.css", - "./twoslash.css": "./dist/twoslash.css", "./image-zoom.css": "./dist/image-zoom.css", "./tailwind-plugin": { "import": "./dist/tailwind-plugin.js", @@ -24,10 +23,6 @@ "import": "./dist/components/*.js", "types": "./dist/components/*.d.ts" }, - "./twoslash/*": { - "import": "./dist/twoslash/*.js", - "types": "./dist/twoslash/*.d.ts" - }, "./i18n": { "import": "./dist/i18n.js", "types": "./dist/i18n.d.ts" @@ -53,37 +48,6 @@ "types": "./dist/og.d.ts" } }, - "typesVersions": { - "*": { - "tailwind-plugin": [ - "./dist/tailwind-plugin.d.ts" - ], - "components/*": [ - "./dist/components/*.d.ts" - ], - "twoslash/*": [ - "./dist/twoslash/*.d.ts" - ], - "i18n": [ - "./dist/i18n.d.ts" - ], - "layouts/*": [ - "./dist/layouts/*.d.ts" - ], - "page": [ - "./dist/page.d.ts" - ], - "provider": [ - "./dist/provider.d.ts" - ], - "mdx": [ - "./dist/mdx.d.ts" - ], - "og": [ - "./dist/og.d.ts" - ] - } - }, "files": [ "dist/*" ], diff --git a/packages/ui/tsup.config.ts b/packages/ui/tsup.config.ts index 67960c824..2b7281a79 100644 --- a/packages/ui/tsup.config.ts +++ b/packages/ui/tsup.config.ts @@ -35,7 +35,6 @@ export default defineConfig({ `./src/components/{${exportedComponents.join(',')}}.tsx`, './src/layouts/{docs,shared,home}.tsx', './src/{i18n,home-layout,layout,page,provider,mdx,tailwind-plugin,og}.{ts,tsx}', - './src/twoslash/popup.tsx', './src/**/*.client.tsx', ], external: ['server-only', '../../dist/image-zoom.css', 'tailwindcss'], diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d77cb5ebd..076c81d83 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -37,7 +37,7 @@ importers: version: 6.0.1 tsup: specifier: 8.2.4 - version: 8.2.4(@swc/core@1.7.23(@swc/helpers@0.5.12))(jiti@1.21.6)(postcss@8.4.45)(tsx@4.19.0)(typescript@5.5.4)(yaml@2.5.1) + version: 8.2.4(@swc/core@1.7.23)(jiti@1.21.6)(postcss@8.4.45)(tsx@4.19.0)(typescript@5.5.4)(yaml@2.5.1) turbo: specifier: 2.1.1 version: 2.1.1 @@ -185,7 +185,7 @@ importers: version: 5.5.4 webpack: specifier: ^5.90.3 - version: 5.90.3(@swc/core@1.7.23(@swc/helpers@0.5.12))(esbuild@0.23.0) + version: 5.90.3(@swc/core@1.7.23)(esbuild@0.23.0) examples/content-collections: dependencies: @@ -749,7 +749,7 @@ importers: version: 11.0.5 webpack: specifier: ^5.90.3 - version: 5.90.3(@swc/core@1.7.23(@swc/helpers@0.5.12))(esbuild@0.23.1) + version: 5.90.3(@swc/core@1.7.23)(esbuild@0.23.1) packages/mdx-remote: dependencies: @@ -910,6 +910,9 @@ importers: packages/twoslash: dependencies: + '@radix-ui/react-popover': + specifier: ^1.1.1 + version: 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@shikijs/twoslash': specifier: ^1.16.2 version: 1.16.2(typescript@5.5.4) @@ -922,6 +925,12 @@ importers: mdast-util-to-hast: specifier: ^13.2.0 version: 13.2.0 + react: + specifier: '>= 18' + version: 18.3.1 + tailwind-merge: + specifier: ^2.5.2 + version: 2.5.2 devDependencies: '@types/hast': specifier: ^3.0.4 @@ -929,15 +938,30 @@ importers: '@types/mdast': specifier: ^4.0.3 version: 4.0.4 + '@types/node': + specifier: 22.5.4 + version: 22.5.4 + '@types/react': + specifier: ^18.3.5 + version: 18.3.5 eslint-config-custom: specifier: workspace:* version: link:../eslint-config-custom fumadocs-ui: specifier: workspace:* version: link:../ui + postcss: + specifier: ^8.4.45 + version: 8.4.45 + postcss-lightningcss: + specifier: ^1.0.1 + version: 1.0.1(postcss@8.4.45) shiki: specifier: ^1.16.2 version: 1.16.2 + tailwindcss: + specifier: ^3.4.10 + version: 3.4.10 tsconfig: specifier: workspace:* version: link:../tsconfig @@ -9231,7 +9255,7 @@ snapshots: '@swc/core-win32-x64-msvc': 1.7.22 '@swc/helpers': 0.5.12 - '@swc/core@1.7.23(@swc/helpers@0.5.12)': + '@swc/core@1.7.23': dependencies: '@swc/counter': 0.1.3 '@swc/types': 0.1.12 @@ -9246,7 +9270,6 @@ snapshots: '@swc/core-win32-arm64-msvc': 1.7.23 '@swc/core-win32-ia32-msvc': 1.7.23 '@swc/core-win32-x64-msvc': 1.7.23 - '@swc/helpers': 0.5.12 optional: true '@swc/counter@0.1.3': {} @@ -13599,28 +13622,28 @@ snapshots: term-size@2.2.1: {} - terser-webpack-plugin@5.3.10(@swc/core@1.7.23(@swc/helpers@0.5.12))(esbuild@0.23.0)(webpack@5.90.3(@swc/core@1.7.23(@swc/helpers@0.5.12))(esbuild@0.23.0)): + terser-webpack-plugin@5.3.10(@swc/core@1.7.23)(esbuild@0.23.0)(webpack@5.90.3(@swc/core@1.7.23)(esbuild@0.23.0)): dependencies: '@jridgewell/trace-mapping': 0.3.25 jest-worker: 27.5.1 schema-utils: 3.3.0 serialize-javascript: 6.0.2 terser: 5.31.1 - webpack: 5.90.3(@swc/core@1.7.23(@swc/helpers@0.5.12))(esbuild@0.23.0) + webpack: 5.90.3(@swc/core@1.7.23)(esbuild@0.23.0) optionalDependencies: - '@swc/core': 1.7.23(@swc/helpers@0.5.12) + '@swc/core': 1.7.23 esbuild: 0.23.0 - terser-webpack-plugin@5.3.10(@swc/core@1.7.23(@swc/helpers@0.5.12))(esbuild@0.23.1)(webpack@5.90.3(@swc/core@1.7.23(@swc/helpers@0.5.12))(esbuild@0.23.1)): + terser-webpack-plugin@5.3.10(@swc/core@1.7.23)(esbuild@0.23.1)(webpack@5.90.3(@swc/core@1.7.23)(esbuild@0.23.1)): dependencies: '@jridgewell/trace-mapping': 0.3.25 jest-worker: 27.5.1 schema-utils: 3.3.0 serialize-javascript: 6.0.2 terser: 5.31.1 - webpack: 5.90.3(@swc/core@1.7.23(@swc/helpers@0.5.12))(esbuild@0.23.1) + webpack: 5.90.3(@swc/core@1.7.23)(esbuild@0.23.1) optionalDependencies: - '@swc/core': 1.7.23(@swc/helpers@0.5.12) + '@swc/core': 1.7.23 esbuild: 0.23.1 terser@5.31.1: @@ -13723,7 +13746,7 @@ snapshots: tslib@2.7.0: {} - tsup@8.2.4(@swc/core@1.7.23(@swc/helpers@0.5.12))(jiti@1.21.6)(postcss@8.4.45)(tsx@4.19.0)(typescript@5.5.4)(yaml@2.5.1): + tsup@8.2.4(@swc/core@1.7.23)(jiti@1.21.6)(postcss@8.4.45)(tsx@4.19.0)(typescript@5.5.4)(yaml@2.5.1): dependencies: bundle-require: 5.0.0(esbuild@0.23.0) cac: 6.7.14 @@ -13742,7 +13765,7 @@ snapshots: sucrase: 3.35.0 tree-kill: 1.2.2 optionalDependencies: - '@swc/core': 1.7.23(@swc/helpers@0.5.12) + '@swc/core': 1.7.23 postcss: 8.4.45 typescript: 5.5.4 transitivePeerDependencies: @@ -14068,7 +14091,7 @@ snapshots: webpack-sources@3.2.3: {} - webpack@5.90.3(@swc/core@1.7.23(@swc/helpers@0.5.12))(esbuild@0.23.0): + webpack@5.90.3(@swc/core@1.7.23)(esbuild@0.23.0): dependencies: '@types/eslint-scope': 3.7.6 '@types/estree': 1.0.5 @@ -14091,7 +14114,7 @@ snapshots: neo-async: 2.6.2 schema-utils: 3.3.0 tapable: 2.2.1 - terser-webpack-plugin: 5.3.10(@swc/core@1.7.23(@swc/helpers@0.5.12))(esbuild@0.23.0)(webpack@5.90.3(@swc/core@1.7.23(@swc/helpers@0.5.12))(esbuild@0.23.0)) + terser-webpack-plugin: 5.3.10(@swc/core@1.7.23)(esbuild@0.23.0)(webpack@5.90.3(@swc/core@1.7.23)(esbuild@0.23.0)) watchpack: 2.4.0 webpack-sources: 3.2.3 transitivePeerDependencies: @@ -14099,7 +14122,7 @@ snapshots: - esbuild - uglify-js - webpack@5.90.3(@swc/core@1.7.23(@swc/helpers@0.5.12))(esbuild@0.23.1): + webpack@5.90.3(@swc/core@1.7.23)(esbuild@0.23.1): dependencies: '@types/eslint-scope': 3.7.6 '@types/estree': 1.0.5 @@ -14122,7 +14145,7 @@ snapshots: neo-async: 2.6.2 schema-utils: 3.3.0 tapable: 2.2.1 - terser-webpack-plugin: 5.3.10(@swc/core@1.7.23(@swc/helpers@0.5.12))(esbuild@0.23.1)(webpack@5.90.3(@swc/core@1.7.23(@swc/helpers@0.5.12))(esbuild@0.23.1)) + terser-webpack-plugin: 5.3.10(@swc/core@1.7.23)(esbuild@0.23.1)(webpack@5.90.3(@swc/core@1.7.23)(esbuild@0.23.1)) watchpack: 2.4.0 webpack-sources: 3.2.3 transitivePeerDependencies: