@tanstack/create 0.61.5 → 0.62.0

package/src/frameworks/react/add-ons/strapi/assets/src/routes/demo/strapi.tsx

@@ -1,64 +1,290 @@
-import { articles } from '#/lib/strapiClient'
 import { createFileRoute, Link } from '@tanstack/react-router'
+import { z } from 'zod'
+import { strapiApi } from '@/data/loaders'
+import { StrapiImage } from '@/components/strapi-image'
+import { Search } from '@/components/search'
+import { Pagination } from '@/components/pagination'
+import type { TArticle } from '@/types/strapi'
+
+type LoaderResult = {
+  status: 'success' | 'empty' | 'error'
+  articles: TArticle[]
+  meta?: { pagination?: { page: number; pageCount: number; total: number } }
+  error?: string
+  query?: string
+}
+
+const searchSchema = z.object({
+  query: z.string().optional(),
+  page: z.number().default(1),
+})
 
 export const Route = createFileRoute('/demo/strapi')({
   component: RouteComponent,
-  loader: async () => {
-    const { data: strapiArticles } = await articles.find()
-    return strapiArticles
+  validateSearch: searchSchema,
+  loaderDeps: ({ search }) => ({ search }),
+  loader: async ({ deps }): Promise<LoaderResult> => {
+    const { query, page } = deps.search
+    try {
+      const response = await strapiApi.articles.getArticlesData({
+        data: { query, page },
+      })
+
+      // Check if we got data
+      if (!response || !response.data) {
+        return {
+          status: 'empty',
+          articles: [],
+          meta: response?.meta,
+          query,
+        }
+      }
+
+      // Check if data array is empty
+      if (response.data.length === 0) {
+        return {
+          status: 'empty',
+          articles: [],
+          meta: response.meta,
+          query,
+        }
+      }
+
+      return {
+        status: 'success',
+        articles: response.data,
+        meta: response.meta,
+        query,
+      }
+    } catch (error) {
+      console.error('Strapi fetch error:', error)
+      return {
+        status: 'error',
+        articles: [],
+        error:
+          error instanceof Error
+            ? error.message
+            : 'Failed to connect to Strapi',
+        query,
+      }
+    }
   },
 })
 
+function StrapiServerInstructions() {
+  return (
+    <div className="bg-slate-800/50 rounded-lg p-6 text-left mt-6">
+      <h2 className="text-lg font-semibold text-white mb-4">
+        Start the Strapi Server
+      </h2>
+      <div className="space-y-2 text-sm font-mono text-gray-400">
+        <p>
+          <span className="text-cyan-400">$</span> cd ../server
+        </p>
+        <p>
+          <span className="text-cyan-400">$</span> npm install
+        </p>
+        <p>
+          <span className="text-cyan-400">$</span> npm run develop
+        </p>
+      </div>
+      <p className="text-gray-500 text-sm mt-4">
+        Then create an admin at{' '}
+        <a
+          href="http://localhost:1337/admin"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-cyan-400 hover:underline"
+        >
+          http://localhost:1337/admin
+        </a>
+      </p>
+    </div>
+  )
+}
+
+function ConnectionError({ error }: { error?: string }) {
+  return (
+    <div className="bg-amber-900/20 border border-amber-500/50 rounded-xl p-8">
+      <div className="flex items-start gap-4">
+        <div className="text-amber-400 text-2xl">⚠️</div>
+        <div>
+          <h2 className="text-xl font-semibold text-amber-400 mb-2">
+            Cannot Connect to Strapi
+          </h2>
+          <p className="text-gray-300 mb-4">
+            Make sure your Strapi server is running at{' '}
+            <code className="text-cyan-400 bg-slate-800 px-2 py-1 rounded">
+              http://localhost:1337
+            </code>
+          </p>
+          {error && (
+            <p className="text-gray-500 text-sm mb-4">Error: {error}</p>
+          )}
+          <StrapiServerInstructions />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function NoArticlesFound({ query }: { query?: string }) {
+  if (query) {
+    return (
+      <div className="bg-slate-800/50 border border-slate-700 rounded-xl p-8">
+        <div className="text-center">
+          <div className="text-6xl mb-4">🔍</div>
+          <h2 className="text-2xl font-semibold text-white mb-4">
+            No Results Found
+          </h2>
+          <p className="text-gray-400 mb-6 max-w-md mx-auto">
+            No articles match your search for "{query}". Try adjusting your
+            search terms.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="bg-slate-800/50 border border-slate-700 rounded-xl p-8">
+      <div className="text-center">
+        <div className="text-6xl mb-4">📝</div>
+        <h2 className="text-2xl font-semibold text-white mb-4">
+          No Articles Yet
+        </h2>
+        <p className="text-gray-400 mb-6 max-w-md mx-auto">
+          Your Strapi server is running, but there are no published articles.
+          Create and publish your first article to see it here.
+        </p>
+
+        <div className="bg-slate-900/50 rounded-lg p-6 text-left max-w-md mx-auto">
+          <h3 className="text-lg font-semibold text-white mb-4">
+            How to add articles:
+          </h3>
+          <ol className="space-y-3 text-gray-400">
+            <li className="flex gap-3">
+              <span className="text-cyan-400 font-bold">1.</span>
+              <span>
+                Open{' '}
+                <a
+                  href="http://localhost:1337/admin"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-cyan-400 hover:underline"
+                >
+                  Strapi Admin Panel
+                </a>
+              </span>
+            </li>
+            <li className="flex gap-3">
+              <span className="text-cyan-400 font-bold">2.</span>
+              <span>
+                Go to <strong className="text-white">Content Manager</strong> →{' '}
+                <strong className="text-white">Article</strong>
+              </span>
+            </li>
+            <li className="flex gap-3">
+              <span className="text-cyan-400 font-bold">3.</span>
+              <span>
+                Click <strong className="text-white">Create new entry</strong>
+              </span>
+            </li>
+            <li className="flex gap-3">
+              <span className="text-cyan-400 font-bold">4.</span>
+              <span>
+                Fill in the details and click{' '}
+                <strong className="text-white">Publish</strong>
+              </span>
+            </li>
+          </ol>
+        </div>
+      </div>
+    </div>
+  )
+}
+
 function RouteComponent() {
-  const strapiArticles = Route.useLoaderData()
+  const { status, articles, meta, error, query } = Route.useLoaderData()
 
   return (
     <div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 p-8">
       <div className="max-w-7xl mx-auto">
-        <h1 className="text-4xl font-bold mb-8 text-white">
+        <h1 className="text-4xl font-bold mb-6 text-white">
           <span className="bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent">
             Strapi
           </span>{' '}
           <span className="text-gray-300">Articles</span>
         </h1>
 
-        {strapiArticles && strapiArticles.length > 0 ? (
-          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-            {strapiArticles.map((article) => (
-              <Link
-                key={article.id}
-                to="/demo/strapi/$articleId"
-                params={{ articleId: article.documentId }}
-                className="block"
-              >
-                <article className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-6 hover:border-cyan-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-500/10 cursor-pointer h-full">
-                  <h2 className="text-xl font-semibold text-white mb-3">
-                    {article.title || 'Untitled'}
-                  </h2>
-
-                  {article.description && (
-                    <p className="text-gray-400 mb-4 leading-relaxed">
-                      {article.description}
-                    </p>
-                  )}
-
-                  {article.content && (
-                    <p className="text-gray-400 line-clamp-3 leading-relaxed">
-                      {article.content}
-                    </p>
-                  )}
-
-                  {article.createdAt && (
-                    <p className="text-sm text-cyan-400/70 mt-4">
-                      {new Date(article.createdAt).toLocaleDateString()}
-                    </p>
-                  )}
-                </article>
-              </Link>
-            ))}
-          </div>
-        ) : (
-          <p className="text-gray-400">No articles found.</p>
+        <div className="mb-8">
+          <Search />
+        </div>
+
+        {status === 'error' && <ConnectionError error={error} />}
+
+        {status === 'empty' && <NoArticlesFound query={query} />}
+
+        {status === 'success' && (
+          <>
+            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+              {articles.map((article: TArticle) => (
+                <Link
+                  key={article.id}
+                  to="/demo/strapi/$articleId"
+                  params={{ articleId: article.documentId }}
+                  className="block"
+                >
+                  <article className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl overflow-hidden hover:border-cyan-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-500/10 cursor-pointer h-full flex flex-col">
+                    <StrapiImage
+                      src={article.cover?.url}
+                      alt={article.cover?.alternativeText || article.title}
+                      className="w-full h-48"
+                    />
+
+                    <div className="p-6 flex flex-col flex-1">
+                      <h2 className="text-xl font-semibold text-white mb-3">
+                        {article.title || 'Untitled'}
+                      </h2>
+
+                      {article.description && (
+                        <p className="text-gray-400 mb-4 leading-relaxed line-clamp-2">
+                          {article.description}
+                        </p>
+                      )}
+
+                      <div className="mt-auto flex items-center justify-between">
+                        {article.author?.name && (
+                          <span className="text-sm text-gray-500">
+                            By {article.author.name}
+                          </span>
+                        )}
+                        {article.createdAt && (
+                          <span className="text-sm text-cyan-400/70">
+                            {new Date(article.createdAt).toLocaleDateString()}
+                          </span>
+                        )}
+                      </div>
+
+                      {article.category?.name && (
+                        <div className="mt-3">
+                          <span className="text-xs px-2 py-1 bg-slate-700 text-cyan-400 rounded-full">
+                            {article.category.name}
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                  </article>
+                </Link>
+              ))}
+            </div>
+
+            {meta?.pagination && meta.pagination.pageCount > 1 && (
+              <div className="mt-8">
+                <Pagination pageCount={meta.pagination.pageCount} />
+              </div>
+            )}
+          </>
         )}
       </div>
     </div>

package/src/frameworks/react/add-ons/strapi/assets/src/types/strapi.ts

@@ -0,0 +1,90 @@
+/**
+ * Strapi type definitions
+ * These types match the Strapi Cloud Template Blog schema
+ */
+
+import type { Block } from "@/components/blocks";
+
+// Base image type from Strapi media library
+export type TImage = {
+  id: number;
+  documentId: string;
+  alternativeText: string | null;
+  url: string;
+};
+
+// Author content type
+export type TAuthor = {
+  id: number;
+  documentId: string;
+  name: string;
+  email?: string;
+  createdAt: string;
+  updatedAt: string;
+  publishedAt: string;
+};
+
+// Category content type
+export type TCategory = {
+  id: number;
+  documentId: string;
+  name: string;
+  slug: string;
+  description?: string;
+  createdAt: string;
+  updatedAt: string;
+  publishedAt: string;
+};
+
+// Article content type
+export type TArticle = {
+  id: number;
+  documentId: string;
+  title: string;
+  description: string;
+  slug: string;
+  cover?: TImage;
+  author?: TAuthor;
+  category?: TCategory;
+  blocks?: Array<Block>;
+  createdAt: string;
+  updatedAt: string;
+  publishedAt: string;
+};
+
+// Strapi response wrappers
+export type TStrapiResponseSingle<T> = {
+  data: T;
+  meta?: {
+    pagination?: TStrapiPagination;
+  };
+};
+
+export type TStrapiResponseCollection<T> = {
+  data: Array<T>;
+  meta?: {
+    pagination?: TStrapiPagination;
+  };
+};
+
+export type TStrapiPagination = {
+  page: number;
+  pageSize: number;
+  pageCount: number;
+  total: number;
+};
+
+export type TStrapiError = {
+  status: number;
+  name: string;
+  message: string;
+  details?: Record<string, Array<string>>;
+};
+
+export type TStrapiResponse<T = null> = {
+  data?: T;
+  error?: TStrapiError;
+  meta?: {
+    pagination?: TStrapiPagination;
+  };
+};

package/src/frameworks/react/add-ons/strapi/info.json

@@ -11,9 +11,9 @@
   "routes": [
     {
       "url": "/demo/strapi",
-      "name": "Strapi",
-      "path": "src/routes/demo.strapi.tsx",
-      "jsName": "StrapiDemo"
+      "name": "Strapi Articles",
+      "path": "src/routes/demo/strapi.tsx",
+      "jsName": "StrapiArticles"
     }
   ]
 }

package/src/frameworks/react/add-ons/strapi/package.json

@@ -1,5 +1,8 @@
 {
   "dependencies": {
-    "@strapi/client": "^1.5.0"
+    "@strapi/client": "^1.6.0",
+    "react-markdown": "^9.0.1",
+    "remark-gfm": "^4.0.0",
+    "use-debounce": "^10.0.0"
   }
-}
+}

package/src/frameworks/react/index.ts

@@ -25,9 +25,9 @@ export function createFrameworkDefinition(): FrameworkDefinition {
   )
 
   return {
-    id: 'react-cra',
+    id: 'react',
     name: 'React',
-    description: 'Templates for React CRA',
+    description: 'Templates for React',
     version: '0.1.0',
     base: files,
     addOns,

package/src/frameworks/react/project/base/content/blog/fifth-post.mdx.ejs

@@ -0,0 +1,54 @@
+---
+title: 'Velvet Runtime Notes'
+description: 'Use color tokens to keep light and dark themes aligned.'
+pubDate: 'Aug 05 2024'
+heroImage: '/images/lagoon-5.svg'
+---
+
+Semantic tokens keep your UI stable while the brand evolves.
+
+Instead of hard-coding one-off colors in components, shape a small set of
+variables and map all surfaces to those variables.
+
+## Why this matters
+
+- You can restyle the app in minutes instead of days
+- Light and dark themes stay behaviorally consistent
+- Add-on pages inherit your visual identity by default
+
+<MdxCallout title="MDX Component Demo">
+  This callout is rendered from JSX inside an MDX post. It is useful for
+  release notes, warnings, and migration tips where you want stronger visual
+  emphasis than plain markdown blocks.
+</MdxCallout>
+
+<MdxMetrics
+  items={[
+    { label: 'Token count', value: '12 core vars' },
+    { label: 'Theme modes', value: 'light + dark + auto' },
+    { label: 'Restyle time', value: '< 30 min' },
+  ]}
+/>
+
+### Token-to-component mapping
+
+| Token | Typical usage |
+| --- | --- |
+| `--surface` | Card backgrounds |
+| `--line` | Borders and separators |
+| `--lagoon-deep` | Links and active nav |
+
+Keep the mapping documented and your team will make fewer ad-hoc styling calls.
+
+### Example: deriving UI from semantic tokens
+
+```tsx
+const button = {
+  color: 'var(--sea-ink)',
+  background: 'var(--surface)',
+  borderColor: 'var(--line)',
+}
+```
+
+MDX is useful here because you can interleave narrative, tables, code blocks,
+and custom JSX components in one authoring surface.

package/src/frameworks/react/project/base/content/blog/first-post.md.ejs

@@ -0,0 +1,47 @@
+---
+title: 'Neon Mango Protocol'
+description: 'A quick walkthrough of the starter foundations.'
+pubDate: 'Jul 08 2024'
+heroImage: '/images/lagoon-3.svg'
+---
+
+This starter ships with routes, SSR, and a calm visual system out of the box.
+
+Start by editing route files, then layer in add-ons as needed.
+
+## What you get on day one
+
+- Full-document SSR using TanStack Start
+- Type-safe file routing with generated route types
+- A reusable design token system for light and dark themes
+
+The goal is simple: let teams ship product pages and APIs without spending the
+first week wiring framework internals.
+
+### Suggested order of operations
+
+1. Make the home route feel like your product
+2. Add one feature route and one API route
+3. Introduce add-ons only after your core UX is clear
+
+> Keep the first commit boring. Reliable defaults beat clever setup code.
+
+## Baseline delivery checklist
+
+Before introducing custom infra, confirm these are green:
+
+- `pnpm dev` starts cleanly
+- one server route returns typed data
+- one API route validates input/output
+- one integration test exercises a full page render
+
+When these are in place, you can iterate quickly without losing confidence.
+
+### Example request flow
+
+1. Client navigation enters route loader
+2. Loader calls server function
+3. Server function reads data source and returns typed payload
+4. Route component renders immediately with stable shape
+
+That flow is simple, predictable, and easy to debug.

package/src/frameworks/react/project/base/content/blog/fourth-post.md.ejs

@@ -0,0 +1,42 @@
+---
+title: 'Static Tide Almanac'
+description: 'Dial in layout polish and image rhythm across cards.'
+pubDate: 'Jul 29 2024'
+heroImage: '/images/lagoon-1.svg'
+---
+
+As your app grows, visual rhythm matters as much as feature scope.
+
+Use larger feature cards to call attention to primary content, then support with
+smaller cards for secondary updates.
+
+## Practical layout pattern
+
+Use one featured card followed by standard cards in a responsive grid:
+
+- `lg:col-span-2` for the featured story
+- regular span for supporting posts
+- consistent card media height below `lg`
+
+That gives you hierarchy without reinventing every breakpoint.
+
+### A quick spacing rule
+
+Pair spacing in steps of 4 (`p-4`, `p-8`, `gap-4`, `gap-8`) and only break that
+rule for hero sections.
+
+## Card hierarchy recipe
+
+For content-heavy indexes, this sequence works well:
+
+1. One featured card with expanded width
+2. Three to six standard cards for breadth
+3. Optional utility card for onboarding links
+
+Keep title sizes mostly consistent and let width + image treatment carry
+hierarchy. That avoids jarring jumps as breakpoints shift.
+
+### Avoiding layout drift
+
+If cards start to look uneven, check image heights first, then paragraph length.
+Consistency there usually fixes 80% of visual noise.

package/src/frameworks/react/project/base/content/blog/second-post.mdx.ejs

@@ -0,0 +1,46 @@
+---
+title: 'Paper Lantern Cache'
+description: 'How to shape navigation and page structure.'
+pubDate: 'Jul 15 2024'
+heroImage: '/images/lagoon-4.svg'
+---
+
+Use file-based routes in `src/routes` to grow the app.
+
+Keep shared UI in `src/components` and tune visual tokens in `src/styles.css`.
+
+## Route design tips
+
+Treat routes like product domains, not technical buckets.
+
+- `routes/settings.*` for account surfaces
+- `routes/billing.*` for payment and plan logic
+- `routes/api.*` for server handlers that belong to the same domain
+
+When route trees map to business intent, onboarding gets faster and refactors
+hurt less.
+
+```tsx
+// src/routes/billing.index.tsx
+export const Route = createFileRoute('/billing/')({
+  component: BillingPage,
+})
+```
+
+<MdxMetrics
+  items={[
+    { label: 'Route setup', value: '~10 min' },
+    { label: 'Type safety', value: 'end-to-end' },
+    { label: 'Refactor risk', value: 'lowered' },
+  ]}
+/>
+
+### Collaboration pattern
+
+Use this lightweight ownership split:
+
+1. Product owns route naming and URL intent
+2. Design owns shared layout primitives and tokens
+3. Engineering owns loaders, actions, and caching
+
+This pattern keeps URL design, data loading, and UI composition in one place.