Addon-docs: Generic stories for DocsPage

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

@@ -0,0 +1,20 @@
+import globalThis from 'global';
+
+export default {
+  component: globalThis.Components.Button,
+  args: { children: 'Click Me!' },
+  parameters: { chromatic: { disable: true } },
+};
+
+export const Basic = {
+  args: { children: 'Basic' },
+};
+
+export const Disabled = {
+  args: { children: 'Disabled in DocsPage' },
+  parameters: { docs: { disable: true } },
+};
+
+export const Another = {
+  args: { children: 'Another' },
+};

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

@@ -0,0 +1,30 @@
+import globalThis from 'global';
+
+export default {
+  component: globalThis.Components.Button,
+  // FIXME: remove array subcomponents in 7.0?
+  subcomponents: {
+    Pre: globalThis.Components.Pre,
+  },
+  args: { children: 'Click Me!' },
+  parameters: {
+    docs: {
+      description: {
+        component: '**Component** description',
+      },
+    },
+    chromatic: { disable: true },
+  },
+};
+
+export const Basic = {};
+
+export const CustomDescription = {
+  parameters: {
+    docs: {
+      description: {
+        story: '**Story** description',
+      },
+    },
+  },
+};

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

@@ -0,0 +1,17 @@
+import globalThis from 'global';
+
+export default {
+  component: globalThis.Components.Button,
+  args: { children: 'Click Me!' },
+  parameters: {
+    docs: {
+      // FIXME: this is typically provided by the renderer preset to extract
+      //   the description automatically based on docgen info. including here
+      //   for documentation purposes only.
+      extractComponentDescription: () => 'component description',
+    },
+    chromatic: { disable: true },
+  },
+};
+
+export const Basic = {};

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

@@ -0,0 +1,12 @@
+import globalThis from 'global';
+
+export default {
+  component: globalThis.Components.Pre,
+  args: {
+    text: 'Demonstrates overflow',
+    style: { width: 2000, height: 500, background: 'hotpink' },
+  },
+  parameters: { chromatic: { disable: true } },
+};
+
+export const Basic = {};

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

@@ -0,0 +1,25 @@
+import globalThis from 'global';
+
+// FIXME: do this using basic React functions for multi-framework
+//        once sandbox linking is working
+//
+// import { createElement } from 'react';
+// import { Title, Primary } from '@storybook/addon-docs';
+//
+// const Override = () =>
+//   createElement('div', { style: { border: '10px solid green', padding: '100px' } }, [
+//     createElement(Title),
+//     createElement(Primary),
+//   ]);
+const Override = () => 'overridden';
+
+export default {
+  component: globalThis.Components.Button,
+  args: { children: 'Click Me!' },
+  parameters: {
+    chromatic: { disable: true },
+    docs: { page: Override },
+  },
+};
+
+export const Basic = {};

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

@@ -0,0 +1,43 @@
+import globalThis from 'global';
+
+export default {
+  component: globalThis.Components.Button,
+  args: { children: 'Click Me!' },
+  parameters: { chromatic: { disable: true } },
+};
+
+export const Auto = {};
+
+export const Disabled = {
+  parameters: {
+    docs: {
+      source: { code: null },
+    },
+  },
+};
+
+export const Code = {
+  parameters: {
+    docs: {
+      source: { type: 'code' },
+    },
+  },
+};
+
+export const Custom = {
+  parameters: {
+    docs: {
+      source: { code: 'custom source' },
+    },
+  },
+};
+
+export const Transform = {
+  parameters: {
+    docs: {
+      transformSource(src: string) {
+        return `// We transformed this!\nconst example = (\n${src}\n);`;
+      },
+    },
+  },
+};