@tanstack/create 0.49.2 → 0.49.3

package/dist/frameworks/react/add-ons/oRPC/assets/src/orpc/client.ts

@@ -0,0 +1,29 @@
+import { createRouterClient } from '@orpc/server'
+import { createORPCClient } from '@orpc/client'
+import { RPCLink } from '@orpc/client/fetch'
+import { createTanstackQueryUtils } from '@orpc/tanstack-query'
+import { getRequestHeaders } from '@tanstack/react-start/server'
+import { createIsomorphicFn } from '@tanstack/react-start'
+
+import type { RouterClient } from '@orpc/server'
+
+import router from '@/orpc/router'
+
+const getORPCClient = createIsomorphicFn()
+  .server(() =>
+    createRouterClient(router, {
+      context: () => ({
+        headers: getRequestHeaders(),
+      }),
+    }),
+  )
+  .client((): RouterClient<typeof router> => {
+    const link = new RPCLink({
+      url: `${window.location.origin}/api/rpc`,
+    })
+    return createORPCClient(link)
+  })
+
+export const client: RouterClient<typeof router> = getORPCClient()
+
+export const orpc = createTanstackQueryUtils(client)

package/dist/frameworks/react/add-ons/oRPC/assets/src/orpc/router/index.ts

@@ -0,0 +1,6 @@
+import { addTodo, listTodos } from './todos'
+
+export default {
+  listTodos,
+  addTodo,
+}

package/dist/frameworks/react/add-ons/oRPC/assets/src/orpc/router/todos.ts

@@ -0,0 +1,20 @@
+import { os } from '@orpc/server'
+import * as z from 'zod'
+
+const todos = [
+  { id: 1, name: 'Get groceries' },
+  { id: 2, name: 'Buy a new phone' },
+  { id: 3, name: 'Finish the project' },
+]
+
+export const listTodos = os.input(z.object({})).handler(() => {
+  return todos
+})
+
+export const addTodo = os
+  .input(z.object({ name: z.string() }))
+  .handler(({ input }) => {
+    const newTodo = { id: todos.length + 1, name: input.name }
+    todos.push(newTodo)
+    return newTodo
+  })

package/dist/frameworks/react/add-ons/oRPC/assets/src/orpc/schema.ts

@@ -0,0 +1,6 @@
+import { z } from 'zod'
+
+export const TodoSchema = z.object({
+  id: z.number().int().min(1),
+  name: z.string(),
+})

package/dist/frameworks/react/add-ons/oRPC/assets/src/polyfill.ts

@@ -0,0 +1,21 @@
+import { File } from "node:buffer";
+
+/**
+ * This file aims to polyfill missing APIs in Node.js 18 that oRPC depends on.
+ *
+ * Since Stackblitz runs on Node.js 18, these polyfills ensure oRPC works in that environment.
+ * If you're running oRPC locally, please use Node.js 20 or later for full compatibility.
+ */
+
+/**
+ * Note: Stackblitz provides an emulated Node.js environment with inherent limitations.
+ * If you encounter issues, please test on a local setup with Node.js 20 or later before reporting them.
+ */
+
+/**
+ * The `oz.file()` schema depends on the `File` API.
+ * If you're not using `oz.file()`, you can safely remove this polyfill.
+ */
+if (typeof globalThis.File === "undefined") {
+  globalThis.File = File as any;
+}

package/dist/frameworks/react/add-ons/oRPC/assets/src/routes/api.$.ts

@@ -0,0 +1,77 @@
+import '@/polyfill'
+
+import { OpenAPIHandler } from '@orpc/openapi/fetch'
+import { ZodToJsonSchemaConverter } from '@orpc/zod/zod4'
+import { SmartCoercionPlugin } from '@orpc/json-schema'
+import { createFileRoute } from '@tanstack/react-router'
+import { onError } from '@orpc/server'
+import { OpenAPIReferencePlugin } from '@orpc/openapi/plugins'
+
+import { TodoSchema } from '@/orpc/schema'
+import router from '@/orpc/router'
+
+const handler = new OpenAPIHandler(router, {
+  interceptors: [
+    onError((error) => {
+      console.error(error)
+    }),
+  ],
+  plugins: [
+    new SmartCoercionPlugin({
+      schemaConverters: [new ZodToJsonSchemaConverter()],
+    }),
+    new OpenAPIReferencePlugin({
+      schemaConverters: [new ZodToJsonSchemaConverter()],
+      specGenerateOptions: {
+        info: {
+          title: 'TanStack ORPC Playground',
+          version: '1.0.0',
+        },
+        commonSchemas: {
+          Todo: { schema: TodoSchema },
+          UndefinedError: { error: 'UndefinedError' },
+        },
+        security: [{ bearerAuth: [] }],
+        components: {
+          securitySchemes: {
+            bearerAuth: {
+              type: 'http',
+              scheme: 'bearer',
+            },
+          },
+        },
+      },
+      docsConfig: {
+        authentication: {
+          securitySchemes: {
+            bearerAuth: {
+              token: 'default-token',
+            },
+          },
+        },
+      },
+    }),
+  ],
+})
+
+async function handle({ request }: { request: Request }) {
+  const { response } = await handler.handle(request, {
+    prefix: '/api',
+    context: {},
+  })
+
+  return response ?? new Response('Not Found', { status: 404 })
+}
+
+export const Route = createFileRoute('/api/$')({
+  server: {
+    handlers: {
+      HEAD: handle,
+      GET: handle,
+      POST: handle,
+      PUT: handle,
+      PATCH: handle,
+      DELETE: handle,
+    },
+  },
+})

package/dist/frameworks/react/add-ons/oRPC/assets/src/routes/api.rpc.$.ts

@@ -0,0 +1,29 @@
+import '@/polyfill'
+
+import { RPCHandler } from '@orpc/server/fetch'
+import { createFileRoute } from '@tanstack/react-router'
+import router from '@/orpc/router'
+
+const handler = new RPCHandler(router)
+
+async function handle({ request }: { request: Request }) {
+  const { response } = await handler.handle(request, {
+    prefix: '/api/rpc',
+    context: {},
+  })
+
+  return response ?? new Response('Not Found', { status: 404 })
+}
+
+export const Route = createFileRoute('/api/rpc/$')({
+  server: {
+    handlers: {
+      HEAD: handle,
+      GET: handle,
+      POST: handle,
+      PUT: handle,
+      PATCH: handle,
+      DELETE: handle,
+    },
+  },
+})

package/dist/frameworks/react/add-ons/shadcn/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))
+}

package/dist/frameworks/react/add-ons/start/assets/src/data/demo.punk-songs.ts

@@ -0,0 +1,13 @@
+import { createServerFn } from "@tanstack/react-start";
+
+export const getPunkSongs = createServerFn({
+  method: "GET",
+}).handler(async () => [
+  { id: 1, name: "Teenage Dirtbag", artist: "Wheatus" },
+  { id: 2, name: "Smells Like Teen Spirit", artist: "Nirvana" },
+  { id: 3, name: "The Middle", artist: "Jimmy Eat World" },
+  { id: 4, name: "My Own Worst Enemy", artist: "Lit" },
+  { id: 5, name: "Fat Lip", artist: "Sum 41" },
+  { id: 6, name: "All the Small Things", artist: "blink-182" },
+  { id: 7, name: "Beverly Hills", artist: "Weezer" },
+]);

package/dist/frameworks/react/add-ons/start/assets/src/routes/demo/api.names.ts

@@ -0,0 +1,10 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { json } from '@tanstack/react-start'
+
+export const Route = createFileRoute('/demo/api/names')({
+  server: {
+    handlers: {
+      GET: () => json(['Alice', 'Bob', 'Charlie']),
+    },
+  },
+})

package/dist/frameworks/react/add-ons/store/assets/src/lib/demo-store.ts

@@ -0,0 +1,13 @@
+import { Derived, Store } from '@tanstack/store'
+
+export const store = new Store({
+  firstName: 'Jane',
+  lastName: 'Smith',
+})
+
+export const fullName = new Derived({
+  fn: () => `${store.state.firstName} ${store.state.lastName}`,
+  deps: [store],
+})
+
+fullName.mount()

package/dist/frameworks/react/add-ons/storybook/assets/_dot_storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  async viteFinal(config) {
+    const { default: tailwindcss } = await import("@tailwindcss/vite");
+    config.plugins = config.plugins || [];
+    config.plugins.push(tailwindcss());
+    return config;
+  },
+};
+export default config;

package/dist/frameworks/react/add-ons/storybook/assets/_dot_storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react-vite";
+import "../src/styles.css";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

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

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+
+import { Button } from "./button";
+
+const meta = {
+  title: "Form/Button",
+  component: Button,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: { onClick: fn() },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    variant: "primary",
+    children: "Primary Button",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: "secondary",
+    children: "Secondary Button",
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    variant: "danger",
+    children: "Delete Account",
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: "small",
+    children: "Small Button",
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    size: "medium",
+    children: "Medium Button",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: "large",
+    children: "Large Button",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    variant: "primary",
+    children: "Disabled Button",
+    disabled: true,
+  },
+};

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

@@ -0,0 +1,14 @@
+export { Input } from "./input";
+export type { InputProps } from "./input";
+
+export { RadioGroup } from "./radio-group";
+export type { RadioGroupProps, RadioOption } from "./radio-group";
+
+export { Slider } from "./slider";
+export type { SliderProps } from "./slider";
+
+export { Dialog } from "./dialog";
+export type { DialogProps } from "./dialog";
+
+export { Button } from "./button";
+export type { ButtonProps } from "./button";

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

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+
+import { Input } from "./input";
+
+const meta = {
+  title: "Form/Input",
+  component: Input,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: { onChange: fn() },
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: "Email Address",
+    id: "email",
+    placeholder: "Enter your email",
+  },
+};
+
+export const Required: Story = {
+  args: {
+    label: "First Name",
+    id: "firstName",
+    placeholder: "John",
+    required: true,
+  },
+};
+
+export const WithValue: Story = {
+  args: {
+    label: "Last Name",
+    id: "lastName",
+    value: "Doe",
+    placeholder: "Enter last name",
+  },
+};

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/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()
+}