@alfredmouelle/create-stack 0.1.0

package/_stack/apps/next-base/src/components/ui/popover.tsx

@@ -0,0 +1,76 @@
+'use client'
+
+import { Popover as PopoverPrimitive } from 'radix-ui'
+import type * as React from 'react'
+
+import { cn } from '~/lib/utils'
+
+function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        align={align}
+        className={cn(
+          'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:fade-in-0 data-open:zoom-in-95 data-closed:fade-out-0 data-closed:zoom-out-95 z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-4 rounded-3xl bg-popover p-4 text-popover-foreground text-sm shadow-lg outline-hidden ring-1 ring-foreground/5 duration-100 data-closed:animate-out data-open:animate-in dark:ring-foreground/10',
+          className,
+        )}
+        data-slot="popover-content"
+        sideOffset={sideOffset}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn('flex flex-col gap-1 text-sm', className)}
+      data-slot="popover-header"
+      {...props}
+    />
+  )
+}
+
+function PopoverTitle({ className, ...props }: React.ComponentProps<'h2'>) {
+  return (
+    <div className={cn('font-medium text-base', className)} data-slot="popover-title" {...props} />
+  )
+}
+
+function PopoverDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      className={cn('text-muted-foreground', className)}
+      data-slot="popover-description"
+      {...props}
+    />
+  )
+}
+
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+}

package/_stack/apps/next-base/src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from '~/lib/utils'
+
+function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn('animate-pulse rounded-2xl bg-muted', className)}
+      data-slot="skeleton"
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/_stack/apps/next-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/next-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/next-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/next-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/next-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/next-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/next-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/next-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/next-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/next-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/next-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>
+  )
+}