⚡ (theme) Add corner roundness customization

Closes #415

apps/builder/src/features/theme/components/chat/ChatThemeSettings.tsx

@@ -1,3 +1,9 @@
+import {
+  LargeRadiusIcon,
+  MediumRadiusIcon,
+  NoRadiusIcon,
+} from '@/components/icons'
+import { RadioButtons } from '@/components/inputs/RadioButtons'
 import { Heading, Stack } from '@chakra-ui/react'
 import {
   AvatarProps,
@@ -59,6 +65,29 @@ export const ChatThemeSettings = ({
           onHostBubblesChange={handleHostBubblesChange}
         />
       </Stack>
+      <Stack borderWidth={1} rounded="md" p="4" spacing={4}>
+        <Heading fontSize="lg">Corners roundness</Heading>
+        <RadioButtons
+          options={[
+            {
+              label: <NoRadiusIcon />,
+              value: 'none',
+            },
+            {
+              label: <MediumRadiusIcon />,
+              value: 'medium',
+            },
+            {
+              label: <LargeRadiusIcon />,
+              value: 'large',
+            },
+          ]}
+          defaultValue={chatTheme.roundness ?? 'medium'}
+          onSelect={(roundness) =>
+            onChatThemeChange({ ...chatTheme, roundness })
+          }
+        />
+      </Stack>
       <Stack borderWidth={1} rounded="md" p="4" spacing={4}>
         <Heading fontSize="lg">User bubbles</Heading>
         <GuestBubbles

apps/builder/src/features/theme/components/general/BackgroundSelector.tsx

@@ -1,8 +1,8 @@
+import { RadioButtons } from '@/components/inputs/RadioButtons'
 import { Stack, Text } from '@chakra-ui/react'
 import { Background, BackgroundType } from '@typebot.io/schemas'
 import React from 'react'
 import { BackgroundContent } from './BackgroundContent'
-import { BackgroundTypeRadioButtons } from './BackgroundTypeRadioButtons'
 
 type Props = {
   background?: Background
@@ -25,9 +25,14 @@ export const BackgroundSelector = ({
   return (
     <Stack spacing={4}>
       <Text>Background</Text>
-      <BackgroundTypeRadioButtons
-        backgroundType={background?.type ?? defaultBackgroundType}
-        onBackgroundTypeChange={handleBackgroundTypeChange}
+      <RadioButtons
+        options={[
+          BackgroundType.COLOR,
+          BackgroundType.IMAGE,
+          BackgroundType.NONE,
+        ]}
+        defaultValue={background?.type ?? defaultBackgroundType}
+        onSelect={handleBackgroundTypeChange}
       />
       <BackgroundContent
         background={background}

apps/builder/src/features/theme/components/general/BackgroundTypeRadioButtons.tsx

@@ -1,78 +0,0 @@
-import {
-  Box,
-  Flex,
-  HStack,
-  useColorModeValue,
-  useRadio,
-  useRadioGroup,
-  UseRadioProps,
-} from '@chakra-ui/react'
-import { BackgroundType } from '@typebot.io/schemas'
-import { ReactNode } from 'react'
-
-type Props = {
-  backgroundType: BackgroundType
-  onBackgroundTypeChange: (type: BackgroundType) => void
-}
-export const BackgroundTypeRadioButtons = ({
-  backgroundType,
-  onBackgroundTypeChange,
-}: Props) => {
-  const options = ['Color', 'Image', 'None']
-
-  const { getRootProps, getRadioProps } = useRadioGroup({
-    name: 'background-type',
-    defaultValue: backgroundType,
-    onChange: (nextVal: string) =>
-      onBackgroundTypeChange(nextVal as BackgroundType),
-  })
-
-  const group = getRootProps()
-
-  return (
-    <HStack {...group}>
-      {options.map((value) => {
-        const radio = getRadioProps({ value })
-        return (
-          <RadioCard key={value} {...radio}>
-            {value}
-          </RadioCard>
-        )
-      })}
-    </HStack>
-  )
-}
-
-export const RadioCard = (props: UseRadioProps & { children: ReactNode }) => {
-  const { getInputProps, getCheckboxProps } = useRadio(props)
-
-  const input = getInputProps()
-  const checkbox = getCheckboxProps()
-
-  return (
-    <Box as="label" flex="1">
-      <input {...input} />
-      <Flex
-        {...checkbox}
-        cursor="pointer"
-        borderWidth="2px"
-        borderRadius="md"
-        _checked={{
-          borderColor: 'blue.400',
-        }}
-        _hover={{
-          bgColor: useColorModeValue('gray.100', 'gray.700'),
-        }}
-        _active={{
-          bgColor: useColorModeValue('gray.200', 'gray.600'),
-        }}
-        px={5}
-        py={2}
-        transition="background-color 150ms, color 150ms, border 150ms"
-        justifyContent="center"
-      >
-        {props.children}
-      </Flex>
-    </Box>
-  )
-}

apps/builder/src/features/theme/theme.spec.ts

@@ -90,6 +90,32 @@ test.describe.parallel('Theme page', () => {
 
       await expect(page.locator('.typebot-container img')).toBeHidden()
 
+      // Roundness
+      await expect(page.getByRole('button', { name: 'Go' })).toHaveCSS(
+        'border-radius',
+        '6px'
+      )
+      await page
+        .getByRole('region', { name: 'Chat' })
+        .getByRole('radiogroup')
+        .locator('div')
+        .first()
+        .click()
+      await expect(page.getByRole('button', { name: 'Go' })).toHaveCSS(
+        'border-radius',
+        '0px'
+      )
+      await page
+        .getByRole('region', { name: 'Chat' })
+        .getByRole('radiogroup')
+        .locator('div')
+        .nth(2)
+        .click()
+      await expect(page.getByRole('button', { name: 'Go' })).toHaveCSS(
+        'border-radius',
+        '20px'
+      )
+
       // Host bubbles
       await page.click(
         '[data-testid="host-bubbles-theme"] >> [aria-label="Pick a color"] >> nth=0'