Merge pull request #24 from storybooks/add-ci-linting

ADD markdown linting && CI

.eslintignore

@@ -0,0 +1,4 @@
+dist
+build
+coverage
+node_modules

.eslintrc.js

@@ -0,0 +1,28 @@
+module.exports = {
+  extends: [
+    './node_modules/eslint-config-airbnb-base/rules/es6.js',
+  ],
+  plugins: [
+    'prettier',
+  ],
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module',
+  },
+  env: {
+    es6: true,
+    node: true,
+  },
+  rules: {
+    strict: 0,
+    'prettier/prettier': ['warn', {
+      printWidth: 100,
+      tabWidth: 2,
+      bracketSpacing: true,
+      trailingComma: 'all',
+      singleQuote: true,
+    }],
+    quotes: ['warn', 'single'],
+    'arrow-parens': ['warn', 'as-needed'],
+  },
+}

.remarkrc

@@ -0,0 +1,12 @@
+{
+  "plugins": [
+    "remark-preset-lint-recommended",
+    ["remark-lint-list-item-indent", false],
+    ["remark-lint-code", {"js": {
+      "module": "node_modules/remark-lint-code-eslint",
+      "options": {
+        "fix": true
+      }
+    }}]
+  ]
+}

.travis.yml

@@ -0,0 +1,15 @@
+language: node_js
+cache:
+  directories:
+    - node_modules
+    - .cache
+notifications:
+  email: false
+node_js:
+  - "node"
+before_install: ./scripts/travis/before_install.sh
+after_success: ./scripts/travis/after_success.sh
+script:
+  - npm run lint
+git:
+  depth: 1

README.md

@@ -6,10 +6,8 @@ This site has also has the documentation for Storybook.
 
 ### Usage
 
-```
-npm i
-npm start
-```
+    npm i
+    npm start
 
 ### Edit Documentation
 

package.json

@@ -24,7 +24,27 @@
     "@kadira/storybook-addon-actions": "^1.1.3",
     "@kadira/storybook-addon-links": "^1.0.1",
     "@kadira/storybook-addons": "^1.6.1",
-    "gh-pages": "^0.12.0"
+    "babel-cli": "^6.24.1",
+    "babel-core": "^6.24.1",
+    "babel-eslint": "^7.2.2",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-polyfill": "^6.23.0",
+    "babel-preset-env": "^1.4.0",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "gh-pages": "^0.12.0",
+    "markdownlint-cli": "^0.3.1",
+    "eslint": "^3.19.0",
+    "eslint-config-airbnb-base": "^11.1.3",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jest": "^20.0.0",
+    "eslint-plugin-prettier": "^2.0.1",
+    "prettier": "^1.3.0",
+    "remark-cli": "^3.0.1",
+    "remark-lint": "^6.0.0",
+    "remark-lint-code": "^2.0.0",
+    "remark-lint-code-eslint": "^2.0.0",
+    "remark-preset-lint-recommended": "^2.0.0"
   },
   "keywords": [
     "react",
@@ -38,6 +58,6 @@
     "deploy": "gh-pages -r git@github.com:storybooks/storybooks.github.io.git -d public -o origin -b master",
     "develop": "gatsby develop",
     "storybook": "start-storybook -p 9009",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "lint": "remark . # -- -o to update"
   }
 }

pages/docs/react-storybook/addons/addon-gallery/index.md

@@ -2,6 +2,7 @@
 id: 'addon-gallery'
 title: 'Addon Gallery'
 ---
+
 This is a list of available addons for Storybook.
 
 ## Built-In Addons.
@@ -14,7 +15,7 @@ With actions, you can inspect events related to your components. This is pretty
 
 Also, you can think of this as a way to document events in your components.
 
-### [Links](https://github.com/storybooks/storybook/tree/master/packages/addon-links)		
+### [Links](https://github.com/storybooks/storybook/tree/master/packages/addon-links)
 
 With links you can link stories together. With that, you can build demos and prototypes directly from your UI components. (Like you can do with [Invision](https://www.invisionapp.com/) and [Framer.js](https://framerjs.com/))
 

pages/docs/react-storybook/addons/api/index.md

@@ -2,13 +2,14 @@
 id: 'api'
 title: 'API'
 ---
+
 ## Core Addon API
 
 This is the core addon API. This is how to get the addon API:
 
-~~~js
+```js
 import addonAPI from '@kadira/storybook-addons';
-~~~
+```
 
 Have a look at the API methods for more details:
 
@@ -23,12 +24,12 @@ It has a NodeJS [EventEmitter](https://nodejs.org/api/events.html) compatible AP
 This method allows you to register an addon and get the storybook API. You can do this only in the Manager App.
 See how we can use this:
 
-~~~js
+```js
 // Register the addon with a unique name.
 addonAPI.register('kadira/notes', (storybookAPI) => {
 
 });
-~~~
+```
 
 Now you'll get an instance to our StorybookAPI. See the [api docs](/docs/react-storybook/addons/api#storybook-api) for Storybook API regarding using that.
 
@@ -37,7 +38,7 @@ Now you'll get an instance to our StorybookAPI. See the [api docs](/docs/react-s
 This method allows you to add a panel to Storybook. (Storybook's Action Logger is a panel). You can do this only in the Manager App.
 See how you can use this method:
 
-~~~js
+```js
 const MyPanel = () => (
   <div>
     This is a panel.
@@ -51,13 +52,13 @@ addonAPI.addPanel('kadira/notes/panel', {
     <MyPanel />
   ),
 });
-~~~
+```
 
 As you can see, you can set any React Component as the panel. Currently, it's just a text. But you can do anything you want.
 
 You also pass the channel and the Storybook API into that. See:
 
-~~~js
+```js
 addonAPI.register('kadira/notes', (storybookAPI) => {
   // Also need to set a unique name to the panel.
   addonAPI.addPanel('kadira/notes/panel', {
@@ -67,7 +68,7 @@ addonAPI.register('kadira/notes', (storybookAPI) => {
     ),
   })
 })
-~~~
+```
 
 ## Storybook API
 
@@ -79,55 +80,55 @@ Let's have a look at API methods.
 
 With this method, you can select a story via an API. This method accepts two parameters.
 
-1. story kind name
-2. story name (optional)
+1.  story kind name
+2.  story name (optional)
 
 Let's say you've got a story like this:
 
-~~~js
+```js
 storiesOf('Button', module)
   .add('with text', () => (
     <Button onClick={action('clicked')}>Hello Button</Button>
   ));
-~~~
+```
 
 This is how you can select the above story:
 
-~~~js
+```js
 storybookAPI.selectStory('Button', 'with text');
-~~~
+```
 
 ### storybookAPI.setQueryParams()
 
 This method allows you to set query string parameters. You can use that as temporary storage for addons. Here's how you set query params.
 
-~~~js
+```js
 storybookAPI.setQueryParams({
   abc: 'this is abc',
   bbc: 'this is bbc',
 });
-~~~
+```
 
 > 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
+```js
 storybookAPI.setQueryParams({
   bbc: null,
 });
-~~~
+```
 
 ### storybookAPI.getQueryParam()
 
 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
+```js
 storybookAPI.getQueryParam('bbc');
-~~~
+```
 
 ### storybookAPI.onStory(fn)
 
 This method allows you to register a handler function which will be called whenever the user navigates between stories.
 
-~~~js
+```js
 storybookAPI.onStory((kind, story) => console.log(kind, story));
-~~~
+```

pages/docs/react-storybook/addons/introduction/index.md

@@ -15,30 +15,30 @@ These 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
+```js
 const Center = ({ children }) => (
   <div style={{ textAlign: "center" }}>
     { children }
   </div>
 );
-~~~
+```
 
 Then we can use it when writing stories.
 
-~~~js
+```js
 storiesOf('Button', module)
   .add('with text', () => (
     <Center>
       <Button onClick={action('clicked')}>Hello Button</Button>
     </Center>
   ));
-~~~
+```
 
 ### Storybook Decorators
 
 You can also expose this functionality as a Storybook decorator and use it like this.
 
-~~~js
+```js
 const CenterDecorator = (story) => (
   <div style={{ textAlign: "center" }}>
     {story()}
@@ -53,11 +53,11 @@ storiesOf('Button', module)
   .add('with some emojies', () => (
     <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
   ));
-~~~
+```
 
 You can also add a decorator globally for all stories like this:
 
-~~~js
+```js
 import { storiesOf, addDecorator } from '@kadira/storybook';
 import { action } from '@kadira/storybook-addon-actions';
 import { linkTo } from '@kadira/storybook-addon-links';
@@ -81,7 +81,7 @@ storiesOf('Button', module)
   .add('with some emojies', () => (
     <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
   ));
-~~~
+```
 
 > You can call `addDecorator()` inside the story definition file as shown above. But adding it to the Storybook config file is a much better option.
 
@@ -99,6 +99,6 @@ It will allow you to inspect the parameters of any event of your components.
 
 See the following links to learn more about native addons:
 
-* [Using addons](/docs/react-storybook/addons/using-addons)
-* [Addon gallery](/docs/react-storybook/addons/addon-gallery)
-* [Write your own addon](/docs/react-storybook/addons/writing-addons)
+-   [Using addons](/docs/react-storybook/addons/using-addons)
+-   [Addon gallery](/docs/react-storybook/addons/addon-gallery)
+-   [Write your own addon](/docs/react-storybook/addons/writing-addons)

pages/docs/react-storybook/addons/using-addons/index.md

@@ -11,25 +11,25 @@ We are going to use an addon called [Notes](https://github.com/storybooks/storyb
 
 First, we need to install the addons:
 
-~~~sh
+```sh
 npm i --save-dev @kadira/storybook-addon-actions @kadira/storybook-addon-links @kadira/storybook-addon-notes
-~~~
+```
 
 Then, we need to create a file called `addons.js` inside the storybook config directory and add the following content:
 
-~~~js
+```js
 import '@kadira/storybook-addon-actions/register';
 import '@kadira/storybook-addon-links/register';
 import '@kadira/storybook-addon-notes/register';
-~~~
+```
 
 This will register all the addons and you'll be able to see the actions and notes panels (in that order) when you are viewing the story. (Links do not register a tab--check individual addon docs to see which Storybook features they use!)
 
 ![Stories without notes](../static/stories-without-notes.png)
 
 Now when you are writing a story it like this and add some notes:
 
-~~~js
+```js
 import React from 'react';
 import { storiesOf } from '@kadira/storybook';
 import { action } from '@kadira/storybook-addon-actions';
@@ -39,11 +39,11 @@ import { WithNotes } from '@kadira/storybook-addon-notes';
 
 storiesOf('Button', module)
   .add('with some emoji', () => (
-    <WithNotes notes={'Here we use some emoji as the Button text. Isn\\'t it look nice?'}>
+    <WithNotes notes={'Here we use some emoji as the Button text. Isn&apos;t it look nice?'}>
       <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
     </WithNotes>
   ));
-~~~
+```
 
 Then you'll be able to see those notes when you are viewing the story.