ADD eslint config for examples inside markdown

FIX linting

.eslintrc-markdown.js

@@ -0,0 +1,52 @@
+const error = 2;
+const warn = 1;
+const ignore = 0;
+
+module.exports = {
+  root: true,
+  extends: [
+    'eslint-config-airbnb',
+    'plugin:jest/recommended',
+    'prettier',
+  ],
+  plugins: [
+    'prettier',
+    'jest',
+    'react',
+  ],
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module',
+  },
+  env: {
+    es6: true,
+    node: true,
+    'jest/globals': true,
+  },
+  rules: {
+    strict: [error, 'never'],
+    'prettier/prettier': [warn, {
+      printWidth: 100,
+      tabWidth: 2,
+      bracketSpacing: true,
+      trailingComma: 'es5',
+      singleQuote: true,
+    }],
+    quotes: [warn, 'single'],
+    'no-unused-vars': ignore,
+    'class-methods-use-this': ignore,
+    'arrow-parens': [warn, 'as-needed'],
+    'space-before-function-paren': ignore,
+    'import/no-unresolved': ignore,
+    'import/extensions': ignore,
+    'import/no-extraneous-dependencies': ignore,
+    'import/prefer-default-export': ignore,
+    'react/jsx-wrap-multilines': ignore,
+    'react/jsx-uses-react': error,
+    'react/jsx-uses-vars': error,
+    'react/react-in-jsx-scope': error,
+    'react/jsx-filename-extension': ignore,
+    'jsx-a11y/accessible-emoji': ignore,
+    'react/no-unescaped-entities': ignore,
+  },
+}

.remarkrc

@@ -5,7 +5,8 @@
     ["remark-lint-code", {"js": {
       "module": "node_modules/remark-lint-code-eslint",
       "options": {
-        "fix": true
+        "fix": true,
+        "configFile": "/Users/dev/Projects/GitHub/storybook/react-storybook/.eslintrc-markdown.js"
       }
     }}],
     ["remark-toc", {

docs/pages/addons/api/index.md

@@ -26,7 +26,7 @@ See how we can use this:
 
 ```js
 // Register the addon with a unique name.
-addonAPI.register('kadira/notes', (storybookAPI) => {
+addonAPI.register('my-organisation/my-addon', (storybookAPI) => {
 
 });
 ```
@@ -46,8 +46,8 @@ const MyPanel = () => (
 );
 
 // give a unique name for the panel
-addonAPI.addPanel('kadira/notes/panel', {
-  title: 'Notes',
+addonAPI.addPanel('my-organisation/my-addon/panel', {
+  title: 'My Addon',
   render: () => (
     <MyPanel />
   ),
@@ -59,9 +59,9 @@ 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('kadira/notes', (storybookAPI) => {
+addonAPI.register('my-organisation/my-addon', (storybookAPI) => {
   // Also need to set a unique name to the panel.
-  addonAPI.addPanel('kadira/notes/panel', {
+  addonAPI.addPanel('my-organisation/my-addon/panel', {
     title: 'Notes',
     render: () => (
       <Notes channel={addons.getChannel()} api={storybookAPI}/>

docs/pages/addons/introduction/index.md

@@ -26,6 +26,13 @@ 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';
+
+import Center from './center';
+import Button from './button';
+
 storiesOf('Button', module)
   .add('with text', () => (
     <Center>
@@ -39,7 +46,12 @@ storiesOf('Button', module)
 You can also expose this functionality as a Storybook decorator and use it like this.
 
 ```js
-const CenterDecorator = (story) => (
+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()}
   </div>

docs/pages/basics/writing-stories/index.md

@@ -75,13 +75,13 @@ import { storiesOf } from '@storybook/react';
 import MyComponent from '../my_component';
 
 storiesOf('MyComponent', module)
-  .addDecorator((story) => (
+  .addDecorator(story => (
     <div style={{textAlign: 'center'}}>
       {story()}
     </div>
   ))
-  .add('without props', () => (<MyComponent />))
-  .add('with some props', () => (<MyComponent text="The Comp"/>));
+  .add('without props', () => <MyComponent />)
+  .add('with some props', () => <MyComponent text="The Comp"/>);
 ```
 
 Here we only add the decorator for the current set of stories. (In this example, we add it just for the **MyComponent** story group.)
@@ -89,9 +89,10 @@ Here we only add the decorator for the current set of stories. (In this example,
 But, you can also add a decorator **globally** and it'll be applied to all the stories you create. This is how to add a decorator like that:
 
 ```js
+import React from 'react';
 import { configure, addDecorator } from '@storybook/react';
 
-addDecorator((story) => (
+addDecorator(story => (
   <div style={{textAlign: 'center'}}>
     {story()}
   </div>
@@ -117,7 +118,9 @@ Until that's implemented, here's how different developers address this issue, ri
 For example, you can prefix story names with a dot (`.`):
 
 ```js
-storiesOf('core.Button', module)
+import { storiesOf } from '@storybook/react';
+
+storiesOf('core.Button', module);
 ```
 
 Then you can filter stories to display only the stories you want to see.

docs/pages/configurations/custom-webpack-config/index.md

@@ -60,8 +60,10 @@ That's where you can use our full control mode.
 To enable that, you need to export a **function** from the above `webpack.config.js` file, just like this:
 
 ```js
+const path = require('path');
+
 // Export a function. Accept the base config as the only param.
-module.exports = function(storybookBaseConfig, configType) {
+module.exports = (storybookBaseConfig, configType) => {
   // configType has a value of 'DEVELOPMENT' or 'PRODUCTION'
   // You can change the configuration based on that.
   // 'PRODUCTION' is used when building the static version of storybook.
@@ -98,8 +100,8 @@ Add following content to the `webpack.config.js` in your Storybook config direct
 // load the default config generator.
 const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');
 
-module.exports = (config, env) => {
-  const config = genDefaultConfig(config, env);
+module.exports = (baseConfig, env) => {
+  const config = genDefaultConfig(baseConfig, env);
 
   // Extend it as you need.
 

docs/pages/configurations/default-config/index.md

@@ -34,11 +34,11 @@ You can simply import CSS files wherever you want, whether it's in the storybook
 Basically, you can import CSS like this:
 
 ```js
-// locally
-import './styles.css';
-
-// or from NPM modules
+// from NPM modules
 import 'bootstrap/dist/css/bootstrap.css';
+
+// from local path
+import './styles.css';
 ```
 
 ### Image and Static File Support
@@ -52,9 +52,9 @@ import { storiesOf } from '@storybook/react';
 
 import imageFile from './static/image.png';
 
-storiesOf('<img>', module)
+storiesOf('<img />', module)
   .add('with a image', () => (
-    <img src={imageFile} />
+    <img src={imageFile} alt="covfefe" />
   ));
 ```
 

docs/pages/configurations/env-vars/index.md

@@ -17,8 +17,10 @@ STORYBOOK_THEME=red STORYBOOK_DATA_KEY=12345 npm run storybook
 Then we can access these environment variables anywhere inside our JS code like below:
 
 ```js
-console.log(process.env.STORYBOOK_THEME)
-console.log(process.env.STORYBOOK_DATA_KEY)
+const out = console;
+
+out.log(process.env.STORYBOOK_THEME);
+out.log(process.env.STORYBOOK_DATA_KEY);
 ```
 
 > Even though we can access these env variables anywhere in the client side JS code, it's better to use them only inside stories and inside the main Storybook config file.

docs/pages/configurations/serving-static-files/index.md

@@ -17,9 +17,14 @@ import { storiesOf } from '@storybook/react';
 
 import imageFile from './static/image.png';
 
-storiesOf('<img>', module)
+const image = {
+  src: imageFile,
+  alt: 'my image',
+};
+
+storiesOf('<img />', module)
   .add('with a image', () => (
-    <img src={imageFile} />
+    <img src={image.src} alt={image.alt} />
   ));
 ```
 
@@ -45,10 +50,12 @@ Here `./public` is our static directory. Now you can use static files in the pub
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 
+const imageAlt = 'my image';
+
 // assume image.png is located in the "public" directory.
-storiesOf('<img>', module)
+storiesOf('<img />', module)
   .add('with a image', () => (
-    <img src="/image.png" />
+    <img src="/image.png" alt={imageAlt} />
   ));
 ```
 
@@ -71,16 +78,15 @@ In this example we're using a placeholder image service.
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 
-// assume image.png is located in the "public" directory.
-storiesOf('<img>', module)
+storiesOf('<img />', module)
   .add('with a image', () => (
-    <img src="https://placehold.it/350x150" />
+    <img src="https://placehold.it/350x150" alt="My CDN placeholder" />
   ));
 ```
 
 ## Absolute versus relative paths
 
-Sometimes, you may want to deploy your storybook into a subpath, like <https://kadira-samples.github.io/react-button>.
+Sometimes, you may want to deploy your storybook into a subpath, like `https://example.com/storybook`.
 
 In this case, you need to have all your images and media files with relative paths. Otherwise, Storybook cannot locate those files.
 

lib/channel-postmessage/README.md

@@ -11,8 +11,9 @@ Storybook PostMessage Channel is a channel for Storybook that can be used when t
 A channel can be created using the `createChannel` function.
 
 ```js
-import createChannel from '@storybook/channel-postmessage'
-const channel = createChannel({ key: 'postmsg-key' })
+import createChannel from '@storybook/channel-postmessage';
+
+const channel = createChannel({ key: 'postmsg-key' });
 ```
 
 * * *

lib/channel-websocket/README.md

@@ -11,8 +11,9 @@ Storybook Websocket Channel is a channel for Storybook that can be used when the
 A channel can be created using the `createChannel` function.
 
 ```js
-import createChannel from '@storybook/channel-websocket'
-const channel = createChannel({ url: 'ws://localhost:9001' })
+import createChannel from '@storybook/channel-websocket';
+
+const channel = createChannel({ url: 'ws://localhost:9001' });
 ```
 
 * * *

lib/codemod/README.md

@@ -52,12 +52,12 @@ Example:
 
 ```js
 import { storiesOf } from '@kadira/storybook';
-import { storiesOf } from '@kadira/storybook-addon-links';
+import { linkTo } from '@kadira/storybook-addon-links';
 ```
 
 Becomes
 
 ```js
 import { storiesOf } from '@storybook/react';
-import { storiesOf } from '@storybook/addon-links';
+import { linkTo } from '@storybook/addon-links';
 ```

lib/ui/README.md

@@ -63,8 +63,9 @@ export default class MyProvider extends Provider {
 Then you need to initialize the UI like this:
 
 ```js
-import Provider from './provider';
+import { document } from 'global';
 import renderStorybookUI from '@storybook/ui';
+import Provider from './provider';
 
 const roolEl = document.getElementById('root');
 renderStorybookUI(roolEl, new Provider());
@@ -81,6 +82,8 @@ Then you'll get a UI like this:
 ### .setOptions()
 
 ```js
+import { Provider } from '@storybook/ui';
+
 class ReactProvider extends Provider {
   handleAPI(api) {
     api.setOptions({
@@ -97,6 +100,8 @@ class ReactProvider extends Provider {
 This API is used to pass the`kind` and `stories` list to storybook-ui.
 
 ```js
+import { Provider } from '@storybook/ui';
+
 class ReactProvider extends Provider {
   handleAPI(api) {
     api.setStories([
@@ -119,6 +124,8 @@ class ReactProvider extends Provider {
 You can use to listen to the story change and update the preview.
 
 ```js
+import { Provider } from '@storybook/ui';
+
 class ReactProvider extends Provider {
   handleAPI(api) {
     api.onStory((kind, story) => {