Add prettier to precommit

.prettierrc

@@ -1,3 +1,4 @@
 {
+  "arrowParens": "avoid",
   "trailingComma": "es5"
 }

package.json

@@ -121,17 +121,20 @@
     "file-loader": "^4.0.0",
     "fork-ts-checker-webpack-plugin": "^1.3.5",
     "html-webpack-plugin": "^3.2.0",
+    "husky": "^4.2.5",
     "image-webpack-loader": "^4.6.0",
     "jest": "^24.8.0",
     "jest-styled-components": "^6.3.1",
     "jest-svg-transformer": "^1.0.0",
+    "lint-staged": "^10.2.9",
     "mini-css-extract-plugin": "^0.4.1",
     "node-fetch": "^2.6.0",
     "node-sass": "^4.14.1",
     "plop": "^2.5.3",
     "postcss": "^7.0.1",
     "postcss-loader": "^2.1.6",
     "postcss-preset-env": "^5.3.0",
+    "prettier": "^2.0.5",
     "query-string": "^6.12.1",
     "react-apollo": "^2.5.1",
     "react-docgen-typescript-loader": "^3.6.0",
@@ -163,6 +166,18 @@
   "engines": {
     "node": ">=10.0.0 <11"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged",
+      "pre-push": "npm run build"
+    }
+  },
+  "lint-staged": {
+    "*.{js,ts}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
   "scripts": {
     "test": "jest --runInBand --config .jest/config.json",
     "start": "cross-env NODE_ENV=develop webpack-dev-server --history-api-fallback --watch --port 3000 --mode development --hotOnly",

src/@next/components/atoms/Button/Button.tsx

@@ -19,7 +19,7 @@ export const Button: React.FC<IProps> = ({
   const ButtonWithTheme = color === "primary" ? S.Primary : S.Secondary;
 
   return (
-    <ButtonWithTheme  
+    <ButtonWithTheme
       data-test={testingContext}
       data-test-id={testingContextId}
       color={color}

src/@next/components/atoms/Button/stories.tsx

@@ -7,15 +7,25 @@ import { Button } from ".";
 storiesOf("@components/atoms/Button", module)
   .addParameters({ component: Button })
   .add("Primary", () => (
-    <Button fullWidth={boolean("FullWidth", false)} testingContext="testButton">Primary Button</Button>
+    <Button fullWidth={boolean("FullWidth", false)} testingContext="testButton">
+      Primary Button
+    </Button>
   ))
   .add("Secondary", () => (
-    <Button color="secondary" fullWidth={boolean("FullWidth", false)} testingContext="testButton">
+    <Button
+      color="secondary"
+      fullWidth={boolean("FullWidth", false)}
+      testingContext="testButton"
+    >
       Secondary Button
     </Button>
   ))
   .add("Size sm", () => (
-    <Button size="sm" fullWidth={boolean("FullWidth", false)} testingContext="testButton">
+    <Button
+      size="sm"
+      fullWidth={boolean("FullWidth", false)}
+      testingContext="testButton"
+    >
       Small Button
     </Button>
   ));

src/@next/components/atoms/Button/test.tsx

@@ -9,22 +9,28 @@ import * as S from "./styles";
 describe("<Button />", () => {
   it("renders children", () => {
     const text = "test";
-    const wrapper = shallow(<Button testingContext="testButton">{text}</Button>);
+    const wrapper = shallow(
+      <Button testingContext="testButton">{text}</Button>
+    );
 
     expect(wrapper.text()).toEqual(text);
   });
 
   it("simulates click events", () => {
     const onButtonClick = jest.fn();
-    const wrapper = shallow(<Button onClick={onButtonClick}  testingContext="testButton"/>);
+    const wrapper = shallow(
+      <Button onClick={onButtonClick} testingContext="testButton" />
+    );
 
     wrapper.simulate("click");
     expect(onButtonClick).toHaveBeenCalledTimes(1);
   });
 
   it("uses correct theme based on color prop", () => {
-    const PrimaryButton = mount(<Button  testingContext="testButton"/>);
-    const SecondaryButton = mount(<Button color="secondary"  testingContext="testButton"/>);
+    const PrimaryButton = mount(<Button testingContext="testButton" />);
+    const SecondaryButton = mount(
+      <Button color="secondary" testingContext="testButton" />
+    );
 
     expect(PrimaryButton).toHaveStyleRule(
       "background-color",
@@ -38,8 +44,12 @@ describe("<Button />", () => {
   });
 
   it("uses correct theme based on size prop", () => {
-    const NormalButtonText = mount(<Button size="md" testingContext="testButton"/>).find(S.Text);
-    const SmallButtonText = mount(<Button size="sm" testingContext="testButton"/>).find(S.Text);
+    const NormalButtonText = mount(
+      <Button size="md" testingContext="testButton" />
+    ).find(S.Text);
+    const SmallButtonText = mount(
+      <Button size="sm" testingContext="testButton" />
+    ).find(S.Text);
 
     expect(NormalButtonText).toHaveStyleRule(
       "font-size",

src/@next/components/atoms/Button/types.ts

@@ -23,8 +23,8 @@ export interface IProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    */
   testingContext: string;
   /**
-   * Used as marker for writing e2e tests. Use unique ID to differentiate 
-   * multiple elements in the same view from each other 
+   * Used as marker for writing e2e tests. Use unique ID to differentiate
+   * multiple elements in the same view from each other
    */
   testingContextId?: string;
 }

src/@next/components/atoms/ButtonLink/ButtonLink.tsx

@@ -12,7 +12,13 @@ export const ButtonLink: React.FC<IProps> = ({
   ...props
 }: IProps) => {
   return (
-    <S.ButtonLink data-test={testingContext} data-test-id={testingContextId} color={color} size={size} {...props}>
+    <S.ButtonLink
+      data-test={testingContext}
+      data-test-id={testingContextId}
+      color={color}
+      size={size}
+      {...props}
+    >
       {children}
     </S.ButtonLink>
   );

src/@next/components/atoms/ButtonLink/stories.tsx

@@ -7,5 +7,13 @@ import { ButtonLink } from ".";
 storiesOf("@components/atoms/ButtonLink", module)
   .addParameters({ component: ButtonLink })
   .add("Base", () => <ButtonLink testingContext="test">{TEXT}</ButtonLink>)
-  .add("Secondary", () => <ButtonLink color="secondary" testingContext="test">{TEXT}</ButtonLink>)
-  .add("Size sm", () => <ButtonLink size="sm" testingContext="test">{TEXT}</ButtonLink>);
+  .add("Secondary", () => (
+    <ButtonLink color="secondary" testingContext="test">
+      {TEXT}
+    </ButtonLink>
+  ))
+  .add("Size sm", () => (
+    <ButtonLink size="sm" testingContext="test">
+      {TEXT}
+    </ButtonLink>
+  ));

src/@next/components/atoms/ButtonLink/test.tsx

@@ -9,7 +9,11 @@ const TEXT = "Text";
 
 describe("<ButtonLink />", () => {
   const renderButtonLink = (props?: IProps) =>
-    shallow(<ButtonLink testingContext="test" {...props}>{TEXT}</ButtonLink>);
+    shallow(
+      <ButtonLink testingContext="test" {...props}>
+        {TEXT}
+      </ButtonLink>
+    );
 
   it("exists", () => {
     const buttonLink = renderButtonLink();

src/@next/components/atoms/ButtonLink/types.ts

@@ -10,8 +10,8 @@ export interface IProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    */
   testingContext: string;
   /**
-   * Used as marker for writing e2e tests. Use unique ID to differentiate 
-   * multiple elements in the same view from each other 
+   * Used as marker for writing e2e tests. Use unique ID to differentiate
+   * multiple elements in the same view from each other
    */
-  testingContextId?: string; 
+  testingContextId?: string;
 }

src/@next/components/atoms/CartHeader/stories.tsx

@@ -4,6 +4,5 @@ import React from "react";
 import { CartHeader } from ".";
 
 storiesOf("@components/atoms/CartHeader", module)
-.addParameters({ component: CartHeader })
-.add("default", () =>
-<CartHeader />);
+  .addParameters({ component: CartHeader })
+  .add("default", () => <CartHeader />);

src/@next/components/atoms/Checkbox/Checkbox.tsx

@@ -18,7 +18,7 @@ export const Checkbox: React.FC<IProps> = ({
   return (
     <S.Checkbox
       ref={ref}
-      onClick={(evt) => {
+      onClick={evt => {
         evt.preventDefault();
         onChange(evt);
         if (ref.current) {
@@ -38,7 +38,7 @@ export const Checkbox: React.FC<IProps> = ({
         <div
           ref={ref}
           tabIndex={0}
-          onKeyDown={(evt) => {
+          onKeyDown={evt => {
             if (evt.which === SPACE_KEY || evt.which === ENTER_KEY) {
               evt.preventDefault();
               onChange(evt);

src/@next/components/atoms/DemoBanner/DemoBanner.tsx

@@ -42,4 +42,4 @@ export const DemoBanner: React.FC = () => {
       </S.BorderedWrapper>
     </S.Wrapper>
   );
-};
+};

src/@next/components/atoms/DemoBanner/index.ts

@@ -1 +1 @@
-export * from "./DemoBanner";
+export * from "./DemoBanner";

src/@next/components/atoms/DemoBanner/stories.tsx

@@ -2,6 +2,6 @@ import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import { DemoBanner } from ".";
-storiesOf("@components/atoms/DemoBanner", module)
-.add("default", () =>
-<DemoBanner />);
+storiesOf("@components/atoms/DemoBanner", module).add("default", () => (
+  <DemoBanner />
+));

src/@next/components/atoms/DemoBanner/styles.ts

@@ -48,4 +48,4 @@ export const TextEmphasis = styled.span`
 export const Divider = styled.div`
   border-right: 1px solid ${props => props.theme.colors.bannerEdge};
   height: 2rem;
-`;
+`;

src/@next/components/atoms/DemoBanner/test.tsx

@@ -10,4 +10,4 @@ describe("<DemoBanner />", () => {
 
     expect(wrapper.exists()).toEqual(true);
   });
-});
+});

src/@next/components/atoms/DropdownMenu/stories.tsx

@@ -14,7 +14,14 @@ const Container = styled.div`
   justify-content: flex-end;
 `;
 const onClick = action("onClick");
-const header = <IconButton testingContext="editButton" size={19} name="edit" onClick={onClick} />;
+const header = (
+  <IconButton
+    testingContext="editButton"
+    size={19}
+    name="edit"
+    onClick={onClick}
+  />
+);
 const items = [
   { onClick, content: <span>MY ACCOUNT</span> },
   { onClick, content: <span>ORDER HISTORY</span> },

src/@next/components/atoms/DropdownMenu/test.tsx

@@ -69,10 +69,7 @@ describe("<DropdownMenu /> hoverable", () => {
     );
 
     wrapper.simulate("mouseenter");
-    wrapper
-      .find("li")
-      .first()
-      .simulate("click");
+    wrapper.find("li").first().simulate("click");
 
     expect(wrapper.find("li").length).toEqual(0);
   });
@@ -121,10 +118,7 @@ describe("<DropdownMenu /> clickable", () => {
     );
 
     wrapper.simulate("click");
-    wrapper
-      .find("li")
-      .first()
-      .simulate("click");
+    wrapper.find("li").first().simulate("click");
 
     expect(wrapper.find("li").length).toEqual(0);
   });

src/@next/components/atoms/DropdownSelect/DropdownSelect.tsx

@@ -23,9 +23,7 @@ export const DropdownSelect: React.FC<IProps> = ({
 
   const customComponents = {
     Control: () => (
-      <S.SortLine
-        onClick={() => setMenuIsOpen(!menuIsOpen)}
-      >
+      <S.SortLine onClick={() => setMenuIsOpen(!menuIsOpen)}>
         <Label>Sort by:</Label>
         <S.Value>{` ${value ? value.label : ""}`}</S.Value>
         <S.Indicator rotate={String(menuIsOpen)}>

src/@next/components/atoms/DropdownSelect/test.tsx

@@ -36,25 +36,16 @@ describe("<DropdownSelect />", () => {
   it("should open select menu on click", () => {
     const wrapper = mount(<DropdownSelect {...DEFAULT_PROPS} />);
 
-    wrapper
-      .find(S.SortLine)
-      .at(0)
-      .simulate("click");
+    wrapper.find(S.SortLine).at(0).simulate("click");
 
     expect(wrapper.find(components.Option).length).toEqual(3);
   });
 
   it("should close menu when clicking on option", () => {
     const wrapper = mount(<DropdownSelect {...DEFAULT_PROPS} />);
 
-    wrapper
-      .find(S.SortLine)
-      .at(0)
-      .simulate("click");
-    wrapper
-      .find(components.Option)
-      .at(0)
-      .simulate("click");
+    wrapper.find(S.SortLine).at(0).simulate("click");
+    wrapper.find(components.Option).at(0).simulate("click");
 
     expect(wrapper.find(components.Option).length).toEqual(0);
   });
@@ -66,14 +57,8 @@ describe("<DropdownSelect />", () => {
       <DropdownSelect {...DEFAULT_PROPS} value={DEFAULT_PROPS.options[0]} />
     );
 
-    wrapper
-      .find(S.SortLine)
-      .at(0)
-      .simulate("click");
-    wrapper
-      .find(components.Option)
-      .at(0)
-      .simulate("click");
+    wrapper.find(S.SortLine).at(0).simulate("click");
+    wrapper.find(components.Option).at(0).simulate("click");
 
     expect(wrapper.text()).toContain(DEFAULT_PROPS.options[0].label);
     expect(DEFAULT_PROPS.onChange).toHaveBeenCalledTimes(1);

src/@next/components/atoms/ErrorMessage/ErrorMessage.tsx

@@ -7,7 +7,9 @@ export const ErrorMessage: React.FC<IProps> = ({ errors }: IProps) =>
   errors && errors.length ? (
     <S.ErrorMessage data-test="errorMessage">
       {errors.map((error, index) => (
-        <S.ErrorParagraph key={index} data-test-id={index}>{error.message}</S.ErrorParagraph>
+        <S.ErrorParagraph key={index} data-test-id={index}>
+          {error.message}
+        </S.ErrorParagraph>
       ))}
     </S.ErrorMessage>
   ) : null;

src/@next/components/atoms/IconButton/IconButton.tsx

@@ -15,7 +15,12 @@ export const IconButton: React.FC<IProps> = ({
   ...props
 }: IProps) => {
   return (
-    <S.Wrapper data-test={testingContext} data-test-id={testingContextId} onClick={onClick} {...props}>
+    <S.Wrapper
+      data-test={testingContext}
+      data-test-id={testingContextId}
+      onClick={onClick}
+      {...props}
+    >
       <Icon name={name} size={size} color={color} />
     </S.Wrapper>
   );

src/@next/components/atoms/IconButton/stories.tsx

@@ -5,5 +5,9 @@ import { IconButton } from ".";
 
 storiesOf("@components/atoms/IconButton", module)
   .addParameters({ component: IconButton })
-  .add("edit icon button", () => <IconButton testingContext="test" name="edit" size={19} />)
-  .add("trash icon button", () => <IconButton testingContext="test" name="trash" size={22} />);
+  .add("edit icon button", () => (
+    <IconButton testingContext="test" name="edit" size={19} />
+  ))
+  .add("trash icon button", () => (
+    <IconButton testingContext="test" name="trash" size={22} />
+  ));