Merge pull request #19715 from storybookjs/tom/sb-897-update-cli-temp…

…late-to-set-autodocspage

CLI: Add docsPage to all Button/Header story templates

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

@@ -5,6 +5,8 @@ import Button from './button.component';
 const meta: Meta<Button> = {
   title: 'Example/Button',
   component: Button,
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/angular/writing-docs/docs-page
+  tags: ['docsPage'],
   // More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args
   render: (args: Button) => ({
     props: {

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

@@ -8,6 +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/angular/writing-docs/docs-page
+  tags: ['docsPage'],
   render: (args) => ({ props: args }),
   decorators: [
     moduleMetadata({

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

@@ -6,6 +6,8 @@ import { Button } from './Button';
 export default {
   title: 'Example/Button',
   component: Button,
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/react/writing-docs/docs-page
+  tags: ['docsPage'],
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },

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

@@ -5,6 +5,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/react/writing-docs/docs-page
+  tags: ['docsPage'],
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
     layout: 'fullscreen',

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

@@ -6,6 +6,8 @@ import { Button } from './Button';
 const meta: Meta<typeof Button> = {
   title: 'Example/Button',
   component: Button,
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/react/writing-docs/docs-page
+  tags: ['docsPage'],
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
     backgroundColor: {

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

@@ -4,6 +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/react/writing-docs/docs-page
+  tags: ['docsPage'],
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
     layout: 'fullscreen',

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

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

code/renderers/html/template/cli/js/Button.stories.js

@@ -3,6 +3,8 @@ import { createButton } from './Button';
 // More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
 export default {
   title: 'Example/Button',
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/html/writing-docs/docs-page
+  tags: ['docsPage'],
   // More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args
   render: ({ label, ...args }) => {
     // You can either use a function to create DOM elements or use a plain html string!

code/renderers/html/template/cli/js/Header.stories.js

@@ -2,6 +2,8 @@ import { createHeader } from './Header';
 
 export default {
   title: 'Example/Header',
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/html/writing-docs/docs-page
+  tags: ['docsPage'],
   render: (args) => createHeader(args),
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/html/configure/story-layout

code/renderers/html/template/cli/ts/Button.stories.ts

@@ -5,6 +5,8 @@ import { createButton } from './Button';
 // More on how to set up stories at: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
 const meta: Meta<ButtonProps> = {
   title: 'Example/Button',
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/html/writing-docs/docs-page
+  tags: ['docsPage'],
   render: (args) => {
     // You can either use a function to create DOM elements or use a plain html string!
     // return `<div>${label}</div>`;

code/renderers/html/template/cli/ts/Header.stories.ts

@@ -4,6 +4,8 @@ import { createHeader } from './Header';
 
 const meta: Meta<HeaderProps> = {
   title: 'Example/Header',
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/html/writing-docs/docs-page
+  tags: ['docsPage'],
   render: (args) => createHeader(args),
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/html/configure/story-layout

code/renderers/preact/template/cli/Button.stories.jsx

@@ -4,6 +4,8 @@ import { Button } from './Button';
 export default {
   title: 'Example/Button',
   component: Button,
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/preact/writing-docs/docs-page
+  tags: ['docsPage'],
   // More on argTypes: https://storybook.js.org/docs/preact/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },

code/renderers/preact/template/cli/Header.stories.jsx

@@ -3,6 +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/preact/writing-docs/docs-page
+  tags: ['docsPage'],
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/preact/configure/story-layout
     layout: 'fullscreen',

code/renderers/react/template/cli/js/Button.stories.js

@@ -4,6 +4,8 @@ import { Button } from './Button';
 export default {
   title: 'Example/Button',
   component: Button,
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/react/writing-docs/docs-page
+  tags: ['docsPage'],
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },

code/renderers/react/template/cli/js/Header.stories.js

@@ -3,6 +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/react/writing-docs/docs-page
+  tags: ['docsPage'],
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
     layout: 'fullscreen',

code/renderers/react/template/cli/ts/Button.stories.ts

@@ -6,6 +6,8 @@ import { Button } from './Button';
 const meta: Meta<typeof Button> = {
   title: 'Example/Button',
   component: Button,
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/react/writing-docs/docs-page
+  tags: ['docsPage'],
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },

code/renderers/react/template/cli/ts/Header.stories.ts

@@ -4,6 +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/react/writing-docs/docs-page
+  tags: ['docsPage'],
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
     layout: 'fullscreen',

code/renderers/svelte/template/cli/Button.stories.js

@@ -5,6 +5,8 @@ import Button from './Button.svelte';
 export default {
   title: 'Example/Button',
   component: Button,
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/svelte/writing-docs/docs-page
+  tags: ['docsPage'],
   // More on component templates: https://storybook.js.org/docs/svelte/writing-stories/introduction#using-args
   render: (args) => ({
     Component: Button,

code/renderers/svelte/template/cli/Header.stories.js

@@ -3,6 +3,8 @@ import Header from './Header.svelte';
 export default {
   title: 'Example/Header',
   component: Header,
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/svelte/writing-docs/docs-page
+  tags: ['docsPage'],
   render: (args) => ({
     Component: Header,
     props: args,

code/renderers/vue/template/cli/Button.stories.js

@@ -4,6 +4,8 @@ import MyButton from './Button.vue';
 export default {
   title: 'Example/Button',
   component: MyButton,
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/docs-page
+  tags: ['docsPage'],
   // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
   render: (args, { argTypes }) => ({
     props: Object.keys(argTypes),

code/renderers/vue/template/cli/Header.stories.js

@@ -3,6 +3,8 @@ import MyHeader from './Header.vue';
 export default {
   title: 'Example/Header',
   component: MyHeader,
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/docs-page
+  tags: ['docsPage'],
   render: (args, { argTypes }) => ({
     props: Object.keys(argTypes),
     components: {

code/renderers/vue3/template/cli/Button.stories.js

@@ -4,6 +4,8 @@ import MyButton from './Button.vue';
 export default {
   title: 'Example/Button',
   component: MyButton,
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/docs-page
+  tags: ['docsPage'],
   // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
   render: (args) => ({
     // Components used in your story `template` are defined in the `components` object

code/renderers/vue3/template/cli/Header.stories.js

@@ -3,6 +3,8 @@ import MyHeader from './Header.vue';
 export default {
   title: 'Example/Header',
   component: MyHeader,
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/docs-page
+  tags: ['docsPage'],
   render: (args) => ({
     // Components used in your story `template` are defined in the `components` object
     components: {

code/renderers/web-components/template/cli/js/Button.stories.js

@@ -3,6 +3,8 @@ import { Button } from './Button';
 // More on default export: https://storybook.js.org/docs/web-components/writing-stories/introduction#default-export
 export default {
   title: 'Example/Button',
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/web-components/vue/writing-docs/docs-page
+  tags: ['docsPage'],
   // More on component templates: https://storybook.js.org/docs/web-components/writing-stories/introduction#using-args
   render: (args) => Button(args),
   // More on argTypes: https://storybook.js.org/docs/web-components/api/argtypes

code/renderers/web-components/template/cli/js/Header.stories.js

@@ -2,6 +2,8 @@ import { Header } from './Header';
 
 export default {
   title: 'Example/Header',
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/web-components/vue/writing-docs/docs-page
+  tags: ['docsPage'],
   render: (args) => Header(args),
 };
 

code/renderers/web-components/template/cli/ts/Button.stories.ts

@@ -5,6 +5,8 @@ import { Button } from './Button';
 // More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction#default-export
 const meta: Meta<ButtonProps> = {
   title: 'Example/Button',
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/web-components/writing-docs/docs-page
+  tags: ['docsPage'],
   render: (args) => Button(args),
   // More on argTypes: https://storybook.js.org/docs/web-components/api/argtypes
   argTypes: {

code/renderers/web-components/template/cli/ts/Header.stories.ts

@@ -4,6 +4,8 @@ import { Header } from './Header';
 
 const meta: Meta<HeaderProps> = {
   title: 'Example/Header',
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/web-components/writing-docs/docs-page
+  tags: ['docsPage'],
   render: (args) => Header(args),
 };