FIX linting && ADD globals to makrdown code examples lint config

.eslintrc-markdown.js

@@ -23,6 +23,10 @@ module.exports = {
     node: true,
     'jest/globals': true,
   },
+  globals: {
+    storiesOf: true,
+    addonAPI: true,
+  },
   rules: {
     strict: [error, 'never'],
     'prettier/prettier': [warn, {
@@ -41,10 +45,11 @@ module.exports = {
     'import/extensions': ignore,
     'import/no-extraneous-dependencies': ignore,
     'import/prefer-default-export': ignore,
+    'react/prop-types': ignore,
     'react/jsx-wrap-multilines': ignore,
     'react/jsx-uses-react': error,
     'react/jsx-uses-vars': error,
-    'react/react-in-jsx-scope': error,
+    'react/react-in-jsx-scope': ignore,
     'react/jsx-filename-extension': ignore,
     'jsx-a11y/accessible-emoji': ignore,
     'react/no-unescaped-entities': ignore,

docs/pages/addons/api/index.md

@@ -25,8 +25,10 @@ This method allows you to register an addon and get the storybook API. You can d
 See how we can use this:
 
 ```js
+import addonAPI from '@storybook/addons';
+
 // Register the addon with a unique name.
-addonAPI.register('my-organisation/my-addon', (storybookAPI) => {
+addonAPI.register('my-organisation/my-addon', storybookAPI => {
 
 });
 ```
@@ -39,6 +41,8 @@ This method allows you to add a panel to Storybook. (Storybook's Action Logger i
 See how you can use this method:
 
 ```js
+import addonAPI from '@storybook/addons';
+
 const MyPanel = () => (
   <div>
     This is a panel.
@@ -59,12 +63,16 @@ As you can see, you can set any React Component as the panel. Currently, it's ju
 You also pass the channel and the Storybook API into that. See:
 
 ```js
-addonAPI.register('my-organisation/my-addon', (storybookAPI) => {
+import addonAPI from '@storybook/addons';
+
+import Notes from './notes';
+
+addonAPI.register('my-organisation/my-addon', storybookAPI => {
   // Also need to set a unique name to the panel.
   addonAPI.addPanel('my-organisation/my-addon/panel', {
     title: 'Notes',
     render: () => (
-      <Notes channel={addons.getChannel()} api={storybookAPI}/>
+      <Notes channel={addonAPI.getChannel()} api={storybookAPI}/>
     ),
   })
 })
@@ -86,16 +94,20 @@ With this method, you can select a story via an API. This method accepts two par
 Let's say you've got a story like this:
 
 ```js
-storiesOf('Button', module)
+import { storiesOf } from '@storybook/react';
+
+storiesOf('heading', module)
   .add('with text', () => (
-    <Button onClick={action('clicked')}>Hello Button</Button>
+    <h1>Hello world</h1>
   ));
 ```
 
 This is how you can select the above story:
 
 ```js
-storybookAPI.selectStory('Button', 'with text');
+addonAPI.register('my-organisation/my-addon', storybookAPI => {
+  storybookAPI.selectStory('heading', 'with text');
+})
 ```
 
 ### storybookAPI.setQueryParams()
@@ -112,8 +124,10 @@ storybookAPI.setQueryParams({
 > If you need to remove a query param, use `null` for that. For an example, let's say we need to remove bbc query param. This is how we do it:
 
 ```js
-storybookAPI.setQueryParams({
-  bbc: null,
+addonAPI.register('my-organisation/my-addon', storybookAPI => {
+  storybookAPI.setQueryParams({
+    bbc: null,
+  });
 });
 ```
 
@@ -122,7 +136,9 @@ storybookAPI.setQueryParams({
 This method allows you to get a query param set by above API `setQueryParams`. For example, let's say we need to get the bbc query param. Then this how we do it:
 
 ```js
-storybookAPI.getQueryParam('bbc');
+addonAPI.register('my-organisation/my-addon', storybookAPI => {
+  storybookAPI.getQueryParam('bbc');
+});
 ```
 
 ### storybookAPI.onStory(fn)
@@ -130,5 +146,7 @@ storybookAPI.getQueryParam('bbc');
 This method allows you to register a handler function which will be called whenever the user navigates between stories.
 
 ```js
-storybookAPI.onStory((kind, story) => console.log(kind, story));
+addonAPI.register('my-organisation/my-addon', storybookAPI => {
+  storybookAPI.onStory((kind, story) => console.log(kind, story));
+});
 ```

docs/pages/addons/introduction/index.md

@@ -16,8 +16,11 @@ Decorators are wrapper components or Storybook decorators that wrap a story.
 For example, let's say we want to center a story rendered on the screen. For that, we can use a wrapper component like this:
 
 ```js
+const styles = {
+  textAlign: 'center',
+};
 const Center = ({ children }) => (
-  <div style={{ textAlign: "center" }}>
+  <div style={styles}>
     { children }
   </div>
 );
@@ -26,7 +29,6 @@ const Center = ({ children }) => (
 Then we can use it when writing stories.
 
 ```js
-import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
@@ -46,14 +48,17 @@ storiesOf('Button', module)
 You can also expose this functionality as a Storybook decorator and use it like this.
 
 ```js
-import React from 'react';
-import Button from './button';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
-const CenterDecorator = story => (
-  <div style={{ textAlign: "center" }}>
-    {story()}
+import Button from './button';
+
+const styles = {
+  textAlign: 'center',
+};
+const CenterDecorator = ({ children }) => (
+  <div style={styles}>
+    { children }
   </div>
 );
 
@@ -74,9 +79,15 @@ import { storiesOf, addDecorator } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
 
-const CenterDecorator = (story) => (
-  <div style={{ textAlign: "center" }}>
-    {story()}
+import Button from './button';
+import Welcome from './welcome';
+
+const styles = {
+  textAlign: 'center',
+};
+const CenterDecorator = ({ children }) => (
+  <div style={styles}>
+    { children }
   </div>
 );
 addDecorator(CenterDecorator);