npm - @newt-app/templates - Versions diffs - 0.2.0 → 0.2.1 - Mend

@newt-app/templates 0.2.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/dist/index.js +420 -0
package/package.json +1 -1

package/dist/index.js CHANGED Viewed

@@ -1909,6 +1909,422 @@ export function Logo({ className }: LogoProps) {
 }`
 };
+// src/shadcn-ui/templates/layout.ts
+var layout_default2 = {
+  filename: "apps/web/app/layout.tsx",
+  template: `import type { Metadata } from "next";
+import localFont from "next/font/local";
+import Providers from "@/app/providers";
+import "@<%= projectName %>/ui/globals.css";
+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+});
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+});
+export const metadata: Metadata = {
+  title: "<%= projectName %>",
+  description: "Next + Nest = Newt",
+  icons: {
+    icon: [
+      { url: "/icon0.svg", type: "image/svg+xml" },
+      { url: "/icon1.png", type: "image/png" },
+    ],
+    apple: "/apple-icon.png",
+  },
+};
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className="dark">
+      <body className={\`\${geistSans.variable} \${geistMono.variable} h-full\`}>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}`
+};
+// src/shadcn-ui/templates/page.ts
+var page_default2 = {
+  filename: "apps/web/app/page.tsx",
+  template: `'use client';
+import { useQuery } from '@tanstack/react-query';
+import { authClient } from '@/lib/auth-client';
+import { AuthForm } from '@/app/auth-form';
+import { Link } from '@<%= projectName %>/ui/link';
+import { Logo } from '@<%= projectName %>/ui/logo';
+import { TodoList } from '@/app/todo-list';
+import { Card, CardContent, CardHeader, CardTitle } from '@<%= projectName %>/ui/card';
+export default function Home() {
+  const { data: session, isPending } = authClient.useSession();
+  const { data: hello } = useQuery({
+    queryKey: ['hello'],
+    queryFn: () => fetch('/api/hello').then((r) => r.json()),
+  });
+  return (
+    <main className="max-w-lg mx-auto min-h-full px-4 py-8 space-y-4">
+      <div className="pb-4 border-b">
+        <p className="font-mono text-xs text-muted-foreground">apps/web/page.tsx</p>
+        <p className="text-sm text-muted-foreground">Delete me to get started!</p>
+      </div>
+      <div className="flex items-center gap-3 py-2">
+        <Logo className="w-10 h-auto text-foreground" />
+        <div>
+          <h1 className="text-4xl font-black tracking-tight"><%= projectName %></h1>
+          <p className="text-sm text-muted-foreground tracking-widest uppercase">
+            Next + Nest = Newt \u{1F49C}
+          </p>
+        </div>
+      </div>
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-xs font-mono uppercase tracking-widest text-muted-foreground">
+            next.js
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="font-mono text-sm">apps/web/layout.tsx</p>
+          <p className="text-sm text-muted-foreground">Next.js rendering</p>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-xs font-mono uppercase tracking-widest text-muted-foreground">
+            nest.js
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="font-mono text-sm">GET /api/hello</p>
+          <pre className="mt-2 rounded-md border p-3 text-sm bg-muted/50">
+            <code>{JSON.stringify(hello, null, 2)}</code>
+          </pre>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-xs font-mono uppercase tracking-widest text-muted-foreground">
+            better-auth
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {isPending ? (
+            <p className="text-sm text-muted-foreground">Loading\u2026</p>
+          ) : session ? (
+            <TodoList session={session} />
+          ) : (
+            <AuthForm />
+          )}
+        </CardContent>
+      </Card>
+      <div className="px-2 py-4 text-sm">
+        <p className="mb-2 text-muted-foreground">Learn more</p>
+        <ul className="list-disc list-inside space-y-2 mt-2">
+          <li>
+            <Link href="https://github.com">GitHub</Link>
+          </li>
+          <li>
+            <Link href="https://nextjs.org">Next.js</Link>
+          </li>
+          <li>
+            <Link href="https://nestjs.com">NestJS</Link>
+          </li>
+        </ul>
+      </div>
+    </main>
+  );
+}`
+};
+// src/shadcn-ui/templates/auth-form.ts
+var auth_form_default2 = {
+  filename: "apps/web/app/auth-form.tsx",
+  template: `'use client';
+import { useForm } from '@tanstack/react-form';
+import { useState } from 'react';
+import { authClient } from '@/lib/auth-client';
+import { Button } from '@<%= projectName %>/ui/button';
+import { Input } from '@<%= projectName %>/ui/input';
+import { Label } from '@<%= projectName %>/ui/label';
+export function AuthForm() {
+  const [tab, setTab] = useState<'signin' | 'signup'>('signup');
+  const [error, setError] = useState('');
+  const form = useForm({
+    defaultValues: { name: '', email: '', password: '' },
+    onSubmit: async ({ value }) => {
+      setError('');
+      if (tab === 'signin') {
+        const { error } = await authClient.signIn.email(value);
+        if (error) setError(error.message ?? 'Sign in failed');
+      } else {
+        const { error } = await authClient.signUp.email(value);
+        if (error) setError(error.message ?? 'Sign up failed');
+      }
+    },
+  });
+  return (
+    <>
+      <div className="flex gap-1 mb-6">
+        <Button
+          type="button"
+          variant={tab === 'signup' ? 'secondary' : 'ghost'}
+          size="sm"
+          onClick={() => setTab('signup')}
+        >
+          Sign up
+        </Button>
+        <Button
+          type="button"
+          variant={tab === 'signin' ? 'secondary' : 'ghost'}
+          size="sm"
+          onClick={() => setTab('signin')}
+        >
+          Sign in
+        </Button>
+      </div>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          form.handleSubmit();
+        }}
+        className="space-y-4"
+      >
+        {tab === 'signup' && (
+          <form.Field name="name">
+            {(field) => (
+              <div className="space-y-1.5">
+                <Label htmlFor="name">Name</Label>
+                <Input
+                  id="name"
+                  type="text"
+                  value={field.state.value}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                  required
+                />
+              </div>
+            )}
+          </form.Field>
+        )}
+        <form.Field name="email">
+          {(field) => (
+            <div className="space-y-1.5">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                value={field.state.value}
+                onChange={(e) => field.handleChange(e.target.value)}
+                required
+              />
+            </div>
+          )}
+        </form.Field>
+        <form.Field name="password">
+          {(field) => (
+            <div className="space-y-1.5">
+              <Label htmlFor="password">Password</Label>
+              <Input
+                id="password"
+                type="password"
+                value={field.state.value}
+                onChange={(e) => field.handleChange(e.target.value)}
+                required
+                minLength={8}
+              />
+            </div>
+          )}
+        </form.Field>
+        {error && <p className="text-sm text-destructive">{error}</p>}
+        <form.Subscribe selector={(s) => s.isSubmitting}>
+          {(isSubmitting) => (
+            <Button type="submit" disabled={isSubmitting} className="w-full">
+              {isSubmitting
+                ? 'Loading\u2026'
+                : tab === 'signin'
+                  ? 'Sign in'
+                  : 'Create account'}
+            </Button>
+          )}
+        </form.Subscribe>
+      </form>
+    </>
+  );
+}`
+};
+// src/shadcn-ui/templates/todo-list.ts
+var todo_list_default2 = {
+  filename: "apps/web/app/todo-list.tsx",
+  template: `'use client';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useForm } from '@tanstack/react-form';
+import { authClient } from '@/lib/auth-client';
+import { Button } from '@<%= projectName %>/ui/button';
+import { Input } from '@<%= projectName %>/ui/input';
+import { Checkbox } from '@<%= projectName %>/ui/checkbox';
+interface Todo {
+  id: number;
+  title: string;
+  done: boolean;
+}
+const api = {
+  getTodos: (): Promise<Todo[]> => fetch('/api/todos').then((r) => r.json()),
+  createTodo: (title: string): Promise<Todo> =>
+    fetch('/api/todos', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ title }),
+    }).then((r) => r.json()),
+  toggleTodo: (id: number): Promise<Todo> =>
+    fetch(\`/api/todos/\${id}/toggle\`, { method: 'PATCH' }).then((r) => r.json()),
+  deleteTodo: (id: number): Promise<void> =>
+    fetch(\`/api/todos/\${id}\`, { method: 'DELETE' }).then(() => undefined),
+};
+export function TodoList({
+  session,
+}: {
+  session: { user: { email: string } };
+}) {
+  const queryClient = useQueryClient();
+  const { data: todos = [], isPending } = useQuery({
+    queryKey: ['todos'],
+    queryFn: api.getTodos,
+  });
+  const createMutation = useMutation({
+    mutationFn: api.createTodo,
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
+  });
+  const toggleMutation = useMutation({
+    mutationFn: api.toggleTodo,
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
+  });
+  const deleteMutation = useMutation({
+    mutationFn: api.deleteTodo,
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
+  });
+  const form = useForm({
+    defaultValues: { title: '' },
+    onSubmit: async ({ value }) => {
+      if (!value.title.trim()) return;
+      createMutation.mutate(value.title.trim());
+      form.reset();
+    },
+  });
+  return (
+    <>
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-semibold">Todos</h1>
+        <div className="flex items-center gap-3 text-sm text-muted-foreground">
+          <span>{session.user.email}</span>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => authClient.signOut()}
+          >
+            Sign out
+          </Button>
+        </div>
+      </div>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          form.handleSubmit();
+        }}
+        className="flex gap-2 mb-6"
+      >
+        <form.Field name="title">
+          {(field) => (
+            <Input
+              value={field.state.value}
+              onChange={(e) => field.handleChange(e.target.value)}
+              placeholder="New todo\u2026"
+              className="flex-1"
+            />
+          )}
+        </form.Field>
+        <form.Subscribe selector={(s) => s.isSubmitting}>
+          {(isSubmitting) => (
+            <Button type="submit" disabled={isSubmitting || createMutation.isPending}>
+              Add
+            </Button>
+          )}
+        </form.Subscribe>
+      </form>
+      {isPending ? (
+        <p className="text-sm text-muted-foreground">Loading\u2026</p>
+      ) : (
+        <ul className="divide-y divide-border">
+          {todos.map((todo) => (
+            <li key={todo.id} className="flex items-center gap-3 py-3">
+              <Checkbox
+                checked={todo.done}
+                onCheckedChange={() => toggleMutation.mutate(todo.id)}
+              />
+              <span
+                className={\`flex-1 text-sm \${todo.done ? 'line-through text-muted-foreground' : ''}\`}
+              >
+                {todo.title}
+              </span>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => deleteMutation.mutate(todo.id)}
+                className="text-muted-foreground hover:text-destructive h-7 w-7 p-0"
+              >
+                \xD7
+              </Button>
+            </li>
+          ))}
+        </ul>
+      )}
+      {!isPending && todos.length === 0 && (
+        <p className="text-sm text-muted-foreground">No todos yet.</p>
+      )}
+    </>
+  );
+}`
+};
 // src/shadcn-ui/templates/accordion.ts
 var accordion_default = {
   filename: "packages/ui/src/components/accordion.tsx",
@@ -7435,6 +7851,10 @@ var shadcnUi = {
     eslint_config_default4,
     link_default2,
     logo_default2,
+    layout_default2,
+    page_default2,
+    auth_form_default2,
+    todo_list_default2,
     accordion_default,
     alert_dialog_default,
     alert_default,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@newt-app/templates",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "private": false,
   "description": "Templates for newt-app",
   "type": "module",