是否可以在 Storybook 中为函数/类（非 UI 元素）编写文档？答案

【问题标题】：Is it possible to write doc for function/class (non-ui elements) in Storybook?是否可以在 Storybook 中为函数/类（非 UI 元素）编写文档？
【发布时间】：2022-01-18 17:30:40
【问题描述】：

Storybook 非常适合展示和记录组件，但我也有一些实用功能和类，我想添加到 Storybook 中，是否可以将其控件用作这些函数参数？

【问题讨论】：

请详细说明您的用例
基本上什么是在故事书中记录功能的最佳方式，因为它仅用于组件文档
只需添加一个MDX文件并在其中编写您的代码，我已经在我的项目中完成了，我可以向您展示我的结构
是的，请分享，我是新手。

标签： storybook

【解决方案1】：

要为非 UI 元素编写文档，只需使用 MDX 文件。

去抖功能：

import { FnType } from 'types';
import { generateError } from 'utils';

let timer;

export default function debounce(fn: FnType, timeout: number = 300) {
  try {
    return (...args) => {
      if (!timer) fn.apply(this, args);
      clearTimeout(timer);
      timer = setTimeout(() => (timer = undefined), timeout);
    };
  } catch (e) {
    generateError(e);
  }
}

debounce.stories.mdx：

import { Meta } from '@storybook/addon-docs';

<Meta title="Debounce" />

## Debounce the execution of a given function

### Syntax: debounce(fn , timeout)

- fn: callback function
- timeout: timout value in ms

#### Usage:

const doSomeThing = () => {console.log("doing...")}

debounce (doSomeThing , 300)

这是我的 utils 文件夹（非 UI）

注意我正在使用故事书第 6 版

【讨论】：

你也可以分享故事书中的截图吗？
请查看答案，我已经添加了