@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 add -D @sit-onyx/storybook-utils@alpha
npm install -D @sit-onyx/storybook-utils@alpha
yarn install -D @sit-onyx/storybook-utils@alpha
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 ofv-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
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;
import type { StorybookConfig } from "@storybook/vue3-vite";
const config: StorybookConfig = {
addons: ["storybook-dark-mode"],
// ...
};
export default config;
defineStorybookActionsAndVModels
Utility to define Storybook meta for a given Vue component which will take care of defining argTypes for the given events as well as implementing v-model handlers so that the Storybook controls are updated when you interact with the component.
Supports auto-completion for event names. Should be preferred over manually defining argTypes for *.stories.ts
files.
import { defineStorybookActionsAndVModels } from "@sit-onyx/storybook-utils";
import type { Meta, StoryObj } from "@storybook/vue3";
import MyComponent from "./MyComponent.vue";
/**
* The input component can be used to...
*/
const meta: Meta<typeof MyComponent> = {
title: "components/MyComponent",
...defineStorybookActionsAndVModels({
component: MyComponent,
events: ["update:modelValue", "change"],
}),
};
export default meta;
type Story = StoryObj<typeof MyComponent>;
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 add -D @storybook/manager-api
npm install -D @storybook/manager-api
yarn install -D @storybook/manager-api
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
}),
});
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;