@botonic/react 0.22.0-alpha.1 → 0.22.0-beta.0

package/package.json

@@ -1,23 +1,25 @@
 {
   "name": "@botonic/react",
-  "version": "0.22.0-alpha.1",
+  "version": "0.22.0-beta.0",
   "license": "MIT",
   "description": "Build Chatbots using React",
   "main": "./lib/cjs",
   "module": "./lib/esm",
   "types": "./lib/cjs/index.d.ts",
   "scripts": {
-    "test": "../../node_modules/.bin/jest --coverage",
+    "test:no-coverage": "./node_modules/.bin/jest --env=jsdom",
+    "test": "./node_modules/.bin/jest --env=jsdom --coverage",
     "cloc": "../../scripts/qa/cloc-package.sh .",
     "prepublishOnly": "npm run clean; npm run build; npm run copy-files;",
     "prepare": "node ../../preinstall.js;",
-    "clean": "rimraf ./lib/",
+    "clean": "rm -rf ./lib/",
     "copy-files": "copyfiles -u 1 src/**/*.svg src/**/*.png src/**/*.scss src/**/*.html lib/esm/; copyfiles -u 1 src/**/*.svg src/**/*.png src/**/*.scss src/**/*.html lib/cjs/;",
-    "build": "../../node_modules/.bin/tsc -p tsconfig.json && ../../node_modules/.bin/tsc -p tsconfig.esm.json",
+    "build": "./node_modules/.bin/tsc -p tsconfig.json && ./node_modules/.bin/tsc -p tsconfig.esm.json",
     "build:watch": "npm run build -- --watch",
-    "lint": "npm run lint_core -- --fix",
+    "prettier": "../../node_modules/.bin/prettier --no-error-on-unmatched-pattern --write '**/*.md' '**/*.css' '.*.js' '*.js{,on}'",
+    "lint": "npm run prettier; npm run lint_core -- --fix",
     "lint_ci": "npm run lint_core",
-    "lint_core": "../../node_modules/.bin/eslint_d --cache --quiet '.*.js' '*.js' 'src/**/*.js*' 'src/**/*.d.ts' 'tests/**/*.js' 'tests/**/*.jsx'"
+    "lint_core": "../../node_modules/.bin/eslint_d --cache --quiet '.*.js' '*.js' 'src/**/*.js*' 'src/**/*.d.ts' --fix"
   },
   "sideEffects": [
     "*.scss",
@@ -35,14 +37,14 @@
   "dependencies": {
     "@botonic/core": "0.22.0-alpha.0",
     "axios": "^1.4.0",
-    "emoji-picker-react": "^3.2.3",
+    "emoji-picker-react": "^4.4.9",
     "framer-motion": "^3.1.1",
     "he": "^1.2.0",
     "lodash.merge": "^4.6.2",
     "markdown-it": "^12.0.6",
     "qrcode.react": "^1.0.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "react-frame-component": "^4.1.3",
     "react-json-tree": "^0.15.0",
     "react-reveal": "^1.2.2",
@@ -57,21 +59,25 @@
     "uuid": "^8.3.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.21.0",
-    "@babel/core": "^7.21.4",
+    "@babel/cli": "^7.21.5",
+    "@babel/core": "^7.21.8",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/plugin-transform-runtime": "^7.21.4",
-    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-env": "^7.21.5",
     "@babel/preset-react": "^7.18.6",
     "@testing-library/react": "^12.0.0",
-    "@testing-library/react-hooks": "^7.0.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/jest": "^29.5.1",
+    "@types/parse5": "^7.0.0",
     "@types/react": "17.0.27",
     "babel-plugin-add-module-exports": "^1.0.4",
     "copyfiles": "^2.4.1",
     "identity-obj-proxy": "^3.0.0",
-    "react-test-renderer": "^16.14.0",
-    "rimraf": "^5.0.0",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "react-test-renderer": "^17.0.0",
+    "ts-jest": "^29.1.0",
     "typescript": "^5.0.4"
   },
   "engines": {

package/src/components/{index.d.ts → index-types.ts}

@@ -1,7 +1,6 @@
-import * as React from 'react'
-import { ErrorInfo } from 'react'
+import React, { ErrorInfo } from 'react'
 
-import { CoverComponentProps } from '../webchat'
+import { CoverComponentProps } from '../webchat/index-types'
 
 export type MessageType =
   | 'audio'
@@ -26,18 +25,10 @@ export interface MessageProps {
   typing?: number
 }
 
-export const Audio: React.FunctionComponent<MessageProps>
-export const Document: React.FunctionComponent<MessageProps>
-
-export const Message: React.FunctionComponent<MessageProps>
-export type Message = React.FunctionComponent<MessageProps>
-export const Video: React.FunctionComponent<MessageProps>
-
 export interface TextProps extends MessageProps {
   // converts markdown syntax to HTML
   markdown?: boolean
 }
-export const Text: React.FunctionComponent<TextProps>
 
 export interface Webview {
   name: string
@@ -56,23 +47,16 @@ export interface ButtonProps {
   disabledstyle?: boolean
 }
 
-export const Button: React.FunctionComponent<ButtonProps>
-
 export interface ReplyProps {
   path?: string
   payload?: string
   children: string
 }
-export const Reply: React.FunctionComponent<ReplyProps>
-export type Reply = React.FunctionComponent<ReplyProps>
 
 export interface PicProps {
   src: string
 }
 
-export const Carousel: React.FunctionComponent<MessageProps>
-export const Image: React.FunctionComponent<ImageProps>
-export const Pic: React.FunctionComponent<PicProps>
 export type ImageProps = PicProps
 
 export interface TitleProps {
@@ -80,17 +64,14 @@ export interface TitleProps {
   style: string
 }
 
-export const Element: React.FunctionComponent<MessageProps>
-export const Subtitle: React.FunctionComponent<SubtitleProps>
-export const Title: React.FunctionComponent<TitleProps>
 export type SubtitleProps = TitleProps
 
-type CustomProp = { custom?: React.ComponentType }
-type EnableProp = { enable?: boolean }
-type ImageProp = { image?: string } // https URL or imported Image asset
-type PersistentMenuCloseOption = { closeLabel: string }
-type PersistentMenuOption = { label: string } & ButtonProps
-type StyleProp = { style?: any }
+export type CustomProp = { custom?: React.ComponentType }
+export type EnableProp = { enable?: boolean }
+export type ImageProp = { image?: string } // https URL or imported Image asset
+export type PersistentMenuCloseOption = { closeLabel: string }
+export type PersistentMenuOption = { label: string } & ButtonProps
+export type StyleProp = { style?: any }
 
 export type PersistentMenuTheme = (
   | PersistentMenuCloseOption
@@ -202,27 +183,25 @@ export interface WebchatSettingsProps {
   persistentMenu?: PersistentMenuTheme
   theme?: ThemeProps
 }
-export const WebchatSettings: React.FunctionComponent<WebchatSettingsProps>
 
 export type WrappedComponent<Props> = React.FunctionComponent<Props> & {
   customTypeName: string
 }
 
-export class ErrorBoundary<Props> extends React.Component<Props> {
-  componentDidCatch(error: Error, errorInfo: ErrorInfo): void
-}
-
-export function createErrorBoundary<Props>(_?: {
-  errorComponent: React.ComponentType
-}): ErrorBoundary<Props>
+// TODO: Reuse types to be typed in respective functions
+// export class ErrorBoundary<Props> extends React.Component<Props> {
+//   componentDidCatch(error: Error, errorInfo: ErrorInfo): void
+// }
 
-export function customMessage<Props>(_: {
-  name: string
-  component: React.ComponentType<Props>
-  defaultProps?: Record<string, unknown>
-  errorBoundary?: ErrorBoundary<Props>
-}): WrappedComponent<Props>
+// export function createErrorBoundary<Props>(_?: {
+//   errorComponent: React.ComponentType
+// }): ErrorBoundary<Props>
 
-export function getDisplayName(component: React.ComponentType): string
+// export function customMessage<Props>(_: {
+//   name: string
+//   component: React.ComponentType<Props>
+//   defaultProps?: Record<string, unknown>
+//   errorBoundary?: ErrorBoundary<Props>
+// }): WrappedComponent<Props>
 
-export * from './multichannel'
+// export function getDisplayName(component: React.ComponentType): string

package/src/components/{index.js → index.ts}

@@ -5,7 +5,9 @@ export { customMessage } from './custom-message'
 export { Document } from './document'
 export { Element } from './element'
 export { Image } from './image'
+export * from './index-types'
 export { Location } from './location'
+export { Message } from './message'
 export { MessageTemplate } from './message-template'
 export * from './multichannel'
 export { Pic } from './pic'

package/src/components/message.jsx

@@ -85,12 +85,8 @@ export const Message = props => {
   const isFromUser = from === SENDERS.user
   const isFromBot = from === SENDERS.bot
   const markdown = props.markdown
-  const {
-    webchatState,
-    addMessage,
-    updateReplies,
-    getThemeProperty,
-  } = useContext(WebchatContext)
+  const { webchatState, addMessage, updateReplies, getThemeProperty } =
+    useContext(WebchatContext)
   const [state, setState] = useState({
     id: props.id || uuidv4(),
   })
@@ -114,11 +110,8 @@ export const Message = props => {
       typeof e === 'string' ? renderLinks(e) : e
     )
 
-  const {
-    timestampsEnabled,
-    getFormattedTimestamp,
-    timestampStyle,
-  } = resolveMessageTimestamps(getThemeProperty, enabletimestamps)
+  const { timestampsEnabled, getFormattedTimestamp, timestampStyle } =
+    resolveMessageTimestamps(getThemeProperty, enabletimestamps)
 
   const getEnvAck = () => {
     if (isDev) return 1

package/src/components/multichannel/{index.d.ts → index-types.ts}

@@ -1,6 +1,4 @@
-import * as React from 'react'
-
-type IndexMode = 'number' | 'letter' | undefined //undefined means no index
+export type IndexMode = 'number' | 'letter' | undefined //undefined means no index
 
 export interface MultichannelViewOptions {
   boldIndex?: boolean
@@ -23,8 +21,6 @@ export interface MultichannelTextProps extends MultichannelViewOptions {
   buttonsTextSeparator?: string
 }
 
-export const MultichannelText: React.FunctionComponent<MultichannelTextProps>
-
 // Carousel
 export interface MultichannelCarouselProps extends MultichannelViewOptions {
   enableURL?: boolean
@@ -33,7 +29,6 @@ export interface MultichannelCarouselProps extends MultichannelViewOptions {
   showSubtitle?: boolean
   buttonsAsText?: boolean
 }
-export const MultichannelCarousel: React.FunctionComponent<MultichannelCarouselProps>
 
 // Button
 export interface MultichannelButtonProps {
@@ -44,10 +39,8 @@ export interface MultichannelButtonProps {
   webview?: string
   asText?: boolean
 }
-export const MultichannelButton: React.FunctionComponent<MultichannelButtonProps>
 
 // Reply
-export const MultichannelReply: React.FunctionComponent<MultichannelButtonProps>
 
 export interface MultichannelProps extends MultichannelViewOptions {
   firstIndex?: number | string
@@ -61,5 +54,3 @@ export interface MultichannelProps extends MultichannelViewOptions {
    **/
   messageSeparator?: string
 }
-
-export const Multichannel: React.FunctionComponent<MultichannelProps>

package/src/components/multichannel/{index.js → index.ts}

@@ -9,3 +9,5 @@ export { MultichannelText }
 export { MultichannelButton }
 export { MultichannelReply }
 export { MultichannelCarousel }
+
+export * from './index-types'

package/src/components/multichannel/multichannel-text.jsx

@@ -194,11 +194,8 @@ export const MultichannelText = props => {
   if (isFacebook(requestContext)) {
     const text = getText(props.children)
     const multichannelFacebook = new MultichannelFacebook()
-    const {
-      texts,
-      propsLastText,
-      propsWithoutChildren,
-    } = multichannelFacebook.convertText(props, text[0])
+    const { texts, propsLastText, propsWithoutChildren } =
+      multichannelFacebook.convertText(props, text[0])
     return (
       <>
         {texts &&

package/src/contexts.jsx

@@ -1,8 +1,8 @@
-import React from 'react'
+import { createContext } from 'react'
 
 import { webchatInitialState } from './webchat/hooks'
 
-export const RequestContext = React.createContext({
+export const RequestContext = createContext({
   getString: () => '',
   setLocale: () => '',
   session: {},
@@ -12,7 +12,7 @@ export const RequestContext = React.createContext({
   defaultTyping: 0,
 })
 
-export const WebchatContext = React.createContext({
+export const WebchatContext = createContext({
   sendText: text => {},
   sendAttachment: attachment => {},
   sendPayload: payload => {},

package/src/index-types.ts

@@ -0,0 +1,190 @@
+import * as core from '@botonic/core'
+import React from 'react'
+
+import {
+  ButtonProps,
+  ReplyProps,
+  ThemeProps,
+  WebchatSettingsProps,
+  Webview,
+} from './components/index-types'
+import { WebchatState } from './webchat'
+
+/**
+ * See @botonic/core's Response for the description of the Response's semantics*/
+export interface BotResponse extends core.BotRequest {
+  response: [React.ReactNode]
+}
+
+export interface Route extends core.Route {
+  action?: React.ComponentType<any>
+  retryAction?: React.ComponentType<any>
+}
+export type Routes = core.Routes<Route>
+
+// Parameters of the actions' botonicInit method
+export interface ActionRequest {
+  defaultDelay: number
+  defaultTyping: number
+  input: core.Input
+  lastRoutePath: string
+  params: { [key: string]: string }
+  plugins: { [id: string]: core.Plugin }
+  session: core.Session
+}
+
+export interface RequestContextInterface extends ActionRequest {
+  getString: (stringId: string) => string
+  setLocale: (locale: string) => string
+}
+
+export type RequestContext = React.Context<RequestContextInterface>
+
+export interface CustomMessageType {
+  customTypeName: string
+}
+
+// TODO: Reuse types to be reused in respective components
+// export class WebchatApp {
+//   constructor(options: WebchatAppArgs)
+//   addBotMessage(message: WebchatMessage): void
+//   addBotText(text: string): void
+//   addUserMessage(message: WebchatMessage): void
+//   addUserPayload(payload: string): void
+//   addUserText(text: string): void
+//   clearMessages(): void
+//   close(): void
+//   closeCoverComponent(): void
+//   destroy(): void
+//   getComponent(
+//     host: HTMLElement,
+//     optionsAtRuntime?: WebchatAppArgs
+//   ): React.ForwardRefExoticComponent<any>
+//   getLastMessageUpdate(): string
+//   getMessages(): WebchatMessage[]
+//   getVisibility(): Promise<boolean>
+//   isWebchatVisible({ appId: string }): Promise<boolean>
+//   onCloseWebchat(args: any): void
+//   onInitWebchat(args: any): void
+//   onOpenWebchat(args: any): void
+//   onServiceEvent(event: Event): void
+//   onStateChange(args: OnStateChangeArgs): void
+//   onUserInput(args: OnUserInputArgs): Promise<void>
+//   open(): void
+//   openCoverComponent(): void
+//   render(dest?: HTMLElement, optionsAtRuntime?: WebchatAppArgs): void
+//   resendUnsentInputs(): Promise<void>
+//   resolveWebchatVisibility(optionsAtRuntime: {
+//     appId: string
+//     visibility: () => boolean
+//   }): Promise<boolean>
+//   setTyping(enable: boolean): void
+//   toggle(): void
+//   toggleCoverComponent(): void
+//   updateMessageInfo(msgId: string, messageInfo: MessageInfo): void
+//   updateLastMessageDate(date: string): void
+//   updateUser(user: Partial<core.SessionUser>): void
+//   updateWebchatSettings(settings: WebchatSettingsProps): void
+//   renderCustomComponent(customComponent: React.ReactNode): void
+//   unmountCustomComponent(): void
+// }
+
+// export interface WebchatArgs {
+//   blockInputs?: BlockInputOption[]
+//   coverComponent?: CoverComponentOptions
+//   defaultDelay?: number
+//   defaultTyping?: number
+//   enableAnimations?: boolean
+//   enableAttachments?: boolean
+//   enableEmojiPicker?: boolean
+//   enableUserInput?: boolean
+//   shadowDOM?: boolean | (() => boolean)
+//   hostId?: string
+//   getString?: (stringId: string, session: core.Session) => string
+//   onClose?: (app: WebchatApp, args: any) => void
+//   onInit?: (app: WebchatApp, args: any) => void
+//   onMessage?: (app: WebchatApp, message: WebchatMessage) => void
+//   onOpen?: (app: WebchatApp, args: any) => void
+//   onConnectionChange?: (app: WebchatApp, isOnline: boolean) => void
+//   persistentMenu?: PersistentMenuTheme
+//   storage?: Storage | null
+//   storageKey?: any
+//   theme?: ThemeProps
+// }
+
+// export interface WebchatAppArgs extends WebchatArgs {
+export interface WebchatAppArgs {
+  appId?: string
+  visibility?: () => boolean
+}
+
+export interface WebchatMessage {
+  ack: 0 | 1
+  buttons: ButtonProps[]
+  data: any
+  delay: number
+  display: boolean
+  from: 'user' | 'bot'
+  id: string
+  markdown: boolean
+  replies: ReplyProps[]
+  timestamp: string
+  type: core.InputType
+  typing: number
+}
+
+export interface OnUserInputArgs {
+  input: core.Input
+  lastRoutePath?: string
+  session?: core.Session
+  user: core.SessionUser
+}
+
+export interface OnStateChangeArgs {
+  messagesJSON: WebchatMessage[]
+  user: core.SessionUser
+}
+
+export interface MessageInfo {
+  data: any | 'typing_on'
+  id: string
+  type: 'update_webchat_settings' | 'sender_action'
+}
+
+export interface Event {
+  action?: 'update_message_info'
+  isError?: boolean
+  message?: MessageInfo
+}
+
+export interface WebchatContextProps {
+  sendText: (text: string, payload?: string) => void
+  sendAttachment: (attachment: File) => void
+  sendPayload: (payload: string) => void
+  sendInput: (input: core.Input) => void
+  openWebview: (webviewComponent: Webview) => void
+  addMessage: (message: WebchatMessage) => void
+  updateMessage: (message: WebchatMessage) => void
+  updateReplies: (replies: boolean) => void
+  updateLatestInput: (input: core.Input) => void
+  closeWebview: () => void
+  toggleWebchat: () => void
+  getThemeProperty: (property: string, defaultValue?: string) => any
+  resolveCase: () => void
+  theme: ThemeProps
+  webchatState: WebchatState
+  updateWebchatDevSettings: (settings: WebchatSettingsProps) => void
+  updateUser: (user: Partial<core.SessionUser>) => void
+}
+
+export type WebchatContext = React.Context<WebchatContextProps>
+
+// export class DevApp extends WebchatApp {
+//   constructor(args: WebchatAppArgs)
+//   onUserInput(args: OnUserInputArgs): Promise<void>
+//   render(dest: HTMLElement, optionsAtRuntime: WebchatAppArgs): void
+// }
+
+export * from './components'
+export * from './util'
+export * from './webchat'

package/src/{index.js → index.ts}

@@ -1,10 +1,11 @@
 export { BotonicInputTester, BotonicOutputTester } from './botonic-tester'
-export * from './components'
-export { RequestContext, WebchatContext } from './contexts'
+// export * from './components'
+// export { RequestContext, WebchatContext } from './contexts'
 export { DevApp } from './dev-app'
+export * from './index-types'
 export { msgsToBotonic, msgToBotonic } from './msg-to-botonic'
 export { NodeApp } from './node-app'
-export { staticAsset } from './util/environment'
-export { getBotonicApp, Webchat } from './webchat/index.js'
+// export { staticAsset } from './util/environment'
+// export { getBotonicApp, Webchat } from './webchat/index'
 export { WebchatApp } from './webchat-app'
 export { WebviewApp } from './webview-app'

package/src/msg-to-botonic.jsx

@@ -1,16 +1,5 @@
 import React from 'react'
 
-import {
-  isAudio,
-  isButtonMessage,
-  isCarousel,
-  isCustom,
-  isDocument,
-  isImage,
-  isLocation,
-  isText,
-  isVideo,
-} from './message-utils'
 import { Audio } from './components/audio'
 import { Button } from './components/button'
 import { ButtonsDisabler } from './components/buttons-disabler'
@@ -25,6 +14,17 @@ import { Subtitle } from './components/subtitle'
 import { Text } from './components/text'
 import { Title } from './components/title'
 import { Video } from './components/video'
+import {
+  isAudio,
+  isButtonMessage,
+  isCarousel,
+  isCustom,
+  isDocument,
+  isImage,
+  isLocation,
+  isText,
+  isVideo,
+} from './message-utils'
 
 /**
  *

package/src/util/error-boundary.jsx

@@ -1,48 +1,33 @@
+// @ts-nocheck
 import { isNode } from '@botonic/core'
-import React from 'react'
+import React, { useState } from 'react'
 
 import { Text } from '../components/text'
 
-/**
- * Replaces crashed children with the provided fallback component.
- * https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html
- * See alternative at https://stackoverflow.com/a/60255291/145289
- */
 export const createErrorBoundary = ({
-  errorComponent = props => <Text>The message cannot be displayed</Text>,
+  errorComponent = ({ errorMessage }) => (
+    <Text>The message cannot be displayed</Text>
+  ),
 } = {}) => {
-  class ErrorBoundary extends React.Component {
-    constructor(props) {
-      super(props)
-      this.state = { error: null }
-    }
+  const ErrorBoundary = ({ children }) => {
+    const [error, setError] = useState(null)
 
-    /**
-     * @param error the exception which was trown
-     * @param errorInfo the stack of component names at the error
-     */
-    componentDidCatch(error, errorInfo) {
-      // No need to log the error because at least chrome & firefox already show
-      // both component and call stacks
+    const componentDidCatch = (error, errorInfo) => {
       if (isNode()) {
-        // In node, only the component stack is displayed
         console.error(`Failure at:`, error)
       }
     }
 
-    static getDerivedStateFromError(error) {
+    const getDerivedStateFromError = error => {
       return { error }
     }
 
-    render() {
-      if (this.state.error) {
-        return errorComponent({
-          ...this.props,
-          errorMessage: this.state.error.message,
-        })
-      } else {
-        return this.props.children
-      }
+    if (error) {
+      return errorComponent({
+        errorMessage: error.message,
+      })
+    } else {
+      return children
     }
   }
 

package/src/util/webchat.js

@@ -10,21 +10,20 @@ import { getProperty } from './objects'
  * It gives preference to nested defined properties (e.g.: header.style) over plain properties (e.g.: headerStyle).
  * If property doesn't exist, returns the defaultValue.
  */
-export const _getThemeProperty = theme => (
-  property,
-  defaultValue = undefined
-) => {
-  for (const [k, v] of Object.entries(WEBCHAT.CUSTOM_PROPERTIES)) {
-    if (v == property) {
-      const nestedProperty = getProperty(theme, v)
-      if (nestedProperty !== undefined) return nestedProperty
-      const plainProperty = getProperty(theme, k)
-      if (plainProperty !== undefined) return plainProperty
-      return defaultValue
+export const _getThemeProperty =
+  theme =>
+  (property, defaultValue = undefined) => {
+    for (const [k, v] of Object.entries(WEBCHAT.CUSTOM_PROPERTIES)) {
+      if (v == property) {
+        const nestedProperty = getProperty(theme, v)
+        if (nestedProperty !== undefined) return nestedProperty
+        const plainProperty = getProperty(theme, k)
+        if (plainProperty !== undefined) return plainProperty
+        return defaultValue
+      }
     }
+    return undefined
   }
-  return undefined
-}
 
 export const createUser = () => {
   const parser = new UAParser()