Add flowtype (#188)

* feat: Add flow skeleton

* fix: add copy flow

Author: bokuweb

package.json

@@ -45,8 +45,10 @@
     "@types/storybook__addon-actions": "3.0.3",
     "@types/storybook__react": "3.0.7",
     "babel-core": "6.26.3",
-    "cypress": "3.0.1",
     "concurrently": "3.5.1",
+    "cpx": "^1.5.0",
+    "cpy-cli": "^2.0.0",
+    "cypress": "3.0.1",
     "gh-pages": "1.2.0",
     "light-ts-loader": "1.1.2",
     "npm-run-all": "4.1.3",
@@ -67,8 +69,9 @@
   "scripts": {
     "build:prod:main": "rollup -c config/prod.js",
     "build:prod:es5": "rollup -c config/prod.es5.js",
-    "build": "npm-run-all --serial build:prod:*",
+    "build": "npm-run-all --serial build:prod:* copy:flow",
     "start": "npm run storybook",
+    "copy:flow": "cpy src/react-sortable-pane.es5.js.flow lib && cpy src/react-sortable-pane.es5.js.flow lib --rename react-sortable-pane.js.flow",
     "test": "concurrently 'npm run storybook' 'npm run cypress:test' -k -s first",
     "storybook": "start-storybook -p 6096",
     "cypress:test": "wait-on http-get://localhost:6096 && npm run cypress:run",

src/react-sortable-pane.es5.js.flow

@@ -0,0 +1,95 @@
+/* @flow */
+
+import * as React from 'react';
+
+export type Size = string | number;
+export type PaneDirection = 'horizontal' | 'vertical';
+export type PaneResizeDirection = 'x' | 'y' | 'xy';
+export type PaneMode = 'add' | 'remove';
+export type PaneKey = string | number | null;
+export type PaneSize = { width: number; height: number };
+
+export type SortablePaneProps = {
+  direction?: 'horizontal' | 'vertical',
+  margin?: number,
+  style?: { [key: string]: number | string },
+  onResize?: (e: MouseEvent | TouchEvent, key: PaneKey, dir: PaneResizeDirection, elementRef: HTMLElement, delta: PaneSize) => void,
+  onResizeStop?: (e: MouseEvent | TouchEvent, key: PaneKey, dir: PaneResizeDirection, elementRef: HTMLElement, delta: PaneSize) => void,
+  onResizeStart?: (e: SyntheticMouseEvent<HTMLElement> | SyntheticTouchEvent<HTMLElement>, key: PaneKey, dir: PaneResizeDirection) => void,
+  onDragStart?: (e: SyntheticMouseEvent<HTMLElement> | SyntheticTouchEvent<HTMLElement>, key: PaneKey, elementRef: HTMLElement) => void,
+  onDragStop?: (e: MouseEvent | TouchEvent, key: PaneKey, elementRef: HTMLElement) => void,
+  onOrderChange?: (order: string[]) => void,
+  className?: string,
+  disableEffect?: boolean,
+  isSortable?: boolean,
+  dragHandleClassName?: string,
+  defaultOrder?: string[],
+  order?: string[],
+  children: Pane[],
+};
+
+class SortablePane extends React.Component<SortablePaneProps> {
+  static defaultProps = {
+    direction: 'horizontal',
+    style: {},
+    children: [],
+    margin: 0,
+    onClick: () => {},
+    onTouchStart: () => {},
+    onResizeStart: () => {},
+    onResize: () => {},
+    onResizeStop: () => {},
+    onDragStart: () => {},
+    onDragStop: () => {},
+    onOrderChange: () => {},
+    className: '',
+    disableEffect: false,
+    isSortable: true,
+  };
+}
+
+export type IsPaneResizable = {
+    x?: boolean,
+    y?: boolean,
+    xy?: boolean,
+};
+
+export type PaneProps = {
+  defaultSize?: {
+    width?: Size,
+    height?: Size,
+  };
+  size?: {
+    width?: Size,
+    height?: Size,
+  };
+  minWidth?: Size,
+  maxWidth?: Size,
+  minHeight?: Size,
+  maxHeight?: Size,
+  style?: { [key: string]: number | string },
+  className?: string,
+  children?: string | React$Node,
+  resizable?: IsPaneResizable,
+  grid?: [number, number],
+  onSizeChange?: () => void,
+};  
+
+
+class Pane extends React.Component<PaneProps> {
+  static defaultProps: {
+    minWidth: 0,
+    minHeight: 0,
+    style: {},
+    className: '',
+    grid: [1, 1],
+    resizable: {
+      x: true,
+      y: true,
+      xy: true,
+    },
+  }
+}
+
+
+export { Pane, SortablePane };