blsmedia/bot
2
0
Fork 0
Code Activity

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

Browse Source
This commit is contained in:
Baptiste Arnaud
2023-03-02 12:24:20 +01:00
parent b2ad91c11f
commit cce63dfea3
17 changed files with 67 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/js/package.json
View File

@ -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",

2
packages/js/src/components/ConversationContainer/ChatChunk.tsx
View File

@ -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)}>

2
packages/js/src/components/ConversationContainer/LoadingChunk.tsx
View File

@ -21,7 +21,7 @@ export const LoadingChunk = (props: Props) => (
style={{
'margin-right': props.theme.chat.guestAvatar?.isEnabled
? '50px'
: '0.5rem',
: '8px',
}}
>
<LoadingBubble />

4
packages/js/src/components/bubbles/LoadingBubble.tsx
View File

@ -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"
>

6
packages/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx
View File

@ -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
/>

6
packages/js/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx
View File

@ -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>

8
packages/js/src/features/blocks/bubbles/image/components/ImageBubble.tsx
View File

@ -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"
/>

4
packages/js/src/features/blocks/bubbles/textBubble/components/TextBubble.tsx
View File

@ -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"
>

8
packages/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx
View File

@ -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
/>

4
packages/js/src/features/blocks/inputs/date/components/DateForm.tsx
View File

@ -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',
}}

2
packages/js/src/features/blocks/inputs/email/components/EmailInput.tsx
View File

@ -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}

2
packages/js/src/features/blocks/inputs/number/components/NumberInput.tsx
View File

@ -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}

2
packages/js/src/features/blocks/inputs/phone/components/PhoneInput.tsx
View File

@ -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}

2
packages/js/src/features/blocks/inputs/textInput/components/TextInput.tsx
View File

@ -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}

2
packages/js/src/features/blocks/inputs/url/components/UrlInput.tsx
View File

@ -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}

38
packages/js/tailwind.config.cjs
View File

@ -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': {

2
packages/react/package.json
View File

@ -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",