create-fate 0.0.0 → 1.0.0

package/templates/fate/drizzle/client/src/ui/PostCard.tsx

@@ -0,0 +1,284 @@
+import type { Comment as InlineComment, Post } from '@app/server/src/router.ts';
+import Stack, { VStack } from '@nkzw/stack';
+import { cx } from 'class-variance-authority';
+import { fbs } from 'fbtee';
+import {
+  KeyboardEvent,
+  startTransition,
+  useActionState,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { useFateClient, useLiveListView, useLiveView, useView, view, ViewRef } from 'react-fate';
+import { Button } from '../ui/Button.tsx';
+import Card from '../ui/Card.tsx';
+import AuthClient from '../user/AuthClient.tsx';
+import CommentCard, { CommentView } from './CommentCard.tsx';
+import H3 from './H3.tsx';
+import Link from './Link.tsx';
+import { UserView } from './UserCard.tsx';
+
+const CommentConnectionView = {
+  args: { first: 3 },
+  items: {
+    node: CommentView,
+  },
+  live: {
+    append: 'visible',
+  },
+};
+
+export const PostView = view<Post>()({
+  author: UserView,
+  commentCount: true,
+  comments: CommentConnectionView,
+  content: true,
+  id: true,
+  likes: true,
+  title: true,
+});
+
+const CommentInput = ({
+  error,
+  post,
+}: {
+  error?: unknown;
+  post: { commentCount: number; id: string };
+}) => {
+  const fate = useFateClient();
+  const { data: session } = AuthClient.useSession();
+  const user = session?.user;
+  const [commentText, setCommentText] = useState('');
+
+  const [addCommentResult, handleAddComment, addCommentIsPending] = useActionState(async () => {
+    const content = commentText.trim();
+
+    if (!content) {
+      return;
+    }
+
+    const result = await fate.mutations.comment.add({
+      input: { content, postId: post.id },
+      optimistic: {
+        author: user
+          ? {
+              id: user.id,
+              name: user.name ?? 'Anonymous',
+            }
+          : null,
+        content,
+        id: `optimistic:${Date.now().toString(36)}`,
+        post: { commentCount: post.commentCount + 1, id: post.id },
+      },
+      view: view<InlineComment>()({
+        ...CommentView,
+        post: { commentCount: true },
+      }),
+    });
+
+    setCommentText('');
+
+    return result;
+  }, null);
+
+  const maybeSubmitComment = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
+      startTransition(() => handleAddComment());
+    }
+  };
+
+  const commentingIsDisabled = addCommentIsPending || commentText.trim().length === 0;
+
+  const anyServerError = error || addCommentResult?.error;
+
+  return (
+    <VStack action={handleAddComment} as="form" gap>
+      <span className="text-sm font-medium text-foreground">
+        <fbt desc="Comment add label">Add a comment</fbt>
+      </span>
+      <textarea
+        className="squircle min-h-20 w-full border border-gray-200/80 bg-gray-100/50 p-3 text-sm placeholder-gray-500 transition outline-none focus:border-gray-500 focus:ring-2 focus:ring-gray-200 disabled:opacity-50 dark:border-neutral-800 dark:bg-neutral-900/40 dark:placeholder-gray-400"
+        disabled={addCommentIsPending}
+        onChange={(event) => setCommentText(event.target.value)}
+        onKeyDown={maybeSubmitComment}
+        placeholder={fbs('Share your thoughts...', 'Placeholder text for comment input')}
+        value={commentText}
+      />
+      {anyServerError ? (
+        <p className="text-sm text-destructive">
+          {anyServerError instanceof Error ? (
+            anyServerError.message
+          ) : (
+            <fbt desc="Error text">Something went wrong. Please try again.</fbt>
+          )}
+        </p>
+      ) : null}
+      <Stack end gap>
+        <Button disabled={commentingIsDisabled} size="sm" type="submit" variant="secondary">
+          <fbt desc="Post comment button">Post comment</fbt>
+        </Button>
+      </Stack>
+    </VStack>
+  );
+};
+
+export function PostCard({ detail, post: postRef }: { detail?: boolean; post: ViewRef<'Post'> }) {
+  const fate = useFateClient();
+  const post = useLiveView(PostView, postRef);
+  const author = useView(UserView, post.author);
+  const [comments, loadNext] = useLiveListView(CommentConnectionView, post.comments);
+
+  const [likeResult, likeAction, likeIsPending] = useActionState(fate.actions.post.like, null);
+
+  const [, unlikeAction, unlikeIsPending] = useActionState(fate.actions.post.unlike, null);
+
+  useEffect(() => {
+    if (likeResult?.error) {
+      const timeout = setTimeout(() => startTransition(() => likeAction('reset')), 3000);
+      return () => clearTimeout(timeout);
+    }
+  }, [likeAction, likeResult]);
+
+  const handleLike = useCallback(
+    async (options?: { error?: 'boundary' | 'callSite'; slow?: boolean }) => {
+      likeAction({
+        input: { id: post.id, ...options },
+        optimistic: { likes: post.likes + 1 },
+        view: PostView,
+      });
+    },
+    [likeAction, post.id, post.likes],
+  );
+
+  const handleUnlike = useCallback(async () => {
+    unlikeAction({
+      input: { id: post.id },
+      optimistic: {
+        likes: Math.max(post.likes - 1, 0),
+      },
+      view: PostView,
+    });
+  }, [post.id, post.likes, unlikeAction]);
+
+  return (
+    <Card>
+      <VStack gap={16}>
+        <Stack alignStart between gap={16} wrap>
+          <VStack gap>
+            <Link to={`/post/${post.id}`}>
+              <H3>{post.title}</H3>
+            </Link>
+          </VStack>
+          <Stack alignCenter gap={12} wrap>
+            <Stack
+              alignCenter
+              className="squircle bg-slate-100 px-3 py-2 text-sm font-semibold text-slate-800 dark:bg-neutral-800 dark:text-white"
+              gap
+            >
+              <span>👍</span>
+              <span>
+                <fbt desc="Like count">
+                  <fbt:plural count={post.likes} many="Likes" showCount="yes">
+                    Like
+                  </fbt:plural>
+                </fbt>
+              </span>
+            </Stack>
+            <Button action={handleLike} disabled={likeIsPending} size="sm" variant="outline">
+              <fbt desc="Like button">Like</fbt>
+            </Button>
+            {detail && (
+              <Button
+                action={() => handleLike({ slow: true })}
+                disabled={likeIsPending}
+                size="sm"
+                variant="outline"
+              >
+                <fbt desc="Like button with a slow request">Like (Slow)</fbt>
+              </Button>
+            )}
+            {detail && (
+              <Button
+                action={() => handleLike({ error: 'callSite' })}
+                className={cx(
+                  'w-32 transition-colors duration-150',
+                  likeResult?.error ? 'border-red-500 text-red-500 hover:text-red-500' : '',
+                )}
+                disabled={likeIsPending}
+                size="sm"
+                variant="outline"
+              >
+                {likeResult?.error ? (
+                  <fbt desc="Very short error messages">Oops, try again!</fbt>
+                ) : (
+                  <fbt desc="Like button that triggers an error">Like (Error)</fbt>
+                )}
+              </Button>
+            )}
+            {detail && (
+              <Button
+                action={() => handleLike({ error: 'boundary' })}
+                disabled={likeIsPending}
+                size="sm"
+                variant="outline"
+              >
+                <fbt desc="Like button that triggers a network error">Like (Network Error)</fbt>
+              </Button>
+            )}
+            {detail && (
+              <Button
+                onClick={() =>
+                  fate.mutations.post.like({
+                    input: { id: post.id },
+                    optimistic: { likes: post.likes + 1 },
+                    view: PostView,
+                  })
+                }
+                size="sm"
+                variant="outline"
+              >
+                <fbt desc="Like button that can be pressed many times">Like (Many)</fbt>
+              </Button>
+            )}
+            <Button
+              action={handleUnlike}
+              disabled={unlikeIsPending || post.likes === 0}
+              size="sm"
+              variant="outline"
+            >
+              <fbt desc="Unlike button">Unlike</fbt>
+            </Button>
+          </Stack>
+        </Stack>
+        <p className="text-sm leading-relaxed text-foreground/90 lg:text-base">{post.content}</p>
+        <p className="text-sm text-muted-foreground">- {author?.name ?? 'Unknown author'}</p>
+        <VStack gap={16}>
+          <h4 className="text-base font-semibold text-foreground">
+            <fbt desc="Comment headline">
+              <fbt:plural count={post.commentCount} many="Comments" showCount="ifMany">
+                One Comment
+              </fbt:plural>
+            </fbt>
+          </h4>
+          {comments.length > 0 ? (
+            <VStack gap={12}>
+              {comments.map(({ node }) => (
+                <CommentCard comment={node} key={node.id} post={post} />
+              ))}
+              {loadNext ? (
+                <Button onClick={loadNext} variant="ghost">
+                  <fbt desc="Load more comments button">Load more comments</fbt>
+                </Button>
+              ) : null}
+            </VStack>
+          ) : null}
+          <ErrorBoundary fallbackRender={({ error }) => <CommentInput error={error} post={post} />}>
+            <CommentInput post={post} />
+          </ErrorBoundary>
+        </VStack>
+      </VStack>
+    </Card>
+  );
+}

package/templates/fate/drizzle/client/src/ui/Section.tsx

@@ -0,0 +1,23 @@
+import { Gap, VStack } from '@nkzw/stack';
+import { ReactNode } from 'react';
+import cx from '../lib/cx.tsx';
+
+export default function Section({
+  children,
+  className,
+  gap,
+}: {
+  children: ReactNode;
+  className?: string;
+  gap?: Gap;
+}) {
+  return (
+    <VStack
+      as="section"
+      className={cx('max-w-8xl container mx-auto px-4 py-6 lg:px-8 lg:py-10', className)}
+      gap={gap}
+    >
+      {children}
+    </VStack>
+  );
+}

package/templates/fate/drizzle/client/src/ui/UserCard.tsx

@@ -0,0 +1,131 @@
+import { User } from '@app/server/src/router.ts';
+import safeParse from '@nkzw/core/safeParse.js';
+import Stack, { VStack } from '@nkzw/stack';
+import { fbs } from 'fbtee';
+import { ChangeEvent, useActionState, useState } from 'react';
+import { view } from 'react-fate';
+import { useFateClient } from 'react-fate';
+import { ViewRef } from 'react-fate';
+import { useView } from 'react-fate';
+import { Button } from '../ui/Button.tsx';
+import Card from '../ui/Card.tsx';
+import AuthClient from '../user/AuthClient.tsx';
+import H2 from './H2.tsx';
+import Input from './Input.tsx';
+
+export type SessionUser = {
+  id?: string | null;
+  name?: string | null;
+  username?: string | null;
+};
+
+export const UserView = view<User>()({
+  id: true,
+  name: true,
+  username: true,
+});
+
+const UserNameForm = ({ user }: { user: SessionUser }) => {
+  const fate = useFateClient();
+  const [name, setName] = useState(user.name ?? '');
+  const [error, setError] = useState<string | null>(null);
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setError(null);
+    setName(event.target.value);
+  };
+
+  const [, submitAction, isPending] = useActionState(async () => {
+    const id = user?.id;
+    if (!id) {
+      return;
+    }
+
+    const newName = name.trim();
+    setName(newName);
+
+    if (newName === user.name) {
+      setError(null);
+      return;
+    }
+
+    try {
+      setError(null);
+      await fate.mutations.user.update({
+        input: { name: newName },
+        optimistic: {
+          id,
+          username: newName,
+        },
+        view: UserView,
+      });
+      await AuthClient.updateUser({ name });
+    } catch (error) {
+      setError(
+        (error instanceof Error &&
+          error.message &&
+          safeParse<Array<{ message: string }>>(error.message)?.[0]?.message) ||
+          'Failed to update user name.',
+      );
+    }
+  }, null);
+
+  const trimmedName = name.trim();
+  const originalName = user.name ?? '';
+  const isSaveDisabled = !user.id || !trimmedName || trimmedName === originalName || isPending;
+
+  return (
+    <div>
+      <VStack action={submitAction} as="form" gap={12}>
+        <h3 className="font-semibold">
+          <fbt desc="Headline for update name section">Update Name</fbt>
+        </h3>
+        <label className="sr-only" htmlFor="header-username">
+          <fbt desc="Username label">Username</fbt>
+        </label>
+        <Input
+          aria-describedby={error ? 'header-username-error' : undefined}
+          aria-invalid={error ? 'true' : undefined}
+          className="w-48"
+          disabled={isPending}
+          id="header-username"
+          name="name"
+          onChange={handleChange}
+          placeholder={fbs('name', 'name input field placeholder')}
+          title={error ?? undefined}
+          value={name}
+        />
+        <div>
+          <Button disabled={isSaveDisabled} size="sm" type="submit" variant="secondary">
+            <fbt desc="Button for saving">Save</fbt>
+          </Button>
+        </div>
+      </VStack>
+      {error ? <span id="header-username-error">{error}</span> : null}
+    </div>
+  );
+};
+
+export default function UserCard({ user: userRef }: { user: ViewRef<'User'> }) {
+  const user = useView(UserView, userRef);
+
+  return (
+    <Card>
+      <VStack between className="h-full" gap={16}>
+        <VStack gap={16}>
+          <H2>
+            <fbt desc="Your account headline">Your account</fbt>
+          </H2>
+          <Stack alignCenter between gap={16}>
+            <p className="text-sm text-muted-foreground">
+              <fbt desc="Signed in text">
+                Signed in as <fbt:param name="username">{user.name}</fbt:param>.
+              </fbt>
+            </p>
+          </Stack>
+        </VStack>
+        <UserNameForm user={user} />
+      </VStack>
+    </Card>
+  );
+}

package/templates/fate/drizzle/client/src/user/AuthClient.tsx

@@ -0,0 +1,6 @@
+import { createAuthClient } from 'better-auth/react';
+import env from '../lib/env.tsx';
+
+export default createAuthClient({
+  baseURL: env('SERVER_URL'),
+});