Vyriy Storybook Config

@vyriy/storybook-config is a shared Storybook configuration package for Vyriy projects.

The goal is to keep Storybook setup small, predictable, and reusable across React packages, examples, and application workspaces.

Instead of copying the same Storybook configuration into every project, a package can extend the shared Vyriy config and define only its local stories.

Installation

Install the shared packages and Storybook dependencies:

yarn add @vyriy/path @vyriy/typescript-config @vyriy/storybook-config storybook @storybook/react react react-dom @types/react @types/react-dom

This example uses:

• @vyriy/storybook-config for the shared Storybook setup;
• @vyriy/typescript-config for the shared TypeScript baseline;
• @vyriy/path for clean path creation;
• storybook and @storybook/react for Storybook itself;
• react and react-dom for the React runtime;
• @types/react and @types/react-dom for TypeScript support.

TypeScript config

Create tsconfig.json:

{
  "extends": "@vyriy/typescript-config/index.json",
  "include": ["*.ts", "*.tsx", ".storybook/*.ts"]
}

The include section contains regular TypeScript files, React TSX files, and Storybook config files.

Storybook main config

Create the .storybook directory:

mkdir .storybook

Create .storybook/main.ts:

import config, { type StorybookConfig } from '@vyriy/storybook-config';
import { path } from '@vyriy/path';

const storybookConfig: StorybookConfig = {
  ...config,
  stories: [
    path('**/*.stories.@(ts|tsx)'),
  ],
};

export default storybookConfig;

This file imports the shared Storybook config and extends it with the local stories pattern.

The project-specific part stays very small:

stories: [
  path('**/*.stories.@(ts|tsx)'),
],

Everything else comes from the shared Vyriy configuration.

Storybook preview config

Create .storybook/preview.ts:

export { default } from '@vyriy/storybook-config/preview';

This keeps preview configuration shared as well.

A package can use the common preview setup without duplicating decorators, parameters, or other shared Storybook defaults.

Example React component

Create app.tsx:

export const App = () => <div>App</div>;

This is a minimal React component used only to verify that Storybook can discover and build a story.

Example story

Create index.stories.tsx:

import type { Meta, StoryObj } from '@storybook/react';
import { App } from './app';

const meta = {
  title: 'Example/App',
  component: App,
} satisfies Meta<typeof App>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {};

This story uses the modern typed Storybook format:

• Meta describes the component metadata;
• StoryObj describes the story type;
• satisfies Meta<typeof App> keeps the metadata type-safe.

Build Storybook

Run the Storybook build:

npx storybook build

Output:

┌  Building storybook v10.3.6
│
◇  Cleaning outputDir: storybook-static
│
◇  Loading presets
│
◇  Building manager..
│
●  Building preview..
│
●  Addon-docs: using MDX3
│
●  Using implicit CSS loaders
│
●  Using default Webpack5 setup
│
◇  Output directory: storybook-static
│
└  Storybook build completed successfully

The successful build confirms that the shared Storybook config works with React, TypeScript, and local stories.

The generated static Storybook files are placed into:

storybook-static

This directory can be deployed to static hosting, for example S3 and CloudFront, GitHub Pages, GitLab Pages, or any regular static file server.

Why shared Storybook config?

Storybook configuration usually grows over time.

A project may need common addons, docs settings, webpack settings, preview parameters, decorators, CSS handling, or build defaults. If every package copies that setup manually, the configuration becomes harder to maintain.

With @vyriy/storybook-config, each package can stay focused on its own stories:

.storybook/main.ts      -> local story discovery
.storybook/preview.ts   -> shared preview setup
*.stories.tsx           -> component examples

The shared package keeps the common Storybook behavior in one place.

This matches the Vyriy approach: calm configuration, small local files, and reusable defaults.

Documentation

See the Storybook config API documentation.