-
-
Notifications
You must be signed in to change notification settings - Fork 9.4k
/
MIGRATION.md
4042 lines (2794 loc) · 171 KB
/
MIGRATION.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<h1>Migration</h1>
- [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
- [7.0 breaking changes](#70-breaking-changes)
- [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates)
- [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below)
- [ESM format in Main.js](#esm-format-in-mainjs)
- [Modern browser support](#modern-browser-support)
- [React peer dependencies required](#react-peer-dependencies-required)
- [start-storybook / build-storybook binaries removed](#start-storybook--build-storybook-binaries-removed)
- [Framework field mandatory](#framework-field-mandatory)
- [frameworkOptions renamed](#frameworkoptions-renamed)
- [TypeScript: StorybookConfig type moved](#typescript-storybookconfig-type-moved)
- [Titles are statically computed](#titles-are-statically-computed)
- [Framework standalone build moved](#framework-standalone-build-moved)
- [Change of root html IDs](#change-of-root-html-ids)
- [Stories glob matches MDX files](#stories-glob-matches-mdx-files)
- [Add strict mode](#add-strict-mode)
- [Babel mode v7 exclusively](#babel-mode-v7-exclusively)
- [Importing plain markdown files with `transcludeMarkdown` has changed](#importing-plain-markdown-files-with-transcludemarkdown-has-changed)
- [7.0 feature flags removed](#70-feature-flags-removed)
- [Core addons](#core-addons)
- [Removed auto injection of @storybook/addon-actions decorator](#removed-auto-injection-of-storybookaddon-actions-decorator)
- [Addon-backgrounds: Removed deprecated grid parameter](#addon-backgrounds-removed-deprecated-grid-parameter)
- [Addon-a11y: Removed deprecated withA11y decorator](#addon-a11y-removed-deprecated-witha11y-decorator)
- [Vite](#vite)
- [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically)
- [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
- [Webpack](#webpack)
- [Webpack4 support discontinued](#webpack4-support-discontinued)
- [Postcss removed](#postcss-removed)
- [Removed DLL flags](#removed-dll-flags)
- [Framework-specific](#framework-specific)
- [Angular: Drop support for Angular \< 14](#angular-drop-support-for-angular--14)
- [Angular: Drop support for calling Storybook directly](#angular-drop-support-for-calling-storybook-directly)
- [Angular: Removed legacy renderer](#angular-removed-legacy-renderer)
- [SvelteKit: needs the `@storybook/sveltekit` framework](#sveltekit-needs-the-storybooksveltekit-framework)
- [Vue3: replaced app export with setup](#vue3-replaced-app-export-with-setup)
- [Addon authors](#addon-authors)
- [register.js removed](#registerjs-removed)
- [No more default export from `@storybook/addons`](#no-more-default-export-from-storybookaddons)
- [No more configuration for manager](#no-more-configuration-for-manager)
- [Icons API changed](#icons-api-changed)
- [Removed global client APIs](#removed-global-client-apis)
- [Docs Changes](#docs-changes)
- [Autodocs changes](#autodocs-changes)
- [MDX docs files](#mdx-docs-files)
- [Unattached docs files](#unattached-docs-files)
- [Doc Blocks](#doc-blocks)
- [Meta block](#meta-block)
- [Description block, `parameters.notes` and `parameters.info`](#description-block-parametersnotes-and-parametersinfo)
- [Story block](#story-block)
- [Source block](#source-block)
- [Canvas block](#canvas-block)
- [ArgsTable block](#argstable-block)
- [Configuring Autodocs](#configuring-autodocs)
- [MDX2 upgrade](#mdx2-upgrade)
- [Legacy MDX1 support](#legacy-mdx1-support)
- [Default docs styles will leak into non-story user components](#default-docs-styles-will-leak-into-non-story-user-components)
- [Explicit `<code>` elements are no longer syntax highlighted](#explicit-code-elements-are-no-longer-syntax-highlighted)
- [Dropped source loader / storiesOf static snippets](#dropped-source-loader--storiesof-static-snippets)
- [Removed docs.getContainer and getPage parameters](#removed-docsgetcontainer-and-getpage-parameters)
- [Addon-docs: Removed deprecated blocks.js entry](#addon-docs-removed-deprecated-blocksjs-entry)
- [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration)
- [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration)
- [Autoplay in docs](#autoplay-in-docs)
- [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global)
- [7.0 Deprecations and default changes](#70-deprecations-and-default-changes)
- [storyStoreV7 enabled by default](#storystorev7-enabled-by-default)
- [`Story` type deprecated](#story-type-deprecated)
- [`ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are deprecated](#componentstory-componentstoryobj-componentstoryfn-and-componentmeta-types-are-deprecated)
- [Renamed `renderToDOM` to `renderToCanvas`](#renamed-rendertodom-to-rendertocanvas)
- [Renamed `XFramework` to `XRenderer`](#renamed-xframework-to-xrenderer)
- [Renamed `DecoratorFn` to `Decorator`](#renamed-decoratorfn-to-decorator)
- [CLI option `--use-npm` deprecated](#cli-option---use-npm-deprecated)
- ['config' preset entry replaced with 'previewAnnotations'](#config-preset-entry-replaced-with-previewannotations)
- [From version 6.4.x to 6.5.0](#from-version-64x-to-650)
- [Vue 3 upgrade](#vue-3-upgrade)
- [React18 new root API](#react18-new-root-api)
- [Renamed isToolshown to showToolbar](#renamed-istoolshown-to-showtoolbar)
- [Dropped support for addon-actions addDecorators](#dropped-support-for-addon-actions-adddecorators)
- [Vite builder renamed](#vite-builder-renamed)
- [Docs framework refactor for React](#docs-framework-refactor-for-react)
- [Opt-in MDX2 support](#opt-in-mdx2-support)
- [CSF3 auto-title improvements](#csf3-auto-title-improvements)
- [Auto-title filename case](#auto-title-filename-case)
- [Auto-title redundant filename](#auto-title-redundant-filename)
- [Auto-title always prefixes](#auto-title-always-prefixes)
- [6.5 Deprecations](#65-deprecations)
- [Deprecated register.js](#deprecated-registerjs)
- [From version 6.3.x to 6.4.0](#from-version-63x-to-640)
- [Automigrate](#automigrate)
- [CRA5 upgrade](#cra5-upgrade)
- [CSF3 enabled](#csf3-enabled)
- [Optional titles](#optional-titles)
- [String literal titles](#string-literal-titles)
- [StoryObj type](#storyobj-type)
- [Story Store v7](#story-store-v7)
- [Behavioral differences](#behavioral-differences)
- [Main.js framework field](#mainjs-framework-field)
- [Using the v7 store](#using-the-v7-store)
- [v7-style story sort](#v7-style-story-sort)
- [v7 Store API changes for addon authors](#v7-store-api-changes-for-addon-authors)
- [Storyshots compatibility in the v7 store](#storyshots-compatibility-in-the-v7-store)
- [Emotion11 quasi-compatibility](#emotion11-quasi-compatibility)
- [Babel mode v7](#babel-mode-v7)
- [Loader behavior with args changes](#loader-behavior-with-args-changes)
- [6.4 Angular changes](#64-angular-changes)
- [SB Angular builder](#sb-angular-builder)
- [Angular13](#angular13)
- [Angular component parameter removed](#angular-component-parameter-removed)
- [6.4 deprecations](#64-deprecations)
- [Deprecated --static-dir CLI flag](#deprecated---static-dir-cli-flag)
- [From version 6.2.x to 6.3.0](#from-version-62x-to-630)
- [Webpack 5](#webpack-5)
- [Fixing hoisting issues](#fixing-hoisting-issues)
- [Webpack 5 manager build](#webpack-5-manager-build)
- [Wrong webpack version](#wrong-webpack-version)
- [Angular 12 upgrade](#angular-12-upgrade)
- [Lit support](#lit-support)
- [No longer inferring default values of args](#no-longer-inferring-default-values-of-args)
- [6.3 deprecations](#63-deprecations)
- [Deprecated addon-knobs](#deprecated-addon-knobs)
- [Deprecated scoped blocks imports](#deprecated-scoped-blocks-imports)
- [Deprecated layout URL params](#deprecated-layout-url-params)
- [From version 6.1.x to 6.2.0](#from-version-61x-to-620)
- [MDX pattern tweaked](#mdx-pattern-tweaked)
- [6.2 Angular overhaul](#62-angular-overhaul)
- [New Angular storyshots format](#new-angular-storyshots-format)
- [Deprecated Angular story component](#deprecated-angular-story-component)
- [New Angular renderer](#new-angular-renderer)
- [Components without selectors](#components-without-selectors)
- [Packages now available as ESModules](#packages-now-available-as-esmodules)
- [6.2 Deprecations](#62-deprecations)
- [Deprecated implicit PostCSS loader](#deprecated-implicit-postcss-loader)
- [Deprecated default PostCSS plugins](#deprecated-default-postcss-plugins)
- [Deprecated showRoots config option](#deprecated-showroots-config-option)
- [Deprecated control.options](#deprecated-controloptions)
- [Deprecated storybook components html entry point](#deprecated-storybook-components-html-entry-point)
- [From version 6.0.x to 6.1.0](#from-version-60x-to-610)
- [Addon-backgrounds preset](#addon-backgrounds-preset)
- [Single story hoisting](#single-story-hoisting)
- [React peer dependencies](#react-peer-dependencies)
- [6.1 deprecations](#61-deprecations)
- [Deprecated DLL flags](#deprecated-dll-flags)
- [Deprecated storyFn](#deprecated-storyfn)
- [Deprecated onBeforeRender](#deprecated-onbeforerender)
- [Deprecated grid parameter](#deprecated-grid-parameter)
- [Deprecated package-composition disabled parameter](#deprecated-package-composition-disabled-parameter)
- [From version 5.3.x to 6.0.x](#from-version-53x-to-60x)
- [Hoisted CSF annotations](#hoisted-csf-annotations)
- [Zero config typescript](#zero-config-typescript)
- [Correct globs in main.js](#correct-globs-in-mainjs)
- [CRA preset removed](#cra-preset-removed)
- [Core-JS dependency errors](#core-js-dependency-errors)
- [Args passed as first argument to story](#args-passed-as-first-argument-to-story)
- [6.0 Docs breaking changes](#60-docs-breaking-changes)
- [Remove framework-specific docs presets](#remove-framework-specific-docs-presets)
- [Preview/Props renamed](#previewprops-renamed)
- [Docs theme separated](#docs-theme-separated)
- [DocsPage slots removed](#docspage-slots-removed)
- [React prop tables with Typescript](#react-prop-tables-with-typescript)
- [ConfigureJSX true by default in React](#configurejsx-true-by-default-in-react)
- [User babelrc disabled by default in MDX](#user-babelrc-disabled-by-default-in-mdx)
- [Docs description parameter](#docs-description-parameter)
- [6.0 Inline stories](#60-inline-stories)
- [New addon presets](#new-addon-presets)
- [Removed babel-preset-vue from Vue preset](#removed-babel-preset-vue-from-vue-preset)
- [Removed Deprecated APIs](#removed-deprecated-apis)
- [New setStories event](#new-setstories-event)
- [Removed renderCurrentStory event](#removed-rendercurrentstory-event)
- [Removed hierarchy separators](#removed-hierarchy-separators)
- [No longer pass denormalized parameters to storySort](#no-longer-pass-denormalized-parameters-to-storysort)
- [Client API changes](#client-api-changes)
- [Removed Legacy Story APIs](#removed-legacy-story-apis)
- [Can no longer add decorators/parameters after stories](#can-no-longer-add-decoratorsparameters-after-stories)
- [Changed Parameter Handling](#changed-parameter-handling)
- [Simplified Render Context](#simplified-render-context)
- [Story Store immutable outside of configuration](#story-store-immutable-outside-of-configuration)
- [Improved story source handling](#improved-story-source-handling)
- [6.0 Addon API changes](#60-addon-api-changes)
- [Consistent local addon paths in main.js](#consistent-local-addon-paths-in-mainjs)
- [Deprecated setAddon](#deprecated-setaddon)
- [Deprecated disabled parameter](#deprecated-disabled-parameter)
- [Actions addon uses parameters](#actions-addon-uses-parameters)
- [Removed action decorator APIs](#removed-action-decorator-apis)
- [Removed withA11y decorator](#removed-witha11y-decorator)
- [Essentials addon disables differently](#essentials-addon-disables-differently)
- [Backgrounds addon has a new api](#backgrounds-addon-has-a-new-api)
- [6.0 Deprecations](#60-deprecations)
- [Deprecated addon-info, addon-notes](#deprecated-addon-info-addon-notes)
- [Deprecated addon-contexts](#deprecated-addon-contexts)
- [Removed addon-centered](#removed-addon-centered)
- [Deprecated polymer](#deprecated-polymer)
- [Deprecated immutable options parameters](#deprecated-immutable-options-parameters)
- [Deprecated addParameters and addDecorator](#deprecated-addparameters-and-adddecorator)
- [Deprecated clearDecorators](#deprecated-cleardecorators)
- [Deprecated configure](#deprecated-configure)
- [Deprecated support for duplicate kinds](#deprecated-support-for-duplicate-kinds)
- [From version 5.2.x to 5.3.x](#from-version-52x-to-53x)
- [To main.js configuration](#to-mainjs-configuration)
- [Using main.js](#using-mainjs)
- [Using preview.js](#using-previewjs)
- [Using manager.js](#using-managerjs)
- [Create React App preset](#create-react-app-preset)
- [Description doc block](#description-doc-block)
- [React Native Async Storage](#react-native-async-storage)
- [Deprecate displayName parameter](#deprecate-displayname-parameter)
- [Unified docs preset](#unified-docs-preset)
- [Simplified hierarchy separators](#simplified-hierarchy-separators)
- [Addon StoryShots Puppeteer uses external puppeteer](#addon-storyshots-puppeteer-uses-external-puppeteer)
- [From version 5.1.x to 5.2.x](#from-version-51x-to-52x)
- [Source-loader](#source-loader)
- [Default viewports](#default-viewports)
- [Grid toolbar-feature](#grid-toolbar-feature)
- [Docs mode docgen](#docs-mode-docgen)
- [storySort option](#storysort-option)
- [From version 5.1.x to 5.1.10](#from-version-51x-to-5110)
- [babel.config.js support](#babelconfigjs-support)
- [From version 5.0.x to 5.1.x](#from-version-50x-to-51x)
- [React native server](#react-native-server)
- [Angular 7](#angular-7)
- [CoreJS 3](#corejs-3)
- [From version 5.0.1 to 5.0.2](#from-version-501-to-502)
- [Deprecate webpack extend mode](#deprecate-webpack-extend-mode)
- [From version 4.1.x to 5.0.x](#from-version-41x-to-50x)
- [sortStoriesByKind](#sortstoriesbykind)
- [Webpack config simplification](#webpack-config-simplification)
- [Theming overhaul](#theming-overhaul)
- [Story hierarchy defaults](#story-hierarchy-defaults)
- [Options addon deprecated](#options-addon-deprecated)
- [Individual story decorators](#individual-story-decorators)
- [Addon backgrounds uses parameters](#addon-backgrounds-uses-parameters)
- [Addon cssresources name attribute renamed](#addon-cssresources-name-attribute-renamed)
- [Addon viewport uses parameters](#addon-viewport-uses-parameters)
- [Addon a11y uses parameters, decorator renamed](#addon-a11y-uses-parameters-decorator-renamed)
- [Addon centered decorator deprecated](#addon-centered-decorator-deprecated)
- [New keyboard shortcuts defaults](#new-keyboard-shortcuts-defaults)
- [New URL structure](#new-url-structure)
- [Rename of the `--secure` cli parameter to `--https`](#rename-of-the---secure-cli-parameter-to---https)
- [Vue integration](#vue-integration)
- [From version 4.0.x to 4.1.x](#from-version-40x-to-41x)
- [Private addon config](#private-addon-config)
- [React 15.x](#react-15x)
- [From version 3.4.x to 4.0.x](#from-version-34x-to-40x)
- [React 16.3+](#react-163)
- [Generic addons](#generic-addons)
- [Knobs select ordering](#knobs-select-ordering)
- [Knobs URL parameters](#knobs-url-parameters)
- [Keyboard shortcuts moved](#keyboard-shortcuts-moved)
- [Removed addWithInfo](#removed-addwithinfo)
- [Removed RN packager](#removed-rn-packager)
- [Removed RN addons](#removed-rn-addons)
- [Storyshots Changes](#storyshots-changes)
- [Webpack 4](#webpack-4)
- [Babel 7](#babel-7)
- [Create-react-app](#create-react-app)
- [Upgrade CRA1 to babel 7](#upgrade-cra1-to-babel-7)
- [Migrate CRA1 while keeping babel 6](#migrate-cra1-while-keeping-babel-6)
- [start-storybook opens browser](#start-storybook-opens-browser)
- [CLI Rename](#cli-rename)
- [Addon story parameters](#addon-story-parameters)
- [From version 3.3.x to 3.4.x](#from-version-33x-to-34x)
- [From version 3.2.x to 3.3.x](#from-version-32x-to-33x)
- [`babel-core` is now a peer dependency #2494](#babel-core-is-now-a-peer-dependency-2494)
- [Base webpack config now contains vital plugins #1775](#base-webpack-config-now-contains-vital-plugins-1775)
- [Refactored Knobs](#refactored-knobs)
- [From version 3.1.x to 3.2.x](#from-version-31x-to-32x)
- [Moved TypeScript addons definitions](#moved-typescript-addons-definitions)
- [Updated Addons API](#updated-addons-api)
- [From version 3.0.x to 3.1.x](#from-version-30x-to-31x)
- [Moved TypeScript definitions](#moved-typescript-definitions)
- [Deprecated head.html](#deprecated-headhtml)
- [From version 2.x.x to 3.x.x](#from-version-2xx-to-3xx)
- [Webpack upgrade](#webpack-upgrade)
- [Packages renaming](#packages-renaming)
- [Deprecated embedded addons](#deprecated-embedded-addons)
## From version 6.5.x to 7.0.0
A number of these changes can be made automatically by the Storybook CLI. To take advantage of these "automigrations", run `npx storybook@next upgrade --prerelease` or `pnpx storybook@next upgrade --prerelease`.
### 7.0 breaking changes
#### Story context is prepared before for supporting fine grained updates
This change modifies the way Storybook prepares stories to avoid reactive args to get lost for fine-grained updates JS frameworks as `SolidJS` or `Vue`. That's because those frameworks handle args/props as proxies behind the scenes to make reactivity work. So when `argType` mapping was done in `prepareStory` the Proxies were destroyed and args becomes a plain object again, losing the reactivity.
For avoiding that, this change passes the mapped args instead of raw args at `renderToCanvas` so that the proxies stay intact. Also decorators will benefit from this as well by receiving mapped args instead of raw args.
#### Dropped support for Node 15 and below
Storybook 7.0 requires **Node 16** or above. If you are using an older version of Node, you will need to upgrade or keep using Storybook 6 in the meantime.
#### ESM format in Main.js
Storybook 7.0 supports ESM in `.storybook/main.js`, and the configurations can be part of a default export. The default export will be the recommended way going forward.
If your main.js file looks like this:
```js
module.exports = {
stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
framework: { name: '@storybook/react-vite' },
};
```
Or like this:
```js
export const stories = ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'];
export const framework = { name: '@storybook/react-vite' };
```
Please migrate them to be default exported instead:
```js
const config = {
stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
framework: { name: '@storybook/react-vite' },
};
export default config;
```
For Typescript users, we introduced types for that default export, so you can import it in your main.ts file. The `StorybookConfig` type will come from the Storybook package for the framework you are using, which relates to the package in the "framework" field you have in your main.ts file. For example, if you are using React Vite, you will import it from `@storybook/react-vite`:
```ts
import { StorybookConfig } from '@storybook/react-vite';
const config: StorybookConfig = {
stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
framework: { name: '@storybook/react-vite' },
};
export default config;
```
#### Modern browser support
Starting in Storybook 7.0, Storybook will no longer support IE11, amongst other legacy browser versions.
We now transpile our code with a target of `chrome >= 100` and node code is transpiled with a target of `node >= 16`.
This means code-features such as (but not limited to) `async/await`, arrow-functions, `const`,`let`, etc will exist in the code at runtime, and thus the runtime environment must support it.
Not just the runtime needs to support it, but some legacy loaders for Webpack or other transpilation tools might need to be updated as well. For example, certain versions of Webpack 4 had parsers that could not parse the new syntax (e.g. optional chaining).
Some addons or libraries might depended on this legacy browser support, and thus might break. You might get an error like:
```
regeneratorRuntime is not defined
```
To fix these errors, the addon will have to be re-released with a newer browser-target for transpilation. This often looks something like this (but it's dependent on the build system the addon uses):
```js
// babel.config.js
module.exports = {
presets: [
[
'@babel/preset-env',
{
shippedProposals: true,
useBuiltIns: 'usage',
corejs: '3',
modules: false,
targets: { chrome: '100' },
},
],
],
};
```
Here's an example PR to one of the Storybook addons: https://github.com/storybookjs/addon-coverage/pull/3 doing just that.
#### React peer dependencies required
_Has automigration_
Starting in 7.0, `react` and `react-dom` are now required peer dependencies of Storybook when using addon-docs (or docs via addon-essentials).
Storybook uses `react` in a variety of docs-related packages. In the past, we've done various trickery hide this from non-React users. However, with stricter peer dependency handling by `npm8`, `npm`, and `yarn pnp` those tricks have started to cause problems for those users. Rather than resorting to even more complicated tricks, we are making `react` and `react-dom` required peer dependencies.
To upgrade manually, add any version of `react` and `react-dom` as devDependencies using your package manager of choice, e.g.
```
npm add react react-dom --dev
```
#### start-storybook / build-storybook binaries removed
_Has automigration_
SB6.x framework packages shipped binaries called `start-storybook` and `build-storybook`.
In SB7.0, we've removed these binaries and replaced them with new commands in Storybook's CLI: `storybook dev` and `storybook build`. These commands will look for the `framework` field in your `.storybook/main.js` config--[which is now required](#framework-field-mandatory)--and use that to determine how to start/build your Storybook. The benefit of this change is that it is now possible to install multiple frameworks in a project without having to worry about hoisting issues.
A typical Storybook project includes two scripts in your projects `package.json`:
```json
{
"scripts": {
"storybook": "start-storybook <some flags>",
"build-storybook": "build-storybook <some flags>"
}
}
```
To convert this project to 7.0:
```json
{
"scripts": {
"storybook": "storybook dev <some flags>",
"build-storybook": "storybook build <some flags>"
},
"devDependencies": {
"storybook": "next"
}
}
```
The new CLI commands remove the following flags:
| flag | migration |
| -------- | --------------------------------------------------------------------------------------------- |
| --modern | No migration needed. [All ESM code is modern in SB7](#modern-esm--ie11-support-discontinued). |
#### Framework field mandatory
_Has automigration_
In 6.4 we introduced a new `main.js` field called [`framework`](#mainjs-framework-field). Starting in 7.0, this field is mandatory.
The value of the `framework` field has also changed.
In 6.4, valid values included `@storybook/react`, `@storybook/vue`, etc.
In 7.0, frameworks also specify the builder to be used. For example, The current list of frameworks include:
- `@storybook/angular`
- `@storybook/ember`
- `@storybook/html-vite`
- `@storybook/html-webpack5`
- `@storybook/nextjs`
- `@storybook/preact-vite`
- `@storybook/preact-webpack5`
- `@storybook/react-vite`
- `@storybook/react-webpack5`
- `@storybook/server-webpack5`
- `@storybook/svelte-vite`
- `@storybook/svelte-webpack5`
- `@storybook/sveltekit`
- `@storybook/vue-vite`
- `@storybook/vue-webpack5`
- `@storybook/vue3-vite`
- `@storybook/vue3-webpack5`
- `@storybook/web-components-vite`
- `@storybook/web-components-webpack5`
We will be expanding this list over the course of the 7.0 development cycle. More info on the rationale here: [Frameworks RFC](https://www.notion.so/chromatic-ui/Frameworks-RFC-89f8aafe3f0941ceb4c24683859ed65c).
#### frameworkOptions renamed
In 7.0, the `main.js` fields `reactOptions` and `angularOptions` have been renamed. They are now options on the `framework` field:
```js
module.exports = {
framework: {
name: '@storybook/react-webpack5',
options: { fastRefresh: true },
},
};
```
#### TypeScript: StorybookConfig type moved
If you are using TypeScript you should import the `StorybookConfig` type from your framework package.
For example:
```ts
import type { StorybookConfig } from '@storybook/react-vite';
const config: StorybookConfig = {
framework: '@storybook/react-vite',
// ... your configuration
};
export default config;
```
#### Titles are statically computed
Up until version 7.0, it was possible to generate the default export of a CSF story by calling a function, or mixing in variables defined in other ES Modules. For instance:
```js
// Dynamically computed local title
const categories = {
atoms: 'Atoms',
molecules: 'Molecules',
// etc.
}
export default {
title: `${categories.atoms}/MyComponent`
}
// Title returned by a function
import { genDefault } from '../utils/storybook'
export default genDefault({
category: 'Atoms',
title: 'MyComponent',
})
```
This is no longer possible in Storybook 7.0, as story titles are parsed at build time. In earlier versions, titles were mostly produced manually. Now that [CSF3 auto-title](#csf3-auto-title-improvements) is available, optimisations were made that constrain how `id` and `title` can be defined manually.
As a result, titles cannot depend on variables or functions, and cannot be dynamically computed (even with local variables). Stories must have a static `title` property, or a static `component` property used by the [CSF3 auto-title](#csf3-auto-title-improvements) feature to compute a title.
Likewise, the `id` property must be statically defined. The URL defined for a story in the sidebar will be statically computed, so if you dynamically add an `id` through a function call like above, the story URL will not match the one in the sidebar and the story will be unreachable.
To opt-out of the old behavior you can set the `storyStoreV7` feature flag to `false` in `main.js`. However, a variety of performance optimizations depend on the new behavior, and the old behavior is deprecated and will be removed from Storybook in 8.0.
```js
module.exports = {
features: {
storyStoreV7: false,
},
};
```
#### Framework standalone build moved
In 7.0 the location of the standalone node API has moved to `@storybook/core-server`.
If you used the React standalone API, for example, you might have written:
```js
const { buildStandalone } = require('@storybook/react/standalone');
const options = {};
buildStandalone(options).then(() => console.log('done'));
```
In 7.0, you would now use:
```js
const build = require('@storybook/core-server/standalone');
const options = {};
build(options).then(() => console.log('done'));
```
#### Change of root html IDs
The root ID unto which Storybook renders stories is renamed from `root` to `#storybook-root` to avoid conflicts with user's code.
#### Stories glob matches MDX files
If you used a directory based stories glob, in 6.x it would match `.stories.js` (and other JS extensions) and `.stories.mdx` files. For instance:
```js
// in main.js
export default {
stories: ['../path/to/directory']
};
// or
export default {
stories: [{ directory: '../path/to/directory' }]
};
```
In 7.0, this pattern will also match `.mdx` files (the new extension for docs files - see docs changes below). If you have `.mdx` files you don't want to appear in your storybook, either move them out of the directory, or add a `files` specifier with the old pattern (`"**/*.stories.@(mdx|tsx|ts|jsx|js)"`):
```js
export default {
stories: [{ directory: '../path/to/directory', files: '**/*.stories.@(mdx|tsx|ts|jsx|js)' }],
};
```
#### Add strict mode
Starting in 7.0, Storybook's build tools add [`"use strict"`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode) to the compiled JS output.
If user code in `.storybook/preview.js` or stories relies on "sloppy" mode behavior, it will need to be updated. As a workaround, it is sometimes possible to move the sloppy mode code inside a script tag in `.storybook/preview-head.html`.
#### Babel mode v7 exclusively
_Has automigration_
Storybook now uses [Babel mode v7](#babel-mode-v7) exclusively. In 6.x, Storybook provided its own babel settings out of the box. Now, Storybook's uses your project's babel settings (`.babelrc`, `babel.config.js`, etc.) instead.
In the new mode, Storybook expects you to provide a configuration file. If you want a configuration file that's equivalent to the 6.x default, you can run the following command in your project directory:
```sh
npx sb@next babelrc
```
This will create a `.babelrc.json` file. This file includes a bunch of babel plugins, so you may need to add new package devDependencies accordingly.
#### Importing plain markdown files with `transcludeMarkdown` has changed
The `transcludeMarkdown` option in `addon-docs` have been removed, and the automatic handling of `.md` files in Vite projects have also been disabled.
Instead `.md` files can be imported as plain strings by adding the `?raw` suffix to the import, and then passed to the new `Markdown` block. In an MDX file that would look like this:
```
import { Markdown } from '@storybook/blocks';
import ReadMe from './README.md?raw';
...
<Markdown>{ReadMe}</Markdown>
```
#### 7.0 feature flags removed
Storybook uses temporary feature flags to opt-in to future breaking changes or opt-in to legacy behaviors. For example:
```js
module.exports = {
features: {
emotionAlias: false,
},
};
```
In 7.0 we've removed the following feature flags:
| flag | migration instructions |
| ------------------- | ----------------------------------------------------------- |
| `emotionAlias` | This flag is no longer needed and should be deleted. |
| `breakingChangesV7` | This flag is no longer needed and should be deleted. |
| `babelModeV7` | See [Babel mode v7 exclusively](#babel-mode-v7-exclusively) |
### Core addons
#### Removed auto injection of @storybook/addon-actions decorator
The `withActions` decorator is no longer automatically added to stories. This is because it is really only used in the html renderer, for all other renderers it's redundant.
If you are using the html renderer and use the `handles` parameter, you'll need to manually add the `withActions` decorator:
```diff
import globalThis from 'global';
+import { withActions } from '@storybook/addon-actions/decorator';
export default {
component: globalThis.Components.Button,
args: {
label: 'Click Me!',
},
parameters: {
chromatic: { disable: true },
},
};
export const Basic = {
parameters: {
handles: [{ click: 'clicked', contextmenu: 'right clicked' }],
},
+ decorators: [withActions],
};
```
#### Addon-backgrounds: Removed deprecated grid parameter
Starting in 7.0 the `grid.cellSize` parameter should now be `backgrounds.grid.cellSize`. This was [deprecated in SB 6.1](#deprecated-grid-parameter).
#### Addon-a11y: Removed deprecated withA11y decorator
We removed the deprecated `withA11y` decorator. This was [deprecated in 6.0](#removed-witha11y-decorator)
### Vite
#### Vite builder uses Vite config automatically
When using a [Vite-based framework](#framework-field-mandatory), Storybook will automatically use your `vite.config.(ctm)js` config file starting in 7.0.
Some settings will be overridden by Storybook so that it can function properly, and the merged settings can be modified using `viteFinal` in `.storybook/main.js` (see the [Storybook Vite configuration docs](https://storybook.js.org/docs/react/builders/vite#configuration)).
If you were using `viteFinal` in 6.5 to simply merge in your project's standard Vite config, you can now remove it.
For Svelte projects this means that the `svelteOptions` property in the `main.js` config should be omitted, as it will be loaded automatically via the project's `vite.config.js`. An exception to this is when the project needs different Svelte options for Storybook than the Vite config provides for the application itself.
#### Vite cache moved to node_modules/.cache/.vite-storybook
Previously, Storybook's Vite builder placed cache files in node_modules/.vite-storybook. However, it's more common for tools to place cached files into `node_modules/.cache`, and putting them there makes it quick and easy to clear the cache for multiple tools at once. We don't expect this change will cause any problems, but it's something that users of Storybook Vite projects should know about. It can be configured by setting `cacheDir` in `viteFinal` within `.storybook/main.js` [Storybook Vite configuration docs](https://storybook.js.org/docs/react/builders/vite#configuration)).
### Webpack
#### Webpack4 support discontinued
SB7.0 no longer supports Webpack4.
Depending on your project specifics, it might be possible to run your Storybook using the webpack5 builder without error.
If you are running into errors, you can upgrade your project to Webpack5 or you can try debugging those errors.
To upgrade:
- If you're configuring Webpack directly, see the Webpack5 [release announcement](https://webpack.js.org/blog/2020-10-10-webpack-5-release/) and [migration guide](https://webpack.js.org/migrate/5).
- If you're using Create React App, see the [migration notes](https://github.com/facebook/create-react-app/blob/main/CHANGELOG.md#migrating-from-40x-to-500) to upgrade from V4 (Webpack4) to 5
During the 7.0 dev cycle we will be updating this section with useful resources as we run across them.
#### Postcss removed
Storybook 6.x installed postcss by default. In 7.0 built-in support has been removed for Webpack-based frameworks. If you need it, you can add it back using [`@storybook/addon-postcss`](https://github.com/storybookjs/addon-postcss).
#### Removed DLL flags
Earlier versions of Storybook used Webpack DLLs as a performance crutch. In 6.1, we've removed Storybook's built-in DLLs and have deprecated the command-line parameters `--no-dll` and `--ui-dll`. In 7.0 those options are removed.
### Framework-specific
#### Angular: Drop support for Angular < 14
Starting in 7.0, we drop support for Angular < 14
#### Angular: Drop support for calling Storybook directly
In Storybook 6.4 we have deprecated calling Storybook directly (`npm run storybook`) for Angular. In Storybook 7.0, we've removed it entirely. Instead you have to set up the Storybook builder in your `angular.json` and execute `ng run <your-project>:storybook` to start Storybook. Please visit https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular to set up Storybook for Angular correctly.
#### Angular: Removed legacy renderer
The `parameters.angularLegacyRendering` option is removed. You cannot use the old legacy renderer anymore.
#### SvelteKit: needs the `@storybook/sveltekit` framework
SvelteKit projects need to use the `@storybook/sveltekit` framework in the `main.js` file. Previously it was enough to just setup Storybook with Svelte+Vite, but that is no longer the case.
```js
// .storybook/main.js
export default {
framework: '@storybook/sveltekit',
};
```
Also see the note in [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically) about removing `svelteOptions`.
#### Vue3: replaced app export with setup
In 6.x `@storybook/vue3` exported a Vue application instance called `app`. In 7.0, this has been replaced by a `setup` function that can be used to initialize the application in your `.storybook/preview.js`:
Before:
```js
import { app } from '@storybook/vue3';
import Button from './Button.vue';
app.component('GlobalButton', Button);
```
After:
```js
import { setup } from '@storybook/vue3';
import Button from './Button.vue';
setup((app) => {
app.component('GlobalButton', Button);
});
```
### Addon authors
#### register.js removed
In SB 6.x and earlier, addons exported a `register.js` entry point by convention, and users would import this in `.storybook/manager.js`. This was [deprecated in SB 6.5](#deprecated-registerjs)
In 7.0, most of Storybook's addons now export a `manager.js` entry point, which is automatically registered in Storybook's manager when the addon is listed in `.storybook/main.js`'s `addons` field.
If your `.manager.js` config references `register.js` of any of the following addons, you can remove it: `a11y`, `actions`, `backgrounds`, `controls`, `interactions`, `jest`, `links`, `measure`, `outline`, `toolbars`, `viewport`.
#### No more default export from `@storybook/addons`
The default export from `@storybook/addons` has been removed. Please use the named exports instead:
```js
import { addons } from '@storybook/addons';
```
The named export has been available since 6.0 or earlier, so your updated code will be backwards-compatible with older versions of Storybook.
#### No more configuration for manager
The Storybook manager is no longer built with Webpack. Now it's built with esbuild.
Therefore, it's no longer possible to configure the manager. Esbuild comes preconfigured to handle importing CSS, and images.
If you're currently loading files other than CSS or images into the manager, you'll need to make changes so the files get converted to JS before publishing your addon.
This means the preset value `managerWebpack` is no longer respected, and should be removed from presets and `main.js` files.
Addons that run in the manager can depend on `react` and `@storybook/*` packages directly. They do not need to be peerDependencies.
But very importantly, the build system ensures there will only be 1 version of these packages at runtime. The version will come from the `@storybook/ui` package, and not from the addon.
For this reason it's recommended to have these dependencies as `devDependencies` in your addon's `package.json`.
The full list of packages that Storybook's manager bundler makes available for addons is here: https://github.com/storybookjs/storybook/blob/next/code/lib/ui/src/globals/types.ts
Addons in the manager will no longer be bundled together anymore, which means that if 1 fails, it doesn't break the whole manager.
Each addon is imported into the manager as an ESM module that's bundled separately.
#### Icons API changed
For addon authors who use the `Icons` component, its API has been updated in Storybook 7.
```diff
export interface IconsProps extends ComponentProps<typeof Svg> {
- icon?: IconKey;
- symbol?: IconKey;
+ icon: IconType;
+ useSymbol?: boolean;
}
```
Full change here: https://github.com/storybookjs/storybook/pull/18809
#### Removed global client APIs
The `addParameters` and `addDecorator` APIs to add global decorators and parameters, exported by the various frameworks (e.g. `@storybook/react`) and `@storybook/client` were deprecated in 6.0 and have been removed in 7.0.
Instead, use `export const parameters = {};` and `export const decorators = [];` in your `.storybook/preview.js`. Addon authors similarly should use such an export in a preview entry file (see [Preview entries](https://github.com/storybookjs/storybook/blob/next/docs/addons/writing-presets.md#preview-entries)).
### Docs Changes
The information hierarchy of docs in Storybook has changed in 7.0. The main difference is that each docs is listed in the sidebar as a separate entry underneath the component, rather than attached to individual stories. You can also opt-in to a Autodocs entry rather than having one for every component (previously stories).
We've also modernized the API for all the doc blocks (the MDX components you use to write custom docs pages), which we'll describe below.
#### Autodocs changes
In 7.0, rather than rendering each story in "docs view mode", Autodocs (formerly known as "Docs Page") operates by adding additional sidebar entries for each component. By default it uses the same template as was used in 6.x, and the entries are entitled `Docs`.
You can configure Autodocs in `main.js`:
```js
module.exports = {
docs: {
autodocs: true, // see below for alternatives
defaultName: 'Docs', // set to change the name of generated docs entries
},
};
```
If you are migrating from 6.x your `docs.autodocs` option will have been set to `true`, which has the effect of enabling docs page for _every_ CSF file. However, as of 7.0, the new default is `'tag'`, which requires opting into Autodocs per-CSF file, with the `autodocs` **tag** on your component export:
```ts
export default {
component: MyComponent
// Tags are a new feature coming in 7.1, that we are using to drive this behaviour.
tags: ['autodocs']
}
```
You can also set `autodocs: false` to opt-out of Autodocs entirely. Further configuration of Autodocs is described below.
**Parameter changes**
We've renamed many of the parameters that control docs rendering for consistency with the blocks (see below). The old parameters are now deprecated and will be removed in 8.0. Here is a full list of changes:
- `docs.inlineStories` has been renamed `docs.story.inline`
- `docs.iframeHeight` has been renamed `docs.story.iframeHeight`
- `notes` and `info` are no longer supported, instead use `docs.description.story | component`
#### MDX docs files
Previously `.stories.mdx` files were used to both define and document stories. In 7.0, we have deprecated defining stories in MDX files, and consequently have changed the suffix to simply `.mdx`. Our default `stories` glob in `main.js` will now match such files -- if you want to write MDX files that do not appear in Storybook, you may need to adjust the glob accordingly.
If you were using `.stories.mdx` files to write stories, we encourage you to move the stories to a CSF file, and _attach_ an `.mdx` file to that CSF file to document them. You can use the `Meta` block to attach a MDX file to a CSF file, and the `Story` block to render the stories:
```mdx
import { Meta, Story } from '@storybook/blocks';
import * as ComponentStories from './some-component.stories';
<Meta of={ComponentStories} />
<Story of={ComponentStories.Primary} />
```
You can create as many docs entries as you like for a given component. By default the docs entry will be named the same as the `.mdx` file (e.g. `Introduction.mdx` becomes `Introduction`). If the docs file is named the same as the component (e.g. `Button.mdx`, it will use the default autodocs name (`"Docs"`) and override autodocs).
By default docs entries are listed first for the component. You can sort them using story sorting.
#### Unattached docs files
In Storybook 6.x, to create a unattached docs MDX file (that is, one not attached to story or a CSF file), you'd have to create a `.stories.mdx` file, and describe its location with the `Meta` doc block:
```mdx
import { Meta } from '@storybook/addon-docs';
<Meta title="Introduction" />
```
In 7.0, things are a little simpler -- you should call the file `.mdx` (drop the `.stories`). This will mean behind the scenes there is no story attached to this entry. You may also drop the `title` and use autotitle (and leave the `Meta` component out entirely, potentially).
#### Doc Blocks
Additionally to changing the docs information architecture, we've updated the API of the doc blocks themselves to be more consistent and future proof.
**General changes**
- Each block now uses `of={}` as a primary API -- where the argument to the `of` prop is a CSF or story _export_.
- When you've attached to a CSF file (with the `Meta` block, or in Autodocs), you can drop the `of` and the block will reference the first story or the CSF file as a whole.
- Most other props controlling rendering of blocks now correspond precisely to the parameters for that block [defined for autodocs above](#autodocs-changes).
##### Meta block
The primary change of the `Meta` block is the ability to attach to CSF files with `<Meta of={}>` as described above.
##### Description block, `parameters.notes` and `parameters.info`
In 6.5 the Description doc block accepted a range of different props, `markdown`, `type` and `children` as a way to customize the content.
The props have been simplified and the block now only accepts an `of` prop, which can be a reference to either a CSF file, a default export (meta) or a story export, depending on which description you want to be shown. See TDB DOCS LINK for a deeper explanation of the new prop.
`parameters.notes` and `parameters.info` have been deprecated as a way to specify descriptions. Instead use JSDoc comments above the default export or story export, or use `parameters.docs.description.story | component` directly. See TDB DOCS LINK for a deeper explanation on how to write descriptions.
If you were previously using the `Description` block to render plain markdown in your docs, that behavior can now be achieved with the new `Markdown` block instead like this:
```
import { Markdown } from '@storybook/blocks';
import ReadMe from './README.md?raw';
...
<Markdown>{ReadMe}</Markdown>
```
Notice the `?raw` suffix in the markdown import is needed for this to work.
##### Story block
To reference a story in a MDX file, you should reference it with `of`:
```mdx
import { Meta, Story } from '@storybook/blocks';
import * as ComponentStories from './some-component.stories';
<Meta of={ComponentStories} />
<Story of={ComponentStories.standard} />
```
You can also reference a story from a different component:
```mdx
import { Meta, Story } from '@storybook/blocks';
import * as ComponentStories from './some-component.stories';
import * as SecondComponentStories from './second-component.stories';
<Meta of={ComponentStories} />
<Story of={SecondComponentStories.standard} meta={SecondComponentStories} />
```
Referencing stories by `id="xyz--abc"` is deprecated and should be replaced with `of={}` as above.
##### Source block
The source block now references a single story, the component, or a CSF file itself via the `of={}` parameter.
Referencing stories by `id="xyz--abc"` is deprecated and should be replaced with `of={}` as above. Referencing multiple stories via `ids={["xyz--abc"]}` is now deprecated and should be avoided (instead use two source blocks).
##### Canvas block
The Canvas block follows the same changes as [the Story block described above](#story-block).
Previously the Canvas block accepted children (Story blocks) as a way to reference stories. That has now been replaced with the `of={}` prop that accepts a reference to _a story_.
That also means the Canvas block no longer supports containing multiple stories or elements, and thus the props related to that - `isColumn` and `columns` - have also been deprecated.
- To pass props to the inner Story block use the `story={{ }}` prop
- Similarly, to pass props to the inner Source block use the `source={{ }}` prop.
- The `mdxSource` prop has been deprecated in favor of using `source={{ code: '...' }}`
- The `withSource` prop has been renamed to `sourceState`
Here's a full example of the new API:
```mdx
import { Meta, Canvas } from '@storybook/blocks';
import * as ComponentStories from './some-component.stories';
<Meta of={ComponentStories} />
<Canvas
of={ComponentStories.standard}
story={{
inline: false,
height: '200px'
}}
source={{
language: 'html',
code: 'custom code...'
}}
withToolbar={true}
additionalActions={[...]}
layout="fullscreen"
className="custom-class"
/>
```
##### ArgsTable block
The `ArgsTable` block is now deprecated, and two new blocks: `ArgsTypes` and `Controls` should be preferred.
- `<ArgTypes of={storyExports OR metaExports OR component} />` will render a readonly table of args/props descriptions for a story, CSF file or component. If `of` ommitted and the MDX file is attached it will render the arg types defined at the CSF file level.