create-fate 0.0.0 → 1.0.0

package/templates/fate/void/src/fate/views.ts

@@ -0,0 +1,164 @@
+import { computed, count, dataView, field, list, type Entity } from '@nkzw/fate/server';
+import type {
+  CategoryItem,
+  CommentItem,
+  EventAttendeeItem,
+  EventItem,
+  PostItem,
+} from '../../db/queries.ts';
+import type { CategoryRow, TagRow, UserRow } from '../../db/schema.ts';
+import type { AppContext } from './context.ts';
+
+export const userDataView = dataView<UserRow>('User')({
+  email: computed<UserRow, string | null, AppContext>({
+    authorize: ({ id }, context) => context?.sessionUser?.id === id,
+    resolve: (_item, deps) => (deps.email as string | null) ?? null,
+    select: {
+      email: field('email'),
+    },
+  }),
+  id: true,
+  name: true,
+  username: true,
+});
+
+export const tagDataView = dataView<TagRow>('Tag')({
+  description: true,
+  id: true,
+  name: true,
+});
+
+export const categorySummaryDataView = dataView<CategoryRow>('Category')({
+  id: true,
+  name: true,
+});
+
+const basePost = {
+  author: userDataView,
+  category: categorySummaryDataView,
+  commentCount: computed<PostItem, number>({
+    resolve: (_item, deps) => (deps.count as number) ?? 0,
+    select: {
+      count: count('comments'),
+    },
+  }),
+  content: true,
+  id: true,
+  likes: true,
+  title: true,
+} as const;
+
+export const postSummaryDataView = dataView<PostItem>('Post')({
+  ...basePost,
+  tags: list(tagDataView),
+});
+
+export const commentDataView = dataView<CommentItem>('Comment')({
+  author: userDataView,
+  content: true,
+  id: true,
+  post: postSummaryDataView,
+});
+
+export const postDataView = dataView<PostItem>('Post')({
+  ...basePost,
+  comments: list(commentDataView, { orderBy: { createdAt: 'asc', id: 'asc' } }),
+  tags: list(tagDataView),
+});
+
+export const categoryDataView = dataView<CategoryItem>('Category')({
+  description: true,
+  id: true,
+  name: true,
+  postCount: computed<CategoryItem, number>({
+    resolve: (_item, deps) => (deps.count as number) ?? 0,
+    select: {
+      count: count('posts'),
+    },
+  }),
+  posts: list(postDataView),
+});
+
+export const eventAttendeeDataView = dataView<EventAttendeeItem>('EventAttendee')({
+  id: true,
+  notes: true,
+  status: true,
+  user: userDataView,
+});
+
+export const eventDataView = dataView<EventItem>('Event')({
+  attendees: list(eventAttendeeDataView, { orderBy: { createdAt: 'asc', id: 'asc' } }),
+  attendingCount: computed<EventItem, number>({
+    resolve: (_item, deps) => (deps.count as number) ?? 0,
+    select: {
+      count: count('attendees', {
+        where: { status: 'GOING' },
+      }),
+    },
+  }),
+  capacity: true,
+  description: true,
+  endAt: true,
+  host: userDataView,
+  id: true,
+  livestreamUrl: true,
+  location: true,
+  name: true,
+  startAt: true,
+  topics: true,
+  type: true,
+});
+
+export type User = Entity<typeof userDataView, 'User'>;
+export type Tag = Entity<typeof tagDataView, 'Tag'>;
+export type Comment = Entity<
+  typeof commentDataView,
+  'Comment',
+  {
+    author: User;
+    post: Post;
+  }
+>;
+export type EventAttendee = Entity<
+  typeof eventAttendeeDataView,
+  'EventAttendee',
+  {
+    user: User;
+  }
+>;
+export type Post = Entity<
+  typeof postDataView,
+  'Post',
+  {
+    author: User;
+    category: Category | null;
+    comments: Array<Comment>;
+    tags: Array<Tag>;
+  }
+>;
+export type Category = Entity<
+  typeof categoryDataView,
+  'Category',
+  {
+    posts: Array<Post>;
+  }
+>;
+export type Event = Entity<
+  typeof eventDataView,
+  'Event',
+  {
+    attendees: Array<EventAttendee>;
+    host: User;
+  }
+>;
+
+export const Root = {
+  categories: list(categoryDataView, { orderBy: { createdAt: 'asc', id: 'asc' } }),
+  commentSearch: {
+    procedure: 'search',
+    view: list(commentDataView, { orderBy: { createdAt: 'desc', id: 'desc' } }),
+  },
+  events: list(eventDataView, { orderBy: [{ startAt: 'asc' }, { id: 'asc' }] }),
+  posts: list(postDataView, { orderBy: { createdAt: 'desc', id: 'desc' } }),
+  viewer: userDataView,
+};

package/templates/fate/void/src/lib/cx.tsx

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export default function cx(...inputs: Array<ClassValue>) {
+  return twMerge(clsx(inputs));
+}

package/templates/fate/void/src/lib/formatLabel.tsx

@@ -0,0 +1,6 @@
+export default function formatLabel(value: string) {
+  return value
+    .split('_')
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase())
+    .join(' ');
+}

package/templates/fate/void/src/lib/shared.ts

@@ -0,0 +1,10 @@
+export type SharedData = {
+  auth: {
+    user: {
+      email: string;
+      id: string;
+      name: string;
+    } | null;
+  };
+  origin: string;
+};

package/templates/fate/void/src/ui/Badge.tsx

@@ -0,0 +1,31 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { HTMLAttributes } from 'react';
+import cx from '../lib/cx.tsx';
+
+const badgeVariants = cva(
+  'squircle inline-flex items-center border px-1.5 py-0.5 text-xs font-semibold transition-colors focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none',
+  {
+    defaultVariants: {
+      variant: 'default',
+    },
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/80 border-transparent',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+      },
+    },
+  },
+);
+
+export interface BadgeProps
+  extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cx(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

package/templates/fate/void/src/ui/Button.tsx

@@ -0,0 +1,92 @@
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import {
+  type ButtonHTMLAttributes,
+  type MouseEvent,
+  type ReactNode,
+  useOptimistic,
+  useTransition,
+} from 'react';
+import { useFormStatus } from 'react-dom';
+import cx from '../lib/cx.tsx';
+
+const buttonVariants = cva(
+  'squircle inline-flex cursor-pointer items-center justify-center gap-2 text-sm font-medium whitespace-nowrap ring-offset-background transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    defaultVariants: {
+      size: 'default',
+      variant: 'default',
+    },
+    variants: {
+      size: {
+        default: 'h-10 px-3 py-2 active:pt-[11px] active:pb-[9px]',
+        icon: 'h-10 w-10',
+        lg: 'squircle h-11 px-6 active:pt-[11px] active:pb-[9px]',
+        sm: 'squircle h-9 px-2 active:pt-[11px] active:pb-[9px]',
+      },
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+        outline: 'border-input border bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+      },
+    },
+  },
+);
+
+const Button = ({
+  action,
+  asChild = false,
+  children,
+  className,
+  disabled,
+  onClick: initialOnClick,
+  pendingPlaceholder = '...',
+  size,
+  type,
+  variant,
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof buttonVariants> & {
+    action?: () => Promise<unknown> | void;
+    asChild?: boolean;
+    pendingPlaceholder?: ReactNode;
+  }) => {
+  const Component = asChild ? Slot : 'button';
+
+  const [optimisticIsPending, setOptimisticIsPending] = useOptimistic(false);
+  const [transitionIsPending, startTransition] = useTransition();
+  const { pending: formIsPending } = useFormStatus();
+
+  const onClick = (event: MouseEvent<HTMLButtonElement>) => {
+    initialOnClick?.(event);
+
+    if (!action || event.defaultPrevented) {
+      return;
+    }
+
+    event.preventDefault();
+    startTransition(async () => {
+      setOptimisticIsPending(true);
+      await action();
+    });
+  };
+
+  const isPending = transitionIsPending || optimisticIsPending || formIsPending;
+
+  return (
+    <Component
+      className={cx(buttonVariants({ className, size, variant }))}
+      disabled={disabled || isPending || undefined}
+      onClick={initialOnClick || action ? onClick : undefined}
+      type={type}
+      {...props}
+    >
+      {isPending ? pendingPlaceholder : children}
+    </Component>
+  );
+};
+
+export { Button, buttonVariants };

package/templates/fate/void/src/ui/Card.tsx

@@ -0,0 +1,29 @@
+import { VStack } from '@nkzw/stack';
+import cx from '../lib/cx.tsx';
+
+export default function Card({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cx(
+        'squircle relative overflow-hidden border border-gray-200/70 bg-white/85 shadow-[0_16px_70px_-32px_rgba(15,23,42,0.45)] transition duration-200 ease-out hover:shadow-[0_24px_80px_-38px_rgba(15,23,42,0.55)] dark:border-neutral-800 dark:bg-neutral-900/80',
+        className,
+      )}
+    >
+      <div className="pointer-events-none absolute inset-0 bg-linear-to-br from-blue-500/10 via-transparent to-indigo-500/15 opacity-30 transition duration-200" />
+      <VStack
+        className="relative z-10 flex h-full w-full"
+        gap={16}
+        horizontalPadding={20}
+        verticalPadding={16}
+      >
+        {children}
+      </VStack>
+    </div>
+  );
+}

package/templates/fate/void/src/ui/CategoryCard.tsx

@@ -0,0 +1,105 @@
+import Stack, { VStack } from '@nkzw/stack';
+import { useView, view, ViewRef } from 'react-fate';
+import type { Category, Post } from '../fate/views.ts';
+import { Badge } from '../ui/Badge.tsx';
+import Card from '../ui/Card.tsx';
+import TagBadge, { TagView } from '../ui/TagBadge.tsx';
+import { UserView } from '../ui/UserCard.tsx';
+import H3 from './H3.tsx';
+import Link from './Link.tsx';
+
+const CategoryPostView = view<Post>()({
+  author: UserView,
+  id: true,
+  likes: true,
+  tags: {
+    items: {
+      node: TagView,
+    },
+  },
+  title: true,
+});
+
+const CategoryPost = ({ post: postRef }: { post: ViewRef<'Post'> }) => {
+  const post = useView(CategoryPostView, postRef);
+  const author = useView(UserView, post.author);
+  const tags = post.tags?.items ?? [];
+
+  return (
+    <VStack gap key={post.id}>
+      <Stack alignCenter between gap={12}>
+        <Link href={`/post/${post.id}`}>
+          <span className="font-medium text-blue-600 no-underline hover:underline dark:text-blue-200">
+            {post.title}
+          </span>
+        </Link>
+        <span className="text-xs text-muted-foreground">{post.likes} likes</span>
+      </Stack>
+      <Stack alignCenter gap wrap>
+        <span className="text-xs text-muted-foreground">
+          {author?.name ? `by ${author.name}` : 'By an anonymous collaborator'}
+        </span>
+        {tags.length ? (
+          <Stack gap wrap>
+            {tags.map(({ node }) => (
+              <TagBadge key={node.id} tag={node} />
+            ))}
+          </Stack>
+        ) : null}
+      </Stack>
+    </VStack>
+  );
+};
+
+export const CategoryView = view<Category>()({
+  description: true,
+  id: true,
+  name: true,
+  postCount: true,
+  posts: {
+    items: {
+      cursor: true,
+      node: CategoryPostView,
+    },
+    pagination: {
+      hasNext: true,
+      nextCursor: true,
+    },
+  },
+});
+
+export default function CategoryCard({ category: categoryRef }: { category: ViewRef<'Category'> }) {
+  const category = useView(CategoryView, categoryRef);
+  const posts = category.posts?.items ?? [];
+
+  return (
+    <Card key={category.id}>
+      <VStack gap={12}>
+        <Stack alignCenter between gap={12}>
+          <div>
+            <Link href={`/category/${category.id}`}>
+              <H3>{category.name}</H3>
+            </Link>
+            <p className="text-sm text-muted-foreground">{category.description}</p>
+          </div>
+          <Badge className="text-nowrap" variant="outline">
+            {category.postCount} posts
+          </Badge>
+        </Stack>
+        <VStack gap={12}>
+          {posts.map(({ cursor, node }) => {
+            if (cursor !== node.id) {
+              throw new Error(`fate: Cursor '${cursor}' does not match node ID '${node.id}'.`);
+            }
+            return <CategoryPost key={node.id} post={node} />;
+          })}
+        </VStack>
+        {category.posts?.pagination?.hasNext ? (
+          <span className="text-sm text-muted-foreground">
+            More posts available in this category...
+          </span>
+        ) : null}
+      </VStack>
+    </Card>
+  );
+}

package/templates/fate/void/src/ui/CommentCard.tsx

@@ -0,0 +1,80 @@
+import Stack from '@nkzw/stack';
+import { useShared } from '@void/react';
+import { X } from 'lucide-react';
+import { useFateClient, useView, view, ViewRef } from 'react-fate';
+import type { Comment } from '../fate/views.ts';
+import type { SharedData } from '../lib/shared.ts';
+import { Button } from './Button.tsx';
+import Link from './Link.tsx';
+
+export const CommentView = view<Comment>()({
+  author: {
+    id: true,
+    name: true,
+    username: true,
+  },
+  content: true,
+  id: true,
+});
+
+export const CommentViewWithPostCount = view<Comment>()({
+  ...CommentView,
+  post: { commentCount: true },
+});
+
+export default function CommentCard({
+  comment: commentRef,
+  link,
+  post,
+}: {
+  comment: ViewRef<'Comment'>;
+  link?: boolean;
+  post: { commentCount: number; id: string; title: string };
+}) {
+  const fate = useFateClient();
+  const { auth } = useShared<SharedData>();
+  const comment = useView(CommentView, commentRef);
+  const { author } = comment;
+  const canDelete = auth.user?.id === author?.id;
+
+  return (
+    <div
+      className="group squircle border border-gray-200/80 bg-gray-100/50 p-3 text-sm dark:border-neutral-800 dark:bg-neutral-900/40"
+      key={comment.id}
+    >
+      <Stack between gap={16}>
+        <p className="font-medium text-gray-900 dark:text-gray-200">
+          {author?.name ?? 'Anonymous'}
+        </p>
+        {canDelete ? (
+          <Button
+            className="opacity-0 transition-opacity group-hover:opacity-100 focus:opacity-100"
+            onClick={async () => {
+              await fate.mutations.comment.delete({
+                delete: true,
+                input: { id: comment.id },
+                optimistic: {
+                  post: { commentCount: post.commentCount - 1, id: post.id },
+                },
+                view: view<Comment>()({
+                  id: true,
+                  post: { commentCount: true },
+                }),
+              });
+            }}
+            size="sm"
+            variant="ghost"
+          >
+            <X size={14} />
+          </Button>
+        ) : null}
+      </Stack>
+      <p className="text-foreground/80">{comment.content}</p>
+      {link && (
+        <Link className="text-blue-500 underline hover:no-underline" href={`/post/${post.id}`}>
+          {post.title}
+        </Link>
+      )}
+    </div>
+  );
+}

package/templates/fate/void/src/ui/CreatePost.tsx

@@ -0,0 +1,111 @@
+import Stack, { VStack } from '@nkzw/stack';
+import { KeyboardEvent, startTransition, useActionState, useState } from 'react';
+import { useFateClient, useView, ViewRef } from 'react-fate';
+import { Button } from '../ui/Button.tsx';
+import Card from './Card.tsx';
+import H3 from './H3.tsx';
+import Input, { CheckBox } from './Input.tsx';
+import { PostView } from './PostCard.tsx';
+import { UserCardView } from './UserCard.tsx';
+
+export default function CreatePost({ user: userRef }: { user: ViewRef<'User'> | null }) {
+  const fate = useFateClient();
+  const user = useView(UserCardView, userRef);
+  const [contentValue, setContentValue] = useState('');
+  const [titleValue, setTitleValue] = useState('');
+  const [missingOptimisticContent, setMissingOptimisticContent] = useState(false);
+  const [missingMutationSelection, setMissingMutationSelection] = useState(false);
+
+  const [, createPost, isPending] = useActionState(async () => {
+    const content = contentValue.trim();
+    const title = titleValue.trim();
+
+    if (!content || !title || !user) {
+      return;
+    }
+
+    const result = await fate.mutations.post.add({
+      input: { content, title },
+      insert: 'before',
+      optimistic: missingOptimisticContent
+        ? {
+            author: user,
+            comments: [],
+            id: `optimistic:${Date.now().toString(36)}`,
+            title,
+          }
+        : {
+            author: user,
+            commentCount: 0,
+            comments: [],
+            content,
+            id: `optimistic:${Date.now().toString(36)}`,
+            likes: 0,
+            title,
+          },
+      ...(missingMutationSelection ? null : { view: PostView }),
+    });
+
+    setContentValue('');
+    setTitleValue('');
+
+    return result;
+  }, null);
+
+  const maybeSubmitPost = (event: KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>) => {
+    if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
+      startTransition(createPost);
+    }
+  };
+
+  const postingIsDisabled =
+    isPending || titleValue.trim().length === 0 || contentValue.trim().length === 0;
+
+  return (
+    <Card>
+      <VStack action={createPost} as="form" gap={16}>
+        <H3>Create a Post</H3>
+        <Input
+          className="w-full"
+          disabled={isPending}
+          onChange={(event) => setTitleValue(event.target.value)}
+          onKeyDown={maybeSubmitPost}
+          placeholder="Post Title"
+          value={titleValue}
+        />
+        <textarea
+          className="squircle border-input flex min-h-20 w-full border bg-background px-3 py-2 text-sm text-foreground shadow-sm transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 focus-visible:ring-offset-background focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-900/40"
+          disabled={isPending}
+          onChange={(event) => setContentValue(event.target.value)}
+          onKeyDown={maybeSubmitPost}
+          placeholder={'Share your thoughts about fate...'}
+          value={contentValue}
+        />
+        <Stack alignCenter between className="text-sm" gap={16}>
+          <span className="font-bold">Mutation Debug Options</span>
+          <Stack alignCenter as="label" gap>
+            <CheckBox
+              checked={missingMutationSelection}
+              disabled={isPending}
+              onChange={(event) => setMissingMutationSelection(event.target.checked)}
+            />
+            Missing mutation selection
+          </Stack>
+          <Stack alignCenter as="label" gap>
+            <CheckBox
+              checked={missingOptimisticContent}
+              disabled={isPending}
+              onChange={(event) => setMissingOptimisticContent(event.target.checked)}
+            />
+            Missing optimistic content
+          </Stack>
+        </Stack>
+        <Stack alignCenter end gap={16}>
+          <Button disabled={postingIsDisabled} size="sm" type="submit" variant="secondary">
+            Post comment
+          </Button>
+        </Stack>
+      </VStack>
+    </Card>
+  );
+}

package/templates/fate/void/src/ui/Error.tsx

@@ -0,0 +1,19 @@
+import { VStack } from '@nkzw/stack';
+
+export default function Error({ error: initialError }: { error: unknown }) {
+  const error = initialError instanceof Error ? (initialError as Error) : null;
+  return (
+    <VStack gap={12}>
+      <h3 className="text-xl font-semibold text-red-700">Error</h3>
+      <code>{error ? error.stack || `fate Error: ${error.message}` : String(initialError)}</code>
+      <div>
+        <a
+          className="cursor-pointer underline decoration-gray-300 hover:no-underline"
+          onClick={() => window.location.reload()}
+        >
+          Try again
+        </a>
+      </div>
+    </VStack>
+  );
+}