Breaking: Migrate Annotations UI into React (#251)

.babelrc

@@ -1,16 +1,76 @@
 {
     "presets": [
-        ["es2015", { "modules": false }],
+        ["es2015", {
+            "modules": false
+        }],
         "es2016",
-        "react"
+        "react",
+        "flow"
     ],
     "plugins": [
         "transform-class-properties",
-        "transform-object-rest-spread"
+        "transform-object-rest-spread",
+        "transform-regenerator"
     ],
     "env": {
+        "dev": {
+            "presets": [
+                ["env", {
+                    "modules": false,
+                    "targets": {
+                        "browsers": ["last 1 Chrome versions", "last 1 Firefox versions"]
+                    }
+                }],
+                "stage-1",
+                "react",
+                "flow"
+            ],
+            "plugins": [
+                "flow-react-proptypes", [
+                    "react-intl",
+                    {
+                        "enforceDescriptions": true,
+                        "messagesDir": "./i18n/json"
+                    }
+                ]
+            ]
+        },
+        "production": {
+            "presets": [
+                ["env", {
+                    "modules": false
+                }],
+                "stage-1",
+                "react",
+                "flow"
+            ],
+            "plugins": [
+                [
+                    "react-intl",
+                    {
+                        "enforceDescriptions": true,
+                        "messagesDir": "./i18n/json"
+                    }
+                ]
+            ]
+        },
         "npm": {
+            "presets": [
+                ["env", {
+                    "modules": false
+                }],
+                "stage-1",
+                "react",
+                "flow"
+            ],
             "plugins": [
+                [
+                    "react-intl",
+                    {
+                        "enforceDescriptions": true,
+                        "messagesDir": "./i18n/json"
+                    }
+                ],
                 [
                     "babel-plugin-transform-require-ignore", {
                         "extensions": [".scss", ".css"]
@@ -19,8 +79,22 @@
             ]
         },
         "test": {
+            "presets": [
+                ["env", {
+                    "modules": false
+                }],
+                "stage-1",
+                "react",
+                "flow"
+            ],
             "plugins": [
-                "transform-es2015-modules-commonjs",
+                "transform-es2015-modules-commonjs", [
+                    "react-intl",
+                    {
+                        "enforceDescriptions": false,
+                        "messagesDir": "./i18n/json"
+                    }
+                ],
                 [
                     "babel-plugin-transform-require-ignore", {
                         "extensions": [".scss", ".css"]

.eslintignore

@@ -3,3 +3,5 @@ dist/*
 docs/*
 lib/*
 index.js
+flow/**
+flow-typed/**

.eslintrc

@@ -2,7 +2,10 @@
     "parser": "babel-eslint",
     "extends": [
         "airbnb",
+        "plugin:flowtype/recommended",
+        "plugin:react/recommended",
         "prettier",
+        "prettier/flowtype",
         "prettier/react"
     ],
     "env": {
@@ -31,102 +34,57 @@
         "jest": false
     },
     "rules": {
-        "quotes": [
-            "error",
-            "single"
-        ],
-        "comma-dangle": [
-            "error",
-            "never"
-        ],
-        "indent": [
-            "error",
-            4,
-            {
-                "SwitchCase": 1
+        "camelcase": ["off"],
+        "react/jsx-boolean-value": ["off"],
+        "react/no-unused-prop-types": ["off"],
+        "react/default-props-match-prop-types": ["off", {
+            "allowRequiredDefaults": true
+        }],
+        "react/sort-comp": ["off"],
+        "react/forbid-prop-types": ["off"],
+        "no-param-reassign": ["error", {
+            "props": false
+        }],
+        "react/require-default-props": ["off"],
+        "react/display-name": ["off"],
+        "quotes": ["error", "single"],
+        "comma-dangle": ["error", "never"],
+        "indent": ["error", 4, {
+            "SwitchCase": 1
+        }],
+        "import/imports-first": ["off"],
+        "jsx-quotes": ["error", "prefer-single"],
+        "max-len": ["off"],
+        "react/jsx-indent-props": ["error", 4],
+        "react/jsx-indent": ["error", 4],
+        "no-underscore-dangle": ["off"],
+        "react/jsx-filename-extension": ["off"],
+        "arrow-body-style": ["off"],
+        "class-methods-use-this": ["off"],
+        "arrow-parens": ["error", "always"],
+        "no-plusplus": ["error", {
+            "allowForLoopAfterthoughts": true
+        }],
+        "import/no-extraneous-dependencies": ["off"],
+        "import/no-webpack-loader-syntax": ["off"],
+        "valid-jsdoc": ["warn", {
+            "prefer": {
+                "returns": "return",
+                "class": "constructor"
+            },
+            "preferType": {
+                "array": "Array",
+                "function": "Function",
+                "object": "Object",
+                "Boolean": "boolean",
+                "Number": "number",
+                "String": "string"
             }
-        ],
-        "import/imports-first": [
-            "off"
-        ],
-        "jsx-quotes": [
-            "error",
-            "prefer-single"
-        ],
-        "max-len": [
-            "off"
-        ],
-        "react/jsx-indent-props": [
-            "error",
-            4
-        ],
-        "react/jsx-indent": [
-            "error",
-            4
-        ],
-        "no-underscore-dangle": [
-            "off"
-        ],
-        "react/jsx-filename-extension": [
-            "off"
-        ],
-        "arrow-body-style": [
-            "off"
-        ],
-        "class-methods-use-this": [
-            "off"
-        ],
-        "arrow-parens": [
-            "error",
-            "always"
-        ],
-        "no-plusplus": [
-            "error",
-            {
-                "allowForLoopAfterthoughts": true
-            }
-        ],
-        "import/no-extraneous-dependencies": [
-            "off"
-        ],
-        "import/no-webpack-loader-syntax": [
-            "off"
-        ],
-        "require-jsdoc": [
-            "warn",
-            {
-                "require": {
-                    "FunctionDeclaration": true,
-                    "MethodDefinition": false,
-                    "ClassDeclaration": false,
-                    "ArrowFunctionExpression": true
-                }
-            }
-        ],
-        "valid-jsdoc": [
-            "warn",
-            {
-                "prefer": {
-                    "returns": "return",
-                    "class": "constructor"
-                },
-                "preferType": {
-                    "array": "Array",
-                    "function": "Function",
-                    "object": "Object",
-                    "Boolean": "boolean",
-                    "Number": "number",
-                    "String": "string"
-                }
-            }
-        ],
-        "prefer-destructuring": [
-            "error",
-            {
-                "object": true,
-                "array": false
-            }
-        ]
+        }],
+        "prefer-destructuring": ["error", {
+            "object": true,
+            "array": false
+        }]
     },
     "settings": {
         "import/resolver": {

.flowconfig

@@ -0,0 +1,35 @@
+[ignore]
+.*/build/.*
+.*/lib/.*
+.*/functional-tests/.*
+.*/test-utils/.*
+.*/reports/.*
+.*/node_modules/babel-plugin-flow-react-proptypes.*
+.*/node_modules/conventional-changelog*
+.*/node_modules/eslint*
+.*/node_modules/jest*
+.*/node_modules/npm-shrinkwrap.*
+.*/node_modules/stylelint.*
+.*/node_modules/webpack*
+.*/node_modules/draft-js*
+.*/node_modules/findup*
+.*/node_modules/rangy*
+
+[include]
+./src
+
+[libs]
+
+[options]
+module.name_mapper.extension='scss' -> '<PROJECT_ROOT>/flow/SCSSFlowStub.js.flow'
+module.name_mapper.extension='css' -> '<PROJECT_ROOT>/flow/SCSSFlowStub.js.flow'
+module.name_mapper='react-intl-locale-data' -> '<PROJECT_ROOT>/flow/WebpackI18N.js.flow'
+module.name_mapper='box-annotations-locale-data' -> '<PROJECT_ROOT>/flow/WebpackI18N.js.flow'
+module.name_mapper='box-react-ui-locale-data' -> '<PROJECT_ROOT>/flow/WebpackI18N.js.flow'
+module.name_mapper='draft-js' -> '<PROJECT_ROOT>/flow/DraftJSFlowStub.js.flow'
+module.name_mapper='draft-js/EditorState' -> '<PROJECT_ROOT>/flow/DraftJSFlowStub.js.flow'
+module.name_mapper='rangy' -> '<PROJECT_ROOT>/flow/Rangy.js.flow'
+module.name_mapper='rangy/lib/rangy-classapplier' -> '<PROJECT_ROOT>/flow/Rangy.js.flow'
+module.name_mapper='rangy/lib/rangy-highlighter' -> '<PROJECT_ROOT>/flow/Rangy.js.flow'
+module.name_mapper='rangy/lib/rangy-selectionsaverestore' -> '<PROJECT_ROOT>/flow/Rangy.js.flow'
+suppress_comment= \\(.\\|\n\\)*\\$FlowFixMe

.stylelintrc

@@ -7,7 +7,7 @@
     "rules": {
         "indentation": 4,
         "at-rule-no-vendor-prefix": true,
-        "at-rule-no-unknown": [true, { "ignoreAtRules": ["include", "mixin"] }],
+        "at-rule-no-unknown": [true, { "ignoreAtRules": ["include", "mixin", "extend"] }],
         "media-feature-name-no-vendor-prefix": true,
         "property-no-vendor-prefix": true,
         "selector-no-vendor-prefix": true,
@@ -17,4 +17,4 @@
         "no-descending-specificity": null,
         "order/properties-alphabetical-order": [true, { "severity": "warning" }]
     }
-}
+}

.vscode/settings.json

@@ -1,14 +1,13 @@
 // Place your settings in this file to overwrite default and user settings.
 {
-    "editor.rulers": [
-        120
-    ],
-    "flow.enabled": false,
+    "typescript.validate.enable": false,
+    "typescript.format.enable": false,
+    "flow.pathToFlow": "${workspaceRoot}/node_modules/.bin/flow",
     "flow.useNPMPackagedFlow": true,
+    "flow.enabled": true,
+    "javascript.validate.enable": false,
     "prettier.eslintIntegration": true,
     "prettier.printWidth": 120,
-    "prettier.singleQuote": true,
     "prettier.tabWidth": 4,
-    "typescript.format.enable": false,
-    "typescript.validate.enable": false
+    "prettier.singleQuote": true
 }

build/TranslationsPlugin.js

@@ -0,0 +1,19 @@
+/* eslint-disable strict */
+
+'use strict';
+
+const path = require('path');
+const buildTranslations = require('box-react-ui/lib/build-utils/buildTranslations');
+
+const i18n = path.resolve('i18n'); // Where the .properties files are dumped
+const jsonDir = path.join(i18n, 'json'); // Where the react-intl plugin dumps json
+
+function TranslationsPlugin() {}
+TranslationsPlugin.prototype.buildTranslations = () => {
+    buildTranslations(i18n, jsonDir);
+};
+TranslationsPlugin.prototype.apply = function apply(compiler) {
+    compiler.plugin('done', this.buildTranslations);
+};
+
+module.exports = TranslationsPlugin;

build/build_locale.js

@@ -0,0 +1,20 @@
+const { execSync } = require('child_process');
+
+/**
+ * Build a single locale
+ *
+ * @param {string} locale - locale to build
+ * @param {*} callback - callback from worker-farm master process
+ * @return {void}
+ */
+module.exports = (locale, callback) => {
+    try {
+        console.log(`Building ${locale}`);
+        // build assets for a single locale
+        execSync(`time LANGUAGE=${locale} yarn run build-prod`);
+        callback();
+    } catch (error) {
+        console.error(`Error: Failed to build ${locale}`);
+        callback(true);
+    }
+};

build/enzyme-adapter.js

@@ -0,0 +1,7 @@
+import 'core-js/es6/map';
+import 'core-js/es6/set';
+import 'raf/polyfill';
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });