OpenNoodl/dev-docs/tasks/phase-1-dependency-updates/TASK-004-storybook8-migration/CHANGELOG.md

TASK-004 Changelog: Storybook 8 Story Migration

---

[2025-07-12] - Migration Completed ✅

Summary

Successfully migrated all 91 story files in packages/noodl-core-ui/src from CSF2 format (Storybook 6/7) to CSF3 format (Storybook 8).

Migration Approach

1. Custom Migration Script: Created scripts/migrate-stories.mjs to batch process files
2. Manual Fixes: Handled 3 edge-case files that required manual migration

Changes Made

Files Migrated Automatically (88 files)

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

Files Fixed Manually (3 files)

• Collapsible.stories.tsx - Missing component field, used useState from deprecated @storybook/addons
• ConditionalContainer.stories.tsx - Missing component field, placeholder story
• Modal.stories.tsx - Missing component field

Code Pattern Changes

Before (CSF2)	After (CSF3)
import { ComponentStory, ComponentMeta } from '@storybook/react'	import type { Meta, StoryObj } from '@storybook/react'
export default { ... } as ComponentMeta<typeof X>	const meta: Meta<typeof X> = { ... }; export default meta;
const Template: ComponentStory<typeof X> = (args) => <X {...args} />	Removed (not needed for simple renders)
export const Story = Template.bind({}); Story.args = {...}	export const Story: Story = { args: {...} }

Import Changes

• Removed: import React from 'react' (when not using hooks)
• Changed: Storybook types now use type import for better tree-shaking

Migration Statistics

• Total Files: 91
• Automatically Migrated: 83
• Already Migrated (manual): 5
• Manually Fixed: 3
• Errors: 0

TypeScript Verification

• npm run typecheck passes ✅
• No ComponentStory or ComponentMeta references remain in story files

Migration Script

Created reusable migration script at scripts/migrate-stories.mjs for:

• Pattern-based file transformation
• Handles Template.bind({}) pattern
• Handles inline story typing
• Preserves custom imports and dependencies

Note on Remaining Errors

There are pre-existing TypeScript errors in packages/noodl-git that are unrelated to this migration:

• LargeText type not exported from DiffType
• ILargeTextDiff not found
• hunks property missing

These should be addressed in a separate task.

---

[Not Started] - Initial State

Error Breakdown (Pre-Task)

• ComponentStory errors: ~107
• ComponentMeta errors: ~107
• Total Storybook API errors: ~214

Estimated Files

• Total .stories.tsx files: 91
• All located in packages/noodl-core-ui/src/

---

Reference

Related Tasks

• TASK-001: Dependency upgrades (Storybook 8 installed)
• TASK-003: TypeScript Configuration Cleanup

Documentation

• Storybook CSF3 Documentation
• Migration Guide