♿ (js) Use px instead of rem to look good on any website

baptisteArno · Mar 2, 2023 · cce63df · cce63df · vercel · Mar 2, 2023
1 parent b2ad91c
commit cce63df
Show file tree

Hide file tree

Showing 17 changed files with 67 additions and 29 deletions.
diff --git a/packages/js/package.json b/packages/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

diff --git a/packages/js/src/components/ConversationContainer/ChatChunk.tsx b/packages/js/src/components/ConversationContainer/ChatChunk.tsx
@@ -61,7 +61,7 @@ export const ChatChunk = (props: Props) => {
             style={{
               'margin-right': props.theme.chat.guestAvatar?.isEnabled
                 ? '50px'
-                : '0.5rem',
+                : '8px',
             }}
           >
             <For each={props.messages.slice(0, displayedMessageIndex() + 1)}>

diff --git a/packages/js/src/components/ConversationContainer/LoadingChunk.tsx b/packages/js/src/components/ConversationContainer/LoadingChunk.tsx
@@ -21,7 +21,7 @@ export const LoadingChunk = (props: Props) => (
           style={{
             'margin-right': props.theme.chat.guestAvatar?.isEnabled
               ? '50px'
-              : '0.5rem',
+              : '8px',
           }}
         >
           <LoadingBubble />

diff --git a/packages/js/src/components/bubbles/LoadingBubble.tsx b/packages/js/src/components/bubbles/LoadingBubble.tsx
@@ -7,8 +7,8 @@ export const LoadingBubble = () => (
         <div
           class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing "
           style={{
-            width: '4rem',
-            height: '2rem',
+            width: '64px',
+            height: '32px',
           }}
           data-testid="host-bubble"
         >

diff --git a/packages/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx b/packages/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx
@@ -35,8 +35,8 @@ export const AudioBubble = (props: Props) => {
           <div
             class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "
             style={{
-              width: isTyping() ? '4rem' : '100%',
-              height: isTyping() ? '2rem' : '100%',
+              width: isTyping() ? '64px' : '100%',
+              height: isTyping() ? '32px' : '100%',
             }}
           >
             {isTyping() && <TypingBubble />}
@@ -47,7 +47,7 @@ export const AudioBubble = (props: Props) => {
               'z-10 text-fade-in m-2 ' +
               (isTyping() ? 'opacity-0' : 'opacity-100')
             }
-            style={{ height: isTyping() ? '2rem' : 'revert' }}
+            style={{ height: isTyping() ? '32px' : 'revert' }}
             autoplay
             controls
           />

diff --git a/packages/js/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx b/packages/js/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx
@@ -36,8 +36,8 @@ export const EmbedBubble = (props: Props) => {
           <div
             class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "
             style={{
-              width: isTyping() ? '4rem' : '100%',
-              height: isTyping() ? '2rem' : '100%',
+              width: isTyping() ? '64px' : '100%',
+              height: isTyping() ? '32px' : '100%',
             }}
           >
             {isTyping() && <TypingBubble />}
@@ -50,7 +50,7 @@ export const EmbedBubble = (props: Props) => {
               (isTyping() ? 'opacity-0' : 'opacity-100')
             }
             style={{
-              height: isTyping() ? '2rem' : `${props.content.height}px`,
+              height: isTyping() ? '32px' : `${props.content.height}px`,
             }}
           />
         </div>

diff --git a/packages/js/src/features/blocks/bubbles/image/components/ImageBubble.tsx b/packages/js/src/features/blocks/bubbles/image/components/ImageBubble.tsx
@@ -45,8 +45,8 @@ export const ImageBubble = (props: Props) => {
           <div
             class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "
             style={{
-              width: isTyping() ? '4rem' : '100%',
-              height: isTyping() ? '2rem' : '100%',
+              width: isTyping() ? '64px' : '100%',
+              height: isTyping() ? '32px' : '100%',
             }}
           >
             {isTyping() ? <TypingBubble /> : null}
@@ -60,8 +60,8 @@ export const ImageBubble = (props: Props) => {
                 (isTyping() ? 'opacity-0' : 'opacity-100')
               }
               style={{
-                'max-height': '32rem',
-                height: isTyping() ? '2rem' : 'auto',
+                'max-height': '512px',
+                height: isTyping() ? '32px' : 'auto',
               }}
               alt="Bubble image"
             />

diff --git a/packages/js/src/features/blocks/bubbles/textBubble/components/TextBubble.tsx b/packages/js/src/features/blocks/bubbles/textBubble/components/TextBubble.tsx
@@ -53,8 +53,8 @@ export const TextBubble = (props: Props) => {
           <div
             class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing "
             style={{
-              width: isTyping() ? '4rem' : '100%',
-              height: isTyping() ? '2rem' : '100%',
+              width: isTyping() ? '64px' : '100%',
+              height: isTyping() ? '32px' : '100%',
             }}
             data-testid="host-bubble"
           >

diff --git a/packages/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx b/packages/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx
@@ -38,8 +38,8 @@ export const VideoBubble = (props: Props) => {
           <div
             class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "
             style={{
-              width: isTyping() ? '4rem' : '100%',
-              height: isTyping() ? '2rem' : '100%',
+              width: isTyping() ? '64px' : '100%',
+              height: isTyping() ? '32px' : '100%',
             }}
           >
             {isTyping() && <TypingBubble />}
@@ -72,7 +72,7 @@ const VideoContent = (props: VideoContentProps) => {
             (props.isTyping ? 'opacity-0' : 'opacity-100')
           }
           style={{
-            height: props.isTyping ? '2rem' : 'auto',
+            height: props.isTyping ? '32px' : 'auto',
             'max-height': window.navigator.vendor.match(/apple/i) ? '40vh' : '',
           }}
           autoplay
@@ -100,7 +100,7 @@ const VideoContent = (props: VideoContentProps) => {
             'w-full p-4 text-fade-in z-10 rounded-md ' +
             (props.isTyping ? 'opacity-0' : 'opacity-100')
           }
-          height={props.isTyping ? '2rem' : '200px'}
+          height={props.isTyping ? '32px' : '200px'}
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
           allowfullscreen
         />

diff --git a/packages/js/src/features/blocks/inputs/date/components/DateForm.tsx b/packages/js/src/features/blocks/inputs/date/components/DateForm.tsx
@@ -46,7 +46,7 @@ export const DateForm = (props: Props) => {
               <input
                 class="focus:outline-none flex-1 w-full text-input"
                 style={{
-                  'min-height': '2rem',
+                  'min-height': '32px',
                   'min-width': '100px',
                   'font-size': '16px',
                 }}
@@ -70,7 +70,7 @@ export const DateForm = (props: Props) => {
                 <input
                   class="focus:outline-none flex-1 w-full text-input ml-2"
                   style={{
-                    'min-height': '2rem',
+                    'min-height': '32px',
                     'min-width': '100px',
                     'font-size': '16px',
                   }}

diff --git a/packages/js/src/features/blocks/inputs/email/components/EmailInput.tsx b/packages/js/src/features/blocks/inputs/email/components/EmailInput.tsx
@@ -40,7 +40,7 @@ export const EmailInput = (props: Props) => {
       }
       data-testid="input"
       style={{
-        'margin-right': props.hasGuestAvatar ? '50px' : '0.5rem',
+        'margin-right': props.hasGuestAvatar ? '50px' : '8px',
         'max-width': '350px',
       }}
       onKeyDown={submitWhenEnter}

diff --git a/packages/js/src/features/blocks/inputs/number/components/NumberInput.tsx b/packages/js/src/features/blocks/inputs/number/components/NumberInput.tsx
@@ -40,7 +40,7 @@ export const NumberInput = (props: NumberInputProps) => {
       }
       data-testid="input"
       style={{
-        'margin-right': props.hasGuestAvatar ? '50px' : '0.5rem',
+        'margin-right': props.hasGuestAvatar ? '50px' : '8px',
         'max-width': '350px',
       }}
       onKeyDown={submitWhenEnter}

diff --git a/packages/js/src/features/blocks/inputs/phone/components/PhoneInput.tsx b/packages/js/src/features/blocks/inputs/phone/components/PhoneInput.tsx
@@ -67,7 +67,7 @@ export const PhoneInput = (props: PhoneInputProps) => {
       class={'flex items-end justify-between rounded-lg pr-2 typebot-input'}
       data-testid="input"
       style={{
-        'margin-right': props.hasGuestAvatar ? '50px' : '0.5rem',
+        'margin-right': props.hasGuestAvatar ? '50px' : '8px',
         'max-width': '400px',
       }}
       onKeyDown={submitWhenEnter}

diff --git a/packages/js/src/features/blocks/inputs/textInput/components/TextInput.tsx b/packages/js/src/features/blocks/inputs/textInput/components/TextInput.tsx
@@ -41,7 +41,7 @@ export const TextInput = (props: Props) => {
       }
       data-testid="input"
       style={{
-        'margin-right': props.hasGuestAvatar ? '50px' : '0.5rem',
+        'margin-right': props.hasGuestAvatar ? '50px' : '8px',
         'max-width': props.block.options.isLong ? undefined : '350px',
       }}
       onKeyDown={submitWhenEnter}

diff --git a/packages/js/src/features/blocks/inputs/url/components/UrlInput.tsx b/packages/js/src/features/blocks/inputs/url/components/UrlInput.tsx
@@ -46,7 +46,7 @@ export const UrlInput = (props: Props) => {
       }
       data-testid="input"
       style={{
-        'margin-right': props.hasGuestAvatar ? '50px' : '0.5rem',
+        'margin-right': props.hasGuestAvatar ? '50px' : '8px',
         'max-width': '350px',
       }}
       onKeyDown={submitWhenEnter}

diff --git a/packages/js/tailwind.config.cjs b/packages/js/tailwind.config.cjs
@@ -1,7 +1,45 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const defaultTheme = require('tailwindcss/defaultTheme')
+
+function rem2px(input, fontSize = 16) {
+  if (input == null) {
+    return input
+  }
+  switch (typeof input) {
+    case 'object':
+      if (Array.isArray(input)) {
+        return input.map((val) => rem2px(val, fontSize))
+      }
+      // eslint-disable-next-line no-case-declarations
+      const ret = {}
+      for (const key in input) {
+        ret[key] = rem2px(input[key], fontSize)
+      }
+      return ret
+    case 'string':
+      return input.replace(
+        /(\d*\.?\d+)rem$/,
+        (_, val) => `${parseFloat(val) * fontSize}px`
+      )
+    case 'function':
+      return eval(
+        input
+          .toString()
+          .replace(
+            /(\d*\.?\d+)rem/g,
+            (_, val) => `${parseFloat(val) * fontSize}px`
+          )
+      )
+    default:
+      return input
+  }
+}
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
   theme: {
+    ...rem2px(defaultTheme),
     extend: {
       keyframes: {
         'fade-in': {

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "React library to display typebots on your website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",