npm - @alfredmouelle/create-stack - Versions diffs - 0.1.0 - Mend

@alfredmouelle/create-stack 0.1.0

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 (206) hide show

package/_stack/apps/tanstack-base/src/router.tsx ADDED Viewed

@@ -0,0 +1,40 @@
+import { createRouter as createTanStackRouter } from '@tanstack/react-router'
+import { setupRouterSsrQueryIntegration } from '@tanstack/react-router-ssr-query'
+import type { ReactNode } from 'react'
+import { ThemeProvider } from './components/theme-provider'
+import { routeTree } from './routeTree.gen'
+import { createQueryClient } from './trpc/query-client'
+import { createServerHelpers, TRPCReactProvider } from './trpc/react'
+export function getRouter() {
+  const queryClient = createQueryClient()
+  const trpc = createServerHelpers(queryClient)
+  const router = createTanStackRouter({
+    routeTree,
+    context: { queryClient, trpc },
+    scrollRestoration: true,
+    defaultPreload: 'intent',
+    defaultPreloadStaleTime: 0,
+    Wrap: (props: { children: ReactNode }) => (
+      <ThemeProvider defaultTheme="system">
+        <TRPCReactProvider queryClient={queryClient}>{props.children}</TRPCReactProvider>
+      </ThemeProvider>
+    ),
+  })
+  setupRouterSsrQueryIntegration({
+    router,
+    queryClient,
+    wrapQueryClient: false,
+  })
+  return router
+}
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: ReturnType<typeof getRouter>
+  }
+}

package/_stack/apps/tanstack-base/src/routes/__root.tsx ADDED Viewed

@@ -0,0 +1,73 @@
+import { TanStackDevtools } from '@tanstack/react-devtools'
+import type { QueryClient } from '@tanstack/react-query'
+import { createRootRouteWithContext, HeadContent, Scripts } from '@tanstack/react-router'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+import type { TRPCOptionsProxy } from '@trpc/tanstack-react-query'
+import type { AppRouter } from '~/server/api/root'
+import TanStackQueryDevtools from '~/trpc/devtools'
+import appCss from '../styles.css?url'
+// Runs before hydration to set the theme class and avoid a flash of wrong theme.
+const themeScript = `(function(){try{var t=localStorage.getItem('theme')||'system';var m=window.matchMedia('(prefers-color-scheme:dark)').matches;document.documentElement.classList.toggle('dark',t==='dark'||(t==='system'&&m));}catch(e){}})();`
+interface RouterContext {
+  queryClient: QueryClient
+  trpc: TRPCOptionsProxy<AppRouter>
+}
+export const Route = createRootRouteWithContext<RouterContext>()({
+  head: () => ({
+    meta: [
+      {
+        charSet: 'utf-8',
+      },
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1',
+      },
+      {
+        name: 'author',
+        content: 'Alfred MOUELLE',
+      },
+      {
+        title: 'App',
+      },
+    ],
+    links: [
+      {
+        rel: 'stylesheet',
+        href: appCss,
+      },
+    ],
+  }),
+  shellComponent: RootDocument,
+})
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        {/** biome-ignore lint/security/noDangerouslySetInnerHtml: anti-FOUC theme script */}
+        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+        <HeadContent />
+      </head>
+      <body>
+        {children}
+        <TanStackDevtools
+          config={{
+            position: 'bottom-right',
+          }}
+          plugins={[
+            {
+              name: 'Tanstack Router',
+              render: <TanStackRouterDevtoolsPanel />,
+            },
+            TanStackQueryDevtools,
+          ]}
+        />
+        <Scripts />
+      </body>
+    </html>
+  )
+}

package/_stack/apps/tanstack-base/src/routes/_authed/dashboard.tsx ADDED Viewed

@@ -0,0 +1,12 @@
+import { createFileRoute } from '@tanstack/react-router'
+export const Route = createFileRoute('/_authed/dashboard')({ component: Dashboard })
+function Dashboard() {
+  return (
+    <div className="p-8">
+      <h1 className="font-heading font-medium text-2xl">Dashboard</h1>
+      <p className="mt-2 text-muted-foreground">Protected route.</p>
+    </div>
+  )
+}

package/_stack/apps/tanstack-base/src/routes/_authed.tsx ADDED Viewed

@@ -0,0 +1,21 @@
+import { createFileRoute, Outlet, redirect } from '@tanstack/react-router'
+import { getServerSession } from '~/server/better-auth/session'
+/**
+ * Layout group guarding every route under it: redirects to sign-in when there's
+ * no session, and exposes the session to child loaders via `beforeLoad`.
+ */
+export const Route = createFileRoute('/_authed')({
+  beforeLoad: async () => {
+    const session = await getServerSession()
+    if (!session) {
+      throw redirect({ to: '/auth/sign-in' })
+    }
+    return { session }
+  },
+  component: AuthedLayout,
+})
+function AuthedLayout() {
+  return <Outlet />
+}

package/_stack/apps/tanstack-base/src/routes/api/auth/$.ts ADDED Viewed

@@ -0,0 +1,14 @@
+// Loads the TanStack Start augmentation that adds `server` to route options.
+import { createFileRoute } from '@tanstack/react-router'
+import type {} from '@tanstack/react-start'
+import { auth } from '~/server/better-auth'
+export const Route = createFileRoute('/api/auth/$')({
+  server: {
+    handlers: {
+      GET: ({ request }) => auth.handler(request),
+      POST: ({ request }) => auth.handler(request),
+    },
+  },
+})

package/_stack/apps/tanstack-base/src/routes/api.trpc.$.tsx ADDED Viewed

@@ -0,0 +1,31 @@
+// Loads the TanStack Start augmentation that adds `server` to route options
+// (so this server route typechecks even without other react-start imports).
+import { createFileRoute } from '@tanstack/react-router'
+import type {} from '@tanstack/react-start'
+import { fetchRequestHandler } from '@trpc/server/adapters/fetch'
+import { appRouter } from '~/server/api/root'
+import { createTRPCContext } from '~/server/api/trpc'
+function handler({ request }: { request: Request }) {
+  return fetchRequestHandler({
+    req: request,
+    router: appRouter,
+    endpoint: '/api/trpc',
+    createContext: () => createTRPCContext({ headers: request.headers }),
+    onError: import.meta.env.DEV
+      ? ({ path, error }) => {
+          console.error(`❌ tRPC failed on ${path ?? '<no-path>'}: ${error.message}`)
+        }
+      : undefined,
+  })
+}
+export const Route = createFileRoute('/api/trpc/$')({
+  server: {
+    handlers: {
+      GET: handler,
+      POST: handler,
+    },
+  },
+})

package/_stack/apps/tanstack-base/src/routes/auth/forgot-password.tsx ADDED Viewed

@@ -0,0 +1,89 @@
+import { useForm } from '@tanstack/react-form'
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { Mail } from 'lucide-react'
+import { useState } from 'react'
+import { TextField } from '~/components/form/text-field'
+import { Button } from '~/components/ui/button'
+import { Spinner } from '~/components/ui/spinner'
+import { AuthCard } from '~/features/auth/auth-card'
+import { FormAlert } from '~/features/auth/form-alert'
+import { ForgotPasswordSchema } from '~/features/auth/schemas'
+import { authClient } from '~/server/better-auth/client'
+export const Route = createFileRoute('/auth/forgot-password')({
+  component: ForgotPassword,
+})
+function ForgotPassword() {
+  const [formError, setFormError] = useState<string | null>(null)
+  const [sent, setSent] = useState(false)
+  const form = useForm({
+    defaultValues: { email: '' },
+    validators: { onBlur: ForgotPasswordSchema },
+    onSubmit: async ({ value }) => {
+      setFormError(null)
+      const { error } = await authClient.requestPasswordReset({
+        email: value.email,
+        redirectTo: '/auth/reset-password',
+      })
+      if (error) {
+        setFormError(error.message ?? 'Could not send. Try again.')
+        return
+      }
+      setSent(true)
+    },
+  })
+  return (
+    <AuthCard
+      description="Enter your email to receive a reset link."
+      footer={
+        <Link className="text-foreground hover:underline" to="/auth/sign-in">
+          Back to sign in
+        </Link>
+      }
+      title="Forgot password"
+    >
+      {sent ? (
+        <FormAlert variant="success">
+          If an account exists for this address, a reset email has just been sent. Check your spam
+          folder.
+        </FormAlert>
+      ) : (
+        <form
+          className="grid gap-4"
+          onSubmit={(e) => {
+            e.preventDefault()
+            form.handleSubmit()
+          }}
+        >
+          {formError ? <FormAlert>{formError}</FormAlert> : null}
+          <form.Field name="email">
+            {(field) => (
+              <TextField
+                autoComplete="email"
+                field={field}
+                icon={<Mail />}
+                label="Email"
+                placeholder="you@example.com"
+                type="email"
+              />
+            )}
+          </form.Field>
+          <form.Subscribe selector={(s) => [s.canSubmit, s.isSubmitting]}>
+            {([canSubmit, isSubmitting]) => (
+              <Button className="w-full cursor-pointer" disabled={!canSubmit} type="submit">
+                {isSubmitting ? <Spinner /> : null}
+                {isSubmitting ? 'Sending…' : 'Send link'}
+              </Button>
+            )}
+          </form.Subscribe>
+        </form>
+      )}
+    </AuthCard>
+  )
+}

package/_stack/apps/tanstack-base/src/routes/auth/reset-password.tsx ADDED Viewed

@@ -0,0 +1,111 @@
+import { useForm } from '@tanstack/react-form'
+import { createFileRoute, Link, useNavigate } from '@tanstack/react-router'
+import { Lock } from 'lucide-react'
+import { useState } from 'react'
+import { TextField } from '~/components/form/text-field'
+import { Button } from '~/components/ui/button'
+import { Spinner } from '~/components/ui/spinner'
+import { AuthCard } from '~/features/auth/auth-card'
+import { FormAlert } from '~/features/auth/form-alert'
+import { ResetPasswordSchema } from '~/features/auth/schemas'
+import { authClient } from '~/server/better-auth/client'
+interface ResetPasswordSearch {
+  token?: string
+  error?: string
+}
+export const Route = createFileRoute('/auth/reset-password')({
+  validateSearch: (search: Record<string, unknown>): ResetPasswordSearch => ({
+    token: typeof search.token === 'string' ? search.token : undefined,
+    error: typeof search.error === 'string' ? search.error : undefined,
+  }),
+  component: ResetPassword,
+})
+function ResetPassword() {
+  const navigate = useNavigate()
+  const { token, error: tokenError } = Route.useSearch()
+  const [formError, setFormError] = useState<string | null>(null)
+  const invalidToken = !token || tokenError === 'INVALID_TOKEN'
+  const form = useForm({
+    defaultValues: { password: '', confirmPassword: '' },
+    validators: { onBlur: ResetPasswordSchema },
+    onSubmit: async ({ value }) => {
+      if (!token) return
+      setFormError(null)
+      const { error } = await authClient.resetPassword({
+        newPassword: value.password,
+        token,
+      })
+      if (error) {
+        setFormError(error.message ?? 'Could not reset password.')
+        return
+      }
+      await navigate({ to: '/auth/sign-in' })
+    },
+  })
+  return (
+    <AuthCard
+      description="Choose a new password for your account."
+      footer={
+        <Link className="text-foreground hover:underline" to="/auth/forgot-password">
+          Request a new link
+        </Link>
+      }
+      title="New password"
+    >
+      {invalidToken ? (
+        <FormAlert>This reset link is invalid or expired. Please request a new one.</FormAlert>
+      ) : (
+        <form
+          className="grid gap-4"
+          onSubmit={(e) => {
+            e.preventDefault()
+            form.handleSubmit()
+          }}
+        >
+          {formError ? <FormAlert>{formError}</FormAlert> : null}
+          <form.Field name="password">
+            {(field) => (
+              <TextField
+                autoComplete="new-password"
+                field={field}
+                icon={<Lock />}
+                label="New password"
+                placeholder="At least 8 characters"
+                type="password"
+              />
+            )}
+          </form.Field>
+          <form.Field name="confirmPassword">
+            {(field) => (
+              <TextField
+                autoComplete="new-password"
+                field={field}
+                icon={<Lock />}
+                label="Confirm password"
+                type="password"
+              />
+            )}
+          </form.Field>
+          <form.Subscribe selector={(s) => [s.canSubmit, s.isSubmitting]}>
+            {([canSubmit, isSubmitting]) => (
+              <Button className="w-full cursor-pointer" disabled={!canSubmit} type="submit">
+                {isSubmitting ? <Spinner /> : null}
+                {isSubmitting ? 'Saving…' : 'Reset password'}
+              </Button>
+            )}
+          </form.Subscribe>
+        </form>
+      )}
+    </AuthCard>
+  )
+}

package/_stack/apps/tanstack-base/src/routes/auth/sign-in.tsx ADDED Viewed

@@ -0,0 +1,117 @@
+import { useForm } from '@tanstack/react-form'
+import { createFileRoute, Link, useNavigate } from '@tanstack/react-router'
+import { Lock, Mail } from 'lucide-react'
+import { useState } from 'react'
+import { TextField } from '~/components/form/text-field'
+import { Button } from '~/components/ui/button'
+import { Spinner } from '~/components/ui/spinner'
+import { AuthCard } from '~/features/auth/auth-card'
+import { FormAlert } from '~/features/auth/form-alert'
+import { AuthDivider, GoogleButton } from '~/features/auth/google-button'
+import { SignInSchema } from '~/features/auth/schemas'
+import { authClient } from '~/server/better-auth/client'
+export const Route = createFileRoute('/auth/sign-in')({ component: SignIn })
+function SignIn() {
+  const navigate = useNavigate()
+  const [formError, setFormError] = useState<string | null>(null)
+  const form = useForm({
+    defaultValues: { email: '', password: '' },
+    validators: { onBlur: SignInSchema },
+    onSubmit: async ({ value }) => {
+      setFormError(null)
+      const { error } = await authClient.signIn.email({
+        email: value.email,
+        password: value.password,
+      })
+      if (!error) {
+        await navigate({ to: '/' })
+        return
+      }
+      if (error.code === 'EMAIL_NOT_VERIFIED') {
+        await navigate({ to: '/auth/verify-email', search: { email: value.email } })
+        return
+      }
+      setFormError(
+        error.code === 'INVALID_EMAIL_OR_PASSWORD'
+          ? 'Incorrect email or password.'
+          : (error.message ?? 'Could not sign in. Try again.'),
+      )
+    },
+  })
+  return (
+    <AuthCard
+      description="Sign in to your account."
+      footer={
+        <>
+          No account yet?{' '}
+          <Link className="ml-1 text-foreground hover:underline" to="/auth/sign-up">
+            Create an account
+          </Link>
+        </>
+      }
+      title="Sign in"
+    >
+      <form
+        className="grid gap-4"
+        onSubmit={(e) => {
+          e.preventDefault()
+          form.handleSubmit()
+        }}
+      >
+        <GoogleButton label="Continue with Google" />
+        <AuthDivider />
+        {formError ? <FormAlert>{formError}</FormAlert> : null}
+        <form.Field name="email">
+          {(field) => (
+            <TextField
+              autoComplete="email"
+              field={field}
+              icon={<Mail />}
+              label="Email"
+              placeholder="you@example.com"
+              type="email"
+            />
+          )}
+        </form.Field>
+        <form.Field name="password">
+          {(field) => (
+            <div className="grid gap-2">
+              <TextField
+                autoComplete="current-password"
+                field={field}
+                icon={<Lock />}
+                label="Password"
+                type="password"
+              />
+              <Link
+                className="justify-self-end text-muted-foreground text-xs hover:underline"
+                to="/auth/forgot-password"
+              >
+                Forgot password?
+              </Link>
+            </div>
+          )}
+        </form.Field>
+        <form.Subscribe selector={(s) => [s.canSubmit, s.isSubmitting]}>
+          {([canSubmit, isSubmitting]) => (
+            <Button className="w-full cursor-pointer" disabled={!canSubmit} type="submit">
+              {isSubmitting ? <Spinner /> : null}
+              {isSubmitting ? 'Signing in…' : 'Sign in'}
+            </Button>
+          )}
+        </form.Subscribe>
+      </form>
+    </AuthCard>
+  )
+}

package/_stack/apps/tanstack-base/src/routes/auth/sign-up.tsx ADDED Viewed

@@ -0,0 +1,119 @@
+import { useForm } from '@tanstack/react-form'
+import { createFileRoute, Link, useNavigate } from '@tanstack/react-router'
+import { Lock, Mail, User } from 'lucide-react'
+import { useState } from 'react'
+import { TextField } from '~/components/form/text-field'
+import { Button } from '~/components/ui/button'
+import { Spinner } from '~/components/ui/spinner'
+import { AuthCard } from '~/features/auth/auth-card'
+import { FormAlert } from '~/features/auth/form-alert'
+import { AuthDivider, GoogleButton } from '~/features/auth/google-button'
+import { SignUpSchema } from '~/features/auth/schemas'
+import { authClient } from '~/server/better-auth/client'
+export const Route = createFileRoute('/auth/sign-up')({ component: SignUp })
+function SignUp() {
+  const navigate = useNavigate()
+  const [formError, setFormError] = useState<string | null>(null)
+  const form = useForm({
+    defaultValues: { name: '', email: '', password: '' },
+    validators: { onBlur: SignUpSchema },
+    onSubmit: async ({ value }) => {
+      setFormError(null)
+      const { error } = await authClient.signUp.email({
+        name: value.name,
+        email: value.email,
+        password: value.password,
+        callbackURL: '/',
+      })
+      if (!error) {
+        await navigate({ to: '/auth/verify-email', search: { email: value.email } })
+        return
+      }
+      setFormError(
+        error.code === 'USER_ALREADY_EXISTS'
+          ? 'An account already exists with this email.'
+          : (error.message ?? 'Could not sign up. Try again.'),
+      )
+    },
+  })
+  return (
+    <AuthCard
+      description="Create your account."
+      footer={
+        <>
+          Already have an account?{' '}
+          <Link className="ml-1 text-foreground hover:underline" to="/auth/sign-in">
+            Sign in
+          </Link>
+        </>
+      }
+      title="Create an account"
+    >
+      <form
+        className="grid gap-4"
+        onSubmit={(e) => {
+          e.preventDefault()
+          form.handleSubmit()
+        }}
+      >
+        <GoogleButton label="Sign up with Google" />
+        <AuthDivider />
+        {formError ? <FormAlert>{formError}</FormAlert> : null}
+        <form.Field name="name">
+          {(field) => (
+            <TextField
+              autoComplete="name"
+              field={field}
+              icon={<User />}
+              label="Name"
+              placeholder="Your name"
+            />
+          )}
+        </form.Field>
+        <form.Field name="email">
+          {(field) => (
+            <TextField
+              autoComplete="email"
+              field={field}
+              icon={<Mail />}
+              label="Email"
+              placeholder="you@example.com"
+              type="email"
+            />
+          )}
+        </form.Field>
+        <form.Field name="password">
+          {(field) => (
+            <TextField
+              autoComplete="new-password"
+              field={field}
+              icon={<Lock />}
+              label="Password"
+              placeholder="At least 8 characters"
+              type="password"
+            />
+          )}
+        </form.Field>
+        <form.Subscribe selector={(s) => [s.canSubmit, s.isSubmitting]}>
+          {([canSubmit, isSubmitting]) => (
+            <Button className="w-full cursor-pointer" disabled={!canSubmit} type="submit">
+              {isSubmitting ? <Spinner /> : null}
+              {isSubmitting ? 'Creating…' : 'Create account'}
+            </Button>
+          )}
+        </form.Subscribe>
+      </form>
+    </AuthCard>
+  )
+}