Merge branch 'tom/sb-1149-implement-argtypes-block' into tom/sb-1152-…

…implement-controls-block

code/lib/cli/src/automigrate/fixes/missing-babelrc.ts

@@ -5,6 +5,7 @@ import { getStorybookInfo } from '@storybook/core-common';
 import { loadPartialConfigAsync } from '@babel/core';
 import { readConfig } from '@storybook/csf-tools';
 import type { Fix } from '../types';
+import { generateStorybookBabelConfigInCWD } from '../../babel-config';
 
 interface MissingBabelRcOptions {
   needsBabelRc: boolean;
@@ -22,7 +23,6 @@ const frameworksThatNeedBabelConfig = [
 
 export const missingBabelRc: Fix<MissingBabelRcOptions> = {
   id: 'missing-babelrc',
-  promptOnly: true,
 
   async check({ packageManager }) {
     const packageJson = packageManager.retrievePackageJson();
@@ -61,6 +61,7 @@ export const missingBabelRc: Fix<MissingBabelRcOptions> = {
     if (frameworksThatNeedBabelConfig.includes(frameworkPackage) && !hasCraPreset) {
       const config = await loadPartialConfigAsync({
         babelrc: true,
+        filename: '__fake__.js', // somehow needed to detect .babelrc.* files
       });
 
       if (!config.config && !config.babelrc && !packageJson.babel) {
@@ -72,19 +73,15 @@ export const missingBabelRc: Fix<MissingBabelRcOptions> = {
   },
   prompt() {
     return dedent`
-      ${chalk.bold(
-        chalk.red('Attention')
-      )}: We could not automatically make this change. You'll need to do it manually.
-
       We detected that your project does not have a babel configuration (.babelrc, babel.config.js, etc.).
 
-      In version 6.x, Storybook provided its own babel settings out of the box. Now, Storybook re-uses your project's babel configuration, with small, incremental updates from Storybook addons.
-
-      If your project does not have a babel configuration file, you can generate one that's equivalent to the 6.x defaults with the following command in your project directory:
+      In version 6.x, Storybook provided its own babel settings out of the box. Now, Storybook re-uses ${chalk.bold(
+        "your project's babel configuration"
+      )}, with small, incremental updates from Storybook addons.
 
-      ${chalk.blue('npx storybook@next babelrc')}
+      If your project does not have a babel configuration file, we can generate one that's equivalent to the 6.x defaults for you. Keep in mind that this can affect your project if it uses babel, and you may need to make additional changes based on your projects needs.
 
-      This will create a ${chalk.blue(
+      We can create a ${chalk.blue(
         '.babelrc.json'
       )} file with some basic configuration and add any necessary package devDependencies.
 
@@ -94,4 +91,8 @@ export const missingBabelRc: Fix<MissingBabelRcOptions> = {
       )}
     `;
   },
+  async run() {
+    logger.info();
+    await generateStorybookBabelConfigInCWD();
+  },
 };

code/lib/cli/src/babel-config.ts

@@ -2,6 +2,7 @@ import { writeFile, pathExists } from 'fs-extra';
 import { logger } from '@storybook/node-logger';
 import path from 'path';
 import prompts from 'prompts';
+import chalk from 'chalk';
 import { JsPackageManagerFactory } from './js-package-manager';
 
 export const generateStorybookBabelConfigInCWD = async () => {
@@ -19,7 +20,7 @@ export const generateStorybookBabelConfig = async ({ target }: { target: string
   if (exists) {
     const { overwrite } = await prompts({
       type: 'confirm',
-      initial: true,
+      initial: false,
       name: 'overwrite',
       message: `${fileName} already exists. Would you like overwrite it?`,
     });
@@ -30,16 +31,22 @@ export const generateStorybookBabelConfig = async ({ target }: { target: string
     }
   }
 
+  logger.info(
+    `The config will contain ${chalk.yellow(
+      '@babel/preset-env'
+    )} and you will be prompted for additional presets, if you wish to add them depending on your project needs.`
+  );
+
   const { typescript, jsx } = await prompts([
     {
       type: 'confirm',
-      initial: true,
+      initial: false,
       name: 'typescript',
       message: `Do you want to add the TypeScript preset?`,
     },
     {
       type: 'confirm',
-      initial: true,
+      initial: false,
       name: 'jsx',
       message: `Do you want to add the React preset?`,
     },

code/lib/core-server/src/utils/StoryIndexGenerator.ts

@@ -164,8 +164,8 @@ export class StoryIndexGenerator {
     );
   }
 
-  isDocsMdx(absolutePath: Path) {
-    return /(?<!\.stories)\.mdx$/i.test(absolutePath);
+  isStoryFile(absolutePath: Path) {
+    return /(\.(js|jsx|ts|tsx)|\.stories\.mdx)$/i.test(absolutePath);
   }
 
   async ensureExtracted(): Promise<IndexEntry[]> {
@@ -174,7 +174,7 @@ export class StoryIndexGenerator {
     // files may use the `<Meta of={XStories} />` syntax, which requires
     // that the story file that contains the meta be processed first.
     await this.updateExtracted(async (specifier, absolutePath) =>
-      this.isDocsMdx(absolutePath) ? false : this.extractStories(specifier, absolutePath)
+      this.isStoryFile(absolutePath) ? this.extractStories(specifier, absolutePath) : false
     );
 
     if (!this.options.docs.disable) {

docs/addons/install-addons.md

@@ -1,5 +1,5 @@
 ---
-title: Install addons
+title: 'Install addons'
 ---
 
 Storybook has [hundreds of reusable addons](https://storybook.js.org/addons) that are packaged as NPM modules. Let's walk through how to extend Storybook by installing and registering addons.
@@ -10,17 +10,26 @@ With the exception of preset addons, all addons have the same installation proce
 
 For example, to include accessibility testing in Storybook, run the following command to install the necessary addon:
 
-```shell
-yarn add -D @storybook/addon-a11y
-```
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-a11y-install.yarn.js.mdx',
+    'common/storybook-a11y-install.npm.js.mdx',
+    'common/storybook-a11y-install.pnpm.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
 
-Next, update [`.storybook/main.js`](../configure/overview.md#configure-story-rendering) to the following:
+Next, update [`.storybook/main.js|ts`](../configure/overview.md#configure-story-rendering) to the following:
 
 <!-- prettier-ignore-start -->
 
 <CodeSnippets
   paths={[
-    'common/storybook-main-addon-registration.js.mdx',
+    'common/storybook-a11y-register.js.mdx',
+    'common/storybook-a11y-register.ts.mdx',
   ]}
 />
 
@@ -55,13 +64,14 @@ For example, to use SCSS styling, run the following command to install the addon
  💡 Tip: Use the Webpack 5 snippet only if your framework already includes support for this version. Otherwise, use the Webpack 4 snippet. 
 </div>
 
-Next, update [`.storybook/main.js`](../configure/overview.md#configure-story-rendering) to the following:
+Next, update [`.storybook/main.js|ts`](../configure/overview.md#configure-story-rendering) to the following:
 
 <!-- prettier-ignore-start -->
 
 <CodeSnippets
   paths={[
     'common/storybook-main-preset-config.js.mdx',
+    'common/storybook-main-preset-config.ts.mdx',
   ]}
 />
 
@@ -83,6 +93,7 @@ Consider the following example:
 <CodeSnippets
   paths={[
     'common/storybook-preset-configuration.js.mdx',
+    'common/storybook-preset-configuration.ts.mdx',
   ]}
 />
 

docs/configure/environment-variables.md

@@ -83,6 +83,7 @@ Additionally, you can extend your Storybook configuration file (i.e., [`.storybo
 <CodeSnippets
   paths={[
     'common/storybook-main-env-field-config.js.mdx',
+    'common/storybook-main-env-field-config.ts.mdx',
   ]}
 />
 

docs/configure/images-and-assets.md

@@ -35,13 +35,14 @@ Afterward, you can use any asset in your stories:
 
 We recommend serving static files via Storybook to ensure that your components always have the assets they need to load. We recommend this technique for assets that your components often use, like logos, fonts, and icons.
 
-Configure a directory (or a list of directories) where your assets live when starting Storybook. Use the `staticDirs` configuration element in your main Storybook configuration file (i.e., `.storybook/main.js`) to specify the directories:
+Configure a directory (or a list of directories) where your assets live when starting Storybook. Use the `staticDirs` configuration element in your main Storybook configuration file (i.e., `.storybook/main.js|ts`) to specify the directories:
 
 <!-- prettier-ignore-start -->
 
 <CodeSnippets
   paths={[
     'common/storybook-main-with-single-static-dir.js.mdx',
+    'common/storybook-main-with-single-static-dir.ts.mdx',
   ]}
 />
 
@@ -75,6 +76,7 @@ You can also pass a list of directories separated by commas without spaces inste
 <CodeSnippets
   paths={[
     'common/storybook-main-with-multiple-static-dir.js.mdx',
+    'common/storybook-main-with-multiple-static-dir.ts.mdx',
   ]}
 />
 
@@ -87,6 +89,7 @@ Or even use a configuration object to define the directories:
 <CodeSnippets
   paths={[
     'common/storybook-main-with-object-configuration-static-dir.js.mdx',
+    'common/storybook-main-with-object-configuration-static-dir.ts.mdx',
   ]}
 />
 

docs/configure/overview.md

@@ -12,44 +12,42 @@ Note that you can change the folder that Storybook uses by setting the `-c` flag
 
 ## Configure your Storybook project
 
-The main configuration file is `main.js`. This file controls the Storybook server's behavior, so you must restart Storybook’s process when you change it. It contains the following:
+The main configuration file is `main.js|ts`. This file controls the Storybook server's behavior, so you must restart Storybook’s process when you change it. It contains the following:
 
 <!-- prettier-ignore-start -->
 
 <CodeSnippets
   paths={[
     'common/storybook-main-default-setup.js.mdx',
+    'common/storybook-main-baseline-setup.ts.mdx',
   ]}
 />
 
 <!-- prettier-ignore-end -->
 
-The `main.js` configuration file is a [preset](../addons/addon-types.md) and, as such, has a powerful interface, but the key fields within it are:
+The `main.js|ts` configuration file is a [preset](../addons/addon-types.md) and, as such, has a powerful interface, but the key fields within it are:
 
 - `stories` - an array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.js`.
 - `addons` - a list of the [addons](https://storybook.js.org/addons/) you are using.
-- `webpackFinal` - custom [webpack configuration](../builders/webpack.md#extending-storybooks-webpack-config).
+- `webpackFinal` - custom [Webpack configuration](../builders/webpack.md#extending-storybooks-webpack-config).
 - `babel` - custom [babel configuration](./babel.md).
 - `framework` - [framework specific configurations](./frameworks.md) to help the loading and building process.
+- `docs` - [auto-generated documentation](../writing-docs/docs-page.md.md) configuration.
 
 <div class="aside">
  💡 Tip: Customize your default story by referencing it first in the `stories` array.
 </div>
 
-See all the [available](#using-storybook-api) fields below if you need further customization.
+See all the [available](#using-storybook-types-in-your-configuration) fields below if you need further customization.
 
 ### Feature flags
 
 Additionally, you can also provide additional feature flags to your Storybook configuration. Below is an abridged list of available features that are currently available.
 
-| Configuration element | Description                                                                                                                                                                                                                          |
-| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `storyStoreV7`        | Configures Storybook to load stories [on demand](#on-demand-story-loading), rather than during boot up. <br/> `features: { storyStoreV7: true }`                                                                                     |
-| `buildStoriesJson`    | Generates a `stories.json` file to help story loading with the on demand mode. <br/> `features: { buildStoriesJson: true }`                                                                                                          |
-| `emotionAlias`        | Provides backwards compatibility for Emotion. See the [migration documentation](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#emotion11-quasi-compatibility) for context.<br/> `features: { emotionAlias: false }` |
-| `babelModeV7`         | Enables the new [Babel configuration](./babel.md#v7-mode) mode for Storybook. <br/> `features: { babelModeV7: true }`                                                                                                                |
-| `postcss`             | Disables the implicit PostCSS warning. See the [migration documentation](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-implicit-postcss-loader) for context. <br/> `features: { postcss: false }`       |
-| `previewMdx2`         | Enables experimental support for [MDX 2](../writing-docs/mdx.md#mdx-2).<br/>`features: { previewMdx2: true }`                                                                                                                        |
+| Configuration element | Description                                                                                                                                      |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `storyStoreV7`        | Configures Storybook to load stories [on demand](#on-demand-story-loading), rather than during boot up. <br/> `features: { storyStoreV7: true }` |
+| `buildStoriesJson`    | Generates a `stories.json` file to help story loading with the on demand mode. <br/> `features: { buildStoriesJson: true }`                      |
 
 ## Configure story loading
 
@@ -71,6 +69,7 @@ For example, if you wanted to pull both `.md` and `.js` files from the `my-proje
 <CodeSnippets
   paths={[
     'common/storybook-main-js-md-files.js.mdx',
+    'common/storybook-main-js-md-files.ts.mdx',
   ]}
 />
 
@@ -85,6 +84,7 @@ Additionally, you can customize your Storybook configuration to load your storie
 <CodeSnippets
   paths={[
     'common/storybook-storyloading-with-custom-object.js.mdx',
+    'common/storybook-storyloading-with-custom-object.ts.mdx',
   ]}
 />
 
@@ -101,6 +101,7 @@ You can also simplify your Storybook configuration and load the stories based on
 <CodeSnippets
   paths={[
     'common/storybook-storyloading-with-directory.js.mdx',
+    'common/storybook-storyloading-with-directory.ts.mdx',
   ]}
 />
 
@@ -115,27 +116,27 @@ You can also adjust your Storybook configuration and implement your custom logic
 <CodeSnippets
   paths={[
     'common/storybook-storyloading-custom-logic.js.mdx',
+    'common/storybook-storyloading-custom-logic.ts.mdx',
   ]}
 />
 
 <!-- prettier-ignore-end -->
 
 ### On-demand story loading
 
-As your Storybook grows in size, it gets challenging to load all of your stories in a performant way, slowing down the loading times and yielding a large bundle. Starting with Storybook 6.4, you can optimize your story loading by enabling the `storyStoreV7` feature flag in your configuration as follows:
+As your Storybook grows, it gets challenging to load all of your stories performantly, slowing down the loading times and yielding a large bundle. Out of the box, Storybook loads your stories on demand rather than during boot-up to improve the performance of your Storybook. If you need to load all of your stories during boot-up, you can disable this feature by setting the `storyStoreV7` feature flag to `false` in your configuration as follows:
 
 <!-- prettier-ignore-start -->
 
 <CodeSnippets
   paths={[
     'common/storybook-on-demand-story-loading.js.mdx',
+    'common/storybook-on-demand-story-loading.ts.mdx',
   ]}
 />
 
 <!-- prettier-ignore-end -->
 
-Once you've restarted your Storybook, you'll see an almost immediate performance gain in your loading times and also a decrease in the generated bundle.
-
 #### Known limitations
 
 This feature is experimental, and it has some limitations on what you can and cannot do in your stories files. If you plan to use it, you'll need to take into consideration the following limitations:
@@ -183,11 +184,12 @@ See the vite builder [TypeScript documentation](https://github.com/storybookjs/b
 | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `stories`             | The array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.ts`                                                                                    |
 | `staticDirs`          | Sets a list of directories of [static files](./images-and-assets.md#serving-static-files-via-storybook-configuration) to be loaded by Storybook <br/> `staticDirs:['../public']`                         |
-| `addons`              | Sets the list of [addons](https://storybook.js.org/addons/) loaded by Storybook <br/> `addons:['@storybook/addon-essentials']`                                                                           |
+| `addons`              | Sets the list of [addons](https://storybook.js.org/addons/) loaded by Storybook <br/> `addons: ['@storybook/addon-essentials']`                                                                          |
 | `typescript`          | Configures how Storybook handles [TypeScript files](./typescript.md) <br/> `typescript: { check: false, checkOptions: {} }`                                                                              |
-| `framework`           | Configures Storybook based on a set of framework-specific settings <br/> `framework:'@storybook/svelte'`                                                                                                 |
-| `core`                | Configures Storybook's internal features.<br/> `core: { builder: 'webpack5' }`                                                                                                                           |
-| `features`            | Enables Storybook's additional features.<br/> See table below for a list of available features `features: { storyStoreV7: true }`                                                                        |
+| `framework`           | Configures Storybook based on a set of [framework-specific](./frameworks.md) settings <br/> `framework: { name: '@storybook/svelte-vite', options:{} }`                                                  |
+| `core`                | Configures Storybook's internal features.<br/> `core: { disableTelemetry: true, }`                                                                                                                       |
+| `docs`                | Configures Storybook's [auto-generated documentation](../writing-docs/docs-page.md)<br/> `docs: { autodocs: 'tag' }`                                                                                     |
+| `features`            | Enables Storybook's additional features<br/> See table below for a list of available features `features: { storyStoreV7: true }`                                                                         |
 | `refs`                | Configures [Storybook composition](../sharing/storybook-composition.md) <br/> `refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }`                                              |
 | `logLevel`            | Configures Storybook's logs in the browser terminal. Useful for debugging <br/> `logLevel: 'debug'`                                                                                                      |
 | `webpackFinal`        | Customize Storybook's [Webpack](../builders/webpack.md) setup <br/> `webpackFinal: async (config:any) => { return config; }`                                                                             |