@botonic/react 0.44.0-alpha.1 → 0.44.0-alpha.2

package/src/components/multichannel/multichannel-utils.ts

@@ -0,0 +1,111 @@
+import { COMPONENT_DISPLAY_NAMES } from '../constants'
+
+interface ReactElementWithDisplayName {
+  type?: {
+    displayName?: string
+  }
+}
+
+interface ElementWithProps {
+  props?: {
+    url?: string
+    payload?: string
+    path?: string
+    webview?: unknown
+  }
+}
+
+export function isMultichannelButton(
+  node?: ReactElementWithDisplayName
+): boolean {
+  return node?.type?.displayName === COMPONENT_DISPLAY_NAMES.MultichannelButton
+}
+
+export function isMultichannelReply(
+  node?: ReactElementWithDisplayName
+): boolean {
+  return node?.type?.displayName === COMPONENT_DISPLAY_NAMES.MultichannelReply
+}
+
+export function isNodeText(node?: ReactElementWithDisplayName): boolean {
+  return node?.type?.displayName === COMPONENT_DISPLAY_NAMES.Text
+}
+
+export function isNodeButton(node?: ReactElementWithDisplayName): boolean {
+  return node?.type?.displayName === COMPONENT_DISPLAY_NAMES.Button
+}
+
+export function isNodeCarousel(node?: ReactElementWithDisplayName): boolean {
+  return node?.type?.displayName === COMPONENT_DISPLAY_NAMES.Carousel
+}
+
+export function isNodeReply(node?: ReactElementWithDisplayName): boolean {
+  return node?.type?.displayName === COMPONENT_DISPLAY_NAMES.Reply
+}
+
+export function isNodePic(node?: ReactElementWithDisplayName): boolean {
+  return node?.type?.displayName === COMPONENT_DISPLAY_NAMES.Pic
+}
+
+export function isNodeTitle(node?: ReactElementWithDisplayName): boolean {
+  return node?.type?.displayName === COMPONENT_DISPLAY_NAMES.Title
+}
+
+export function isNodeSubtitle(node?: ReactElementWithDisplayName): boolean {
+  return node?.type?.displayName === COMPONENT_DISPLAY_NAMES.Subtitle
+}
+
+export function elementHasUrl(element?: ElementWithProps): string | undefined {
+  return element?.props?.url
+}
+
+export function elementHasPostback(
+  element?: ElementWithProps
+): string | undefined {
+  return element?.props?.payload || element?.props?.path
+}
+
+export function elementHasWebview(element?: ElementWithProps): unknown {
+  return element?.props?.webview
+}
+
+export const buttonTypes = {
+  POSTBACK: 'postback',
+  URL: 'url',
+  WEBVIEW: 'webview',
+} as const
+
+export type ButtonType = (typeof buttonTypes)[keyof typeof buttonTypes]
+
+export function getButtonType(
+  multichannelButton?: ElementWithProps
+): ButtonType | undefined {
+  if (elementHasUrl(multichannelButton)) return buttonTypes.URL
+  if (elementHasPostback(multichannelButton)) return buttonTypes.POSTBACK
+  if (elementHasWebview(multichannelButton)) return buttonTypes.WEBVIEW
+
+  return undefined
+}
+
+export function getFilteredElements<T extends ReactElementWithDisplayName>(
+  node: Iterable<T>,
+  filter: (n: T) => boolean
+): T[] {
+  const elements: T[] = []
+  for (const n of node) {
+    if (filter(n)) elements.push(n)
+  }
+  return elements
+}
+
+export function getMultichannelButtons(
+  node: Iterable<ReactElementWithDisplayName>
+): ReactElementWithDisplayName[] {
+  return getFilteredElements(node, isMultichannelButton)
+}
+
+export function getMultichannelReplies(
+  node: Iterable<ReactElementWithDisplayName>
+): ReactElementWithDisplayName[] {
+  return getFilteredElements(node, isMultichannelReply)
+}

package/src/components/pic.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components'
 import { COLORS, WEBCHAT } from '../constants'
 import { staticAsset } from '../util/environment'
 import { renderComponent } from '../util/react'
+import { COMPONENT_DISPLAY_NAMES } from './constants'
 
 const PicStyled = styled.img`
   border-top-left-radius: 8px;
@@ -29,6 +30,8 @@ export const Pic = (props: PicProps) => {
   return renderComponent({ renderBrowser, renderNode })
 }
 
+Pic.displayName = COMPONENT_DISPLAY_NAMES.Pic
+
 Pic.serialize = (props: PicProps) => {
   return { pic: props.src }
 }

package/src/components/reply.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components'
 import { COLORS, WEBCHAT } from '../constants'
 import { renderComponent } from '../util/react'
 import { WebchatContext } from '../webchat/context'
+import { COMPONENT_DISPLAY_NAMES } from './constants'
 import { ReplyProps } from './index-types'
 
 const StyledButton = styled.button`
@@ -67,6 +68,8 @@ export const Reply = (props: ReplyProps) => {
   return renderComponent({ renderBrowser, renderNode })
 }
 
+Reply.displayName = COMPONENT_DISPLAY_NAMES.Reply
+
 Reply.serialize = (replyProps: ReplyProps) => {
   let payload = replyProps.payload
   if (replyProps.path) payload = `__PATH_PAYLOAD__${replyProps.path}`

package/src/components/subtitle.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components'
 
 import { COLORS } from '../constants'
 import { renderComponent } from '../util/react'
+import { COMPONENT_DISPLAY_NAMES } from './constants'
 
 const SubtitleContainer = styled.div`
   font-size: 12px;
@@ -24,6 +25,8 @@ export const Subtitle = (props: SubtitleProps) => {
   return renderComponent({ renderBrowser, renderNode })
 }
 
+Subtitle.displayName = COMPONENT_DISPLAY_NAMES.Subtitle
+
 Subtitle.serialize = (props: SubtitleProps) => {
   return { subtitle: props.children }
 }

package/src/components/text.tsx

@@ -2,6 +2,7 @@ import { INPUT } from '@botonic/core'
 import React, { Children } from 'react'
 
 import { mapObjectNonBooleanValues } from '../util/react'
+import { COMPONENT_DISPLAY_NAMES } from './constants'
 import { TextProps } from './index-types'
 import { serializeMarkdown, toMarkdownChildren } from './markdown'
 import { Message } from './message'
@@ -53,4 +54,6 @@ export const Text = (props: TextProps) => {
   )
 }
 
+Text.displayName = COMPONENT_DISPLAY_NAMES.Text
+
 Text.serialize = serialize

package/src/components/title.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 
 import { renderComponent } from '../util/react'
+import { COMPONENT_DISPLAY_NAMES } from './constants'
 
 const TitleContainer = styled.div`
   font-size: 14px;
@@ -19,6 +20,8 @@ export const Title = (props: TitleProps) => {
   return renderComponent({ renderBrowser, renderNode })
 }
 
+Title.displayName = COMPONENT_DISPLAY_NAMES.Title
+
 Title.serialize = (props: TitleProps) => {
   return { title: props.children }
 }

package/src/components/multichannel/multichannel-utils.js

@@ -1,91 +0,0 @@
-import { Button } from '../button/index'
-import { Carousel } from '../carousel'
-import { Pic } from '../pic'
-import { Reply } from '../reply'
-import { Subtitle } from '../subtitle'
-import { Text } from '../text'
-import { Title } from '../title'
-import { MultichannelButton } from './multichannel-button'
-import { MultichannelReply } from './multichannel-reply'
-
-function isNodeKind(node, kind) {
-  return node?.type?.name === kind
-}
-
-export function isMultichannelButton(node) {
-  return isNodeKind(node, MultichannelButton.name)
-}
-
-export function isMultichannelReply(node) {
-  return isNodeKind(node, MultichannelReply.name)
-}
-
-export function isNodeText(node) {
-  return isNodeKind(node, Text.name)
-}
-
-export function isNodeButton(node) {
-  return isNodeKind(node, Button.name)
-}
-
-export function isNodeCarousel(node) {
-  return isNodeKind(node, Carousel.name)
-}
-
-export function isNodeReply(node) {
-  return isNodeKind(node, Reply.name)
-}
-
-export function isNodePic(node) {
-  return isNodeKind(node, Pic.name)
-}
-
-export function isNodeTitle(node) {
-  return isNodeKind(node, Title.name)
-}
-
-export function isNodeSubtitle(node) {
-  return isNodeKind(node, Subtitle.name)
-}
-
-export function elementHasUrl(element) {
-  return element?.props?.url
-}
-
-export function elementHasPostback(element) {
-  return element?.props?.payload || element?.props?.path
-}
-
-export function elementHasWebview(element) {
-  return element?.props?.webview
-}
-
-export const buttonTypes = {
-  POSTBACK: 'postback',
-  URL: 'url',
-  WEBVIEW: 'webview',
-}
-
-export function getButtonType(multichannelButton) {
-  if (elementHasUrl(multichannelButton)) return buttonTypes.URL
-  if (elementHasPostback(multichannelButton)) return buttonTypes.POSTBACK
-  if (elementHasWebview(multichannelButton)) return buttonTypes.WEBVIEW
-
-  return undefined
-}
-
-export function getFilteredElements(node, filter) {
-  const elements = []
-  for (const n of node) {
-    if (filter(n)) elements.push(n)
-  }
-  return elements
-}
-
-export function getMultichannelButtons(node) {
-  return getFilteredElements(node, isMultichannelButton)
-}
-
-export function getMultichannelReplies(node) {
-  return getFilteredElements(node, isMultichannelReply)
-}