@tanstack/create 0.61.4 → 0.61.6

package/src/frameworks/react/add-ons/strapi/assets/src/data/loaders/articles.ts

@@ -0,0 +1,106 @@
+import { createServerFn } from "@tanstack/react-start";
+import { sdk } from "@/data/strapi-sdk";
+import type { TArticle, TStrapiResponseCollection, TStrapiResponseSingle } from "@/types/strapi";
+
+const PAGE_SIZE = 3;
+
+const articles = sdk.collection("articles");
+
+/**
+ * Fetch articles with optional filtering, search, and pagination
+ */
+const getArticles = async (
+  page?: number,
+  category?: string,
+  query?: string
+) => {
+  const filterConditions: Array<Record<string, unknown>> = [];
+
+  // Add search query filter
+  if (query) {
+    filterConditions.push({
+      $or: [
+        { title: { $containsi: query } },
+        { description: { $containsi: query } },
+      ],
+    });
+  }
+
+  // Add category filter
+  if (category) {
+    filterConditions.push({
+      category: {
+        slug: { $eq: category },
+      },
+    });
+  }
+
+  const filters =
+    filterConditions.length === 0
+      ? undefined
+      : filterConditions.length === 1
+        ? filterConditions[0]
+        : { $and: filterConditions };
+
+  return articles.find({
+    sort: ["createdAt:desc"],
+    pagination: {
+      page: page || 1,
+      pageSize: PAGE_SIZE,
+    },
+    populate: ["cover", "author", "category"],
+    filters,
+  }) as Promise<TStrapiResponseCollection<TArticle>>;
+};
+
+/**
+ * Fetch a single article by documentId
+ */
+const getArticleById = async (documentId: string) => {
+  return articles.findOne(documentId, {
+    populate: ["cover", "author", "category", "blocks.file", "blocks.files"],
+  }) as Promise<TStrapiResponseSingle<TArticle>>;
+};
+
+/**
+ * Fetch a single article by slug
+ */
+const getArticleBySlug = async (slug: string) => {
+  return articles.find({
+    filters: {
+      slug: { $eq: slug },
+    },
+    populate: ["cover", "author", "category", "blocks.file", "blocks.files"],
+  }) as Promise<TStrapiResponseCollection<TArticle>>;
+};
+
+// Server Functions - these run on the server and can be called from components
+
+export const getArticlesData = createServerFn({
+  method: "GET",
+})
+  .inputValidator(
+    (input?: { page?: number; category?: string; query?: string }) => input
+  )
+  .handler(async ({ data }): Promise<TStrapiResponseCollection<TArticle>> => {
+    const response = await getArticles(data?.page, data?.category, data?.query);
+    return response;
+  });
+
+export const getArticleByIdData = createServerFn({
+  method: "GET",
+})
+  .inputValidator((documentId: string) => documentId)
+  .handler(async ({ data: documentId }): Promise<TStrapiResponseSingle<TArticle>> => {
+    const response = await getArticleById(documentId);
+    return response;
+  });
+
+export const getArticleBySlugData = createServerFn({
+  method: "GET",
+})
+  .inputValidator((slug: string) => slug)
+  .handler(async ({ data: slug }): Promise<TStrapiResponseCollection<TArticle>> => {
+    const response = await getArticleBySlug(slug);
+    return response;
+  });

package/src/frameworks/react/add-ons/strapi/assets/src/data/loaders/index.ts

@@ -0,0 +1,28 @@
+import {
+  getArticlesData,
+  getArticleByIdData,
+  getArticleBySlugData,
+} from "./articles";
+
+/**
+ * Strapi API - Server functions for fetching data from Strapi
+ *
+ * Usage in route loaders:
+ * ```ts
+ * import { strapiApi } from "@/data/loaders";
+ *
+ * export const Route = createFileRoute("/articles")({
+ *   loader: async () => {
+ *     const { data, meta } = await strapiApi.articles.getArticlesData();
+ *     return data;
+ *   },
+ * });
+ * ```
+ */
+export const strapiApi = {
+  articles: {
+    getArticlesData,
+    getArticleByIdData,
+    getArticleBySlugData,
+  },
+};

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

@@ -0,0 +1,9 @@
+import { strapi } from "@strapi/client";
+
+// Strapi base URL (without /api)
+const STRAPI_BASE = import.meta.env.VITE_STRAPI_URL ?? "http://localhost:1337";
+
+// Initialize the Strapi SDK with /api endpoint
+const sdk = strapi({ baseURL: new URL("/api", STRAPI_BASE).href });
+
+export { sdk };

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

@@ -0,0 +1,25 @@
+/**
+ * Strapi URL helpers
+ */
+
+const DEFAULT_STRAPI_URL = "http://localhost:1337";
+
+// Base Strapi URL (without /api)
+export function getStrapiURL(): string {
+  // Handle SSR where import.meta.env might not be fully available
+  if (typeof import.meta !== "undefined" && import.meta.env?.VITE_STRAPI_URL) {
+    return import.meta.env.VITE_STRAPI_URL;
+  }
+  return DEFAULT_STRAPI_URL;
+}
+
+// Get full URL for media assets
+export function getStrapiMedia(url: string | undefined | null): string {
+  if (!url) return "";
+  if (url.startsWith("data:") || url.startsWith("http") || url.startsWith("//")) {
+    return url;
+  }
+  // Ensure we always have a valid base URL
+  const baseUrl = getStrapiURL() || DEFAULT_STRAPI_URL;
+  return `${baseUrl}${url.startsWith("/") ? "" : "/"}${url}`;
+}

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

@@ -0,0 +1,170 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { strapiApi } from "@/data/loaders";
+import { StrapiImage } from "@/components/strapi-image";
+import { BlockRenderer } from "@/components/blocks";
+import type { TArticle } from "@/types/strapi";
+
+export const Route = createFileRoute("/demo/strapi/$articleId")({
+  component: RouteComponent,
+  errorComponent: ErrorComponent,
+  loader: async ({ params }) => {
+    try {
+      const response = await strapiApi.articles.getArticleByIdData({
+        data: params.articleId,
+      });
+      return { success: true, article: response.data };
+    } catch (error) {
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : "Failed to load article",
+        article: null,
+      };
+    }
+  },
+});
+
+function ErrorComponent({ error }: { error: Error }) {
+  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-4xl mx-auto">
+        <Link
+          to="/demo/strapi"
+          className="inline-flex items-center text-cyan-400 hover:text-cyan-300 mb-6 transition-colors"
+        >
+          ← Back to Articles
+        </Link>
+        <div className="bg-red-900/20 border border-red-500/50 rounded-xl p-8 text-center">
+          <h1 className="text-2xl font-bold text-red-400 mb-4">Error Loading Article</h1>
+          <p className="text-gray-300">{error.message}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function RouteComponent() {
+  const { success, article, error } = Route.useLoaderData() as {
+    success: boolean;
+    article: TArticle | null;
+    error?: string;
+  };
+
+  // Show error state
+  if (!success || !article) {
+    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-4xl mx-auto">
+          <Link
+            to="/demo/strapi"
+            className="inline-flex items-center text-cyan-400 hover:text-cyan-300 mb-6 transition-colors"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-5 w-5 mr-2"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                fillRule="evenodd"
+                d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
+                clipRule="evenodd"
+              />
+            </svg>
+            Back to Articles
+          </Link>
+
+          <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">
+                  {error || "Article Not Found"}
+                </h2>
+                <p className="text-gray-300">
+                  Make sure the Strapi server is running and the article exists.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  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-4xl mx-auto">
+        <Link
+          to="/demo/strapi"
+          className="inline-flex items-center text-cyan-400 hover:text-cyan-300 mb-6 transition-colors"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-5 w-5 mr-2"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fillRule="evenodd"
+              d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
+              clipRule="evenodd"
+            />
+          </svg>
+          Back to Articles
+        </Link>
+
+        <article className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl overflow-hidden">
+          <StrapiImage
+            src={article.cover?.url}
+            alt={article.cover?.alternativeText || article.title}
+            className="w-full h-64"
+          />
+
+          <div className="p-8">
+            <h1 className="text-4xl font-bold text-white mb-4">
+              {article.title || "Untitled"}
+            </h1>
+
+            <div className="flex items-center gap-4 mb-6">
+              {article.author?.name && (
+                <span className="text-gray-400">
+                  By{" "}
+                  <span className="text-cyan-400">{article.author.name}</span>
+                </span>
+              )}
+              {article.createdAt && (
+                <span className="text-sm text-cyan-400/70">
+                  {new Date(article.createdAt).toLocaleDateString("en-US", {
+                    year: "numeric",
+                    month: "long",
+                    day: "numeric",
+                  })}
+                </span>
+              )}
+            </div>
+
+            {article.category?.name && (
+              <div className="mb-6">
+                <span className="text-xs px-3 py-1 bg-slate-700 text-cyan-400 rounded-full">
+                  {article.category.name}
+                </span>
+              </div>
+            )}
+
+            {article.description && (
+              <div className="mb-8">
+                <p className="text-xl text-gray-300 leading-relaxed">
+                  {article.description}
+                </p>
+              </div>
+            )}
+
+            {article.blocks && article.blocks.length > 0 && (
+              <BlockRenderer blocks={article.blocks} />
+            )}
+          </div>
+        </article>
+      </div>
+    </div>
+  );
+}

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>