# Vyriy Storybook Config

Shared Storybook configuration for Vyriy projects.

Published: 2026-05-12
Tags: vyriy, storybook, react, typescript, config
Source: https://vyriy.dev/examples/vyriy-storybook-config/

---

# 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:

```bash
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`:

```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:

```bash
mkdir .storybook
```

Create `.storybook/main.ts`:

```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:

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

Everything else comes from the shared Vyriy configuration.

## Storybook preview config

Create `.storybook/preview.ts`:

```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`:

```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`:

```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:

```bash
npx storybook build
```

Output:

```bash
┌  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:

```text
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:

```text
.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](https://vyriy.dev/storybook/?path=/docs/config-storybook--api).