Addon-controls: Add examples to angular, ember, html, svelte, vue, web-components

addons/controls/README.md

@@ -279,17 +279,22 @@ export const VeryLongLabel = (args) => <Button {...args} />;
 VeryLongLabel.args = { label: 'this is a very long string', background: '#ff0' };
 ```
 
-This works, but it repeats code. What we want is to reuse the `Basic` story, but with a different initial state. In Storybook we do this idiomatically for Args stories:
+This works, but it repeats code. What we want is to reuse the `Basic` story, but with a different initial state. In Storybook we do this idiomatically for Args stories by refactoring the first story into a reusable story function and then `.bind`ing it to create a duplicate object on which to hang `args`:
 
 ```jsx
-export const VeryLongLabel = Basic.bind({});
+const ButtonStory = (args) => <Button {...args} />;
+
+export const Basic = ButtonStory.bind({});
+Basic.args = { label: 'hello', background: '#ff0' };
+
+export const VeryLongLabel = ButtonStory.bind({});
 VeryLongLabel.args = { label: 'this is a very long string', background: '#ff0' };
 ```
 
 We can even reuse initial args from other stories:
 
 ```jsx
-export const VeryLongLabel = Basic.bind();
+export const VeryLongLabel = ButtonStory.bind({});
 VeryLongLabel.args = { ...Basic.args, label: 'this is a very long string' };
 ```
 

addons/docs/src/mdx/__testfixtures__/story-args.mdx

@@ -5,6 +5,12 @@ import { Story, Meta } from '@storybook/addon-docs/blocks';
 
 # Args
 
-<Story name="component notes" args={{ a: 1, b: 2 }} argTypes={{ a: { name: 'A' }, b: { name: 'B' } }}>
-  <Button>Component notes</Button>
+export const ButtonStory = (args) => <Button>Component notes</Button>;
+
+<Story
+  name="component notes"
+  args={{ a: 1, b: 2 }}
+  argTypes={{ a: { name: 'A' }, b: { name: 'B' } }}
+>
+  {ButtonStory.bind({})}
 </Story>

addons/docs/src/mdx/__testfixtures__/story-args.output.snapshot

@@ -6,7 +6,7 @@ import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
 
 import { Button } from '@storybook/react/demo';
 import { Story, Meta } from '@storybook/addon-docs/blocks';
-
+export const ButtonStory = (args) => <Button mdxType=\\"Button\\">Component notes</Button>;
 const makeShortcode = (name) =>
   function MDXDefaultShortcode(props) {
     console.warn(
@@ -17,13 +17,16 @@ const makeShortcode = (name) =>
     return <div {...props} />;
   };
 
-const layoutProps = {};
+const layoutProps = {
+  ButtonStory,
+};
 const MDXLayout = 'wrapper';
 function MDXContent({ components, ...props }) {
   return (
     <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
       <Meta title=\\"Button\\" mdxType=\\"Meta\\" />
       <h1>{\`Args\`}</h1>
+
       <Story
         name=\\"component notes\\"
         args={{
@@ -40,15 +43,15 @@ function MDXContent({ components, ...props }) {
         }}
         mdxType=\\"Story\\"
       >
-        <Button mdxType=\\"Button\\">Component notes</Button>
+        {ButtonStory.bind({})}
       </Story>
     </MDXLayout>
   );
 }
 
 MDXContent.isMDXComponent = true;
 
-export const componentNotes = () => <Button>Component notes</Button>;
+export const componentNotes = ButtonStory.bind({});
 componentNotes.storyName = 'component notes';
 componentNotes.argTypes = {
   a: {
@@ -62,7 +65,7 @@ componentNotes.args = {
   a: 1,
   b: 2,
 };
-componentNotes.parameters = { storySource: { source: '<Button>Component notes</Button>' } };
+componentNotes.parameters = { storySource: { source: 'ButtonStory.bind({})' } };
 
 const componentMeta = { title: 'Button', includeStories: ['componentNotes'] };
 

addons/docs/src/mdx/mdx-compiler-plugin.js

@@ -84,20 +84,25 @@ function genStoryExport(ast, context) {
     const storyReactCode = bodyParts.length > 1 ? `<>\n${storyCode}\n</>` : storyCode;
     // keep track if an indentifier or function call
     // avoid breaking change for 5.3
-    switch (bodyParts.length === 1 && bodyParts[0].body.type) {
-      // We don't know what type the identifier is, but this code
-      // assumes it's a function from CSF. Let's see who complains!
-      case 'Identifier':
-        storyVal = `assertIsFn(${storyCode})`;
-        break;
-      case 'ArrowFunctionExpression':
-        storyVal = `(${storyCode})`;
-        break;
-      default:
-        storyVal = `() => (
+    const BIND_REGEX = /\.bind\(.*\)/;
+    if (bodyParts.length === 1 && BIND_REGEX.test(bodyParts[0].code)) {
+      storyVal = bodyParts[0].code;
+    } else {
+      switch (bodyParts.length === 1 && bodyParts[0].body.type) {
+        // We don't know what type the identifier is, but this code
+        // assumes it's a function from CSF. Let's see who complains!
+        case 'Identifier':
+          storyVal = `assertIsFn(${storyCode})`;
+          break;
+        case 'ArrowFunctionExpression':
+          storyVal = `(${storyCode})`;
+          break;
+        default:
+          storyVal = `() => (
           ${storyReactCode}
         )`;
-        break;
+          break;
+      }
     }
   }
 

examples/angular-cli/src/stories/addon-controls.stories.ts

@@ -0,0 +1,18 @@
+import { ButtonComponent } from './doc-button/doc-button.component';
+
+export default {
+  title: 'Addon/Controls',
+  component: ButtonComponent,
+  parameters: { docs: { iframeHeight: 120 } },
+};
+
+const ButtonStory = (args) => ({
+  component: ButtonComponent,
+  props: args,
+});
+
+export const Basic = ButtonStory.bind({});
+Basic.args = { label: 'Args test', isDisabled: false };
+
+export const Disabled = ButtonStory.bind({});
+Disabled.args = { label: 'Disabled', isDisabled: true };

examples/ember-cli/.storybook/main.js

@@ -8,6 +8,7 @@ module.exports = {
     '@storybook/addon-storysource',
     '@storybook/addon-actions',
     '@storybook/addon-docs',
+    '@storybook/addon-controls',
     '@storybook/addon-links',
     '@storybook/addon-knobs',
     '@storybook/addon-viewport',

examples/ember-cli/package.json

@@ -19,6 +19,7 @@
     "@storybook/addon-a11y": "6.0.0-beta.29",
     "@storybook/addon-actions": "6.0.0-beta.29",
     "@storybook/addon-backgrounds": "6.0.0-beta.29",
+    "@storybook/addon-controls": "6.0.0-beta.29",
     "@storybook/addon-docs": "6.0.0-beta.29",
     "@storybook/addon-knobs": "6.0.0-beta.29",
     "@storybook/addon-links": "6.0.0-beta.29",

examples/ember-cli/stories/addon-a11y.stories.js

@@ -2,7 +2,6 @@ import { hbs } from 'ember-cli-htmlbars';
 
 export default {
   title: 'Addon/a11y',
-
   parameters: {
     options: { selectedPanel: '@storybook/a11y/panel' },
   },

examples/ember-cli/stories/addon-actions.stories.js

@@ -3,7 +3,6 @@ import { action } from '@storybook/addon-actions';
 
 export default {
   title: 'Addon/Actions',
-
   parameters: {
     options: {
       selectedPanel: 'storybook/actions/panel',

examples/ember-cli/stories/addon-backgrounds.stories.js

@@ -2,7 +2,6 @@ import { hbs } from 'ember-cli-htmlbars';
 
 export default {
   title: 'Addon/Backgrounds',
-
   parameters: {
     backgrounds: {
       default: 'dark',

examples/ember-cli/stories/addon-controls.stories.js

@@ -0,0 +1,19 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export default {
+  title: 'Addon/Controls',
+  argTypes: {
+    label: { type: { name: 'string' } },
+  },
+};
+
+const ButtonStory = (args) => ({
+  template: hbs`<button>{{label}}</button>`,
+  context: args,
+});
+
+export const Hello = ButtonStory.bind({});
+Hello.args = { label: 'Hello!' };
+
+export const Bonjour = ButtonStory.bind({});
+Bonjour.args = { label: 'Bonjour!' };

examples/ember-cli/stories/addon-knobs.stories.js

@@ -5,7 +5,6 @@ import { action } from '@storybook/addon-actions';
 export default {
   title: 'Addon/Knobs',
   decorators: [withKnobs],
-
   parameters: {
     options: { selectedPanel: 'storybookjs/knobs/panel' },
   },

examples/ember-cli/stories/index.stories.js

@@ -2,7 +2,6 @@ import { hbs } from 'ember-cli-htmlbars';
 
 export default {
   title: 'Welcome',
-
   parameters: {
     options: { showPanel: false },
   },

examples/html-kitchen-sink/.storybook/main.js

@@ -7,6 +7,7 @@ module.exports = {
     '@storybook/addon-a11y',
     '@storybook/addon-actions',
     '@storybook/addon-backgrounds',
+    '@storybook/addon-controls',
     '@storybook/addon-events',
     '@storybook/addon-jest',
     '@storybook/addon-knobs',

examples/html-kitchen-sink/package.json

@@ -16,6 +16,7 @@
     "@storybook/addon-a11y": "6.0.0-beta.29",
     "@storybook/addon-actions": "6.0.0-beta.29",
     "@storybook/addon-backgrounds": "6.0.0-beta.29",
+    "@storybook/addon-controls": "6.0.0-beta.29",
     "@storybook/addon-docs": "6.0.0-beta.29",
     "@storybook/addon-events": "6.0.0-beta.29",
     "@storybook/addon-jest": "6.0.0-beta.29",

examples/html-kitchen-sink/stories/addon-controls.stories.js

@@ -0,0 +1,16 @@
+export default {
+  title: 'Addons/Controls',
+  argTypes: {
+    label: { type: { name: 'string' } },
+  },
+};
+
+const ButtonStory = ({ label }) => {
+  return `<div>${label}</div>`;
+};
+
+export const Hello = ButtonStory.bind({});
+Hello.args = { label: 'Hello!' };
+
+export const Bonjour = ButtonStory.bind({});
+Bonjour.args = { label: 'Bonjour!' };

examples/official-storybook/stories/addon-docs/props.stories.mdx

@@ -11,7 +11,7 @@ import { MemoButton } from '../../components/MemoButton';
   parameters={{ controls: { expanded: false } }}
 />
 
-export const ArgsDisplay = (args = {}) => (
+export const ArgsStory = (args = {}) => (
   <table>
     <tbody>
       {Object.entries(args).map(([key, val]) => (
@@ -68,7 +68,7 @@ export const ArgsDisplay = (args = {}) => (
       },
     }}
   >
-    {(args) => <ArgsDisplay {...args} />}
+    {ArgsStory.bind({})}
   </Story>
 </Preview>
 
@@ -88,7 +88,7 @@ export const ArgsDisplay = (args = {}) => (
       bar: '',
     }}
   >
-    {(args) => <ArgsDisplay {...args} />}
+    {ArgsStory.bind({})}
   </Story>
 </Preview>
 

examples/svelte-kitchen-sink/.storybook/main.js

@@ -12,6 +12,7 @@ module.exports = {
         configureJSX: true,
       },
     },
+    '@storybook/addon-controls',
     '@storybook/addon-links',
     '@storybook/addon-knobs',
     '@storybook/addon-backgrounds',

examples/svelte-kitchen-sink/package.json

@@ -13,6 +13,7 @@
     "@storybook/addon-a11y": "6.0.0-beta.29",
     "@storybook/addon-actions": "6.0.0-beta.29",
     "@storybook/addon-backgrounds": "6.0.0-beta.29",
+    "@storybook/addon-controls": "6.0.0-beta.29",
     "@storybook/addon-docs": "6.0.0-beta.29",
     "@storybook/addon-knobs": "6.0.0-beta.29",
     "@storybook/addon-links": "6.0.0-beta.29",

examples/svelte-kitchen-sink/src/stories/addon-controls.stories.js

@@ -0,0 +1,26 @@
+import ButtonView from './views/ButtonView.svelte';
+
+export default {
+  title: 'Addon/Controls',
+  argTypes: {
+    rounded: { type: { name: 'boolean' } },
+    message: { type: { name: 'string' } },
+  },
+};
+
+const ButtonStory = (args) => ({
+  Component: ButtonView,
+  props: args,
+});
+
+export const Rounded = ButtonStory.bind({});
+Rounded.args = {
+  rounded: true,
+  message: 'Rounded text',
+};
+
+export const Square = ButtonStory.bind({});
+Square.args = {
+  rounded: false,
+  message: 'Squared text',
+};

examples/vue-kitchen-sink/src/stories/addon-controls.stories.js

@@ -0,0 +1,29 @@
+import MyButton from './Button.vue';
+
+export default {
+  title: 'Addon/Controls',
+  component: MyButton,
+  argTypes: {
+    color: { control: { type: 'color' } },
+  },
+};
+
+const ButtonStory = (args) => ({
+  props: Object.keys(args),
+  components: { MyButton },
+  template: '<my-button :color="color" :rounded="rounded">{{label}}</my-button>',
+});
+
+export const Rounded = ButtonStory.bind({});
+Rounded.args = {
+  rounded: true,
+  color: '#f00',
+  label: 'A Button with rounded edges',
+};
+
+export const Square = ButtonStory.bind({});
+Square.args = {
+  rounded: false,
+  color: '#00f',
+  label: 'A Button with square edges',
+};