Include more paths into linting

.eslintignore

@@ -2,8 +2,7 @@ dist
 build
 coverage
 node_modules
-addons/**/example/**
-app/**/demo/**
+#addons/**/example/**
 docs/public
 lib/cli/test
 *.bundle.js
@@ -13,3 +12,4 @@ lib/cli/test
 !.eslintrc.js
 !.eslintrc-markdown.js
 !.jest.config.js
+!.storybook

.eslintrc.js

@@ -63,6 +63,7 @@ module.exports = {
           '**/scripts/*.js',
           '**/stories/**/*.js',
           '**/__tests__/**/*.js',
+          '**/.storybook/**/*.js',
         ],
         peerDependencies: true,
       },
@@ -101,5 +102,11 @@ module.exports = {
         'jsx-a11y/accessible-emoji': ignore,
       },
     },
+    {
+      files: '**/.storybook/config.js',
+      rules: {
+        'global-require': ignore,
+      },
+    },
   ],
 };

addons/a11y/.storybook/components/Button/component.js

@@ -15,10 +15,10 @@ const styles = {
   wrong: {
     color: '#ffffff',
     backgroundColor: '#4caf50',
-  }
-}
+  },
+};
 
-function Button({ label, content, disabled, contrast }) {
+function Button({ content, disabled, contrast }) {
   return (
     <button
       style={{
@@ -27,19 +27,19 @@ function Button({ label, content, disabled, contrast }) {
       }}
       disabled={disabled}
     >
-      { content }
+      {content}
     </button>
-  )
+  );
 }
 
 Button.propTypes = {
-  label: PropTypes.string,
   content: PropTypes.string,
   disabled: PropTypes.bool,
-  contrast: PropTypes.oneOf(['ok', 'wrong'])
+  contrast: PropTypes.oneOf(['ok', 'wrong']),
 };
 
 Button.defaultProps = {
+  content: 'null',
   disabled: false,
   contrast: 'ok',
 };

addons/a11y/.storybook/components/Button/stories.js

@@ -1,34 +1,17 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
+import Faker from 'faker';
 
 import { checkA11y } from './../../../src';
 
 import Button from './component';
 
-import Faker from 'faker';
-
 const text = Faker.lorem.words();
 
 storiesOf('<Button />', module)
   .addDecorator(checkA11y)
-  .add('Default', () => (
-    <Button />
-  ))
-  .add('Content', () => (
-    <Button content={text} />
-  ))
-  .add('Label', () => (
-    <Button label={text} />
-  ))
-  .add('Disabled', () => (
-    <Button
-      disabled
-      content={text}
-    />
-  ))
-  .add('Invalid contrast', () => (
-    <Button
-      contrast="wrong"
-      content={Faker.lorem.words()}
-    />
-  ));
+  .add('Default', () => <Button />)
+  .add('Content', () => <Button content={text} />)
+  .add('Label', () => <Button label={text} />)
+  .add('Disabled', () => <Button disabled content={text} />)
+  .add('Invalid contrast', () => <Button contrast="wrong" content={Faker.lorem.words()} />);

addons/a11y/.storybook/components/Form/components/Input.js

@@ -2,21 +2,21 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 function Input({ id, value, type, placeholder }) {
-  return (
-    <input
-      id={id}
-      value={value}
-      placeholder={placeholder}
-      type={type}
-    />
-  );
+  return <input id={id} value={value} placeholder={placeholder} type={type} />;
 }
 
 Input.propTypes = {
   type: PropTypes.oneOf(['text', 'password']),
   id: PropTypes.string,
   value: PropTypes.string,
   placeholder: PropTypes.string,
-}
+};
+
+Input.defaultProps = {
+  type: null,
+  id: null,
+  value: null,
+  placeholder: null,
+};
 
 export default Input;

addons/a11y/.storybook/components/Form/components/Label.js

@@ -5,22 +5,19 @@ const styles = {
   label: {
     padding: '0 6px',
   },
-}
+};
 
 function Label({ id, content }) {
   return (
-    <label
-      style={styles.label}
-      htmlFor={id}
-    >
-      { content }
+    <label style={styles.label} htmlFor={id}>
+      {content}
     </label>
-  )
+  );
 }
 
 Label.propTypes = {
-  content: PropTypes.string,
-  id: PropTypes.string,
+  content: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
 };
 
 export default Label;

addons/a11y/.storybook/components/Form/components/Row.js

@@ -15,7 +15,11 @@ function Row({ label, input }) {
 
 Row.propTypes = {
   label: PropTypes.instanceOf(Label),
-  input: PropTypes.instanceOf(Input),
-}
+  input: PropTypes.instanceOf(Input).isRequired,
+};
+
+Row.defaultProps = {
+  label: null,
+};
 
 export default Row;

addons/a11y/.storybook/components/Form/components/index.js

@@ -2,8 +2,4 @@ import Input from './Input';
 import Label from './Label';
 import Row from './Row';
 
-export {
-  Input,
-  Label,
-  Row,
-};
+export { Input, Label, Row };

addons/a11y/.storybook/components/Form/stories.js

@@ -1,36 +1,20 @@
 import React from 'react';
+import { storiesOf } from '@storybook/react';
+import Faker from 'faker';
 
 import * as Form from './components';
 
-import { storiesOf } from '@storybook/react';
 import { checkA11y } from './../../../src';
 
-import Faker from 'faker';
-
 const label = Faker.lorem.word();
 const placeholder = Faker.lorem.word();
 
 storiesOf('<Form />', module)
   .addDecorator(checkA11y)
-  .add('Without Label', () => (
-    <Form.Row
-      input={<Form.Input />}
-    />
-  ))
-  .add ('With label', () => (
-    <Form.Row
-      label={<Form.Label
-        content={label}
-        id="1"
-      />}
-      input={<Form.Input id="1" />}
-    />
-  ))
-  .add ('With placeholder', () => (
-    <Form.Row
-      input={<Form.Input
-        id="1"
-        placeholder={placeholder}
-      />}
-    />
+  .add('Without Label', () => <Form.Row input={<Form.Input />} />)
+  .add('With label', () => (
+    <Form.Row label={<Form.Label content={label} id="1" />} input={<Form.Input id="1" />} />
   ))
+  .add('With placeholder', () => (
+    <Form.Row input={<Form.Input id="1" placeholder={placeholder} />} />
+  ));

addons/a11y/.storybook/components/Image/component.js

@@ -2,13 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 function Image({ src, alt, presentation }) {
-  return (
-    <img
-      src={src}
-      alt={alt}
-      role={presentation && 'presentation'}
-    />
-  );
+  return <img src={src} alt={alt} role={presentation && 'presentation'} />;
 }
 
 Image.propTypes = {
@@ -17,4 +11,9 @@ Image.propTypes = {
   presentation: PropTypes.bool,
 };
 
+Image.defaultProps = {
+  alt: null,
+  presentation: false,
+};
+
 export default Image;

addons/a11y/.storybook/components/Image/stories.js

@@ -1,29 +1,16 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
+import Faker from 'faker';
 
 import { checkA11y } from './../../../src';
 
 import Image from './component';
 
-import Faker from 'faker';
-
 const image = Faker.image.animals();
 const alt = Faker.lorem.words();
 
 storiesOf('<Image />', module)
   .addDecorator(checkA11y)
-  .add('Without alt', () => (
-    <Image src={image} />
-  ))
-  .add('With alt', () => (
-    <Image
-      src={image}
-      alt={alt}
-    />
-  ))
-  .add('Presentation', () => (
-    <Image
-      presentation
-      src={image}
-    />
-  ));
+  .add('Without alt', () => <Image src={image} />)
+  .add('With alt', () => <Image src={image} alt={alt} />)
+  .add('Presentation', () => <Image presentation src={image} />);

addons/a11y/.storybook/components/Typography/components/Heading.js

@@ -1,20 +1,20 @@
-import React, { cloneElement } from 'react';
+import { createElement } from 'react';
 import PropTypes from 'prop-types';
 
 const headings = {
-  1: (<h1 />),
-  2: (<h2 />),
-  3: (<h3 />),
-  4: (<h4 />),
+  1: 'h1',
+  2: 'h2',
+  3: 'h3',
+  4: 'h4',
 };
 
 function Heading({ level, children }) {
-  return cloneElement(headings[level], {}, children)
+  return createElement(headings[level], {}, children);
 }
 
 Heading.propTypes = {
   level: PropTypes.oneOf([1, 2, 3, 4]),
-  children: PropTypes.any,
+  children: PropTypes.node,
 };
 
 Heading.defaultProps = {

addons/a11y/.storybook/components/Typography/components/Link.js

@@ -2,16 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 function Link({ href, content }) {
-  return (
-    <a href={href}>
-      { content }
-    </a>
-  );
+  return <a href={href}>{content}</a>;
 }
 
 Link.propTypes = {
-  href: PropTypes.string,
-  content: PropTypes.string,
+  href: PropTypes.string.isRequired,
+  content: PropTypes.string.isRequired,
 };
 
 export default Link;

addons/a11y/.storybook/components/Typography/components/Text.js

@@ -2,15 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 function Text({ children }) {
-  return (
-    <p>
-      {children}
-    </p>
-  );
+  return <p>{children}</p>;
 }
 
 Text.propTypes = {
-  children: PropTypes.any,
+  children: PropTypes.node.isRequired,
 };
 
 export default Text;

addons/a11y/.storybook/components/Typography/components/index.js

@@ -2,8 +2,4 @@ import Heading from './Heading';
 import Link from './Link';
 import Text from './Text';
 
-export {
-  Heading,
-  Link,
-  Text,
-};
+export { Heading, Link, Text };