🦴 Add theme page backbone

apps/builder/components/theme/GeneralContent/BackgroundSelector/BackgroundContent.tsx

@@ -0,0 +1,38 @@
+import { Flex, Text } from '@chakra-ui/react'
+import { Background, BackgroundType } from 'bot-engine'
+import React from 'react'
+import { ColorPicker } from '../ColorPicker'
+
+type BackgroundContentProps = {
+  background: Background
+  onBackgroundContentChange: (content: string) => void
+}
+
+export const BackgroundContent = ({
+  background,
+  onBackgroundContentChange,
+}: BackgroundContentProps) => {
+  const handleContentChange = (content: string) =>
+    onBackgroundContentChange(content)
+
+  switch (background.type) {
+    case BackgroundType.COLOR:
+      return (
+        <Flex justify="space-between" align="center">
+          <Text>Background color:</Text>
+          <ColorPicker
+            initialColor={background.content}
+            onColorChange={handleContentChange}
+          />
+        </Flex>
+      )
+    case BackgroundType.IMAGE:
+      return (
+        <Flex>
+          <Text>Image</Text>
+        </Flex>
+      )
+    default:
+      return <></>
+  }
+}

apps/builder/components/theme/GeneralContent/BackgroundSelector/BackgroundSelector.tsx

@@ -0,0 +1,45 @@
+import { Stack, Text } from '@chakra-ui/react'
+import { Background, BackgroundType } from 'bot-engine'
+import { deepEqual } from 'fast-equals'
+import React, { useEffect, useState } from 'react'
+import { BackgroundContent } from './BackgroundContent'
+import { BackgroundTypeRadioButtons } from './BackgroundTypeRadioButtons'
+
+type Props = {
+  initialBackground?: Background
+  onBackgroundChange: (newBackground: Background) => void
+}
+export const BackgroundSelector = ({
+  initialBackground,
+  onBackgroundChange,
+}: Props) => {
+  const [currentBackground, setCurrentBackground] = useState<Background>(
+    initialBackground ?? { type: BackgroundType.NONE, content: '' }
+  )
+
+  useEffect(() => {
+    if (deepEqual(currentBackground, initialBackground)) return
+    onBackgroundChange(currentBackground)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentBackground])
+
+  const handleBackgroundTypeChange = (type: BackgroundType) =>
+    setCurrentBackground({ ...currentBackground, type })
+
+  const handleBackgroundContentChange = (content: string) =>
+    setCurrentBackground({ ...currentBackground, content })
+
+  return (
+    <Stack spacing={4}>
+      <Text>Background</Text>
+      <BackgroundTypeRadioButtons
+        backgroundType={currentBackground.type}
+        onBackgroundTypeChange={handleBackgroundTypeChange}
+      />
+      <BackgroundContent
+        background={currentBackground}
+        onBackgroundContentChange={handleBackgroundContentChange}
+      />
+    </Stack>
+  )
+}

apps/builder/components/theme/GeneralContent/BackgroundSelector/BackgroundTypeRadioButtons.tsx

@@ -0,0 +1,73 @@
+import {
+  Box,
+  Flex,
+  HStack,
+  useRadio,
+  useRadioGroup,
+  UseRadioProps,
+} from '@chakra-ui/react'
+import { BackgroundType } from 'bot-engine'
+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="1px"
+        borderRadius="md"
+        _checked={{
+          bg: 'orange.400',
+          color: 'white',
+          borderColor: 'orange.400',
+        }}
+        px={5}
+        py={2}
+        transition="background-color 150ms, color 150ms, border 150ms"
+        justifyContent="center"
+      >
+        {props.children}
+      </Flex>
+    </Box>
+  )
+}

apps/builder/components/theme/GeneralContent/BackgroundSelector/index.tsx

@@ -0,0 +1 @@
+export { BackgroundSelector } from './BackgroundSelector'