Files
react-editor-shopify/react-editor.config.tsx
2026-05-08 14:55:17 -04:00

91 lines
3.6 KiB
TypeScript

import {
createFieldShopifyProduct,
createFieldShopifyCollection,
} from "@reacteditor/field-shopify";
import { navigationEditor } from "@/components/navigation/navigation.editor";
import { footerEditor } from "@/components/footer/footer.editor";
import { heroEditor } from "@/components/hero/hero.editor";
import { bannerEditor } from "@/components/landing/banner.editor";
import { createFeaturedProductEditor } from "@/components/commerce/featured-product.editor";
import { createProductsGridEditor } from "@/components/commerce/products-grid.editor";
import { createProductsCarouselEditor } from "@/components/commerce/products-carousel.editor";
import { collectionGridEditor } from "@/components/commerce/collection-grid.editor";
import { createCollectionEditor } from "@/components/commerce/collection.editor";
import { createProductDetailsEditor } from "@/components/commerce/product-details.editor";
import { createRecommendedProductsEditor } from "@/components/commerce/recommended-products.editor";
import { searchProductsEditor } from "@/components/commerce/search-products.editor";
import { featuresEditor } from "@/components/features/features.editor";
import { testimonialsEditor } from "@/components/testimonials/testimonials.editor";
import { imageGalleryEditor } from "@/components/landing/image-gallery.editor";
import { newsletterCtaEditor } from "@/components/landing/newsletter-cta.editor";
import { logosEditor } from "@/components/logos/logos.editor";
import { ctaEditor } from "@/components/cta/cta.editor";
import { faqEditor } from "@/components/faq/faq.editor";
import Root from "@/config/root";
import type { UserConfig } from "@/config/types";
import { initialData } from "@/config/initial-data";
export type CreateConfigOptions = {
domain: string;
token?: string | null;
};
export function createConfig({ domain, token }: CreateConfigOptions): UserConfig {
const productField = createFieldShopifyProduct({
storeDomain: domain,
storefrontAccessToken: token ?? undefined,
}) as any;
const collectionField = createFieldShopifyCollection({
storeDomain: domain,
storefrontAccessToken: token ?? undefined,
}) as any;
return {
root: Root,
categories: {
navigation: { title: "Navigation" },
hero: { title: "Hero & Banners" },
commerce: { title: "Commerce" },
content: { title: "Content" },
footer: { title: "Footer" },
},
components: {
navigation: navigationEditor,
hero: heroEditor,
banner: bannerEditor,
"featured-product": createFeaturedProductEditor({ productField }),
"products-grid": createProductsGridEditor({ collectionField }),
"products-carousel": createProductsCarouselEditor({ collectionField }),
"collection-grid": collectionGridEditor,
collection: createCollectionEditor({ collectionField }),
"product-details": createProductDetailsEditor({ productField }),
"recommended-products": createRecommendedProductsEditor({ productField }),
"search-products": searchProductsEditor,
features: featuresEditor,
testimonials: testimonialsEditor,
"image-gallery": imageGalleryEditor,
"newsletter-cta": newsletterCtaEditor,
logos: logosEditor,
cta: ctaEditor,
faq: faqEditor,
footer: footerEditor,
} as any,
};
}
function toBase64(s: string): string {
if (typeof btoa === "function") return btoa(unescape(encodeURIComponent(s)));
return Buffer.from(s, "utf8").toString("base64");
}
export const componentKey = toBase64(
`commerce-redesign-${JSON.stringify({ initialData })}`,
);
export default createConfig;