Exploring the New Features of Storybook 10

# Install Storybook 10 in a new project
npm create storybook@latest

# Upgrade existing project
npx storybook@latest upgrade

import { automock } from '@storybook/test';

export default {
  beforeEach: automock({
    include: ['**/services/**', '**/utils/**'],
    exclude: ['**/constants.ts']
  })
};

import type { Meta, StoryObj } from '@storybook/react';
import { fn, mocked } from '@storybook/test';
import { UserProfile } from './UserProfile';
import { fetchUser } from '@/services/api';

const meta: Meta<typeof UserProfile> = {
  component: UserProfile,
  title: 'Components/UserProfile',
};

export default meta;
type Story = StoryObj<typeof UserProfile>;

export const Default: Story = {
  async beforeEach() {
    // Mock the API call
    mocked(fetchUser).mockResolvedValue({
      id: '1',
      name: 'John Doe',
      email: 'john@example.com',
      avatar: 'https://i.pravatar.cc/150?img=1'
    });
  },
  args: {
    userId: '1'
  }
};

import { createStoryFactory } from '@storybook/react';
import { Button } from './Button';

const meta = {
  component: Button,
  title: 'UI/Button',
};

export default meta;

// Create a typesafe story factory
const createStory = createStoryFactory(meta);

// All stories inherit full type safety
export const Primary = createStory({
  args: {
    variant: 'primary',
    children: 'Click me',
  },
});

export const Secondary = createStory({
  args: {
    variant: 'secondary',
    children: 'Cancel',
  },
});

// TypeScript will error if you use invalid props
export const Invalid = createStory({
  args: {
    // @ts-expect-error - 'invalid' is not a valid variant
    variant: 'invalid',
    children: 'Error',
  },
});

// AsyncUser.svelte
<script lang="ts">
  import { getUser } from '$lib/api';
  
  interface Props {
    userId: string;
  }
  
  let { userId }: Props = $props();
  let user = $derived.by(async () => await getUser(userId));
</script>

{#await user}
  <p>Loading user...</p>
{:then data}
  <h2>{data.name}</h2>
  <p>{data.email}</p>
{:catch error}
  <p>Error: {error.message}</p>
{/await}

import type { Meta, StoryObj } from '@storybook/svelte';
import { mocked } from '@storybook/test';
import AsyncUser from './AsyncUser.svelte';
import { getUser } from '$lib/api';

const meta: Meta<typeof AsyncUser> = {
  component: AsyncUser,
  title: 'Components/AsyncUser',
};

export default meta;
type Story = StoryObj<typeof meta>;

export const Success: Story = {
  async beforeEach() {
    mocked(getUser).mockResolvedValue({
      name: 'Jane Smith',
      email: 'jane@example.com'
    });
  },
  args: {
    userId: '123'
  }
};

// .storybook/preview.ts
export default {
  tags: {
    // Exclude experimental stories from the sidebar
    exclude: ['experimental'],
    
    // Or create custom tag configurations
    autodocs: ['dev-only', 'public-api']
  }
};

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

const meta: Meta<typeof NewFeature> = {
  component: NewFeature,
  tags: ['experimental', 'beta'],
};

export default meta;
type Story = StoryObj<typeof NewFeature>;

export const Preview: Story = {
  args: {
    enabled: true
  }
};

// .storybook/main.ts for Next.js 16
import type { StorybookConfig } from '@storybook/nextjs';

const config: StorybookConfig = {
  framework: {
    name: '@storybook/nextjs',
    options: {
      // Next.js 16 features are automatically supported
      nextConfigPath: '../next.config.ts',
    },
  },
  stories: ['../app/**/*.stories.@(ts|tsx)'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
};

export default config;

npx storybook@latest upgrade

{
  "type": "module",
  "scripts": {
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  }
}

// Before (CommonJS)
module.exports = {
  stories: ['../src/**/*.stories.tsx'],
};

// After (ESM)
export default {
  stories: ['../src/**/*.stories.tsx'],
};