@tanstack/create 0.61.5 → 0.62.0

package/src/frameworks/react/add-ons/strapi/assets/src/components/markdown-content.tsx

@@ -0,0 +1,74 @@
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+interface MarkdownContentProps {
+  content: string | undefined | null;
+  className?: string;
+}
+
+const styles = {
+  h1: "text-3xl font-bold mb-6 text-white",
+  h2: "text-2xl font-bold mb-4 text-white",
+  h3: "text-xl font-bold mb-3 text-white",
+  p: "mb-4 leading-relaxed text-gray-300",
+  a: "text-cyan-400 hover:underline",
+  ul: "list-disc pl-6 mb-4 space-y-2 text-gray-300",
+  ol: "list-decimal pl-6 mb-4 space-y-2 text-gray-300",
+  li: "leading-relaxed",
+  blockquote: "border-l-4 border-cyan-400 pl-4 italic text-gray-400 my-4",
+  code: "bg-slate-800 px-2 py-1 rounded text-cyan-400 text-sm font-mono",
+  pre: "bg-slate-800 p-4 rounded-lg overflow-x-auto mb-4",
+  table: "w-full border-collapse mb-4",
+  th: "border border-slate-700 p-2 bg-slate-800 text-left text-white",
+  td: "border border-slate-700 p-2 text-gray-300",
+  img: "max-w-full h-auto rounded-lg my-4",
+  hr: "border-slate-700 my-8",
+  strong: "text-white font-semibold",
+};
+
+export function MarkdownContent({ content, className = "" }: MarkdownContentProps) {
+  if (!content) return null;
+
+  return (
+    <div className={`prose prose-invert max-w-none ${className}`}>
+      <Markdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          h1: ({ children }) => <h1 className={styles.h1}>{children}</h1>,
+          h2: ({ children }) => <h2 className={styles.h2}>{children}</h2>,
+          h3: ({ children }) => <h3 className={styles.h3}>{children}</h3>,
+          p: ({ children }) => <p className={styles.p}>{children}</p>,
+          a: ({ href, children }) => (
+            <a href={href} className={styles.a} target="_blank" rel="noopener noreferrer">
+              {children}
+            </a>
+          ),
+          ul: ({ children }) => <ul className={styles.ul}>{children}</ul>,
+          ol: ({ children }) => <ol className={styles.ol}>{children}</ol>,
+          li: ({ children }) => <li className={styles.li}>{children}</li>,
+          blockquote: ({ children }) => <blockquote className={styles.blockquote}>{children}</blockquote>,
+          code: ({ className, children }) => {
+            const isCodeBlock = className?.includes("language-");
+            if (isCodeBlock) {
+              return (
+                <pre className={styles.pre}>
+                  <code className="text-sm font-mono text-gray-300">{children}</code>
+                </pre>
+              );
+            }
+            return <code className={styles.code}>{children}</code>;
+          },
+          pre: ({ children }) => <>{children}</>,
+          table: ({ children }) => <table className={styles.table}>{children}</table>,
+          th: ({ children }) => <th className={styles.th}>{children}</th>,
+          td: ({ children }) => <td className={styles.td}>{children}</td>,
+          img: ({ src, alt }) => <img src={src} alt={alt || ""} className={styles.img} />,
+          hr: () => <hr className={styles.hr} />,
+          strong: ({ children }) => <strong className={styles.strong}>{children}</strong>,
+        }}
+      >
+        {content}
+      </Markdown>
+    </div>
+  );
+}

package/src/frameworks/react/add-ons/strapi/assets/src/components/pagination.tsx

@@ -0,0 +1,120 @@
+import { useRouter, useSearch } from '@tanstack/react-router'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+
+interface PaginationProps {
+  pageCount: number
+  className?: string
+}
+
+export function Pagination({ pageCount, className = '' }: PaginationProps) {
+  const router = useRouter()
+  const search = useSearch({ strict: false })
+  const currentPage = Number((search as any)?.page) || 1
+
+  const handlePageChange = (page: number) => {
+    router.navigate({
+      to: '.',
+      search: (prev) => ({ ...prev, page }),
+      replace: true,
+    })
+  }
+
+  // Generate page numbers to display
+  const getPageNumbers = () => {
+    const pages: Array<number | 'ellipsis'> = []
+    const showEllipsis = pageCount > 7
+
+    if (showEllipsis) {
+      pages.push(1)
+
+      if (currentPage > 3) {
+        pages.push('ellipsis')
+      }
+
+      const start = Math.max(2, currentPage - 1)
+      const end = Math.min(pageCount - 1, currentPage + 1)
+
+      for (let i = start; i <= end; i++) {
+        pages.push(i)
+      }
+
+      if (currentPage < pageCount - 2) {
+        pages.push('ellipsis')
+      }
+
+      if (pageCount > 1) {
+        pages.push(pageCount)
+      }
+    } else {
+      for (let i = 1; i <= pageCount; i++) {
+        pages.push(i)
+      }
+    }
+
+    return pages
+  }
+
+  const pageNumbers = getPageNumbers()
+
+  if (pageCount <= 1) return null
+
+  return (
+    <nav className={`flex items-center justify-center gap-1 ${className}`}>
+      {/* Previous Button */}
+      <button
+        onClick={() => currentPage > 1 && handlePageChange(currentPage - 1)}
+        disabled={currentPage <= 1}
+        className={`flex items-center gap-1 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
+          currentPage <= 1
+            ? 'text-gray-600 cursor-not-allowed'
+            : 'text-gray-300 hover:bg-slate-700 hover:text-white'
+        }`}
+      >
+        <ChevronLeft className="w-4 h-4" />
+        <span className="hidden sm:inline">Previous</span>
+      </button>
+
+      {/* Page Numbers */}
+      <div className="flex items-center gap-1">
+        {pageNumbers.map((page, index) =>
+          page === 'ellipsis' ? (
+            <span
+              key={`ellipsis-${index}`}
+              className="px-2 py-2 text-gray-500 hidden md:block"
+            >
+              ...
+            </span>
+          ) : (
+            <button
+              key={page}
+              onClick={() => handlePageChange(page)}
+              className={`min-w-[40px] px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
+                currentPage === page
+                  ? 'bg-cyan-500 text-white'
+                  : 'text-gray-300 hover:bg-slate-700 hover:text-white'
+              }`}
+            >
+              {page}
+            </button>
+          )
+        )}
+      </div>
+
+      {/* Next Button */}
+      <button
+        onClick={() =>
+          currentPage < pageCount && handlePageChange(currentPage + 1)
+        }
+        disabled={currentPage >= pageCount}
+        className={`flex items-center gap-1 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
+          currentPage >= pageCount
+            ? 'text-gray-600 cursor-not-allowed'
+            : 'text-gray-300 hover:bg-slate-700 hover:text-white'
+        }`}
+      >
+        <span className="hidden sm:inline">Next</span>
+        <ChevronRight className="w-4 h-4" />
+      </button>
+    </nav>
+  )
+}

package/src/frameworks/react/add-ons/strapi/assets/src/components/search.tsx

@@ -0,0 +1,35 @@
+import { useRouter, useSearch } from "@tanstack/react-router";
+import { useDebouncedCallback } from "use-debounce";
+
+interface SearchProps {
+  readonly className?: string;
+}
+
+export function Search({ className = "" }: SearchProps) {
+  const search = useSearch({ strict: false });
+  const router = useRouter();
+
+  const handleSearch = useDebouncedCallback((term: string) => {
+    router.navigate({
+      to: ".",
+      search: (prev) => ({
+        ...prev,
+        page: 1,
+        query: term || undefined,
+      }),
+      replace: true,
+    });
+  }, 300);
+
+  return (
+    <input
+      type="text"
+      placeholder="Search articles..."
+      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+        handleSearch(e.target.value)
+      }
+      defaultValue={(search as any)?.query || ""}
+      className={`w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500 transition-colors ${className}`}
+    />
+  );
+}

package/src/frameworks/react/add-ons/strapi/assets/src/components/strapi-image.tsx

@@ -0,0 +1,47 @@
+import { useState } from "react";
+import { getStrapiMedia } from "@/lib/strapi-utils";
+
+interface StrapiImageProps {
+  src: string | undefined | null;
+  alt?: string | null;
+  className?: string;
+  width?: number | string;
+  height?: number | string;
+}
+
+export function StrapiImage({
+  src,
+  alt,
+  className = "",
+  width,
+  height,
+}: StrapiImageProps) {
+  const [hasError, setHasError] = useState(false);
+
+  if (!src) return null;
+
+  const imageUrl = getStrapiMedia(src);
+
+  if (hasError) {
+    return (
+      <div
+        className={`bg-slate-700 flex items-center justify-center text-slate-400 text-sm ${className}`}
+        style={{ width, height }}
+      >
+        <span>Image not available</span>
+      </div>
+    );
+  }
+
+  return (
+    <img
+      src={imageUrl}
+      alt={alt || ""}
+      width={width}
+      height={height}
+      loading="lazy"
+      className={`object-cover ${className}`}
+      onError={() => setHasError(true)}
+    />
+  );
+}

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>
+  );
+}