@betterview/integration-toolkit 0.1.0

package/.eslintignore

@@ -0,0 +1,8 @@
+node_modules
+submodules
+lib/**
+scripts/**
+**/*test.*
+**/*runner.*
+coverage/**
+**/TestHarness/**

package/.eslintrc.js

@@ -0,0 +1,273 @@
+/**
+ * Why are we specifying TS config in overrides?
+ *
+ * Apparently this is the preferred way to lint both JS and TS files. The base config
+ * is responsible for the JS files, and the override config is for the TS files. I'm
+ * unsure if we need to copy the base JS config into the TS overrides (e.g. ...rules), but
+ * everything seems to work in this configuration, and is all still DRY, so 🤞
+ *
+ * See:
+ * https://stackoverflow.com/questions/57597142/how-to-run-typescript-eslint-on-ts-files-and-eslint-on-js-files-in-the-same-pr
+ * https://github.com/techatpark/npm-scripts-static-ref/blob/main/.eslintrc.js
+ */
+
+const rules = {
+  'arrow-parens': ['error', 'as-needed'],
+  'brace-style': ['off', 'off'],
+  'comma-dangle': 'error',
+  complexity: 'off',
+  'constructor-super': 'error',
+  curly: 'off',
+  'eol-last': 'off',
+  eqeqeq: ['error', 'smart'],
+  'guard-for-in': 'error',
+  'id-blacklist': [
+    'error',
+    'any',
+    'Number',
+    'number',
+    'String',
+    'string',
+    'Boolean',
+    'boolean',
+    'Undefined',
+    'undefined'
+  ],
+  'id-match': 'error',
+  /**
+   * 2020-09-28 - NM - I don't understand this rule.
+   * what does this help us achieve?
+   */
+  // 'import/no-extraneous-dependencies': [
+  //   'error',
+  //   {
+  //     devDependencies: false
+  //   }
+  // ],
+  'import/no-internal-modules': 'off',
+  'jsdoc/check-alignment': 'error',
+  'jsdoc/newline-after-description': 'error',
+  'linebreak-style': 'off',
+  'max-classes-per-file': 'off',
+  'max-len': 'off',
+  'new-parens': 'off',
+  'newline-per-chained-call': 'off',
+  'no-bitwise': 'off',
+  'no-caller': 'error',
+  'no-cond-assign': 'error',
+  'no-console': ['error'],
+  'no-debugger': 'error',
+  'no-duplicate-case': 'error',
+  'no-duplicate-imports': 'error',
+  'no-empty': 'error',
+  'no-eval': 'error',
+  'no-extra-bind': 'error',
+  'no-extra-semi': 'off',
+  'no-fallthrough': 'off',
+  'no-invalid-this': 'off',
+  'no-irregular-whitespace': 'off',
+  'no-multiple-empty-lines': 'off',
+  'no-new-func': 'error',
+  'no-new-wrappers': 'error',
+  'no-redeclare': 'error',
+  'no-return-await': 'error',
+  'no-sequences': 'error',
+  'no-shadow': 'off',
+  '@typescript-eslint/no-shadow': ['error'],
+  'no-sparse-arrays': 'error',
+  'no-template-curly-in-string': 'error',
+  'no-throw-literal': 'off',
+  'no-trailing-spaces': 'off',
+  'no-undef-init': 'error',
+  'no-underscore-dangle': [
+    'error',
+    {
+      allowAfterThis: true,
+      allowAfterSuper: true,
+      allowAfterThisConstructor: true
+    }
+  ],
+  'no-unsafe-finally': 'error',
+  'no-unused-labels': 'error',
+  'no-var': 'error',
+  'object-shorthand': 'error',
+  'one-var': ['error', 'never'],
+  /**
+   * 2020-09-28 - NM - I'm not sure I like this rule.
+   * We like named functions in some cases because it can help
+   * add more context to logs. Is there a reason for this rule
+   * to exist?
+   */
+  // 'prefer-arrow/prefer-arrow-functions': 'error',
+  'prefer-const': 'error',
+  'prefer-object-spread': 'error',
+  'quote-props': 'off',
+  radix: 'error',
+  'space-before-function-paren': 'off',
+  'space-in-parens': ['off', 'never'],
+  'spaced-comment': [
+    'error',
+    'always',
+    {
+      markers: ['/']
+    }
+  ],
+  'use-isnan': 'error',
+  'valid-typeof': 'off'
+};
+
+const env = {
+  browser: true,
+  es6: true,
+  node: true
+};
+
+const plugins = ['eslint-plugin-jsdoc', 'eslint-plugin-prefer-arrow', 'eslint-plugin-import'];
+
+const parserOptions = {
+  ecmaVersion: '2018'
+};
+
+module.exports = {
+  root: true,
+  env,
+  plugins,
+  rules,
+  // necessary for optional chaining in JS: https://github.com/nuxt/eslint-config/issues/92#issuecomment-623088678
+  parser: 'babel-eslint',
+  parserOptions,
+  overrides: [
+    {
+      files: ['**/*.ts'],
+      env,
+      parser: '@typescript-eslint/parser',
+      parserOptions: {
+        ...parserOptions,
+        project: './tsconfig.eslint.json',
+        sourceType: 'module'
+      },
+      plugins: [...plugins, '@typescript-eslint', '@typescript-eslint/tslint'],
+      rules: {
+        ...rules,
+        '@typescript-eslint/prefer-optional-chain': 'warn',
+        '@typescript-eslint/adjacent-overload-signatures': 'error',
+        '@typescript-eslint/array-type': [
+          'error',
+          {
+            default: 'array'
+          }
+        ],
+        '@typescript-eslint/ban-types': [
+          'error',
+          {
+            types: {
+              Object: {
+                message: 'Avoid using the `Object` type. Did you mean `object`?'
+              },
+              Function: {
+                message: 'Avoid using the `Function` type. Prefer a specific function type, like `() => void`.'
+              },
+              // eslint-disable-next-line id-blacklist
+              Boolean: {
+                message: 'Avoid using the `Boolean` type. Did you mean `boolean`?'
+              },
+              // eslint-disable-next-line id-blacklist
+              Number: {
+                message: 'Avoid using the `Number` type. Did you mean `number`?'
+              },
+              // eslint-disable-next-line id-blacklist
+              String: {
+                message: 'Avoid using the `String` type. Did you mean `string`?'
+              },
+              Symbol: {
+                message: 'Avoid using the `Symbol` type. Did you mean `symbol`?'
+              }
+            }
+          }
+        ],
+        '@typescript-eslint/consistent-type-assertions': 'error',
+        '@typescript-eslint/dot-notation': 'error',
+        '@typescript-eslint/explicit-member-accessibility': [
+          'off',
+          {
+            accessibility: 'explicit'
+          }
+        ],
+        '@typescript-eslint/indent': 'off',
+        '@typescript-eslint/member-delimiter-style': [
+          'off',
+          {
+            multiline: {
+              delimiter: 'none',
+              requireLast: true
+            },
+            singleline: {
+              delimiter: 'semi',
+              requireLast: false
+            }
+          }
+        ],
+        '@typescript-eslint/member-ordering': 'off',
+        // "@typescript-eslint/naming-convention": "error",
+        '@typescript-eslint/no-empty-function': 'error',
+        '@typescript-eslint/no-empty-interface': 'error',
+        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/no-misused-new': 'error',
+        '@typescript-eslint/no-namespace': 'error',
+        '@typescript-eslint/no-parameter-properties': 'off',
+        '@typescript-eslint/no-this-alias': 'error',
+        '@typescript-eslint/no-unused-expressions': 'error',
+        '@typescript-eslint/no-use-before-define': 'off',
+        '@typescript-eslint/no-var-requires': 'error',
+        '@typescript-eslint/prefer-for-of': 'error',
+        '@typescript-eslint/prefer-function-type': 'error',
+        '@typescript-eslint/prefer-namespace-keyword': 'error',
+        // '@typescript-eslint/quotes': [
+        //   'error',
+        //   'single',
+        //   {
+        //     avoidEscape: true
+        //   }
+        // ],
+        '@typescript-eslint/semi': ['off', null],
+        '@typescript-eslint/triple-slash-reference': [
+          'error',
+          {
+            path: 'always',
+            types: 'prefer-import',
+            lib: 'always'
+          }
+        ],
+        '@typescript-eslint/type-annotation-spacing': 'off',
+        '@typescript-eslint/unified-signatures': 'error',
+        '@typescript-eslint/typedef': [
+          'error',
+          {
+            arrayDestructuring: false,
+            arrowParameter: false,
+            memberVariableDeclaration: false,
+            objectDestructuring: false,
+            parameter: true,
+            propertyDeclaration: false,
+            variableDeclaration: false,
+            variableDeclarationIgnoreFunction: true
+          }
+        ],
+        '@typescript-eslint/tslint/config': [
+          'error',
+          {
+            rules: {
+              'prefer-conditional-expression': true,
+              typedef: [
+                true,
+                {
+                  'call-signature': true
+                }
+              ]
+            }
+          }
+        ]
+      }
+    }
+  ]
+};

package/.prettierignore

@@ -0,0 +1,7 @@
+**/node_modules
+*.json
+*.md
+*.sh
+*.cfg
+Dockerfile
+public/

package/.prettierrc

@@ -0,0 +1,19 @@
+{
+  "eslintIntegration": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "disableLanguages": [
+    "json"
+  ],
+  "useTabs": false,
+  "printWidth": 120,
+  "jsxBracketSameLine": false,
+  "editor.tabSize": 2,
+  "editor.formatOnSave": true,
+  "[json]": {
+    "editor.formatOnSave": false
+  },
+  "tslint.autoFixOnSave": true,
+  "trailingComma": "none",
+  "arrowParens": "avoid"
+}

package/CODEOWNERS

@@ -0,0 +1,6 @@
+* @bettervu/backend-sme @bettervu/backend
+
+# CI
+tsconfig*.json @bettervu/ci @bettervu/backend-sme
+codefresh/ @bettervu/ci
+ci/ @bettervu/ci

package/README.md

@@ -0,0 +1,2 @@
+# integration-toolkit
+Types and harnesses to test a PartnerHub Integration 

package/component-harness-server/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Component Harness</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

package/component-harness-server/src/App.js

@@ -0,0 +1,34 @@
+import React, { useState } from 'main/react';
+import { EnrichmentComponent } from 'components';
+import { Typography, FormGroup, FormControlLabel, Switch } from 'main/@material-ui/core';
+import styles from './styles.styl';
+import classnames from 'classnames';
+
+const App = () => {
+  const [showBorderChecked, setShowBorderChecked] = useState(true);
+  const toggleBorderChecked = () => {
+    setShowBorderChecked(!showBorderChecked);
+  };
+
+  return (
+    <div className={styles.root}>
+      <Typography variant="h4">Component Harness</Typography>
+
+      <div className={styles.contentWrapper}>
+        <FormGroup>
+          <FormControlLabel
+            control={<Switch size="small" checked={showBorderChecked} onChange={toggleBorderChecked} />}
+            label="Show Border"
+          />
+        </FormGroup>
+        <div
+          className={classnames([styles.componentContainer, showBorderChecked ? styles.showBorder : styles.hideBorder])}
+        >
+          <EnrichmentComponent previewMode={true} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default App;

package/component-harness-server/src/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDom from 'react-dom';
+import App from './App';
+
+ReactDom.render(<App />, document.getElementById('app'));

package/component-harness-server/src/styles/betterview.styl

@@ -0,0 +1,34 @@
+@import './reset.styl'
+@import './fonts.styl'
+@import './vars.styl'
+
+html
+  font-size: 62.5% // allows for rems - see http://snook.ca/archives/html_and_css/font-size-with-rem. tl;dr: it equals 10px with a standard default of 12px.
+
+body
+  font-size: 1.4rem
+  font-family: $primaryFont
+  font-weight: 400
+  color: $black
+  cursor: default
+  background: #f7f7f7
+
+button
+  font-family: $primaryFont
+
+a
+  $linkColor = #0fa3e1
+  text-decoration: none
+  color: $linkColor
+  
+  &:visited
+    color: $linkColor
+    
+  &:hover
+    color: $betterviewBlue
+
+textarea
+input
+  outline: none
+
+