Addon-docs: Refactor MDX examples to sandboxes

code/examples/react-ts/src/docs2/MetaOf.mdx → code/addons/docs/template/stories/docs2/MetaOf.mdx

@@ -1,5 +1,5 @@
 import { Meta, Story, Stories } from '@storybook/addon-docs';
-import * as ButtonStories from '../button.stories';
+import * as ButtonStories from './button.stories.ts';
 
 <Meta of={ButtonStories} />
 

code/examples/react-ts/src/docs2/Title.mdx → code/addons/docs/template/stories/docs2/Title.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Docs2/Yabbadabbadooo" />
+<Meta title="addons/docs/docs2/Yabbadabbadooo" />
 
 # Docs with title
 

code/addons/docs/template/stories/docs2/button.stories.ts

@@ -0,0 +1,21 @@
+import globalThis from 'global';
+
+export default {
+  component: globalThis.Components.Button,
+  args: { onClick: () => console.log('clicked!') },
+  parameters: {
+    chromatic: { disable: true },
+  },
+};
+
+export const Basic = {
+  args: { children: 'Basic' },
+};
+
+export const One = {
+  args: { children: 'One' },
+};
+
+export const Two = {
+  args: { children: 'Two' },
+};

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

@@ -0,0 +1,12 @@
+import globalThis from 'global';
+
+export default {
+  component: globalThis.Components.Button,
+  args: { children: 'Rendered in iframe' },
+  parameters: {
+    chromatic: { disable: true },
+    docs: { iframeHeight: 120, inlineStories: true },
+  },
+};
+
+export const Basic = {};

code/addons/docs/template/stories/stories-mdx/basic.stories.mdx

@@ -0,0 +1,28 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import globalThis from 'global';
+
+<Meta title="addons/docs/stories-mdx/basic" component={globalThis.Components.Button} />
+
+# MDX Stories
+
+This file demonstrates defining stories inside MDX.
+
+<Canvas>
+  <Story
+    name="Primary"
+    args={{
+      children: 'Primary',
+    }}
+  />
+</Canvas>
+
+<ArgsTable story="^" />
+
+<Canvas>
+  <Story
+    name="Secondary"
+    args={{
+      children: 'Secondary',
+    }}
+  />
+</Canvas>

code/examples/official-storybook/stories/addon-docs/colorpalette.stories.mdx → code/addons/docs/template/stories/stories-mdx/colorpalette.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
 
-<Meta title="Addons/Docs/ColorPalette" />
+<Meta title="addons/docs/stories-mdx/colorpalette" />
 
 <ColorPalette>
   <ColorItem

code/addons/docs/template/stories/stories-mdx/csf-in-mdx.stories.js

@@ -0,0 +1,20 @@
+/* eslint-disable storybook/default-exports */
+// NOTE: commented out default since these stories are re-exported
+// in the primary file './csf-docs-with-mdx-docs.stories.mdx'
+//
+// export default {
+//   title: 'Addons/Docs/csf-with-mdx-docs',
+//   component: Button,
+// };
+
+export const Primary = {
+  args: { children: 'Primary' },
+};
+
+export const Secondary = {
+  args: { children: 'Secondary' },
+};
+
+export const ImplicitName = {
+  args: { children: 'Implicit Name' },
+};

code/addons/docs/template/stories/stories-mdx/csf-in-mdx.stories.mdx

@@ -0,0 +1,29 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import globalThis from 'global';
+import * as Csf from './csf-in-mdx.stories.js';
+
+<Meta title="addons/docs/stories-mdx/csf-in-mdx" component={globalThis.Components.Button} />
+
+# Legacy CSF in MDX Stories
+
+This file demonstrates legacy reuse of CSF stories inside MDX. This mechanism has been
+overhauled and improved in 7.0, and the legacy mode is now deprecated and will be
+removed in 8.0.
+
+<Canvas>
+  <Story name="Primary" story={Csf.Primary} />
+</Canvas>
+
+<ArgsTable story="^" />
+
+<Canvas>
+  <Story name="Secondary" story={Csf.Secondary} />
+</Canvas>
+
+## Duplicate stories
+
+Reference story by ID to show it multiple times in a page.
+
+<Canvas>
+  <Story id="addons-docs-stories-mdx-csf-in-mdx--primary" />
+</Canvas>

code/examples/angular-cli/src/stories/addons/docs/markdown.stories.mdx → code/addons/docs/template/stories/stories-mdx/markdown.stories.mdx

@@ -1,6 +1,10 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Addons/Docs/markdown-docs" />
+<Meta title="addons/docs/stories-mdx/markdown" />
+
+# Markdown
+
+This is a basic **docs-only MDX** that demonstrates a whole mess of Mardown formatting.
 
 # h1 Heading
 
@@ -135,6 +139,8 @@ Right aligned columns
 
 [link to in page anchor](#h1-heading)
 
+[link to another story (docs, without prefix)](/docs/addons-docs-docs-only--page)
+
 [link to another story (docs)](?path=/docs/addons-docs-docs-only--page)
 
 [link to another story (canvas)](?path=/story/addons-docs-buttongroup--basic)

code/addons/docs/template/stories/stories-mdx/play-functions.stories.mdx

@@ -0,0 +1,32 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import globalThis from 'global';
+
+<Meta
+  title="addons/docs/stories-mdx/play functions"
+  component={globalThis.Components.Button}
+  // FIXME: this is currently broken in the MDX compiler
+  play={() => console.log('component play')}
+/>
+
+# MDX Play function Stories
+
+This file demonstrates defining stories inside MDX.
+
+<Canvas>
+  <Story
+    name="Component Play"
+    args={{
+      children: 'Component Play',
+    }}
+  />
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Story Play"
+    args={{
+      children: 'Story Play',
+    }}
+    play={() => console.log('story play')}
+  />
+</Canvas>