@tanstack/create 0.49.2 → 0.59.4

package/dist/frameworks/react/add-ons/storybook/assets/src/components/storybook/radio-group.stories.ts

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+
+import { RadioGroup } from "./radio-group";
+
+const meta = {
+  title: "Form/RadioGroup",
+  component: RadioGroup,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: { onChange: fn() },
+} satisfies Meta<typeof RadioGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: "Employment Type",
+    name: "employmentType",
+    options: [
+      { value: "full-time", label: "Full Time" },
+      { value: "part-time", label: "Part Time" },
+    ],
+  },
+};
+
+export const Selected: Story = {
+  args: {
+    label: "Employment Type",
+    name: "employmentType",
+    options: [
+      { value: "full-time", label: "Full Time" },
+      { value: "part-time", label: "Part Time" },
+    ],
+    value: "full-time",
+  },
+};
+
+export const MultipleOptions: Story = {
+  args: {
+    label: "Subscription Plan",
+    name: "plan",
+    options: [
+      { value: "basic", label: "Basic" },
+      { value: "pro", label: "Pro" },
+      { value: "enterprise", label: "Enterprise" },
+    ],
+    value: "pro",
+  },
+};

package/dist/frameworks/react/add-ons/storybook/assets/src/components/storybook/slider.stories.ts

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+
+import { Slider } from "./slider";
+
+const meta = {
+  title: "Form/Slider",
+  component: Slider,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: { onChange: fn() },
+} satisfies Meta<typeof Slider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: "Volume",
+    id: "volume",
+    value: 50,
+  },
+};
+
+export const Skill: Story = {
+  args: {
+    label: "Plays Guitar",
+    id: "guitar",
+    value: 75,
+    min: 0,
+    max: 100,
+  },
+};
+
+export const NoValue: Story = {
+  args: {
+    label: "Experience Level",
+    id: "experience",
+    value: 30,
+    showValue: false,
+  },
+};
+
+export const CustomRange: Story = {
+  args: {
+    label: "Custom Range",
+    id: "custom-range",
+    value: 5,
+    min: 1,
+    max: 20,
+    step: 1,
+  },
+};

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

@@ -0,0 +1,7 @@
+import { strapi } from "@strapi/client";
+
+export const strapiClient = strapi({
+  baseURL: import.meta.env.VITE_STRAPI_URL,
+});
+
+export const articles = strapiClient.collection("articles");

package/dist/frameworks/react/add-ons/t3env/assets/src/env.ts

@@ -0,0 +1,39 @@
+import { createEnv } from "@t3-oss/env-core";
+import { z } from "zod";
+ 
+export const env = createEnv({
+  server: {
+    SERVER_URL: z.string().url().optional(),
+  },
+ 
+  /**
+   * The prefix that client-side variables must have. This is enforced both at
+   * a type-level and at runtime.
+   */
+  clientPrefix: "VITE_",
+ 
+  client: {
+    VITE_APP_TITLE: z.string().min(1).optional(),
+  },
+ 
+  /**
+   * What object holds the environment variables at runtime. This is usually
+   * `process.env` or `import.meta.env`.
+   */
+  runtimeEnv: import.meta.env,
+ 
+  /**
+   * By default, this library will feed the environment variables directly to
+   * the Zod validator.
+   *
+   * This means that if you have an empty string for a value that is supposed
+   * to be a number (e.g. `PORT=` in a ".env" file), Zod will incorrectly flag
+   * it as a type mismatch violation. Additionally, if you have an empty string
+   * for a value that is supposed to be a string with a default value (e.g.
+   * `DOMAIN=` in an ".env" file), the default value will never be applied.
+   *
+   * In order to solve these issues, we recommend that all new projects
+   * explicitly specify this option as true.
+   */
+  emptyStringAsUndefined: true,
+});

package/dist/frameworks/react/add-ons/tRPC/assets/src/integrations/trpc/init.ts

@@ -0,0 +1,9 @@
+import { initTRPC } from "@trpc/server";
+import superjson from "superjson";
+
+const t = initTRPC.create({
+  transformer: superjson,
+});
+
+export const createTRPCRouter = t.router;
+export const publicProcedure = t.procedure;

package/dist/frameworks/react/add-ons/tRPC/assets/src/integrations/trpc/react.ts

@@ -0,0 +1,4 @@
+import { createTRPCContext } from "@trpc/tanstack-react-query";
+import type { TRPCRouter } from "@/integrations/trpc/router";
+
+export const { TRPCProvider, useTRPC } = createTRPCContext<TRPCRouter>();

package/dist/frameworks/react/add-ons/tRPC/assets/src/integrations/trpc/router.ts

@@ -0,0 +1,27 @@
+import { z } from 'zod'
+
+import { createTRPCRouter, publicProcedure } from './init'
+
+import type { TRPCRouterRecord } from '@trpc/server'
+
+const todos = [
+  { id: 1, name: 'Get groceries' },
+  { id: 2, name: 'Buy a new phone' },
+  { id: 3, name: 'Finish the project' },
+]
+
+const todosRouter = {
+  list: publicProcedure.query(() => todos),
+  add: publicProcedure
+    .input(z.object({ name: z.string() }))
+    .mutation(({ input }) => {
+      const newTodo = { id: todos.length + 1, name: input.name }
+      todos.push(newTodo)
+      return newTodo
+    }),
+} satisfies TRPCRouterRecord
+
+export const trpcRouter = createTRPCRouter({
+  todos: todosRouter,
+})
+export type TRPCRouter = typeof trpcRouter

package/dist/frameworks/react/add-ons/tRPC/info.json

@@ -4,7 +4,7 @@
   "phase": "add-on",
   "modes": ["file-router"],
   "link": "https://trpc.io/",
-  "dependsOn": ["tanstack-query", "start"],
+  "dependsOn": ["tanstack-query"],
   "type": "add-on",
   "category": "api",
   "color": "#2596BE",

package/dist/frameworks/react/add-ons/table/assets/src/data/demo-table-data.ts

@@ -0,0 +1,50 @@
+import { faker } from '@faker-js/faker'
+
+export type Person = {
+  id: number
+  firstName: string
+  lastName: string
+  age: number
+  visits: number
+  progress: number
+  status: 'relationship' | 'complicated' | 'single'
+  subRows?: Person[]
+}
+
+const range = (len: number) => {
+  const arr: number[] = []
+  for (let i = 0; i < len; i++) {
+    arr.push(i)
+  }
+  return arr
+}
+
+const newPerson = (num: number): Person => {
+  return {
+    id: num,
+    firstName: faker.person.firstName(),
+    lastName: faker.person.lastName(),
+    age: faker.number.int(40),
+    visits: faker.number.int(1000),
+    progress: faker.number.int(100),
+    status: faker.helpers.shuffle<Person['status']>([
+      'relationship',
+      'complicated',
+      'single',
+    ])[0]!,
+  }
+}
+
+export function makeData(...lens: number[]) {
+  const makeDataLevel = (depth = 0): Person[] => {
+    const len = lens[depth]!
+    return range(len).map((index): Person => {
+      return {
+        ...newPerson(index),
+        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
+      }
+    })
+  }
+
+  return makeDataLevel()
+}

package/dist/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs

@@ -6,8 +6,6 @@ import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
 
 import type { TRPCRouter } from "@/integrations/trpc/router";
 
-import { TRPCProvider } from "@/integrations/trpc/react";
-
 function getUrl() {
   const base = (() => {
     if (typeof window !== "undefined") return "";
@@ -42,22 +40,8 @@ export function getContext() {
     trpc: serverHelpers,
   };
 }
-
-export function Provider({
-  children,
-  queryClient,
-}: {
-  children: React.ReactNode;
-  queryClient: QueryClient;
-}) {
-  return (
-    <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
-      {children}
-    </TRPCProvider>
-  );
-}
 <% } else { %>
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { QueryClient } from '@tanstack/react-query'
 
 export function getContext() {
   const queryClient = new QueryClient();
@@ -65,16 +49,4 @@ export function getContext() {
     queryClient,
   };
 }
-
-export function Provider({
-  children,
-  queryClient,
-}: {
-  children: React.ReactNode;
-  queryClient: QueryClient;
-}) {
-  return (
-    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-  );
-}
 <% } %>

package/dist/frameworks/react/add-ons/workos/info.json

@@ -9,7 +9,6 @@
   "color": "#6363F1",
   "priority": 160,
   "link": "https://workos.com",
-  "tailwind": true,
   "routes": [
     {
       "icon": "CircleUserRound",

package/dist/frameworks/react/examples/events/assets/content-collections.ts

@@ -0,0 +1,56 @@
+import { defineCollection, defineConfig } from '@content-collections/core'
+import { z } from 'zod'
+
+const speakers = defineCollection({
+  name: 'speakers',
+  directory: 'content/speakers',
+  include: '**/*.md',
+  schema: z.object({
+    name: z.string(),
+    title: z.string(),
+    specialty: z.string(),
+    restaurant: z.string(),
+    location: z.string(),
+    headshot: z.string(),
+    awards: z.array(z.string()).optional(),
+    content: z.string(),
+  }),
+  transform: async (doc) => {
+    return {
+      ...doc,
+      slug: doc.name
+        .toLowerCase()
+        .replace(/[^\w-]+/g, '-')
+        .replace(/-+/g, '-')
+        .replace(/^-|-$/g, ''),
+    }
+  },
+})
+
+const talks = defineCollection({
+  name: 'talks',
+  directory: 'content/talks',
+  include: '**/*.md',
+  schema: z.object({
+    title: z.string(),
+    speaker: z.string(),
+    duration: z.string(),
+    image: z.string(),
+    topics: z.array(z.string()),
+    content: z.string(),
+  }),
+  transform: async (doc) => {
+    return {
+      ...doc,
+      slug: doc.title
+        .toLowerCase()
+        .replace(/[^\w-]+/g, '-')
+        .replace(/-+/g, '-')
+        .replace(/^-|-$/g, ''),
+    }
+  },
+})
+
+export default defineConfig({
+  collections: [speakers, talks],
+})

package/dist/frameworks/react/examples/events/assets/src/lib/conference-ai-hook.ts

@@ -0,0 +1,26 @@
+import {
+  fetchServerSentEvents,
+  useChat,
+  createChatClientOptions,
+} from '@tanstack/ai-react'
+import type { InferChatMessages } from '@tanstack/ai-react'
+
+// Default chat options for type inference
+const defaultChatOptions = createChatClientOptions({
+  connection: fetchServerSentEvents('/api/remy-chat'),
+})
+
+export type ConferenceChatMessages = InferChatMessages<typeof defaultChatOptions>
+
+export const useConferenceChat = (speakerSlug?: string, talkSlug?: string) => {
+  const chatOptions = createChatClientOptions({
+    connection: fetchServerSentEvents('/api/remy-chat', {
+      body: {
+        speakerSlug,
+        talkSlug,
+      },
+    }),
+  })
+
+  return useChat(chatOptions)
+}

package/dist/frameworks/react/examples/events/assets/src/lib/conference-tools.ts

@@ -0,0 +1,210 @@
+import { toolDefinition } from '@tanstack/ai'
+import { z } from 'zod'
+
+import { allSpeakers, allTalks } from 'content-collections'
+
+// Tool definition for getting a speaker by slug
+export const getSpeakerBySlugToolDef = toolDefinition({
+  name: 'getSpeakerBySlug',
+  description:
+    'Get the full profile and bio of a specific speaker. Use this when asked about a particular speaker.',
+  inputSchema: z.object({
+    slug: z.string().describe('The slug of the speaker'),
+  }),
+  outputSchema: z.object({
+    name: z.string(),
+    title: z.string(),
+    specialty: z.string(),
+    restaurant: z.string(),
+    location: z.string(),
+    bio: z.string(),
+    awards: z.array(z.string()),
+  }),
+})
+
+// Server implementation
+export const getSpeakerBySlug = getSpeakerBySlugToolDef.server(({ slug }) => {
+  const speaker = allSpeakers.find((s) => s.slug === slug)
+  if (!speaker) {
+    return {
+      name: 'Speaker not found',
+      title: '',
+      specialty: '',
+      restaurant: '',
+      location: '',
+      bio: 'The requested speaker was not found.',
+      awards: [],
+    }
+  }
+  return {
+    name: speaker.name,
+    title: speaker.title,
+    specialty: speaker.specialty,
+    restaurant: speaker.restaurant,
+    location: speaker.location,
+    bio: speaker.content,
+    awards: speaker.awards || [],
+  }
+})
+
+// Tool definition for getting a talk by slug
+export const getTalkBySlugToolDef = toolDefinition({
+  name: 'getTalkBySlug',
+  description:
+    'Get the full details of a specific session/talk. Use this when asked about a particular session.',
+  inputSchema: z.object({
+    slug: z.string().describe('The slug of the talk'),
+  }),
+  outputSchema: z.object({
+    title: z.string(),
+    speaker: z.string(),
+    duration: z.string(),
+    topics: z.array(z.string()),
+    description: z.string(),
+  }),
+})
+
+// Server implementation
+export const getTalkBySlug = getTalkBySlugToolDef.server(({ slug }) => {
+  const talk = allTalks.find((t) => t.slug === slug)
+  if (!talk) {
+    return {
+      title: 'Session not found',
+      speaker: '',
+      duration: '',
+      topics: [],
+      description: 'The requested session was not found.',
+    }
+  }
+  return {
+    title: talk.title,
+    speaker: talk.speaker,
+    duration: talk.duration,
+    topics: talk.topics,
+    description: talk.content,
+  }
+})
+
+// Tool definition for listing all speakers
+export const getAllSpeakersToolDef = toolDefinition({
+  name: 'getAllSpeakers',
+  description:
+    'Get a list of all speakers at the conference with their names, specialties, and restaurants.',
+  inputSchema: z.object({}),
+  outputSchema: z.array(
+    z.object({
+      slug: z.string(),
+      name: z.string(),
+      specialty: z.string(),
+      restaurant: z.string(),
+      location: z.string(),
+    }),
+  ),
+})
+
+// Server implementation
+export const getAllSpeakers = getAllSpeakersToolDef.server(() => {
+  return allSpeakers.map((speaker) => ({
+    slug: speaker.slug,
+    name: speaker.name,
+    specialty: speaker.specialty,
+    restaurant: speaker.restaurant,
+    location: speaker.location,
+  }))
+})
+
+// Tool definition for listing all talks
+export const getAllTalksToolDef = toolDefinition({
+  name: 'getAllTalks',
+  description:
+    'Get a list of all sessions/talks at the conference with their titles, speakers, and topics.',
+  inputSchema: z.object({}),
+  outputSchema: z.array(
+    z.object({
+      slug: z.string(),
+      title: z.string(),
+      speaker: z.string(),
+      duration: z.string(),
+      topics: z.array(z.string()),
+    }),
+  ),
+})
+
+// Server implementation
+export const getAllTalks = getAllTalksToolDef.server(() => {
+  return allTalks.map((talk) => ({
+    slug: talk.slug,
+    title: talk.title,
+    speaker: talk.speaker,
+    duration: talk.duration,
+    topics: talk.topics,
+  }))
+})
+
+// Tool definition for searching conference content
+export const searchConferenceToolDef = toolDefinition({
+  name: 'searchConference',
+  description:
+    'Search for speakers or sessions by keyword. Use this to find content matching user queries about topics, techniques, or names.',
+  inputSchema: z.object({
+    query: z.string().describe('The search query'),
+  }),
+  outputSchema: z.object({
+    speakers: z.array(
+      z.object({
+        slug: z.string(),
+        name: z.string(),
+        specialty: z.string(),
+        restaurant: z.string(),
+      }),
+    ),
+    talks: z.array(
+      z.object({
+        slug: z.string(),
+        title: z.string(),
+        speaker: z.string(),
+        topics: z.array(z.string()),
+      }),
+    ),
+  }),
+})
+
+// Server implementation
+export const searchConference = searchConferenceToolDef.server(({ query }) => {
+  const queryLower = query.toLowerCase()
+  
+  const matchingSpeakers = allSpeakers
+    .filter(
+      (speaker) =>
+        speaker.name.toLowerCase().includes(queryLower) ||
+        speaker.specialty.toLowerCase().includes(queryLower) ||
+        speaker.restaurant.toLowerCase().includes(queryLower) ||
+        speaker.content.toLowerCase().includes(queryLower),
+    )
+    .map((speaker) => ({
+      slug: speaker.slug,
+      name: speaker.name,
+      specialty: speaker.specialty,
+      restaurant: speaker.restaurant,
+    }))
+
+  const matchingTalks = allTalks
+    .filter(
+      (talk) =>
+        talk.title.toLowerCase().includes(queryLower) ||
+        talk.speaker.toLowerCase().includes(queryLower) ||
+        talk.topics.some((topic) => topic.toLowerCase().includes(queryLower)) ||
+        talk.content.toLowerCase().includes(queryLower),
+    )
+    .map((talk) => ({
+      slug: talk.slug,
+      title: talk.title,
+      speaker: talk.speaker,
+      topics: talk.topics,
+    }))
+
+  return {
+    speakers: matchingSpeakers,
+    talks: matchingTalks,
+  }
+})

package/dist/frameworks/react/examples/events/assets/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}