{isBotWaitingQuestion(state)
- ? state.context.currentQuestions.map(({ answerName, id, text }) => (
+ ? state.context.currentQuestions.map(({ answerName, id, text }: any) => (
))
: (
diff --git a/src/components/QuestionButton.jsx b/src/components/QuestionButton.jsx
deleted file mode 100644
index bfadc8d..0000000
--- a/src/components/QuestionButton.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, { useContext } from 'react';
-import { Button } from 'react-bootstrap';
-import { useActor } from '@xstate/react';
-import PropTypes from 'prop-types';
-
-import GlobalStateContext from '../context';
-
-const QuestionButton = ({ text, answerName }) => {
- const globalServices = useContext(GlobalStateContext);
- const [, send] = useActor(globalServices.botService);
-
- const onClick = () => {
- send({
- type: 'ASK',
- answerName,
- text,
- });
- };
-
- return
;
-};
-
-QuestionButton.propTypes = {
- text: PropTypes.string.isRequired,
- answerName: PropTypes.string.isRequired,
-};
-
-export default QuestionButton;
diff --git a/src/components/QuestionButton.tsx b/src/components/QuestionButton.tsx
new file mode 100644
index 0000000..6f3177c
--- /dev/null
+++ b/src/components/QuestionButton.tsx
@@ -0,0 +1,28 @@
+import React, {MouseEventHandler, useContext} from 'react';
+import { Button } from 'react-bootstrap';
+import { useActor } from '@xstate/react';
+
+import GlobalStateContext from '../context/index';
+
+interface IQuestionButton {
+ text: string
+ answerName: string
+}
+
+const QuestionButton = ({ text, answerName }: IQuestionButton): JSX.Element => {
+ const globalServices: any = useContext(GlobalStateContext);
+ const [, send] = useActor(globalServices.botService);
+
+ const onClick: MouseEventHandler = () => {
+ send({
+ type: 'ASK',
+ answerName,
+ text,
+ });
+ };
+
+ return
;
+};
+
+
+export default QuestionButton;
diff --git a/src/components/TransitionButtons.jsx b/src/components/TransitionButtons.tsx
similarity index 70%
rename from src/components/TransitionButtons.jsx
rename to src/components/TransitionButtons.tsx
index bb75c0f..88e7896 100644
--- a/src/components/TransitionButtons.jsx
+++ b/src/components/TransitionButtons.tsx
@@ -1,19 +1,20 @@
-import React, { useContext } from 'react';
+import React, {MouseEventHandler, useContext} from 'react';
import { useActor } from '@xstate/react';
import _ from 'lodash';
import { Button } from 'react-bootstrap';
-import GlobalStateContext from '../context/index.js';
+import GlobalStateContext from '../context/index';
-const TransitionButtons = () => {
- const { botService } = useContext(GlobalStateContext);
+const TransitionButtons = (): JSX.Element => {
+ const { botService }: any = useContext(GlobalStateContext);
const [, send] = useActor(botService);
- const backToPreviousQuestion = () => {
+
+ const backToPreviousQuestion: MouseEventHandler = () => {
send({
type: 'PREVIOUS',
});
};
- const backToInitQuestions = () => {
+ const backToInitQuestions: MouseEventHandler = () => {
send({
type: 'RESET',
});
diff --git a/src/components/UserMessage.jsx b/src/components/UserMessage.tsx
similarity index 61%
rename from src/components/UserMessage.jsx
rename to src/components/UserMessage.tsx
index 8327c25..a9bc681 100644
--- a/src/components/UserMessage.jsx
+++ b/src/components/UserMessage.tsx
@@ -1,18 +1,18 @@
import React from 'react';
import { Row, Col } from 'react-bootstrap';
-import PropTypes from 'prop-types';
-const UserMessage = ({ messageData }) => (
+interface IUserMessage {
+ messageData: {
+ content?: string | undefined
+ }
+}
+
+const UserMessage = ({ messageData }: IUserMessage): JSX.Element => (
{messageData.content}
);
-UserMessage.propTypes = {
- messageData: PropTypes.shape({
- content: PropTypes.string,
- }),
-};
UserMessage.defaultProps = {
messageData: {
diff --git a/src/components/Widget.jsx b/src/components/Widget.tsx
similarity index 58%
rename from src/components/Widget.jsx
rename to src/components/Widget.tsx
index cc53d91..36ff6e6 100644
--- a/src/components/Widget.jsx
+++ b/src/components/Widget.tsx
@@ -1,11 +1,14 @@
-import React, { useContext } from 'react';
+import React, {FC, useContext} from 'react';
import { Row, Col, Card } from 'react-bootstrap';
-import PropTypes from 'prop-types';
+// @ts-ignore
+import GlobalStateContext from '../context/index.ts';
-import GlobalStateContext from '../context';
+interface IWidget {
+ name: string
+}
-const Widget = ({ name }) => {
- const { getWidget } = useContext(GlobalStateContext);
+const Widget = ({ name }: IWidget): JSX.Element => {
+ const { getWidget }: any = useContext(GlobalStateContext);
const Component = getWidget(name);
return (
@@ -21,8 +24,4 @@ const Widget = ({ name }) => {
);
};
-Widget.propTypes = {
- name: PropTypes.string.isRequired,
-};
-
export default Widget;
diff --git a/src/context/index.js b/src/context/index.ts
similarity index 100%
rename from src/context/index.js
rename to src/context/index.ts
diff --git a/src/index.jsx b/src/index.ts
similarity index 81%
rename from src/index.jsx
rename to src/index.ts
index 94313db..7723729 100644
--- a/src/index.jsx
+++ b/src/index.ts
@@ -5,9 +5,9 @@ import ReactDOM from 'react-dom';
import './styles/style.scss';
import createFlowBot from './init';
import configurationExample from '../examples/config';
-import getWidget from '../examples/widgets/index.js';
+import getWidget from '../examples/widgets/index';
-const run = () => {
+const run = (): void => {
const flowbot = createFlowBot(configurationExample, { getWidget });
const root = document.getElementById('root');
ReactDOM.render(flowbot, root);
diff --git a/src/init.jsx b/src/init.tsx
similarity index 71%
rename from src/init.jsx
rename to src/init.tsx
index 4917d67..a1db105 100644
--- a/src/init.jsx
+++ b/src/init.tsx
@@ -1,13 +1,14 @@
import React from 'react';
-
+// @ts-ignore
import createBotMachine from './machine/flowbotMachine';
import App from './components/App';
+import { IConfig } from './intefaces/IConfig';
const defaultOptions = {
getWidget: () => null,
};
-export default (configuration, userDefinedOptions = {}) => {
+export default (configuration: IConfig, userDefinedOptions = {}): JSX.Element => {
const options = { ...defaultOptions, ...userDefinedOptions };
const botMachine = createBotMachine(configuration);
diff --git a/src/intefaces/IConfig.ts b/src/intefaces/IConfig.ts
new file mode 100644
index 0000000..f2da468
--- /dev/null
+++ b/src/intefaces/IConfig.ts
@@ -0,0 +1,53 @@
+import {IMessage} from "@/src/intefaces/IMessages";
+
+export interface IConfig {
+ answers: {
+ name: string,
+ content: string,
+ questionNames: string[] | []
+ }[]
+ initMessages: string[]
+ initQuestions: string[]
+ questions: {
+ name: string
+ text: string
+ answerName: string
+ }[]
+}
+
+export interface IAnswerData {
+ name: string
+ content: string
+ questionNames: string[] | []
+ widgets?: string[]
+}
+
+export interface IMachineEvent {
+ type: string,
+ questionDetails: string
+ configuration: IConfig
+}
+export interface IMachineContext {
+ currentQuestionDetails: string | {}
+ currentQuestions: {
+ name: string
+ text: string
+ answerName: string
+ id: string
+ }[]
+ messages: {
+ type: string
+ id: string
+ content?: string | undefined
+ widgetData: {
+ id: string,
+ name: string
+ }[] | []
+ }
+ questionsChain: [
+ name: string,
+ text: string,
+ answerName: string | undefined,
+ id: string
+ ][]
+}
diff --git a/src/intefaces/IMessages.ts b/src/intefaces/IMessages.ts
new file mode 100644
index 0000000..ecf3603
--- /dev/null
+++ b/src/intefaces/IMessages.ts
@@ -0,0 +1,24 @@
+import {IMachineContext} from "@/src/intefaces/IConfig";
+
+export interface IMessage {
+ type: string
+ id: string
+ content?: string | undefined
+ widgetData: {
+ id: string,
+ name: string
+ }[] | []
+}
+export interface IBotMessage {
+ messageData: {
+ content?: string | undefined,
+ widgetData: {
+ id: string,
+ name: string
+ }[] | []
+ }
+}
+export interface IState {
+ context: IMachineContext
+}
+
diff --git a/src/machine/answeringMachine.js b/src/machine/answeringMachine.js
deleted file mode 100644
index a8dbc5d..0000000
--- a/src/machine/answeringMachine.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { createMachine, sendParent } from 'xstate';
-import generateId from '../utils/idGenerator';
-
-const getAnswerData = (config, name) => config.answers.find((answer) => answer.name === name);
-
-export default createMachine({
- id: 'answer-creator',
- initial: 'waitingQuestionDetails',
- states: {
- waitingQuestionDetails: {
- on: {
- PREPARE_ANSWER: {
- actions: sendParent((context, event) => {
- const { questionDetails, configuration } = event;
- const answerData = getAnswerData(configuration, questionDetails);
- const nextQuestions = answerData.questionNames.map((questionName) => {
- const questionData = configuration.questions.find(({ name }) => (
- name === questionName
- ));
- return { ...questionData, id: generateId() };
- });
- const widgetNames = answerData.widgets || [];
- const widgetData = widgetNames.map((name) => ({ name, id: generateId() }));
- const payload = {
- answerData,
- nextQuestions,
- widgetData,
- };
-
- return { type: 'REPLY', payload };
- }, { delay: 1000 }),
- },
- },
- },
- },
-});
diff --git a/src/machine/answeringMachine.ts b/src/machine/answeringMachine.ts
new file mode 100644
index 0000000..d4731fb
--- /dev/null
+++ b/src/machine/answeringMachine.ts
@@ -0,0 +1,43 @@
+import {createMachine, sendParent} from 'xstate';
+import generateId from '../utils/idGenerator';
+import {IAnswerData, IConfig, IMachineEvent} from "../intefaces/IConfig";
+
+const getAnswerData = (config: IConfig, name: string) => config.answers.find((answer) => answer.name === name);
+
+export default createMachine({
+ tsTypes: {} as import("./answeringMachine.typegen").Typegen0,
+ id: 'answer-creator',
+ initial: 'waitingQuestionDetails',
+ schema: {
+ events: {} as { type: 'PREPARE_ANSWER' }
+ },
+ states: {
+ waitingQuestionDetails: {
+ on:
{
+ PREPARE_ANSWER: {
+ actions: sendParent((context: any | undefined, event: IMachineEvent) => {
+ const { questionDetails, configuration } = event;
+ const answerData: IAnswerData | undefined = getAnswerData(configuration, questionDetails);
+ const nextQuestions = answerData!.questionNames.map((questionName: string) => {
+ const questionData = configuration.questions.find(({ name }) => (
+ name === questionName
+ ));
+ return { ...questionData, id: generateId() };
+ });
+ const widgetNames = answerData!.widgets || [];
+ const widgetData = widgetNames.map((name: string) => ({ name, id: generateId() }));
+ const payload = {
+ answerData,
+ nextQuestions,
+ widgetData,
+ };
+
+ return { type: 'REPLY', payload };
+ }, { delay: 1000 }),
+ },
+
+ },
+ },
+ },
+});
+
diff --git a/src/machine/answeringMachine.typegen.ts b/src/machine/answeringMachine.typegen.ts
new file mode 100644
index 0000000..ef3d67b
--- /dev/null
+++ b/src/machine/answeringMachine.typegen.ts
@@ -0,0 +1,21 @@
+// This file was automatically generated. Edits will be overwritten
+
+export interface Typegen0 {
+ "@@xstate/typegen": true;
+ internalEvents: {
+ "xstate.init": { type: "xstate.init" };
+ };
+ invokeSrcNameMap: {};
+ missingImplementations: {
+ actions: never;
+ services: never;
+ guards: never;
+ delays: never;
+ };
+ eventsCausingActions: {};
+ eventsCausingServices: {};
+ eventsCausingGuards: {};
+ eventsCausingDelays: {};
+ matchesStates: "waitingQuestionDetails";
+ tags: never;
+}
diff --git a/src/machine/flowbotMachine.js b/src/machine/flowbotMachine.ts
similarity index 74%
rename from src/machine/flowbotMachine.js
rename to src/machine/flowbotMachine.ts
index fba674a..275cb58 100644
--- a/src/machine/flowbotMachine.js
+++ b/src/machine/flowbotMachine.ts
@@ -1,8 +1,9 @@
import { assign, createMachine, send } from 'xstate';
import answeringMachine from './answeringMachine';
import generateId from '../utils/idGenerator';
+import { IConfig } from "@/src/intefaces/IConfig";
-const getInitMessages = (config) => (
+const getInitMessages = (config: IConfig) => (
config.initMessages.map((message) => ({
type: 'bot',
content: message,
@@ -11,7 +12,7 @@ const getInitMessages = (config) => (
}))
);
-const getInitQuestions = (config) => (
+const getInitQuestions = (config: IConfig) => (
config.initQuestions
.map((questionName) => {
const questionData = config.questions.find((question) => question.name === questionName);
@@ -19,7 +20,7 @@ const getInitQuestions = (config) => (
})
);
-const createBotMachine = (configuration) => {
+const createBotMachine = (configuration: IConfig) => {
const initMessages = getInitMessages(configuration);
const initQuestions = getInitQuestions(configuration);
@@ -37,24 +38,24 @@ const createBotMachine = (configuration) => {
on: { TOGGLE: 'waitingQuestion' },
},
waitingQuestion: {
- on: {
+ on: {
TOGGLE: 'idle',
ASK: {
target: 'answering',
actions: assign({
- questionsChain: (context) => [...context.questionsChain, context.currentQuestions],
- messages: (context, event) => [
+ questionsChain: (context: any | undefined) => [...context.questionsChain, context.currentQuestions],
+ messages: (context: any | undefined, event: any) => [
...context.messages,
{ type: 'user', content: event.text, id: generateId() },
],
- currentQuestionDetails: (context, event) => event.answerName,
+ currentQuestionDetails: (context, event: any) => event.answerName,
}),
},
PREVIOUS: {
actions: assign({
- currentQuestions: (context) => {
+ currentQuestions: (context: any | undefined) => {
const prevQuestions = context.questionsChain.pop();
- return prevQuestions.map((question) => ({
+ return prevQuestions.map((question: any) => ({
...question,
id: generateId(),
}));
@@ -75,19 +76,19 @@ const createBotMachine = (configuration) => {
id: 'answer-creator',
src: answeringMachine,
},
- entry: send((context) => ({
+ entry: send((context: any) => ({
type: 'PREPARE_ANSWER',
questionDetails: context.currentQuestionDetails,
configuration,
}), {
to: 'answer-creator',
}),
- on: {
+ on: {
TOGGLE: 'idle',
REPLY: {
target: 'waitingQuestion',
actions: assign({
- messages: (context, event) => [
+ messages: (context: any | undefined, event: any) => [
...context.messages,
{
type: 'bot',
@@ -96,7 +97,7 @@ const createBotMachine = (configuration) => {
widgetData: event.payload.widgetData,
},
],
- currentQuestions: (context, event) => event.payload.nextQuestions,
+ currentQuestions: (context, event: any) => event.payload.nextQuestions,
}),
},
},
diff --git a/src/utils/idGenerator.js b/src/utils/idGenerator.js
deleted file mode 100644
index 7a3c145..0000000
--- a/src/utils/idGenerator.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import _ from 'lodash';
-
-export default () => _.uniqueId();
diff --git a/src/utils/idGenerator.ts b/src/utils/idGenerator.ts
new file mode 100644
index 0000000..95d43e8
--- /dev/null
+++ b/src/utils/idGenerator.ts
@@ -0,0 +1,3 @@
+import _ from 'lodash';
+
+export default (): string => _.uniqueId();
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..8f7c205
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "outDir": "./dist",
+ "rootDirs": ["./examples", "./src", "./__fixtures__"],
+ "target": "ES6",
+ "jsx": "react",
+ "paths": {
+ "@/*": ["./*"],
+ },
+ "moduleResolution":"node",
+ "module": "es6",
+ "esModuleInterop": true,
+ "forceConsistentCasingInFileNames": true,
+ "strict": true,
+ "skipLibCheck": true,
+ "noImplicitAny": true,
+ "allowSyntheticDefaultImports": true
+ },
+ "include": ["src/**/*.tsx"],
+ "exclude": [
+ "node_modules",
+ "dist"
+ ]
+}
diff --git a/webpack.config.js b/webpack.config.js
index 8ea6eef..de75d53 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -8,7 +8,7 @@ const mode = process.env.NODE_ENV || 'development';
module.exports = {
mode,
resolve: {
- extensions: ['.js', '.jsx'],
+ extensions: ['.js', '.ts', '.tsx'],
},
devServer: {
port: 3000,
@@ -23,11 +23,6 @@ module.exports = {
],
module: {
rules: [
- {
- test: /\.jsx?$/,
- exclude: /node_modules/,
- use: 'babel-loader',
- },
{
test: /\.s[ac]ss$/i,
use: [
@@ -37,6 +32,11 @@ module.exports = {
{ loader: 'sass-loader' },
],
},
+ {
+ test: /\.(ts|tsx)?$/,
+ use: 'ts-loader',
+ exclude: /node_modules/,
+ },
],
},
};
diff --git a/webpack.prod.js b/webpack.prod.js
index ab4718a..13bcdba 100644
--- a/webpack.prod.js
+++ b/webpack.prod.js
@@ -5,17 +5,17 @@ const GeneratePackageJsonPlugin = require('generate-package-json-webpack-plugin'
module.exports = {
mode: 'production',
- entry: ['./src/init.jsx', './src/styles/style.scss'],
+ entry: ['./src/init.tsx', './src/styles/style.scss'],
target: [
'web',
'es2020',
],
resolve: {
- extensions: ['.js', '.jsx'],
+ extensions: ['.js', '.ts', '.tsx'],
},
output: {
path: path.resolve(__dirname, 'build'),
- filename: 'index.js',
+ filename: 'index.ts',
library: {
type: 'module',
},
@@ -29,7 +29,7 @@ module.exports = {
new GeneratePackageJsonPlugin({
name: 'react-flowbot-ui-kit',
version: '0.1.0',
- main: './index.js',
+ main: './index.ts',
engines: {
node: '>= 14',
},
@@ -37,11 +37,6 @@ module.exports = {
],
module: {
rules: [
- {
- test: /\.jsx?$/,
- exclude: /node_modules/,
- use: 'babel-loader',
- },
{
test: /\.s[ac]ss$/i,
use: [
@@ -51,6 +46,11 @@ module.exports = {
{ loader: 'sass-loader' },
],
},
+ {
+ test: /\.(ts|tsx)?$/,
+ use: 'ts-loader',
+ exclude: /node_modules/,
+ },
],
},
externals: ['react'],