Skip to content

Commit 2607189

Browse files
vcapretzgabrielmfern
vcapretz
and
gabrielmfern
authored
chore(web): remove forwardref, next.config.ts, next-env (#2465)
Co-authored-by: Gabriel Miranda <[email protected]>
1 parent 4c09e95 commit 2607189

34 files changed

+477
-530
lines changed

‎apps/web/.gitignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,4 +30,6 @@ Thumbs.db
3030

3131
## Environment variables
3232
### Prevent `.env` files from being tracked by Git to avoid exposing sensitive information.
33-
.env*
33+
.env*
34+
35+
next-env.d.ts

‎apps/web/license.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
Copyright 2024 Plus Five Five, Inc
1+
Copyright 2025 Plus Five Five, Inc
22

33
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
44

‎apps/web/next-env.d.ts‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎apps/web/next.config.js‎ renamed to ‎apps/web/next.config.ts‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
1-
/** @type {import('next').NextConfig} */
1+
import type { NextConfig } from 'next';
22

3-
module.exports = {
4-
devIndicators: {
5-
appIsrStatus: false,
6-
},
7-
reactStrictMode: true,
3+
const nextConfig: NextConfig = {
84
serverExternalPackages: ['@react-email/components', '@react-email/render'],
95
async redirects() {
106
return [
@@ -48,3 +44,5 @@ module.exports = {
4844
];
4945
},
5046
};
47+
48+
export default nextConfig;

‎apps/web/src/app/api/check-spam/route.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@ import { type NextRequest, NextResponse } from 'next/server';
22
import { ZodError, z } from 'zod';
33
import { checkSpam } from './check-spam';
44

5-
export const dynamic = 'force-dynamic';
6-
75
export function OPTIONS() {
86
return Promise.resolve(NextResponse.json({}));
97
}

‎apps/web/src/app/api/send/test/route.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ import { type NextRequest, NextResponse } from 'next/server';
33
import { Resend } from 'resend';
44
import { z } from 'zod';
55

6-
export const dynamic = 'force-dynamic';
7-
86
export function OPTIONS() {
97
return Promise.resolve(NextResponse.json({}));
108
}

‎apps/web/src/app/components/[slug]/page.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { notFound } from 'next/navigation';
33
import { componentsStructure } from '../../../../components/structure';
44
import { ComponentsView } from '../../../components/components-view';
55
import { IconArrowLeft } from '../../../components/icons/icon-arrow-left';
6-
import PageTransition from '../../../components/page-transition';
6+
import { PageTransition } from '../../../components/page-transition';
77
import { slugify } from '../../../utils/slugify';
88
import { getImportedComponentsFor } from '../get-imported-components-for';
99

@@ -54,14 +54,16 @@ export const generateMetadata = async ({
5454
};
5555
};
5656

57-
const ComponentPage: React.FC<ComponentPageParams> = async ({ params }) => {
57+
export default async function ComponentPage({ params }: ComponentPageParams) {
5858
const { slug: rawSlug } = await params;
5959
const slug = decodeURIComponent(rawSlug);
6060
const foundCategory = componentsStructure.find(
6161
(category) => slugify(category.name) === slug,
6262
);
6363

64-
if (!foundCategory) return <p>Component category not found.</p>;
64+
if (!foundCategory) {
65+
return <p>Component category not found.</p>;
66+
}
6567

6668
const importedComponents = await getImportedComponentsFor(foundCategory);
6769
return (
@@ -76,7 +78,7 @@ const ComponentPage: React.FC<ComponentPageParams> = async ({ params }) => {
7678
<div className="flex w-full flex-col gap-4 px-6 pt-16 pb-10 md:px-8">
7779
<div className="flex flex-inline">
7880
<Link
79-
className="mr-2 flex scroll-m-2 items-center justify-center gap-2 self-start rounded-md px-2 py-1 text-slate-11 transition transition-colors duration-200 ease-in-out hover:text-slate-12 focus:bg-slate-6 focus:outline-none focus:ring focus:ring-slate-3"
81+
className="mr-2 flex scroll-m-2 items-center justify-center gap-2 self-start rounded-md px-2 py-1 text-slate-11 transition-colors duration-200 ease-in-out hover:text-slate-12 focus:bg-slate-6 focus:outline-none focus:ring focus:ring-slate-3"
8082
href="/components"
8183
>
8284
<IconArrowLeft className="mt-[.0625rem]" size={14} />
@@ -93,6 +95,4 @@ const ComponentPage: React.FC<ComponentPageParams> = async ({ params }) => {
9395
</PageTransition>
9496
</>
9597
);
96-
};
97-
98-
export default ComponentPage;
98+
}

‎apps/web/src/app/components/page.tsx‎

Lines changed: 77 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -3,107 +3,98 @@ import type { Metadata } from 'next';
33
import dynamic from 'next/dynamic';
44
import Link from 'next/link';
55
import { componentsStructure } from '../../../components/structure';
6-
import PageTransition from '../../components/page-transition';
6+
import { PageTransition } from '../../components/page-transition';
77
import { Spotlight } from '../../components/spotlight';
88
import { slugify } from '../../utils/slugify';
99

10-
const title = 'Components - React Email';
11-
const description =
12-
'Build beautiful emails with pre-built components that you can copy-and-paste into your app.';
13-
1410
export const metadata: Metadata = {
15-
title,
16-
description,
11+
title: 'Components - React Email',
12+
description:
13+
'Build beautiful emails with pre-built components that you can copy-and-paste into your app.',
1714
openGraph: {
18-
title,
19-
description,
20-
images: [
21-
{
22-
url: 'https://react.email/static/covers/patterns.png',
23-
},
24-
],
15+
images: [{ url: 'https://react.email/static/covers/patterns.png' }],
2516
},
2617
alternates: {
2718
canonical: '/components',
2819
},
2920
};
3021

31-
const ComponentsPage = async () => (
32-
<>
33-
<div className="pointer-events-none absolute inset-0 flex justify-center">
34-
<div className="hidden h-full w-full max-w-7xl grid-cols-2 gap-4 px-4 lg:grid">
35-
<div className="border-r-slate-3 border-l border-l-slate-4" />
36-
<div className="border-r border-r-slate-4" />
37-
</div>
38-
</div>
39-
<PageTransition className="pb-10" key="about" tag="main">
40-
<div className="flex w-full flex-col gap-2 px-6 pt-16 pb-10 md:px-8">
41-
<h1 className="font-bold text-2xl text-slate-12">Components</h1>
42-
<p>
43-
Build beautiful emails with pre-built components that you can
44-
copy-and-paste into your app.
45-
</p>
22+
export default async function ComponentsPage() {
23+
return (
24+
<>
25+
<div className="pointer-events-none absolute inset-0 flex justify-center">
26+
<div className="hidden h-full w-full max-w-7xl grid-cols-2 gap-4 px-4 lg:grid">
27+
<div className="border-r-slate-3 border-l border-l-slate-4" />
28+
<div className="border-r border-r-slate-4" />
29+
</div>
4630
</div>
47-
<div className="relative grid grid-cols-1 gap-x-4 px-1 pb-10 md:grid-cols-2 md:px-0 lg:grid-cols-3">
48-
<div className="-translate-x-1/2 absolute top-0 left-1/2 h-px w-[100dvw] border-slate-4 border-t" />
49-
<div className="-translate-x-1/2 absolute bottom-0 left-1/2 h-px w-[100dvw] border-slate-4 border-b" />
50-
{componentsStructure.map((category, index) => {
51-
const slug = slugify(category.name);
52-
const Illustration = dynamic(
53-
() =>
54-
import(
55-
`@/illustrations/${category.name
56-
.toLowerCase()
57-
.replace(/ /g, '-')}`
58-
),
59-
);
31+
<PageTransition className="pb-10" key="about" tag="main">
32+
<div className="flex w-full flex-col gap-2 px-6 pt-16 pb-10 md:px-8">
33+
<h1 className="font-bold text-2xl text-slate-12">Components</h1>
34+
<p>
35+
Build beautiful emails with pre-built components that you can
36+
copy-and-paste into your app.
37+
</p>
38+
</div>
39+
<div className="relative grid grid-cols-1 gap-x-4 px-1 pb-10 md:grid-cols-2 md:px-0 lg:grid-cols-3">
40+
<div className="-translate-x-1/2 absolute top-0 left-1/2 h-px w-[100dvw] border-slate-4 border-t" />
41+
<div className="-translate-x-1/2 absolute bottom-0 left-1/2 h-px w-[100dvw] border-slate-4 border-b" />
42+
{componentsStructure.map((category, index) => {
43+
const slug = slugify(category.name);
44+
const Illustration = dynamic(
45+
() =>
46+
import(
47+
`@/illustrations/${category.name
48+
.toLowerCase()
49+
.replace(/ /g, '-')}`
50+
),
51+
);
6052

61-
return (
62-
<Link
63-
className={classNames(
64-
'group relative isolate mt-7 cursor-pointer scroll-m-6 rounded-md focus:outline-none focus:ring focus:ring-slate-2 md:before:absolute md:before:inset-0 md:before:rounded-md md:before:border md:before:border-slate-4 md:before:border-dashed md:before:transition-colors md:before:duration-[720ms] md:before:ease-[cubic-bezier(.24,.9,.32,1.4)] md:focus:before:border-slate-6 md:hover:before:border-slate-6',
65-
{
66-
'md:ml-6': index % 3 === 0,
67-
'md:mx-3': index % 3 === 1,
68-
'md:mr-6': index % 3 === 2,
69-
},
70-
)}
71-
href={`/components/${slug}`}
72-
key={category.name}
73-
tabIndex={0}
74-
>
75-
<Spotlight
53+
return (
54+
<Link
7655
className={classNames(
77-
'relative isolate flex cursor-pointer flex-col justify-end rounded-md bg-black p-4 group-focus:ring group-focus:ring-slate-2 md:transition-transform md:duration-[240ms] md:ease-[cubic-bezier(.36,.66,.6,1)]',
56+
'group relative isolate mt-7 cursor-pointer scroll-m-6 rounded-md focus:outline-none focus:ring focus:ring-slate-2 md:before:absolute md:before:inset-0 md:before:rounded-md md:before:border md:before:border-slate-4 md:before:border-dashed md:before:transition-colors md:before:duration-[720ms] md:before:ease-[cubic-bezier(.24,.9,.32,1.4)] md:focus:before:border-slate-6 md:hover:before:border-slate-6',
7857
{
79-
'md:group-hover:-translate-x-2 md:group-hover:-translate-y-2 md:group-focus:-translate-x-2 md:group-focus:-translate-y-2':
80-
index % 3 === 0,
81-
'md:group-hover:-translate-y-2 md:group-focus:-translate-y-2':
82-
index % 3 === 1,
83-
'md:group-hover:-translate-y-2 md:group-focus:-translate-y-2 md:group-focus:translate-x-2 md:group-hover:translate-x-2':
84-
index % 3 === 2,
58+
'md:ml-6': index % 3 === 0,
59+
'md:mx-3': index % 3 === 1,
60+
'md:mr-6': index % 3 === 2,
8561
},
8662
)}
63+
href={`/components/${slug}`}
64+
key={category.name}
65+
tabIndex={0}
8766
>
88-
<div className="pointer-events-none absolute inset-0 rounded-md border border-slate-4 transition-colors duration-300 ease-[cubic-bezier(.36,.66,.6,1)] group-hover:border-slate-6 group-focus:border-slate-6" />
89-
<div className="relative flex aspect-[2/1] items-center justify-center overflow-hidden rounded-sm text-slate-300">
90-
<div className="absolute inset-0 bg-[radial-gradient(#27272A_.0313rem,transparent_.0313rem),_radial-gradient(#27272A_.0313rem,transparent_.0313rem)] bg-transparent opacity-80 [background-position:0_0,.625rem_.625rem] [background-size:1.25rem_1.25rem]" />
91-
<Illustration />
92-
</div>
93-
<h3 className="relative z-[2] mt-4 font-semibold text-slate-12 capitalize leading-7 tracking-wide">
94-
{category.name}
95-
</h3>
96-
<span className="relative z-[2] text-slate-11 text-xs">
97-
{category.components.length} component
98-
{category.components.length > 1 && 's'}
99-
</span>
100-
</Spotlight>
101-
</Link>
102-
);
103-
})}
104-
</div>
105-
</PageTransition>
106-
</>
107-
);
108-
109-
export default ComponentsPage;
67+
<Spotlight
68+
className={classNames(
69+
'relative isolate flex cursor-pointer flex-col justify-end rounded-md bg-black p-4 group-focus:ring group-focus:ring-slate-2 md:transition-transform md:duration-[240ms] md:ease-[cubic-bezier(.36,.66,.6,1)]',
70+
{
71+
'md:group-hover:-translate-x-2 md:group-hover:-translate-y-2 md:group-focus:-translate-x-2 md:group-focus:-translate-y-2':
72+
index % 3 === 0,
73+
'md:group-hover:-translate-y-2 md:group-focus:-translate-y-2':
74+
index % 3 === 1,
75+
'md:group-hover:-translate-y-2 md:group-focus:-translate-y-2 md:group-focus:translate-x-2 md:group-hover:translate-x-2':
76+
index % 3 === 2,
77+
},
78+
)}
79+
>
80+
<div className="pointer-events-none absolute inset-0 rounded-md border border-slate-4 transition-colors duration-300 ease-[cubic-bezier(.36,.66,.6,1)] group-hover:border-slate-6 group-focus:border-slate-6" />
81+
<div className="relative flex aspect-[2/1] items-center justify-center overflow-hidden rounded-sm text-slate-300">
82+
<div className="absolute inset-0 bg-[radial-gradient(#27272A_.0313rem,transparent_.0313rem),_radial-gradient(#27272A_.0313rem,transparent_.0313rem)] bg-transparent opacity-80 [background-position:0_0,.625rem_.625rem] [background-size:1.25rem_1.25rem]" />
83+
<Illustration />
84+
</div>
85+
<h3 className="relative z-[2] mt-4 font-semibold text-slate-12 capitalize leading-7 tracking-wide">
86+
{category.name}
87+
</h3>
88+
<span className="relative z-[2] text-slate-11 text-xs">
89+
{category.components.length} component
90+
{category.components.length > 1 && 's'}
91+
</span>
92+
</Spotlight>
93+
</Link>
94+
);
95+
})}
96+
</div>
97+
</PageTransition>
98+
</>
99+
);
100+
}

‎apps/web/src/app/layout.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,11 @@ export const viewport = {
8282
themeColor: '#25AEBA',
8383
};
8484

85-
const RootLayout = ({ children }: { children: React.ReactNode }) => {
85+
export default function RootLayout({
86+
children,
87+
}: {
88+
children: React.ReactNode;
89+
}) {
8690
return (
8791
<html
8892
className={`${inter.variable} ${commitMono.variable} antialiased`}
@@ -102,6 +106,4 @@ const RootLayout = ({ children }: { children: React.ReactNode }) => {
102106
</body>
103107
</html>
104108
);
105-
};
106-
107-
export default RootLayout;
109+
}

‎apps/web/src/app/not-found.tsx‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import PageTransition from '@/components/page-transition';
1+
import { PageTransition } from '@/components/page-transition';
22

33
export const metadata = {
44
title: '404 Not found',
@@ -7,29 +7,29 @@ export const metadata = {
77
},
88
};
99

10-
const NotFound = () => (
11-
<>
12-
<div className="pointer-events-none absolute inset-0 flex justify-center">
13-
<div className="hidden h-full w-full max-w-7xl grid-cols-2 gap-4 px-4 lg:grid">
14-
<div className="border-r-slate-3 border-l border-l-slate-4" />
15-
<div className="border-r border-r-slate-4" />
10+
export default function NotFound() {
11+
return (
12+
<>
13+
<div className="pointer-events-none absolute inset-0 flex justify-center">
14+
<div className="hidden h-full w-full max-w-7xl grid-cols-2 gap-4 px-4 lg:grid">
15+
<div className="border-r-slate-3 border-l border-l-slate-4" />
16+
<div className="border-r border-r-slate-4" />
17+
</div>
1618
</div>
17-
</div>
18-
<PageTransition
19-
className="flex w-full flex-col items-center justify-center gap-2 px-8 pt-16 pb-10 text-center"
20-
key="not-found"
21-
tag="main"
22-
>
23-
<h1 className="font-bold text-2xl text-slate-12 uppercase italic">
24-
<span className="font-mono">404</span> <br />
25-
Not Found
26-
</h1>
27-
<div className="mt-1 leading-loose">
28-
<p>This page does not exist.</p>
29-
<p>Please check the URL and try again.</p>
30-
</div>
31-
</PageTransition>
32-
</>
33-
);
34-
35-
export default NotFound;
19+
<PageTransition
20+
className="flex w-full flex-col items-center justify-center gap-2 px-8 pt-16 pb-10 text-center"
21+
key="not-found"
22+
tag="main"
23+
>
24+
<h1 className="font-bold text-2xl text-slate-12 uppercase italic">
25+
<span className="font-mono">404</span> <br />
26+
Not Found
27+
</h1>
28+
<div className="mt-1 leading-loose">
29+
<p>This page does not exist.</p>
30+
<p>Please check the URL and try again.</p>
31+
</div>
32+
</PageTransition>
33+
</>
34+
);
35+
}

0 commit comments

Comments
 (0)