Vite

安装

🌐 Installation

npm i @fumadocs/story ts-morph

添加 Tailwind CSS 预设。

🌐 Add the Tailwind CSS preset.

Tailwind CSS

@import '@fumadocs/story/css/preset.css';

外部化 ts-morph：

🌐 Externalize ts-morph:

vite.config.ts

import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    external: ['ts-morph'],
  },
});

创建一个故事

🌐 Create a Story

创建一个故事工厂来存储你的全局设置：

🌐 Create a story factory to store your global settings:

lib/story.ts

import { createFileSystemCache, defineStoryFactory } from '@fumadocs/story';

export const { defineStory, getStoryPayloads } = defineStoryFactory({
  // for Vercel, this is required: choose a directory for cache.
  cache: process.env.NODE_ENV === 'production' ? createFileSystemCache('.story/cache') : undefined,

  tsc: {
    // we use tsc to generate controls from types
    // you can pass TypeScript options here
  },
});

现在开始创建你的第一个故事：

🌐 Now create your first story:

import { defineStory } from '@/lib/story';
import type { MyComponent } from './my-component';

// must be exported as `story`
// or set the `name` option to match export name.
export const story = defineStory<typeof MyComponent>(
  // the path of this file:
  'src/components/my-component.story.tsx',
  {
    args: {
      // default props (recommended)
      initial: {},
    },
  },
);

故事客户端需要从服务器获取数据才能渲染，你可以利用 React.js 框架的服务器端渲染（SSR）功能。

🌐 Story clients require payloads from server to render, you can leverage the SSR functionality of your React.js framework.

例如，在 Tanstack Start 上：

🌐 For instance, on Tanstack Start:

docs/$.tsx

import { story as calloutStory } from '@/components/my-component.story';
import { storyClient as calloutStoryClient } from '@/components/my-component.story.client';
import { StoryPayloadProvider } from '@fumadocs/story/client';
import { getStoryPayloads } from '@/lib/story';

export const Route = createFileRoute('/docs/$')({
  component: Page,
  loader: async ({ params }) => {
    // load story payloads from server
    return serverStoryLoader();
  },
});

const stories = {
  callout: calloutStory,
};

const clientStories = {
  callout: calloutStoryClient,
};

const serverStoryLoader = createServerFn({
  method: 'GET',
}).handler(async () => {
  return {
    // generate payloads
    storyPayloads: await getStoryPayloads(stories),
  };
});

function Page() {
  const data = Route.useLoaderData();

  return (
    <StoryPayloadProvider payloads={data.storyPayloads} clients={clientStories}>
      
    </StoryPayloadProvider>
  );
}

现在你可以这样呈现故事：

🌐 Now you can render the story like:

index.mdx

import { StoryWithControl } from '@fumadocs/story/client';

<StoryWithControl name="callout" />

或者来自故事客户端实例：

🌐 Or from the story client instance:

index.mdx

import { storyClient } from '@/components/my-component.story.client';

<storyClient.WithControl />

安装

创建一个故事

On this page