✨ (theme) Custom font option #1268
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThese changes across multiple files in the codebase primarily introduce and enhance font customization features, including the ability to select custom fonts or Google fonts for the application interface. The updates include new components for font selection, adjustments to theme settings to accommodate these selections, and utility functions to apply the chosen fonts across the application. The modifications ensure that fonts are consistently applied and offer a more flexible theming experience. Changes
Related issues
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review Status
Actionable comments generated: 5
Configuration used: CodeRabbit UI
Files ignored due to path filters (2)
apps/docs/openapi/builder.jsonis excluded by:!**/*.jsonapps/docs/openapi/viewer.jsonis excluded by:!**/*.json
Files selected for processing (16)
- apps/builder/src/components/inputs/RadioButtons.tsx (1 hunks)
- apps/builder/src/features/theme/components/ThemeTemplateCard.tsx (1 hunks)
- apps/builder/src/features/theme/components/general/CustomFontForm.tsx (1 hunks)
- apps/builder/src/features/theme/components/general/FontForm.tsx (1 hunks)
- apps/builder/src/features/theme/components/general/GeneralSettings.tsx (4 hunks)
- apps/builder/src/features/theme/components/general/GoogleFontForm.tsx (1 hunks)
- apps/builder/src/features/theme/galleryTemplates.ts (6 hunks)
- apps/viewer/src/components/TypebotPageV3.tsx (2 hunks)
- apps/viewer/src/pages/[[...publicId]].tsx (4 hunks)
- packages/deprecated/bot-engine/src/components/TypebotViewer.tsx (2 hunks)
- packages/deprecated/bot-engine/src/features/theme/utils/setCssVariablesValue.ts (1 hunks)
- packages/embeds/js/src/components/Bot.tsx (4 hunks)
- packages/embeds/js/src/utils/injectFont.ts (1 hunks)
- packages/embeds/js/src/utils/setCssVariablesValue.ts (1 hunks)
- packages/schemas/features/typebot/theme/constants.ts (2 hunks)
- packages/schemas/features/typebot/theme/schema.ts (3 hunks)
Additional comments: 14
packages/schemas/features/typebot/theme/constants.ts (1)
- 27-36: > 📝 NOTE
This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [9-33]
The addition of
fontTypesas a constant array and its use in thedefaultThemeobject is a good practice for maintaining consistency and readability in the codebase. The use ofas constforfontTypesensures TypeScript treats it as a readonly tuple, which is excellent for type safety when dealing with a known set of string values. The update to thedefaultThemeto include afontobject withtypeandfamilyproperties aligns with the new font customization feature. This change is well-implemented and follows best practices for defining and using constants in TypeScript.apps/builder/src/features/theme/components/general/CustomFontForm.tsx (1)
- 10-31: The
CustomFontFormcomponent is well-structured and provides a clear interface for updating custom font properties likefamilyandurl. The use ofTextInputcomponents for each property and the handling of changes throughupdateFamilyandupdateUrlfunctions are straightforward and effective. However, it's important to ensure that theTextInputcomponent properly handles edge cases, such as user input validation or trimming whitespace. While this is more about theTextInputcomponent itself, it's a good practice to consider these aspects when dealing with user inputs.apps/viewer/src/components/TypebotPageV3.tsx (1)
- 57-61: The
TypebotPageV3component correctly passes thefontprop to theStandardcomponent, allowing for font customization in the viewer. This change is straightforward and aligns with the objectives of the PR to enhance theme customization. The use offont ?? undefinedensures that the prop is either a valid font object or undefined, which is a good practice for optional props. This change is well-implemented and follows best practices.apps/builder/src/components/inputs/RadioButtons.tsx (1)
- 13-13: The update to make the
optionsprop of theRadioButtonscomponentreadonlyis a good practice for ensuring immutability. This change helps prevent accidental modifications to the options array, which could lead to unexpected behavior. Marking props asreadonlywhen they are not intended to be modified is a best practice in TypeScript for enhancing code safety and clarity.packages/schemas/features/typebot/theme/schema.ts (1)
- 36-52: The introduction of
googleFontSchema,customFontSchema, and the updatedfontSchemato include a discriminated union of these two schemas is a robust implementation for handling different font types. This approach leverages TypeScript's type system to ensure type safety and clarity when working with fonts. The use ofz.discriminatedUnionforfontSchemais particularly noteworthy, as it allows for precise type inference based on thetypeproperty. This change significantly enhances the theme schema's flexibility and maintainability.apps/builder/src/features/theme/galleryTemplates.ts (1)
- 39-53: > 📝 NOTE
This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [18-104]
The simplification of theme details in
galleryTemplates.tsby removing specific colors and fonts for various templates and focusing on essential properties like buttons and fonts is a strategic move towards a more customizable theme approach. This change aligns with the PR's objectives to enhance theme customization capabilities. However, it's important to ensure that these changes do not inadvertently remove any critical theme functionality or customization options that users might rely on. The remaining configurations, such as button colors and font settings, are well-defined and contribute to a more streamlined and flexible theme design.apps/builder/src/features/theme/components/general/GeneralSettings.tsx (1)
- 114-125: The integration of
RadioButtonsandFontFormcomponents inGeneralSettings.tsxto replace theFontSelectoris a significant improvement in handling font customization. This change allows for a more flexible and user-friendly interface for selecting and configuring fonts. The use offontTypeswithRadioButtonsfor selecting the font type andFontFormfor detailed font configuration demonstrates a good understanding of component composition and state management. This update aligns with the PR's objectives to enhance theme customization capabilities and is well-implemented.apps/builder/src/features/theme/components/ThemeTemplateCard.tsx (1)
- 216-216: The condition for rendering the
AvatarPreviewcomponent has been inverted fromif (avatar?.isEnabled)toif (!avatar?.isEnabled). This change means the avatar preview will not be rendered whenavatar.isEnabledis true, which seems counterintuitive. Please verify if this is the intended behavior, as it typically makes sense to show the avatar preview when it is enabled.packages/embeds/js/src/utils/setCssVariablesValue.ts (1)
- 71-73: The updated logic for setting the font family CSS variable correctly handles different scenarios where
generalTheme.fontcan be a string or an object with afamilyproperty. This change improves the flexibility and robustness of font configuration handling.apps/viewer/src/pages/[[...publicId]].tsx (1)
- 119-119: The addition of the
fontproperty to theTypebotV3PagePropsinterface and its handling in the retrieval ofpublishedTypebotaligns with the PR's objectives to enhance theme customization. This change is implemented correctly and ensures the custom font configuration is passed along and used appropriately.packages/embeds/js/src/components/Bot.tsx (4)
- 15-15: The addition of the
Fontimport from@typebot.io/schemasis necessary for supporting custom fonts, aligning with the PR's objectives.- 29-29: The addition of the
fontproperty toBotPropscorrectly extends the component's capabilities to support custom fonts.- 47-47: The call to
injectFontwithprops.fontin theinitializeBotfunction correctly ensures that custom fonts are applied when initializing the bot.- 205-208: Replacing
injectCustomFontwithinjectFontin theBotContentcomponent is correctly implemented to support the application of custom fonts.
apps/builder/src/features/theme/components/general/GoogleFontForm.tsx
Outdated
Show resolved
Hide resolved
packages/deprecated/bot-engine/src/features/theme/utils/setCssVariablesValue.ts
Show resolved
Hide resolved
|
@coderabbitai review |
There was a problem hiding this comment.
Review Status
Actionable comments generated: 0
Configuration used: CodeRabbit UI
Files selected for processing (2)
- apps/builder/src/features/theme/components/general/GoogleFontForm.tsx (1 hunks)
- packages/embeds/js/src/utils/injectFont.ts (1 hunks)
Files skipped from review as they are similar to previous changes (2)
- apps/builder/src/features/theme/components/general/GoogleFontForm.tsx
- packages/embeds/js/src/utils/injectFont.ts
Closes #1249
Summary by CodeRabbit
New Features
Bug Fixes
Refactor
Documentation