mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-01-12 23:32:55 +01:00
89 lines
3.0 KiB
Markdown
89 lines
3.0 KiB
Markdown
# 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](https://storybook.js.org/docs/writing-stories)
|
|
- [Migration Guide](https://storybook.js.org/docs/migration-guide)
|