chore(components): renamed quick_reply to single-choice and added qui…

…ck_reply component (#275) * chore(components): renamed quick_reply to single-choice and added quick_reply component * v0.0.8
botpress · Dec 6, 2021 · c87e430 · c87e430
1 parent 57d2b21
commit c87e430
Show file tree

Hide file tree

Showing 11 changed files with 392 additions and 347 deletions.
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@botpress/messaging-components",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "source": "src/index.tsx",
@@ -29,13 +29,13 @@
   },
   "devDependencies": {
     "@babel/core": "^7.15.8",
-    "@storybook/addon-essentials": "^6.4.4",
-    "@storybook/addon-links": "^6.4.4",
-    "@storybook/addon-measure": "^6.4.4",
-    "@storybook/components": "^6.4.4",
-    "@storybook/core-events": "^6.4.4",
-    "@storybook/react": "^6.4.4",
-    "@storybook/theming": "^6.4.4",
+    "@storybook/addon-essentials": "^6.4.8",
+    "@storybook/addon-links": "^6.4.8",
+    "@storybook/addon-measure": "^6.4.8",
+    "@storybook/components": "^6.4.8",
+    "@storybook/core-events": "^6.4.8",
+    "@storybook/react": "^6.4.8",
+    "@storybook/theming": "^6.4.8",
     "@testing-library/dom": "^8.10.1",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.0",

diff --git a/packages/components/src/content-typings.ts b/packages/components/src/content-typings.ts
@@ -11,6 +11,7 @@ export const messageTypes = [
   'card',
   'carousel',
   'location',
+  'single-choice',
   'quick_reply',
   'login_prompt',
   'session_reset',
@@ -99,12 +100,17 @@ export type ActionButton<A extends ActionType> = {
     }
   : {})
 
-export interface ChoiceContent extends BaseContent<'quick_reply'> {
+export interface ChoiceContent extends BaseContent<'single-choice'> {
   text: string
   disableFreeText?: boolean
   choices: ChoiceOption[]
 }
 
+export interface QuickReplyContent extends BaseContent<'quick_reply'> {
+  text: string
+  payload: string
+}
+
 export interface ChoiceOption {
   title: string
   value: string
@@ -153,8 +159,10 @@ export type Content<T extends MessageType> = T extends 'text'
   ? LocationContent
   : T extends 'dropdown'
   ? DropdownContent
-  : T extends 'quick_reply'
+  : T extends 'single-choice'
   ? ChoiceContent
+  : T extends 'quick_reply'
+  ? QuickReplyContent
   : T extends 'login_prompt'
   ? LoginPromptContent
   : T extends 'custom'

diff --git a/packages/components/src/css/botpress-default.css b/packages/components/src/css/botpress-default.css
@@ -434,7 +434,7 @@ body {
   border-bottom-left-radius: 0px;
 }
 
-.bpw-keyboard-quick_reply {
+.bpw-keyboard-single-choice {
   background-color: #fbfbfb;
   padding: 15px 20px;
   text-align: left;
@@ -619,7 +619,7 @@ body {
   right: 0;
 }
 
-.bpw-keyboard-quick_reply-dropdown {
+.bpw-keyboard-single-choice-dropdown {
   margin: 0.2rem 0.5rem;
 }
 
@@ -1085,6 +1085,6 @@ body {
   direction: rtl;
 }
 
-.bpw-rtl .bpw-keyboard-quick_reply-dropdown {
+.bpw-rtl .bpw-keyboard-single-choice-dropdown {
   direction: rtl;
 }
diff --git a/packages/components/src/react-text-format.d.ts b/packages/components/src/react-text-format.d.ts
@@ -0,0 +1,15 @@
+declare module 'react-text-format' {
+  interface Props {
+    allowedFormats?: ('URL' | 'Email' | 'Image' | 'Phone' | 'CreditCard' | 'Term')[]
+    linkTarget?: '_blank' | '_self' | '_parent' | '_top' | 'framename'
+    terms?: string[]
+    linkDecorator?: (decoratedHref: string, decoratedText: string, linkTarget: string) => React.Component
+    emailDecorator?: (decoratedHref: string, decoratedText: string) => React.Component
+    phoneDecorator?: (decoratedText: string) => React.Component
+    creditCardDecorator?: (decoratedText: string) => React.Component
+    imageDecorator?: (decoratedURL: string) => React.Component
+    termDecorator?: (decoratedText: string) => React.Component
+  }
+
+  export default class ReactFormatter extends React.Component<Props> {}
+}
diff --git a/packages/components/src/renderer/choice.tsx b/packages/components/src/renderer/choice.tsx
@@ -3,11 +3,12 @@ import { Button } from '../base/button'
 import { ChoiceOption } from '../content-typings'
 import { MessageTypeHandlerProps } from '../typings'
 import { Prepend } from './keyboard'
+import { Text } from './text'
 
 /**
  * Displays an array of button, and handle when they are clicked
  */
-export class QuickReplies extends Component<MessageTypeHandlerProps<'quick_reply'>> {
+export class SingleChoice extends Component<MessageTypeHandlerProps<'single-choice'>> {
   componentDidMount() {
     this.props.config.isLastGroup &&
       this.props.config.isLastOfGroup &&
@@ -46,12 +47,20 @@ export class QuickReplies extends Component<MessageTypeHandlerProps<'quick_reply
   }
 
   render() {
+    const shouldDisplay = this.props.config.isLastGroup && this.props.config.isLastOfGroup
     const buttons = this.props.choices
-    const keyboard = <div className={'bpw-keyboard-quick_reply'}>{buttons && this.renderKeyboard(buttons)}</div>
+    const keyboard = <div className={'bpw-keyboard-single-choice'}>{buttons && this.renderKeyboard(buttons)}</div>
     return (
-      <Prepend keyboard={keyboard} visible={this.props.config.isLastGroup && this.props.config.isLastOfGroup}>
-        {this.props.children}
-      </Prepend>
+      <div>
+        {this.props.text}
+        <Prepend keyboard={keyboard} visible={shouldDisplay}>
+          {this.props.children}
+        </Prepend>
+      </div>
     )
   }
 }
+
+export const QuickReply: React.FC<MessageTypeHandlerProps<'quick_reply'>> = ({ text, config }) => {
+  return <Text text={text} config={config} />
+}
diff --git a/packages/components/src/renderer/dropdown.tsx b/packages/components/src/renderer/dropdown.tsx
@@ -44,7 +44,7 @@ export const Dropdown = ({
 
   const renderSelect = (inKeyboard: boolean) => {
     return (
-      <div className={inKeyboard ? 'bpw-keyboard-quick_reply-dropdown' : ''}>
+      <div className={inKeyboard ? 'bpw-keyboard-single-choice-dropdown' : ''}>
         <div style={{ width: width || '100%', display: 'inline-block' }}>
           {allowCreation ? (
             <Creatable

diff --git a/packages/components/src/renderer/index.tsx b/packages/components/src/renderer/index.tsx
@@ -2,7 +2,7 @@ import React, { ReactElement } from 'react'
 import { MessageType } from '../content-typings'
 import { Message, MessageTypeHandlerProps } from '../typings'
 import { Carousel, Card } from './carousel'
-import { QuickReplies } from './choice'
+import { QuickReply, SingleChoice } from './choice'
 import { Custom } from './custom'
 import { Dropdown } from './dropdown'
 import { Video, Audio, Image, File } from './file'
@@ -13,7 +13,8 @@ import { VoiceMessage } from './voice'
 
 export const defaultTypesRenderers = {
   text: Text,
-  quick_reply: QuickReplies,
+  'single-choice': SingleChoice,
+  quick_reply: QuickReply,
   login_prompt: LoginPrompt,
   carousel: Carousel,
   card: Card,
@@ -95,7 +96,8 @@ export {
   Video,
   Audio,
   Text,
-  QuickReplies,
+  SingleChoice,
+  QuickReply,
   LoginPrompt,
   Dropdown,
   VoiceMessage,

diff --git a/packages/components/src/renderer/text.tsx b/packages/components/src/renderer/text.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-// @ts-ignore
 import ReactTextFormat from 'react-text-format'
 import { MessageTypeHandlerProps } from '../typings'
 import { renderUnsafeHTML } from '../utils'

diff --git a/packages/components/story/choice.stories.tsx b/packages/components/story/choice.stories.tsx
@@ -1,15 +1,15 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react'
 import React, { useEffect, useState } from 'react'
 import { Button } from '../src/base/button'
-import { QuickReplies } from '../src/renderer/choice'
+import { QuickReply, SingleChoice } from '../src/renderer/choice'
 import { Keyboard } from '../src/renderer/keyboard'
 import { LiteStore } from '../src/typings'
 import { defaultMessageConfig } from '../src/utils'
 
 export default {
-  title: 'QuickReplies',
-  component: QuickReplies
-} as ComponentMeta<typeof QuickReplies>
+  title: 'Choice',
+  component: SingleChoice
+} as ComponentMeta<typeof SingleChoice>
 
 class ComposerStateManager {
   public locked = false
@@ -23,7 +23,7 @@ class BasicLiteStore implements LiteStore {
   public composer = new ComposerStateManager()
 }
 
-const Template: ComponentStory<typeof QuickReplies> = (args) => {
+const Template: ComponentStory<typeof SingleChoice> = (args) => {
   const [shown, setShown] = useState<boolean>(false)
   useEffect(() => {
     setTimeout(() => {
@@ -32,7 +32,7 @@ const Template: ComponentStory<typeof QuickReplies> = (args) => {
   }, [setShown])
   return (
     <>
-      {shown && <QuickReplies {...args} />}
+      {shown && <SingleChoice {...args} />}
       <Keyboard>
         <textarea placeholder="placeholder composer" disabled={args.config.store?.composer.locked} />
       </Keyboard>
@@ -101,3 +101,15 @@ QuickReplyButton.args = {
     alert(`onUploadError called with: ${error}`)
   }
 }
+
+const QuickReplyTemplate: ComponentStory<typeof QuickReply> = (args) => <QuickReply {...args} />
+
+export const QuickReplyText = QuickReplyTemplate.bind({})
+
+QuickReplyText.args = {
+  text: 'Selected option 1',
+  payload: 'option1',
+  config: {
+    ...defaultMessageConfig
+  }
+}
diff --git a/packages/components/test/unit/choice.test.tsx b/packages/components/test/unit/choice.test.tsx
@@ -2,7 +2,7 @@ import { fireEvent, render } from '@testing-library/react'
 import React from 'react'
 import { Button } from '../../src/base/button'
 
-describe('Quick Reply Button element', () => {
+describe('Single Choice Button element', () => {
   test('it renders a simple button correctly', () => {
     const label = 'Hello'
     const onFileUpload = jest.fn()