Документирование компонентов при помощи Storybook

После того как я для общего развития прошел курс «Веб‑разработчик» в Яндекс.Практикуме, решил влиться в собственный стартап в качестве стажера.

Проект разрабатывается на фреймворке Vue 3 с весны 2022 и в нем уже приличное количество различных компонентов. Первоначально скачал проект с GitHub и начал изучать в интерфейсе VS Code. Ниже фрагмент кода кнопки:

export interface uButtonProps {
  type?: "button" | "submit" | "reset";
  to?: RouteLocationRaw;
  disabled?: boolean;
  color?: Colors | null;
  colorHover?: Colors;
  colorActive?: Colors;
  size?: SizeAll | null;
  align?: AlignHorizontal;
  shape?: ShapeStyles | "link";
  outline?: boolean;
  stack?: boolean;
  block?: boolean;
}

const props = withDefaults(defineProps<uButtonProps>(), {
  type: "button",
  color: "primary",
  align: "center",
  shape: "rounded",
  size: "md"
});

Быстро пришло осознание, что явно не хватает документации. Тимлид сказал, что есть возможность быстро создать интерактивную документацию — можно будет менять пропсы и видеть, как изменяется внешний вид компонента. Звучало весьма впечатляюще.

После добавления документирования я понял, что штука реально классная.

Выбираем компонент из списка и меняем пропсы, чтобы понять, какими возможностями он обладает.

В разделе Showcase официального сайта можно посмотреть примеры использования сервиса крупными компаниями, например, Microsoft.

Еще один хороший пример — компоненты самого Storybook.

Storybook работает с любым современным фреймворком: Angular, React, Vue, Svelte, SvelteKit, Next.js, Qwik, Preact, SolidJS.

Подытожу — использование Storybook — отличный способ для документирования компонентов. Дополнительно рекомендую посмотреть видео ниже.