General fixes. Still far from good or working

This commit is contained in:
2026-01-11 13:21:01 -05:00
parent 0a361f51a1
commit 67daefb919
83 changed files with 733 additions and 1053 deletions

View File

@@ -0,0 +1 @@
[["1","2","3","4","5","6","7","8","9","10","11"],{"key":"12","value":"13"},{"key":"14","value":"15"},{"key":"16","value":"17"},{"key":"18","value":"19"},{"key":"20","value":"21"},{"key":"22","value":"23"},{"key":"24","value":"25"},{"key":"26","value":"27"},{"key":"28","value":"29"},{"key":"30","value":"31"},{"key":"32","value":"33"},"/home/gib/Documents/Code/convex-monorepo/apps/next/src/env.ts",{"size":1676,"mtime":1768155639474,"hash":"34","data":"35"},"/home/gib/Documents/Code/convex-monorepo/apps/next/postcss.config.js",{"size":63,"mtime":1766225879000,"hash":"36","data":"37"},"/home/gib/Documents/Code/convex-monorepo/apps/next/public/favicon.ico",{"size":103027,"mtime":1766225172000,"hash":"38"},"/home/gib/Documents/Code/convex-monorepo/apps/next/src/app/layout.tsx",{"size":1885,"mtime":1768155639311,"hash":"39","data":"40"},"/home/gib/Documents/Code/convex-monorepo/apps/next/public/t3-icon.svg",{"size":923,"mtime":1766225172000,"hash":"41"},"/home/gib/Documents/Code/convex-monorepo/apps/next/next.config.js",{"size":2062,"mtime":1768155639139,"hash":"42","data":"43"},"/home/gib/Documents/Code/convex-monorepo/apps/next/package.json",{"size":1506,"mtime":1768154671185,"hash":"44","data":"45"},"/home/gib/Documents/Code/convex-monorepo/apps/next/tsconfig.json",{"size":297,"mtime":1766225936000,"hash":"46","data":"47"},"/home/gib/Documents/Code/convex-monorepo/apps/next/src/app/styles.css",{"size":596,"mtime":1768155639429,"hash":"48","data":"49"},"/home/gib/Documents/Code/convex-monorepo/apps/next/eslint.config.ts",{"size":369,"mtime":1768155639048,"hash":"50","data":"51"},"/home/gib/Documents/Code/convex-monorepo/apps/next/src/app/page.tsx",{"size":1169,"mtime":1768155639357,"hash":"52","data":"53"},"08dcc17ca04632a7262728b699450d5d",{"hashOfOptions":"54"},"d9fa362e836306677416d4e30dfb1528",{"hashOfOptions":"55"},"36aa513994f9883f30ff408fe777cec6","f819b8d99aba405d3975e6e5d3adf796",{"hashOfOptions":"56"},"44418c5550aee51cfdf0a321ad70ae47","1f2ba5c5e807955994fd4dfca4c709be",{"hashOfOptions":"57"},"6dba01a7cb29904291cb3c9930fc1ac3",{"hashOfOptions":"58"},"785dd21512a5bdf43635be77f6a483ae",{"hashOfOptions":"59"},"48e377494d0046d38b923af54e109529",{"hashOfOptions":"60"},"a9eecac327a9c09dd26e82c515134edc",{"hashOfOptions":"61"},"3847ea1421b6ea4079a526d7e44c946d",{"hashOfOptions":"62"},"1049592143","533286024","3492548434","1155092478","4045122132","2138361299","3590205716","4261166930","1190248983"]

View File

@@ -1,16 +1,15 @@
import { defineConfig } from "eslint/config";
import { defineConfig } from 'eslint/config';
import { baseConfig, restrictEnvAccess } from "@gib/eslint-config/base";
import { nextjsConfig } from "@gib/eslint-config/nextjs";
import { reactConfig } from "@gib/eslint-config/react";
import { baseConfig, restrictEnvAccess } from '@gib/eslint-config/base';
import { nextjsConfig } from '@gib/eslint-config/nextjs';
import { reactConfig } from '@gib/eslint-config/react';
export default defineConfig(
{
ignores: [".next/**"],
ignores: ['.next/**'],
},
baseConfig,
reactConfig,
nextjsConfig,
restrictEnvAccess,
);

View File

@@ -1,12 +1,11 @@
import { env } from './src/env';
import { withSentryConfig } from '@sentry/nextjs';
import { createJiti } from 'jiti';
import { withPlausibleProxy } from 'next-plausible';
import { createJiti } from "jiti";
const jiti = createJiti(import.meta.url);
// Import env files to validate at build time. Use jiti so we can load .ts files in here.
await jiti.import("./src/env");
await jiti.import('./src/env');
/** @type {import("next").NextConfig} */
const config = withPlausibleProxy({
@@ -28,15 +27,10 @@ const config = withPlausibleProxy({
},
},
/** Enables hot reloading for local packages without a build step */
transpilePackages: [
"@gib/backend",
"@gib/ui",
],
transpilePackages: ['@gib/backend', '@gib/ui'],
typescript: { ignoreBuildErrors: true },
});
const sentryConfig = {
// For all available options, see:
// https://www.npmjs.com/package/@sentry/webpack-plugin#options

View File

@@ -1,5 +1,5 @@
{
"name": "@gib/nextjs",
"name": "@gib/next",
"version": "0.1.0",
"type": "module",
"private": true,

View File

@@ -1,58 +0,0 @@
import { headers } from "next/headers";
import { redirect } from "next/navigation";
import { Button } from "@acme/ui/button";
import { auth, getSession } from "~/auth/server";
export async function AuthShowcase() {
const session = await getSession();
if (!session) {
return (
<form>
<Button
size="lg"
formAction={async () => {
"use server";
const res = await auth.api.signInSocial({
body: {
provider: "discord",
callbackURL: "/",
},
});
if (!res.url) {
throw new Error("No URL returned from signInSocial");
}
redirect(res.url);
}}
>
Sign in with Discord
</Button>
</form>
);
}
return (
<div className="flex flex-col items-center justify-center gap-4">
<p className="text-center text-2xl">
<span>Logged in as {session.user.name}</span>
</p>
<form>
<Button
size="lg"
formAction={async () => {
"use server";
await auth.api.signOut({
headers: await headers(),
});
redirect("/");
}}
>
Sign out
</Button>
</form>
</div>
);
}

View File

@@ -1,210 +0,0 @@
"use client";
import { useForm } from "@tanstack/react-form";
import {
useMutation,
useQueryClient,
useSuspenseQuery,
} from "@tanstack/react-query";
import type { RouterOutputs } from "@acme/api";
import { CreatePostSchema } from "@acme/db/schema";
import { cn } from "@acme/ui";
import { Button } from "@acme/ui/button";
import {
Field,
FieldContent,
FieldError,
FieldGroup,
FieldLabel,
} from "@acme/ui/field";
import { Input } from "@acme/ui/input";
import { toast } from "@acme/ui/toast";
import { useTRPC } from "~/trpc/react";
export function CreatePostForm() {
const trpc = useTRPC();
const queryClient = useQueryClient();
const createPost = useMutation(
trpc.post.create.mutationOptions({
onSuccess: async () => {
form.reset();
await queryClient.invalidateQueries(trpc.post.pathFilter());
},
onError: (err) => {
toast.error(
err.data?.code === "UNAUTHORIZED"
? "You must be logged in to post"
: "Failed to create post",
);
},
}),
);
const form = useForm({
defaultValues: {
content: "",
title: "",
},
validators: {
onSubmit: CreatePostSchema,
},
onSubmit: (data) => createPost.mutate(data.value),
});
return (
<form
className="w-full max-w-2xl"
onSubmit={(event) => {
event.preventDefault();
void form.handleSubmit();
}}
>
<FieldGroup>
<form.Field
name="title"
children={(field) => {
const isInvalid =
field.state.meta.isTouched && !field.state.meta.isValid;
return (
<Field data-invalid={isInvalid}>
<FieldContent>
<FieldLabel htmlFor={field.name}>Bug Title</FieldLabel>
</FieldContent>
<Input
id={field.name}
name={field.name}
value={field.state.value}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
aria-invalid={isInvalid}
placeholder="Title"
/>
{isInvalid && <FieldError errors={field.state.meta.errors} />}
</Field>
);
}}
/>
<form.Field
name="content"
children={(field) => {
const isInvalid =
field.state.meta.isTouched && !field.state.meta.isValid;
return (
<Field data-invalid={isInvalid}>
<FieldContent>
<FieldLabel htmlFor={field.name}>Content</FieldLabel>
</FieldContent>
<Input
id={field.name}
name={field.name}
value={field.state.value}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
aria-invalid={isInvalid}
placeholder="Content"
/>
{isInvalid && <FieldError errors={field.state.meta.errors} />}
</Field>
);
}}
/>
</FieldGroup>
<Button type="submit">Create</Button>
</form>
);
}
export function PostList() {
const trpc = useTRPC();
const { data: posts } = useSuspenseQuery(trpc.post.all.queryOptions());
if (posts.length === 0) {
return (
<div className="relative flex w-full flex-col gap-4">
<PostCardSkeleton pulse={false} />
<PostCardSkeleton pulse={false} />
<PostCardSkeleton pulse={false} />
<div className="absolute inset-0 flex flex-col items-center justify-center bg-black/10">
<p className="text-2xl font-bold text-white">No posts yet</p>
</div>
</div>
);
}
return (
<div className="flex w-full flex-col gap-4">
{posts.map((p) => {
return <PostCard key={p.id} post={p} />;
})}
</div>
);
}
export function PostCard(props: {
post: RouterOutputs["post"]["all"][number];
}) {
const trpc = useTRPC();
const queryClient = useQueryClient();
const deletePost = useMutation(
trpc.post.delete.mutationOptions({
onSuccess: async () => {
await queryClient.invalidateQueries(trpc.post.pathFilter());
},
onError: (err) => {
toast.error(
err.data?.code === "UNAUTHORIZED"
? "You must be logged in to delete a post"
: "Failed to delete post",
);
},
}),
);
return (
<div className="bg-muted flex flex-row rounded-lg p-4">
<div className="grow">
<h2 className="text-primary text-2xl font-bold">{props.post.title}</h2>
<p className="mt-2 text-sm">{props.post.content}</p>
</div>
<div>
<Button
variant="ghost"
className="text-primary cursor-pointer text-sm font-bold uppercase hover:bg-transparent hover:text-white"
onClick={() => deletePost.mutate(props.post.id)}
>
Delete
</Button>
</div>
</div>
);
}
export function PostCardSkeleton(props: { pulse?: boolean }) {
const { pulse = true } = props;
return (
<div className="bg-muted flex flex-row rounded-lg p-4">
<div className="grow">
<h2
className={cn(
"bg-primary w-1/4 rounded-sm text-2xl font-bold",
pulse && "animate-pulse",
)}
>
&nbsp;
</h2>
<p
className={cn(
"mt-2 w-1/3 rounded-sm bg-current text-sm",
pulse && "animate-pulse",
)}
>
&nbsp;
</p>
</div>
</div>
);
}

View File

@@ -1,4 +0,0 @@
import { auth } from "~/auth/server";
export const GET = auth.handler;
export const POST = auth.handler;

View File

@@ -1,46 +0,0 @@
import type { NextRequest } from "next/server";
import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
import { appRouter, createTRPCContext } from "@acme/api";
import { auth } from "~/auth/server";
/**
* Configure basic CORS headers
* You should extend this to match your needs
*/
const setCorsHeaders = (res: Response) => {
res.headers.set("Access-Control-Allow-Origin", "*");
res.headers.set("Access-Control-Request-Method", "*");
res.headers.set("Access-Control-Allow-Methods", "OPTIONS, GET, POST");
res.headers.set("Access-Control-Allow-Headers", "*");
};
export const OPTIONS = () => {
const response = new Response(null, {
status: 204,
});
setCorsHeaders(response);
return response;
};
const handler = async (req: NextRequest) => {
const response = await fetchRequestHandler({
endpoint: "/api/trpc",
router: appRouter,
req,
createContext: () =>
createTRPCContext({
auth: auth,
headers: req.headers,
}),
onError({ error, path }) {
console.error(`>>> tRPC Error on '${path}'`, error);
},
});
setCorsHeaders(response);
return response;
};
export { handler as GET, handler as POST };

View File

@@ -1,50 +1,49 @@
import type { Metadata, Viewport } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import type { Metadata, Viewport } from 'next';
import { Geist, Geist_Mono } from 'next/font/google';
import { cn } from '@acme/ui';
import { ThemeProvider, ThemeToggle } from '@acme/ui/theme';
import { Toaster } from '@acme/ui/toast';
import { cn } from "@acme/ui";
import { ThemeProvider, ThemeToggle } from "@acme/ui/theme";
import { Toaster } from "@acme/ui/toast";
import { env } from '~/env';
import { TRPCReactProvider } from '~/trpc/react';
import { env } from "~/env";
import { TRPCReactProvider } from "~/trpc/react";
import "~/app/styles.css";
import '~/app/styles.css';
export const metadata: Metadata = {
metadataBase: new URL(
env.VERCEL_ENV === "production"
? "https://turbo.t3.gg"
: "http://localhost:3000",
env.VERCEL_ENV === 'production'
? 'https://turbo.t3.gg'
: 'http://localhost:3000',
),
title: "Create T3 Turbo",
description: "Simple monorepo with shared backend for web & mobile apps",
title: 'Create T3 Turbo',
description: 'Simple monorepo with shared backend for web & mobile apps',
openGraph: {
title: "Create T3 Turbo",
description: "Simple monorepo with shared backend for web & mobile apps",
url: "https://create-t3-turbo.vercel.app",
siteName: "Create T3 Turbo",
title: 'Create T3 Turbo',
description: 'Simple monorepo with shared backend for web & mobile apps',
url: 'https://create-t3-turbo.vercel.app',
siteName: 'Create T3 Turbo',
},
twitter: {
card: "summary_large_image",
site: "@jullerino",
creator: "@jullerino",
card: 'summary_large_image',
site: '@jullerino',
creator: '@jullerino',
},
};
export const viewport: Viewport = {
themeColor: [
{ media: "(prefers-color-scheme: light)", color: "white" },
{ media: "(prefers-color-scheme: dark)", color: "black" },
{ media: '(prefers-color-scheme: light)', color: 'white' },
{ media: '(prefers-color-scheme: dark)', color: 'black' },
],
};
const geistSans = Geist({
subsets: ["latin"],
variable: "--font-geist-sans",
subsets: ['latin'],
variable: '--font-geist-sans',
});
const geistMono = Geist_Mono({
subsets: ["latin"],
variable: "--font-geist-mono",
subsets: ['latin'],
variable: '--font-geist-mono',
});
export default function RootLayout(props: { children: React.ReactNode }) {
@@ -52,7 +51,7 @@ export default function RootLayout(props: { children: React.ReactNode }) {
<html lang="en" suppressHydrationWarning>
<body
className={cn(
"bg-background text-foreground min-h-screen font-sans antialiased",
'bg-background text-foreground min-h-screen font-sans antialiased',
geistSans.variable,
geistMono.variable,
)}

View File

@@ -1,12 +1,12 @@
import { Suspense } from "react";
import { Suspense } from 'react';
import { HydrateClient, prefetch, trpc } from "~/trpc/server";
import { AuthShowcase } from "./_components/auth-showcase";
import { HydrateClient, prefetch, trpc } from '~/trpc/server';
import { AuthShowcase } from './_components/auth-showcase';
import {
CreatePostForm,
PostCardSkeleton,
PostList,
} from "./_components/posts";
} from './_components/posts';
export default function HomePage() {
prefetch(trpc.post.all.queryOptions());

View File

@@ -1,8 +1,8 @@
@import "tailwindcss";
@import "tw-animate-css";
@import "@acme/tailwind-config/theme";
@import 'tailwindcss';
@import 'tw-animate-css';
@import '@acme/tailwind-config/theme';
@source "../../../../packages/ui/src/*.{ts,tsx}";
@source '../../../../packages/ui/src/*.{ts,tsx}';
@custom-variant dark (&:where(.dark, .dark *));
@custom-variant light (&:where(.light, .light *));

View File

@@ -1,13 +1,11 @@
import { createEnv } from "@t3-oss/env-nextjs";
import { z } from "zod/v4";
import { createEnv } from '@t3-oss/env-nextjs';
import { z } from 'zod/v4';
export const env = createEnv({
shared: {
NODE_ENV: z
.enum(["development", "production", "test"])
.default("development"),
CI: z.boolean().default(false),
SITE_URL: z.string().default("http://localhost:3000"),
.enum(['development', 'production', 'test'])
.default('development'),
},
/**
* Specify your server-side environment variables schema here.
@@ -22,6 +20,7 @@ export const env = createEnv({
* For them to be exposed to the client, prefix them with `NEXT_PUBLIC_`.
*/
client: {
NEXT_PUBLIC_SITE_URL: z.url(),
NEXT_PUBLIC_CONVEX_URL: z.url(),
NEXT_PUBLIC_PLAUSIBLE_URL: z.url(),
NEXT_PUBLIC_SENTRY_DSN: z.string(),
@@ -36,13 +35,15 @@ export const env = createEnv({
NODE_ENV: process.env.NODE_ENV,
CI: process.env.CI,
SITE_URL: process.env.SITE_URL,
NEXT_PUBLIC_SITE_URL: process.env.NEXT_PUBLIC_SITE_URL,
NEXT_PUBLIC_CONVEX_URL: process.env.NEXT_PUBLIC_CONVEX_URL,
NEXT_PUBLIC_PLAUSIBLE_URL: process.env.NEXT_PUBLIC_PLAUSIBLE_URL,
NEXT_PUBLIC_SENTRY_DSN: process.env.NEXT_PUBLIC_SENTRY_DSN,
NEXT_PUBLIC_SENTRY_URL: process.env.NEXT_PUBLIC_SENTRY_URL,
NEXT_PUBLIC_SENTRY_ORG: process.env.NEXT_PUBLIC_SENTRY_ORG,
NEXT_PUBLIC_SENTRY_PROJECT_NAME: process.env.NEXT_PUBLIC_SENTRY_PROJECT_NAME,
NEXT_PUBLIC_SENTRY_PROJECT_NAME:
process.env.NEXT_PUBLIC_SENTRY_PROJECT_NAME,
},
skipValidation:
!!process.env.CI || process.env.npm_lifecycle_event === "lint",
!!process.env.CI || process.env.npm_lifecycle_event === 'lint',
});