use default exports and not named exports

components/commerce/collection-grid.editor.tsx

@@ -2,7 +2,7 @@ import { ComponentConfig } from "@reacteditor/core";
 import { FolderOpen } from "lucide-react";
 import { CollectionGrid, type CollectionGridProps } from "@/components/commerce/collection-grid";
 
-export const collectionGridEditor: ComponentConfig<CollectionGridProps> = {
+const collectionGridEditor: ComponentConfig<CollectionGridProps> = {
   label: "Collections",
   icon: <FolderOpen size={16} />,
   category: "commerce",
@@ -29,3 +29,5 @@ export const collectionGridEditor: ComponentConfig<CollectionGridProps> = {
   },
   render: (props) => <CollectionGrid {...props} />,
 };
+
+export default collectionGridEditor;

components/commerce/collection.editor.tsx

@@ -4,10 +4,7 @@ import { imageField } from "@reacteditor/plugin-media/field";
 import { frontendAiMediaAdapter } from "@/services/media-adapter";
 import { CollectionView, type CollectionProps } from "@/components/commerce/collection";
 
-export function createCollectionEditor(opts: {
+const collectionEditor: ComponentConfig<CollectionProps> = {
-  collectionField: any;
-}): ComponentConfig<CollectionProps> {
-  return {
     label: "Collection page",
     icon: <FolderOpen size={16} />,
     category: "commerce",
@@ -48,7 +45,7 @@ export function createCollectionEditor(opts: {
       metafieldFilters: [],
     },
     fields: {
-      collection: { label: "Collection", ...opts.collectionField },
+      collection: { label: "Collection", type: "shopifyCollection" } as any,
       showDescription: {
         label: "Description",
         type: "radio",
@@ -248,4 +245,5 @@ export function createCollectionEditor(opts: {
     },
     render: (props) => <CollectionView {...props} />,
 };
-}
+
+export default collectionEditor;

components/commerce/featured-product.editor.tsx

@@ -2,10 +2,7 @@ import { ComponentConfig } from "@reacteditor/core";
 import { Star } from "lucide-react";
 import { FeaturedProductView, type FeaturedProductProps } from "@/components/commerce/featured-product";
 
-export function createFeaturedProductEditor(opts: {
+const featuredProductEditor: ComponentConfig<FeaturedProductProps> = {
-  productField: any;
-}): ComponentConfig<FeaturedProductProps> {
-  return {
     label: "Featured product",
     icon: <Star size={16} />,
     category: "commerce",
@@ -17,7 +14,7 @@ export function createFeaturedProductEditor(opts: {
       tone: "default",
     },
     fields: {
-      product: { label: "Product", ...opts.productField },
+      product: { label: "Product", type: "shopifyProduct" } as any,
       tagline: { label: "Tagline", type: "text", contentEditable: true },
       ctaLabel: { label: "CTA label", type: "text", contentEditable: true },
       align: {
@@ -39,4 +36,5 @@ export function createFeaturedProductEditor(opts: {
     },
     render: (props) => <FeaturedProductView {...props} />,
 };
-}
+
+export default featuredProductEditor;

components/commerce/product-details.editor.tsx

@@ -2,15 +2,13 @@ import { ComponentConfig } from "@reacteditor/core";
 import { Package } from "lucide-react";
 import { ProductDetailsView, type ProductDetailsProps } from "@/components/commerce/product-details";
 
-export function createProductDetailsEditor(opts: {
+const productDetailsEditor: ComponentConfig<ProductDetailsProps> = {
-  productField: any;
-}): ComponentConfig<ProductDetailsProps> {
-  return {
     label: "Product details",
     icon: <Package size={16} />,
     category: "commerce",
     defaultProps: { product: null },
-    fields: { product: { label: "Product", ...opts.productField } },
+    fields: { product: { label: "Product", type: "shopifyProduct" } as any },
     render: (props) => <ProductDetailsView {...props} />,
 };
-}
+
+export default productDetailsEditor;

components/commerce/products-carousel.editor.tsx

@@ -2,10 +2,7 @@ import { ComponentConfig } from "@reacteditor/core";
 import { GalleryHorizontalEnd } from "lucide-react";
 import { ProductsCarousel, type ProductsCarouselProps } from "@/components/commerce/products-carousel";
 
-export function createProductsCarouselEditor(opts: {
+const productsCarouselEditor: ComponentConfig<ProductsCarouselProps> = {
-  collectionField: any;
-}): ComponentConfig<ProductsCarouselProps> {
-  return {
     label: "Products carousel",
     icon: <GalleryHorizontalEnd size={16} />,
     category: "commerce",
@@ -20,7 +17,7 @@ export function createProductsCarouselEditor(opts: {
       ctaHref: "",
     },
     fields: {
-      collection: { label: "Collection", ...opts.collectionField },
+      collection: { label: "Collection", type: "shopifyCollection" } as any,
       tagline: { label: "Tagline", type: "text", contentEditable: true },
       heading: { label: "Heading", type: "text", contentEditable: true },
       subheading: { label: "Subheading", type: "textarea", contentEditable: true },
@@ -39,4 +36,5 @@ export function createProductsCarouselEditor(opts: {
     },
     render: (props) => <ProductsCarousel {...props} />,
 };
-}
+
+export default productsCarouselEditor;

components/commerce/products-grid.editor.tsx

@@ -2,10 +2,7 @@ import { ComponentConfig } from "@reacteditor/core";
 import { LayoutGrid } from "lucide-react";
 import { ProductsGrid, type ProductsGridProps } from "@/components/commerce/products-grid";
 
-export function createProductsGridEditor(opts: {
+const productsGridEditor: ComponentConfig<ProductsGridProps> = {
-  collectionField: any;
-}): ComponentConfig<ProductsGridProps> {
-  return {
     label: "Products grid",
     icon: <LayoutGrid size={16} />,
     category: "commerce",
@@ -20,7 +17,7 @@ export function createProductsGridEditor(opts: {
       ctaHref: "",
     },
     fields: {
-      collection: { label: "Collection", ...opts.collectionField },
+      collection: { label: "Collection", type: "shopifyCollection" } as any,
       tagline: { label: "Tagline", type: "text", contentEditable: true },
       heading: { label: "Heading", type: "text", contentEditable: true },
       subheading: { label: "Subheading", type: "textarea", contentEditable: true },
@@ -38,4 +35,5 @@ export function createProductsGridEditor(opts: {
     },
     render: (props) => <ProductsGrid {...props} />,
 };
-}
+
+export default productsGridEditor;

components/commerce/recommended-products.editor.tsx

@@ -2,10 +2,7 @@ import { ComponentConfig } from "@reacteditor/core";
 import { Sparkles } from "lucide-react";
 import { RecommendedProductsView, type RecommendedProductsProps } from "@/components/commerce/recommended-products";
 
-export function createRecommendedProductsEditor(opts: {
+const recommendedProductsEditor: ComponentConfig<RecommendedProductsProps> = {
-  productField: any;
-}): ComponentConfig<RecommendedProductsProps> {
-  return {
     label: "Recommended products",
     icon: <Sparkles size={16} />,
     category: "commerce",
@@ -16,11 +13,12 @@ export function createRecommendedProductsEditor(opts: {
       limit: 4,
     },
     fields: {
-      product: { label: "Source product", ...opts.productField },
+      product: { label: "Source product", type: "shopifyProduct" } as any,
       tagline: { label: "Tagline", type: "text", contentEditable: true },
       heading: { label: "Heading", type: "text", contentEditable: true },
       limit: { label: "Limit", type: "number", min: 2, max: 8 },
     },
     render: (props) => <RecommendedProductsView {...props} />,
 };
-}
+
+export default recommendedProductsEditor;

components/commerce/search-products.editor.tsx

@@ -2,7 +2,7 @@ import { ComponentConfig } from '@reacteditor/core';
 import { Search } from 'lucide-react';
 import { SearchProductsView, type SearchProductsProps } from '@/components/commerce/search-products';
 
-export const searchProductsEditor: ComponentConfig<SearchProductsProps> = {
+const searchProductsEditor: ComponentConfig<SearchProductsProps> = {
   label: 'Search & filter',
   icon: <Search size={16} />,
   category: 'commerce',
@@ -240,3 +240,5 @@ export const searchProductsEditor: ComponentConfig<SearchProductsProps> = {
   },
   render: (props) => <SearchProductsView {...props} />,
 };
+
+export default searchProductsEditor;

components/cta/cta.editor.tsx

@@ -4,7 +4,7 @@ import { Megaphone } from "lucide-react";
 import { CTA, type CTAProps } from "@/components/cta/cta";
 import { frontendAiMediaAdapter } from "@/services/media-adapter";
 
-export const ctaEditor: ComponentConfig<CTAProps> = {
+const ctaEditor: ComponentConfig<CTAProps> = {
   label: "Call to action",
   icon: <Megaphone size={16} />,
   category: "content",
@@ -51,3 +51,5 @@ export const ctaEditor: ComponentConfig<CTAProps> = {
   },
   render: (props) => <CTA {...props} />,
 };
+
+export default ctaEditor;

components/faq/faq.editor.tsx

@@ -2,7 +2,7 @@ import { ComponentConfig } from "@reacteditor/core";
 import { HelpCircle } from "lucide-react";
 import { FAQ, type FAQProps } from "@/components/faq/faq";
 
-export const faqEditor: ComponentConfig<FAQProps> = {
+const faqEditor: ComponentConfig<FAQProps> = {
   label: "FAQ",
   icon: <HelpCircle size={16} />,
   category: "content",
@@ -50,3 +50,5 @@ export const faqEditor: ComponentConfig<FAQProps> = {
   },
   render: (props) => <FAQ {...props} />,
 };
+
+export default faqEditor;

components/features/features.editor.tsx

@@ -2,7 +2,7 @@ import { ComponentConfig } from "@reacteditor/core";
 import { Sparkles } from "lucide-react";
 import { Features, type FeaturesProps } from "@/components/features/features";
 
-export const featuresEditor: ComponentConfig<FeaturesProps> = {
+const featuresEditor: ComponentConfig<FeaturesProps> = {
   label: "Features",
   icon: <Sparkles size={16} />,
   category: "content",
@@ -52,3 +52,5 @@ export const featuresEditor: ComponentConfig<FeaturesProps> = {
   },
   render: (props) => <Features {...props} />,
 };
+
+export default featuresEditor;

components/footer/footer.editor.tsx

@@ -2,7 +2,7 @@ import { ComponentConfig } from "@reacteditor/core";
 import { LayoutGrid } from "lucide-react";
 import { Footer, type FooterProps } from "@/components/footer/footer";
 
-export const footerEditor: ComponentConfig<FooterProps> = {
+const footerEditor: ComponentConfig<FooterProps> = {
   label: "Footer",
   icon: <LayoutGrid size={16} />,
   category: "footer",
@@ -100,3 +100,5 @@ export const footerEditor: ComponentConfig<FooterProps> = {
   },
   render: (props) => <Footer {...props} />,
 };
+
+export default footerEditor;

components/hero/hero.editor.tsx

@@ -4,7 +4,7 @@ import { LayoutTemplate } from "lucide-react";
 import { Hero, type HeroProps } from "@/components/hero/hero";
 import { frontendAiMediaAdapter } from "@/services/media-adapter";
 
-export const heroEditor: ComponentConfig<HeroProps> = {
+const heroEditor: ComponentConfig<HeroProps> = {
   label: "Hero",
   icon: <LayoutTemplate size={16} />,
   category: "hero",
@@ -80,3 +80,5 @@ export const heroEditor: ComponentConfig<HeroProps> = {
   },
   render: (props) => <Hero {...props} />,
 };
+
+export default heroEditor;

components/landing/banner.editor.tsx

@@ -2,7 +2,7 @@ import { ComponentConfig } from "@reacteditor/core";
 import { Megaphone } from "lucide-react";
 import { Banner, type BannerProps } from "@/components/landing/banner";
 
-export const bannerEditor: ComponentConfig<BannerProps> = {
+const bannerEditor: ComponentConfig<BannerProps> = {
   label: "Announcement bar",
   icon: <Megaphone size={16} />,
   category: "hero",
@@ -28,3 +28,5 @@ export const bannerEditor: ComponentConfig<BannerProps> = {
   },
   render: (props) => <Banner {...props} />,
 };
+
+export default bannerEditor;

components/landing/image-gallery.editor.tsx

@@ -4,7 +4,7 @@ import { Images } from "lucide-react";
 import { ImageGallery, type ImageGalleryProps } from "@/components/landing/image-gallery";
 import { frontendAiMediaAdapter } from "@/services/media-adapter";
 
-export const imageGalleryEditor: ComponentConfig<ImageGalleryProps> = {
+const imageGalleryEditor: ComponentConfig<ImageGalleryProps> = {
   label: "Image gallery",
   icon: <Images size={16} />,
   category: "content",
@@ -48,3 +48,5 @@ export const imageGalleryEditor: ComponentConfig<ImageGalleryProps> = {
   },
   render: (props) => <ImageGallery {...props} />,
 };
+
+export default imageGalleryEditor;

components/landing/newsletter-cta.editor.tsx

@@ -29,7 +29,7 @@ const baseFields: Fields<NewsletterCtaProps> = {
   },
 };
 
-export const newsletterCtaEditor: ComponentConfig<NewsletterCtaProps> = {
+const newsletterCtaEditor: ComponentConfig<NewsletterCtaProps> = {
   label: "Newsletter",
   icon: <Mail size={16} />,
   category: "content",
@@ -78,3 +78,5 @@ export const newsletterCtaEditor: ComponentConfig<NewsletterCtaProps> = {
   },
   render: (props) => <NewsletterCta {...props} />,
 };
+
+export default newsletterCtaEditor;

components/logos/logos.editor.tsx

@@ -4,7 +4,7 @@ import { Award } from "lucide-react";
 import { Logos, type LogosProps } from "@/components/logos/logos";
 import { frontendAiMediaAdapter } from "@/services/media-adapter";
 
-export const logosEditor: ComponentConfig<LogosProps> = {
+const logosEditor: ComponentConfig<LogosProps> = {
   label: "Press / Logos",
   icon: <Award size={16} />,
   category: "content",
@@ -42,3 +42,5 @@ export const logosEditor: ComponentConfig<LogosProps> = {
   },
   render: (props) => <Logos {...props} />,
 };
+
+export default logosEditor;

components/navigation/navigation.editor.tsx

@@ -4,7 +4,7 @@ import { imageField } from "@reacteditor/plugin-media/field";
 import { Navigation, type NavigationProps } from "@/components/navigation/navigation";
 import { frontendAiMediaAdapter } from "@/services/media-adapter";
 
-export const navigationEditor: ComponentConfig<NavigationProps> = {
+const navigationEditor: ComponentConfig<NavigationProps> = {
   label: "Navigation",
   icon: <MenuIcon size={16} />,
   category: "navigation",
@@ -72,3 +72,5 @@ export const navigationEditor: ComponentConfig<NavigationProps> = {
   },
   render: (props) => <Navigation {...props} />,
 };
+
+export default navigationEditor;

components/testimonials/testimonials.editor.tsx

@@ -4,7 +4,7 @@ import { Quote } from "lucide-react";
 import { Testimonials, type TestimonialsProps } from "@/components/testimonials/testimonials";
 import { frontendAiMediaAdapter } from "@/services/media-adapter";
 
-export const testimonialsEditor: ComponentConfig<TestimonialsProps> = {
+const testimonialsEditor: ComponentConfig<TestimonialsProps> = {
   label: "Testimonials",
   icon: <Quote size={16} />,
   category: "content",
@@ -56,3 +56,5 @@ export const testimonialsEditor: ComponentConfig<TestimonialsProps> = {
   },
   render: (props) => <Testimonials {...props} />,
 };
+
+export default testimonialsEditor;

editor.config.tsx

@@ -1,49 +1,29 @@
-import {
+import navigationEditor from "@/components/navigation/navigation.editor";
-  createFieldShopifyProduct,
+import footerEditor from "@/components/footer/footer.editor";
-  createFieldShopifyCollection,
-} from "@reacteditor/field-shopify";
 
-import { navigationEditor } from "@/components/navigation/navigation.editor";
+import heroEditor from "@/components/hero/hero.editor";
-import { footerEditor } from "@/components/footer/footer.editor";
+import bannerEditor from "@/components/landing/banner.editor";
 
-import { heroEditor } from "@/components/hero/hero.editor";
+import featuredProductEditor from "@/components/commerce/featured-product.editor";
-import { bannerEditor } from "@/components/landing/banner.editor";
+import productsGridEditor from "@/components/commerce/products-grid.editor";
+import productsCarouselEditor from "@/components/commerce/products-carousel.editor";
+import collectionGridEditor from "@/components/commerce/collection-grid.editor";
+import collectionEditor from "@/components/commerce/collection.editor";
+import productDetailsEditor from "@/components/commerce/product-details.editor";
+import recommendedProductsEditor from "@/components/commerce/recommended-products.editor";
+import searchProductsEditor from "@/components/commerce/search-products.editor";
 
-import { createFeaturedProductEditor } from "@/components/commerce/featured-product.editor";
+import featuresEditor from "@/components/features/features.editor";
-import { createProductsGridEditor } from "@/components/commerce/products-grid.editor";
+import testimonialsEditor from "@/components/testimonials/testimonials.editor";
-import { createProductsCarouselEditor } from "@/components/commerce/products-carousel.editor";
+import imageGalleryEditor from "@/components/landing/image-gallery.editor";
-import { collectionGridEditor } from "@/components/commerce/collection-grid.editor";
+import newsletterCtaEditor from "@/components/landing/newsletter-cta.editor";
-import { createCollectionEditor } from "@/components/commerce/collection.editor";
+import logosEditor from "@/components/logos/logos.editor";
-import { createProductDetailsEditor } from "@/components/commerce/product-details.editor";
+import ctaEditor from "@/components/cta/cta.editor";
-import { createRecommendedProductsEditor } from "@/components/commerce/recommended-products.editor";
+import faqEditor from "@/components/faq/faq.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";
 
-const SHOPIFY_DOMAIN =
-  process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN ?? "mock.shop";
-const STOREFRONT_TOKEN =
-  process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN ?? "";
-
-const productField = createFieldShopifyProduct({
-  storeDomain: SHOPIFY_DOMAIN,
-  storefrontAccessToken: STOREFRONT_TOKEN || undefined,
-}) as any;
-
-const collectionField = createFieldShopifyCollection({
-  storeDomain: SHOPIFY_DOMAIN,
-  storefrontAccessToken: STOREFRONT_TOKEN || undefined,
-}) as any;
-
 const categories = {
   navigation: { title: "Navigation" },
   hero: { title: "Hero & Banners" },
@@ -64,9 +44,9 @@ export const homeConfig: UserConfig = {
     ...sharedComponents,
     hero: heroEditor,
     banner: bannerEditor,
-    "featured-product": createFeaturedProductEditor({ productField }),
+    "featured-product": featuredProductEditor,
-    "products-grid": createProductsGridEditor({ collectionField }),
+    "products-grid": productsGridEditor,
-    "products-carousel": createProductsCarouselEditor({ collectionField }),
+    "products-carousel": productsCarouselEditor,
     "collection-grid": collectionGridEditor,
     features: featuresEditor,
     testimonials: testimonialsEditor,
@@ -83,9 +63,9 @@ export const productConfig: UserConfig = {
   categories,
   components: {
     ...sharedComponents,
-    "product-details": createProductDetailsEditor({ productField }),
+    "product-details": productDetailsEditor,
-    "recommended-products": createRecommendedProductsEditor({ productField }),
+    "recommended-products": recommendedProductsEditor,
-    "products-carousel": createProductsCarouselEditor({ collectionField }),
+    "products-carousel": productsCarouselEditor,
   } as any,
 };
 
@@ -94,7 +74,7 @@ export const collectionsConfig: UserConfig = {
   categories,
   components: {
     ...sharedComponents,
-    collection: createCollectionEditor({ collectionField }),
+    collection: collectionEditor,
   } as any,
 };