Rewrite project to TS

.eslintrc.yml

@@ -6,7 +6,7 @@ env:
 extends:
   - 'plugin:react/recommended'
   - airbnb
-parser: '@babel/eslint-parser'
+parser: "@typescript-eslint/parser"
 parserOptions:
   ecmaFeatures:
     jsx: true

README.md

@@ -14,11 +14,11 @@ https://github.com/FredrikOseberg/react-chatbot-kit
 
 First of all you need to make your own question`s roadmap dependencies.
 
-Create a `config.js` file.
+Create a `config.ts` file.
 
-See example of `config.js` in the `examples` directory.
+See example of `config.ts` in the `examples` directory.
 
-`config.js` file has four fields:
+`config.ts` file has four fields:
 
 1) `initMessages`, an array of messages that users will see when launching a chatbot.
 2) `initQuestions`. Here are stored initial roadmap questions for users. The array consists of question names.
@@ -40,7 +40,7 @@ Create your custom widget component. See examples in the `examples/widgets` dire
 
 Create object `widgets`, import and add all your widgets. 
 
-Create a `getWidget` function that has a `name` param  and returns a component from `widgets` object, consider an example from the `examples/widgets/index.js`.
+Create a `getWidget` function that has a `name` param  and returns a component from `widgets` object, consider an example from the `examples/widgets/index.ts`.
 
 ### Now check if it`s working
 

__fixtures__/widgets/index.ts

@@ -0,0 +1,9 @@
+import ABS from './ABS';
+import ESP from './ESP';
+
+const widgets: any = {
+  ABS,
+  ESP,
+};
+
+export default (name: string) => widgets[name];

__tests__/index.test.js

@@ -2,9 +2,9 @@ import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import createFlowBot from '../src/init.jsx';
-import baseConfig from '../__fixtures__/baseConfig.js';
-import getWidget from '../__fixtures__/widgets/index.js';
+import createFlowBot from '../src/init.tsx';
+import baseConfig from '../__fixtures__/baseConfig.ts';
+import getWidget from '../__fixtures__/widgets/index.ts';
 
 const initialHtml = '<div id="root"></div>';
 

babel.config.json

@@ -1,7 +1,8 @@
 {
   "presets": [
     "@babel/preset-env",
-    "@babel/preset-react"
+    "@babel/preset-react",
+    "@babel/preset-typescript"
   ],
   "plugins": [
     [ "@babel/plugin-transform-runtime", { "regenerator": true } ]

examples/widgets/index.ts

@@ -0,0 +1,9 @@
+import ABS from './ABS';
+import ESP from './ESP';
+
+const widgets: any = {
+  ABS,
+  ESP,
+};
+
+export default (name: string) => widgets[name];