Fix project formatting (#62)

Fix project formatting
pierpo · Oct 6, 2019 · 4a5f0e3 · 4a5f0e3
2 parents 6e077cc + 94c0bbc
commit 4a5f0e3
Show file tree

Hide file tree

Showing 13 changed files with 145 additions and 200 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -8,7 +8,7 @@
   "extends": [
     "standard",
     "standard-react",
-    "prettier",
+    "plugin:prettier/recommended",
     "plugin:flowtype/recommended"
   ],
   "parser": "babel-eslint",
@@ -28,5 +28,7 @@
     "beforeEach": true,
     "window": true
   },
-  "rules": {}
+  "rules": {
+    "prettier/prettier": "error"
+  }
 }
diff --git a/.prettierrc b/.prettierrc
@@ -2,5 +2,6 @@
   "trailingComma": "all",
   "singleQuote": true,
   "semi": true,
+  "printWidth": 100,
   "bracketSpacing": true,
 }
diff --git a/example/FirstExample.js b/example/FirstExample.js
@@ -17,11 +17,13 @@ const FirstExample = () => {
         <div style={rootStyle}>
           <ArcherElement
             id="root"
-            relations={[{
-              targetId: 'element2',
-              targetAnchor: 'top',
-              sourceAnchor: 'bottom',
-            }]}
+            relations={[
+              {
+                targetId: 'element2',
+                targetAnchor: 'top',
+                sourceAnchor: 'bottom',
+              },
+            ]}
           >
             <div style={boxStyle}>Root</div>
           </ArcherElement>
@@ -30,13 +32,15 @@ const FirstExample = () => {
         <div style={rowStyle}>
           <ArcherElement
             id="element2"
-            relations={[{
-              targetId: 'element3',
-              targetAnchor: 'left',
-              sourceAnchor: 'right',
-              style: { strokeColor: 'blue', strokeWidth: 1 },
-              label: <div style={{ marginTop: '-20px' }}>Arrow 2</div>,
-            }]}
+            relations={[
+              {
+                targetId: 'element3',
+                targetAnchor: 'left',
+                sourceAnchor: 'right',
+                style: { strokeColor: 'blue', strokeWidth: 1 },
+                label: <div style={{ marginTop: '-20px' }}>Arrow 2</div>,
+              },
+            ]}
           >
             <div style={boxStyle}>Element 2</div>
           </ArcherElement>
@@ -47,12 +51,14 @@ const FirstExample = () => {
 
           <ArcherElement
             id="element4"
-            relations={[{
-              targetId: 'root',
-              targetAnchor: 'right',
-              sourceAnchor: 'left',
-              label: 'Arrow 3',
-            }]}
+            relations={[
+              {
+                targetId: 'root',
+                targetAnchor: 'right',
+                sourceAnchor: 'left',
+                label: 'Arrow 3',
+              },
+            ]}
           >
             <div style={boxStyle}>Element 4</div>
           </ArcherElement>

diff --git a/example/SecondExample.js b/example/SecondExample.js
@@ -30,17 +30,14 @@ class SecondExample extends React.Component {
           <div>Add elements</div>
           <button
             data-cy="add-element"
-            onClick={() =>
-              this.setState({ nbElements: this.state.nbElements + 1 })
-            }
+            onClick={() => this.setState({ nbElements: this.state.nbElements + 1 })}
           >
             +
           </button>
           <button
             onClick={() =>
               this.setState({
-                nbElements:
-                  this.state.nbElements > 1 ? this.state.nbElements - 1 : 0,
+                nbElements: this.state.nbElements > 1 ? this.state.nbElements - 1 : 0,
               })
             }
           >

diff --git a/example/index.js b/example/index.js
@@ -3,6 +3,4 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 
-ReactDOM.render(
-  <App />, document.getElementById('root')
-);
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "deploy:example": "webpack --config webpack.example-app.config.js && gh-pages -d example-dist",
     "pretest": "yarn lint && yarn flow",
     "prepare": "npm run build",
-    "lint": "eslint --ext .js,.jsx src/",
+    "lint": "eslint --ext .js,.jsx src/ example/",
     "test:e2e": "cypress open",
     "test:e2e:update-snapshots": "rm -rf ./cypress/snapshots",
     "test:watch": "jest ./src/ --watch",
@@ -51,22 +51,22 @@
     "cypress-image-snapshot": "3.1.1",
     "enzyme": "3.7.0",
     "enzyme-adapter-react-16": "1.6.0",
-    "eslint": "6.2.1",
-    "eslint-config-prettier": "3.1.0",
+    "eslint": "6.5.1",
+    "eslint-config-prettier": "6.4.0",
     "eslint-config-standard": "12.0.0",
     "eslint-config-standard-react": "7.0.2",
     "eslint-plugin-flowtype": "3.2.0",
     "eslint-plugin-import": "^2.9.0",
     "eslint-plugin-node": "^6.0.1",
-    "eslint-plugin-prettier": "3.0.0",
+    "eslint-plugin-prettier": "3.1.1",
     "eslint-plugin-promise": "^3.6.0",
     "eslint-plugin-react": "7.7.0",
     "eslint-plugin-standard": "^3.0.1",
     "flow-bin": "0.104.0",
     "gh-pages": "2.0.1",
     "html-webpack-plugin": "3.2.0",
     "jest": "24.9.0",
-    "prettier": "1.10.2",
+    "prettier": "1.18.2",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
     "react-test-renderer": "^16.6.3",

diff --git a/src/ArcherContainer.js b/src/ArcherContainer.js
@@ -27,7 +27,7 @@ type State = {
     [string]: HTMLElement,
   },
   sourceToTargetsMap: {
-    [string]: SourceToTargetsArrayType
+    [string]: SourceToTargetsArrayType,
   },
   observer: ResizeObserver,
   parent: ?HTMLElement,
@@ -70,9 +70,7 @@ export type ArcherContainerContextType = {
   unregisterTransitions?: string => void,
 };
 
-const ArcherContainerContext = React.createContext<ArcherContainerContextType>(
-  {},
-);
+const ArcherContainerContext = React.createContext<ArcherContainerContextType>({});
 
 export const ArcherContainerContextProvider = ArcherContainerContext.Provider;
 export const ArcherContainerContextConsumer = ArcherContainerContext.Consumer;
@@ -158,28 +156,28 @@ export class ArcherContainer extends React.Component<Props, State> {
     if (!rect) {
       return new Point(0, 0);
     }
-    const absolutePosition = computeCoordinatesFromAnchorPosition(
-      position,
-      rect,
-    );
+    const absolutePosition = computeCoordinatesFromAnchorPosition(position, rect);
 
     return absolutePosition.substract(parentCoordinates);
   };
 
-  registerTransitions = (elementId: string, newSourceToTargets: Array<SourceToTargetType>): void => {
+  registerTransitions = (
+    elementId: string,
+    newSourceToTargets: Array<SourceToTargetType>,
+  ): void => {
     this.setState((prevState: State) => ({
       sourceToTargetsMap: {
         ...prevState.sourceToTargetsMap,
-        [elementId]: newSourceToTargets
+        [elementId]: newSourceToTargets,
       },
     }));
   };
 
   unregisterTransitions = (elementId: string): void => {
-    this.setState((currentState) => {
-      const sourceToTargetsMapCopy = { ...(currentState.sourceToTargetsMap) };
+    this.setState(currentState => {
+      const sourceToTargetsMapCopy = { ...currentState.sourceToTargetsMap };
       delete sourceToTargetsMapCopy[elementId];
-      return { sourceToTargetsMap: sourceToTargetsMapCopy }
+      return { sourceToTargetsMap: sourceToTargetsMapCopy };
     });
   };
 
@@ -196,17 +194,19 @@ export class ArcherContainer extends React.Component<Props, State> {
   unregisterChild = (id: string): void => {
     this.setState((currentState: State) => {
       currentState.observer.unobserve(currentState.refs[id]);
-      const newRefs = { ...(currentState.refs) };
+      const newRefs = { ...currentState.refs };
       delete newRefs[id];
-      return { refs: newRefs }
+      return { refs: newRefs };
     });
   };
 
   getSourceToTargets = (): Array<SourceToTargetType> => {
     const { sourceToTargetsMap } = this.state;
 
     // Object.values is unavailable in IE11
-    const jaggedSourceToTargets: JaggedSourceToTargetsArrayType = Object.keys(sourceToTargetsMap).map((key: string) => sourceToTargetsMap[key]);
+    const jaggedSourceToTargets: JaggedSourceToTargetsArrayType = Object.keys(
+      sourceToTargetsMap,
+    ).map((key: string) => sourceToTargetsMap[key]);
 
     // Flatten
     return [].concat.apply([], jaggedSourceToTargets);
@@ -216,17 +216,13 @@ export class ArcherContainer extends React.Component<Props, State> {
     const parentCoordinates = this.getParentCoordinates();
 
     return this.getSourceToTargets().map(({ source, target, label, style }: SourceToTargetType) => {
-      const strokeColor =
-        (style && style.strokeColor) || this.props.strokeColor;
+      const strokeColor = (style && style.strokeColor) || this.props.strokeColor;
 
-      const arrowLength =
-        (style && style.arrowLength) || this.props.arrowLength;
+      const arrowLength = (style && style.arrowLength) || this.props.arrowLength;
 
-      const strokeWidth =
-        (style && style.strokeWidth) || this.props.strokeWidth;
+      const strokeWidth = (style && style.strokeWidth) || this.props.strokeWidth;
 
-      const arrowThickness =
-        (style && style.arrowThickness) || this.props.arrowThickness;
+      const arrowThickness = (style && style.arrowThickness) || this.props.arrowThickness;
 
       const startingAnchor = source.anchor;
       const startingPoint = this.getPointCoordinatesFromAnchorPosition(
@@ -274,18 +270,13 @@ export class ArcherContainer extends React.Component<Props, State> {
    * */
   generateAllArrowMarkers = (): React$Node => {
     return this.getSourceToTargets().map(({ source, target, label, style }: SourceToTargetType) => {
+      const strokeColor = (style && style.strokeColor) || this.props.strokeColor;
 
-      const strokeColor =
-        (style && style.strokeColor) || this.props.strokeColor;
-
-      const arrowLength =
-        (style && style.arrowLength) || this.props.arrowLength;
+      const arrowLength = (style && style.arrowLength) || this.props.arrowLength;
 
-      const arrowThickness =
-        (style && style.arrowThickness) || this.props.arrowThickness;
+      const arrowThickness = (style && style.arrowThickness) || this.props.arrowThickness;
 
-      const arrowPath = `M0,0 L0,${arrowThickness} L${arrowLength -
-        1},${arrowThickness / 2} z`;
+      const arrowPath = `M0,0 L0,${arrowThickness} L${arrowLength - 1},${arrowThickness / 2} z`;
 
       return (
         <marker
@@ -321,16 +312,15 @@ export class ArcherContainer extends React.Component<Props, State> {
           unregisterChild: this.unregisterChild,
         }}
       >
-        <div
-          style={{ ...this.props.style, position: 'relative' }}
-          className={this.props.className}
-        >
+        <div style={{ ...this.props.style, position: 'relative' }} className={this.props.className}>
           <svg style={this.svgContainerStyle()}>
             <defs>{this.generateAllArrowMarkers()}</defs>
             {SvgArrows}
           </svg>
 
-          <div style={{ height: '100%' }} ref={this.storeParent}>{this.props.children}</div>
+          <div style={{ height: '100%' }} ref={this.storeParent}>
+            {this.props.children}
+          </div>
         </div>
       </ArcherContainerContextProvider>
     );

diff --git a/src/ArcherContainer.test.js b/src/ArcherContainer.test.js
@@ -70,9 +70,7 @@ describe('ArcherContainer', () => {
     const markerProps = marker.props();
 
     const expectedProps = {
-      id: `${
-        wrapper.instance().arrowMarkerUniquePrefix
-      }first-elementsecond-element`,
+      id: `${wrapper.instance().arrowMarkerUniquePrefix}first-elementsecond-element`,
       markerWidth: 10,
       markerHeight: 30,
       refX: '0',
@@ -149,17 +147,11 @@ describe('ArcherContainer', () => {
 
       const wrapper: ShallowWrapper = shallowRenderAndSetState();
 
-      expect(global.window.addEventListener).toBeCalledWith(
-        'resize',
-        expect.anything(),
-      );
+      expect(global.window.addEventListener).toBeCalledWith('resize', expect.anything());
 
       wrapper.unmount();
 
-      expect(global.window.removeEventListener).toBeCalledWith(
-        'resize',
-        expect.anything(),
-      );
+      expect(global.window.removeEventListener).toBeCalledWith('resize', expect.anything());
     });
   });
 });