OpenNoodl/dev-docs/tasks/phase-1/TASK-004-storybook8-migration/README.md

TASK-004: Storybook 8 Story Migration

Status: ✅ COMPLETED (2025-07-12)

Overview

Migrate all Storybook stories from the deprecated CSF2 format (using ComponentStory and ComponentMeta) to the new CSF3 format required by Storybook 8.

Problem Statement

After upgrading to Storybook 8 in TASK-001, the story files still use the old Storybook 6/7 APIs:

• ComponentStory type is removed
• ComponentMeta type is removed
• Stories use the old CSF2 format

This causes ~214 TypeScript errors in *.stories.tsx files.

Error Analysis

Error Type	Count	Location
ComponentStory not exported	~107	*.stories.tsx
ComponentMeta not exported	~107	*.stories.tsx
Total	~214	packages/noodl-core-ui/src/components/*

Migration Pattern

Before (CSF2 / Storybook 6-7)

import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Button } from './Button';

export default {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    variant: { control: 'select', options: ['primary', 'secondary'] }
  }
} as ComponentMeta<typeof Button>;

const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  variant: 'primary',
  label: 'Click me'
};

export const Secondary = Template.bind({});
Secondary.args = {
  variant: 'secondary',
  label: 'Click me'
};

After (CSF3 / Storybook 8)

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

const meta: Meta<typeof Button> = {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    variant: { control: 'select', options: ['primary', 'secondary'] }
  }
};

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

export const Primary: Story = {
  args: {
    variant: 'primary',
    label: 'Click me'
  }
};

export const Secondary: Story = {
  args: {
    variant: 'secondary',
    label: 'Click me'
  }
};

Key Changes

Old (CSF2)	New (CSF3)
ComponentMeta<typeof C>	Meta<typeof C>
ComponentStory<typeof C>	StoryObj<typeof meta>
const Template = (args) => <C {...args} />	Inline in story object
Template.bind({})	Direct story object
Story.args = { }	args: { } property

Files to Update

All .stories.tsx files in packages/noodl-core-ui/src/components/:

AI Components (~12 files)

• src/components/ai/AiChatBox/AiChatBox.stories.tsx
• src/components/ai/AiChatCard/AiChatCard.stories.tsx
• src/components/ai/AiChatLoader/AiChatLoader.stories.tsx
• src/components/ai/AiChatMessage/AiChatMessage.stories.tsx
• src/components/ai/AiChatSuggestion/AiChatSuggestion.stories.tsx
• src/components/ai/AiChatboxError/AiChatboxError.stories.tsx
• src/components/ai/AiIcon/AiIcon.stories.tsx
• src/components/ai/AiIconAnimated/AiIconAnimated.stories.tsx

App Components

• src/components/app/SideNavigation/SideNavigation.stories.tsx
• src/components/app/TitleBar/TitleBar.stories.tsx

Common Components

• src/components/common/ActivityIndicator/ActivityIndicator.stories.tsx
• src/components/common/Card/Card.stories.tsx
• src/components/common/EditorNode/EditorNode.stories.tsx
• src/components/common/ErrorBoundary/ErrorBoundary.stories.tsx
• src/components/common/Icon/Icon.stories.tsx
• And many more...

Inputs, Layout, Popups, etc.

• All other component directories with stories

Automation Option

Storybook provides a codemod for migration:

npx storybook@latest migrate csf-2-to-3 --glob "packages/noodl-core-ui/src/**/*.stories.tsx"

However, manual review will still be needed for:

• Complex render functions
• Custom decorators
• Play functions

Success Criteria

• No ComponentStory or ComponentMeta imports in codebase
• All stories use CSF3 format with Meta and StoryObj
• Storybook builds without errors: npm run storybook
• Stories render correctly in Storybook UI

Estimated Time

4-8 hours (depending on codemod effectiveness)

Dependencies

• TASK-001 (Storybook 8 dependency upgrade - completed)

Priority

Low - Does not block editor development. Only affects Storybook component documentation.

Notes

• This is purely a code quality/documentation task
• Storybook still works with warnings
• Consider batching updates by component category
• May want to combine with component documentation updates