improvement: upgrade build pipeline and dev dependencies (clauderic#466)

* Use microbundle for bundling

* Updated eslint config

* Use standard-version for managing versioning

* Updated travisci node version

* Addded prettier as pre-commit hook

Author: Claudéric Demers

.babelrc

@@ -0,0 +1,15 @@
+# editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+# Markdown syntax specifies that trailing whitespaces can be meaningful,
+# so let’s not trim those. e.g. 2 trailing spaces = linebreak (<br />)
+# See https://daringfireball.net/projects/markdown/syntax#p
+[*.md]
+trim_trailing_whitespace = false

.editorconfig

@@ -0,0 +1,21 @@
+{
+  "extends": ["plugin:shopify/react"],
+  "rules": {
+    "no-lonely-if": "off",
+    "no-undefined": "off",
+    "no-param-reassign": "off",
+    "no-mixed-operators": "off",
+    "no-misleading-character-class": "off",
+    "require-atomic-updates": "off",
+    "prefer-object-spread": "off",
+    "lines-around-comment": "off",
+    "function-paren-newline": "off",
+    "promise/catch-or-return": "off",
+    "react/forbid-prop-types": "off",
+    "react/jsx-filename-extension": "off",
+    "react/no-unused-prop-types": "off",
+    "shopify/binary-assignment-parens": "off",
+    "react/no-string-refs": 1,
+    "react/no-deprecated": 1
+  }
+}

.eslintrc

@@ -5,11 +5,5 @@ src
 test
 .*
 *.md
-server.js
-index.html
-/index.js
-karma.conf.js
-webpack.config.*.js
-babel.preprocess.sass.js
 codecov.yml
 .travis.yml

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": false,
+  "singleQuote": true,
+  "trailingComma": "all"
+}

.npmignore

@@ -0,0 +1 @@
+import '@storybook/addon-options/register';

.prettierrc

@@ -1,4 +1,13 @@
-import { configure } from '@kadira/storybook';
+import {addDecorator, configure} from '@storybook/react';
+import {withOptions} from '@storybook/addon-options';
+
+addDecorator(
+  withOptions({
+    name: 'React Sortable HOC',
+    url: 'https://github.com/clauderic/react-sortable-hoc',
+    showAddonPanel: false,
+  })
+);
 
 function loadStories() {
   require('../src/.stories/index.js');

.storybook/addons.js

@@ -1,27 +1,30 @@
-var autoprefixer = require('autoprefixer');
-var webpack = require('webpack');
-var path = require('path');
-
 module.exports = {
-    plugins: [
-        new webpack.NormalModuleReplacementPlugin(/^\.\/layout$/, 'custom-layout')
-    ],
-    resolve: {
-        alias: {
-            'custom-layout': path.resolve('.storybook/layout/index.js')
-        }
-    },
-    module: {
-        loaders: [
-            {
-                test: /(\.scss)$/,
-                loaders: ['style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]!postcss!sass?sourceMap']
+  module: {
+    rules: [
+      {
+        test: /(\.scss)$/,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true,
+              localIdentName: '[name]__[local]',
+            },
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              plugins: [require('autoprefixer')],
             },
-            {
-                test: /(\.css)$/,
-                loaders: ['style', 'css']
-            }
-        ]
-    },
-    postcss: [autoprefixer]
-}
+          },
+          'sass-loader',
+        ],
+      },
+      {
+        test: /(\.css)$/,
+        use: ['style-loader', 'css-loader'],
+      },
+    ],
+  },
+};

.storybook/config.js

@@ -1,3 +1,3 @@
 language: node_js
 node_js:
-  - 5
+  - 10

.storybook/head.html

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "import/no-unresolved": "off"
+  }
+}

.storybook/webpack.config.js

@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
 import {render} from 'react-dom';
-import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';
+import {SortableContainer, SortableElement} from 'react-sortable-hoc';
+import {arrayMove} from 'array-move';
 
 const SortableItem = SortableElement(({value}) => <li>{value}</li>);
 

.travis.yml

@@ -4,10 +4,11 @@ import {
   SortableContainer,
   SortableElement,
   SortableHandle,
-  arrayMove,
 } from 'react-sortable-hoc';
+import arrayMove from 'array-move';
 
-const DragHandle = SortableHandle(() => <span>::</span>); // This can be any component you want
+// This can be any component you want
+const DragHandle = SortableHandle(() => <span>::</span>);
 
 const SortableItem = SortableElement(({value}) => {
   return (
@@ -42,7 +43,13 @@ class SortableComponent extends Component {
   render() {
     const {items} = this.state;
 
-    return <SortableList items={items} onSortEnd={this.onSortEnd} useDragHandle={true} />;
+    return (
+      <SortableList
+        items={items}
+        onSortEnd={this.onSortEnd}
+        useDragHandle={true}
+      />
+    );
   }
 }
 

babel.preprocess.sass.js

@@ -1,21 +1,29 @@
 import React, {Component} from 'react';
 import {render} from 'react-dom';
-import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';
+import {
+  SortableContainer,
+  SortableElement,
+  arrayMove,
+} from 'react-sortable-hoc';
 import Infinite from 'react-infinite';
 
 const SortableItem = SortableElement(({height, value}) => {
-  return (
-    <li style={{height}}>
-      {value}
-    </li>
-  );
+  return <li style={{height}}>{value}</li>;
 });
 
 const SortableList = SortableContainer(({items}) => {
   return (
-    <Infinite containerHeight={600} elementHeight={items.map(({height}) => height)}>
+    <Infinite
+      containerHeight={600}
+      elementHeight={items.map(({height}) => height)}
+    >
       {items.map(({value, height}, index) => (
-        <SortableItem key={`item-${index}`} index={index} value={value} height={height} />
+        <SortableItem
+          key={`item-${index}`}
+          index={index}
+          value={value}
+          height={height}
+        />
       ))}
     </Infinite>
   );

examples/.eslintrc.json

@@ -1,14 +1,14 @@
 import React, {Component} from 'react';
 import {render} from 'react-dom';
-import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';
+import {
+  SortableContainer,
+  SortableElement,
+  arrayMove,
+} from 'react-sortable-hoc';
 import {List} from 'react-virtualized';
 
 const SortableItem = SortableElement(({value}) => {
-  return (
-    <li>
-      {value}
-    </li>
-  );
+  return <li>{value}</li>;
 });
 
 class VirtualList extends Component {
@@ -17,7 +17,7 @@ class VirtualList extends Component {
 
     return (
       <List
-        ref={(instance) => {
+        ref={instance => {
           this.List = instance;
         }}
         rowHeight={({index}) => items[index].height}
@@ -70,8 +70,8 @@ class SortableComponent extends Component {
     const {items} = this.state;
 
     return (
-      <SortableList 
-        ref={(instance) => {
+      <SortableList
+        ref={instance => {
           this.SortableList = instance;
         }}
         items={items}

examples/basic.js

@@ -1,7 +1,11 @@
 import React, {Component} from 'react';
 import {render} from 'react-dom';
 import {Table, Column} from 'react-virtualized';
-import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';
+import {
+  SortableContainer,
+  SortableElement,
+  arrayMove,
+} from 'react-sortable-hoc';
 import 'react-virtualized/styles.css';
 
 const ROW_HEIGHT = 30;
@@ -16,9 +20,7 @@ const SortableHeaderRowRenderer = SortableContainer(
   ({className, columns, style}) => (
     <div className={className} role="row" style={style}>
       {React.Children.map(columns, (column, index) => (
-        <SortableHeader index={index}>
-          {column}
-        </SortableHeader>
+        <SortableHeader index={index}>{column}</SortableHeader>
       ))}
     </div>
   )
@@ -47,7 +49,7 @@ class TableWithSortableColumns extends Component {
     return (
       <Table
         width={COL_WIDTH * rows.length}
-        height={HEADER_ROW_HEIGHT + (ROW_HEIGHT * rows.length)}
+        height={HEADER_ROW_HEIGHT + ROW_HEIGHT * rows.length}
         headerHeight={ROW_HEIGHT}
         rowHeight={ROW_HEIGHT}
         rowCount={rows.length}
@@ -62,11 +64,7 @@ class TableWithSortableColumns extends Component {
         )}
       >
         {cols.map(col => (
-          <Column
-            {...col}
-            key={col.dataKey}
-            width={COL_WIDTH}
-          />
+          <Column {...col} key={col.dataKey} width={COL_WIDTH} />
         ))}
       </Table>
     );