@windrun-huaiin/third-ui 22.0.1 → 23.1.0

package/src/fuma/server/features/type-table.ts

@@ -0,0 +1,12 @@
+import type { MDXComponents } from 'mdx/types';
+import { lazy } from 'react';
+
+const TypeTable = lazy(() =>
+  import('fumadocs-ui/components/type-table').then((mod) => ({ default: mod.TypeTable })),
+);
+
+export function createTypeTableMdxComponents(): MDXComponents {
+  return {
+    TypeTable,
+  };
+}

package/src/fuma/server/features/widgets.tsx

@@ -0,0 +1,34 @@
+import type { MDXComponents } from 'mdx/types';
+import { lazy } from 'react';
+import { TrophyCard } from '../../mdx/trophy-card';
+import { ZiaCard } from '../../mdx/zia-card';
+import { GradientButton } from '../../mdx/gradient-button';
+import { ZiaFile, ZiaFolder } from '../../mdx/zia-file';
+import { SunoEmbed } from '../../mdx/suno-embed';
+
+const ImageGrid = lazy(() =>
+  import('../../heavy/image-grid').then((mod) => ({ default: mod.ImageGrid })),
+);
+const ImageZoom = lazy(() =>
+  import('../../heavy/image-zoom').then((mod) => ({ default: mod.ImageZoom })),
+);
+
+export function createWidgetMdxComponents(
+  cdnBaseUrl?: string,
+  imageFallbackSrc?: string,
+): MDXComponents {
+  return {
+    TrophyCard,
+    ZiaCard,
+    GradientButton,
+    ZiaFile,
+    ZiaFolder,
+    SunoEmbed,
+    ImageGrid: (props) => (
+      <ImageGrid {...props} cdnBaseUrl={cdnBaseUrl} />
+    ),
+    ImageZoom: (props) => (
+      <ImageZoom {...props} fallbackSrc={imageFallbackSrc} />
+    ),
+  };
+}

package/src/fuma/server/site-mdx-base.tsx

@@ -0,0 +1,66 @@
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Card, Cards } from 'fumadocs-ui/components/card';
+import { File, Folder, Files } from 'fumadocs-ui/components/files';
+import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
+import type { MDXComponents } from 'mdx/types';
+import { SiteX } from '../site-x';
+import { createBaseMdxComponents } from './features/base';
+import { createWidgetMdxComponents } from './features/widgets';
+import { withMissingMdxComponentFallback } from './site-mdx-fallbacks';
+
+export type SiteMdxFeatureComponents = MDXComponents;
+
+export interface SiteMdxBaseOptions {
+  imageFallbackSrc?: string;
+  cdnBaseUrl?: string;
+}
+
+export interface CreateSiteMdxComponentsOptions {
+  baseOptions?: SiteMdxBaseOptions;
+  features?: SiteMdxFeatureComponents[];
+  additionalComponents?: MDXComponents;
+}
+
+const defaultFumaUiComponents: MDXComponents = {
+  Card,
+  Cards,
+  Callout,
+  File,
+  Folder,
+  Files,
+  Accordion,
+  Accordions,
+  Tab,
+  Tabs,
+};
+
+export function createSiteMdxBaseComponents(
+  options: SiteMdxBaseOptions = {},
+): MDXComponents {
+  return {
+    ...defaultFumaUiComponents,
+    SiteX,
+    ...createBaseMdxComponents(options.imageFallbackSrc),
+    ...createWidgetMdxComponents(options.cdnBaseUrl, options.imageFallbackSrc),
+  };
+}
+
+export function createSiteMdxComponents(
+  options: CreateSiteMdxComponentsOptions = {},
+) {
+  const {
+    additionalComponents,
+    baseOptions,
+    features = [],
+  } = options;
+
+  return function getMDXComponents(components?: MDXComponents): MDXComponents {
+    return withMissingMdxComponentFallback({
+      ...createSiteMdxBaseComponents(baseOptions),
+      ...features.reduce<MDXComponents>((acc, feature) => ({ ...acc, ...feature }), {}),
+      ...additionalComponents,
+      ...components,
+    });
+  };
+}

package/src/fuma/server/site-mdx-fallbacks.tsx

@@ -0,0 +1,172 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import type { MDXComponents } from 'mdx/types';
+
+type MissingFeatureBlockProps = ComponentPropsWithoutRef<'div'> & {
+  feature: string;
+  component: string;
+};
+
+type MissingFeatureInlineProps = ComponentPropsWithoutRef<'span'> & {
+  feature: string;
+  component: string;
+};
+
+type MdxFallbackExtraProps = Record<string, unknown>;
+
+function renderChildren(children: ReactNode) {
+  if (children == null || children === '') {
+    return <span className="italic text-fd-muted-foreground">No fallback content.</span>;
+  }
+
+  return children;
+}
+
+function hasChildren(children: ReactNode) {
+  return children != null && children !== '';
+}
+
+function getDisplayProps(props: MdxFallbackExtraProps) {
+  return Object.entries(props)
+    .filter(([, value]) =>
+      typeof value === 'string' ||
+      typeof value === 'number' ||
+      typeof value === 'boolean',
+    )
+    .map(([key, value]) => [key, String(value)] as const);
+}
+
+export function MissingMdxFeatureBlock({
+  feature,
+  component,
+  children,
+  className,
+  ...props
+}: MissingFeatureBlockProps) {
+  const displayProps = getDisplayProps(props);
+
+  return (
+    <div
+      className={[
+        'my-4 rounded-xl border border-red-300 bg-red-50/80 p-4 text-sm text-red-950 shadow-sm dark:border-red-800/80 dark:bg-red-950/30 dark:text-red-100',
+        className,
+      ].filter(Boolean).join(' ')}
+    >
+      <div className="mb-2 flex flex-wrap items-center gap-2 font-medium">
+        <span>MDX feature not enabled</span>
+        <code className="rounded bg-red-100 px-1.5 py-0.5 text-xs dark:bg-red-900/60">{feature}</code>
+        <code className="rounded bg-red-100 px-1.5 py-0.5 text-xs dark:bg-red-900/60">{component}</code>
+      </div>
+      {displayProps.length > 0 && (
+        <div className="mb-2 flex flex-wrap gap-1.5 text-xs">
+          {displayProps.map(([key, value]) => (
+            <span
+              key={key}
+              className="rounded-md border border-red-200 bg-white/60 px-1.5 py-0.5 font-mono dark:border-red-900/70 dark:bg-black/20"
+            >
+              {key}={value}
+            </span>
+          ))}
+        </div>
+      )}
+      <div className="whitespace-pre-wrap break-words rounded-lg border border-red-200 bg-white/70 p-3 font-mono text-xs text-red-900 dark:border-red-900/70 dark:bg-black/20 dark:text-red-100">
+        {renderChildren(children)}
+      </div>
+    </div>
+  );
+}
+
+export function MissingMdxFeatureInline({
+  feature,
+  component,
+  children,
+  className,
+  ...props
+}: MissingFeatureInlineProps) {
+  const displayProps = getDisplayProps(props);
+
+  return (
+    <span
+      className={[
+        'inline-flex max-w-full items-center gap-1 rounded-md border border-red-300 bg-red-50 px-1.5 py-0.5 text-sm text-red-900 dark:border-red-800 dark:bg-red-950/40 dark:text-red-100',
+        className,
+      ].filter(Boolean).join(' ')}
+      title={`MDX feature not enabled: ${feature} (${component})`}
+    >
+      <span className="font-medium">{component}</span>
+      {displayProps.map(([key, value]) => (
+        <span key={key} className="font-mono text-xs opacity-80">
+          {key}={value}
+        </span>
+      ))}
+      {hasChildren(children) && (
+        <span className="font-mono text-xs opacity-80">{children}</span>
+      )}
+    </span>
+  );
+}
+
+export function createMissingMdxFeatureComponents() {
+  return {
+    MathBlock: (props: ComponentPropsWithoutRef<'div'>) => (
+      <MissingMdxFeatureBlock {...props} feature="math" component="MathBlock" />
+    ),
+    InlineMath: (props: ComponentPropsWithoutRef<'span'>) => (
+      <MissingMdxFeatureInline {...props} feature="math" component="InlineMath" />
+    ),
+    Mermaid: (props: ComponentPropsWithoutRef<'div'>) => (
+      <MissingMdxFeatureBlock {...props} feature="diagram renderer" component="Mermaid" />
+    ),
+    TypeTable: (props: ComponentPropsWithoutRef<'div'>) => (
+      <MissingMdxFeatureBlock {...props} feature="API table renderer" component="TypeTable" />
+    ),
+    CodeBlockTab: (props: ComponentPropsWithoutRef<'div'>) => (
+      <MissingMdxFeatureBlock {...props} feature="code" component="CodeBlockTab" />
+    ),
+    CodeBlockTabs: (props: ComponentPropsWithoutRef<'div'>) => (
+      <MissingMdxFeatureBlock {...props} feature="code" component="CodeBlockTabs" />
+    ),
+    CodeBlockTabsList: (props: ComponentPropsWithoutRef<'div'>) => (
+      <MissingMdxFeatureBlock {...props} feature="code" component="CodeBlockTabsList" />
+    ),
+    CodeBlockTabsTrigger: (props: ComponentPropsWithoutRef<'div'>) => (
+      <MissingMdxFeatureBlock {...props} feature="code" component="CodeBlockTabsTrigger" />
+    ),
+  };
+}
+
+export function createMissingMdxComponentFallback(component: string) {
+  return function MissingMdxComponent(props: ComponentPropsWithoutRef<'div'>) {
+    return (
+      <MissingMdxFeatureBlock
+        {...props}
+        feature="unknown MDX component"
+        component={component}
+      />
+    );
+  };
+}
+
+export function withMissingMdxComponentFallback(
+  components: MDXComponents,
+): MDXComponents {
+  return new Proxy(components, {
+    has(target, prop) {
+      if (typeof prop === 'string' && /^[A-Z]/.test(prop)) {
+        return true;
+      }
+
+      return prop in target;
+    },
+    get(target, prop, receiver) {
+      if (typeof prop !== 'string' || prop in target) {
+        return Reflect.get(target, prop, receiver);
+      }
+
+      if (/^[A-Z]/.test(prop)) {
+        return createMissingMdxComponentFallback(prop);
+      }
+
+      return Reflect.get(target, prop, receiver);
+    },
+  });
+}

package/src/fuma/server/site-mdx-features/code.ts

@@ -0,0 +1 @@
+export { createCodeMdxComponents } from '../features/code';

package/src/fuma/server/site-mdx-features/math.ts

@@ -0,0 +1 @@
+export { createMathMdxComponents } from '../features/math';

package/src/fuma/server/site-mdx-features/mermaid.ts

@@ -0,0 +1 @@
+export { createMermaidMdxComponents } from '../features/mermaid';

package/src/fuma/server/site-mdx-features/type-table.ts

@@ -0,0 +1 @@
+export { createTypeTableMdxComponents } from '../features/type-table';

package/src/fuma/share/markdown-component-map.tsx

@@ -1,7 +1,9 @@
 import { cn } from '@windrun-huaiin/lib/utils';
-import defaultMdxComponents from 'fumadocs-ui/mdx';
-import { type ComponentType } from 'react';
-import { ImageZoom } from '../heavy';
+import { lazy, type ComponentType } from 'react';
+
+const ImageZoom = lazy(() =>
+  import('../heavy/image-zoom').then((mod) => ({ default: mod.ImageZoom })),
+);
 
 export type MarkdownComponentMap = Record<string, ComponentType<any>>;
 
@@ -18,7 +20,6 @@ function normalizeMarkdownProps<T extends Record<string, any>>(props: T) {
 }
 
 export const baseMarkdownComponents: MarkdownComponentMap = {
-  ...defaultMdxComponents,
   a: ({ className, ...props }) => (
     <a
       {...normalizeMarkdownProps(props)}

package/src/fuma/server/optional-features.tsx

@@ -1,168 +0,0 @@
-import type { MDXComponents, MDXProps } from 'mdx/types';
-import type { ReactNode } from 'react';
-import { CodeBlock, Pre } from 'fumadocs-ui/components/codeblock';
-import { TypeTable } from 'fumadocs-ui/components/type-table';
-import {
-  CSSIcon,
-  CSVIcon,
-  DiffIcon,
-  HtmlIcon,
-  HttpIcon,
-  JavaIcon,
-  JsonIcon,
-  LogIcon,
-  MDXIcon,
-  RegexIcon,
-  SQLIcon,
-  SchemeIcon,
-  SquareDashedBottomCodeIcon,
-  TxtIcon,
-  XMLIcon,
-  YamlIcon,
-} from '@windrun-huaiin/base-ui/icons';
-import { baseMarkdownComponents } from '../share/markdown-component-map';
-import { Mermaid, ImageGrid, ImageZoom, MathBlock, InlineMath } from '../heavy';
-import { TrophyCard } from '../mdx/trophy-card';
-import { ZiaCard } from '../mdx/zia-card';
-import { GradientButton } from '../mdx/gradient-button';
-import { ZiaFile, ZiaFolder } from '../mdx/zia-file';
-import { SunoEmbed } from '../mdx/suno-embed';
-
-const defaultCodeLanguageIconMap: Record<string, ReactNode> = {
-  css: <CSSIcon />,
-  csv: <CSVIcon />,
-  diff: <DiffIcon />,
-  html: <HtmlIcon />,
-  http: <HttpIcon />,
-  java: <JavaIcon />,
-  json: <JsonIcon />,
-  jsonc: <SquareDashedBottomCodeIcon />,
-  log: <LogIcon />,
-  mdx: <MDXIcon />,
-  plaintext: <TxtIcon />,
-  regex: <RegexIcon />,
-  scheme: <SchemeIcon />,
-  sql: <SQLIcon />,
-  text: <TxtIcon />,
-  txt: <TxtIcon />,
-  xml: <XMLIcon />,
-  yaml: <YamlIcon />,
-  yml: <YamlIcon />,
-};
-
-function tryToMatchIcon(
-  props: Readonly<MDXProps & { 'data-language'?: string; title?: string }>,
-  iconMap: Record<string, ReactNode>,
-): ReactNode | undefined {
-  let lang: string | undefined;
-
-  const dataLanguage = props['data-language'] as string | undefined;
-
-  if (dataLanguage && dataLanguage.trim() !== '') {
-    lang = dataLanguage.trim().toLowerCase();
-  } else {
-    const title = props.title as string | undefined;
-    if (title) {
-      const titleParts = title.split('.');
-      if (titleParts.length > 1 && titleParts[0] !== '') {
-        const extension = titleParts.pop()?.toLowerCase();
-        if (extension) {
-          lang = extension;
-        }
-      }
-    }
-  }
-
-  if (lang && iconMap[lang]) {
-    return iconMap[lang];
-  }
-
-  return undefined;
-}
-
-export function createBaseMdxComponents(
-  imageFallbackSrc?: string,
-): MDXComponents {
-  return {
-    ...baseMarkdownComponents,
-    img: (props) => (
-      <ImageZoom
-        {...(props as any)}
-        fallbackSrc={imageFallbackSrc}
-      />
-    ),
-  };
-}
-
-export function createCodeMdxComponents(
-  iconMap: Record<string, ReactNode> = {},
-): MDXComponents {
-  const mergedIconMap = {
-    ...defaultCodeLanguageIconMap,
-    ...iconMap,
-  };
-
-  return {
-    pre: (props) => {
-      const customIcon = tryToMatchIcon(props as MDXProps & { 'data-language'?: string; title?: string }, mergedIconMap);
-      return (
-        <CodeBlock
-          {...props}
-          {...(customIcon && { icon: customIcon })}
-        >
-          <Pre>{props.children}</Pre>
-        </CodeBlock>
-      );
-    },
-    CodeBlock,
-    Pre,
-  };
-}
-
-export function createMathMdxComponents(): MDXComponents {
-  return {
-    MathBlock,
-    InlineMath,
-  };
-}
-
-export function createMermaidMdxComponents(
-  watermarkEnabled?: boolean,
-  watermarkText?: string,
-): MDXComponents {
-  return {
-    Mermaid: (props) => (
-      <Mermaid
-        {...props}
-        watermarkEnabled={watermarkEnabled}
-        watermarkText={watermarkText}
-      />
-    ),
-  };
-}
-
-export function createTypeTableMdxComponents(): MDXComponents {
-  return {
-    TypeTable,
-  };
-}
-
-export function createWidgetMdxComponents(
-  cdnBaseUrl?: string,
-  imageFallbackSrc?: string,
-): MDXComponents {
-  return {
-    TrophyCard,
-    ZiaCard,
-    GradientButton,
-    ZiaFile,
-    ZiaFolder,
-    SunoEmbed,
-    ImageGrid: (props) => (
-      <ImageGrid {...props} cdnBaseUrl={cdnBaseUrl} />
-    ),
-    ImageZoom: (props) => (
-      <ImageZoom {...props} fallbackSrc={imageFallbackSrc} />
-    ),
-  };
-}

package/src/fuma/server/site-mdx-components.tsx

@@ -1,48 +0,0 @@
-import type { MDXComponents } from 'mdx/types';
-import type { ReactNode } from 'react';
-import type { SiteMdxFeature } from '@windrun-huaiin/contracts/mdx';
-import {
-  composeSiteMdxComponents,
-  createSiteFeatureComponentMap,
-  DEFAULT_SITE_MDX_FEATURES,
-} from './site-mdx-presets';
-
-export interface SiteMdxComponentsOptions {
-  imageFallbackSrc?: string;
-  cdnBaseUrl?: string;
-  watermarkEnabled?: boolean;
-  watermarkText?: string;
-  additionalComponents?: MDXComponents;
-  iconMap?: Record<string, ReactNode>;
-  features?: SiteMdxFeature[];
-}
-
-export function createSiteMdxComponents(
-  options: SiteMdxComponentsOptions,
-) {
-  const {
-    additionalComponents,
-    cdnBaseUrl,
-    features = DEFAULT_SITE_MDX_FEATURES,
-    iconMap = {},
-    imageFallbackSrc,
-    watermarkEnabled,
-    watermarkText,
-  } = options;
-  const featureMap = createSiteFeatureComponentMap({
-    cdnBaseUrl,
-    iconMap,
-    imageFallbackSrc,
-    watermarkEnabled,
-    watermarkText,
-  });
-
-  return function getMDXComponents(components?: MDXComponents): MDXComponents {
-    return composeSiteMdxComponents(
-      features,
-      featureMap,
-      additionalComponents,
-      components,
-    );
-  };
-}

package/src/fuma/server/site-mdx-presets.ts

@@ -1,80 +0,0 @@
-import defaultMdxComponents from 'fumadocs-ui/mdx';
-import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
-import { Callout } from 'fumadocs-ui/components/callout';
-import { File, Folder, Files } from 'fumadocs-ui/components/files';
-import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
-import type { MDXComponents } from 'mdx/types';
-import {
-  createBaseMdxComponents,
-  createCodeMdxComponents,
-  createMathMdxComponents,
-  createMermaidMdxComponents,
-  createTypeTableMdxComponents,
-  createWidgetMdxComponents,
-} from './optional-features';
-import { SiteX } from '../site-x';
-import type { SiteMdxComponentsOptions } from './site-mdx-components';
-import type { SiteMdxFeature } from '@windrun-huaiin/contracts/mdx';
-
-const defaultFumaUiComponents: MDXComponents = {
-  Callout,
-  File,
-  Folder,
-  Files,
-  Accordion,
-  Accordions,
-  Tab,
-  Tabs,
-};
-
-export const DEFAULT_SITE_MDX_FEATURES: SiteMdxFeature[] = [
-  'base',
-  'code',
-  'math',
-  'mermaid',
-  'type-table',
-];
-
-export function createSiteFeatureComponentMap(
-  options: SiteMdxComponentsOptions,
-) {
-  const {
-    cdnBaseUrl,
-    iconMap = {},
-    imageFallbackSrc,
-    watermarkEnabled,
-    watermarkText,
-  } = options;
-
-  return {
-    base: {
-      ...defaultFumaUiComponents,
-      SiteX,
-      ...createBaseMdxComponents(imageFallbackSrc),
-      ...createWidgetMdxComponents(cdnBaseUrl, imageFallbackSrc),
-    },
-    code: createCodeMdxComponents(iconMap),
-    math: createMathMdxComponents(),
-    mermaid: createMermaidMdxComponents(watermarkEnabled, watermarkText),
-    'type-table': createTypeTableMdxComponents(),
-  } satisfies Record<SiteMdxFeature, MDXComponents>;
-}
-
-export function composeSiteMdxComponents(
-  features: readonly SiteMdxFeature[],
-  featureMap: Record<SiteMdxFeature, MDXComponents>,
-  additionalComponents?: MDXComponents,
-  components?: MDXComponents,
-): MDXComponents {
-  return {
-    ...defaultMdxComponents,
-    ...features.reduce<MDXComponents>((acc, feature) => {
-      return {
-        ...acc,
-        ...featureMap[feature],
-      };
-    }, {}),
-    ...additionalComponents,
-    ...components,
-  };
-}