graphen 1.9.12 → 1.10.1

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "graphen",
-  "version": "1.9.12",
+  "version": "1.10.1",
   "description": "Graphen is a small library, that keeps reusable blocks of UI and helps making application design consistent across multiple projects.",
-  "main": "src/index.js",
+  "main": "src/index.ts",
   "files": [
     "dist/**/*",
     "src/**/*",
@@ -13,16 +13,16 @@
     "build:dev": "webpack --mode=development --config webpack.dev.config.js",
     "build:prod": "webpack --mode=production --config webpack.prod.config.js",
     "build:example": "webpack --mode=production --config webpack.example.config.js",
-    "lint": "eslint --ext .js,.jsx .",
-    "lint:fix": "eslint --fix .",
+    "lint": "eslint --config .eslintrc --ext .ts,.tsx ./src",
+    "lint:fix": "eslint --fix --config .eslintrc --ext .ts,.tsx ./src",
     "csslint": "stylelint \"./**/*.scss\" --config .stylelintrc",
     "csslint:fix": "stylelint \"./**/*.scss\" --fix --config .stylelintrc",
-    "flow": "flow",
     "pretty": "prettier \"./src/**/*.{js,jsx}\" \"./example-server/**/*.{js,jsx}\" --list-different",
     "pretty:fix": "prettier --write \"./src/**/*.{js,jsx}\" \"./example-server/**/*.{js,jsx}\"",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
-    "example-run": "node ./example-server/index.js"
+    "example-run": "node ./example-server/index.js",
+    "tsc": "tsc"
   },
   "peerDependencies": {
     "classnames": "^2.2.6",
@@ -31,27 +31,34 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.11.6",
-    "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/preset-env": "^7.11.5",
-    "@babel/preset-flow": "^7.10.4",
-    "@babel/preset-react": "^7.10.4",
+    "@babel/core": "^7.13.8",
+    "@babel/eslint-parser": "^7.13.8",
+    "@babel/plugin-proposal-class-properties": "^7.12.13",
+    "@babel/plugin-proposal-optional-chaining": "^7.12.16",
+    "@babel/preset-env": "^7.12.16",
+    "@babel/preset-flow": "^7.12.13",
+    "@babel/preset-react": "^7.12.13",
+    "@babel/preset-typescript": "^7.13.0",
+    "@types/react": "^18.2.0",
+    "@typescript-eslint/eslint-plugin": "^4.15.2",
+    "@typescript-eslint/parser": "^4.16.1",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
     "classnames": "^2.2.6",
     "css-loader": "^3.6.0",
-    "cypress": "^3.8.3",
+    "cypress": "^13.6.4",
     "eslint": "^7.2.0",
-    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-airbnb-typescript": "^12.3.1",
     "eslint-config-codait": "^1.1.1",
     "eslint-config-prettier": "^8.10.0",
-    "eslint-plugin-cypress": "^2.11.1",
-    "eslint-plugin-flowtype": "^3.9.0",
-    "eslint-plugin-import": "^2.28.1",
+    "eslint-import-resolver-typescript": "^2.4.0",
+    "eslint-plugin-cypress": "^2.11.2",
+    "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jest": "^22.21.0",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "file-loader": "^5.1.0",
     "flow-bin": "^0.94.0",
     "koa": "^2.13.0",
@@ -60,7 +67,7 @@
     "lodash": "^4.17.20",
     "mini-css-extract-plugin": "^2.7.6",
     "postcss-loader": "^3.0.0",
-    "prettier": "^1.16.4",
+    "prettier": "^2.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.67.0",
@@ -70,6 +77,7 @@
     "stylelint-config-standard": "^18.2.0",
     "terser-webpack-plugin": "^5.3.9",
     "url-loader": "^3.0.0",
+    "typescript": "^4.2.0",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4"
   },

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

@@ -1,11 +1,10 @@
-// @flow
 import React from "react";
 import classNames from "classnames";
 
 type Props = {
   className?: string,
   title: string,
-  children?: React.DOM,
+  children?: React.ReactNode,
   isCollapsed?: boolean
 };
 
@@ -14,6 +13,12 @@ type State = {
 };
 
 class Accordion extends React.PureComponent<Props, State> {
+  static defaultProps = {
+    className: '',
+    children: null,
+    isCollapsed: true,
+  };
+
   constructor(props: Props) {
     super(props);
 
@@ -45,10 +50,9 @@ class Accordion extends React.PureComponent<Props, State> {
 
     return (
       <article className={accordionClasses}>
-        {/* eslint-disable jsx-a11y/no-static-element-interactions */}
+        {/* eslint-disable */}
         <header
           role="button"
-          tabIndex="0"
           className="gc-accordion__title"
           onClick={() => {
             this.handleClick();
@@ -56,7 +60,7 @@ class Accordion extends React.PureComponent<Props, State> {
         >
           {indicator} {title}
         </header>
-        {/* eslint-enable jsx-a11y/no-static-element-interactions */}
+        {/* eslint-enable */}
         <div className={contentClasses}>{children}</div>
       </article>
     );

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

@@ -1,11 +1,10 @@
-// @flow
 import React from "react";
 import classNames from "classnames";
 
 type Props = {
   className?: string,
   children: string,
-  onClick?: () => void
+  onClick?: () => void,
 };
 
 function Button(props: Props) {
@@ -14,10 +13,15 @@ function Button(props: Props) {
   const buttonClasses = classNames(className, "gc-btn");
 
   return (
-    <button onClick={onClick} className={buttonClasses}>
+    <button onClick={onClick} className={buttonClasses} type='button'>
       {children}
     </button>
   );
 }
 
+Button.defaultProps = {
+  className: '',
+  onClick: () => {},
+};
+
 export default Button;

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

@@ -1,10 +1,9 @@
-// @flow
 import React from "react";
 import classNames from "classnames";
 
 type Props = {
   className?: string,
-  children?: React$Element<any>
+  children?: React.ReactNode,
 };
 
 function Dialog(props: Props) {
@@ -14,4 +13,10 @@ function Dialog(props: Props) {
   return <div className={dialogClasses}>{children}</div>;
 }
 
+// @ts-ignore
+Dialog.defaultProps = {
+  className: '',
+  children: null,
+};
+
 export default Dialog;

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

@@ -1,27 +1,26 @@
-// @flow
 import React, { useState, useCallback } from "react";
 import * as _ from "lodash";
 import classNames from "classnames";
 
 type Props = {
-  initValue: $ReadOnly<{ value: string, label: string }>,
+  initValue: Readonly<{ value: string, label: string }>,
   label: string,
-  items: $ReadOnlyArray<{ value: string, label: string }>,
-  onChange: string => void
+  items: ReadonlyArray<{ value: string, label: string }>,
+  onChange: (arg0: string) => void,
 };
 
-export default function Dropdown(props: Props) {
+function Dropdown(props: Props) {
   const { initValue, label, items, onChange } = props;
   const [isExpanded, setIsExpanded] = useState(false);
   const [selectedItem, setSelectedItem] = useState(initValue);
   const expandMenu = useCallback(() => {
-    setIsExpanded(isShown => !isShown);
+    setIsExpanded((isShown) => !isShown);
   }, [setIsExpanded]);
   const selectItem = useCallback(
-    item => {
+    (item) => {
       onChange(item.value);
       setIsExpanded(false);
-      setSelectedItem(_.find(items, i => i.value === item.value));
+      setSelectedItem(_.find(items, (i) => i.value === item.value));
     },
     [setIsExpanded, setSelectedItem, items]
   );
@@ -33,6 +32,7 @@ export default function Dropdown(props: Props) {
       </label>
       <div className="gc-dropdown__menu">
         <button
+          type="button"
           className="gc-dropdown__btn"
           data-cy="dropdown-button"
           onClick={expandMenu}
@@ -43,11 +43,12 @@ export default function Dropdown(props: Props) {
           <div className="gc-dropdown__content">
             <ul className="gc-dropdown__list">
               {/* eslint-disable jsx-a11y/no-static-element-interactions */}
-              {_.map(items, item => {
+              {_.map(items, (item) => {
                 const dropdownItemClasses = classNames("gc-dropdown__item", {
-                  "gc-dropdown__item--first": item === items[0]
+                  "gc-dropdown__item--first": item === items[0],
                 });
                 return (
+                  /* eslint-disable react/button-has-type */
                   <li
                     data-cy="dropdown-item"
                     className={dropdownItemClasses}
@@ -56,6 +57,7 @@ export default function Dropdown(props: Props) {
                   >
                     <a className="gc-dropdown__link">{item.label}</a>
                   </li>
+                  /* eslint-enable react/button-has-type */
                 );
               })}
               {/* eslint-enable jsx-a11y/no-static-element-interactions */}
@@ -66,3 +68,5 @@ export default function Dropdown(props: Props) {
     </div>
   );
 }
+
+export default Dropdown;

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;