@alfredmouelle/create-stack 0.1.0

package/_stack/apps/tanstack-base/src/components/ui/spinner.tsx

@@ -0,0 +1,8 @@
+import { Loader2 } from 'lucide-react'
+import type { ComponentProps } from 'react'
+import { cn } from '~/lib/utils'
+
+/** Loading indicator — the lucide `loader` icon, spinning. */
+export function Spinner({ className, ...props }: ComponentProps<typeof Loader2>) {
+  return <Loader2 aria-hidden="true" className={cn('size-4 animate-spin', className)} {...props} />
+}

package/_stack/apps/tanstack-base/src/components/ui/table.tsx

@@ -0,0 +1,87 @@
+import type * as React from 'react'
+
+import { cn } from '~/lib/utils'
+
+function Table({ className, ...props }: React.ComponentProps<'table'>) {
+  return (
+    <div className="relative w-full overflow-x-auto" data-slot="table-container">
+      <table
+        className={cn('w-full caption-bottom text-sm', className)}
+        data-slot="table"
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
+  return <thead className={cn('[&_tr]:border-b', className)} data-slot="table-header" {...props} />
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
+  return (
+    <tbody
+      className={cn('[&_tr:last-child]:border-0', className)}
+      data-slot="table-body"
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
+  return (
+    <tfoot
+      className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
+      data-slot="table-footer"
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
+  return (
+    <tr
+      className={cn(
+        'border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted',
+        className,
+      )}
+      data-slot="table-row"
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
+  return (
+    <th
+      className={cn(
+        'h-12 whitespace-nowrap px-3 text-left align-middle font-medium text-foreground [&:has([role=checkbox])]:pr-0',
+        className,
+      )}
+      data-slot="table-head"
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
+  return (
+    <td
+      className={cn('whitespace-nowrap p-3 align-middle [&:has([role=checkbox])]:pr-0', className)}
+      data-slot="table-cell"
+      {...props}
+    />
+  )
+}
+
+function TableCaption({ className, ...props }: React.ComponentProps<'caption'>) {
+  return (
+    <caption
+      className={cn('mt-4 text-muted-foreground text-sm', className)}
+      data-slot="table-caption"
+      {...props}
+    />
+  )
+}
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow }

package/_stack/apps/tanstack-base/src/emails/components/components.tsx

@@ -0,0 +1,199 @@
+import { Body, Container, Head, Html, Link, Preview, Section, Tailwind, Text } from 'react-email'
+import { EmailThemeProvider, useEmailTheme } from './context'
+import { createEmailTheme, type EmailTheme, type EmailThemeOverride } from './theme'
+
+export interface EmailLayoutProps {
+  preview: string
+  children: React.ReactNode
+  /** Per-email theme override, merged onto the default theme. */
+  theme?: EmailTheme | EmailThemeOverride
+  /** Footer year. Pass explicitly to keep rendered output deterministic. */
+  year?: number
+}
+
+function resolveTheme(theme: EmailLayoutProps['theme']): EmailTheme {
+  if (!theme) return createEmailTheme()
+  if ('colors' in theme && 'brand' in theme && 'fontFamily' in theme) {
+    return theme as EmailTheme
+  }
+  return createEmailTheme(theme as EmailThemeOverride)
+}
+
+export function EmailLayout({ preview, children, theme, year }: EmailLayoutProps) {
+  const resolved = resolveTheme(theme)
+  const { colors, brand, fontFamily } = resolved
+  const footerYear = year ?? new Date().getFullYear()
+
+  return (
+    <EmailThemeProvider theme={resolved}>
+      <Html lang="en">
+        <Head />
+        <Preview>{preview}</Preview>
+        <Tailwind>
+          <Body style={{ backgroundColor: colors.pageBg, fontFamily, margin: 0, padding: 0 }}>
+            <Container
+              style={{
+                backgroundColor: colors.cardBg,
+                border: `1px solid ${colors.border}`,
+                borderRadius: 16,
+                margin: '40px auto',
+                maxWidth: 520,
+                padding: 0,
+              }}
+            >
+              <Section
+                style={{ borderBottom: `1px solid ${colors.borderSubtle}`, padding: '20px 36px' }}
+              >
+                <Text
+                  style={{
+                    color: colors.fgStrong,
+                    fontSize: 14,
+                    fontWeight: 700,
+                    letterSpacing: '0.3em',
+                    margin: 0,
+                  }}
+                >
+                  {brand.name}
+                </Text>
+              </Section>
+
+              <Section style={{ padding: '32px 36px 28px' }}>{children}</Section>
+
+              <Section
+                style={{ borderTop: `1px solid ${colors.borderSubtle}`, padding: '20px 36px 24px' }}
+              >
+                <Text style={{ color: colors.fgFaint, fontSize: 11, margin: 0 }}>
+                  © {footerYear} {brand.footer}
+                </Text>
+              </Section>
+            </Container>
+          </Body>
+        </Tailwind>
+      </Html>
+    </EmailThemeProvider>
+  )
+}
+
+export interface EmailHeadingProps {
+  children: React.ReactNode
+  kicker?: string
+}
+
+export function EmailHeading({ children, kicker }: EmailHeadingProps) {
+  const { colors } = useEmailTheme()
+  return (
+    <>
+      {kicker && (
+        <Text
+          style={{
+            color: colors.fgMuted,
+            fontSize: 11,
+            fontWeight: 500,
+            letterSpacing: '0.18em',
+            margin: '0 0 12px',
+            textTransform: 'uppercase',
+          }}
+        >
+          {kicker}
+        </Text>
+      )}
+      <Text
+        style={{
+          color: colors.fgStrong,
+          fontSize: 26,
+          fontWeight: 600,
+          letterSpacing: '-0.02em',
+          lineHeight: '1.15',
+          margin: 0,
+        }}
+      >
+        {children}
+      </Text>
+    </>
+  )
+}
+
+export interface EmailBodyTextProps {
+  children: React.ReactNode
+  muted?: boolean
+  size?: 'sm' | 'base'
+  style?: React.CSSProperties
+}
+
+export function EmailBodyText({ children, muted, size = 'base', style }: EmailBodyTextProps) {
+  const { colors } = useEmailTheme()
+  return (
+    <Text
+      style={{
+        color: muted ? colors.fgMuted : colors.fg,
+        fontSize: size === 'sm' ? 14 : 15,
+        lineHeight: size === 'sm' ? '22px' : '24px',
+        margin: '14px 0 0',
+        ...style,
+      }}
+    >
+      {children}
+    </Text>
+  )
+}
+
+export interface EmailButtonProps {
+  href: string
+  children: React.ReactNode
+  variant?: 'primary' | 'destructive'
+}
+
+export function EmailButton({ href, children, variant = 'primary' }: EmailButtonProps) {
+  const { colors } = useEmailTheme()
+  const backgroundColor = variant === 'destructive' ? colors.destructive : colors.fgStrong
+
+  return (
+    <Section style={{ margin: '28px 0 0' }}>
+      <Link
+        href={href}
+        style={{
+          backgroundColor,
+          borderRadius: 10,
+          color: colors.onAccent,
+          display: 'inline-block',
+          fontSize: 14,
+          fontWeight: 500,
+          padding: '12px 24px',
+          textDecoration: 'none',
+        }}
+      >
+        {children}
+      </Link>
+    </Section>
+  )
+}
+
+export interface EmailFallbackProps {
+  url: string
+  label?: string
+}
+
+export function EmailFallback({
+  url,
+  label = 'If the button does not work, copy this link:',
+}: EmailFallbackProps) {
+  const { colors } = useEmailTheme()
+  return (
+    <Section style={{ margin: '32px 0 0' }}>
+      <Text style={{ color: colors.fgMuted, fontSize: 12, margin: '0 0 6px' }}>{label}</Text>
+      <Link
+        href={url}
+        style={{
+          color: colors.fg,
+          fontSize: 12,
+          overflowWrap: 'anywhere',
+          textDecoration: 'underline',
+          textUnderlineOffset: 2,
+          wordBreak: 'break-all',
+        }}
+      >
+        {url}
+      </Link>
+    </Section>
+  )
+}

package/_stack/apps/tanstack-base/src/emails/components/context.tsx

@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react'
+import { defaultTheme, type EmailTheme } from './theme'
+
+const EmailThemeContext = createContext<EmailTheme>(defaultTheme)
+
+export interface EmailThemeProviderProps {
+  theme: EmailTheme
+  children: React.ReactNode
+}
+
+export function EmailThemeProvider({ theme, children }: EmailThemeProviderProps) {
+  return <EmailThemeContext.Provider value={theme}>{children}</EmailThemeContext.Provider>
+}
+
+/** Read the active email theme. Falls back to {@link defaultTheme}. */
+export function useEmailTheme(): EmailTheme {
+  return useContext(EmailThemeContext)
+}

package/_stack/apps/tanstack-base/src/emails/components/index.ts

@@ -0,0 +1,23 @@
+export {
+  EmailBodyText,
+  type EmailBodyTextProps,
+  EmailButton,
+  type EmailButtonProps,
+  EmailFallback,
+  type EmailFallbackProps,
+  EmailHeading,
+  type EmailHeadingProps,
+  EmailLayout,
+  type EmailLayoutProps,
+} from './components'
+export {
+  EmailThemeProvider,
+  type EmailThemeProviderProps,
+  useEmailTheme,
+} from './context'
+export {
+  createEmailTheme,
+  defaultTheme,
+  type EmailTheme,
+  type EmailThemeOverride,
+} from './theme'

package/_stack/apps/tanstack-base/src/emails/components/theme.ts

@@ -0,0 +1,65 @@
+/**
+ * The swappable design tokens for emails. Override any subset via
+ * {@link createEmailTheme} and pass the result to `<EmailLayout theme={...}>`,
+ * or wrap a tree in `<EmailThemeProvider>`.
+ */
+export interface EmailTheme {
+  brand: {
+    /** Shown in the header band and footer. */
+    name: string
+    /** Footer line (the year is prefixed automatically). */
+    footer: string
+  }
+  fontFamily: string
+  colors: {
+    pageBg: string
+    cardBg: string
+    fg: string
+    fgStrong: string
+    fgMuted: string
+    fgFaint: string
+    border: string
+    borderSubtle: string
+    destructive: string
+    /** Text color on top of accent/destructive buttons. */
+    onAccent: string
+  }
+}
+
+export const defaultTheme: EmailTheme = {
+  brand: {
+    name: 'ACME',
+    footer: 'ACME · All rights reserved.',
+  },
+  fontFamily: "Geist, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  colors: {
+    pageBg: '#f4f4f5',
+    cardBg: '#ffffff',
+    fg: '#18181b',
+    fgStrong: '#09090b',
+    fgMuted: '#71717a',
+    fgFaint: '#a1a1aa',
+    border: '#e4e4e7',
+    borderSubtle: '#f4f4f5',
+    destructive: '#dc2626',
+    onAccent: '#ffffff',
+  },
+}
+
+export type EmailThemeOverride = {
+  brand?: Partial<EmailTheme['brand']>
+  fontFamily?: string
+  colors?: Partial<EmailTheme['colors']>
+}
+
+/** Deep-merge an override onto a base theme (defaults to {@link defaultTheme}). */
+export function createEmailTheme(
+  override: EmailThemeOverride = {},
+  base: EmailTheme = defaultTheme,
+): EmailTheme {
+  return {
+    brand: { ...base.brand, ...override.brand },
+    fontFamily: override.fontFamily ?? base.fontFamily,
+    colors: { ...base.colors, ...override.colors },
+  }
+}

package/_stack/apps/tanstack-base/src/emails/reset-password.tsx

@@ -0,0 +1,16 @@
+import { EmailBodyText, EmailButton, EmailHeading, EmailLayout } from '~/emails/components'
+
+export function ResetPasswordEmail({ name, url }: { name?: string; url: string }) {
+  return (
+    <EmailLayout preview="Reset your password">
+      <EmailHeading>Reset your password</EmailHeading>
+      <EmailBodyText>
+        {name ? `Hi ${name}, ` : ''}we received a request to reset your password. This link expires
+        soon.
+      </EmailBodyText>
+      <EmailButton href={url}>Reset password</EmailButton>
+    </EmailLayout>
+  )
+}
+
+export default ResetPasswordEmail

package/_stack/apps/tanstack-base/src/emails/verify-email.tsx

@@ -0,0 +1,15 @@
+import { EmailBodyText, EmailButton, EmailHeading, EmailLayout } from '~/emails/components'
+
+export function VerifyEmail({ name, url }: { name?: string; url: string }) {
+  return (
+    <EmailLayout preview="Confirm your email address">
+      <EmailHeading>Confirm your email address</EmailHeading>
+      <EmailBodyText>
+        {name ? `Hi ${name}, ` : ''}confirm your email address to finish setting up your account.
+      </EmailBodyText>
+      <EmailButton href={url}>Confirm email</EmailButton>
+    </EmailLayout>
+  )
+}
+
+export default VerifyEmail

package/_stack/apps/tanstack-base/src/env.ts

@@ -0,0 +1,41 @@
+import { createEnv } from '@t3-oss/env-core'
+import * as v from 'valibot'
+
+/** Makes a var required only in production (optional in dev/test). */
+export const requiredInProduction = <T extends v.GenericSchema>(schema: T) =>
+  process.env.NODE_ENV === 'production' ? schema : v.optional(schema)
+
+/**
+ * Typed environment. Start minimal — patterns (drizzle, better-auth, …) and
+ * capabilities (add-capability) extend the `server` block and `runtimeEnv` with
+ * the keys they need.
+ */
+export const env = createEnv({
+  shared: {
+    NODE_ENV: v.optional(v.picklist(['development', 'test', 'production']), 'development'),
+  },
+
+  server: {
+    DATABASE_URL: v.pipe(v.string(), v.url()),
+    BETTER_AUTH_URL: v.pipe(v.string(), v.url()),
+    BETTER_AUTH_SECRET: v.pipe(v.string(), v.minLength(1)),
+    BETTER_AUTH_GOOGLE_CLIENT_ID: v.optional(v.pipe(v.string(), v.minLength(1))),
+    BETTER_AUTH_GOOGLE_CLIENT_SECRET: v.optional(v.pipe(v.string(), v.minLength(1))),
+    EMAIL_FROM: v.optional(v.pipe(v.string(), v.email()), 'no-reply@example.com'),
+    RESEND_API_KEY: v.optional(v.pipe(v.string(), v.minLength(1))),
+  },
+
+  runtimeEnv: {
+    NODE_ENV: process.env.NODE_ENV,
+    DATABASE_URL: process.env.DATABASE_URL,
+    BETTER_AUTH_URL: process.env.BETTER_AUTH_URL,
+    BETTER_AUTH_SECRET: process.env.BETTER_AUTH_SECRET,
+    BETTER_AUTH_GOOGLE_CLIENT_ID: process.env.BETTER_AUTH_GOOGLE_CLIENT_ID,
+    BETTER_AUTH_GOOGLE_CLIENT_SECRET: process.env.BETTER_AUTH_GOOGLE_CLIENT_SECRET,
+    EMAIL_FROM: process.env.EMAIL_FROM,
+    RESEND_API_KEY: process.env.RESEND_API_KEY,
+  },
+
+  skipValidation: !!process.env.SKIP_ENV_VALIDATION,
+  emptyStringAsUndefined: true,
+})

package/_stack/apps/tanstack-base/src/features/auth/auth-card.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '~/components/ui/card'
+
+interface AuthCardProps {
+  title: string
+  description?: ReactNode
+  children: ReactNode
+  footer?: ReactNode
+}
+
+export function AuthCard({ title, description, children, footer }: AuthCardProps) {
+  return (
+    <Card className="gap-0 rounded-2xl border-border/60 py-0 shadow-[0_2px_8px_-2px_var(--color-border),0_12px_32px_-12px_var(--color-border)]">
+      <CardHeader className="px-8 pt-8 pb-0">
+        <CardTitle className="font-semibold text-2xl tracking-tight">{title}</CardTitle>
+        {description ? (
+          <CardDescription className="pt-1 leading-relaxed">{description}</CardDescription>
+        ) : null}
+      </CardHeader>
+
+      <CardContent className="px-8 pt-6 pb-8">{children}</CardContent>
+
+      {footer ? (
+        <div className="border-border/60 border-t px-8 py-5 text-center text-muted-foreground text-sm">
+          {footer}
+        </div>
+      ) : null}
+    </Card>
+  )
+}

package/_stack/apps/tanstack-base/src/features/auth/form-alert.tsx

@@ -0,0 +1,27 @@
+import { CircleAlert, CircleCheck } from 'lucide-react'
+import type { ReactNode } from 'react'
+import { cn } from '~/lib/utils'
+
+interface FormAlertProps {
+  variant?: 'error' | 'success'
+  children: ReactNode
+}
+
+export function FormAlert({ variant = 'error', children }: FormAlertProps) {
+  const Icon = variant === 'success' ? CircleCheck : CircleAlert
+
+  return (
+    <div
+      className={cn(
+        'flex items-start gap-2.5 rounded-lg border px-3.5 py-3 text-sm leading-relaxed',
+        variant === 'error'
+          ? 'border-destructive/20 bg-destructive/8 text-destructive'
+          : 'border-border bg-muted/60 text-foreground',
+      )}
+      role="alert"
+    >
+      <Icon className="mt-0.5 size-4 shrink-0" />
+      <span>{children}</span>
+    </div>
+  )
+}

package/_stack/apps/tanstack-base/src/features/auth/google-button.tsx

@@ -0,0 +1,64 @@
+import { useState } from 'react'
+import { Button } from '~/components/ui/button'
+import { Spinner } from '~/components/ui/spinner'
+import { authClient } from '~/server/better-auth/client'
+
+function GoogleIcon() {
+  return (
+    <svg aria-hidden="true" className="size-4" viewBox="0 0 24 24">
+      <path
+        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+        fill="#4285F4"
+      />
+      <path
+        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+        fill="#34A853"
+      />
+      <path
+        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+        fill="#FBBC05"
+      />
+      <path
+        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+        fill="#EA4335"
+      />
+    </svg>
+  )
+}
+
+export function GoogleButton({
+  label,
+  callbackURL = '/',
+}: {
+  label: string
+  callbackURL?: string
+}) {
+  const [loading, setLoading] = useState(false)
+
+  return (
+    <Button
+      className="w-full cursor-pointer"
+      disabled={loading}
+      onClick={async () => {
+        setLoading(true)
+        await authClient.signIn.social({ provider: 'google', callbackURL })
+        setLoading(false)
+      }}
+      type="button"
+      variant="outline"
+    >
+      {loading ? <Spinner /> : <GoogleIcon />}
+      {label}
+    </Button>
+  )
+}
+
+export function AuthDivider() {
+  return (
+    <div className="flex items-center gap-3 text-muted-foreground text-xs">
+      <span className="h-px flex-1 bg-border" />
+      or
+      <span className="h-px flex-1 bg-border" />
+    </div>
+  )
+}

package/_stack/apps/tanstack-base/src/features/auth/schemas.ts

@@ -0,0 +1,35 @@
+import * as v from 'valibot'
+
+export const SignInSchema = v.object({
+  email: v.pipe(v.string(), v.nonEmpty('Email is required'), v.email('Invalid email address')),
+  password: v.pipe(v.string(), v.nonEmpty('Password is required')),
+})
+
+export const SignUpSchema = v.object({
+  name: v.pipe(v.string(), v.nonEmpty('Name is required')),
+  email: v.pipe(v.string(), v.nonEmpty('Email is required'), v.email('Invalid email address')),
+  password: v.pipe(v.string(), v.minLength(8, 'At least 8 characters')),
+})
+
+export const ForgotPasswordSchema = v.object({
+  email: v.pipe(v.string(), v.nonEmpty('Email is required'), v.email('Invalid email address')),
+})
+
+export const ResetPasswordSchema = v.pipe(
+  v.object({
+    password: v.pipe(v.string(), v.minLength(8, 'At least 8 characters')),
+    confirmPassword: v.pipe(v.string(), v.nonEmpty('Confirmation is required')),
+  }),
+  v.forward(
+    v.check(
+      ({ password, confirmPassword }) => password === confirmPassword,
+      'Passwords do not match',
+    ),
+    ['confirmPassword'],
+  ),
+)
+
+export type SignInInput = v.InferInput<typeof SignInSchema>
+export type SignUpInput = v.InferInput<typeof SignUpSchema>
+export type ForgotPasswordInput = v.InferInput<typeof ForgotPasswordSchema>
+export type ResetPasswordInput = v.InferInput<typeof ResetPasswordSchema>

package/_stack/apps/tanstack-base/src/lib/date.ts

@@ -0,0 +1,4 @@
+import { format } from 'date-fns'
+
+/** Format a Date as an ISO date string (yyyy-MM-dd). */
+export const toISODate = (date: Date): string => format(date, 'yyyy-MM-dd')

package/_stack/apps/tanstack-base/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}