chore(types): add Flow typing 🔥 ⚡ 🐸 (#151)

.babelrc

@@ -15,48 +15,38 @@
         }
       }
     ],
-    "@babel/react"
+    "@babel/react",
+    "@babel/flow"
   ],
   "env": {
+    "development": {
+      "plugins": [
+        ["styled-components", {
+          "displayName": true,
+          "minify": true,
+          "pure": true,
+          "ssr": false
+        }],
+        "@babel/plugin-transform-react-jsx-source",
+        ["@babel/plugin-transform-runtime", {
+          "useESModules": true
+        }]
+      ]
+    },
     "test": {
       "presets": [
         "@babel/env",
-        "@babel/react"
-      ]
-    },
-    "cjs": {
-      "plugins": [
-        "@babel/plugin-proposal-class-properties",
-        "@babel/plugin-proposal-export-namespace-from",
-        "@babel/plugin-transform-modules-commonjs",
-        "@babel/plugin-transform-runtime",
-        [
-          "transform-react-remove-prop-types",
-          {
-            "mode": "wrap"
-          }
-        ],
-        [
-          "styled-components",
-          {
-            "displayName": false,
-            "minify": false,
-            "pure": true,
-            "ssr": true
-          }
-        ]
+        "@babel/react",
+        "@babel/flow"
       ]
     },
     "esm": {
       "plugins": [
         "@babel/plugin-proposal-class-properties",
         "@babel/plugin-proposal-export-namespace-from",
-        [
-          "@babel/plugin-transform-runtime",
-          {
-            "useESModules": true
-          }
-        ],
+        ["@babel/plugin-transform-runtime", {
+          "useESModules": true
+        }],
         [
           "transform-react-remove-prop-types",
           {
@@ -74,5 +64,8 @@
         ]
       ]
     }
-  }
+  },
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+  ]
 }

.eslintrc

@@ -5,11 +5,13 @@ plugins:
   - babel
   - react
   - prettier
+  - flowtype
 
 extends:
   - standard
   - plugin:react/recommended
   - plugin:prettier/recommended
+  - plugin:flowtype/recommended
 
 env:
   es6: true
@@ -19,8 +21,11 @@ globals:
   Event: true
 
 settings:
+  flowtype:
+    onlyFilesWithFlowAnnotation: true
   react:
-    version: 16.4.2
+    version: 16.5.2
+    flowVersion: 0.83.0
 
 rules:
   react/jsx-no-bind: warn
@@ -95,3 +100,19 @@ rules:
     - warn
   prettier/prettier:
     - error
+  flowtype/delimiter-dangle:
+    - error
+    - always-multiline
+  flowtype/no-weak-types:
+    - warn
+  flowtype/semi:
+    - error
+    - never
+  flowtype/type-id-match:
+    - warn
+    - ^([A-Z][a-z0-9]*)+Type$
+  flowtype/sort-keys:
+    - error
+    - asc
+    - caseSensitive: false
+      natural: true

.flowconfig

@@ -0,0 +1,17 @@
+[ignore]
+
+[include]
+
+[libs]
+
+[lints]
+
+[options]
+
+[strict]
+unclear-type
+unsafe-getters-setters
+untyped-import
+untyped-type-import
+sketchy-null
+sketchy-number

.huskyrc

@@ -1,5 +1,5 @@
 ---
 hooks:
   commit-msg: commitlint -E HUSKY_GIT_PARAMS
-  pre-commit: npm run ci:test && npm run lint:js && npm run lint:css
-  pre-push: npm run ci:test && npm run lint:js && npm run lint:css
+  pre-commit: npm run flow:check && npm run ci:test && npm run lint:js && npm run lint:css
+  pre-push: npm run flow:check && npm run ci:test && npm run lint:js && npm run lint:css

.npmignore

@@ -19,6 +19,7 @@ coverage/
 node_modules/
 src/
 utils/
+storybook-static/
 
 __fixtures__
 __snapshots__

.storybook/config.js

@@ -14,7 +14,11 @@ addDecorator((story, context) =>
   })(story)(context),
 )
 
-const colors = Object.keys(palette).map((x) => ({ name: x, value: palette[x] }))
+const colors = Object.keys(palette).map((x) => ({
+  name: x,
+  value: palette[x],
+  default: x === 'gray0',
+}))
 
 addDecorator(withBackgrounds(colors))
 

flow-typed/npm/@storybook/addon-actions_v3.x.x.js

@@ -0,0 +1,12 @@
+// flow-typed signature: 2f5b0f18c5b5b31b01f63163429685c7
+// flow-typed version: 5edd39ab2e/@storybook/addon-actions_v3.x.x/flow_>=v0.25.x
+
+declare module '@storybook/addon-actions' {
+  declare type Action = (name: string) => (...args: Array<any>) => void;
+  declare type DecorateFn = (args: Array<any>) => Array<any>;
+
+  declare module.exports: {
+    action: Action,
+    decorateAction(args: Array<DecorateFn>): Action;
+  };
+}

flow-typed/npm/@storybook/react_v3.x.x.js

@@ -0,0 +1,44 @@
+// flow-typed signature: 1aeadf523ef2d96985697463dd71c89d
+// flow-typed version: 35108faf5b/@storybook/react_v3.x.x/flow_>=v0.72.x
+
+type NodeModule = typeof module;
+
+declare module '@storybook/react' {
+  declare type Context = { kind: string, story: string };
+  declare type Renderable = React$Element<*>;
+  declare type RenderCallback = (
+    context: Context
+  ) => Renderable | Array<Renderable>;
+  declare type RenderFunction = () => Renderable | Array<Renderable>;
+
+  declare type StoryDecorator = (
+    story: RenderFunction,
+    context: Context
+  ) => Renderable | null;
+
+  declare interface Story {
+    +kind: string;
+    add(storyName: string, callback: RenderCallback): Story;
+    addDecorator(decorator: StoryDecorator): Story;
+  }
+
+  declare interface StoryObject {
+    name: string;
+    render: RenderFunction;
+  }
+
+  declare interface StoryBucket {
+    kind: string;
+    filename: string;
+    stories: Array<StoryObject>;
+  }
+
+  declare function addDecorator(decorator: StoryDecorator): void;
+  declare function configure(fn: () => void, module: NodeModule): void;
+  declare function setAddon(addon: Object): void;
+  declare function storiesOf(name: string, module: NodeModule): Story;
+  declare function storiesOf<T>(name: string, module: NodeModule): Story & T;
+  declare function forceReRender(): void;
+
+  declare function getStorybook(): Array<StoryBucket>;
+}

flow-typed/npm/camelcase_v5.x.x.js

@@ -0,0 +1,9 @@
+// flow-typed signature: b7185ff11f80859485b8105d9313195e
+// flow-typed version: 563901ec25/camelcase_v5.x.x/flow_>=v0.35.x
+
+declare module "camelcase" {
+  declare module.exports: (
+    input: string | string[],
+    options?: { pascalCase?: boolean }
+  ) => string;
+}

flow-typed/npm/enzyme_v3.x.x.js

@@ -0,0 +1,129 @@
+// flow-typed signature: e50486ad88c5bbfcdfde9fef4fc4c5d1
+// flow-typed version: ab187b275b/enzyme_v3.x.x/flow_>=v0.53.x
+
+import * as React from "react";
+
+declare module "enzyme" {
+  declare type PredicateFunction<T: Wrapper> = (
+    wrapper: T,
+    index: number
+  ) => boolean;
+  declare type NodeOrNodes = React.Node | Array<React.Node>;
+  declare type EnzymeSelector = string | Class<React.Component<*, *>> | Object;
+
+  // CheerioWrapper is a type alias for an actual cheerio instance
+  // TODO: Reference correct type from cheerio's type declarations
+  declare type CheerioWrapper = any;
+
+  declare class Wrapper {
+    find(selector: EnzymeSelector): this,
+    findWhere(predicate: PredicateFunction<this>): this,
+    filter(selector: EnzymeSelector): this,
+    filterWhere(predicate: PredicateFunction<this>): this,
+    hostNodes(): this,
+    contains(nodeOrNodes: NodeOrNodes): boolean,
+    containsMatchingElement(node: React.Node): boolean,
+    containsAllMatchingElements(nodes: NodeOrNodes): boolean,
+    containsAnyMatchingElements(nodes: NodeOrNodes): boolean,
+    dive(option?: { context?: Object }): this,
+    exists(): boolean,
+    isEmptyRender(): boolean,
+    matchesElement(node: React.Node): boolean,
+    hasClass(className: string): boolean,
+    is(selector: EnzymeSelector): boolean,
+    isEmpty(): boolean,
+    not(selector: EnzymeSelector): this,
+    children(selector?: EnzymeSelector): this,
+    childAt(index: number): this,
+    parents(selector?: EnzymeSelector): this,
+    parent(): this,
+    closest(selector: EnzymeSelector): this,
+    render(): CheerioWrapper,
+    unmount(): this,
+    text(): string,
+    html(): string,
+    get(index: number): React.Node,
+    getDOMNode(): HTMLElement | HTMLInputElement,
+    at(index: number): this,
+    first(): this,
+    last(): this,
+    state(key?: string): any,
+    context(key?: string): any,
+    props(): Object,
+    prop(key: string): any,
+    key(): string,
+    simulate(event: string, ...args: Array<any>): this,
+    slice(begin?: number, end?: number): this,
+    setState(state: {}, callback?: Function): this,
+    setProps(props: {}): this,
+    setContext(context: Object): this,
+    instance(): React.Component<*, *>,
+    update(): this,
+    debug(options?: Object): string,
+    type(): string | Function | null,
+    name(): string,
+    forEach(fn: (node: this, index: number) => mixed): this,
+    map<T>(fn: (node: this, index: number) => T): Array<T>,
+    reduce<T>(
+      fn: (value: T, node: this, index: number) => T,
+      initialValue?: T
+    ): Array<T>,
+    reduceRight<T>(
+      fn: (value: T, node: this, index: number) => T,
+      initialValue?: T
+    ): Array<T>,
+    some(selector: EnzymeSelector): boolean,
+    someWhere(predicate: PredicateFunction<this>): boolean,
+    every(selector: EnzymeSelector): boolean,
+    everyWhere(predicate: PredicateFunction<this>): boolean,
+    length: number
+  }
+
+  declare class ReactWrapper extends Wrapper {
+    constructor(nodes: NodeOrNodes, root: any, options?: ?Object): ReactWrapper,
+    mount(): this,
+    ref(refName: string): this,
+    detach(): void
+  }
+
+  declare class ShallowWrapper extends Wrapper {
+    constructor(
+      nodes: NodeOrNodes,
+      root: any,
+      options?: ?Object
+    ): ShallowWrapper,
+    equals(node: React.Node): boolean,
+    shallow(options?: { context?: Object }): ShallowWrapper,
+    getElement(): React.Node,
+    getElements(): Array<React.Node>
+  }
+
+  declare function shallow(
+    node: React.Node,
+    options?: { context?: Object, disableLifecycleMethods?: boolean }
+  ): ShallowWrapper;
+  declare function mount(
+    node: React.Node,
+    options?: {
+      context?: Object,
+      attachTo?: HTMLElement,
+      childContextTypes?: Object
+    }
+  ): ReactWrapper;
+  declare function render(
+    node: React.Node,
+    options?: { context?: Object }
+  ): CheerioWrapper;
+
+  declare module.exports: {
+    configure(options: {
+      Adapter?: any,
+      disableLifecycleMethods?: boolean
+    }): void,
+    render: typeof render,
+    mount: typeof mount,
+    shallow: typeof shallow,
+    ShallowWrapper: typeof ShallowWrapper,
+    ReactWrapper: typeof ReactWrapper
+  };
+}

flow-typed/npm/flow-bin_v0.x.x.js

@@ -0,0 +1,6 @@
+// flow-typed signature: 6a5610678d4b01e13bbfbbc62bdaf583
+// flow-typed version: 3817bc6980/flow-bin_v0.x.x/flow_>=v0.25.x
+
+declare module "flow-bin" {
+  declare module.exports: string;
+}