graphen 1.9.11 → 1.10.0

package/src/components/Icon/{index.jsx → index.tsx}

@@ -1,18 +1,17 @@
-// @flow
 import _ from "lodash";
 import React from "react";
 import classNames from "classnames";
 
 type Props = {
   type: string,
-  className: string
+  className: string,
 };
 
 const Icon = (props: Props) => {
   const { type, className } = props;
 
   const classes = classNames("gc-icon", className, {
-    [`gc-icon--${type}`]: !_.isEmpty(type)
+    [`gc-icon--${type}`]: !_.isEmpty(type),
   });
 
   return <span className={classes} />;

package/src/components/Image/{index.jsx → index.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import React from "react";
 import classNames from "classnames";
 
@@ -6,10 +5,10 @@ type Props = {
   src: string,
   className?: string,
   height?: number,
-  width?: number
+  width?: number,
 };
 
-export default function Image(props: Props) {
+function Image(props: Props) {
   const { src, height, width, className } = props;
   const classes = classNames("gc-image", className);
 
@@ -24,3 +23,13 @@ export default function Image(props: Props) {
     </object>
   );
 }
+
+// @ts-ignore
+Image.defaultProps = {
+  className: '',
+  height: 200,
+  width: 200,
+};
+
+
+export default Image;

package/src/components/Input/{index.jsx → index.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import React from "react";
 import classNames from "classnames";
 
@@ -7,7 +6,7 @@ type Props = {
   type?: string,
   label: string,
   validation?: string,
-  onChange?: Event => void
+  onChange?: React.ChangeEventHandler<HTMLInputElement>,
 };
 
 function Input(props: Props) {
@@ -15,7 +14,7 @@ function Input(props: Props) {
   const inputClasses = classNames(className, "gc-input");
   const fieldClasses = classNames("gc-input__field", {
     "gc-input__field--success": validation === "success",
-    "gc-input__field--danger": validation === "danger"
+    "gc-input__field--danger": validation === "danger",
   });
   const id = `input-${label}`;
 
@@ -29,4 +28,12 @@ function Input(props: Props) {
   );
 }
 
+// @ts-ignore
+Input.defaultProps = {
+  className: '',
+  type: '',
+  validation: undefined,
+  onChange: () => {},
+};
+
 export default Input;

package/src/components/Joystick/{index.jsx → index.tsx}

@@ -1,38 +1,33 @@
-// @flow
 import _ from "lodash";
-import React from "react";
+import React from 'react';
 import ReactDOM from "react-dom";
 
 type Props = {
   onPositionChange: (left: number, top: number) => void,
-  isEnabled: boolean
+  isEnabled: boolean,
 };
 
 type State = {
   left: number,
-  top: number
+  top: number,
 };
 
 const JOYSTICK_RADIUS = 50;
 
 class Joystick extends React.PureComponent<Props, State> {
-  static onDragOver(event: SyntheticDragEvent<HTMLDivElement>) {
+  static onDragOver(event: React.DragEvent<HTMLDivElement>) {
     event.preventDefault();
   }
 
-  static defaultProps = {
-    isEnabled: true
-  };
-
-  constructor() {
-    super();
+  constructor(props: Props) {
+    super(props);
     this.state = {
       left: JOYSTICK_RADIUS * 0.5,
-      top: JOYSTICK_RADIUS * 0.5
+      top: JOYSTICK_RADIUS * 0.5,
     };
   }
 
-  onMove(event: SyntheticDragEvent<Element>) {
+  onMove(event: React.DragEvent<HTMLDivElement>) {
     event.preventDefault();
     const { clientX, clientY } = event;
 
@@ -49,7 +44,7 @@ class Joystick extends React.PureComponent<Props, State> {
     this.move(mappedX, mappedY);
   }
 
-  onDragEnd(event: SyntheticDragEvent<Element>) {
+  onDragEnd(event: React.DragEvent<HTMLDivElement>) {
     event.preventDefault();
     this.move(JOYSTICK_RADIUS * 0.5, JOYSTICK_RADIUS * 0.5);
   }
@@ -63,7 +58,7 @@ class Joystick extends React.PureComponent<Props, State> {
     onPositionChange(left, top);
     this.setState({
       left,
-      top
+      top,
     });
   }
 
@@ -74,26 +69,29 @@ class Joystick extends React.PureComponent<Props, State> {
     const classes = `gc-joystick${isEnabled ? "" : " gc-joystick--inactive"}`;
 
     return (
-      <div className={classes} onDragOver={event => Joystick.onDragOver(event)}>
+      <div
+        className={classes}
+        onDragOver={(event) => Joystick.onDragOver(event)}
+      >
         <div
           className="gc-joystick__knob"
           style={{
             left,
-            top
+            top,
           }}
         />
         <div
           className="gc-joystick__drag"
           draggable={isEnabled}
-          onDrag={(event: SyntheticDragEvent<HTMLDivElement>) => {
+          onDrag={(event: React.DragEvent<HTMLDivElement>) => {
             this.onMove(event);
           }}
-          onDragEnd={(event: SyntheticDragEvent<HTMLDivElement>) => {
+          onDragEnd={(event: React.DragEvent<HTMLDivElement>) => {
             this.onDragEnd(event);
           }}
           style={{
             left,
-            top
+            top,
           }}
         />
       </div>

package/src/components/Link/{index.jsx → index.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import React from "react";
 import classNames from "classnames";
 import * as constants from "src/variables/constants";
@@ -6,19 +5,19 @@ import * as constants from "src/variables/constants";
 type Props = {
   link: string,
   className?: string,
-  children?: React.DOM,
-  skin?: constants.Skin
+  children?: React.ReactNode,
+  skin?: constants.Skin,
 };
 
 function Link({
   link,
   className,
   children,
-  skin = constants.SKINS.primary
+  skin = constants.SKINS.primary,
 }: Props) {
   const classes = classNames("gc-link", className, {
     "gc-link--primary": skin === constants.SKINS.primary,
-    "gc-link--default": skin === constants.SKINS.default
+    "gc-link--default": skin === constants.SKINS.default,
   });
 
   return (
@@ -28,4 +27,11 @@ function Link({
   );
 }
 
+// @ts-ignore
+Link.defaultProps = {
+  className: '',
+  children: null,
+  skin: undefined,
+};
+
 export default Link;

package/src/components/Logo/{index.jsx → index.tsx}

@@ -4,7 +4,7 @@ import classNames from "classnames";
 
 type Props = {
   className?: string,
-  onClick?: () => void
+  onClick?: () => void,
 };
 
 function Logo(props: Props) {
@@ -21,4 +21,10 @@ function Logo(props: Props) {
   /* eslint-enable jsx-a11y/no-static-element-interactions */
 }
 
+// @ts-ignore
+Logo.defaultProps = {
+  className: '',
+  onClick: () => {},
+};
+
 export default Logo;

package/src/components/Scroller/{index.jsx → index.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import _ from "lodash";
 import React from "react";
 import ReactDOM from "react-dom";
@@ -9,28 +8,28 @@ const BORDER_SIZE = 1;
 type Props = {
   onScrollChange: (value: number) => void,
   min: number,
-  max: number
+  max: number,
 };
 
 type State = {
-  value: number
+  value: number,
 };
 
 class Scroller extends React.PureComponent<Props, State> {
-  constructor() {
-    super();
+  constructor(props: Props) {
+    super(props);
     this.state = {
-      value: 0
+      value: 0,
     };
   }
 
-  onMove(event: SyntheticDragEvent<Element>) {
+  onMove(event: React.DragEvent<HTMLDivElement>) {
     event.preventDefault();
     this.scroll(event);
     return false;
   }
 
-  onDrop(event: SyntheticDragEvent<Element>) {
+  onDrop(event: React.DragEvent<HTMLDivElement>) {
     event.preventDefault();
     const { onScrollChange } = this.props;
     const { value } = this.state;
@@ -39,7 +38,7 @@ class Scroller extends React.PureComponent<Props, State> {
     return false;
   }
 
-  scroll(event: SyntheticDragEvent<Element>) {
+  scroll(event: React.DragEvent<HTMLDivElement>) {
     const { clientX } = event;
     const { min, max } = this.props;
 
@@ -60,11 +59,11 @@ class Scroller extends React.PureComponent<Props, State> {
   move(x: number, vx: number, maxWidth: number) {
     const value = _.min([
       _.max([x, 0]),
-      maxWidth - KNOB_SIZE - 2 * BORDER_SIZE
+      maxWidth - KNOB_SIZE - 2 * BORDER_SIZE,
     ]);
 
     this.setState({
-      value
+      value,
     });
   }
 
@@ -74,28 +73,28 @@ class Scroller extends React.PureComponent<Props, State> {
     return (
       <div
         className="gc-scroller"
-        onDragOver={(event: SyntheticDragEvent<HTMLDivElement>) => {
+        onDragOver={(event: React.DragEvent<HTMLDivElement>) => {
           event.preventDefault();
           return false;
         }}
-        onDrop={(event: SyntheticDragEvent<HTMLDivElement>) => {
+        onDrop={(event: React.DragEvent<HTMLDivElement>) => {
           this.onDrop(event);
         }}
       >
         <div
           className="gc-scroller__knob"
           style={{
-            left: value
+            left: value,
           }}
         />
         <div
           className="gc-scroller__drag"
           draggable="true"
-          onDrag={(event: SyntheticDragEvent<HTMLDivElement>) => {
+          onDrag={(event: React.DragEvent<HTMLDivElement>) => {
             this.onMove(event);
           }}
           style={{
-            left: value
+            left: value,
           }}
         />
       </div>

package/src/components/Tooltip/{index.jsx → index.tsx}

@@ -1,21 +1,27 @@
-// @flow
 import React from "react";
 import classNames from "classnames";
 
 type Props = {
   className?: string,
   children?: string,
-  type?: string
+  type?: string,
 };
 
 function Tooltip(props: Props) {
   const { children, className, type } = props;
   const validationClasses = classNames(className, "gc-tooltip", {
     "gc-tooltip--success": type === "success",
-    "gc-tooltip--danger": type === "danger"
+    "gc-tooltip--danger": type === "danger",
   });
 
   return <div className={validationClasses}>{children}</div>;
 }
 
+// @ts-ignore
+Tooltip.defaultProps = {
+  className: '',
+  children: null,
+  type: 'success',
+};
+
 export default Tooltip;

package/src/components/Validation/{index.jsx → index.tsx}

@@ -1,13 +1,12 @@
-// @flow
 import React from "react";
 import classNames from "classnames";
 import Tooltip from "../Tooltip";
 
 type Props = {
   className?: string,
-  children?: React$Element<any>,
+  children?: React.ReactNode,
   type?: string,
-  message?: string | null
+  message?: string | null,
 };
 
 function Validation(props: Props) {
@@ -28,4 +27,12 @@ function Validation(props: Props) {
   );
 }
 
+// @ts-ignore
+Validation.defaultProps = {
+  className: '',
+  children: null,
+  type: 'success',
+  message: null,
+};
+
 export default Validation;

package/src/{example.jsx → example.tsx}

@@ -1,4 +1,4 @@
-// @flow
+/* eslint-disable */
 import _ from "lodash";
 import React from "react";
 import { render } from "react-dom";
@@ -17,7 +17,7 @@ import {
   Tooltip,
   Logo,
   Dropdown,
-  constants
+  constants,
 } from "./index";
 
 const appContainer = document.querySelector(".js-example");
@@ -25,26 +25,26 @@ const appContainer = document.querySelector(".js-example");
 type Props = {};
 
 type State = {
-  isDialogVisible: boolean
+  isDialogVisible: boolean,
 };
 
 class ExampleApp extends React.PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
-      isDialogVisible: false
+      isDialogVisible: false,
     };
   }
 
   handleShowDialog() {
     this.setState(() => ({
-      isDialogVisible: true
+      isDialogVisible: true,
     }));
   }
 
   handleHideDialog() {
     this.setState(() => ({
-      isDialogVisible: false
+      isDialogVisible: false,
     }));
   }
 
@@ -618,7 +618,7 @@ class ExampleApp extends React.PureComponent<Props, State> {
               label="Dropdown label"
               items={[
                 { label: "Red", value: "red" },
-                { label: "Blue", value: "blue" }
+                { label: "Blue", value: "blue" },
               ]}
               onChange={_.noop}
             />
@@ -637,3 +637,4 @@ if (appContainer) {
     appContainer
   );
 }
+/* eslint-enable */

package/src/mixes/_spacing.scss

@@ -1,3 +1,11 @@
+.gm-spacing-s {
+  margin: $spacing-small;
+}
+
+.gm-spacing-m {
+  margin: $spacing-medium;
+}
+
 .gm-spacing-l {
   margin: $spacing-large;
 }
@@ -6,6 +14,14 @@
   margin: $spacing-very-large;
 }
 
+.gm-spacing-rs {
+  margin-right: $spacing-small;
+}
+
+.gm-spacing-rm {
+  margin-right: $spacing-medium;
+}
+
 .gm-spacing-rl {
   margin-right: $spacing-large;
 }
@@ -14,6 +30,14 @@
   margin-right: $spacing-very-large;
 }
 
+.gm-spacing-bs {
+  margin-bottom: $spacing-small;
+}
+
+.gm-spacing-bm {
+  margin-bottom: $spacing-medium;
+}
+
 .gm-spacing-bl {
   margin-bottom: $spacing-large;
 }
@@ -22,6 +46,14 @@
   margin-bottom: $spacing-very-large;
 }
 
+.gm-spacing-ls {
+  margin-left: $spacing-small;
+}
+
+.gm-spacing-lm {
+  margin-left: $spacing-medium;
+}
+
 .gm-spacing-ll {
   margin-left: $spacing-large;
 }
@@ -30,6 +62,14 @@
   margin-left: $spacing-very-large;
 }
 
+.gm-spacing-ts {
+  margin-top: $spacing-small;
+}
+
+.gm-spacing-tm {
+  margin-top: $spacing-medium;
+}
+
 .gm-spacing-tl {
   margin-top: $spacing-large;
 }

package/src/variables/constants.js

@@ -1,7 +1,7 @@
 // @flow
 export const SKINS = {
   primary: "primary",
-  default: "default"
+  default: "default",
 };
 
 export type Skin = $Keys<typeof SKINS>;

package/src/variables/integration/colors.spec.js

@@ -1,6 +1,6 @@
 describe("Colors", () => {
   before(() => {
-    cy.visit("localhost:3000");
+    cy.visit("http://localhost:3000");
   });
 
   it("should make a screenshot", () => {