Adding prettier

.storybook/addons.js

@@ -1,3 +1,3 @@
-import '@storybook/addon-options/register';
-import '@storybook/addon-storysource/register';
-import '@storybook/addon-viewport/register';
+import "@storybook/addon-options/register";
+import "@storybook/addon-storysource/register";
+import "@storybook/addon-viewport/register";

.storybook/config.js

@@ -1,31 +1,33 @@
-import React from 'react'
-import {addDecorator, configure} from '@storybook/react'
-import {withOptions} from '@storybook/addon-options';
-import {configureViewport, INITIAL_VIEWPORTS,withViewport} from '@storybook/addon-viewport';
+import React from "react";
+import { addDecorator, configure } from "@storybook/react";
+import { withOptions } from "@storybook/addon-options";
+import {
+  configureViewport,
+  INITIAL_VIEWPORTS,
+  withViewport
+} from "@storybook/addon-viewport";
 
-const req = require.context('../packages', true, /.stories.js$/);
+const req = require.context("../packages", true, /.stories.js$/);
 
 function loadStories() {
-    console.log('Load Stories', req.keys())
-    req.keys().forEach(filename => req(filename));
+  console.log("Load Stories", req.keys());
+  req.keys().forEach(filename => req(filename));
 }
 
 configureViewport({
-    ...INITIAL_VIEWPORTS
-})
-
+  ...INITIAL_VIEWPORTS
+});
 
 addDecorator(
-    withOptions({
-        name: 'Centrifuge Axis',
-        url: 'https://axis.centrifuge.io',
-        sortStoriesByKind: true,
-        hierarchySeparator: /\//,
-        hierarchyRootSeparator: /\|/
-    })
+  withOptions({
+    name: "Centrifuge Axis",
+    url: "https://axis.centrifuge.io",
+    sortStoriesByKind: true,
+    hierarchySeparator: /\//,
+    hierarchyRootSeparator: /\|/
+  })
 );
 
-
-addDecorator(withViewport())
+addDecorator(withViewport());
 
 configure(loadStories, module);

.storybook/webpack.config.js

@@ -1,39 +1,39 @@
 module.exports = (baseConfig, env, config) => {
-    // Find Babel Loader
-    const babelRules = config.module.rules.filter(rule => {
-        let isBabelLoader = false;
+  // Find Babel Loader
+  const babelRules = config.module.rules.filter(rule => {
+    let isBabelLoader = false;
 
-        if (rule.loader && rule.loader.includes('babel-loader')) {
-            isBabelLoader = true;
-        }
+    if (rule.loader && rule.loader.includes("babel-loader")) {
+      isBabelLoader = true;
+    }
 
-        if (rule.use) {
-            rule.use.forEach(use => {
-                if (typeof use === 'string' && use.includes('babel-loader')) {
-                    isBabelLoader = true;
-                } else if (
-                    typeof use === 'object' &&
-                    use.loader &&
-                    use.loader.includes('babel-loader')
-                ) {
-                    isBabelLoader = true;
-                }
-            });
+    if (rule.use) {
+      rule.use.forEach(use => {
+        if (typeof use === "string" && use.includes("babel-loader")) {
+          isBabelLoader = true;
+        } else if (
+          typeof use === "object" &&
+          use.loader &&
+          use.loader.includes("babel-loader")
+        ) {
+          isBabelLoader = true;
         }
+      });
+    }
 
-        return isBabelLoader;
-    });
+    return isBabelLoader;
+  });
 
-    babelRules.forEach(rule => {
-        rule.include = /../;
-        rule.exclude = /node_modules/;
-    });
+  babelRules.forEach(rule => {
+    rule.include = /../;
+    rule.exclude = /node_modules/;
+  });
 
-    config.module.rules.push({
-        test: /\.stories\.js?$/,
-        loaders: [require.resolve('@storybook/addon-storysource/loader')],
-        enforce: 'pre',
-    });
+  config.module.rules.push({
+    test: /\.stories\.js?$/,
+    loaders: [require.resolve("@storybook/addon-storysource/loader")],
+    enforce: "pre"
+  });
 
-    return config;
+  return config;
 };

README.md

@@ -1,2 +1,5 @@
 # axis
+
+[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
+
 Single source of truth used to build user interfaces for Centrifuge

package.json

@@ -19,7 +19,8 @@
     "build-storybook": "build-storybook",
     "publish": "lerna publish --skip-git --skip-npm",
     "precommit": "npm test",
-    "postinstall": "npm run bootstrap"
+    "postinstall": "npm run bootstrap",
+    "format": "prettier --write \"./**/*.js\""
   },
   "devDependencies": {
     "@babel/cli": "^7.2.3",

packages/modal/__tests__/modal.test.js

@@ -1,5 +1,5 @@
-import modal from '../src/modal';
+import modal from "../src/modal";
 
-describe('modal', () => {
-    it('needs tests');
+describe("modal", () => {
+  it("needs tests");
 });

packages/modal/src/Modal.js

@@ -1,34 +1,31 @@
-import React from 'react';
-import {Box, Button, Heading, Layer} from "grommet";
-import {Close} from "styled-icons/material";
+import React from "react";
+import { Box, Button, Heading, Layer } from "grommet";
+import { Close } from "styled-icons/material";
 
-export const Modal = (props) => {
+export const Modal = props => {
+  return (
+    <Layer
+      position="center"
+      modal
+      onClickOutside={props.onClose}
+      onEsc={props.onClose}
+    >
+      <Box fill="vertical" width={props.size} pad="medium">
+        <Box
+          flex={false}
+          direction="row"
+          justify={props.title ? "between" : "end"}
+        >
+          {props.title && (
+            <Heading level={2} margin="none">
+              {props.title}
+            </Heading>
+          )}
+          {props.onClose && <Button icon={<Close />} onClick={props.onClose} />}
+        </Box>
 
-  return <Layer
-    position="center"
-    modal
-    onClickOutside={props.onClose}
-    onEsc={props.onClose}
-  >
-    <Box fill="vertical"
-         width={props.size}
-         pad="medium">
-      <Box flex={false} direction="row" justify={props.title ? 'between' : 'end'}>
-        {
-          props.title && <Heading level={2} margin="none">
-            {props.title}
-          </Heading>
-        }
-        {
-          props.onClose && <Button icon={<Close/>} onClick={props.onClose}/>
-        }
+        {props.children}
       </Box>
-
-      {props.children}
-    </Box>
-
-  </Layer>
-
-}
-
-
+    </Layer>
+  );
+};