@tanstack/create 0.65.0 → 0.66.0

package/src/frameworks/react/examples/shopify-storefront/assets/src/routes/index.tsx

@@ -0,0 +1,65 @@
+import { Link, createFileRoute } from '@tanstack/react-router'
+
+import '#/components/shop/shop.css'
+import { ProductGrid } from '#/components/shop/product-grid'
+import { FeaturedCollections } from '#/components/FeaturedCollections'
+import { ShopHero } from '#/components/ShopHero'
+import {
+  getCollections,
+  getProducts,
+  getShop,
+} from '#/server/shopify/catalog.functions'
+
+export const Route = createFileRoute('/')({
+  loader: async () => {
+    const [shop, collections, products] = await Promise.all([
+      getShop(),
+      getCollections(),
+      getProducts({ data: { first: 8, sortKey: 'BEST_SELLING' } }),
+    ])
+    return { shop, collections, featured: products.nodes }
+  },
+  head: ({ loaderData }) => ({
+    meta: loaderData
+      ? [
+          { title: loaderData.shop.name },
+          { name: 'description', content: loaderData.shop.description ?? '' },
+        ]
+      : [],
+  }),
+  component: HomePage,
+})
+
+function HomePage() {
+  const { shop, collections, featured } = Route.useLoaderData()
+
+  return (
+    <div className="shop-root min-h-screen">
+      <ShopHero
+        title={shop.name}
+        tagline={shop.description ?? 'A TanStack Start + Shopify storefront.'}
+      />
+
+      {collections.length > 0 && (
+        <section className="mx-auto max-w-7xl px-4 pb-20 sm:px-6 lg:px-8">
+          <FeaturedCollections collections={collections.slice(0, 3)} />
+        </section>
+      )}
+
+      <section className="mx-auto max-w-7xl px-4 pb-24 sm:px-6 lg:px-8">
+        <div className="mb-8 flex items-baseline justify-between">
+          <h2 className="text-2xl font-medium tracking-tight sm:text-3xl">
+            Best sellers
+          </h2>
+          <Link
+            to="/shop"
+            className="text-sm underline underline-offset-4 hover:opacity-80"
+          >
+            Shop all →
+          </Link>
+        </div>
+        <ProductGrid products={featured} />
+      </section>
+    </div>
+  )
+}

package/src/frameworks/react/examples/shopify-storefront/info.json

@@ -0,0 +1,18 @@
+{
+  "name": "Shopify Storefront",
+  "description": "A polished Shopify storefront starter — TanStack Start + Shopify Storefront API + optional customer accounts. Hosted checkout, deploy anywhere.",
+  "phase": "example",
+  "modes": ["file-router"],
+  "type": "example",
+  "category": "other",
+  "color": "#5A31F4",
+  "priority": 5,
+  "link": "https://shopify.dev/docs/storefronts/headless",
+  "dependsOn": ["shopify"],
+  "default": true,
+  "routes": [
+    { "url": "/", "path": "src/routes/index.tsx", "jsName": "ShopHome" }
+  ],
+  "integrations": [],
+  "variables": []
+}

package/src/frameworks/react/examples/shopify-storefront/package.json

@@ -0,0 +1,3 @@
+{
+  "dependencies": {}
+}

package/src/frameworks/react/project/base/src/components/Header.tsx.ejs

@@ -32,7 +32,40 @@ export default function Header() {
           </Link>
         </h2>
 
-        <div className="ml-auto flex items-center gap-1.5 sm:ml-0 sm:gap-2">
+        <div className="order-3 flex w-full flex-wrap items-center gap-x-4 gap-y-1 pb-1 text-sm font-semibold sm:order-none sm:w-auto sm:flex-nowrap sm:pb-0">
+          <Link to="/" className="nav-link" activeProps={{ className: 'nav-link is-active' }}>
+            Home
+          </Link>
+          <Link
+            to="/about"
+            className="nav-link"
+            activeProps={{ className: 'nav-link is-active' }}
+          >
+            About
+          </Link>
+          <a
+            href="https://tanstack.com/start/latest/docs/framework/react/overview"
+            className="nav-link"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Docs
+          </a>
+          <% if (demoRoutes.length > 0) { %><details className="relative w-full sm:w-auto">
+            <summary className="nav-link list-none cursor-pointer">Demos</summary>
+            <div className="mt-2 min-w-56 rounded-xl border border-[var(--line)] bg-[var(--header-bg)] p-2 shadow-lg sm:absolute sm:right-0">
+              <% for (const route of demoRoutes) { %><a
+                href="<%= route.url %>"
+                className="block rounded-lg px-3 py-2 text-sm text-[var(--sea-ink-soft)] no-underline transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)]"
+              >
+                <%= route.name %>
+              </a>
+              <% } %>
+            </div>
+          </details><% } %>
+        </div>
+
+        <div className="ml-auto flex items-center gap-1.5 sm:gap-2">
           <a
             href="https://x.com/tan_stack"
             target="_blank"
@@ -65,39 +98,6 @@ export default function Header() {
           <% } %>
           <ThemeToggle />
         </div>
-
-        <div className="order-3 flex w-full flex-wrap items-center gap-x-4 gap-y-1 pb-1 text-sm font-semibold sm:order-2 sm:w-auto sm:flex-nowrap sm:pb-0">
-          <Link to="/" className="nav-link" activeProps={{ className: 'nav-link is-active' }}>
-            Home
-          </Link>
-          <Link
-            to="/about"
-            className="nav-link"
-            activeProps={{ className: 'nav-link is-active' }}
-          >
-            About
-          </Link>
-          <a
-            href="https://tanstack.com/start/latest/docs/framework/react/overview"
-            className="nav-link"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Docs
-          </a>
-          <% if (demoRoutes.length > 0) { %><details className="relative w-full sm:w-auto">
-            <summary className="nav-link list-none cursor-pointer">Demos</summary>
-            <div className="mt-2 min-w-56 rounded-xl border border-[var(--line)] bg-[var(--header-bg)] p-2 shadow-lg sm:absolute sm:right-0">
-              <% for (const route of demoRoutes) { %><a
-                href="<%= route.url %>"
-                className="block rounded-lg px-3 py-2 text-sm text-[var(--sea-ink-soft)] no-underline transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)]"
-              >
-                <%= route.name %>
-              </a>
-              <% } %>
-            </div>
-          </details><% } %>
-        </div>
       </nav>
     </header>
   )