frontend-shopify/react-editor-shopify
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update product details

Browse Source
This commit is contained in:
Rami Bitar
2026-06-03 13:41:04 -04:00
parent 4aa55c2b89
commit 3cc7ec376c
42 changed files with 1965 additions and 972 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
app/_components/editor-shell.tsx Normal file
View File

@@ -0,0 +1,44 @@
"use client";
import { useMemo } from "react";
import { Editor } from "@reacteditor/core";
import createTailwindCdnPlugin from "@reacteditor/plugin-tailwind-cdn";
import type { UserConfig } from "@/config/types";
export type EditorShellProps = {
config: UserConfig;
data: any;
routeKey?: string;
};
export function EditorShell({ config, data, routeKey }: EditorShellProps) {
const plugins = useMemo(() => [createTailwindCdnPlugin()], []);
const handlePublish = async (nextData: any, route?: any) => {
const resolved = route ?? (routeKey ? { key: routeKey } : undefined);
console.log({
type: "PUBLISH",
data: { data: nextData, route: JSON.stringify(resolved) },
});
if (typeof window !== "undefined" && window.parent !== window) {
window.parent.postMessage(
{ type: "PUBLISH", data: { data: nextData, route: resolved } },
"*",
);
}
await new Promise((resolve) => setTimeout(resolve, 1000));
};
return (
<div className="h-screen w-screen">
<Editor
config={config as any}
data={data}
plugins={plugins}
iframe={{ enabled: true }}
ui={{ leftSideBarVisible: false }}
onPublish={handlePublish}
/>
</div>
);
}

10
app/collections/[handle]/page.tsx Normal file
View File

@@ -0,0 +1,10 @@
"use client";
import { Render } from "@reacteditor/core";
import { collectionsConfig } from "@/config/configs";
import schema from "@/app.schema.json";
export default function CollectionPage() {
const data = (schema as any)["/collections/:handle"];
return <Render config={collectionsConfig as any} data={data} />;
}

16
app/editor/collections/[handle]/page.tsx Normal file
View File

@@ -0,0 +1,16 @@
"use client";
import { EditorShell } from "@/app/_components/editor-shell";
import { collectionsConfig } from "@/config/configs";
import schema from "@/app.schema.json";
export default function CollectionEditorPage() {
const data = (schema as any)["/collections/:handle"];
return (
<EditorShell
config={collectionsConfig}
data={data}
routeKey="/collections/:handle"
/>
);
}

10
app/editor/page.tsx Normal file
View File

@@ -0,0 +1,10 @@
"use client";
import { EditorShell } from "@/app/_components/editor-shell";
import { homeConfig } from "@/config/configs";
import schema from "@/app.schema.json";
export default function HomeEditorPage() {
const data = (schema as any)["/"];
return <EditorShell config={homeConfig} data={data} routeKey="/" />;
}

16
app/editor/products/[handle]/page.tsx Normal file
View File

@@ -0,0 +1,16 @@
"use client";
import { EditorShell } from "@/app/_components/editor-shell";
import { productConfig } from "@/config/configs";
import schema from "@/app.schema.json";
export default function ProductEditorPage() {
const data = (schema as any)["/products/:handle"];
return (
<EditorShell
config={productConfig}
data={data}
routeKey="/products/:handle"
/>
);
}

10
app/editor/search/page.tsx Normal file
View File

@@ -0,0 +1,10 @@
"use client";
import { EditorShell } from "@/app/_components/editor-shell";
import { searchConfig } from "@/config/configs";
import schema from "@/app.schema.json";
export default function SearchEditorPage() {
const data = (schema as any)["/search"];
return <EditorShell config={searchConfig} data={data} routeKey="/search" />;
}

0
src/globals.css → app/globals.css
View File

20
app/layout.tsx Normal file
View File

@@ -0,0 +1,20 @@
import type { ReactNode } from "react";
import "@reacteditor/core/react-editor.css";
import "@reacteditor/plugin-media/styles.css";
import "@reacteditor/plugin-ai/styles.css";
import "./globals.css";
import { Providers } from "./providers";
export const metadata = {
title: "Shopify Storefront",
};
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="en">
<body>
<Providers>{children}</Providers>
</body>
</html>
);
}

10
app/page.tsx Normal file
View File

@@ -0,0 +1,10 @@
"use client";
import { Render } from "@reacteditor/core";
import { homeConfig } from "@/config/configs";
import schema from "@/app.schema.json";
export default function HomePage() {
const data = (schema as any)["/"];
return <Render config={homeConfig as any} data={data} />;
}

10
app/products/[handle]/page.tsx Normal file
View File

@@ -0,0 +1,10 @@
"use client";
import { Render } from "@reacteditor/core";
import { productConfig } from "@/config/configs";
import schema from "@/app.schema.json";
export default function ProductPage() {
const data = (schema as any)["/products/:handle"];
return <Render config={productConfig as any} data={data} />;
}

21
app/providers.tsx Normal file
View File

@@ -0,0 +1,21 @@
"use client";
import { useEffect, useState, type ReactNode } from "react";
import { ShopifyProvider } from "@/contexts/shopify-context";
const SHOPIFY_DOMAIN =
process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN ?? "mock.shop";
const STOREFRONT_TOKEN =
process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN ?? "";
export function Providers({ children }: { children: ReactNode }) {
const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
if (!mounted) return null;
return (
<ShopifyProvider domain={SHOPIFY_DOMAIN} token={STOREFRONT_TOKEN}>
{children}
</ShopifyProvider>
);
}

10
app/search/page.tsx Normal file
View File

@@ -0,0 +1,10 @@
"use client";
import { Render } from "@reacteditor/core";
import { searchConfig } from "@/config/configs";
import schema from "@/app.schema.json";
export default function SearchPage() {
const data = (schema as any)["/search"];
return <Render config={searchConfig as any} data={data} />;
}

4
components.json
View File

@@ -1,11 +1,11 @@
{ {
"$schema": "https://ui.shadcn.com/schema.json", "$schema": "https://ui.shadcn.com/schema.json",
"style": "base-nova", "style": "base-nova",
"rsc": false, "rsc": true,
"tsx": true, "tsx": true,
"tailwind": { "tailwind": {
"config": "", "config": "",
"css": "src/globals.css", "css": "app/globals.css",
"baseColor": "neutral", "baseColor": "neutral",
"cssVariables": true, "cssVariables": true,
"prefix": "" "prefix": ""

4
components/commerce/collection-card.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { Link } from 'react-router'; import Link from 'next/link';
import { Card, CardContent } from '@/components/ui/card'; import { Card, CardContent } from '@/components/ui/card';
import { Typography } from '@/components/Typography'; import { Typography } from '@/components/Typography';
@@ -22,7 +22,7 @@ interface CollectionCardProps {
const CollectionCard: React.FC<CollectionCardProps> = ({ collection }) => { const CollectionCard: React.FC<CollectionCardProps> = ({ collection }) => {
return ( return (
<Link to={`/collections/${collection.handle}`} className="block group"> <Link href={`/collections/${collection.handle}`} className="block group">
<Card className="hover:shadow-xl transition-shadow duration-300 overflow-hidden py-0 gap-0"> <Card className="hover:shadow-xl transition-shadow duration-300 overflow-hidden py-0 gap-0">
{/* Collection Image */} {/* Collection Image */}
<div className="aspect-video overflow-hidden bg-muted"> <div className="aspect-video overflow-hidden bg-muted">

4
components/commerce/collection-grid.tsx
View File

@@ -1,5 +1,5 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Link } from "react-router"; import Link from "next/link";
import { shopifyFetch } from "@/services/shopify/client"; import { shopifyFetch } from "@/services/shopify/client";
import { GET_COLLECTIONS_QUERY } from "@/graphql/collections"; import { GET_COLLECTIONS_QUERY } from "@/graphql/collections";
import { Container } from "@/components/layout/Container"; import { Container } from "@/components/layout/Container";
@@ -71,7 +71,7 @@ export function CollectionGrid({
).map((c: CollectionRow) => ( ).map((c: CollectionRow) => (
<Link <Link
key={c.id} key={c.id}
to={c.handle ? `/collections/${c.handle}` : "#"} href={c.handle ? `/collections/${c.handle}` : "#"}
className="group block" className="group block"
> >
<div <div

6
components/commerce/collection.tsx
View File

@@ -1,5 +1,5 @@
import { useState, useCallback } from 'react'; import { useState, useCallback } from 'react';
import { useParams } from 'react-router'; import { useParams } from 'next/navigation';
import { ChevronDown, SlidersHorizontal } from 'lucide-react'; import { ChevronDown, SlidersHorizontal } from 'lucide-react';
import type { ShopifyCollection } from '@reacteditor/field-shopify'; import type { ShopifyCollection } from '@reacteditor/field-shopify';
import { import {
@@ -358,7 +358,9 @@ function buildProductFilters(active: ActiveFilters): ProductFilter[] {
export function CollectionView(props: CollectionProps) { export function CollectionView(props: CollectionProps) {
const { collection: selected, showDescription, showCoverImage, customCoverImage, columns, limit, defaultSort } = props; const { collection: selected, showDescription, showCoverImage, customCoverImage, columns, limit, defaultSort } = props;
const { handle: paramHandle } = useParams<{ handle?: string }>(); const params = useParams();
const paramHandle =
typeof params?.handle === 'string' ? params.handle : undefined;
const handle = selected?.handle ?? paramHandle ?? ''; const handle = selected?.handle ?? paramHandle ?? '';
const [sort, setSort] = useState<CollectionSortKey>(defaultSort); const [sort, setSort] = useState<CollectionSortKey>(defaultSort);

4
components/commerce/featured-product.tsx
View File

@@ -1,4 +1,4 @@
import { Link } from "react-router"; import Link from "next/link";
import type { ShopifyProduct } from "@reacteditor/field-shopify"; import type { ShopifyProduct } from "@reacteditor/field-shopify";
import { useProduct } from "@/hooks/use-shopify-products"; import { useProduct } from "@/hooks/use-shopify-products";
import { useShopifyCart } from "@/hooks/use-shopify-cart"; import { useShopifyCart } from "@/hooks/use-shopify-cart";
@@ -115,7 +115,7 @@ export function FeaturedProductView({
{ctaLabel} {ctaLabel}
</button> </button>
<Link <Link
to={`/products/${product.handle}`} href={`/products/${product.handle}`}
className="inline-flex items-center justify-center rounded-md border border-foreground px-6 py-3 text-sm font-medium tracking-wide hover:opacity-80" className="inline-flex items-center justify-center rounded-md border border-foreground px-6 py-3 text-sm font-medium tracking-wide hover:opacity-80"
> >
View details View details

4
components/commerce/product-card.tsx
View File

@@ -1,5 +1,5 @@
import * as React from "react"; import * as React from "react";
import { Link } from "react-router"; import Link from "next/link";
import { Typography } from "@/components/Typography"; import { Typography } from "@/components/Typography";
type ProductImage = { url: string; altText?: string }; type ProductImage = { url: string; altText?: string };
@@ -41,7 +41,7 @@ export function ProductCard({
}; };
return ( return (
<Link to={`/products/${product.handle}`} className="group block"> <Link href={`/products/${product.handle}`} className="group block">
<div <div
className={`relative w-full overflow-hidden rounded-md bg-muted ${aspectClass[aspect]}`} className={`relative w-full overflow-hidden rounded-md bg-muted ${aspectClass[aspect]}`}
> >

6
components/commerce/product-detail/index.tsx
View File

@@ -1,7 +1,7 @@
'use client'; 'use client';
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Link } from 'react-router'; import Link from 'next/link';
import { useProduct, type Product } from '@/hooks/use-shopify-products'; import { useProduct, type Product } from '@/hooks/use-shopify-products';
import { useShopifyCart } from '@/hooks/use-shopify-cart'; import { useShopifyCart } from '@/hooks/use-shopify-cart';
import ProductDetailGallery from './product-detail-gallery'; import ProductDetailGallery from './product-detail-gallery';
@@ -164,13 +164,13 @@ const ProductDetail: React.FC<ProductDetailProps> = ({ handle: handleProp }) =>
<BreadcrumbList> <BreadcrumbList>
<BreadcrumbItem> <BreadcrumbItem>
<BreadcrumbLink asChild> <BreadcrumbLink asChild>
<Link to="/">Home</Link> <Link href="/">Home</Link>
</BreadcrumbLink> </BreadcrumbLink>
</BreadcrumbItem> </BreadcrumbItem>
<BreadcrumbSeparator /> <BreadcrumbSeparator />
<BreadcrumbItem> <BreadcrumbItem>
<BreadcrumbLink asChild> <BreadcrumbLink asChild>
<Link to="/shop">Shop</Link> <Link href="/shop">Shop</Link>
</BreadcrumbLink> </BreadcrumbLink>
</BreadcrumbItem> </BreadcrumbItem>
<BreadcrumbSeparator /> <BreadcrumbSeparator />

6
components/commerce/product-details.tsx
View File

@@ -1,5 +1,5 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useParams } from "react-router"; import { useParams } from "next/navigation";
import type { ShopifyProduct } from "@reacteditor/field-shopify"; import type { ShopifyProduct } from "@reacteditor/field-shopify";
import { useProduct } from "@/hooks/use-shopify-products"; import { useProduct } from "@/hooks/use-shopify-products";
import { useShopifyCart } from "@/hooks/use-shopify-cart"; import { useShopifyCart } from "@/hooks/use-shopify-cart";
@@ -14,7 +14,9 @@ export type ProductDetailsProps = {
}; };
export function ProductDetailsView({ product: selected }: ProductDetailsProps) { export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
const { handle: paramHandle } = useParams<{ handle?: string }>(); const params = useParams();
const paramHandle =
typeof params?.handle === "string" ? params.handle : undefined;
const handle = selected?.handle ?? paramHandle ?? null; const handle = selected?.handle ?? paramHandle ?? null;
const { product, loading } = useProduct(handle); const { product, loading } = useProduct(handle);
const cart = useShopifyCart(); const cart = useShopifyCart();

4
components/commerce/products-carousel.tsx
View File

@@ -1,5 +1,5 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Link } from "react-router"; import Link from "next/link";
import type { ShopifyCollection } from "@reacteditor/field-shopify"; import type { ShopifyCollection } from "@reacteditor/field-shopify";
import { getProducts } from "@/hooks/use-shopify-products"; import { getProducts } from "@/hooks/use-shopify-products";
import { getCollectionProducts } from "@/hooks/use-shopify-collections"; import { getCollectionProducts } from "@/hooks/use-shopify-collections";
@@ -84,7 +84,7 @@ export function ProductsCarousel({
/> />
{ctaLabel ? ( {ctaLabel ? (
<Link <Link
to={ href={
ctaHref || ctaHref ||
(collection?.handle ? `/collections/${collection.handle}` : "/collections") (collection?.handle ? `/collections/${collection.handle}` : "/collections")
} }

4
components/commerce/products-grid.tsx
View File

@@ -1,5 +1,5 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Link } from "react-router"; import Link from "next/link";
import type { ShopifyCollection } from "@reacteditor/field-shopify"; import type { ShopifyCollection } from "@reacteditor/field-shopify";
import { getProducts } from "@/hooks/use-shopify-products"; import { getProducts } from "@/hooks/use-shopify-products";
import { getCollectionProducts } from "@/hooks/use-shopify-collections"; import { getCollectionProducts } from "@/hooks/use-shopify-collections";
@@ -72,7 +72,7 @@ export function ProductsGrid({
/> />
{ctaLabel ? ( {ctaLabel ? (
<Link <Link
to={ctaHref || (collection?.handle ? `/collections/${collection.handle}` : "/collections")} href={ctaHref || (collection?.handle ? `/collections/${collection.handle}` : "/collections")}
className="text-sm font-medium tracking-wide hover:opacity-70" className="text-sm font-medium tracking-wide hover:opacity-70"
> >
{ctaLabel} → {ctaLabel} →

11
components/commerce/search-products.tsx
View File

@@ -1,5 +1,5 @@
import { useState, useEffect, useCallback } from 'react'; import { useState, useEffect, useCallback } from 'react';
import { useSearchParams } from 'react-router'; import { useSearchParams, useRouter, usePathname } from 'next/navigation';
import { ChevronDown, SlidersHorizontal } from 'lucide-react'; import { ChevronDown, SlidersHorizontal } from 'lucide-react';
import { useShopifySearch, type SearchFilters, type SortOption } from '@/hooks/use-shopify-search'; import { useShopifySearch, type SearchFilters, type SortOption } from '@/hooks/use-shopify-search';
@@ -317,7 +317,9 @@ function Sidebar({
// ─── Main component ────────────────────────────────────────────────────────── // ─── Main component ──────────────────────────────────────────────────────────
export function SearchProductsView(props: SearchProductsProps) { export function SearchProductsView(props: SearchProductsProps) {
const [searchParams, setSearchParams] = useSearchParams(); const searchParams = useSearchParams();
const router = useRouter();
const pathname = usePathname();
const initialQ = searchParams.get('q') ?? ''; const initialQ = searchParams.get('q') ?? '';
const [query, setQuery] = useState(initialQ); const [query, setQuery] = useState(initialQ);
@@ -386,9 +388,10 @@ export function SearchProductsView(props: SearchProductsProps) {
// Sync ?q= param when query changes // Sync ?q= param when query changes
useEffect(() => { useEffect(() => {
const params = new URLSearchParams(searchParams); const params = new URLSearchParams(searchParams.toString());
if (query) params.set('q', query); else params.delete('q'); if (query) params.set('q', query); else params.delete('q');
setSearchParams(params, { replace: true }); const qs = params.toString();
router.replace(qs ? `${pathname}?${qs}` : pathname, { scroll: false });
}, [query]); }, [query]);
const handleSearch = (e: React.FormEvent) => { const handleSearch = (e: React.FormEvent) => {

6
components/cta/cta.tsx
View File

@@ -1,4 +1,4 @@
import { Link } from "react-router"; import Link from "next/link";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { Heading } from "@/components/Heading"; import { Heading } from "@/components/Heading";
@@ -60,7 +60,7 @@ export function CTA({
> >
{primaryCta?.label ? ( {primaryCta?.label ? (
<Link <Link
to={primaryCta.href || "#"} href={primaryCta.href || "#"}
className="inline-flex items-center justify-center rounded-md bg-white px-6 py-3 text-sm font-medium tracking-wide text-black hover:opacity-90" className="inline-flex items-center justify-center rounded-md bg-white px-6 py-3 text-sm font-medium tracking-wide text-black hover:opacity-90"
> >
{primaryCta.label} {primaryCta.label}
@@ -68,7 +68,7 @@ export function CTA({
) : null} ) : null}
{secondaryCta?.label ? ( {secondaryCta?.label ? (
<Link <Link
to={secondaryCta.href || "#"} href={secondaryCta.href || "#"}
className="inline-flex items-center justify-center rounded-md border border-white px-6 py-3 text-sm font-medium tracking-wide text-white hover:bg-white/10" className="inline-flex items-center justify-center rounded-md border border-white px-6 py-3 text-sm font-medium tracking-wide text-white hover:bg-white/10"
> >
{secondaryCta.label} {secondaryCta.label}

4
components/footer/footer.tsx
View File

@@ -1,5 +1,5 @@
import { useState } from "react"; import { useState } from "react";
import { Link } from "react-router"; import Link from "next/link";
import { Typography } from "@/components/Typography"; import { Typography } from "@/components/Typography";
import { Container } from "@/components/layout/Container"; import { Container } from "@/components/layout/Container";
@@ -97,7 +97,7 @@ export function Footer({
{col.links.map((l, j) => ( {col.links.map((l, j) => (
<li key={j}> <li key={j}>
<Link <Link
to={l.href} href={l.href}
className="text-sm text-foreground/80 hover:text-foreground" className="text-sm text-foreground/80 hover:text-foreground"
> >
{l.label} {l.label}

4
components/hero/hero.tsx
View File

@@ -1,4 +1,4 @@
import { Link } from "react-router"; import Link from "next/link";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { Typography } from "@/components/Typography"; import { Typography } from "@/components/Typography";
@@ -127,7 +127,7 @@ export function Hero({
{visibleButtons.map((b, i) => ( {visibleButtons.map((b, i) => (
<Link <Link
key={`${b.href}-${b.label}-${i}`} key={`${b.href}-${b.label}-${i}`}
to={b.href || "#"} href={b.href || "#"}
className={buttonClass(b.variant, isDark)} className={buttonClass(b.variant, isDark)}
> >
{b.label} {b.label}

4
components/landing/banner.tsx
View File

@@ -1,4 +1,4 @@
import { Link } from "react-router"; import Link from "next/link";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
export type BannerProps = { export type BannerProps = {
@@ -20,7 +20,7 @@ export function Banner({ text, ctaLabel, ctaHref, tone }: BannerProps) {
<span>{text}</span> <span>{text}</span>
{ctaLabel ? ( {ctaLabel ? (
<Link <Link
to={ctaHref || "#"} href={ctaHref || "#"}
className="underline-offset-4 hover:underline" className="underline-offset-4 hover:underline"
> >
{ctaLabel} → {ctaLabel} →

10
components/navigation/navigation.tsx
View File

@@ -1,6 +1,6 @@
import { Menu as MenuIcon, ShoppingBag, Search } from "lucide-react"; import { Menu as MenuIcon, ShoppingBag, Search } from "lucide-react";
import { useState } from "react"; import { useState } from "react";
import { Link } from "react-router"; import Link from "next/link";
import { useShopifyCart } from "@/hooks/use-shopify-cart"; import { useShopifyCart } from "@/hooks/use-shopify-cart";
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"; import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
import { Container } from "@/components/layout/Container"; import { Container } from "@/components/layout/Container";
@@ -52,7 +52,7 @@ export function Navigation({
)} )}
> >
<Container className="flex h-16 items-center justify-between md:h-20"> <Container className="flex h-16 items-center justify-between md:h-20">
<Link to="/" className="inline-flex items-center"> <Link href="/" className="inline-flex items-center">
{logo ? ( {logo ? (
<img <img
src={logo} src={logo}
@@ -70,7 +70,7 @@ export function Navigation({
{links.map((l) => ( {links.map((l) => (
<Link <Link
key={l.href + l.label} key={l.href + l.label}
to={l.href} href={l.href}
className="text-sm tracking-wide opacity-80 transition-opacity hover:opacity-100" className="text-sm tracking-wide opacity-80 transition-opacity hover:opacity-100"
> >
{l.label} {l.label}
@@ -81,7 +81,7 @@ export function Navigation({
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
{showSearch === "yes" && ( {showSearch === "yes" && (
<Link <Link
to="/search" href="/search"
aria-label="Search" aria-label="Search"
className="hidden h-10 w-10 items-center justify-center rounded-full transition-colors hover:bg-foreground/5 md:inline-flex" className="hidden h-10 w-10 items-center justify-center rounded-full transition-colors hover:bg-foreground/5 md:inline-flex"
> >
@@ -124,7 +124,7 @@ export function Navigation({
{links.map((l) => ( {links.map((l) => (
<Link <Link
key={l.href + l.label} key={l.href + l.label}
to={l.href} href={l.href}
className="rounded-md px-3 py-3 text-base hover:bg-muted" className="rounded-md px-3 py-3 text-base hover:bg-muted"
> >
{l.label} {l.label}

108
config/configs.ts Normal file
View File

@@ -0,0 +1,108 @@
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";
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" },
commerce: { title: "Commerce" },
content: { title: "Content" },
footer: { title: "Footer" },
};
const sharedComponents = {
navigation: navigationEditor,
footer: footerEditor,
};
export const homeConfig: UserConfig = {
root: Root,
categories,
components: {
...sharedComponents,
hero: heroEditor,
banner: bannerEditor,
"featured-product": createFeaturedProductEditor({ productField }),
"products-grid": createProductsGridEditor({ collectionField }),
"products-carousel": createProductsCarouselEditor({ collectionField }),
"collection-grid": collectionGridEditor,
features: featuresEditor,
testimonials: testimonialsEditor,
"image-gallery": imageGalleryEditor,
"newsletter-cta": newsletterCtaEditor,
logos: logosEditor,
cta: ctaEditor,
faq: faqEditor,
} as any,
};
export const productConfig: UserConfig = {
root: Root,
categories,
components: {
...sharedComponents,
"product-details": createProductDetailsEditor({ productField }),
"recommended-products": createRecommendedProductsEditor({ productField }),
"products-carousel": createProductsCarouselEditor({ collectionField }),
} as any,
};
export const collectionsConfig: UserConfig = {
root: Root,
categories,
components: {
...sharedComponents,
collection: createCollectionEditor({ collectionField }),
} as any,
};
export const searchConfig: UserConfig = {
root: Root,
categories,
components: {
...sharedComponents,
"search-products": searchProductsEditor,
} as any,
};

20
index.html
View File

@@ -1,20 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Shopify Storefront</title>
<link
rel="stylesheet"
href="https://esm.sh/@reacteditor/core@0.0.10/dist/index.css"
/>
<link
rel="stylesheet"
href="https://esm.sh/@reacteditor/plugin-ai@0.0.3/styles.css"
/>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

6
next-env.d.ts vendored Normal file
View File

@@ -0,0 +1,6 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
import "./.next/dev/types/routes.d.ts";
// NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

10
next.config.ts Normal file
View File

@@ -0,0 +1,10 @@
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
reactStrictMode: true,
typescript: {
ignoreBuildErrors: true,
},
};
export default nextConfig;

31
package.json
View File

@@ -2,16 +2,13 @@
"name": "react-editor-demo", "name": "react-editor-demo",
"version": "1.0.0", "version": "1.0.0",
"private": true, "private": true,
"type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "next dev",
"build": "vite build", "build": "next build",
"preview": "vite preview", "start": "next start",
"start": "vite preview" "lint": "next lint"
}, },
"dependencies": { "dependencies": {
"@ai-sdk/anthropic": "^3.0.74",
"@ai-sdk/react": "^3.0.177",
"@base-ui/react": "^1.4.1", "@base-ui/react": "^1.4.1",
"@fontsource-variable/geist": "^5.2.8", "@fontsource-variable/geist": "^5.2.8",
"@radix-ui/react-accordion": "^1.2.11", "@radix-ui/react-accordion": "^1.2.11",
@@ -28,23 +25,23 @@
"@radix-ui/react-switch": "^1.2.5", "@radix-ui/react-switch": "^1.2.5",
"@radix-ui/react-tabs": "^1.1.12", "@radix-ui/react-tabs": "^1.1.12",
"@radix-ui/react-tooltip": "^1.2.7", "@radix-ui/react-tooltip": "^1.2.7",
"@reacteditor/core": "0.0.19", "@reacteditor/core": "0.0.30",
"@reacteditor/field-google-fonts": "^0.0.1", "@reacteditor/field-google-fonts": "^0.0.3",
"@reacteditor/field-shopify": "^0.0.1", "@reacteditor/field-shopify": "^0.0.2",
"@reacteditor/plugin-ai": "^0.0.4", "@reacteditor/plugin-ai": "^0.0.7",
"@reacteditor/plugin-media": "^0.0.2", "@reacteditor/plugin-media": "^0.0.4",
"@reacteditor/plugin-tailwind-cdn": "^0.0.2", "@reacteditor/plugin-tailwind-cdn": "^0.0.3",
"@shopify/storefront-api-client": "^1.0.0", "@shopify/storefront-api-client": "^1.0.0",
"@tailwindcss/postcss": "^4.1.11", "@tailwindcss/postcss": "^4.1.11",
"ai": "^6.0.175",
"class-variance-authority": "^0.7.1", "class-variance-authority": "^0.7.1",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"embla-carousel-react": "^8.6.0", "embla-carousel-react": "^8.6.0",
"framer-motion": "^12.16.0", "framer-motion": "^12.16.0",
"lucide-react": "^1.14.0", "lucide-react": "^1.14.0",
"next": "16.2.6",
"react": "^19.1.1", "react": "^19.1.1",
"react-dom": "^19.1.1", "react-dom": "^19.1.1",
"react-router": "^7.0.0", "react-router": "^7",
"tailwind-merge": "^3.5.0", "tailwind-merge": "^3.5.0",
"tailwindcss": "^4.1.11", "tailwindcss": "^4.1.11",
"tw-animate-css": "^1.4.0", "tw-animate-css": "^1.4.0",
@@ -55,8 +52,6 @@
"@types/node": "^22.0.0", "@types/node": "^22.0.0",
"@types/react": "^19.0.0", "@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0", "@types/react-dom": "^19.0.0",
"@vitejs/plugin-react": "^4.3.4", "typescript": "^5.5.4"
"typescript": "^5.5.4",
"vite": "^6.0.0"
} }
} }

90
react-editor.config.tsx
View File

@@ -1,90 +0,0 @@
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;

2
services/media-adapter.ts
View File

@@ -5,7 +5,7 @@ import type {
} from "@reacteditor/plugin-media"; } from "@reacteditor/plugin-media";
const MEDIA_BASE = "https://www.frontend-ai.com"; const MEDIA_BASE = "https://www.frontend-ai.com";
const MEDIA_API_KEY = (import.meta.env.VITE_API_KEY as string | undefined) ?? ""; const MEDIA_API_KEY = process.env.NEXT_PUBLIC_API_KEY ?? "";
export const frontendAiMediaAdapter: MediaAdapter = { export const frontendAiMediaAdapter: MediaAdapter = {
fetchList: async ({ query, cursor, signal }) => { fetchList: async ({ query, cursor, signal }) => {

83
src/App.tsx
View File

@@ -1,83 +0,0 @@
import { useCallback, useMemo, useRef, useState } from "react";
import { App as ReactEditorApp } from "@reacteditor/core";
import "@reacteditor/core/react-editor.css";
import createTailwindCdnPlugin from "@reacteditor/plugin-tailwind-cdn";
import { mediaPlugin } from "@reacteditor/plugin-media";
import "@reacteditor/plugin-media/styles.css";
import { aiPlugin } from "@reacteditor/plugin-ai";
import "@reacteditor/plugin-ai/styles.css";
import { createConfig } from "@/react-editor.config";
import { ShopifyProvider } from "@/contexts/shopify-context";
import { frontendAiMediaAdapter } from "@/services/media-adapter";
import schemaJson from "../app.schema.json";
const AI_API_KEY = (import.meta.env.VITE_API_KEY as string | undefined) ?? "";
type Pages = Record<string, { root: any; content: any[] }>;
const SHOPIFY_DOMAIN =
(import.meta.env.VITE_SHOPIFY_DOMAIN as string | undefined) ?? "mock.shop";
const STOREFRONT_TOKEN =
(import.meta.env.VITE_SHOPIFY_STOREFRONT_ACCESS_TOKEN as
| string
| undefined) ?? "";
function readPathname() {
if (typeof window === "undefined") return "/";
const p = window.location.pathname;
return p === "" ? "/" : p;
}
export default function App() {
const pages = schemaJson as Pages;
const [currentPath, setCurrentPath] = useState<string>(readPathname);
const latestDataRef = useRef<any>(null);
const handleChange = useCallback((data: any) => {
latestDataRef.current = data;
}, []);
const config = useMemo(
() =>
createConfig({
domain: SHOPIFY_DOMAIN,
token: STOREFRONT_TOKEN || null,
}),
[],
);
const handlePublish = async (data: any, route?: { key: string }) => {
console.log({ type: "PUBLISH", data: { data, route: JSON.stringify(route) } });
if (typeof window !== "undefined" && window.parent !== window) {
window.parent.postMessage(
{ type: "PUBLISH", data: { data, route } },
"*",
);
}
await new Promise((resolve) => setTimeout(resolve, 1000));
};
const plugins = useMemo(
() => [createTailwindCdnPlugin()],
[pages, currentPath, handlePublish],
);
return (
<div className="h-screen w-screen">
<ShopifyProvider domain={SHOPIFY_DOMAIN} token={STOREFRONT_TOKEN}>
<ReactEditorApp
config={config as any}
pages={pages as any}
currentPath={currentPath}
plugins={plugins}
iframe={{ enabled: true }}
ui={{
leftSideBarVisible: false,
}}
onPublish={handlePublish}
onChange={handleChange}
/>
</ShopifyProvider>
</div>
);
}

10
src/main.tsx
View File

@@ -1,10 +0,0 @@
import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
import "./globals.css";
createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
);

10
src/vite-env.d.ts vendored
View File

@@ -1,10 +0,0 @@
/// <reference types="vite/client" />
interface ImportMetaEnv {
readonly VITE_SHOPIFY_DOMAIN?: string;
readonly VITE_SHOPIFY_STOREFRONT_ACCESS_TOKEN?: string;
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}

44
tsconfig.json
View File

@@ -1,29 +1,46 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "ES2022", "target": "ES2022",
"useDefineForClassFields": true, "lib": [
"lib": ["ES2022", "DOM", "DOM.Iterable"], "ES2022",
"DOM",
"DOM.Iterable"
],
"module": "ESNext", "module": "ESNext",
"moduleResolution": "Bundler", "moduleResolution": "Bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true, "resolveJsonModule": true,
"isolatedModules": true, "isolatedModules": true,
"moduleDetection": "force", "moduleDetection": "force",
"noEmit": true, "noEmit": true,
"jsx": "react-jsx", "jsx": "react-jsx",
"incremental": true,
"strict": true, "strict": true,
"skipLibCheck": true, "skipLibCheck": true,
"esModuleInterop": true, "esModuleInterop": true,
"allowJs": true, "allowJs": true,
"types": ["node", "vite/client"], "allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"types": [
"node"
],
"baseUrl": ".", "baseUrl": ".",
"paths": { "paths": {
"@/*": ["./*"], "@/*": [
"~/*": ["./*"] "./*"
],
"~/*": [
"./*"
]
},
"plugins": [
{
"name": "next"
} }
]
}, },
"include": [ "include": [
"src", "next-env.d.ts",
"app",
"api", "api",
"components", "components",
"config", "config",
@@ -33,8 +50,15 @@
"lib", "lib",
"services", "services",
"vendor", "vendor",
"react-editor.config.tsx", "next.config.ts",
"vite.config.ts" "**/*.ts",
"**/*.tsx",
".next/types/**/*.ts",
".next/dev/types/**/*.ts"
], ],
"exclude": ["node_modules", "dist"] "exclude": [
"node_modules",
"dist",
".next"
]
} }

1
tsconfig.tsbuildinfo Normal file
View File

File diff suppressed because one or more lines are too long

23
vite.config.ts
View File

@@ -1,23 +0,0 @@
import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";
import path from "node:path";
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), "");
for (const k of Object.keys(env)) {
if (process.env[k] === undefined) process.env[k] = env[k];
}
return {
plugins: [react()],
resolve: {
alias: {
"@": path.resolve(__dirname, "."),
"~": path.resolve(__dirname, "."),
},
},
server: {
port: 3001,
},
};
});

2235
yarn.lock
View File

File diff suppressed because it is too large Load Diff