Add linter

storybookjs · Sep 27, 2018 · db7d941 · db7d941
1 parent 5d72ff6
commit db7d941
Show file tree

Hide file tree

Showing 17 changed files with 992 additions and 184 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,85 @@
+const error = 2;
+const warn = 1;
+const ignore = 0;
+
+module.exports = {
+  root: true,
+  extends: [
+    'airbnb',
+    'plugin:jest/recommended',
+    'plugin:import/react-native',
+    'prettier',
+    'prettier/react',
+  ],
+  plugins: ['prettier', 'jest', 'import', 'react', 'jsx-a11y', 'json'],
+  parser: 'babel-eslint',
+  parserOptions: {
+    ecmaVersion: 8,
+    sourceType: 'module',
+  },
+  env: {
+    es6: true,
+    node: true,
+    'jest/globals': true,
+  },
+  settings: {
+    'import/core-modules': ['enzyme'],
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.ts'],
+      },
+    },
+  },
+  rules: {
+    'no-debugger': process.env.NODE_ENV === 'production' ? error : ignore,
+    'no-continue': ignore,
+    'no-restricted-syntax': ignore,
+    'no-underscore-dangle': error,
+    'class-methods-use-this': ignore,
+    'prettier/prettier': [
+      warn,
+      {
+        printWidth: 100,
+        tabWidth: 2,
+        bracketSpacing: true,
+        trailingComma: 'es5',
+        singleQuote: true,
+      },
+    ],
+    'import/extensions': [
+      error,
+      'always',
+      {
+        js: 'never',
+        ts: 'never',
+      },
+    ],
+    'import/no-extraneous-dependencies': [
+      error,
+      {
+        peerDependencies: true,
+      }
+    ],
+    'import/prefer-default-export': ignore,
+    'import/default': error,
+    'import/named': error,
+    'import/namespace': error,
+    'react/no-unescaped-entities': ignore,
+    'react/jsx-filename-extension': [
+      warn,
+      {
+        extensions: ['.js', '.jsx'],
+      },
+    ],
+    'react/jsx-no-bind': [
+      error,
+      {
+        ignoreDOMComponents: true,
+        ignoreRefs: true,
+        allowArrowFunctions: true,
+        allowFunctions: true,
+        allowBind: true,
+      },
+    ],
+  },
+};
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 .idea
+.cache
 node_modules
 yarn-error.log
diff --git a/package.json b/package.json
@@ -11,6 +11,24 @@
     "type": "git",
     "url": "https://github.com/storybooks/presets.git"
   },
+  "scripts": {
+    "lint": "yarn lint:js .",
+    "lint:js": "cross-env NODE_ENV=production eslint --cache --cache-location=.cache/eslint --ext .js,.jsx,.json --report-unused-disable-directives"
+  },
+  "devDependencies": {
+    "babel-eslint": "^9.0.0",
+    "cross-env": "^5.2.0",
+    "eslint": "^5.4.0",
+    "eslint-config-airbnb": "^17.0.0",
+    "eslint-config-prettier": "^3.0.1",
+    "eslint-plugin-import": "^2.13.0",
+    "eslint-plugin-jest": "^21.22.0",
+    "eslint-plugin-json": "^1.2.1",
+    "eslint-plugin-jsx-a11y": "^6.1.1",
+    "eslint-plugin-prettier": "^2.6.2",
+    "eslint-plugin-react": "^7.10.0",
+    "prettier": "^1.14.0"
+  },
   "workspaces": [
     "packages/*"
   ]

diff --git a/packages/preset-mdx/extractRootNodeParts.js b/packages/preset-mdx/extractRootNodeParts.js
@@ -6,13 +6,7 @@ const {
 } = require('./helpers');
 
 function handleHeadingsApi(options) {
-  const {
-    storybookApi,
-    defaultStory,
-    childNode,
-    currentStory,
-    stories,
-  } = options;
+  const { storybookApi, defaultStory, childNode, currentStory, stories } = options;
 
   if (storybookApi !== 'headings') {
     return false;
@@ -39,8 +33,7 @@ function handleHeadingsApi(options) {
     if (!currentStory.children.length) {
       newStory.storyName = getHeadingText(childNode);
       newStory.storyNameHeading = childNode;
-    }
-    else {
+    } else {
       newStory = {
         ...defaultStory,
         storyKind: currentStory.storyKind,
@@ -60,20 +53,14 @@ function handleHeadingsApi(options) {
 }
 
 function handleAnnotationsApi(options) {
-  const {
-    storybookApi,
-    defaultStory,
-    childNode,
-    currentStory,
-    stories,
-  } = options;
+  const { storybookApi, defaultStory, childNode, currentStory, stories } = options;
 
   if (storybookApi !== 'annotations') {
     return false;
   }
 
   if (childNode.tagName !== 'storybook') {
-    return false
+    return false;
   }
 
   const { annotationKey, annotationValue } = childNode.properties;
@@ -95,8 +82,7 @@ function handleAnnotationsApi(options) {
 
     if (!currentStory.children.length) {
       newStory.storyName = annotationValue;
-    }
-    else {
+    } else {
       newStory = {
         ...defaultStory,
         storyKind: currentStory.storyKind,
@@ -137,12 +123,12 @@ function extractRootNodeParts(node, mdxOptions, options) {
   for (const childNode of node.children) {
     if (childNode.type === 'import') {
       importNodes.push(childNode);
-      continue
+      continue;
     }
 
     if (childNode.type === 'export') {
       exportNodes.push(childNode);
-      continue
+      continue;
     }
 
     if (childNode.type === 'element') {

diff --git a/packages/preset-mdx/helpers.js b/packages/preset-mdx/helpers.js
@@ -1,9 +1,7 @@
 const path = require('path');
 
 function isInvalidNewLine(childNode, currentStory) {
-  return childNode.type === 'text' &&
-    childNode.value === '\n' &&
-    !currentStory.children.length;
+  return childNode.type === 'text' && childNode.value === '\n' && !currentStory.children.length;
 }
 
 function getHeadingText(node) {
@@ -53,7 +51,7 @@ function isStorybookAnnotation({ value }) {
     return false;
   }
 
-  return value.match(/^<!--\s*(storyKind|storyName)\s*=.*\s*-->$/)
+  return value.match(/^<!--\s*(storyKind|storyName)\s*=.*\s*-->$/);
 }
 
 function createAnnotationNode(node) {
@@ -69,17 +67,17 @@ function createAnnotationNode(node) {
       {
         type: 'text',
         value: node.value,
-      }
+      },
     ],
     value: node.value,
     data: {
       hName: 'storybook',
       hProperties: {
         annotationKey,
         annotationValue,
-      }
-    }
-  }
+      },
+    },
+  };
 }
 
 module.exports = {

diff --git a/packages/preset-mdx/index.js b/packages/preset-mdx/index.js
@@ -3,14 +3,35 @@ const sbCodeExamplePlugin = require('./storybook-code-example-md-plugin');
 const sbMdxSyntaxPlugin = require('./storybook-syntax-md-plugin');
 const sbClassNamesPlugin = require('./storybook-classnames-hast-plugin');
 
+function wrapLoader(loader, options) {
+  if (options === false) {
+    return [];
+  }
+
+  return [
+    {
+      loader,
+      options,
+    },
+  ];
+}
+
+function combineMdxLoaderOptions(mdxLoaderOptions, mdxOptions) {
+  return {
+    ...mdxLoaderOptions,
+    mdPlugins: [
+      [sbMdxSyntaxPlugin, mdxOptions],
+      [sbCodeExamplePlugin, mdxOptions],
+      ...(mdxLoaderOptions.mdPlugins || []),
+    ],
+    hastPlugins: [...(mdxLoaderOptions.hastPlugins || []), sbClassNamesPlugin],
+    compilers: [...(mdxLoaderOptions.compilers || []), sbCreateCompiler(mdxOptions)],
+  };
+}
+
 function webpack(webpackConfig = {}, options = {}) {
   const { module = {} } = webpackConfig;
-  const {
-    babelLoaderOptions,
-    mdxOptions,
-    mdxLoaderOptions = {},
-    rule = {},
-  } = options;
+  const { babelLoaderOptions, mdxOptions, mdxLoaderOptions = {}, rule = {} } = options;
 
   const combinedMdxLoaderOptions = combineMdxLoaderOptions(mdxLoaderOptions, mdxOptions);
 
@@ -26,48 +47,11 @@ function webpack(webpackConfig = {}, options = {}) {
           use: [
             ...wrapLoader('babel-loader', babelLoaderOptions),
             ...wrapLoader('@mdx-js/loader', combinedMdxLoaderOptions),
-          ]
-        }
-      ]
-    }
-  };
-}
-
-function wrapLoader(loader, options) {
-  if (options === false) {
-    return [];
-  }
-
-  return [{
-    loader,
-    options,
-  }];
-}
-
-function combineMdxLoaderOptions(mdxLoaderOptions, mdxOptions) {
-  return {
-    ...mdxLoaderOptions,
-    mdPlugins: [
-      [
-        sbMdxSyntaxPlugin,
-        mdxOptions
-      ],
-      [
-        sbCodeExamplePlugin,
-        mdxOptions
+          ],
+        },
       ],
-      ...(mdxLoaderOptions.mdPlugins || []),
-    ],
-    hastPlugins: [
-      ...(mdxLoaderOptions.hastPlugins || []),
-      sbClassNamesPlugin,
-    ],
-    compilers: [
-      ...(mdxLoaderOptions.compilers || []),
-      sbCreateCompiler(mdxOptions),
-    ]
+    },
   };
 }
 
 module.exports = { webpack };
-
diff --git a/packages/preset-mdx/mdx-hast-to-story.js b/packages/preset-mdx/mdx-hast-to-story.js
@@ -8,17 +8,13 @@ function toStory(node, options, mdxOptions) {
     return mdxToJsx.toJSX(node, {}, options);
   }
 
-  const {
-    importNodes,
-    exportNodes,
-    stories
-  } = extractRootNodeParts(node, mdxOptions, options);
+  const { importNodes, exportNodes, stories } = extractRootNodeParts(node, mdxOptions, options);
 
   return [
     storybookImport(),
     ...generateJsx(importNodes, options),
     ...generateJsx(exportNodes, options),
-    ...generateStories(stories, mdxOptions, {...options, skipExport: true}),
+    ...generateStories(stories, mdxOptions, { ...options, skipExport: true }),
   ].join('\n');
 }
 

diff --git a/packages/preset-mdx/package.json b/packages/preset-mdx/package.json
@@ -34,6 +34,7 @@
   },
   "peerDependencies": {
     "@mdx-js/loader": "*",
+    "@mdx-js/mdx": "*",
     "babel-loader": "^7 || ^8"
   }
 }
diff --git a/packages/preset-mdx/storybook-classnames-hast-plugin.js b/packages/preset-mdx/storybook-classnames-hast-plugin.js
@@ -11,15 +11,13 @@ function applyClassName(node) {
 
   if (!properties.className) {
     properties.className = [storybookTagClassName];
-  }
-  else if (typeof properties.className === 'string') {
-    properties.className += ' ' + storybookTagClassName;
-  }
-  else if (Array.isArray(properties.className)) {
+  } else if (typeof properties.className === 'string') {
+    properties.className += ` ${storybookTagClassName}`;
+  } else if (Array.isArray(properties.className)) {
     properties.className = [
       ...properties.className,
       ...properties.className.map(createClassName),
-      storybookTagClassName
+      storybookTagClassName,
     ];
   }
 }
@@ -49,9 +47,9 @@ function visit(nodes) {
 }
 
 function hast() {
-  return function (tree) {
+  return tree => {
     visit(tree.children);
-  }
+  };
 }
 
-module.exports = hast;
+module.exports = hast;