Add Flow for static type checking (#127)

.babelrc

@@ -1,25 +1,21 @@
 {
-  "plugins": [
-    [
-      "transform-react-remove-prop-types",
-      {
-        "mode": "unsafe-wrap",
-        "ignoreFilenames": ["node_modules"]
-      }
-    ]
-  ],
   "presets": [
     [
       "@babel/preset-env",
       {
         "modules": false
       }
     ],
-    "@babel/preset-react"
+    "@babel/preset-react",
+    "@babel/preset-flow"
   ],
   "env": {
     "test": {
-      "presets": ["@babel/preset-env", "@babel/preset-react"]
+      "presets": [
+        "@babel/preset-env",
+        "@babel/preset-react",
+        "@babel/preset-flow"
+      ]
     }
   }
 }

.eslintrc.js

@@ -1,8 +1,23 @@
 module.exports = {
+  parser: "babel-eslint",
   extends: [
     "plugin:@thibaudcolas/eslint-plugin-cookbook/recommended",
     "plugin:compat/recommended",
+    "plugin:flowtype/recommended",
   ],
+  plugins: ["flowtype"],
+  rules: {
+    "flowtype/space-after-type-colon": [0],
+    "flowtype/generic-spacing": [0],
+    "@thibaudcolas/cookbook/react/require-default-props": [
+      "error",
+      { forbidDefaultForRequired: false },
+    ],
+    "@thibaudcolas/cookbook/react/default-props-match-prop-types": [
+      "error",
+      { allowRequiredDefaults: true },
+    ],
+  },
   settings: {
     polyfills: ["promises"],
   },

.flowconfig

@@ -0,0 +1,20 @@
+[ignore]
+# .*/node_modules/draft-js/lib/DraftEditorContents.react.js.flow
+.*/node_modules/draft-js/lib/ContentBlockNode.js.flow
+.*/node_modules/draft-js/lib/ContentBlock.js.flow
+.*/node_modules/draft-js/lib/DraftEditorLeaf.react.js.flow
+.*/node_modules/draft-js/lib/DraftEditorDragHandler.js.flow
+.*/node_modules/draft-js/lib/DraftEditor.react.js.flow
+# .*/node_modules/config-chain
+suppress_comment= \\(.\\|\n\\)*\\$FlowFixMe
+
+[include]
+
+[lints]
+all=error
+sketchy-null-string=off
+
+[options]
+module.name_mapper='.*\(.scss\)' -> 'empty/object'
+
+[strict]

.githooks/pre-commit

@@ -24,6 +24,8 @@ SNAPSHOT_STAGED=$(grep .snap$ <<< "$STAGED" || true)
 HTML_STAGED=$(grep .html$ <<< "$STAGED" || true)
 YAML_STAGED=$(grep -e '.yml$' -e '.yaml$' <<< "$STAGED" || true)
 YAML_FULLY_STAGED=$(grep -e '.yml$' -e '.yaml$' <<< "$FULLY_STAGED" || true)
+HTML_STAGED=$(grep .html$ <<< "$STAGED" || true)
+HTML_FULLY_STAGED=$(grep .html$ <<< "$FULLY_STAGED" || true)
 
 # Uncomment, and add more variables to the list, for debugging help.
 # tr ' ' '\n' <<< "STAGED $STAGED PATCH_STAGED $PATCH_STAGED FULLY_STAGED $FULLY_STAGED JS_STAGED $JS_STAGED JS_FULLY_STAGED $JS_FULLY_STAGED SNAPSHOT_STAGED $SNAPSHOT_STAGED"

.githooks/pre-commit.5.prettier.sh

@@ -9,7 +9,7 @@ fi
 
 if [ -n "$JS_STAGED" ];
 then
-    npx prettier --list-different $JS_STAGED
+  npx prettier --check $JS_STAGED
 fi
 
 if [ -n "$SCSS_FULLY_STAGED" ];
@@ -20,7 +20,7 @@ fi
 
 if [ -n "$SCSS_STAGED" ];
 then
-    npx prettier --list-different $SCSS_STAGED
+  npx prettier --check $SCSS_STAGED
 fi
 
 if [ -n "$CSS_FULLY_STAGED" ];
@@ -31,7 +31,7 @@ fi
 
 if [ -n "$CSS_STAGED" ];
 then
-    npx prettier --list-different $CSS_STAGED
+  npx prettier --check $CSS_STAGED
 fi
 
 if [ -n "$MD_FULLY_STAGED" ];
@@ -42,7 +42,7 @@ fi
 
 if [ -n "$MD_STAGED" ];
 then
-  npx prettier --list-different $MD_STAGED
+  npx prettier --check $MD_STAGED
 fi
 
 if [ -n "$JSON_FULLY_STAGED" ];
@@ -53,7 +53,7 @@ fi
 
 if [ -n "$JSON_STAGED" ];
 then
-  npx prettier --list-different $JSON_STAGED
+  npx prettier --check $JSON_STAGED
 fi
 
 if [ -n "$YAML_FULLY_STAGED" ];
@@ -64,5 +64,16 @@ fi
 
 if [ -n "$YAML_STAGED" ];
 then
-  npx prettier --list-different $YAML_STAGED
+  npx prettier --check $YAML_STAGED
+fi
+
+if [ -n "$HTML_FULLY_STAGED" ];
+then
+  npx prettier --write $HTML_FULLY_STAGED
+  git add $HTML_FULLY_STAGED
+fi
+
+if [ -n "$HTML_STAGED" ];
+then
+  npx prettier --check $HTML_STAGED
 fi

.githooks/pre-commit.6.lint.sh

@@ -7,5 +7,12 @@ fi
 
 if [ -n "$SCSS_STAGED" ];
 then
-    npx stylelint $SCSS_STAGED
+  npx stylelint $SCSS_STAGED
+fi
+
+FLOW_STAGED=$(grep -e '.flowconfig$' <<< "$STAGED" || true)
+
+if [ -n "$JS_STAGED" ] || [ -n "$FLOW_STAGED" ];
+then
+  npx flow
 fi

.githooks/pre-commit.8.test.sh

@@ -2,6 +2,5 @@
 
 if [ -n "$JS_STAGED" ] || [ -n "$SNAPSHOT_STAGED" ];
 then
-    npx flow
-    npm run test:coverage -s
+  npm run test:coverage -s
 fi

.githooks/pre-commit.9.build.sh

@@ -2,8 +2,8 @@
 
 if [ -n "$JS_STAGED" ] || [ -n "$SCSS_STAGED" ] || [ -n "$HTML_STAGED" ];
 then
-    npm run dist -s
-    npm run test:integration -s
-    npm run test:performance -s
-    npm run report:size -s
+  npm run dist -s
+  npm run test:integration -s
+  npm run test:performance -s
+  npm run report:size -s
 fi

.github/CONTRIBUTING.md

@@ -47,6 +47,8 @@ nvm use
 npm run start
 # Runs linting.
 npm run lint
+# Start a Flow server for type errors.
+npx flow
 # Re-formats all of the files in the project (with Prettier).
 npm run format
 # Run tests in a watcher.

.prettierignore

@@ -4,5 +4,5 @@ coverage/
 dist/
 
 webpack-stats.json
-public/*.html
+public/webpack-stats.html
 public/storybook

.travis.yml

@@ -27,9 +27,7 @@ env:
   global:
     # Permissions: public_repo
     # travis encrypt --org DANGER_GITHUB_API_TOKEN=<value>
-    - secure:
-        "LYb6EEDscuvM3WOCv/pdo3UtdWIdlgzYzo1gXz1T+zMQ+dYLg4wthWrQToBE+Ewon6J0+lA1rdAk3vhmYqObRZcCc6Z8sLNGooxwufAYmeMet0IKwmOqUJhKbVcmxUdhlmo8ksFhGm0A3s3MVnmEy1OO7no0scS1CWPI/SX2KuwMTTYCnoundsvUsbNRFROJXtn4Ra1Ibdzg+iEAt+ROejSRV+Mdd0w0ggRd07v0R+fcje0oEMMD6w4w0AFQha3f+DNpVxVX9FYVS2lLJeKfSeTHWg6GJY+tuzPAmHvDBxBN9w3K2uj8iBcnkD7tEU0yYFCw5gE8r0BTn+0P9EpDQUQilR6BZ84gpbpFl7xoxEef9k7hqWUqTX390cVEl6x0n3FFDO7dl1ZrF/Lavd6K1zMp4swGJEa56c+UNCxymNAfofyNzYDJp/okdvbl0ptz2/riMYjB8dE20B2e/xlspvYE4Icp+LyohEQJQ1+3Hdt7c+3p21qFRIfwWnd7Rpff2awCO37G+CHBwcCCp3GlRLRbtkIdFfKu7/ApHGdF8/1B7Gmae0BD8c/mDCk57pdRn6TvbLekkB/YrpsX+IhWDH0+tgl74V4RYPju80h7FIZMYqOhNOuAtw15SRbIFXCKMeSLuNYYMj7at18Gy7YI699n7aV7PFqY87vxGAWvp7w="
+    - secure: "LYb6EEDscuvM3WOCv/pdo3UtdWIdlgzYzo1gXz1T+zMQ+dYLg4wthWrQToBE+Ewon6J0+lA1rdAk3vhmYqObRZcCc6Z8sLNGooxwufAYmeMet0IKwmOqUJhKbVcmxUdhlmo8ksFhGm0A3s3MVnmEy1OO7no0scS1CWPI/SX2KuwMTTYCnoundsvUsbNRFROJXtn4Ra1Ibdzg+iEAt+ROejSRV+Mdd0w0ggRd07v0R+fcje0oEMMD6w4w0AFQha3f+DNpVxVX9FYVS2lLJeKfSeTHWg6GJY+tuzPAmHvDBxBN9w3K2uj8iBcnkD7tEU0yYFCw5gE8r0BTn+0P9EpDQUQilR6BZ84gpbpFl7xoxEef9k7hqWUqTX390cVEl6x0n3FFDO7dl1ZrF/Lavd6K1zMp4swGJEa56c+UNCxymNAfofyNzYDJp/okdvbl0ptz2/riMYjB8dE20B2e/xlspvYE4Icp+LyohEQJQ1+3Hdt7c+3p21qFRIfwWnd7Rpff2awCO37G+CHBwcCCp3GlRLRbtkIdFfKu7/ApHGdF8/1B7Gmae0BD8c/mDCk57pdRn6TvbLekkB/YrpsX+IhWDH0+tgl74V4RYPju80h7FIZMYqOhNOuAtw15SRbIFXCKMeSLuNYYMj7at18Gy7YI699n7aV7PFqY87vxGAWvp7w="
     # Permissions: public_repo
     # travis encrypt --org PAGES_GITHUB_API_TOKEN=<value>
-    - secure:
-        "k6h4/xH4iF2dn/CCdLk1xkW1T+ZmtdylMZE4WvaAZ9KwLzz7+5V/ra26df6DFZrqk7wRMHWxWwJa5hRMJfA1wkC5x1/HuDY1KmuEhe75q8edBl1+t+22bI+ESgsRFEh+8KARApRTrJZ06wmZAhreele7rfpV/gVAUyrHz0bkE28oGWVc2PBie7Ygcmz3gHHvYeqGDBWTmoDwADQNgycTgQkUuodM6A2vccOafOhRaguBxizZiIhmJSv0bsViw3QbmpDMC3wenuSjxHs4rKK+N1wv98n7H+6djx8NG//qJdodwUJtD2GXUbTBwPZ+LLMDWJQV2rCpah5b9le75XXm1H1AwDqH32tj8UJENRcNYtRF2rYQOpBDVaYOW6/cMOalY3kl980ACCWpqFPgKNzEBC7z6KXp1BxO1ucciUh3KZ3SY9dpXll+KUm9VRUdkplRuSqc8wDBUmlFn1loMmn17kd4BVLAnB6cd3PpNHbEYYPCH52BRruYHb39gNmJsFvBo9VW03NU/quBxxlC+iqZ7pRgALSGHQgN9UwGpmxGVal5WKXJtBWMijopMD5qktHCHX1mERQBYlVRRTPxz9RZNB/zHBpfptAgKySeEgHWSf4TvaMmC552hGZ0doJ/sqkB8U98ZQ/dVXNTnrXfGEQwynbflVetznXnpMP0VX1hyHo="
+    - secure: "k6h4/xH4iF2dn/CCdLk1xkW1T+ZmtdylMZE4WvaAZ9KwLzz7+5V/ra26df6DFZrqk7wRMHWxWwJa5hRMJfA1wkC5x1/HuDY1KmuEhe75q8edBl1+t+22bI+ESgsRFEh+8KARApRTrJZ06wmZAhreele7rfpV/gVAUyrHz0bkE28oGWVc2PBie7Ygcmz3gHHvYeqGDBWTmoDwADQNgycTgQkUuodM6A2vccOafOhRaguBxizZiIhmJSv0bsViw3QbmpDMC3wenuSjxHs4rKK+N1wv98n7H+6djx8NG//qJdodwUJtD2GXUbTBwPZ+LLMDWJQV2rCpah5b9le75XXm1H1AwDqH32tj8UJENRcNYtRF2rYQOpBDVaYOW6/cMOalY3kl980ACCWpqFPgKNzEBC7z6KXp1BxO1ucciUh3KZ3SY9dpXll+KUm9VRUdkplRuSqc8wDBUmlFn1loMmn17kd4BVLAnB6cd3PpNHbEYYPCH52BRruYHb39gNmJsFvBo9VW03NU/quBxxlC+iqZ7pRgALSGHQgN9UwGpmxGVal5WKXJtBWMijopMD5qktHCHX1mERQBYlVRRTPxz9RZNB/zHBpfptAgKySeEgHWSf4TvaMmC552hGZ0doJ/sqkB8U98ZQ/dVXNTnrXfGEQwynbflVetznXnpMP0VX1hyHo="

CHANGELOG.md

@@ -17,7 +17,13 @@
 
 ### Changed
 
-- Update [`draftjs-filters`](https://github.com/thibaudcolas/draftjs-filters) dependency to v2.2.1 ([#179](https://github.com/springload/draftail/issues/179)).
+- Update [`draftjs-filters`](https://github.com/thibaudcolas/draftjs-filters) dependency ([#179](https://github.com/springload/draftail/issues/179)).
+- Update [`draftjs-conductor`](https://github.com/thibaudcolas/draftjs-conductor) dependency.
+
+### Removed
+
+- Remove all [`PropTypes`](https://www.npmjs.com/package/prop-types). The project is now typed with [Flow](https://flow.org/) ([#127](https://github.com/springload/draftail/issues/127), [#178](https://github.com/springload/draftail/pull/178)).
+- Remove peerDependency on `prop-types` ([#127](https://github.com/springload/draftail/issues/127), [#178](https://github.com/springload/draftail/pull/178)).
 
 ## [[v1.0.0]](https://github.com/springload/draftail/releases/tag/v1.0.0)
 

README.md

@@ -19,7 +19,7 @@ Here are important features worth highlighting:
 - Common text styles: Bold, italic, and many more.
 - API to build custom controls for links, images, and more.
 
-> This project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html), and measures performance and [code coverage](https://coveralls.io/github/springload/draftail). We also try to follow accessibility best practices (tested with [aXe](https://www.axe-core.org/)) – please [get in touch](https://github.com/springload/draftail/issues/149#issuecomment-389476151) if you can help us do better in this area.
+> This project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html), and measures performance and [code coverage](https://coveralls.io/github/springload/draftail). It uses [Flow](https://flow.org/) types. We also try to follow accessibility best practices (tested with [aXe](https://www.axe-core.org/)) – please [get in touch](https://github.com/springload/draftail/issues/149#issuecomment-389476151) if you can help us do better in this area.
 
 ## Documentation
 

docs/README.md

@@ -28,6 +28,7 @@ Here are specific parts of the code that **should always be reviewed before upgr
 - https://github.com/springload/draftail/blob/df903f86c882bd5101eb05e152e8b8a8b9a4915e/lib/api/behavior.js#L23:L26
 - https://github.com/springload/draftail/commit/88ae9adcda1929c92f065655a03c1b33fcfe6c2d
 - https://github.com/springload/draftail/commit/e05df07f8ed6c5df65c79824bbb1dcd6e8800bdd
+- Type errors silenced with `$FlowFixMe`
 
 ## Troubleshooting
 

examples/blocks/EmbedBlock.js

@@ -1,12 +1,19 @@
-import PropTypes from "prop-types";
+// @flow
 import React from "react";
+import type { ContentBlock } from "draft-js";
 
 import MediaBlock from "./MediaBlock";
+import type { BlockProps } from "./MediaBlock";
+
+type Props = {|
+  block: ContentBlock,
+  blockProps: BlockProps,
+|};
 
 /**
  * Editor block to display media and edit content.
  */
-const EmbedBlock = (props) => {
+const EmbedBlock = (props: Props) => {
   const { blockProps } = props;
   const { entity, onEditEntity, onRemoveEntity } = blockProps;
   const { url, title, thumbnail } = entity.getData();
@@ -38,10 +45,4 @@ const EmbedBlock = (props) => {
   );
 };
 
-EmbedBlock.propTypes = {
-  blockProps: PropTypes.shape({
-    entity: PropTypes.object,
-  }).isRequired,
-};
-
 export default EmbedBlock;

examples/blocks/ImageBlock.js

@@ -1,28 +1,38 @@
-import PropTypes from "prop-types";
+// @flow
 import React, { Component } from "react";
+import type { ContentBlock } from "draft-js";
 
 import MediaBlock from "./MediaBlock";
+import type { BlockProps } from "./MediaBlock";
 import { DraftUtils } from "../../lib/index";
 
+type Props = {|
+  block: ContentBlock,
+  blockProps: BlockProps,
+|};
+
 /**
  * Editor block to preview and edit images.
  */
-class ImageBlock extends Component {
-  constructor(props) {
+class ImageBlock extends Component<Props> {
+  constructor(props: Props) {
     super(props);
 
     this.changeAlt = this.changeAlt.bind(this);
   }
 
-  changeAlt(e) {
+  /* :: changeAlt: (e: Event) => void; */
+  changeAlt(e: Event) {
     const { block, blockProps } = this.props;
     const { editorState, onChange } = blockProps;
 
-    const data = {
-      alt: e.currentTarget.value,
-    };
+    if (e.currentTarget instanceof HTMLInputElement) {
+      const data = {
+        alt: e.currentTarget.value,
+      };
 
-    onChange(DraftUtils.updateBlockEntity(editorState, block, data));
+      onChange(DraftUtils.updateBlockEntity(editorState, block, data));
+    }
   }
 
   render() {
@@ -56,13 +66,4 @@ class ImageBlock extends Component {
   }
 }
 
-ImageBlock.propTypes = {
-  block: PropTypes.object.isRequired,
-  blockProps: PropTypes.shape({
-    editorState: PropTypes.object.isRequired,
-    entity: PropTypes.object,
-    onChange: PropTypes.func.isRequired,
-  }).isRequired,
-};
-
 export default ImageBlock;

examples/blocks/ImageBlock.test.js

@@ -69,11 +69,10 @@ describe("ImageBlock", () => {
       />,
     );
 
-    wrapper.find('[type="text"]').simulate("change", {
-      currentTarget: {
-        value: "new alt",
-      },
-    });
+    const currentTarget = document.createElement("input");
+    currentTarget.value = "new alt";
+
+    wrapper.find('[type="text"]').simulate("change", { currentTarget });
 
     expect(onChange).toHaveBeenCalled();
     expect(DraftUtils.updateBlockEntity).toHaveBeenCalledWith(