Addons: Remove @storybook/addon-storysource

MIGRATION.md

@@ -5,6 +5,8 @@
   - [A11y addon: Removed deprecated manual parameter](#a11y-addon-removed-deprecated-manual-parameter)
   - [Button Component API Changes](#button-component-api-changes)
   - [Documentation Generation Changes](#documentation-generation-changes)
+  - [Migration from @storybook/addon-storysource to Code Panel](#migration-from-storybookaddon-storysource-to-code-panel)
+    - [Migration Steps](#migration-steps)
   - [`parameters.docs.source.format` removal](#parametersdocssourceformat-removal)
   - [Global State Management](#global-state-management)
   - [Icon System Updates](#icon-system-updates)
@@ -520,6 +522,48 @@ export default {
 + };
 ```
 
+### Migration from @storybook/addon-storysource to Code Panel
+
+The `@storybook/addon-storysource` addon is being removed in Storybook 9.0. Instead, Storybook now provides a Code Panel via `@storybook/addon-docs` that offers similar functionality with improved integration and performance.
+
+#### Migration Steps
+
+1. Remove the old addon
+
+Remove `@storybook/addon-storysource` from your project:
+
+```bash
+npx storybook remove @storybook/addon-storysource
+```
+
+2. Enable the Code Panel
+
+The Code Panel can be enabled by adding the following parameter to your stories or globally in `.storybook/preview.js`:
+
+```js
+export const parameters = {
+  docs: {
+    source: {
+      codePanel: true,
+    },
+  },
+};
+```
+
+Or for individual stories:
+
+```js
+export const MyStory = {
+  parameters: {
+    docs: {
+      source: {
+        codePanel: true,
+      },
+    },
+  },
+};
+```
+
 ### `parameters.docs.source.format` removal
 
 The `parameters.docs.source.format` parameter has been removed in favor of using `parameters.docs.source.transform`. If you were using `format` to prettify your code via prettier, you can now use the `transform` parameter with Prettier directly:

code/.storybook/preview.tsx

@@ -7,7 +7,6 @@ import { global } from '@storybook/global';
 
 import type { Decorator, Loader, ReactRenderer } from '@storybook/react-vite';
 // TODO add empty preview
-// import * as storysource from '@storybook/addon-storysource';
 // import * as designs from '@storybook/addon-designs/preview';
 import { definePreview } from '@storybook/react-vite';