Add type definitions for StyleOptions

__tests__/.eslintrc

@@ -2,5 +2,7 @@ globals:
   runHTMLTest: readonly
 ignorePatterns:
 - "**/*.js"
+- "**/*.ts"
+- "**/*.tsx"
 - "!/html/__jest__/*.js"
 - "!/setup/*.js"

__tests__/adaptiveCards.js

@@ -7,7 +7,7 @@ import scrollToBottomCompleted from './setup/conditions/scrollToBottomCompleted'
 import uiConnected from './setup/conditions/uiConnected';
 
 import createAdaptiveCardsHostConfig from '../packages/bundle/src/adaptiveCards/Styles/adaptiveCardHostConfig';
-import defaultStyleOptions from '../packages/component/src/Styles/defaultStyleOptions';
+import defaultStyleOptions from '../packages/api/src/defaultStyleOptions';
 
 // selenium-webdriver API doc:
 // https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html

__tests__/types/.gitignore

@@ -0,0 +1,4 @@
+dirNumber.js
+dirString.js
+styleOptionsAccent.js
+styleOptionsCardEmph.js

__tests__/types/dirNumber.tsx

@@ -0,0 +1,10 @@
+import ReactWebChat, { createStyleSet, StyleOptions } from '../../packages/bundle/lib/index';
+
+function main() {
+  const styleOptions: StyleOptions = { accent: 'black', cardEmphasisBackgroundColor: 'orange' };
+
+  createStyleSet(styleOptions);
+
+  // "dir" of type number should fail
+  return <ReactWebChat dir={123} styleOptions={styleOptions} />;
+}

__tests__/types/dirString.tsx

@@ -0,0 +1,10 @@
+import ReactWebChat, { createStyleSet, StyleOptions } from '../../packages/bundle/lib/index';
+
+function main() {
+  const styleOptions: StyleOptions = { accent: 'black', cardEmphasisBackgroundColor: 'orange' };
+
+  createStyleSet(styleOptions);
+
+  // Verify: "dir" of type string should pass
+  return <ReactWebChat dir="ltr" styleOptions={styleOptions} />;
+}

__tests__/types/styleOptionsAccent.tsx

@@ -0,0 +1,10 @@
+import ReactWebChat, { createStyleSet, StyleOptions } from '../../packages/bundle/lib/index-minimal';
+
+function main() {
+  const styleOptions: StyleOptions = { accent: 'black' };
+
+  createStyleSet(styleOptions);
+
+  // Verify: Setting "accent" must should pass.
+  return <ReactWebChat dir="ltr" styleOptions={styleOptions} />;
+}

__tests__/types/styleOptionsCardEmph.tsx

@@ -0,0 +1,10 @@
+import ReactWebChat, { createStyleSet, StyleOptions } from '../../packages/bundle/lib/index-minimal';
+
+function main() {
+  const styleOptions: StyleOptions = { cardEmphasisBackgroundColor: 'orange' };
+
+  createStyleSet(styleOptions);
+
+  // Verify: Setting "cardEmphasisBackgroundColor" using minimal bundle must fail.
+  return <ReactWebChat dir="ltr" styleOptions={styleOptions} />;
+}

__tests__/types/typesCheck.js

@@ -0,0 +1,54 @@
+const ts = require('typescript');
+const path = require('path');
+
+function compile(...filenames) {
+const program = ts.createProgram(filenames, {
+  allowSyntheticDefaultImports: true,
+  jsx: 'react',
+  noEmit: false,
+  skipLibCheck: true,
+});
+
+const emitResult = program.emit();
+const allDiagnostics = ts.getPreEmitDiagnostics(program).concat(emitResult.diagnostics);
+const errors = [];
+
+allDiagnostics.forEach(diagnostic => {
+  if (diagnostic.file) {
+    const { line, character } = diagnostic.file.getLineAndCharacterOfPosition(diagnostic.start);
+    const message = ts.flattenDiagnosticMessageText(diagnostic.messageText, '\n');
+    errors.push(`${diagnostic.file.fileName} (${line + 1},${character + 1}): ${message}`);
+  } else {
+    errors.push(ts.flattenDiagnosticMessageText(diagnostic.messageText, '\n'));
+  }
+});
+
+if (errors.length > 0)
+
+return errors;
+};
+
+
+it('dir should pass dir as string', () => {
+  const dirStringErrors = compile(path.join(__dirname, './dirString.tsx'));
+
+  expect(dirStringErrors).toHaveProperty('length', 0);
+});
+
+it('dir should fail on dir as number', () => {
+  const dirNumErrors = compile(path.join(__dirname, './dirNumber.tsx'));
+
+  expect(dirNumErrors).toHaveProperty('length', 1);
+});
+
+it('styleOptions should fail on accent', () => {
+  const dirStringErrors = compile(path.join(__dirname, './styleOptionsAccent.tsx'));
+
+  expect(dirStringErrors).toHaveProperty('length', 0);
+});
+
+it('styleOptions should pass on cardEmphasisBackgroundColor', () => {
+  const dirStringErrors = compile(path.join(__dirname, './styleOptionsCardEmph.tsx'));
+
+  expect(dirStringErrors).toHaveProperty('length', 1);
+});

package.json

@@ -70,6 +70,7 @@
     "serve": "^11.3.2",
     "serve-handler": "^6.1.3",
     "strip-ansi": "^6.0.0",
+    "typescript": "^4.2.3",
     "xmlbuilder": "^15.1.1"
   },
   "dependencies": {}

packages/api/.eslintrc.yml

@@ -3,6 +3,9 @@ extends:
 plugins:
 - prettier
 - react-hooks
+- '@typescript-eslint/eslint-plugin'
+parser:
+  '@typescript-eslint/parser'
 rules:
 # plugins
   prettier/prettier: error
@@ -89,3 +92,11 @@ rules:
   react/jsx-wrap-multilines: error # Conflict with no-extra-parens
   react-hooks/rules-of-hooks: error
   react-hooks/exhaustive-deps: warn
+
+  # TypeScript
+
+  # The correct way to use with typescript-eslint is to disable the core version.
+  # https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-use-before-define.md#how-to-use
+  no-use-before-define: off
+  '@typescript-eslint/no-use-before-define':
+  - error