From cce63dfea307338ff7f954024bd705f76aeb022a Mon Sep 17 00:00:00 2001 From: Baptiste Arnaud Date: Thu, 2 Mar 2023 12:24:20 +0100 Subject: [PATCH] :wheelchair: (js) Use px instead of rem to look good on any website --- packages/js/package.json | 2 +- .../ConversationContainer/ChatChunk.tsx | 2 +- .../ConversationContainer/LoadingChunk.tsx | 2 +- .../src/components/bubbles/LoadingBubble.tsx | 4 +- .../bubbles/audio/components/AudioBubble.tsx | 6 +-- .../bubbles/embed/components/EmbedBubble.tsx | 6 +-- .../bubbles/image/components/ImageBubble.tsx | 8 ++-- .../textBubble/components/TextBubble.tsx | 4 +- .../bubbles/video/components/VideoBubble.tsx | 8 ++-- .../inputs/date/components/DateForm.tsx | 4 +- .../inputs/email/components/EmailInput.tsx | 2 +- .../inputs/number/components/NumberInput.tsx | 2 +- .../inputs/phone/components/PhoneInput.tsx | 2 +- .../inputs/textInput/components/TextInput.tsx | 2 +- .../blocks/inputs/url/components/UrlInput.tsx | 2 +- packages/js/tailwind.config.cjs | 38 +++++++++++++++++++ packages/react/package.json | 2 +- 17 files changed, 67 insertions(+), 29 deletions(-) diff --git a/packages/js/package.json b/packages/js/package.json index 60ff554a4..2d05e7956 100644 --- 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 index dabcfd6c0..285ea398a 100644 --- 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', }} > diff --git a/packages/js/src/components/ConversationContainer/LoadingChunk.tsx b/packages/js/src/components/ConversationContainer/LoadingChunk.tsx index 25308515a..7869dabc9 100644 --- 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', }} > diff --git a/packages/js/src/components/bubbles/LoadingBubble.tsx b/packages/js/src/components/bubbles/LoadingBubble.tsx index be4da4b20..074f86a69 100644 --- a/packages/js/src/components/bubbles/LoadingBubble.tsx +++ b/packages/js/src/components/bubbles/LoadingBubble.tsx @@ -7,8 +7,8 @@ export const LoadingBubble = () => (
diff --git a/packages/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx b/packages/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx index be88d4496..58991ff31 100644 --- 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) => {
{isTyping() && } @@ -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 index 41d40c6c8..86d1dbc43 100644 --- 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) => {
{isTyping() && } @@ -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`, }} />
diff --git a/packages/js/src/features/blocks/bubbles/image/components/ImageBubble.tsx b/packages/js/src/features/blocks/bubbles/image/components/ImageBubble.tsx index fb447b206..24d673c37 100644 --- 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) => {
{isTyping() ? : 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 index d730585a9..14c8ba622 100644 --- 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) => {
diff --git a/packages/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx b/packages/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx index 1622b131d..b9fce3a7f 100644 --- 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) => {
{isTyping() && } @@ -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 index 1288f4497..8b2520943 100644 --- 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) => { { { } 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 index 7a9fb9eae..dcbf24da7 100644 --- 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 index 92a1138c1..2e3b5ee1c 100644 --- 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 index 8a79e7828..06a3fd875 100644 --- 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 index fb498a80b..1853bbee7 100644 --- 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 index 98b89c7ba..552bd8616 100644 --- 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 index 258f142f0..23da90695 100644 --- 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",