Is it possible to write doc for function/class (non-ui elements) in Storybook?

Question

Storybook is great to showcase and document components, but i also have some utility functions and class that i would like to add to storybook, is it possible make use of its controls as those function params?

Answer 1

For writing docs for non-UI elements just use an MDX file.

debounce function:

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)

and here is my utils folder (non-UI)

NOTE I'm using storybook version 6