WIP: create ThemeProvider from styled-components

hubtype · Jan 10, 2025 · 43373ab · 43373ab
1 parent 6bc71bf
commit 43373ab
Show file tree

Hide file tree

Showing 5 changed files with 131 additions and 61 deletions.
diff --git a/packages/botonic-react/src/webchat/header/default-header.tsx b/packages/botonic-react/src/webchat/header/default-header.tsx
@@ -52,7 +52,7 @@ export const DefaultHeader = () => {
   return (
     <HeaderContainer
       role={ROLES.HEADER}
-      color={color}
+      // color={color}
       style={{ ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.headerStyle) }}
     >
       {headerImage && (

diff --git a/packages/botonic-react/src/webchat/header/styles.ts b/packages/botonic-react/src/webchat/header/styles.ts
@@ -4,11 +4,12 @@ import { COLORS, WEBCHAT } from '../../constants'
 
 export const HeaderContainer = styled.div`
   display: flex;
-  background: linear-gradient(
+  /* background: linear-gradient(
     90deg,
     ${COLORS.BLEACHED_CEDAR_PURPLE} 0%,
     ${props => props.color} 100%
-  );
+  ); */
+  background: ${props => props.theme.colors?.primary};
   border-radius: ${WEBCHAT.DEFAULTS.BORDER_RADIUS_TOP_CORNERS};
   z-index: 2;
   height: inherit;

diff --git a/packages/botonic-react/src/webchat/theme/theme.d.ts b/packages/botonic-react/src/webchat/theme/theme.d.ts
@@ -0,0 +1,61 @@
+import 'styled-components'
+
+// With this declaration, we can use the theme prop in styled components with TyeScript
+declare module 'styled-components' {
+  export interface DefaultTheme {
+    colors?: {
+      primary: string
+      primaryHover: string
+      primaryDisabled: string
+      secondary: string
+      secondaryHover: string
+      secondaryDisabled: string
+    }
+    // style: {
+    //   width: number
+    //   height: number
+    //   borderRadius?: string
+    //   fontFamily?: string
+    //   fontSize?: string
+    //   position: 'fixed' | 'absolute'
+    //   right: number
+    //   bottom: number
+    // }
+    // mobileBreakpoint?: number
+    // mobileStyle?: {
+    //   width?: string
+    //   height?: string
+    //   borderRadius?: string
+    //   fontSize?: string
+    //   position: 'fixed' | 'absolute'
+    //   right: number
+    //   bottom: number
+    // }
+    // header?: {
+    //   borderRadius?: string
+    //   image?: string
+    //   color?: string
+    // }
+    // message?: {
+    //   bot?: {
+    //     backgroundColor?: string
+    //     image?: string
+    //     imagePosition: 'next' | 'footer'
+    //   }
+    //   agent?: {
+    //     backgroundColor?: string
+    //     image?: string
+    //     imagePosition: 'next' | 'footer'
+    //   }
+    //   user?: {
+    //     backgroundColor?: string
+    //   }
+    //   timestamps?: {
+    //     withImage?: boolean
+    //     format: () => string
+    //     style?: any
+    //     enable?: boolean
+    //   }
+    // }
+  }
+}
diff --git a/packages/botonic-react/src/webchat/theme/types.ts b/packages/botonic-react/src/webchat/theme/types.ts
@@ -14,6 +14,12 @@ import {
 // Functionalities should have the functionalities as enable or disable diferents behaviors
 export interface ThemeProps {
   style?: any
+  //   style:{
+  //   width: number
+  //   height: number
+  //   borderRadius?: string
+  //   fontFamily?: string
+  // }
   coverComponent?: CoverComponentOptions
   mobileBreakpoint?: number
   mobileStyle?: any

diff --git a/packages/botonic-react/src/webchat/webchat.tsx b/packages/botonic-react/src/webchat/webchat.tsx
@@ -13,7 +13,7 @@ import React, {
   useRef,
   useState,
 } from 'react'
-import { StyleSheetManager } from 'styled-components'
+import { StyleSheetManager, ThemeProvider } from 'styled-components'
 import { v7 as uuidv7 } from 'uuid'
 
 import {
@@ -706,63 +706,65 @@ const Webchat = forwardRef<WebchatRef | null, WebchatProps>((props, ref) => {
         scrollableMessagesListRef,
       }}
     >
-      {!webchatState.isWebchatOpen && <TriggerButton />}
-
-      {webchatState.isWebchatOpen && (
-        <StyledWebchat
-          id={BotonicContainerId.Webchat}
-          ref={webchatRef}
-          // TODO: Distinguish between multiple instances of webchat, e.g. `${uniqueId}-botonic-webchat`
-          role={ROLES.WEBCHAT}
-          width={webchatState.theme.style.width}
-          height={webchatState.theme.style.height}
-          style={{
-            ...webchatState.theme.style,
-            ...mobileStyle,
-          }}
-        >
-          <WebchatHeader ref={headerRef} />
-
-          {webchatState.isCoverComponentOpen ? (
-            <CoverComponent
-              component={coverComponent}
-              componentProps={coverComponentProps}
-            />
-          ) : (
-            <>
-              {webchatState.error.message && (
-                <ErrorMessageContainer>
-                  <ErrorMessage>{webchatState.error.message}</ErrorMessage>
-                </ErrorMessageContainer>
-              )}
-
-              <ChatArea />
-
-              {webchatState.isPersistentMenuOpen && (
-                <DarkenBackground component={persistentMenu()} />
-              )}
-
-              {!webchatState.handoff && userInputEnabled && (
-                <InputPanel
-                  persistentMenu={props.persistentMenu}
-                  enableEmojiPicker={props.enableEmojiPicker}
-                  enableAttachments={props.enableAttachments}
-                  handleAttachment={handleAttachment}
-                  textareaRef={textareaRef}
-                  host={host}
-                  onUserInput={props.onUserInput}
-                />
-              )}
-
-              {webchatState.webview && webchatWebview()}
-
-              {webchatState.isCustomComponentRendered &&
-                customComponent &&
-                _renderCustomComponent()}
-            </>
-          )}
-        </StyledWebchat>
-      )}
+      <ThemeProvider theme={webchatState.theme}>
+        {!webchatState.isWebchatOpen && <TriggerButton />}
+
+        {webchatState.isWebchatOpen && (
+          <StyledWebchat
+            id={BotonicContainerId.Webchat}
+            ref={webchatRef}
+            // TODO: Distinguish between multiple instances of webchat, e.g. `${uniqueId}-botonic-webchat`
+            role={ROLES.WEBCHAT}
+            width={webchatState.theme.style.width}
+            height={webchatState.theme.style.height}
+            style={{
+              ...webchatState.theme.style,
+              ...mobileStyle,
+            }}
+          >
+            <WebchatHeader ref={headerRef} />
+
+            {webchatState.isCoverComponentOpen ? (
+              <CoverComponent
+                component={coverComponent}
+                componentProps={coverComponentProps}
+              />
+            ) : (
+              <>
+                {webchatState.error.message && (
+                  <ErrorMessageContainer>
+                    <ErrorMessage>{webchatState.error.message}</ErrorMessage>
+                  </ErrorMessageContainer>
+                )}
+
+                <ChatArea />
+
+                {webchatState.isPersistentMenuOpen && (
+                  <DarkenBackground component={persistentMenu()} />
+                )}
+
+                {!webchatState.handoff && userInputEnabled && (
+                  <InputPanel
+                    persistentMenu={props.persistentMenu}
+                    enableEmojiPicker={props.enableEmojiPicker}
+                    enableAttachments={props.enableAttachments}
+                    handleAttachment={handleAttachment}
+                    textareaRef={textareaRef}
+                    host={host}
+                    onUserInput={props.onUserInput}
+                  />
+                )}
+
+                {webchatState.webview && webchatWebview()}
+
+                {webchatState.isCustomComponentRendered &&
+                  customComponent &&
+                  _renderCustomComponent()}
+              </>
+            )}
+          </StyledWebchat>
+        )}
+      </ThemeProvider>
     </WebchatContext.Provider>
   )