@alfredmouelle/create-stack 0.1.0

package/_stack/apps/next-base/src/app/auth/_components/sign-up-form.tsx

@@ -0,0 +1,139 @@
+'use client'
+
+import { valibotResolver } from '@hookform/resolvers/valibot'
+import { Lock, Mail, User } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { Button } from '~/components/ui/button'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '~/components/ui/form'
+import { InputGroup, InputGroupAddon, InputGroupInput } from '~/components/ui/input-group'
+import { Spinner } from '~/components/ui/spinner'
+import { FormAlert } from '~/features/auth/form-alert'
+import { AuthDivider, GoogleButton } from '~/features/auth/google-button'
+import { type SignUpInput, SignUpSchema } from '~/features/auth/schemas'
+import { authClient } from '~/server/better-auth/client'
+
+export function SignUpForm() {
+  const router = useRouter()
+  const [formError, setFormError] = useState<string | null>(null)
+  const form = useForm<SignUpInput>({
+    resolver: valibotResolver(SignUpSchema),
+    defaultValues: { name: '', email: '', password: '' },
+  })
+
+  const onSubmit = form.handleSubmit(async (values) => {
+    setFormError(null)
+    const { error } = await authClient.signUp.email({
+      name: values.name,
+      email: values.email,
+      password: values.password,
+      callbackURL: '/',
+    })
+
+    if (!error) {
+      router.push(`/auth/verify-email?email=${encodeURIComponent(values.email)}`)
+      return
+    }
+
+    setFormError(
+      error.code === 'USER_ALREADY_EXISTS'
+        ? 'An account already exists with this email.'
+        : (error.message ?? 'Could not sign up. Try again.'),
+    )
+  })
+
+  return (
+    <Form {...form}>
+      <form className="grid gap-4" onSubmit={onSubmit}>
+        <GoogleButton label="Sign up with Google" />
+        <AuthDivider />
+
+        {formError ? <FormAlert>{formError}</FormAlert> : null}
+
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Name</FormLabel>
+              <InputGroup className="h-10">
+                <InputGroupAddon align="inline-start">
+                  <User />
+                </InputGroupAddon>
+                <FormControl>
+                  <InputGroupInput autoComplete="name" placeholder="Your name" {...field} />
+                </FormControl>
+              </InputGroup>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <InputGroup className="h-10">
+                <InputGroupAddon align="inline-start">
+                  <Mail />
+                </InputGroupAddon>
+                <FormControl>
+                  <InputGroupInput
+                    autoComplete="email"
+                    placeholder="you@example.com"
+                    type="email"
+                    {...field}
+                  />
+                </FormControl>
+              </InputGroup>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="password"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Password</FormLabel>
+              <InputGroup className="h-10">
+                <InputGroupAddon align="inline-start">
+                  <Lock />
+                </InputGroupAddon>
+                <FormControl>
+                  <InputGroupInput
+                    autoComplete="new-password"
+                    placeholder="At least 8 characters"
+                    type="password"
+                    {...field}
+                  />
+                </FormControl>
+              </InputGroup>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <Button
+          className="w-full cursor-pointer"
+          disabled={form.formState.isSubmitting}
+          type="submit"
+        >
+          {form.formState.isSubmitting ? <Spinner /> : null}
+          {form.formState.isSubmitting ? 'Creating…' : 'Create account'}
+        </Button>
+      </form>
+    </Form>
+  )
+}

package/_stack/apps/next-base/src/app/auth/_components/verify-email-actions.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { useState } from 'react'
+import { Button } from '~/components/ui/button'
+import { Spinner } from '~/components/ui/spinner'
+import { FormAlert } from '~/features/auth/form-alert'
+import { authClient } from '~/server/better-auth/client'
+
+export function VerifyEmailActions({ email }: { email?: string }) {
+  const [status, setStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle')
+
+  const resend = async () => {
+    if (!email) return
+    setStatus('sending')
+    const { error } = await authClient.sendVerificationEmail({ email, callbackURL: '/' })
+    setStatus(error ? 'error' : 'sent')
+  }
+
+  return (
+    <div className="grid gap-4">
+      {status === 'sent' ? (
+        <FormAlert variant="success">
+          Request sent. If your address isn't confirmed yet, you'll get an email — check your spam
+          folder.
+        </FormAlert>
+      ) : null}
+      {status === 'error' ? <FormAlert>Could not send. Try again shortly.</FormAlert> : null}
+
+      <p className="text-muted-foreground text-sm">
+        Didn't get anything? Check your spam folder or resend the link.
+      </p>
+
+      <Button
+        className="w-full cursor-pointer"
+        disabled={!email || status === 'sending'}
+        onClick={resend}
+        type="button"
+        variant="outline"
+      >
+        {status === 'sending' ? <Spinner /> : null}
+        {status === 'sending' ? 'Sending…' : 'Resend link'}
+      </Button>
+    </div>
+  )
+}

package/_stack/apps/next-base/src/app/auth/forgot-password/page.tsx

@@ -0,0 +1,19 @@
+import Link from 'next/link'
+import { AuthCard } from '~/features/auth/auth-card'
+import { ForgotPasswordForm } from '../_components/forgot-password-form'
+
+export default function ForgotPasswordPage() {
+  return (
+    <AuthCard
+      description="Enter your email to receive a reset link."
+      footer={
+        <Link className="text-foreground hover:underline" href="/auth/sign-in">
+          Back to sign in
+        </Link>
+      }
+      title="Forgot password"
+    >
+      <ForgotPasswordForm />
+    </AuthCard>
+  )
+}

package/_stack/apps/next-base/src/app/auth/layout.tsx

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react'
+
+export default function AuthLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex min-h-svh flex-col items-center justify-center gap-8 bg-gradient-to-b from-background to-muted/50 px-4 py-10">
+      <div className="w-full max-w-sm">{children}</div>
+    </div>
+  )
+}

package/_stack/apps/next-base/src/app/auth/reset-password/page.tsx

@@ -0,0 +1,26 @@
+import Link from 'next/link'
+import { AuthCard } from '~/features/auth/auth-card'
+import { ResetPasswordForm } from '../_components/reset-password-form'
+
+export default async function ResetPasswordPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ token?: string; error?: string }>
+}) {
+  const { token, error } = await searchParams
+  const validToken = token && error !== 'INVALID_TOKEN' ? token : undefined
+
+  return (
+    <AuthCard
+      description="Choose a new password for your account."
+      footer={
+        <Link className="text-foreground hover:underline" href="/auth/forgot-password">
+          Request a new link
+        </Link>
+      }
+      title="New password"
+    >
+      <ResetPasswordForm token={validToken} />
+    </AuthCard>
+  )
+}

package/_stack/apps/next-base/src/app/auth/sign-in/page.tsx

@@ -0,0 +1,27 @@
+import Link from 'next/link'
+import { redirect } from 'next/navigation'
+import { AuthCard } from '~/features/auth/auth-card'
+import { getSession } from '~/server/better-auth/server'
+import { SignInForm } from '../_components/sign-in-form'
+
+export default async function SignInPage() {
+  const session = await getSession()
+  if (session) redirect('/')
+
+  return (
+    <AuthCard
+      description="Sign in to your account."
+      footer={
+        <>
+          No account yet?{' '}
+          <Link className="ml-1 text-foreground hover:underline" href="/auth/sign-up">
+            Create an account
+          </Link>
+        </>
+      }
+      title="Sign in"
+    >
+      <SignInForm />
+    </AuthCard>
+  )
+}

package/_stack/apps/next-base/src/app/auth/sign-up/page.tsx

@@ -0,0 +1,27 @@
+import Link from 'next/link'
+import { redirect } from 'next/navigation'
+import { AuthCard } from '~/features/auth/auth-card'
+import { getSession } from '~/server/better-auth/server'
+import { SignUpForm } from '../_components/sign-up-form'
+
+export default async function SignUpPage() {
+  const session = await getSession()
+  if (session) redirect('/')
+
+  return (
+    <AuthCard
+      description="Create your account."
+      footer={
+        <>
+          Already have an account?{' '}
+          <Link className="ml-1 text-foreground hover:underline" href="/auth/sign-in">
+            Sign in
+          </Link>
+        </>
+      }
+      title="Create an account"
+    >
+      <SignUpForm />
+    </AuthCard>
+  )
+}

package/_stack/apps/next-base/src/app/auth/verify-email/page.tsx

@@ -0,0 +1,30 @@
+import Link from 'next/link'
+import { AuthCard } from '~/features/auth/auth-card'
+import { VerifyEmailActions } from '../_components/verify-email-actions'
+
+export default async function VerifyEmailPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ email?: string }>
+}) {
+  const { email } = await searchParams
+
+  return (
+    <AuthCard
+      description={
+        <>
+          A confirmation link was sent{email ? ` to ${email}` : ''}. Click it to activate your
+          account.
+        </>
+      }
+      footer={
+        <Link className="text-foreground hover:underline" href="/auth/sign-in">
+          Back to sign in
+        </Link>
+      }
+      title="Confirm your email"
+    >
+      <VerifyEmailActions email={email} />
+    </AuthCard>
+  )
+}

package/_stack/apps/next-base/src/app/dashboard/page.tsx

@@ -0,0 +1,12 @@
+import { requireAuth } from '~/server/auth/guards'
+
+export default async function DashboardPage() {
+  await requireAuth()
+
+  return (
+    <main className="p-8">
+      <h1 className="font-heading font-medium text-2xl">Dashboard</h1>
+      <p className="mt-2 text-muted-foreground">Protected route.</p>
+    </main>
+  )
+}

package/_stack/apps/next-base/src/app/globals.css

@@ -0,0 +1,171 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "@fontsource-variable/geist";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.511 0.096 186.391);
+  --primary-foreground: oklch(0.984 0.014 180.72);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.45rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.6 0.118 184.704);
+  --sidebar-primary-foreground: oklch(0.984 0.014 180.72);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.437 0.078 188.216);
+  --primary-foreground: oklch(0.984 0.014 180.72);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.704 0.14 182.503);
+  --sidebar-primary-foreground: oklch(0.277 0.046 192.524);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@theme inline {
+  --font-sans: "Geist Variable", sans-serif;
+  --font-heading: var(--font-sans);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}
+
+@layer utilities {
+  .scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: var(--border) transparent;
+  }
+  .scrollbar::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  .scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .scrollbar::-webkit-scrollbar-thumb {
+    background-color: var(--border);
+    border-radius: var(--radius-3xl);
+  }
+  .scrollbar:hover::-webkit-scrollbar-thumb {
+    background-color: var(--muted-foreground);
+  }
+
+  .scrollbar-padded-x::-webkit-scrollbar {
+    width: 16px;
+  }
+  .scrollbar-padded-x::-webkit-scrollbar-thumb {
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    background-clip: padding-box;
+  }
+
+  .scrollbar-padded-y::-webkit-scrollbar {
+    height: 16px;
+  }
+  .scrollbar-padded-y::-webkit-scrollbar-thumb {
+    border-top: 4px solid transparent;
+    border-bottom: 4px solid transparent;
+    background-clip: padding-box;
+  }
+}

package/_stack/apps/next-base/src/app/layout.tsx

@@ -0,0 +1,23 @@
+import type { Metadata } from 'next'
+import type { ReactNode } from 'react'
+import { ThemeProvider } from '~/components/theme-provider'
+import { TRPCReactProvider } from '~/trpc/react'
+import './globals.css'
+
+export const metadata: Metadata = {
+  title: 'App',
+  description: 'Next.js base.',
+  authors: [{ name: 'Alfred MOUELLE', url: 'https://alfredmouelle.com' }],
+}
+
+export default function RootLayout({ children }: Readonly<{ children: ReactNode }>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body>
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          <TRPCReactProvider>{children}</TRPCReactProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}

package/_stack/apps/next-base/src/app/page.tsx

@@ -0,0 +1,15 @@
+import { ThemeToggle } from '~/components/theme-toggle'
+
+export default function Home() {
+  return (
+    <main className="p-8">
+      <div className="flex items-center justify-between">
+        <h1 className="font-bold text-4xl">Base</h1>
+        <ThemeToggle />
+      </div>
+      <p className="mt-4 text-lg">
+        Next.js base. Add tools with <code>add-capability</code>.
+      </p>
+    </main>
+  )
+}

package/_stack/apps/next-base/src/components/data-table.tsx

@@ -0,0 +1,77 @@
+import { flexRender, type Table as ReactTable } from '@tanstack/react-table'
+import { Skeleton } from '~/components/ui/skeleton'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '~/components/ui/table'
+
+interface DataTableProps<TData> {
+  table: ReactTable<TData>
+  columnCount: number
+  isLoading: boolean
+  emptyLabel: string
+  skeletonRows?: number
+}
+
+export function DataTable<TData>({
+  table,
+  columnCount,
+  isLoading,
+  emptyLabel,
+  skeletonRows = 3,
+}: DataTableProps<TData>) {
+  const rows = table.getRowModel().rows
+
+  return (
+    <div className="overflow-hidden rounded-lg border">
+      <Table>
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(header.column.columnDef.header, header.getContext())}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {isLoading ? (
+            Array.from({ length: skeletonRows }, (_, rowIndex) => (
+              <TableRow key={rowIndex}>
+                {Array.from({ length: columnCount }, (_, cellIndex) => (
+                  <TableCell key={cellIndex}>
+                    <Skeleton className="h-6 w-full" />
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : rows.length === 0 ? (
+            <TableRow>
+              <TableCell className="h-24 text-center text-muted-foreground" colSpan={columnCount}>
+                {emptyLabel}
+              </TableCell>
+            </TableRow>
+          ) : (
+            rows.map((row) => (
+              <TableRow className="group" key={row.id}>
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}