refactor shopify storefront

2026-05-05 13:42:40 -04:00
parent ba8826030c
commit 62fbdead87
156 changed files with 1688 additions and 8293 deletions
--- a/config/root.tsx
+++ b/config/root.tsx
@@ -0,0 +1,145 @@
+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",
+    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",
+    roundedness: "md",
+    radius: "md",
+    shadowLevel: "sm",
+    shadow: "sm",
+    maxWidth: "xl",
+  },
+  fields: {
+    title: { label: "Page title", type: "text" },
+    description: { label: "Description", type: "textarea" },
+    ogImage: { label: "OG image", ...imageField({ adapter: frontendAiMediaAdapter }) },
+    headerFont: { label: "Header font", ...headerFontField },
+    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" },
+    roundedness: {
+      label: "Roundedness",
+      type: "select",
+      options: [
+        { label: "None", value: "none" },
+        { label: "Small", value: "sm" },
+        { label: "Medium", value: "md" },
+        { label: "Large", value: "lg" },
+        { label: "Extra large", value: "xl" },
+        { label: "Full (pill)", value: "full" },
+      ],
+    },
+    radius: {
+      label: "Radius",
+      type: "select",
+      options: [
+        { label: "None", value: "none" },
+        { label: "Extra small", value: "xs" },
+        { label: "Small", value: "sm" },
+        { label: "Medium", value: "md" },
+        { label: "Large", value: "lg" },
+      ],
+    },
+    shadowLevel: {
+      label: "Shadow level",
+      type: "select",
+      options: [
+        { label: "None", 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" },
+      ],
+    },
+    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: "2X large", value: "2xl" },
+        { label: "Full bleed", value: "full" },
+      ],
+    },
+  },
+  render: ({
+    children,
+    headerFont,
+    bodyFont,
+    primaryColor,
+    secondaryColor,
+    accentColor,
+    bgColor,
+    fgColor,
+    mutedColor,
+    roundedness,
+    radius,
+    shadowLevel,
+    shadow,
+  }) => {
+    return (
+      <ThemeProvider
+        headerFont={headerFont}
+        bodyFont={bodyFont}
+        primaryColor={primaryColor}
+        secondaryColor={secondaryColor}
+        accentColor={accentColor}
+        bgColor={bgColor}
+        fgColor={fgColor}
+        mutedColor={mutedColor}
+        roundedness={roundedness}
+        radius={radius}
+        shadowLevel={shadowLevel}
+        shadow={shadow}
+      >
+        {children}
+      </ThemeProvider>
+    );
+  },
+};
+
+export default Root;