Fix of ESLint errors + type prop added to <Button> component

Fix for #11

Author: birdofpreyru

CHANGELOG.md

@@ -26,6 +26,8 @@
 - Also most of NPM dependencies updated to their latest versions, which might
   demand some fixes in your code.
 
+- Adds optional `type` prop to [`<Button>`](docs/button.md)
+
 ### v0.5.0
 All dependencies are force-updated to their latest versions. It might introduce
 breaking changes.

__tests__/server/renderer.jsx

@@ -40,8 +40,9 @@ const TEST_WEBPACK_CONFIG = {
   },
 };
 
-const testBuildInfo =
-  JSON.parse(fs.readFileSync(`${TEST_CONTEXT}/.build-info`));
+const testBuildInfo = JSON.parse(
+  fs.readFileSync(`${TEST_CONTEXT}/.build-info`),
+);
 
 beforeAll(() => {
   Helmet.canUseDOM = false;
@@ -84,11 +85,11 @@ async function coreTest(webpackConfig, options) {
   }
 }
 
-test('Base rendering of HTML template', () =>
-  coreTest(TEST_WEBPACK_CONFIG, {}));
+test('Base rendering of HTML template',
+  () => coreTest(TEST_WEBPACK_CONFIG, {}));
 
-test('Config overriding for injection', () =>
-  coreTest(TEST_WEBPACK_CONFIG, {
+test('Config overriding for injection',
+  () => coreTest(TEST_WEBPACK_CONFIG, {
     beforeRender: async (res, sanitizedConfig) => {
       expect(res).toEqual(TEST_HTTP_REQUEST);
       expect(sanitizedConfig).toBeInstanceOf(Object);
@@ -102,22 +103,28 @@ test('Config overriding for injection', () =>
     },
   }));
 
-test('Hemlet integration works', () =>
-  coreTest(TEST_WEBPACK_CONFIG, {
+test('Hemlet integration works',
+  () => coreTest(TEST_WEBPACK_CONFIG, {
     Application: () => (
       <div>
-        <p>Hello World!</p>
+        <p>
+          Hello World!
+        </p>
         <Helmet>
-          <title>Test Page Title</title>
+          <title>
+            Test Page Title
+          </title>
           <meta property="description" content="Test Page Description" />
         </Helmet>
-        <p>Goodbye World!</p>
+        <p>
+          Goodbye World!
+        </p>
       </div>
     ),
   }));
 
-test('Injection of additional JS scripts', () =>
-  coreTest(TEST_WEBPACK_CONFIG, {
+test('Injection of additional JS scripts',
+  () => coreTest(TEST_WEBPACK_CONFIG, {
     beforeRender: async () => ({
       extraScripts: [
         '<script>Dummy JS Sript</script>',
@@ -126,14 +133,18 @@ test('Injection of additional JS scripts', () =>
     }),
   }));
 
-test('Server-side rendering (SSR); injection of CSS chunks & Redux state', () =>
-  coreTest(TEST_WEBPACK_CONFIG, {
+test('Server-side rendering (SSR); injection of CSS chunks & Redux state',
+  () => coreTest(TEST_WEBPACK_CONFIG, {
     Application: () => (
       <Route
         component={({ staticContext }) => {
           staticContext.chunks.push('test-chunk-a');
           staticContext.chunks.push('test-chunk-b');
-          return <div>Hello Wold!</div>;
+          return (
+            <div>
+              Hello Wold!
+            </div>
+          );
         }}
       />
     ),
@@ -148,7 +159,11 @@ test('Setting of response HTTP status the server-side rendering', () => {
       <Route
         component={({ staticContext }) => {
           staticContext.status = 404; // eslint-disable-line no-param-reassign
-          return <div>404 Error Test</div>;
+          return (
+            <div>
+              404 Error Test
+            </div>
+          );
         }}
       />
     ),

__tests__/server/server.js

@@ -13,8 +13,8 @@ jest.mock('webpack', () => {
   return mock;
 });
 
-jest.mock('webpack-hot-middleware', () =>
-  jest.fn(() => (req, res, next) => next()));
+jest.mock('webpack-hot-middleware',
+  () => jest.fn(() => (req, res, next) => next()));
 
 const TEST_CONTEXT = `${__dirname}/test_data`;
 

__tests__/shared/actions/collection.js

@@ -13,8 +13,8 @@ afterAll(() => MockDate.reset());
 
 test('Exports expected actions', () => expect(actions).toMatchSnapshot());
 
-test('`addItems` payload creator', () =>
-  expect(a.addItems({ id1: 'Item 1', id2: 'Item 2' })).toMatchSnapshot());
+test('`addItems` payload creator',
+  () => expect(a.addItems({ id1: 'Item 1', id2: 'Item 2' })).toMatchSnapshot());
 
 test('`bookItems` payload creator', () => {
   expect(a.bookItems('id1')).toMatchSnapshot();
@@ -33,8 +33,9 @@ test('`freeItems` payload creator', () => {
   expect(a.freeItems(['id1', 'id2', 'id3'])).toMatchSnapshot();
 });
 
-test('`loadItemInit` payload creator', () =>
-  expect(a.loadItemInit('operation-id', 'item-id')).toMatchSnapshot());
+test('`loadItemInit` payload creator',
+  () => expect(a.loadItemInit('operation-id', 'item-id')).toMatchSnapshot());
 
-test('`loadItemDone` payload creator', () =>
-  expect(a.loadItemDone('operation-id', 'item-id', 'item')).toMatchSnapshot());
+test('`loadItemDone` payload creator', () => {
+  expect(a.loadItemDone('operation-id', 'item-id', 'item')).toMatchSnapshot();
+});

__tests__/shared/actions/index.js

@@ -4,5 +4,5 @@
 
 import actions from 'actions';
 
-test('Exports expected actions', () =>
-  expect(actions).toMatchSnapshot());
+test('Exports expected actions',
+  () => expect(actions).toMatchSnapshot());

__tests__/shared/components/Button.jsx

@@ -76,4 +76,3 @@ describe('Matches snapshots', () => {
     ));
   });
 });
-

__tests__/shared/components/GenericLink.jsx

@@ -3,13 +3,20 @@
 import GenericLink from 'components/GenericLink';
 import PT from 'prop-types';
 import React from 'react';
-import { findInDomByClass, renderDom, simulate, snapshot } from 'utils/jest';
+import {
+  findInDomByClass,
+  renderDom,
+  simulate,
+  snapshot,
+} from 'utils/jest';
 
 function Link(props) {
+  const { className, onClick } = props;
   return (
     <button
-      onClick={props.onClick}
-      className={props.className}
+      onClick={onClick}
+      className={className}
+      type="button"
     >
       {JSON.stringify(props)}
     </button>

__tests__/shared/components/ScalableRect.jsx

@@ -3,7 +3,11 @@ import React from 'react';
 import { snapshot } from 'utils/jest';
 
 test('Snapshots match', () => {
-  snapshot(<ScalableRect>CONTENT</ScalableRect>);
+  snapshot((
+    <ScalableRect>
+      CONTENT
+    </ScalableRect>
+  ));
   snapshot((
     <ScalableRect
       className="CLASS_NAME"

__tests__/shared/components/__snapshots__/Button.jsx.snap

@@ -5,6 +5,7 @@ exports[`Matches snapshots when active 1`] = `
   className="BUTTON_CLASS ACTIVE_CLASS REGULAR_CLASS"
   onClick={[Function]}
   onMouseDown={null}
+  type="button"
 >
   BUTTON
 </button>
@@ -15,6 +16,7 @@ exports[`Matches snapshots when active 2`] = `
   className="BUTTON_CLASS ACTIVE_CLASS"
   onClick={[Function]}
   onMouseDown={null}
+  type="button"
 >
   BUTTON
 </button>

__tests__/shared/components/__snapshots__/GenericLink.jsx.snap

@@ -4,6 +4,7 @@ exports[`Matches snapshots in a minimalistic example 1`] = `
 <button
   className={null}
   onClick={[Function]}
+  type="button"
 >
   {"to":"SOME/TEST/URL","className":null,"onMouseDown":null,"replace":false,"children":"LINK"}
 </button>

config/babel/node-ssr.js

@@ -17,8 +17,9 @@ config.plugins = config.plugins.concat([
   ['css-modules-transform', cssModulesTransformPluginOps],
 ]);
 
-const moduleResolverPluginOps
-  = config.plugins.find(x => x[0] === 'module-resolver')[1];
+const moduleResolverPluginOps = config.plugins.find(
+  x => x[0] === 'module-resolver',
+)[1];
 
 moduleResolverPluginOps.transformFunctions = [
   'resolveWeak',
@@ -41,7 +42,7 @@ switch (process.env.BABEL_ENV) {
 
 module.exports = (apt, ops = {}) => {
   const baseAssetsOutputPath = ops.baseAssetsOutputPath || '';
-  transformAssetsPluginOptions.name
-    = `${baseAssetsOutputPath}/images/[hash].[ext]`;
+  transformAssetsPluginOptions.name = `${
+    baseAssetsOutputPath}/images/[hash].[ext]`;
   return config;
 };

config/webpack/app-development.js

@@ -3,9 +3,9 @@
  */
 
 const _ = require('lodash');
-const baseFactory = require('./app-base');
 const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
+const baseFactory = require('./app-base');
 
 /**
  * Creates a new development Webpack config, and performs some auxiliary

config/webpack/app-production.js

@@ -2,10 +2,10 @@
  * Production Webpack configuration for ReactJS applications.
  */
 
-const baseFactory = require('./app-base');
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
+const baseFactory = require('./app-base');
 
 /**
  * Creates a new production Webpack config, and performs some auxiliary

config/webpack/lib-base.js

@@ -161,4 +161,3 @@ module.exports = function configFactory(ops) {
     },
   };
 };
-

config/webpack/lib-development.js

@@ -2,8 +2,8 @@
  * Development Webpack configuration for ReactJS libraries.
  */
 
-const baseFactory = require('./lib-base');
 const path = require('path');
+const baseFactory = require('./lib-base');
 
 /**
  * Creates a new Webpack config.

config/webpack/lib-production.js

@@ -2,8 +2,8 @@
  * Development Webpack configuration for ReactJS libraries.
  */
 
-const baseFactory = require('./lib-base');
 const path = require('path');
+const baseFactory = require('./lib-base');
 
 /**
  * Creates a new Webpack config.

docs/button.md

@@ -60,6 +60,8 @@ supposed to have the following fields:
 - **`to`** — *Object* or *String* — When specified, the button will
 be rendered as `<Link>` (if non-disabled), and it will point to the specified
 URL/location.
+- **`type`** &mdash; *String* &mdash; Optional. Button type. It will have
+  effect only when Button is rendered as `<button>`.
 
 ### <a name="examples">Examples</a>
 First of all, you want to define button theme, here is a good example to start from:

src/client/index.jsx

@@ -16,8 +16,18 @@ import { BrowserRouter } from 'react-router-dom';
  * @param {Object} store Optional. Redux store.
  */
 function render(Application, store) {
-  let app = <BrowserRouter><Application /></BrowserRouter>;
-  if (store) app = <Provider store={store}>{app}</Provider>;
+  let app = (
+    <BrowserRouter>
+      <Application />
+    </BrowserRouter>
+  );
+  if (store) {
+    app = (
+      <Provider store={store}>
+        {app}
+      </Provider>
+    );
+  }
   ReactDom.hydrate(app, document.getElementById('react-view'));
 }
 
@@ -43,8 +53,8 @@ export default async function Launch({
   render(getApplication(), store);
 
   if (moduleHot && applicationModulePath) {
-    moduleHot.accept(applicationModulePath, () =>
-      render(getApplication(), store));
+    moduleHot.accept(applicationModulePath,
+      () => render(getApplication(), store));
 
     /* HMR of CSS code each time webpack hot middleware updates the code. */
     /* eslint-disable no-underscore-dangle */

src/server/renderer.jsx

@@ -109,7 +109,13 @@ export default function factory(webpackConfig, options) {
           </StaticRouter>
         );
 
-        if (store) App = <Provider store={store}>{App}</Provider>;
+        if (store) {
+          App = (
+            <Provider store={store}>
+              {App}
+            </Provider>
+          );
+        }
 
         App = ReactDOM.renderToString(App);