Upgrade to Next.js 16, Tailwind CSS 4, Headless UI 2 (#35)

Signed-off-by: Joe Karow <58997957+JoeKarow@users.noreply.github.com>

Author: JoeKarow

.gitignore

@@ -108,3 +108,6 @@ dist
 .env.local
 
 .DS_Store
+
+# Next.js generated TypeScript declarations
+next-env.d.ts

.nvmrc

@@ -1 +1 @@
-18
+24

README.md

@@ -22,7 +22,7 @@ This repo requires `node`, `pnpm`, and the [Netlify CLI](https://www.netlify.com
 
 #### Installing `node`:
 
-The best way to install `node` is to [download the installer](https://nodejs.org/en/) from their site. This repo requires `node` version `18.16`, which is the latest [LTS version](https://nodejs.dev/en/about/releases/).
+The best way to install `node` is to [download the installer](https://nodejs.org/en/) from their site. This repo requires `node` version `24` or newer (see `.nvmrc`), which is the current [LTS version](https://nodejs.org/en/about/previous-releases).
 
 If you already have a different version of `node` installed, but don't want to update globally, you can install [a package called `nvm`](https://github.com/nvm-sh/nvm), which will allow you to easily switch `node` versions. Once you have `nvm` installed (or if you already have it installed), you can run `nvm use` in the main directory and it will install the proper version of `node`.
 
@@ -43,10 +43,10 @@ corepack prepare
 
 #### Setting up your .env
 
-Use the following command to create a local `.env` file. Then open the new file (`.env`) and adjust any settings that are needed.
+Use the following command to create a local `.env.local` file. Then open the new file (`.env.local`) and adjust any settings that are needed.
 
 ```shell
-cp .env.example .env
+cp .env.local.example .env.local
 ```
 
 #### Installing package dependencies
@@ -88,5 +88,6 @@ Use ctrl-c to quit the server when you're done.
 ## Uses:
 
 - [NextJS](https://nextjs.org/docs/)
+- [TypeScript](https://www.typescriptlang.org/)
 - [Tailwind UI](https://tailwindui.com)
 - Hosted on [Netlify](https://www.netlify.com/)

components/Alert.js components/Alert.tsxcomponents/Alert.js renamed to components/Alert.tsx

@@ -4,9 +4,25 @@ import {
 	CheckCircleIcon,
 	InformationCircleIcon,
 } from '@heroicons/react/24/solid'
-import classNames from '../util/classNames'
+import type { ReactNode } from 'react'
+import type { AlertType } from '@/data/forms'
+import classNames from '@/util/classNames'
 
-const alertTypes = {
+type AlertStyle = {
+	bodyBg: string
+	Icon: typeof XCircleIcon
+	iconColor: string
+	titleColor: string
+	bodyColor?: string
+}
+
+type AlertProps = {
+	title?: ReactNode
+	alertType?: AlertType
+	children?: ReactNode
+}
+
+const alertTypes: Record<AlertType, AlertStyle> = {
 	error: {
 		bodyBg: 'bg-red-50',
 		Icon: XCircleIcon,
@@ -36,12 +52,16 @@ const alertTypes = {
 	},
 }
 
-export default function Alert({ title, alertType = 'info', children }) {
+export default function Alert({
+	title,
+	alertType = 'info',
+	children,
+}: AlertProps) {
 	const typeStyles = alertTypes[alertType]
 	return (
 		<div className={classNames('rounded-md p-4 mt-8', typeStyles.bodyBg)}>
 			<div className="flex">
-				<div className="flex-shrink-0">
+				<div className="shrink-0">
 					<typeStyles.Icon
 						className={classNames('h-5 w-5', typeStyles.iconColor)}
 						aria-hidden="true"
@@ -73,31 +93,35 @@ export default function Alert({ title, alertType = 'info', children }) {
 	)
 }
 
-export function InfoAlert({ title, children }) {
+export function InfoAlert({ title, children }: AlertProps) {
 	return (
 		<Alert title={title} alertType="info">
 			{children}
 		</Alert>
 	)
 }
 
-export function SuccessAlert({ title, children }) {
+export function SuccessAlert({ title, children }: AlertProps) {
 	return (
 		<Alert title={title} alertType="success">
 			{children}
 		</Alert>
 	)
 }
 
-export function WarningAlert({ title, children }) {
+export function WarningAlert({ title, children }: AlertProps) {
 	return (
 		<Alert title={title} alertType="warning">
 			{children}
 		</Alert>
 	)
 }
 
-export function ErrorAlert({ title, errors, children }) {
+export function ErrorAlert({
+	title,
+	errors,
+	children,
+}: AlertProps & { errors?: string[] }) {
 	return (
 		<Alert title={title} alertType="error">
 			<>

components/Button.js components/Button.tsxcomponents/Button.js renamed to components/Button.tsx

@@ -1,8 +1,9 @@
 import Link from 'next/link'
-import classNames from '../util/classNames'
+import type { MouseEventHandler, ReactNode } from 'react'
+import classNames from '@/util/classNames'
 
 const defaultClassName =
-	'inline-block border border-transparent leading-6 font-medium rounded-md focus:outline-none focus:shadow-outline transition duration-150 ease-in-out'
+	'inline-block border border-transparent leading-6 font-medium rounded-md focus:outline-hidden focus:shadow-outline transition duration-150 ease-in-out'
 
 const colors = {
 	primary: 'text-orange-50 hover:text-white bg-orange-600 hover:bg-orange-500',
@@ -15,15 +16,26 @@ const sizes = {
 	lg: 'text-lg px-7 py-5',
 }
 
+type ButtonProps = {
+	href?: string
+	external?: boolean
+	size?: keyof typeof sizes
+	color?: keyof typeof colors
+	className?: string
+	children?: ReactNode
+	type?: 'button' | 'submit' | 'reset'
+	onClick?: MouseEventHandler<HTMLElement>
+}
+
 export default function Button({
 	external,
 	href,
 	size = 'md',
 	color = 'primary',
 	className: providedClassname = '',
 	...props
-}) {
-	props.className = classNames(
+}: ButtonProps) {
+	const className = classNames(
 		defaultClassName,
 		sizes[size],
 		colors[color],
@@ -32,10 +44,10 @@ export default function Button({
 
 	if (href) {
 		if (external) {
-			return <a href={href} {...props} />
+			return <a href={href} className={className} {...props} />
 		}
-		return <Link href={href} {...props} />
+		return <Link href={href} className={className} {...props} />
 	}
 
-	return <button {...props} />
+	return <button className={className} {...props} />
 }

components/Card.js components/Card.tsxcomponents/Card.js renamed to components/Card.tsx

@@ -1,44 +1,47 @@
 /* This example requires Tailwind CSS v2.0+ */
 import { PaperClipIcon } from '@heroicons/react/24/solid'
 import Button from './Button'
+import type { ReactNode } from 'react'
 
-export function CardListItem({ children }) {
+type ChildrenProps = { children: ReactNode }
+
+export function CardListItem({ children }: ChildrenProps) {
 	return (
 		<div className="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
 			{children}
 		</div>
 	)
 }
 
-export function CardListItemKey({ children }) {
+export function CardListItemKey({ children }: ChildrenProps) {
 	return <dt className="text-sm font-medium text-gray-500">{children}</dt>
 }
 
-export function CardListItemValue({ children }) {
+export function CardListItemValue({ children }: ChildrenProps) {
 	return (
 		<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
 			{children}
 		</dd>
 	)
 }
 
-export function CardList({ children }) {
+export function CardList({ children }: ChildrenProps) {
 	return (
 		<div className="border-t border-gray-200 px-4 py-5 sm:p-0">
 			<dl className="sm:divide-y sm:divide-gray-200">{children}</dl>
 		</div>
 	)
 }
 
-export function Card({ children }) {
+export function Card({ children }: ChildrenProps) {
 	return (
-		<div className="bg-white shadow overflow-hidden sm:rounded-lg">
+		<div className="bg-white shadow-sm overflow-hidden sm:rounded-lg">
 			{children}
 		</div>
 	)
 }
 
-export function CardHeader({ children }) {
+export function CardHeader({ children }: ChildrenProps) {
 	return (
 		<div className="bg-white px-4 py-5 border-b border-gray-200 sm:px-6">
 			<div className="-ml-4 -mt-4 flex justify-between items-center flex-wrap sm:flex-nowrap">
@@ -48,7 +51,13 @@ export function CardHeader({ children }) {
 	)
 }
 
-export function CardHeaderHeader({ title, description }) {
+export function CardHeaderHeader({
+	title,
+	description,
+}: {
+	title: string
+	description: string
+}) {
 	return (
 		<div className="ml-4 mt-4">
 			<h3 className="text-lg leading-6 font-medium text-gray-900">{title}</h3>
@@ -57,6 +66,6 @@ export function CardHeaderHeader({ title, description }) {
 	)
 }
 
-export function CardHeaderActions({ children }) {
-	return <div className="ml-4 mt-4 flex-shrink-0">{children}</div>
+export function CardHeaderActions({ children }: ChildrenProps) {
+	return <div className="ml-4 mt-4 shrink-0">{children}</div>
 }

components/ChoiceCard.js components/ChoiceCard.tsxcomponents/ChoiceCard.js renamed to components/ChoiceCard.tsx

@@ -1,6 +1,17 @@
 import Link from 'next/link'
 
-export default function ChoiceCard({ choice }) {
+export type Choice = {
+	header: string
+	intro: string
+	items: string[]
+	button: {
+		text: string
+		link: string
+		disabled?: boolean
+	}
+}
+
+export default function ChoiceCard({ choice }: { choice: Choice }) {
 	return (
 		<div className="flex flex-col rounded-lg shadow-lg overflow-hidden">
 			<div className="flex-1 px-6 py-8 bg-white sm:p-10 sm:pb-6">
@@ -13,7 +24,7 @@ export default function ChoiceCard({ choice }) {
 				<ul className="space-y-4">
 					{choice.items.map((item) => (
 						<li className="flex items-start" key={item}>
-							<div className="flex-shrink-0">
+							<div className="shrink-0">
 								<svg
 									className="h-6 w-6 text-green-500"
 									fill="none"
@@ -32,15 +43,15 @@ export default function ChoiceCard({ choice }) {
 						</li>
 					))}
 				</ul>
-				<div className="rounded-md shadow">
+				<div className="rounded-md shadow-sm">
 					{choice.button.disabled ? (
-						<span className="flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md focus:outline-none focus:shadow-outline transition duration-150 ease-in-out text-gray-50  bg-gray-500">
+						<span className="flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md focus:outline-hidden focus:shadow-outline transition duration-150 ease-in-out text-gray-50  bg-gray-500">
 							{choice.button.text}
 						</span>
 					) : (
 						<Link
 							href={choice.button.link}
-							className={`flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md focus:outline-none focus:shadow-outline transition duration-150 ease-in-out text-orange-50 hover:text-white bg-orange-600 hover:bg-orange-500`}
+							className={`flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md focus:outline-hidden focus:shadow-outline transition duration-150 ease-in-out text-orange-50 hover:text-white bg-orange-600 hover:bg-orange-500`}
 							aria-describedby="tier-standard"
 						>
 							{choice.button.text}

components/Container.js

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react'
+
+export default function Container({ children }: { children: ReactNode }) {
+	return (
+		<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">{children}</div>
+	)
+}