Merge client into next (coralproject#1709)

* Merge client
* Add linting script
* Rename serve to start:development
* Move error harmonization and handling to network layer
* Show Comment Stream
* Added initial test

.gitignore

@@ -1,5 +1,16 @@
 node_modules
 dist
 .env
-*.js
-yarn.lock
+npm-debug.log*
+yarn-error.log
+yarn.lock
+coverage
+
+.idea/
+.docz
+*.swp
+*.DS_STORE
+
+*.css.d.ts
+__generated__
+

.prettierrc.json

@@ -1,3 +1,3 @@
 {
-    "trailingComma": "es5"
+  "trailingComma": "es5"
 }

config/env.js

@@ -0,0 +1,93 @@
+"use strict";
+
+const fs = require("fs");
+const path = require("path");
+const paths = require("./paths");
+
+// Make sure that including paths.js after env.js will read .env variables.
+delete require.cache[require.resolve("./paths")];
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  throw new Error(
+    "The NODE_ENV environment variable is required but was not specified."
+  );
+}
+
+// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
+var dotenvFiles = [
+  `${paths.dotenv}.${NODE_ENV}.local`,
+  `${paths.dotenv}.${NODE_ENV}`,
+  // Don't include `.env.local` for `test` environment
+  // since normally you expect tests to produce the same
+  // results for everyone
+  NODE_ENV !== "test" && `${paths.dotenv}.local`,
+  paths.dotenv,
+].filter(Boolean);
+
+// Load environment variables from .env* files. Suppress warnings using silent
+// if this file is missing. dotenv will never modify any environment variables
+// that have already been set.  Variable expansion is supported in .env files.
+// https://github.com/motdotla/dotenv
+// https://github.com/motdotla/dotenv-expand
+dotenvFiles.forEach(dotenvFile => {
+  if (fs.existsSync(dotenvFile)) {
+    require("dotenv-expand")(
+      require("dotenv").config({
+        path: dotenvFile,
+      })
+    );
+  }
+});
+
+// We support resolving modules according to `NODE_PATH`.
+// This lets you use absolute paths in imports inside large monorepos:
+// https://github.com/facebookincubator/create-react-app/issues/253.
+// It works similar to `NODE_PATH` in Node itself:
+// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
+// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
+// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
+// https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
+// We also resolve them to make sure all tools using them work consistently.
+const appDirectory = fs.realpathSync(process.cwd());
+process.env.NODE_PATH = (process.env.NODE_PATH || "")
+  .split(path.delimiter)
+  .filter(folder => folder && !path.isAbsolute(folder))
+  .map(folder => path.resolve(appDirectory, folder))
+  .join(path.delimiter);
+
+// Grab NODE_ENV and TALK_* environment variables and prepare them to be
+// injected into the application via DefinePlugin in Webpack configuration.
+const REACT_APP = /^TALK_/i;
+
+function getClientEnvironment(publicUrl) {
+  const raw = Object.keys(process.env)
+    .filter(key => REACT_APP.test(key))
+    .reduce(
+      (env, key) => {
+        env[key] = process.env[key];
+        return env;
+      },
+      {
+        // Useful for determining whether we’re running in production mode.
+        // Most importantly, it switches React into the correct mode.
+        NODE_ENV: process.env.NODE_ENV || "development",
+        // Useful for resolving the correct path to static assets in `public`.
+        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
+        // This should only be used as an escape hatch. Normally you would put
+        // images into the `src` and `import` them in code to get their paths.
+        PUBLIC_URL: publicUrl,
+      }
+    );
+  // Stringify all values so we can feed into Webpack DefinePlugin
+  const stringified = {
+    "process.env": Object.keys(raw).reduce((env, key) => {
+      env[key] = JSON.stringify(raw[key]);
+      return env;
+    }, {}),
+  };
+
+  return { raw, stringified };
+}
+
+module.exports = getClientEnvironment;

config/jest.config.js

@@ -0,0 +1,41 @@
+const paths = require("./paths");
+
+module.exports = {
+  rootDir: "../",
+  roots: ["<rootDir>/src", "<rootDir>/scripts"],
+  collectCoverageFrom: [
+    "src/**/*.{js,jsx,mjs,ts,tsx}"
+  ],
+  coveragePathIgnorePatterns: ["/node_modules/"],
+  setupFiles: [
+    "<rootDir>/config/polyfills.js"
+  ],
+  testMatch: [
+    "**/__tests__/**/*.{js,jsx,mjs,ts,tsx}",
+    "**/*.(spec|test).{js,jsx,mjs,ts,tsx}"
+  ],
+  testEnvironment: "node",
+  testURL: "http://localhost",
+  transform: {
+    "^.+\\.(js|jsx|mjs|ts|tsx)$": "<rootDir>/node_modules/ts-jest",
+    "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
+    "^(?!.*\\.(js|jsx|mjs|css|json|ftl)$)": "<rootDir>/config/jest/fileTransform.js"
+  },
+  transformIgnorePatterns: [
+    "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|ts|tsx)$"
+  ],
+  moduleNameMapper: {
+    "^react-native$": "react-native-web"
+  },
+  moduleFileExtensions: [
+    "web.js",
+    "js",
+    "json",
+    "web.jsx",
+    "jsx",
+    "node",
+    "mjs",
+    "ts",
+    "tsx"
+  ],
+}

config/jest/cssTransform.js

@@ -0,0 +1,14 @@
+'use strict';
+
+// This is a custom Jest transformer turning style imports into empty objects.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process() {
+    return 'module.exports = {};';
+  },
+  getCacheKey() {
+    // The output is always the same.
+    return 'cssTransform';
+  },
+};

config/jest/fileTransform.js

@@ -0,0 +1,12 @@
+'use strict';
+
+const path = require('path');
+
+// This is a custom Jest transformer turning file imports into filenames.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process(src, filename) {
+    return `module.exports = ${JSON.stringify(path.basename(filename))};`;
+  },
+};

config/nodemon/relay-stream.json

@@ -0,0 +1,8 @@
+{
+  "exec": "npm-run-all compile:relay-stream",
+  "ext": "ts,tsx,graphql",
+  "watch": [
+    "./src/core/client/stream",
+    "./src/core/**/*.graphql"
+  ]
+}

config/nodemon/server.json

@@ -0,0 +1,10 @@
+{
+  "exec": "npm run start:development",
+  "ext": "ts,graphql",
+  "watch": [
+    "./src"
+  ],
+  "ignore": [
+    "./src/client"
+  ]
+}

config/paths.js

@@ -0,0 +1,65 @@
+"use strict";
+
+// A script from `create-react-app` ejected `25.06.2018`.
+
+const path = require("path");
+const fs = require("fs");
+const url = require("url");
+
+// Make sure any symlinks in the project folder are resolved:
+// https://github.com/facebookincubator/create-react-app/issues/637
+const appDirectory = fs.realpathSync(process.cwd());
+const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
+
+const envPublicUrl = process.env.PUBLIC_URL;
+
+function ensureSlash(p, needsSlash) {
+  const hasSlash = p.endsWith("/");
+  if (hasSlash && !needsSlash) {
+    return p.substr(p, p.length - 1);
+  } else if (!hasSlash && needsSlash) {
+    return `${p}/`;
+  } else {
+    return p;
+  }
+}
+
+const getPublicUrl = appPackageJson =>
+  envPublicUrl || require(appPackageJson).homepage;
+
+// We use `PUBLIC_URL` environment variable or "homepage" field to infer
+// "public path" at which the app is served.
+// Webpack needs to know it to put the right <script> hrefs into HTML even in
+// single-page apps that may serve index.html for nested URLs like /todos/42.
+// We can't use a relative path in HTML because we don't want to load something
+// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
+function getServedPath(appPackageJson) {
+  const publicUrl = getPublicUrl(appPackageJson);
+  const servedUrl =
+    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : "/");
+  return ensureSlash(servedUrl, true);
+}
+
+// config after eject: we're in ./config/
+module.exports = {
+  dotenv: resolveApp(".env"),
+  appPostCssConfig: resolveApp("config/postcss.config.js"),
+  appJestConfig: resolveApp("config/jest.config.js"),
+  appLoaders: resolveApp("loaders"),
+  appDist: resolveApp("dist"),
+  appPublic: resolveApp("public"),
+  appPackageJson: resolveApp("package.json"),
+  appSrc: resolveApp("src"),
+  appTsconfig: resolveApp("src/core/client/tsconfig.json"),
+  appLocales: resolveApp("src/locales"),
+  appThemeVariables: resolveApp("src/core/client/ui/theme/variables.ts"),
+  testsSetup: resolveApp("src/setupTests.js"),
+  appNodeModules: resolveApp("node_modules"),
+
+  publicUrl: getPublicUrl(resolveApp("package.json")),
+  servedPath: getServedPath(resolveApp("package.json")),
+
+  appStreamHtml: resolveApp("src/core/client/stream/index.html"),
+  appStreamLocalesTemplate: resolveApp("src/core/client/stream/locales.ts"),
+  appStreamIndex: resolveApp("src/core/client/stream/index.tsx"),
+};

config/polyfills.js

@@ -0,0 +1 @@
+require("@babel/polyfill");

config/postcss.config.js

@@ -0,0 +1,32 @@
+const precss = require("precss");
+const autoprefixer = require("autoprefixer");
+const fontMagician = require("postcss-font-magician");
+const kebabCase = require("lodash/kebabCase");
+const mapKeys = require("lodash/mapKeys");
+const flat = require("flat");
+const flexbugsFixes = require("postcss-flexbugs-fixes");
+const paths = require('./paths');
+
+delete require.cache[paths.appThemeVariables];
+const variables = require(paths.appThemeVariables);
+const flatKebabVariables = mapKeys(flat(variables, {delimiter: "-"}), (_, k) => kebabCase(k));
+
+module.exports = {
+  // Necessary for external CSS imports to work
+  // https://github.com/facebookincubator/create-react-app/issues/2677
+  ident: 'postcss',
+  plugins: [
+    precss({ variables: flatKebabVariables }),
+    fontMagician(),
+    flexbugsFixes,
+    autoprefixer({
+      browsers: [
+        '>1%',
+        'last 4 versions',
+        'Firefox ESR',
+        'not ie < 9', // React doesn't support IE8 anyway
+      ],
+      flexbox: 'no-2009',
+    }),
+  ],
+};