create-fate 0.0.0 → 1.0.0

package/templates/fate/void/db/seed.ts

@@ -0,0 +1,163 @@
+import { styleText } from 'node:util';
+import randomEntry from '@nkzw/core/randomEntry.js';
+import { defineSeed } from 'void/seed';
+import { categories, comments, events, posts, tags, users } from '../seedData.ts';
+import { createEventRecord, createPostRecord } from './queries.ts';
+import { category, comment, post, tag } from './schema.ts';
+import { createSeedAuth } from './seed-auth.ts';
+
+export default defineSeed<typeof import('./schema.ts')>(async ({ db }) => {
+  const auth = createSeedAuth(db);
+  const queryDb = db as unknown as Parameters<typeof createPostRecord>[1];
+  const [existingPost] = await db.select({ id: post.id }).from(post).limit(1);
+
+  console.log(styleText('bold', '› Seeding database...'));
+
+  if (existingPost) {
+    console.log(styleText(['green', 'bold'], '✓ Database already contains seed data.'));
+    return;
+  }
+
+  console.log(styleText('bold', `Creating users`));
+
+  for (const data of users) {
+    const { user } = await auth.api.createUser({
+      body: data,
+    });
+
+    console.log(`  Created user ${styleText('blue', user.name)}.`);
+  }
+
+  const seededUsers = await db.query.user.findMany();
+  const usersByEmail = new Map(seededUsers.map((user) => [user.email, user]));
+
+  console.log(styleText('bold', `Creating categories and tags`));
+
+  const createdCategories = await Promise.all(
+    categories.map(async (entry) => {
+      const [created] = await db.insert(category).values(entry).returning();
+      return created;
+    }),
+  );
+  const createdTags = await Promise.all(
+    tags.map(async (entry) => {
+      const [created] = await db.insert(tag).values(entry).returning();
+      return created;
+    }),
+  );
+
+  const categoriesByName = new Map(createdCategories.map((category) => [category.name, category]));
+  const tagsByName = new Map(createdTags.map((tag) => [tag.name, tag]));
+
+  console.log(styleText('bold', `Seeding posts and comments`));
+
+  const createdPosts = await Promise.all(
+    posts.map((post) => {
+      const author = usersByEmail.get(post.authorEmail);
+
+      if (!author) {
+        throw new Error(`Missing seeded user for ${post.authorEmail}.`);
+      }
+
+      const category = categoriesByName.get(post.category);
+      const tagIds = post.tags.flatMap((name) => {
+        const id = tagsByName.get(name)?.id;
+        return id ? [id] : [];
+      });
+
+      return createPostRecord(
+        {
+          authorId: author.id,
+          categoryId: category?.id,
+          content: post.content,
+          likes: post.likes,
+          tagIds,
+          title: post.title,
+        },
+        queryDb,
+      );
+    }),
+  );
+
+  let index = 0;
+  for (const content of comments) {
+    const postId = createdPosts[index % createdPosts.length];
+    const author = randomEntry(seededUsers);
+
+    if (!postId) {
+      throw new Error('Failed to create seeded post.');
+    }
+
+    await db.insert(comment).values({
+      authorId: author?.id,
+      content,
+      postId,
+    });
+
+    index++;
+  }
+
+  console.log(
+    styleText(
+      ['green', 'bold'],
+      `✓ Created ${createdPosts.length} posts and ${comments.length} comments.`,
+    ),
+  );
+
+  console.log(styleText('bold', `Creating community events`));
+
+  const createdEvents = await Promise.all(
+    events.map((event) => {
+      const host = usersByEmail.get(event.hostEmail);
+
+      if (!host) {
+        throw new Error(`Missing seeded user for ${event.hostEmail}.`);
+      }
+
+      const attendees = event.attendees
+        .map((attendee) => {
+          const attendeeUser = usersByEmail.get(attendee.userEmail);
+
+          if (!attendeeUser) {
+            throw new Error(`Missing seeded user for ${attendee.userEmail}.`);
+          }
+
+          return {
+            notes: attendee.notes,
+            status: attendee.status,
+            userId: attendeeUser.id,
+          };
+        })
+        .filter(Boolean);
+
+      return createEventRecord(
+        {
+          attendees,
+          capacity: event.capacity,
+          description: event.description,
+          endAt: event.endAt,
+          hostId: host.id,
+          livestreamUrl: event.livestreamUrl,
+          location: event.location,
+          name: event.name,
+          startAt: event.startAt,
+          topics: [...event.topics],
+          type: event.type,
+        },
+        queryDb,
+      );
+    }),
+  );
+
+  console.log(
+    styleText(
+      ['green', 'bold'],
+      `✓ Created ${createdEvents.length} events with ${events.reduce(
+        (total, event) => total + event.attendees.length,
+        0,
+      )} attendee records.`,
+    ),
+  );
+
+  console.log(styleText(['green', 'bold'], '✓ Done.'));
+});

package/templates/fate/void/middleware/01.shared.ts

@@ -0,0 +1,29 @@
+import { defineMiddleware } from 'void';
+import { getSession } from 'void/auth';
+import type { SharedData } from '../src/lib/shared.ts';
+
+declare module 'void' {
+  interface CloudContextVariables {
+    shared: SharedData;
+  }
+}
+
+export default defineMiddleware(async (context, next) => {
+  const session = getSession();
+  const url = new URL(context.req.raw.url);
+
+  context.set('shared', {
+    auth: {
+      user: session?.user
+        ? {
+            email: session.user.email,
+            id: session.user.id,
+            name: session.user.name,
+          }
+        : null,
+    },
+    origin: url.origin,
+  });
+
+  await next();
+});

package/templates/fate/void/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "fate-app",
+  "version": "0.0.1",
+  "private": true,
+  "description": "fate is a modern data client for React.",
+  "author": "Christoph Nakazawa <christoph.pojer@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/nkzw-tech/fate.git"
+  },
+  "type": "module",
+  "scripts": {
+    "build": "vp build",
+    "db:generate": "void db generate",
+    "db:migrate": "void db migrate",
+    "db:seed": "void db seed --file db/seed.ts",
+    "dev": "vp dev",
+    "dev:setup": "vp run prepare:void && vp run db:seed && vp run fate:generate",
+    "fate:generate": "vp exec fate generate",
+    "prepare:void": "void prepare"
+  },
+  "dependencies": {
+    "@nkzw/core": "^1.3.1",
+    "@nkzw/fate": "latest",
+    "@nkzw/stack": "^2.3.2",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@void/react": "^0.7.5",
+    "better-auth": "^1.6.9",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "drizzle-orm": "^0.45.2",
+    "lucide-react": "^1.14.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "react-error-boundary": "^6.1.1",
+    "react-fate": "latest",
+    "tailwind-merge": "^3.5.0",
+    "void": "^0.7.5",
+    "void-fate": "latest",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@rolldown/plugin-babel": "^0.2.3",
+    "@tailwindcss/vite": "^4.2.4",
+    "@types/node": "^25.6.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "tailwindcss": "^4.2.4",
+    "ts-node": "^10.9.2",
+    "vite": "catalog:",
+    "vite-plus": "catalog:"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not op_mini all"
+  ],
+  "engines": {
+    "node": ">=24.0.0",
+    "pnpm": ">=11.0.0"
+  },
+  "packageManager": "pnpm@11.0.6"
+}

package/templates/fate/void/pages/category/[id].tsx

@@ -0,0 +1,23 @@
+import { useParams } from '@void/react';
+import { useRequest } from 'react-fate';
+import CategoryCard, { CategoryView } from '../../src/ui/CategoryCard.tsx';
+import Section from '../../src/ui/Section.tsx';
+
+export default function CategoryPage() {
+  const { id } = useParams<{ id: string }>();
+
+  if (!id) {
+    throw new Error('fate: Category ID is required.');
+  }
+
+  const { category } = useRequest(
+    { category: { id, view: CategoryView } },
+    { mode: 'stale-while-revalidate' },
+  );
+
+  return (
+    <Section>
+      <CategoryCard category={category} />
+    </Section>
+  );
+}

package/templates/fate/void/pages/index.tsx

@@ -0,0 +1,153 @@
+import Stack, { VStack } from '@nkzw/stack';
+import { Link, useShared } from '@void/react';
+import { CircleMinus, CirclePlus } from 'lucide-react';
+import { Activity, useState } from 'react';
+import { ConnectionRef, useListView, useRequest, ViewRef } from 'react-fate';
+import cx from '../src/lib/cx.tsx';
+import type { SharedData } from '../src/lib/shared.ts';
+import { Button } from '../src/ui/Button.tsx';
+import Card from '../src/ui/Card.tsx';
+import CategoryCard, { CategoryView } from '../src/ui/CategoryCard.tsx';
+import CreatePost from '../src/ui/CreatePost.tsx';
+import EventCard, { EventView } from '../src/ui/EventCard.tsx';
+import H2 from '../src/ui/H2.tsx';
+import { PostCard, PostView } from '../src/ui/PostCard.tsx';
+import Section from '../src/ui/Section.tsx';
+import UserCard, { UserCardView } from '../src/ui/UserCard.tsx';
+
+const PostConnectionView = {
+  args: { first: 3 },
+  items: {
+    node: PostView,
+  },
+  pagination: {
+    hasNext: true,
+  },
+};
+
+const PostFeed = ({
+  posts: postsRef,
+  user,
+}: {
+  posts: ConnectionRef<'Post'>;
+  user: ViewRef<'User'> | null;
+}) => {
+  const [showPostEditor, setShowPostEditor] = useState(false);
+  const [posts, loadNext] = useListView(PostConnectionView, postsRef);
+
+  return posts.length ? (
+    <VStack gap={16}>
+      <Stack alignCenter between gap={16}>
+        <H2 className="pl-5">Latest posts</H2>
+        <div>
+          <button
+            className={cx(
+              'pr-5',
+              user ? 'active:translate-y-0.5 active:opacity-50' : 'pointer-events-none opacity-0',
+            )}
+            onClick={() => setShowPostEditor((showPostEditor) => !showPostEditor)}
+          >
+            {showPostEditor ? (
+              <CircleMinus className="h-6 w-6" />
+            ) : (
+              <CirclePlus className="h-6 w-6" />
+            )}
+          </button>
+        </div>
+      </Stack>
+      <VStack gap={32}>
+        <Activity mode={showPostEditor ? 'visible' : 'hidden'}>
+          <CreatePost user={user} />
+        </Activity>
+        {posts.map(({ node }) => (
+          <PostCard key={node.id} post={node} />
+        ))}
+        {loadNext ? (
+          <Stack center>
+            <Button onClick={loadNext} variant="ghost">
+              Load more posts
+            </Button>
+          </Stack>
+        ) : null}
+      </VStack>
+    </VStack>
+  ) : null;
+};
+
+const CategoryFeed = ({ categories }: { categories: Array<ViewRef<'Category'>> }) =>
+  categories.length ? (
+    <VStack gap={16}>
+      <H2 className="pl-5">Explore by theme</H2>
+      <VStack gap={24}>
+        {categories.map((category) => (
+          <CategoryCard category={category} key={category.id} />
+        ))}
+      </VStack>
+    </VStack>
+  ) : null;
+
+const EventFeed = ({ events }: { events: Array<ViewRef<'Event'>> }) =>
+  events.length ? (
+    <VStack gap={16}>
+      <H2 className="pl-5">Events</H2>
+      <VStack gap={24}>
+        {events.map((event) => (
+          <EventCard event={event} key={event.id} />
+        ))}
+      </VStack>
+    </VStack>
+  ) : null;
+
+export default function HomePage() {
+  const { auth } = useShared<SharedData>();
+  const user = auth.user;
+  const { categories, events, posts, viewer } = useRequest({
+    categories: { list: CategoryView },
+    events: { list: EventView },
+    posts: { list: PostConnectionView },
+    viewer: { view: UserCardView },
+  });
+
+  return (
+    <Section gap={32}>
+      <div className={cx('grid gap-8 lg:items-stretch', user ? 'lg:grid-cols-[1.6fr_1fr]' : '')}>
+        <Card className="border border-white/20 bg-linear-to-r from-blue-500 to-sky-500 text-white dark:from-blue-600 dark:to-sky-600">
+          <Stack alignCenter gap={12} wrap>
+            <span className="squircle bg-white/20 px-2 py-1 text-xs font-semibold tracking-widest uppercase">
+              <span className="lowercase italic">fate</span> demo
+            </span>
+          </Stack>
+          <div className="space-y-3">
+            <h1 className="text-3xl leading-tight font-semibold text-balance lg:text-4xl">
+              fate is a modern data client for React inspired by Relay and GraphQL.
+            </h1>
+            <p className="text-sm text-white/80 lg:text-base">
+              fate combines view composition, normalized caching, data masking, Async React
+              features, and type-safe data fetching.
+            </p>
+          </div>
+          <Stack alignCenter gap={12} wrap>
+            {!user && (
+              <>
+                <Button asChild size="sm" variant="secondary">
+                  <Link className="squircle px-4 py-2 text-sm font-semibold" href="/login">
+                    Login
+                  </Link>
+                </Button>
+                <span className="text-sm text-white/80">Sign in to post comments.</span>
+              </>
+            )}
+          </Stack>
+        </Card>
+        {viewer && <UserCard viewer={viewer} />}
+      </div>
+      <div className="grid gap-8 lg:grid-cols-[1.6fr_1fr] lg:items-start">
+        <PostFeed posts={posts} user={viewer} />
+        <VStack gap={24}>
+          <CategoryFeed categories={categories} />
+          <EventFeed events={events} />
+        </VStack>
+      </div>
+    </Section>
+  );
+}

package/templates/fate/void/pages/layout.tsx

@@ -0,0 +1,46 @@
+import '../src/App.css';
+import Stack from '@nkzw/stack';
+import { useShared } from '@void/react';
+import { ReactNode, Suspense } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { VoidFateClient } from 'void-fate/react';
+import type { SharedData } from '../src/lib/shared.ts';
+import Card from '../src/ui/Card.tsx';
+import Error from '../src/ui/Error.tsx';
+import Header from '../src/ui/Header.tsx';
+import Section from '../src/ui/Section.tsx';
+
+const Thinking = () => (
+  <Section>
+    <Stack center className="animate-pulse text-gray-500 italic" verticalPadding={48}>
+      Thinking...
+    </Stack>
+  </Section>
+);
+
+export default function Layout({ children }: { children: ReactNode }) {
+  const shared = useShared<SharedData>();
+  const userId = shared.auth.user?.id;
+  const origin = typeof window === 'undefined' ? shared.origin : window.location.origin;
+
+  return (
+    <VoidFateClient origin={origin} userId={userId}>
+      <div className="min-h-screen bg-background text-foreground">
+        <div className="min-h-screen bg-[radial-gradient(circle_at_20%_20%,rgba(59,130,246,0.08),transparent_35%),radial-gradient(circle_at_80%_0,rgba(99,102,241,0.08),transparent_28%)]">
+          <Header />
+          <ErrorBoundary
+            fallbackRender={({ error }) => (
+              <Section>
+                <Card>
+                  <Error error={error} />
+                </Card>
+              </Section>
+            )}
+          >
+            <Suspense fallback={<Thinking />}>{children}</Suspense>
+          </ErrorBoundary>
+        </div>
+      </div>
+    </VoidFateClient>
+  );
+}

package/templates/fate/void/pages/login.tsx

@@ -0,0 +1,103 @@
+import Stack, { VStack } from '@nkzw/stack';
+import { useRouter, useShared } from '@void/react';
+import { ExternalLinkIcon } from 'lucide-react';
+import { useActionState, useEffect, useState } from 'react';
+import type { SharedData } from '../src/lib/shared.ts';
+import { Button } from '../src/ui/Button.tsx';
+import Card from '../src/ui/Card.tsx';
+import H2 from '../src/ui/H2.tsx';
+import Input from '../src/ui/Input.tsx';
+import Section from '../src/ui/Section.tsx';
+import AuthClient from '../src/user/AuthClient.tsx';
+
+export default function LoginPage() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const router = useRouter();
+  const { auth } = useShared<SharedData>();
+
+  const [, signInAction] = useActionState(async () => {
+    await AuthClient.signIn.email(
+      {
+        email,
+        password,
+      },
+      {
+        onError: () => {},
+        onRequest: () => {},
+        onSuccess: () => {
+          router.flushAll();
+          void router.visit('/', { replace: true });
+        },
+      },
+    );
+
+    return null;
+  }, null);
+
+  useEffect(() => {
+    if (auth.user) {
+      router.flushAll();
+      void router.visit('/', { replace: true });
+    }
+  }, [auth.user, router]);
+
+  if (auth.user) {
+    return null;
+  }
+
+  return (
+    <Section>
+      <VStack center gap={16}>
+        <H2 className="pl-5">Sign In</H2>
+        <Stack gap={32} wrap>
+          <Card className="w-84">
+            <Stack gap vertical>
+              <VStack action={signInAction} as="form" gap={12}>
+                <Input
+                  className="w-48"
+                  name="email"
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="email"
+                  type="email"
+                  value={email}
+                />
+                <Input
+                  className="w-48"
+                  name="password"
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder="password"
+                  type="password"
+                  value={password}
+                />
+                <div>
+                  <Button type="submit" variant="outline">
+                    Sign In
+                  </Button>
+                </div>
+              </VStack>
+            </Stack>
+          </Card>
+          <Card className="w-84">
+            <p>
+              Try one of the
+              <Stack
+                alignCenter
+                as="a"
+                className="inline-flex! px-1 underline hover:no-underline"
+                gap={4}
+                href="https://github.com/nkzw-tech/fate/blob/main/packages/create-fate/templates/fate/void/seedData.ts#L1"
+                rel="noreferrer"
+                target="_blank"
+              >
+                Example Accounts
+                <ExternalLinkIcon className="h-4 w-4" />
+              </Stack>{' '}
+              in the seed data.
+            </p>
+          </Card>
+        </Stack>
+      </VStack>
+    </Section>
+  );
+}

package/templates/fate/void/pages/post/[id].tsx

@@ -0,0 +1,20 @@
+import { useParams } from '@void/react';
+import { useRequest } from 'react-fate';
+import { PostCard, PostView } from '../../src/ui/PostCard.tsx';
+import Section from '../../src/ui/Section.tsx';
+
+export default function PostPage() {
+  const { id } = useParams<{ id: string }>();
+
+  if (!id) {
+    throw new Error('fate: Post ID is required.');
+  }
+
+  const { post } = useRequest({ post: { id, view: PostView } });
+
+  return (
+    <Section>
+      <PostCard detail post={post} />
+    </Section>
+  );
+}

package/templates/fate/void/pages/search.tsx

@@ -0,0 +1,81 @@
+import Stack, { VStack } from '@nkzw/stack';
+import { Suspense, useDeferredValue, useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { useRequest, useView, view, ViewRef } from 'react-fate';
+import type { Comment, Post } from '../src/fate/views.ts';
+import cx from '../src/lib/cx.tsx';
+import Card from '../src/ui/Card.tsx';
+import CommentCard, { CommentView } from '../src/ui/CommentCard.tsx';
+import Error from '../src/ui/Error.tsx';
+import Input from '../src/ui/Input.tsx';
+import Section from '../src/ui/Section.tsx';
+
+const CommentPostView = view<Post>()({
+  commentCount: true,
+  id: true,
+  title: true,
+});
+
+const CommentSearchView = view<Comment>()({
+  ...CommentView,
+  id: true,
+  post: CommentPostView,
+});
+
+const CommentResult = ({ comment: commentRef }: { comment: ViewRef<'Comment'> }) => {
+  const comment = useView(CommentSearchView, commentRef);
+  const post = useView(CommentPostView, comment.post);
+
+  return <CommentCard comment={comment} link post={post} />;
+};
+
+const SearchResults = ({ isStale, query }: { isStale: boolean; query: string }) => {
+  const { commentSearch } = useRequest({
+    commentSearch: { args: { query }, list: CommentSearchView },
+  });
+
+  if (commentSearch.length === 0) {
+    return (
+      <p>
+        No matches for <i>&quot;{query}&quot;</i>
+      </p>
+    );
+  }
+
+  return (
+    <VStack className={cx(isStale && 'opacity-50')} gap={12}>
+      {commentSearch.map((comment) => (
+        <CommentResult comment={comment} key={comment.id} />
+      ))}
+    </VStack>
+  );
+};
+
+export default function SearchPage() {
+  const [query, setQuery] = useState('');
+  const deferredQuery = useDeferredValue(query);
+  const isStale = query !== deferredQuery;
+
+  return (
+    <Section>
+      <Card>
+        <Stack alignCenter between gap={16}>
+          <Input
+            className="w-64"
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search comments..."
+            ref={(ref) => ref?.focus()}
+            value={query}
+          />
+          <div className="text-xs text-muted-foreground">500ms artificial slowdown</div>
+        </Stack>
+
+        <ErrorBoundary FallbackComponent={Error}>
+          <Suspense fallback={<h2>Thinking…</h2>}>
+            {query.trim().length > 0 ? <SearchResults isStale={isStale} query={query} /> : null}
+          </Suspense>
+        </ErrorBoundary>
+      </Card>
+    </Section>
+  );
+}