135 lines
4.1 KiB
TypeScript
135 lines
4.1 KiB
TypeScript
import { DefaultRootProps, RootConfig } from "@reacteditor/core";
|
|
import { createFieldGoogleFonts } from "@reacteditor/field-google-fonts";
|
|
import { imageField } from "@reacteditor/plugin-media/field";
|
|
import { ThemeProvider, ThemeProps } from "@/components/ThemeProvider";
|
|
import { frontendAiMediaAdapter } from "@/services/media-adapter";
|
|
|
|
export type RootProps = DefaultRootProps &
|
|
ThemeProps & {
|
|
description?: string;
|
|
ogImage?: string;
|
|
};
|
|
|
|
const headerFontField = createFieldGoogleFonts() as any;
|
|
const bodyFontField = createFieldGoogleFonts() as any;
|
|
|
|
export const Root: RootConfig<{
|
|
props: RootProps;
|
|
fields: {
|
|
userField: { type: "userField"; option: boolean };
|
|
};
|
|
}> = {
|
|
defaultProps: {
|
|
title: "Untitled",
|
|
headerFont: "Inter",
|
|
headerFontWeight: "600",
|
|
bodyFont: "Inter",
|
|
// Hex defaults so the color picker reads them and any non-picker
|
|
// input (typed hex, AI-set value, etc.) is round-trip compatible.
|
|
primaryColor: "#0a0a0a",
|
|
secondaryColor: "#64748B",
|
|
accentColor: "#f5f5f5",
|
|
bgColor: "#ffffff",
|
|
fgColor: "#0a0a0a",
|
|
mutedColor: "#f5f5f5",
|
|
radius: "md",
|
|
shadow: "sm",
|
|
maxWidth: "lg",
|
|
},
|
|
fields: {
|
|
title: { label: "Page title", type: "text" },
|
|
description: { label: "Description", type: "textarea" },
|
|
ogImage: { label: "OG image", ...imageField({ adapter: frontendAiMediaAdapter }) },
|
|
headerFont: { label: "Header font", ...headerFontField },
|
|
headerFontWeight: {
|
|
label: "Header font weight",
|
|
type: "select",
|
|
options: [
|
|
{ label: "300 — Light", value: "300" },
|
|
{ label: "400 — Regular", value: "400" },
|
|
{ label: "500 — Medium", value: "500" },
|
|
{ label: "600 — Semibold", value: "600" },
|
|
{ label: "700 — Bold", value: "700" },
|
|
{ label: "800 — Extrabold", value: "800" },
|
|
{ label: "900 — Black", value: "900" },
|
|
],
|
|
},
|
|
bodyFont: { label: "Body font", ...bodyFontField },
|
|
primaryColor: { label: "Primary color", type: "color", placeholder: "#0a0a0a" },
|
|
secondaryColor: { label: "Secondary color", type: "color", placeholder: "#64748B" },
|
|
accentColor: { label: "Accent color", type: "color", placeholder: "#f5f5f5" },
|
|
bgColor: { label: "Background color", type: "color", placeholder: "#ffffff" },
|
|
fgColor: { label: "Foreground color", type: "color", placeholder: "#0a0a0a" },
|
|
mutedColor: { label: "Muted color", type: "color", placeholder: "#f5f5f5" },
|
|
radius: {
|
|
label: "Radius",
|
|
type: "select",
|
|
options: [
|
|
{ label: "None (square)", value: "none" },
|
|
{ label: "Small", value: "sm" },
|
|
{ label: "Medium", value: "md" },
|
|
{ label: "Large", value: "lg" },
|
|
{ label: "Extra large", value: "xl" },
|
|
],
|
|
},
|
|
shadow: {
|
|
label: "Shadow",
|
|
type: "select",
|
|
options: [
|
|
{ label: "None", value: "none" },
|
|
{ label: "Small", value: "sm" },
|
|
{ label: "Medium", value: "md" },
|
|
{ label: "Large", value: "lg" },
|
|
{ label: "Extra large", value: "xl" },
|
|
],
|
|
},
|
|
maxWidth: {
|
|
label: "Max width",
|
|
type: "select",
|
|
options: [
|
|
{ label: "Small", value: "sm" },
|
|
{ label: "Medium", value: "md" },
|
|
{ label: "Large", value: "lg" },
|
|
{ label: "Extra large", value: "xl" },
|
|
{ label: "Full bleed", value: "full" },
|
|
],
|
|
},
|
|
},
|
|
render: ({
|
|
children,
|
|
headerFont,
|
|
headerFontWeight,
|
|
bodyFont,
|
|
primaryColor,
|
|
secondaryColor,
|
|
accentColor,
|
|
bgColor,
|
|
fgColor,
|
|
mutedColor,
|
|
radius,
|
|
shadow,
|
|
maxWidth,
|
|
}) => {
|
|
return (
|
|
<ThemeProvider
|
|
headerFont={headerFont}
|
|
headerFontWeight={headerFontWeight}
|
|
bodyFont={bodyFont}
|
|
primaryColor={primaryColor}
|
|
secondaryColor={secondaryColor}
|
|
accentColor={accentColor}
|
|
bgColor={bgColor}
|
|
fgColor={fgColor}
|
|
mutedColor={mutedColor}
|
|
radius={radius}
|
|
shadow={shadow}
|
|
maxWidth={maxWidth}
|
|
>
|
|
{children}
|
|
</ThemeProvider>
|
|
);
|
|
},
|
|
};
|
|
|
|
export default Root;
|