@cimplify/sdk 0.38.2 → 0.38.4

package/templates/storefront/src/App.tsx

@@ -1,118 +0,0 @@
-import { useEffect, useState } from "react";
-import { Routes, Route, NavLink, useNavigate } from "react-router-dom";
-import { CataloguePage, CartPage, CheckoutPage, useCimplifyClient } from "@cimplify/sdk/react";
-import type { Product, Category } from "@cimplify/sdk";
-
-function CartPill({ count }: { count: number }) {
-  return <span className="cimplify-storefront__cart-pill">Cart · {count}</span>;
-}
-
-function Catalogue() {
-  const navigate = useNavigate();
-  const { client } = useCimplifyClient();
-  const [products, setProducts] = useState<Product[] | undefined>(undefined);
-  const [categories, setCategories] = useState<Category[] | undefined>(undefined);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    let cancelled = false;
-    void (async () => {
-      try {
-        const [p, c] = await Promise.all([
-          client.catalogue.getProducts({ limit: 50 }),
-          client.catalogue.getCategories(),
-        ]);
-        if (cancelled) return;
-        if (p.ok) setProducts(p.value.items);
-        if (c.ok) setCategories(c.value);
-      } finally {
-        if (!cancelled) setLoading(false);
-      }
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, [client]);
-
-  if (loading) return <p>Loading shop…</p>;
-  return (
-    <CataloguePage
-      title="Shop"
-      products={products}
-      categories={categories}
-      onProductClick={(p: Product) => navigate(`/products/${p.id}`)}
-    />
-  );
-}
-
-function ProductDetail() {
-  return (
-    <div>
-      <p>Product detail page — wire up your favourite ProductPage layout here.</p>
-      <p>The SDK ships <code>&lt;ProductPage&gt;</code>, <code>&lt;DefaultProductLayout&gt;</code>, <code>&lt;FoodProductLayout&gt;</code> etc. — pick one.</p>
-    </div>
-  );
-}
-
-function Cart() {
-  const navigate = useNavigate();
-  return <CartPage onCheckout={() => navigate("/checkout")} />;
-}
-
-function Checkout() {
-  const navigate = useNavigate();
-  return (
-    <CheckoutPage
-      onSuccess={(orderId: string) => navigate(`/orders/${orderId}`)}
-      onCancel={() => navigate("/cart")}
-    />
-  );
-}
-
-function OrderConfirmation() {
-  return (
-    <div>
-      <h2>Thanks — your order is confirmed.</h2>
-      <p>This is the page shoppers land on after checkout.</p>
-    </div>
-  );
-}
-
-export function App() {
-  const [cartCount, setCartCount] = useState(0);
-  const { client } = useCimplifyClient();
-
-  useEffect(() => {
-    void client.cart.getCount().then((r) => {
-      if (r.ok) setCartCount(r.value);
-    });
-  }, [client]);
-
-  return (
-    <div className="cimplify-storefront">
-      <header className="cimplify-storefront__nav">
-        <NavLink to="/"><h1>cimplify-store</h1></NavLink>
-        <nav>
-          <NavLink to="/" end>Shop</NavLink>
-          <NavLink to="/cart">Cart</NavLink>
-          <CartPill count={cartCount} />
-        </nav>
-      </header>
-
-      <main className="cimplify-storefront__main">
-        <Routes>
-          <Route path="/" element={<Catalogue />} />
-          <Route path="/products/:productId" element={<ProductDetail />} />
-          <Route path="/cart" element={<Cart />} />
-          <Route path="/checkout" element={<Checkout />} />
-          <Route path="/orders/:orderId" element={<OrderConfirmation />} />
-        </Routes>
-      </main>
-
-      <footer className="cimplify-storefront__footer">
-        Built with <a href="https://github.com/cimplify/cimplify">@cimplify/sdk</a> ·{" "}
-        Mock API at <code>{import.meta.env.VITE_CIMPLIFY_API_URL ?? "http://127.0.0.1:8787"}</code>
-      </footer>
-    </div>
-  );
-}

package/templates/storefront/src/main.tsx

@@ -1,28 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { BrowserRouter } from "react-router-dom";
-import { createCimplifyClient } from "@cimplify/sdk";
-import { CimplifyProvider } from "@cimplify/sdk/react";
-import { App } from "./App";
-
-import "@cimplify/sdk/styles.css";
-import "./styles.css";
-
-const baseUrl = import.meta.env.VITE_CIMPLIFY_API_URL ?? "http://127.0.0.1:8787";
-const publicKey = import.meta.env.VITE_CIMPLIFY_PUBLIC_KEY ?? "mock-dev";
-
-const client = createCimplifyClient({
-  baseUrl,
-  publicKey,
-  suppressPublicKeyWarning: true,
-});
-
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <BrowserRouter>
-      <CimplifyProvider client={client}>
-        <App />
-      </CimplifyProvider>
-    </BrowserRouter>
-  </React.StrictMode>,
-);

package/templates/storefront/src/styles.css

@@ -1,65 +0,0 @@
-@import "tailwindcss";
-
-html, body {
-  margin: 0;
-  padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
-  background: #fafaf9;
-  color: #0f172a;
-}
-
-* { box-sizing: border-box; }
-a { color: inherit; text-decoration: none; }
-
-.cimplify-storefront {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.cimplify-storefront__nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 24px;
-  background: white;
-  border-bottom: 1px solid #e2e8f0;
-  position: sticky;
-  top: 0;
-  z-index: 10;
-}
-
-.cimplify-storefront__nav h1 { font-size: 18px; margin: 0; }
-.cimplify-storefront__nav nav a { margin-left: 16px; font-size: 14px; }
-.cimplify-storefront__nav nav a.active { color: #2563eb; font-weight: 600; }
-.cimplify-storefront__cart-pill {
-  margin-left: 16px;
-  padding: 6px 12px;
-  border-radius: 999px;
-  background: #0f172a;
-  color: white;
-  font-size: 13px;
-  font-weight: 600;
-}
-
-.cimplify-storefront__main {
-  flex: 1;
-  padding: 24px;
-  max-width: 1200px;
-  margin: 0 auto;
-  width: 100%;
-}
-
-.cimplify-storefront__footer {
-  padding: 24px;
-  text-align: center;
-  font-size: 12px;
-  color: #64748b;
-  border-top: 1px solid #e2e8f0;
-  background: white;
-}
-
-.cimplify-storefront__main svg {
-  max-width: 64px;
-  max-height: 64px;
-}

package/templates/storefront/vite.config.ts

@@ -1,8 +0,0 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import tailwindcss from "@tailwindcss/vite";
-
-export default defineConfig({
-  plugins: [react(), tailwindcss()],
-  server: { port: 5173, open: false, strictPort: false },
-});