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

2023-03-02 12:24:20 +01:00
parent b2ad91c11f
commit cce63dfea3
17 changed files with 67 additions and 29 deletions
--- 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",
--- 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)}>
--- 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 />
--- 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"
        >
--- 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
          />
--- 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>
--- 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"
            />
--- 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"
          >
--- 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
        />
--- 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',
                  }}
--- 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}
--- 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}
--- 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}
--- 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}
--- 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}
--- 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': {