Merge pull request #1 from storybookjs/feature/add-auto-formatting

Add auto formatting with prettier + husky + lint-staged

.editorconfig

@@ -0,0 +1,18 @@
+# https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+max_line_length = 80
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = 0
+trim_trailing_whitespace = false
+
+[COMMIT_EDITMSG]
+max_line_length = 0

.eslintignore

@@ -5,4 +5,4 @@ build
 # don't lint nyc coverage output
 coverage
 
-tools
+tools

.eslintrc.js

@@ -2,7 +2,12 @@
 
 module.exports = {
   root: true,
-  extends: ['eslint:recommended', 'plugin:eslint-plugin/recommended', 'plugin:node/recommended'],
+  extends: [
+    'eslint:recommended',
+    'plugin:eslint-plugin/recommended',
+    'plugin:node/recommended',
+    'plugin:prettier/recommended',
+  ],
   env: {
     node: true,
   },
@@ -13,6 +18,9 @@ module.exports = {
       jsx: true,
     },
   },
+  rules: {
+    'prettier/prettier': 'warn',
+  },
   overrides: [
     {
       files: ['tests/**/*.js'],

.gitignore

@@ -19,6 +19,8 @@
 .env.test.local
 .env.production.local
 
+.eslintcache
+
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.prettierignore

@@ -0,0 +1,5 @@
+.github
+.husky
+build
+dist
+node_modules

.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  trailingComma: 'es5',
+  tabWidth: 2,
+  semi: false,
+  singleQuote: true,
+  printWidth: 100,
+  bracketSpacing: true,
+}

lib/configs/csf-strict.js

@@ -4,21 +4,21 @@
  * in order to update it's content execute "yarn update-all"
  */
 module.exports = {
-  extends: require.resolve("./csf"),
+  extends: require.resolve('./csf'),
   rules: {
-    "import/no-anonymous-default-export": "off",
-    "storybook/csf-component": "warn",
-    "storybook/default-exports": "error",
-    "storybook/hierarchy-separator": "warn",
-    "storybook/meta-inline-properties": [
-      "error",
+    'import/no-anonymous-default-export': 'off',
+    'storybook/csf-component': 'warn',
+    'storybook/default-exports': 'error',
+    'storybook/hierarchy-separator': 'warn',
+    'storybook/meta-inline-properties': [
+      'error',
       {
         csfVersion: 3,
       },
     ],
-    "storybook/no-redundant-story-name": "warn",
-    "storybook/prefer-pascal-case": "warn",
-    "storybook/no-stories-of": "error",
-    "storybook/no-title-property-in-meta": "error",
+    'storybook/no-redundant-story-name': 'warn',
+    'storybook/prefer-pascal-case': 'warn',
+    'storybook/no-stories-of': 'error',
+    'storybook/no-title-property-in-meta': 'error',
   },
-};
+}

lib/configs/csf.js

@@ -4,19 +4,19 @@
  * in order to update it's content execute "yarn update-all"
  */
 module.exports = {
-  plugins: ["storybook"],
+  plugins: ['storybook'],
   rules: {
-    "import/no-anonymous-default-export": "off",
-    "storybook/csf-component": "warn",
-    "storybook/default-exports": "error",
-    "storybook/hierarchy-separator": "warn",
-    "storybook/meta-inline-properties": [
-      "error",
+    'import/no-anonymous-default-export': 'off',
+    'storybook/csf-component': 'warn',
+    'storybook/default-exports': 'error',
+    'storybook/hierarchy-separator': 'warn',
+    'storybook/meta-inline-properties': [
+      'error',
       {
         csfVersion: 3,
       },
     ],
-    "storybook/no-redundant-story-name": "warn",
-    "storybook/prefer-pascal-case": "warn",
+    'storybook/no-redundant-story-name': 'warn',
+    'storybook/prefer-pascal-case': 'warn',
   },
-};
+}

lib/index.js

@@ -2,21 +2,20 @@
  * @fileoverview Best practice rules for Storybook
  * @author Yann Braga
  */
-"use strict";
+'use strict'
 
 //------------------------------------------------------------------------------
 // Requirements
 //------------------------------------------------------------------------------
 
-const requireIndex = require("requireindex");
+const requireIndex = require('requireindex')
 
 //------------------------------------------------------------------------------
 // Plugin Definition
 //------------------------------------------------------------------------------
 
-
 // import all rules in lib/rules
 module.exports = {
-  rules: requireIndex(__dirname + "/rules"),
-  configs: requireIndex(__dirname + "/configs")
-};
+  rules: requireIndex(__dirname + '/rules'),
+  configs: requireIndex(__dirname + '/configs'),
+}

lib/rules/csf-component.js

@@ -2,9 +2,9 @@
  * @fileoverview Component property should be set
  * @author Yann Braga
  */
-"use strict";
+'use strict'
 
-const { docsUrl } = require("../utils");
+const { docsUrl } = require('../utils')
 
 //------------------------------------------------------------------------------
 // Rule Definition
@@ -14,14 +14,14 @@ module.exports = {
   meta: {
     type: 'suggestion',
     docs: {
-      description: "The component property should be set",
+      description: 'The component property should be set',
       categories: ['csf'],
       recommended: false,
       recommendedConfig: 'warn',
       url: docsUrl('csf-component'), // URL to the documentation page for this rule
     },
     messages: {
-      description: 'Missing component property.'
+      description: 'Missing component property.',
     },
     fixable: null, // Or `code` or `whitespace`
     schema: [], // Add a schema if the rule has options
@@ -54,10 +54,10 @@ module.exports = {
         if (!component) {
           context.report({
             node,
-            messageId: 'description'
+            messageId: 'description',
           })
         }
       },
-    };
+    }
   },
-};
+}

lib/rules/default-exports.js

@@ -4,7 +4,7 @@
  */
 'use strict'
 
-const { docsUrl } = require("../utils")
+const { docsUrl } = require('../utils')
 
 //------------------------------------------------------------------------------
 // Rule Definition
@@ -21,7 +21,7 @@ module.exports = {
       url: docsUrl('default-exports'), // URL to the documentation page for this rule
     },
     messages: {
-      description: 'The file should have a default export.'
+      description: 'The file should have a default export.',
     },
   },
 

lib/rules/hierarchy-separator.js

@@ -4,7 +4,7 @@
  */
 'use strict'
 
-const { docsUrl } = require("../utils")
+const { docsUrl } = require('../utils')
 
 //------------------------------------------------------------------------------
 // Rule Definition
@@ -23,7 +23,8 @@ module.exports = {
     },
     messages: {
       fixSuggestion: 'Use correct separators',
-      deprecatedHierarchySeparator: 'Deprecated hierachy separator in title property: {{metaTitle}}.',
+      deprecatedHierarchySeparator:
+        'Deprecated hierachy separator in title property: {{metaTitle}}.',
     },
   },
   create: function (context) {
@@ -39,7 +40,7 @@ module.exports = {
         const titleNode = metaProperties.find((prop) => prop.key.name === 'title')
 
         if (!titleNode) {
-          return;
+          return
         }
 
         const metaTitle = titleNode.value.raw
@@ -51,10 +52,7 @@ module.exports = {
             data: { metaTitle },
             // In case we want this to be auto fixed by --fix
             fix: function (fixer) {
-              return fixer.replaceTextRange(
-                titleNode.value.range,
-                metaTitle.replace(/\|/g, '/')
-              )
+              return fixer.replaceTextRange(titleNode.value.range, metaTitle.replace(/\|/g, '/'))
             },
             suggest: [
               {

lib/rules/meta-inline-properties.js

@@ -2,9 +2,9 @@
  * @fileoverview Meta should have inline properties
  * @author Yann Braga
  */
-"use strict";
+'use strict'
 
-const { docsUrl } = require("../utils");
+const { docsUrl } = require('../utils')
 
 //------------------------------------------------------------------------------
 // Rule Definition
@@ -14,31 +14,31 @@ module.exports = {
   meta: {
     type: 'problem',
     docs: {
-      description: "Meta should only have inline properties",
-      category: "csf",
+      description: 'Meta should only have inline properties',
+      category: 'csf',
       recommended: true,
       recommendedConfig: ['error', { csfVersion: 3 }],
       url: docsUrl('meta-inline-properties'), // URL to the documentation page for this rule
     },
     messages: {
-      description: 'Meta should only have inline properties: {{properties}}'
+      description: 'Meta should only have inline properties: {{properties}}',
     },
     schema: [
       {
         type: 'object',
         properties: {
           csfVersion: {
-            type: 'number'
-          }
+            type: 'number',
+          },
         },
-        additionalProperties: false
-      }
+        additionalProperties: false,
+      },
     ],
   },
 
   create(context) {
     // variables should be defined here
-    
+
     // In case we need to get options defined in the rule schema
     // const options = context.options[0] || {}
     // const csfVersion = options.csfVersion
@@ -64,14 +64,13 @@ module.exports = {
         const ruleProperties = ['title', 'args']
         let dynamicProperties = []
 
-        const metaNodes = metaProperties.filter(
-          (prop) => ruleProperties.includes(prop.key.name)
-        );
+        const metaNodes = metaProperties.filter((prop) => ruleProperties.includes(prop.key.name))
 
-        metaNodes.forEach(metaNode => {
-          const isDynamic = metaNode.shorthand
-            || metaNode.value.type === 'BinaryExpression'
-            || metaNode.value.type === 'TemplateLiteral' && metaNode.value.expressions.length > 0
+        metaNodes.forEach((metaNode) => {
+          const isDynamic =
+            metaNode.shorthand ||
+            metaNode.value.type === 'BinaryExpression' ||
+            (metaNode.value.type === 'TemplateLiteral' && metaNode.value.expressions.length > 0)
 
           if (isDynamic) {
             dynamicProperties.push(metaNode.key.name)
@@ -84,11 +83,11 @@ module.exports = {
             loc: node.loc,
             messageId: 'description',
             data: {
-              properties: dynamicProperties.join(', ')
-            }
-          });
+              properties: dynamicProperties.join(', '),
+            },
+          })
         }
-      }
-    };
+      },
+    }
   },
-};
+}