[flow] add examples/create-react-app-with-flow

.eslintignore

@@ -6,8 +6,8 @@ coverage
 /next.config.js
 /docs/src/modules/utils/find.js
 /docs/export
-/flow
-/flow-typed
+flow
+flow-typed
 /packages/*/lib
 /packages/material-ui-icons/test/fixtures
 /packages/material-ui-icons/src

docs/src/modules/components/withRoot.js

@@ -84,6 +84,9 @@ const pages = [
       {
         pathname: '/guides/comparison',
       },
+      {
+        pathname: '/guides/flow',
+      },
     ],
   },
   {

docs/src/pages/getting-started/examples.md

@@ -5,6 +5,7 @@ Are you looking for an example project to get started?
 We host some example projects. You can find them in our [GitHub repository](https://github.com/callemall/material-ui) under the [`/examples`](https://github.com/callemall/material-ui/tree/v1-beta/examples) folder:
 - [Create React App](https://github.com/callemall/material-ui/tree/v1-beta/examples/create-react-app)
 - [Next.js](https://github.com/callemall/material-ui/tree/v1-beta/examples/nextjs)
+- [Create React App with Flow](https://github.com/callemall/material-ui/tree/v1-beta/examples/create-react-app-with-flow)
 
 The source code for this documentation site is also included in the repository.
 This is a slightly more complex project.

docs/src/pages/guides/flow.md

@@ -0,0 +1,16 @@
+# Flow
+
+You can add static typing to JavaScript to improve developer productivity and code quality thanks to [Flow](https://github.com/facebook/flow)
+
+## Installation in your own project
+
+Have a look at the [Create React App with Flow](https://github.com/callemall/material-ui/tree/v1-beta/examples/create-react-app-with-flow) example.
+
+1. Copy `.flowconfig`
+1. Change `module.name_mapper` to your project name
+1. Copy `flow` dir to seed your own local libdefs (in case you need any)
+1. `yarn add -D flow-bin`
+1. Decide on `enzyme` - flow is expecting it in your `package.json` because `material-ui` includes reusable `test-utils`.  If you do not want it, uncomment `L12` in the `.flowconfig`
+1. Copy `package.json` script `flow`
+1. `flow-typed install`
+1. `yarn flow`

examples/create-react-app-with-flow/.flowconfig

@@ -0,0 +1,36 @@
+[ignore]
+<PROJECT_ROOT>/build/.*
+.*/node_modules/editions
+.*/node_modules/babel-plugin-flow-react-proptypes
+.*/node_modules/babel-plugin-transform-react-remove-prop-types
+.*/node_modules/eslint-plugin-jsx-a11y
+.*/node_modules/graphql
+.*/node_modules/kefir
+.*/node_modules/react-event-listener/src
+
+; Comment this line if you do not use enzyme.
+.*/node_modules/material-ui/test-utils
+
+; flow 55
+; FIXME: we should be flow checking against jss
+.*/node_modules/jss/lib/.*\.js\.flow
+
+[include]
+
+[libs]
+# local/custom libdefs
+./flow
+;./node_modules/jss/flow-typed
+
+[options]
+esproposal.class_static_fields=enable
+esproposal.class_instance_fields=enable
+esproposal.export_star_as=enable
+esproposal.decorators=ignore
+
+unsafe.enable_getters_and_setters=true
+
+module.name_mapper='^flow-example-material-ui\/\(.*\)$' -> '<PROJECT_ROOT>/src/\1'
+
+suppress_type=$FlowFixMe
+suppress_comment= \\(.\\|\n\\)*\\$FlowFixMe

examples/create-react-app-with-flow/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+yarn.lock

examples/create-react-app-with-flow/README.md

@@ -0,0 +1,24 @@
+# Create React App example with Flow
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/callemall/material-ui):
+
+```bash
+curl https://codeload.github.com/callemall/material-ui/tar.gz/v1-beta | tar -xz --strip=2 material-ui-1-beta/examples/create-react-app-with-flow
+cd create-react-app-with-flow
+```
+
+Install it and run:
+
+```bash
+yarn install
+yarn global add flow-typed
+flow-typed install
+yarn flow
+yarn start
+```
+
+## The idea behind the example
+
+This example demonstrate how you can use [Create React App](https://github.com/facebookincubator/create-react-app) with [Flow](https://github.com/facebook/flow).

examples/create-react-app-with-flow/flow-typed/npm/enzyme_vx.x.x.js

@@ -0,0 +1,249 @@
+// flow-typed signature: aeca26121e9f8555aa262114d701f021
+// flow-typed version: <<STUB>>/enzyme_v^3.0.0/flow_v0.55.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'enzyme'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'enzyme' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'enzyme/build/configuration' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme/build/Debug' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme/build/EnzymeAdapter' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme/build/index' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme/build/mount' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme/build/ReactWrapper' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme/build/render' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme/build/RSTTraversal' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme/build/selectors' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme/build/shallow' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme/build/ShallowWrapper' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme/build/Utils' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme/build/validateAdapter' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme/mount' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme/ReactWrapper' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme/render' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme/shallow' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme/ShallowWrapper' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme/src/configuration' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme/src/Debug' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme/src/EnzymeAdapter' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme/src/index' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme/src/mount' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme/src/ReactWrapper' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme/src/render' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme/src/RSTTraversal' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme/src/selectors' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme/src/shallow' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme/src/ShallowWrapper' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme/src/Utils' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme/src/validateAdapter' {
+  declare module.exports: any;
+}
+
+declare module 'enzyme/withDom' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'enzyme/build/configuration.js' {
+  declare module.exports: $Exports<'enzyme/build/configuration'>;
+}
+declare module 'enzyme/build/Debug.js' {
+  declare module.exports: $Exports<'enzyme/build/Debug'>;
+}
+declare module 'enzyme/build/EnzymeAdapter.js' {
+  declare module.exports: $Exports<'enzyme/build/EnzymeAdapter'>;
+}
+declare module 'enzyme/build/index.js' {
+  declare module.exports: $Exports<'enzyme/build/index'>;
+}
+declare module 'enzyme/build/mount.js' {
+  declare module.exports: $Exports<'enzyme/build/mount'>;
+}
+declare module 'enzyme/build/ReactWrapper.js' {
+  declare module.exports: $Exports<'enzyme/build/ReactWrapper'>;
+}
+declare module 'enzyme/build/render.js' {
+  declare module.exports: $Exports<'enzyme/build/render'>;
+}
+declare module 'enzyme/build/RSTTraversal.js' {
+  declare module.exports: $Exports<'enzyme/build/RSTTraversal'>;
+}
+declare module 'enzyme/build/selectors.js' {
+  declare module.exports: $Exports<'enzyme/build/selectors'>;
+}
+declare module 'enzyme/build/shallow.js' {
+  declare module.exports: $Exports<'enzyme/build/shallow'>;
+}
+declare module 'enzyme/build/ShallowWrapper.js' {
+  declare module.exports: $Exports<'enzyme/build/ShallowWrapper'>;
+}
+declare module 'enzyme/build/Utils.js' {
+  declare module.exports: $Exports<'enzyme/build/Utils'>;
+}
+declare module 'enzyme/build/validateAdapter.js' {
+  declare module.exports: $Exports<'enzyme/build/validateAdapter'>;
+}
+declare module 'enzyme/mount.js' {
+  declare module.exports: $Exports<'enzyme/mount'>;
+}
+declare module 'enzyme/ReactWrapper.js' {
+  declare module.exports: $Exports<'enzyme/ReactWrapper'>;
+}
+declare module 'enzyme/render.js' {
+  declare module.exports: $Exports<'enzyme/render'>;
+}
+declare module 'enzyme/shallow.js' {
+  declare module.exports: $Exports<'enzyme/shallow'>;
+}
+declare module 'enzyme/ShallowWrapper.js' {
+  declare module.exports: $Exports<'enzyme/ShallowWrapper'>;
+}
+declare module 'enzyme/src/configuration.js' {
+  declare module.exports: $Exports<'enzyme/src/configuration'>;
+}
+declare module 'enzyme/src/Debug.js' {
+  declare module.exports: $Exports<'enzyme/src/Debug'>;
+}
+declare module 'enzyme/src/EnzymeAdapter.js' {
+  declare module.exports: $Exports<'enzyme/src/EnzymeAdapter'>;
+}
+declare module 'enzyme/src/index.js' {
+  declare module.exports: $Exports<'enzyme/src/index'>;
+}
+declare module 'enzyme/src/mount.js' {
+  declare module.exports: $Exports<'enzyme/src/mount'>;
+}
+declare module 'enzyme/src/ReactWrapper.js' {
+  declare module.exports: $Exports<'enzyme/src/ReactWrapper'>;
+}
+declare module 'enzyme/src/render.js' {
+  declare module.exports: $Exports<'enzyme/src/render'>;
+}
+declare module 'enzyme/src/RSTTraversal.js' {
+  declare module.exports: $Exports<'enzyme/src/RSTTraversal'>;
+}
+declare module 'enzyme/src/selectors.js' {
+  declare module.exports: $Exports<'enzyme/src/selectors'>;
+}
+declare module 'enzyme/src/shallow.js' {
+  declare module.exports: $Exports<'enzyme/src/shallow'>;
+}
+declare module 'enzyme/src/ShallowWrapper.js' {
+  declare module.exports: $Exports<'enzyme/src/ShallowWrapper'>;
+}
+declare module 'enzyme/src/Utils.js' {
+  declare module.exports: $Exports<'enzyme/src/Utils'>;
+}
+declare module 'enzyme/src/validateAdapter.js' {
+  declare module.exports: $Exports<'enzyme/src/validateAdapter'>;
+}
+declare module 'enzyme/withDom.js' {
+  declare module.exports: $Exports<'enzyme/withDom'>;
+}

examples/create-react-app-with-flow/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;
+}