Merge pull request #11285 from storybookjs/feat/add-controls-to-essentials

Essentials: Add addon-controls

addons/essentials/README.md

@@ -10,6 +10,7 @@ Storybook essentials includes the following addons. Addons can be disabled and r
 
 - [Actions](https://github.com/storybookjs/storybook/tree/next/addons/actions)
 - [Backgrounds](https://github.com/storybookjs/storybook/tree/next/addons/backgrounds)
+- [Controls](https://github.com/storybookjs/storybook/tree/next/addons/controls)
 - [Docs](https://github.com/storybookjs/storybook/tree/next/addons/docs)
 - [Viewport](https://github.com/storybookjs/storybook/tree/next/addons/viewport)
 
@@ -50,4 +51,4 @@ module.exports = {
 };
 ```
 
-Valid addon keys include: `actions`, `backgrounds`, `docs`, `viewport`.
+Valid addon keys include: `actions`, `backgrounds`, `controls`, `docs`, `viewport`.

addons/essentials/package.json

@@ -30,6 +30,7 @@
   "dependencies": {
     "@storybook/addon-actions": "6.0.0-beta.34",
     "@storybook/addon-backgrounds": "6.0.0-beta.34",
+    "@storybook/addon-controls": "6.0.0-beta.34",
     "@storybook/addon-docs": "6.0.0-beta.34",
     "@storybook/addon-viewport": "6.0.0-beta.34",
     "@storybook/addons": "6.0.0-beta.34",

addons/essentials/src/index.ts

@@ -33,7 +33,7 @@ export function addons(options: PresetOptions = {}) {
   };
 
   const main = requireMain(options.configDir);
-  return ['actions', 'docs', 'backgrounds', 'viewport']
+  return ['actions', 'docs', 'controls', 'backgrounds', 'viewport']
     .filter((key) => (options as any)[key] !== false)
     .map((key) => `@storybook/addon-${key}`)
     .filter((addon) => !checkInstalled(addon, main));

examples/cra-ts-essentials/src/stories/1-Button.stories.tsx

@@ -1,22 +1,20 @@
 import React from 'react';
-import { action } from '@storybook/addon-actions';
 import { Button } from '@storybook/react/demo';
-import { text } from '@storybook/addon-knobs';
 
 export default {
   title: 'Button',
   component: Button,
+  argTypes: { onClick: { action: 'clicked' } },
 };
 
-// eslint-disable-next-line no-underscore-dangle
-export const _text = () => (
-  <Button onClick={action('clicked')}>{text('label', 'testing knobs')}</Button>
-);
+const ButtonStory = (args) => <Button {...args} />;
 
-export const emoji = () => (
-  <Button onClick={action('clicked')}>
-    <span role="img" aria-label="so cool">
-      😀 😎 👍 💯
-    </span>
-  </Button>
-);
+export const Text = ButtonStory.bind({});
+Text.args = {
+  children: 'Hello button',
+};
+
+export const Emoji = ButtonStory.bind({});
+Emoji.args = {
+  children: '😀 😎 👍 💯',
+};