Rename docsPage to autodocs

And change semantics: `docsPage:true` = `autodocs: 'tag'` and `docsPage: 'automatic'` = `autodocs: true`.

MIGRATION.md

@@ -40,7 +40,7 @@
   - [Docs Changes](#docs-changes)
     - [Standalone docs files](#standalone-docs-files)
     - [Referencing stories in docs files](#referencing-stories-in-docs-files)
-    - [Docs Page](#docs-page)
+    - [Autodocs](#autodocs)
     - [Configuring the Docs Container](#configuring-the-docs-container)
     - [External Docs](#external-docs)
     - [MDX2 upgrade](#mdx2-upgrade)
@@ -754,32 +754,32 @@ import * as SecondComponentStories from './second-component.stories';
 <Story of={SecondComponentStories.standard} meta={SecondComponentStories} />
 ```
 
-#### Docs Page
+#### Autodocs
 
-In 7.0, rather than rendering each story in "docs view mode", 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`.
+In 7.0, rather than rendering each story in "docs view mode", Autodocs (ex. "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 Docs Page in `main.js`:
+You can configure Autodocs in `main.js`:
 
 ```js
 module.exports = {
   docs: {
-    docsPage: 'automatic', // see below for alternatives
+    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.docsPage` option will have been set to `'automatic'`, which has the effect of enabling docs page for _every_ CSF file. However, as of 7.0, the new default is `true`, which requires opting into DocsPage per-CSF file, with the `docsPage` **tag** on your component export:
+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: ['docsPage']
+  tags: ['autodocs']
 }
 ```
 
-You can also set `docsPage: false` to opt-out of docs page entirely.
+You can also set `autodocs: false` to opt-out of Autodocs entirely.
 
 You can change the default template in the same way as in 6.x, using the `docs.page` parameter.
 

code/addons/docs/src/preset.ts

@@ -152,7 +152,7 @@ const docs = (docsOptions: DocsOptions) => {
     ...docsOptions,
     disable: true,
     defaultName: 'Docs',
-    docsPage: true,
+    autodocs: 'tag',
   };
 };
 

code/addons/docs/template/stories/docspage/autoplay.stories.ts

@@ -4,7 +4,7 @@ import { within } from '@storybook/testing-library';
 
 export default {
   component: globalThis.Components.Pre,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   args: { text: 'Play has not run' },
   parameters: { chromatic: { disable: true } },
 };

code/addons/docs/template/stories/docspage/basic.stories.ts

@@ -2,7 +2,7 @@ import { global as globalThis } from '@storybook/global';
 
 export default {
   component: globalThis.Components.Button,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   args: { label: 'Click Me!' },
   parameters: { chromatic: { disable: true } },
 };

code/addons/docs/template/stories/docspage/description.stories.ts

@@ -6,7 +6,7 @@ export default {
   subcomponents: {
     Pre: globalThis.Components.Pre,
   },
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   args: { label: 'Click Me!' },
   parameters: {
     docs: {

code/addons/docs/template/stories/docspage/extract-description.stories.ts

@@ -2,7 +2,7 @@ import { global as globalThis } from '@storybook/global';
 
 export default {
   component: globalThis.Components.Button,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   args: { label: 'Click Me!' },
   parameters: {
     docs: {

code/addons/docs/template/stories/docspage/iframe.stories.ts

@@ -2,7 +2,7 @@ import { global as globalThis } from '@storybook/global';
 
 export default {
   component: globalThis.Components.Button,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   args: { label: 'Rendered in iframe' },
   parameters: {
     chromatic: { disable: true },

code/addons/docs/template/stories/docspage/overflow.stories.ts

@@ -2,7 +2,7 @@ import { global as globalThis } from '@storybook/global';
 
 export default {
   component: globalThis.Components.Pre,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   args: {
     text: 'Demonstrates overflow',
     style: { width: 2000, height: 500, background: 'hotpink' },

code/addons/docs/template/stories/docspage/override.stories.ts

@@ -15,7 +15,7 @@ const Override = () => 'overridden';
 
 export default {
   component: globalThis.Components.Button,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   args: { label: 'Click Me!' },
   parameters: {
     chromatic: { disable: true },

code/addons/docs/template/stories/docspage/source.stories.ts

@@ -2,7 +2,7 @@ import { global as globalThis } from '@storybook/global';
 
 export default {
   component: globalThis.Components.Button,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   args: { label: 'Click Me!' },
   parameters: { chromatic: { disable: true } },
 };

code/frameworks/angular/template/cli/Button.stories.ts

@@ -5,7 +5,7 @@ import Button from './button.component';
 const meta: Meta<Button> = {
   title: 'Example/Button',
   component: Button,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   render: (args: Button) => ({
     props: {
       backgroundColor: null,

code/frameworks/angular/template/cli/Header.stories.ts

@@ -8,8 +8,8 @@ import Header from './header.component';
 const meta: Meta<Header> = {
   title: 'Example/Header',
   component: Header,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/angular/writing-docs/docs-page
-  tags: ['docsPage'],
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/angular/writing-docs/docs-page
+  tags: ['autodocs'],
   render: (args) => ({ props: args }),
   decorators: [
     moduleMetadata({

code/frameworks/nextjs/template/cli/js/Button.stories.js

@@ -4,7 +4,7 @@ import { Button } from './Button';
 export default {
   title: 'Example/Button',
   component: Button,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   argTypes: {
     backgroundColor: {
       control: 'color',

code/frameworks/nextjs/template/cli/js/Header.stories.js

@@ -3,8 +3,8 @@ import { Header } from './Header';
 export default {
   title: 'Example/Header',
   component: Header,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
-  tags: ['docsPage'],
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
+  tags: ['autodocs'],
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
     layout: 'fullscreen',

code/frameworks/nextjs/template/cli/ts-legacy/Button.stories.ts

@@ -6,7 +6,7 @@ import { Button } from './Button';
 const meta: Meta<typeof Button> = {
   title: 'Example/Button',
   component: Button,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   argTypes: {
     backgroundColor: {
       control: 'color',

code/frameworks/nextjs/template/cli/ts-legacy/Header.stories.ts

@@ -4,8 +4,8 @@ import { Header } from './Header';
 const meta: Meta<typeof Header> = {
   title: 'Example/Header',
   component: Header,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
-  tags: ['docsPage'],
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
+  tags: ['autodocs'],
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
     layout: 'fullscreen',

code/lib/cli/src/automigrate/fixes/docsPage-automatic.ts → code/lib/cli/src/automigrate/fixes/autodocs-true.ts

@@ -9,15 +9,15 @@ import type { Fix } from '../types';
 
 const logger = console;
 
-interface DocsPageAutomaticFrameworkRunOptions {
+interface AutodocsTrueFrameworkRunOptions {
   main: ConfigFile;
 }
 
 /**
- * Set the docs.docsPage option to automatic if it isn't already set
+ * Set the docs.autodocs option to true if it isn't already set
  */
-export const docsPageAutomatic: Fix<DocsPageAutomaticFrameworkRunOptions> = {
-  id: 'docsPageAutomatic',
+export const autodocsTrue: Fix<AutodocsTrueFrameworkRunOptions> = {
+  id: 'autodocsTrue',
 
   async check({ packageManager }) {
     const packageJson = packageManager.retrievePackageJson();
@@ -32,29 +32,29 @@ export const docsPageAutomatic: Fix<DocsPageAutomaticFrameworkRunOptions> = {
     const main = await readConfig(mainConfig);
     const docs = main.getFieldValue(['docs']);
 
-    return docs?.docsPage === undefined ? { main } : null;
+    return docs?.autodocs === undefined ? { main } : null;
   },
 
   prompt() {
-    const docsPageAutomaticFormatted = chalk.cyan(`docs: { docsPage: 'automatic' }`);
+    const AutodocsTrueFormatted = chalk.cyan(`docs: { autodocs: true }`);
 
     return dedent`
-      We've detected that your main.js configuration file has not configured docsPage. In 6.x we
-      we defaulted to having a docsPage for every story, in 7.x you need to opt in per-component.
-      However, we can set the \`docs.docsPage\` to 'automatic' to approximate the old behaviour:
+      We've detected that your main.js configuration file has not configured autodocs. In 6.x we
+      we defaulted to having a autodocs for every story, in 7.x you need to opt in per-component.
+      However, we can set the \`docs.autodocs\` to true to approximate the old behaviour:
 
-      ${docsPageAutomaticFormatted}
+      ${AutodocsTrueFormatted}
 
       More info: ${chalk.yellow(
-        'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#docs-page'
+        'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs'
       )}
     `;
   },
 
   async run({ result: { main }, dryRun }) {
-    logger.info(`✅ Setting 'docs.docsPage' to 'automatic' in main.js`);
+    logger.info(`✅ Setting 'docs.autodocs' to true in main.js`);
     if (!dryRun) {
-      main.setFieldValue(['docs', 'docsPage'], 'automatic');
+      main.setFieldValue(['docs', 'autodocs'], true);
       await writeConfig(main);
     }
   },

code/lib/cli/src/automigrate/fixes/index.ts

@@ -13,7 +13,7 @@ import { nextjsFramework } from './nextjs-framework';
 import { newFrameworks } from './new-frameworks';
 import { removedGlobalClientAPIs } from './remove-global-client-apis';
 import { mdx1to2 } from './mdx-1-to-2';
-import { docsPageAutomatic } from './docsPage-automatic';
+import { autodocsTrue } from './autodocs-true';
 import { sveltekitFramework } from './sveltekit-framework';
 import { addReact } from './add-react';
 import { nodeJsRequirement } from './nodejs-requirement';
@@ -36,6 +36,6 @@ export const fixes: Fix[] = [
   nextjsFramework,
   removedGlobalClientAPIs,
   mdx1to2,
-  docsPageAutomatic,
+  autodocsTrue,
   addReact,
 ];

code/lib/cli/src/generators/baseGenerator.ts

@@ -198,7 +198,7 @@ export async function baseGenerator(
 
   await configureMain({
     framework: { name: frameworkInclude, options: options.framework || {} },
-    docs: { docsPage: true },
+    docs: { autodocs: 'tag' },
     addons: pnp ? addons.map(wrapForPnp) : addons,
     extensions,
     commonJs,