@developer_tribe/react-builder 1.2.0 → 1.2.1

package/dist/pages/ProjectPage.d.ts

@@ -10,7 +10,14 @@ export type ProjectPageProps = {
     projectColors?: ProjectColors;
     onSaveProjectColors?: (colors: ProjectColors) => void;
     name?: string;
-    fonts: Fonts;
-    appFont: string | undefined;
+    typography: {
+        fonts: Fonts;
+    };
+    /**
+     * Optional. If omitted, `ProjectPage` will infer it from `typography.fonts`:
+     * - first font with `isMain: true`
+     * - else first font in the list
+     */
+    appFont?: string | undefined;
 };
-export declare function ProjectPage({ project, appConfig, onSaveProject, logLevel, projectColors, onSaveProjectColors, name, fonts, appFont, }: ProjectPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProjectPage({ project, appConfig, onSaveProject, logLevel, projectColors, onSaveProjectColors, name, typography, appFont, }: ProjectPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/Fonts.d.ts

@@ -3,10 +3,14 @@ export type FontWeightKey = string;
 /** URL to a font file (ttf/otf/woff/woff2). */
 export type FontFileUrl = string;
 /** Map of font-weight -> font file URL. */
-export type FontFamilySources = Record<FontWeightKey, FontFileUrl>;
+export type FontFamilySources = Record<FontWeightKey, FontFileUrl | undefined>;
 export type FontDefinition = {
     name: string;
     family: FontFamilySources;
     projects?: string[];
+    /** Optional language target for this font (e.g. "ar"). */
+    targetLanguage?: string;
+    /** Optional marker to pick a default app font. */
+    isMain?: boolean;
 };
 export type Fonts = FontDefinition[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developer_tribe/react-builder",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "license": "UNLICENSED",
   "type": "module",
   "restricted": true,

package/src/pages/ProjectPage.tsx

@@ -44,9 +44,15 @@ export type ProjectPageProps = {
   projectColors?: ProjectColors;
   onSaveProjectColors?: (colors: ProjectColors) => void;
   name?: string;
-  fonts: Fonts;
-  // NOTE: appFont is required as a prop to force the host to think about it.
-  appFont: string | undefined;
+  typography: {
+    fonts: Fonts;
+  };
+  /**
+   * Optional. If omitted, `ProjectPage` will infer it from `typography.fonts`:
+   * - first font with `isMain: true`
+   * - else first font in the list
+   */
+  appFont?: string | undefined;
 };
 
 const MOBILE_BREAKPOINT = 1000;
@@ -59,12 +65,16 @@ export function ProjectPage({
   projectColors,
   onSaveProjectColors,
   name,
-  fonts,
+  typography,
   appFont,
 }: ProjectPageProps) {
   useLogRender('ProjectPage');
   useSyncHtmlThemeClass();
-  useProjectFonts({ fonts, appFont });
+  const resolvedAppFont =
+    appFont ??
+    typography.fonts.find((f) => f?.isMain)?.name ??
+    typography.fonts[0]?.name;
+  useProjectFonts({ fonts: typography.fonts, appFont: resolvedAppFont });
   const resolvedName = name ?? project.name;
   const resolvedProjectColors = projectColors ?? project.projectColors;
   const isEmptyProjectData =

package/src/types/Fonts.ts

@@ -5,12 +5,16 @@ export type FontWeightKey = string;
 export type FontFileUrl = string;
 
 /** Map of font-weight -> font file URL. */
-export type FontFamilySources = Record<FontWeightKey, FontFileUrl>;
+export type FontFamilySources = Record<FontWeightKey, FontFileUrl | undefined>;
 
 export type FontDefinition = {
   name: string;
   family: FontFamilySources;
   projects?: string[];
+  /** Optional language target for this font (e.g. "ar"). */
+  targetLanguage?: string;
+  /** Optional marker to pick a default app font. */
+  isMain?: boolean;
 };
 
 export type Fonts = FontDefinition[];