MIGRATE addon-knobs documentation to CSF & triconfig

addons/actions/README.md

@@ -14,10 +14,12 @@ Install:
 npm i -D @storybook/addon-actions
 ```
 
-Then, add following content to `.storybook/addons.js`
+Then, add following content to `.storybook/main.js`
 
 ```js
-import '@storybook/addon-actions/register';
+module.exports = {
+  addons: ['@storybook/addon-actions/register']
+}
 ```
 
 Import the `action` function and use it to create actions handlers. When creating action handlers, provide a **name** to make it easier to identify.
@@ -25,14 +27,17 @@ Import the `action` function and use it to create actions handlers. When creatin
 > _Note: Make sure NOT to use reserved words as function names. [issues#29](https://github.com/storybookjs/storybook-addon-actions/issues/29#issuecomment-288274794)_
 
 ```js
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-
 import Button from './button';
 
-storiesOf('Button', module).add('default view', () => (
+export default {
+  title: 'Button',
+  component: Button,
+};
+
+export const defaultView = () => (
   <Button onClick={action('button-click')}>Hello World!</Button>
-));
+);
 ```
 
 ## Multiple actions
@@ -40,22 +45,27 @@ storiesOf('Button', module).add('default view', () => (
 If your story requires multiple actions, it may be convenient to use `actions` to create many at once:
 
 ```js
-import { storiesOf } from '@storybook/react';
 import { actions } from '@storybook/addon-actions';
-
 import Button from './button';
 
+export default {
+  title: 'Button',
+  component: Button,
+};
+
 // This will lead to { onClick: action('onClick'), ... }
 const eventsFromNames = actions('onClick', 'onMouseOver');
 
 // This will lead to { onClick: action('clicked'), ... }
 const eventsFromObject = actions({ onClick: 'clicked', onMouseOver: 'hovered' });
 
-storiesOf('Button', module)
-  .add('default view', () => <Button {...eventsFromNames}>Hello World!</Button>)
-  .add('default view, different actions', () => (
-    <Button {...eventsFromObject}>Hello World!</Button>
-  ));
+export const fromName = () => (
+  <Button {...eventsFromNames}>Hello World!</Button>
+);
+
+export const fromObject = () => (
+  <Button {...eventsFromObject}>Hello World!</Button>
+);
 ```
 
 ## Action Decorators
@@ -66,14 +76,18 @@ If you wish to process action data before sending them over to the logger, you c
 
 ```js
 import { decorate } from '@storybook/addon-actions';
-
 import Button from './button';
 
+export default {
+  title: 'Button',
+  component: Button,
+};
+
 const firstArg = decorate([args => args.slice(0, 1)]);
 
-storiesOf('Button', module).add('default view', () => (
+export const fromObject = () => (
   <Button onClick={firstArg.action('button-click')}>Hello World!</Button>
-));
+);
 ```
 
 ## Configuration
@@ -88,7 +102,7 @@ The action logger, by default, will log all actions fired during the lifetime of
 this can make the storybook laggy. As a workaround, you can configure an upper limit to how many actions should 
 be logged.
 
-To apply the configuration globally use the `configureActions` function in your `config.js` file.
+To apply the configuration globally use the `configureActions` function in your `preview.js` file.
 
 ```js
 import { configureActions } from '@storybook/addon-actions';
@@ -97,14 +111,14 @@ configureActions({
   depth: 100,
   // Limit the number of items logged into the actions panel
   limit: 20,
-})
+});
 ```
 
 To apply the configuration per action use:
 ```js
 action('my-action', {
   depth: 5,
-})
+});
 ```
 
 ### Available Options
@@ -121,15 +135,15 @@ You can define action handles in a declarative way using `withActions` decorator
 Keys have `'<eventName> <selector>'` format, e.g. `'click .btn'`. Selector is optional. This can be used with any framework but is especially useful for `@storybook/html`.
 
 ```js
-import { storiesOf } from '@storybook/html';
 import { withActions } from '@storybook/addon-actions';
+import Button from './button';
 
-storiesOf('button', module)
-  // Log mouseovers on entire story and clicks on .btn
-  .addDecorator(withActions('mouseover', 'click .btn'))
-  .add('with actions', () => `
-    <div>
-      Clicks on this button will be logged: <button className="btn" type="button">Button</button>
-    </div>
-  `);
+export default {
+  title: 'Button',
+  decorators: [withActions('mouseover', 'click .btn')]
+};
+
+export const fromObject = () => (
+  <Button className="btn">Hello World!</Button>
+);
 ```