@sit-onyx/storybook-utils

Storybook utilities for Vue.

Changelog

A full changelog can be found here.

Installation

Install the npm package with your corresponding package manager:

pnpm

pnpm add -D @sit-onyx/storybook-utils@beta

npm

npm install -D @sit-onyx/storybook-utils@beta

yarn

yarn install -D @sit-onyx/storybook-utils@beta

Utilities

createPreview

Creates a default Storybook preview configuration for a project that uses onyx. Includes the following features:

• Improved controls (sorting and expanded controls so descriptions etc. are also shown in a single story)
• Improved Vue-specific code highlighting (e.g. using @ instead of v-on:)
• Setup for dark mode (including docs page). Requires addon storybook-dark-mode to be enabled in .storybook/main.ts file
• Custom Storybook theme using onyx colors (light and dark mode)
• Configure viewports / breakpoints as defined by onyx
• Logs Vue emits as Storybook actions

.storybook/preview.ts

import { createPreview } from "@sit-onyx/storybook-utils";
import "@sit-onyx/storybook-utils/style.css";

const preview = {
  // we need to destructure here because as of Storybook 7.6
  // it can not statically analyze that the `preview` variable is an object
  ...createPreview({
    // optional overrides...
  }),
};

export default preview;

.storybook/main.ts

import type { StorybookConfig } from "@storybook/vue3-vite";

const config: StorybookConfig = {
  addons: ["storybook-dark-mode"],
  // ...
};

export default config;

withVModelDecorator

Defines a custom decorator that will implement event handlers for all v-models. So the Storybook controls are updated live when the user interacts with the component.

import { withVModelDecorator } from "@sit-onyx/storybook-utils";

export default {
  decorators: [withVModelDecorator()],
};

createTheme

Creates a custom theme for Storybook that uses onyx colors. See the Storybook Theming docs for further information.

TIP

If you are using createPreview(), the custom light and dark theme will already be set up for you.

Make sure you have installed the @storybook/manager-api package:

pnpm

pnpm add -D @storybook/manager-api

npm

npm install -D @storybook/manager-api

yarn

yarn install -D @storybook/manager-api

.storybook/manager.ts

import { createTheme } from "@sit-onyx/storybook-utils";
import { addons } from "@storybook/manager-api";

addons.setConfig({
  theme: createTheme({
    base: "light", // choose whether you want a light or dark theme
  }),
});

.storybook/preview.ts

import { createTheme } from "@sit-onyx/storybook-utils";
import type { Preview } from "@storybook/vue3";

const preview: Preview = {
  parameters: {
    docs: {
      theme: createTheme({
        base: "light", // choose whether you want a light or dark theme
      }),
    },
  },
};

export default preview;

withNativeEventLogging

Allows logging and documentation for the passed native event listeners in Storybook. These will be documented in a extra "Relevant HTML events" section in the Storybook documentation.

import { withNativeEventLogging } from "@sit-onyx/storybook-utils";

const meta: Meta<typeof OnyxButton> = {
  title: "Buttons/Button",
  component: OnyxButton,
  argTypes: {
    somethingElse: { ...someOtherArgType },
    ...withNativeEventLogging(["onClick"]),
  },
};