lint, prettier

.eslintrc.js

@@ -1,3 +1,4 @@
 module.exports = {
-  extends: 'jss',
-};
+  extends: ['jss', 'prettier', 'prettier/react'],
+  parser: 'babel-eslint'
+}

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "bracketSpacing": false,
+  "printWidth": 100
+}

package.json

@@ -72,6 +72,7 @@
     "coveralls": "^3.0.0",
     "eslint": "^5.8.0",
     "eslint-config-jss": "^5.0.1",
+    "eslint-config-prettier": "^4.2.0",
     "flow-bin": "^0.98.0",
     "nyc": "^13.1.0",
     "react": "^16.8.0",

src/create-theme-provider.js

@@ -1,9 +1,9 @@
 // @flow
 
-import React, { type Node, type Context } from "react";
-import warning from "tiny-warning";
-import PropTypes from "prop-types";
-import isObject from "./is-object";
+import React, { type Node, type Context } from 'react';
+import warning from 'tiny-warning';
+import PropTypes from 'prop-types';
+import isObject from './is-object';
 
 type ThemeFunction<Theme> = (outerTheme: Theme) => $NonMaybeType<Theme>;
 
@@ -26,19 +26,19 @@ export default function createThemeProvider<Theme>(context: Context<Theme>) {
         this.lastOuterTheme = outerTheme;
         this.lastTheme = this.props.theme;
 
-        if (typeof this.lastTheme === "function") {
+        if (typeof this.lastTheme === 'function') {
           const theme: ThemeFunction<Theme> = (this.props.theme: any);
           this.cachedTheme = theme(outerTheme);
 
           warning(
             isObject(this.cachedTheme),
-            "[ThemeProvider] Please return an object from your theme function"
+            '[ThemeProvider] Please return an object from your theme function'
           );
         } else {
           const theme: Theme = (this.props.theme: any);
           warning(
             isObject(theme),
-            "[ThemeProvider] Please make your theme prop a plain object"
+            '[ThemeProvider] Please make your theme prop a plain object'
           );
 
           this.cachedTheme = outerTheme ? { ...outerTheme, ...theme } : theme;
@@ -75,7 +75,7 @@ export default function createThemeProvider<Theme>(context: Context<Theme>) {
     }
   }
 
-  if (process.env.NODE_ENV !== "production") {
+  if (process.env.NODE_ENV !== 'production') {
     ThemeProvider.propTypes = {
       // eslint-disable-next-line react/require-default-props
       children: PropTypes.node,

src/create-theme-provider.test.js

@@ -1,22 +1,22 @@
 // @flow
 
-import test from "ava";
-import React from "react";
-import sinon from "sinon";
-import TestRenderer from "react-test-renderer";
+import test from 'ava';
+import React from 'react';
+import sinon from 'sinon';
+import TestRenderer from 'react-test-renderer';
 
-import createThemeProvider from "./create-theme-provider";
+import createThemeProvider from './create-theme-provider';
 
 const Comp = () => null;
 
 test("createThemeProvider's type", t => {
   t.true(
-    typeof createThemeProvider === "function",
-    "createThemeProvider should be a function"
+    typeof createThemeProvider === 'function',
+    'createThemeProvider should be a function'
   );
 });
 
-test("should call the theme fn with the default theme", t => {
+test('should call the theme fn with the default theme', t => {
   const defaultTheme = {};
   const themeFn = sinon.spy(outerTheme => outerTheme);
   const context = React.createContext(defaultTheme);
@@ -31,7 +31,7 @@ test("should call the theme fn with the default theme", t => {
   t.true(themeFn.calledWith(defaultTheme));
 });
 
-test("should call the theme fn with the outerTheme", t => {
+test('should call the theme fn with the outerTheme', t => {
   const outerTheme: Object = {};
   const themeFn = sinon.spy(theme => theme);
   const context = React.createContext({});
@@ -48,11 +48,11 @@ test("should call the theme fn with the outerTheme", t => {
   t.true(themeFn.calledWith(outerTheme));
 });
 
-test("should merge nested themes", t => {
+test('should merge nested themes', t => {
   const context = React.createContext({});
   const ThemeProvider = createThemeProvider(context);
-  const themeA: Object = { themeA: "a" };
-  const themeB: Object = { themeB: "b" };
+  const themeA: Object = { themeA: 'a' };
+  const themeB: Object = { themeB: 'b' };
 
   const { root } = TestRenderer.create(
     <ThemeProvider theme={themeA}>
@@ -63,12 +63,12 @@ test("should merge nested themes", t => {
   );
 
   t.deepEqual(root.findByType(Comp).props.theme, {
-    themeA: "a",
-    themeB: "b"
+    themeA: 'a',
+    themeB: 'b'
   });
 });
 
-test("should not render any Consumer and Provider if no children were passed", t => {
+test('should not render any Consumer and Provider if no children were passed', t => {
   const context = React.createContext({});
   const ThemeProvider = createThemeProvider(context);
 

src/create-use-theme.js

@@ -8,7 +8,10 @@ export default function createUseTheme<Theme>(context: Context<Theme>) {
   const useTheme = () => {
     const theme = React.useContext(context);
 
-    warning(isObject(theme), '[theming] Please use useTheme only with the ThemeProvider');
+    warning(
+      isObject(theme),
+      '[theming] Please use useTheme only with the ThemeProvider'
+    );
 
     return theme;
   };

src/create-with-theme.js

@@ -10,20 +10,17 @@ export default function createWithTheme<Theme>(context: Context<Theme>) {
   return function hoc<
     InnerProps,
     InnerComponent: ComponentType<InnerProps>,
-    OuterProps: { ...InnerProps, theme?: $NonMaybeType<Theme> },
+    OuterProps: { ...InnerProps, theme?: $NonMaybeType<Theme> }
   >(Component: InnerComponent): ComponentType<OuterProps> {
     const withTheme = React.forwardRef((props, ref) => (
       <context.Consumer>
-        {(theme) => {
-          warning(isObject(theme), '[theming] Please use withTheme only with the ThemeProvider');
-
-          return (
-            <Component
-              theme={theme}
-              ref={ref}
-              {...props}
-            />
+        {theme => {
+          warning(
+            isObject(theme),
+            '[theming] Please use withTheme only with the ThemeProvider'
           );
+
+          return <Component theme={theme} ref={ref} {...props} />;
         }}
       </context.Consumer>
     ));

src/create-with-theme.test.js

@@ -23,18 +23,21 @@ class ClassComponent extends React.Component<Props> {
   }
 }
 
-test('createWithTheme\'s type', (t) => {
-  t.true(typeof createWithTheme === 'function', 'createWithTheme should be a function');
+test("createWithTheme's type", t => {
+  t.true(
+    typeof createWithTheme === 'function',
+    'createWithTheme should be a function'
+  );
 });
 
-test('createWithTheme\'s result is function on its own', (t) => {
+test("createWithTheme's result is function on its own", t => {
   const context = React.createContext({});
   const withTheme = createWithTheme(context);
 
   t.true(typeof withTheme === 'function', 'withTheme should be a function');
 });
 
-test('should pass the default value of the context', (t) => {
+test('should pass the default value of the context', t => {
   const theme = {};
   const context = React.createContext(theme);
   const WithTheme = createWithTheme(context)(FunctionalComponent);
@@ -43,74 +46,67 @@ test('should pass the default value of the context', (t) => {
   t.true(root.findByType(FunctionalComponent).props.theme === theme);
 });
 
-
-test('should pass the value of the Provider', (t) => {
+test('should pass the value of the Provider', t => {
   const theme = { test: 'test' };
   const context = React.createContext(theme);
   const WithTheme = createWithTheme(context)(FunctionalComponent);
-  const { root } = TestRenderer.create((
+  const { root } = TestRenderer.create(
     <context.Provider value={theme}>
       <WithTheme />
     </context.Provider>
-  ));
+  );
 
   t.true(root.findByType(FunctionalComponent).props.theme === theme);
 });
 
-test('should allow overriding the prop from the outer props', (t) => {
+test('should allow overriding the prop from the outer props', t => {
   const otherTheme = {};
   const context = React.createContext<{}>({});
   const WithTheme = createWithTheme<{}>(context)(FunctionalComponent);
-  const { root } = TestRenderer.create((
-    <WithTheme theme={otherTheme} />
-  ));
+  const { root } = TestRenderer.create(<WithTheme theme={otherTheme} />);
 
   t.true(root.findByType(FunctionalComponent).props.theme === otherTheme);
 });
 
-test('normal refs should just work and correctly be forwarded', (t) => {
+test('normal refs should just work and correctly be forwarded', t => {
   const context = React.createContext({});
   const WithTheme = createWithTheme(context)(ClassComponent);
   let refComp = null;
-  const innerRef = (comp) => {
+  const innerRef = comp => {
     refComp = comp;
   };
 
-  TestRenderer.create((
-    <WithTheme ref={innerRef} />
-  ));
+  TestRenderer.create(<WithTheme ref={innerRef} />);
 
   t.deepEqual(refComp !== null && refComp.inner, true);
 });
 
-test('withTheme(Comp) hoists non-react static class properties', (t) => {
+test('withTheme(Comp) hoists non-react static class properties', t => {
   const context = React.createContext({});
   const withTheme = createWithTheme(context);
   const WithTheme = withTheme(ClassComponent);
 
   t.deepEqual(
     WithTheme.displayName,
     'WithTheme(foo)',
-    'withTheme(Comp) should not hoist react static properties',
+    'withTheme(Comp) should not hoist react static properties'
   );
   t.deepEqual(
     // $FlowFixMe: Need to find a better way to type the hoist-non-react-statics
     WithTheme.someSpecialStatic,
     ClassComponent.someSpecialStatic,
-    'withTheme(Comp) should hoist non-react static properties',
+    'withTheme(Comp) should hoist non-react static properties'
   );
 });
 
-test('should warn when theme isn\'t an object', (t) => {
+test("should warn when theme isn't an object", t => {
   const spy = sinon.spy(console, 'warn');
 
   const context = React.createContext<{} | void>();
   const withTheme = createWithTheme(context);
   const WithTheme = withTheme(ClassComponent);
 
-  TestRenderer.create((
-    <WithTheme />
-  ));
+  TestRenderer.create(<WithTheme />);
 
   t.deepEqual(spy.callCount, 1);