-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
✨ (theme) Custom font option (#1268)
Closes #1249 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced components for customizing fonts, including Google and custom font options. - Enhanced theme customization by simplifying theme objects and adding new font customization options. - Implemented dynamic font injection for web pages based on user-selected font configurations. - **Bug Fixes** - Fixed a condition in theme template card rendering to correctly check avatar enablement. - Corrected font property handling across various components to support both string and object types. - **Refactor** - Updated option properties in RadioButtons component to be readonly. - Simplified logic for setting CSS variables for fonts, including checks for font types and existence. - **Documentation** - Added constants and schemas for supporting new font types in theme customization. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
- Loading branch information
1 parent
927feae
commit 7cf1a3e
Showing
19 changed files
with
341 additions
and
158 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
31 changes: 31 additions & 0 deletions
31
apps/builder/src/features/theme/components/general/CustomFontForm.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import { TextInput } from '@/components/inputs' | ||
| import { Stack } from '@chakra-ui/react' | ||
| import { CustomFont } from '@typebot.io/schemas' | ||
|
|
||
| type Props = { | ||
| font: CustomFont | ||
| onFontChange: (font: CustomFont) => void | ||
| } | ||
|
|
||
| export const CustomFontForm = ({ font, onFontChange }: Props) => { | ||
| const updateFamily = (family: string) => onFontChange({ ...font, family }) | ||
| const updateUrl = (url: string) => onFontChange({ ...font, url }) | ||
| return ( | ||
| <Stack> | ||
| <TextInput | ||
| direction="row" | ||
| label="Family:" | ||
| defaultValue={font.family} | ||
| onChange={updateFamily} | ||
| withVariableButton={false} | ||
| /> | ||
| <TextInput | ||
| direction="row" | ||
| label="URL:" | ||
| defaultValue={font.url} | ||
| onChange={updateUrl} | ||
| withVariableButton={false} | ||
| /> | ||
| </Stack> | ||
| ) | ||
| } |
15 changes: 15 additions & 0 deletions
15
apps/builder/src/features/theme/components/general/FontForm.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import { Font } from '@typebot.io/schemas' | ||
| import { GoogleFontForm } from './GoogleFontForm' | ||
| import { CustomFontForm } from './CustomFontForm' | ||
|
|
||
| type Props = { | ||
| font: Font | ||
| onFontChange: (font: Font) => void | ||
| } | ||
|
|
||
| export const FontForm = ({ font, onFontChange }: Props) => { | ||
| if (typeof font === 'string' || font.type === 'Google') | ||
| return <GoogleFontForm font={font} onFontChange={onFontChange} /> | ||
| if (font.type === 'Custom') | ||
| return <CustomFontForm font={font} onFontChange={onFontChange} /> | ||
| } |
51 changes: 0 additions & 51 deletions
51
apps/builder/src/features/theme/components/general/FontSelector.tsx
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
49 changes: 49 additions & 0 deletions
49
apps/builder/src/features/theme/components/general/GoogleFontForm.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import { Select } from '@/components/inputs/Select' | ||
| import { env } from '@typebot.io/env' | ||
| import { GoogleFont } from '@typebot.io/schemas' | ||
| import { useState, useEffect } from 'react' | ||
|
|
||
| type Props = { | ||
| font: GoogleFont | string | ||
| onFontChange: (font: GoogleFont) => void | ||
| } | ||
|
|
||
| export const GoogleFontForm = ({ font, onFontChange }: Props) => { | ||
| const [currentFont, setCurrentFont] = useState( | ||
| typeof font === 'string' ? font : font.family | ||
| ) | ||
| const [googleFonts, setGoogleFonts] = useState<string[]>([]) | ||
|
|
||
| useEffect(() => { | ||
| fetchPopularFonts().then(setGoogleFonts) | ||
| }, []) | ||
|
|
||
| const fetchPopularFonts = async () => { | ||
| if (!env.NEXT_PUBLIC_GOOGLE_API_KEY) return [] | ||
| try { | ||
| const response = await fetch( | ||
| `https://www.googleapis.com/webfonts/v1/webfonts?key=${env.NEXT_PUBLIC_GOOGLE_API_KEY}&sort=popularity` | ||
| ) | ||
| return (await response.json()).items.map( | ||
| (item: { family: string }) => item.family | ||
| ) | ||
| } catch (error) { | ||
| console.error('Failed to fetch Google Fonts:', error) | ||
| return [] | ||
| } | ||
| } | ||
|
|
||
| const handleFontSelected = (nextFont: string | undefined) => { | ||
| if (nextFont === currentFont || !nextFont) return | ||
| setCurrentFont(nextFont) | ||
| onFontChange({ type: 'Google', family: nextFont }) | ||
| } | ||
|
|
||
| return ( | ||
| <Select | ||
| selectedItem={currentFont} | ||
| items={googleFonts} | ||
| onSelect={handleFontSelected} | ||
| /> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.