Merge pull request #36 from nathanvale/kent

Kent

.github/workflows/deploy.yml

@@ -30,6 +30,9 @@ jobs:
       - name: 📥 Download deps
         uses: bahmutov/npm-install@v1
 
+      - name: 🖼 Build icons
+        run: npm run build:icons
+
       - name: 🔬 Lint
         run: npm run lint
 
@@ -57,6 +60,9 @@ jobs:
       - name: 📥 Download deps
         uses: bahmutov/npm-install@v1
 
+      - name: 🖼 Build icons
+        run: npm run build:icons
+
       - name: 🔎 Type check
         run: npm run typecheck --if-present
 
@@ -78,6 +84,9 @@ jobs:
       - name: 🏄 Copy test env vars
         run: cp .env.example .env
 
+      - name: 🖼 Build icons
+        run: npm run build:icons
+
       - name: ⚡ Run vitest
         run: npm run test -- --coverage
 

.gitignore

@@ -1,4 +1,5 @@
 node_modules
+.DS_store
 
 /build
 /public/build
@@ -20,7 +21,10 @@ node_modules
 # Easy way to create temporary files/folders that won't accidentally be added to git
 *.local.*
 
-
 preferences.arc
 sam.json
-sam.yaml
+sam.yaml
+
+# generated files
+/app/components/ui/icon.svg
+/app/components/ui/icon.tsx

CONTRIBUTING.md

@@ -18,7 +18,8 @@ instructions:
 
 1.  Fork and clone the repo
 2.  Copy `.env.example` into `.env`
-3.  Run `npm run setup -s` to install dependencies and run validation
+3.  Run `npm install && npm run setup -s` to install dependencies and run
+    validation
 4.  Create a branch for your PR with `git checkout -b pr/your-branch-name`
 
 > Tip: Keep your `main` branch pointing at the original repository and make pull

app/components/confetti.tsx

@@ -5,6 +5,8 @@ import { ClientOnly } from 'remix-utils'
  * confetti is a unique random identifier which re-renders the component
  */
 export function Confetti({ confetti }: { confetti?: string }) {
+	if (!confetti) return null
+
 	return (
 		<ClientOnly>
 			{() => (

app/components/error-boundary.tsx

@@ -32,7 +32,7 @@ export function GeneralErrorBoundary({
 	}
 
 	return (
-		<div className="container mx-auto flex items-center justify-center p-20 text-h2">
+		<div className="container flex items-center justify-center p-20 text-h2">
 			{isRouteErrorResponse(error)
 				? (statusHandlers?.[error.status] ?? defaultStatusHandler)({
 						error,

app/components/floating-toolbar.tsx

@@ -0,0 +1,2 @@
+export const floatingToolbarClassName =
+	'absolute bottom-3 left-3 right-3 flex items-center gap-2 rounded-lg bg-muted/80 p-4 pl-5 shadow-xl shadow-accent backdrop-blur-sm md:gap-4 md:pl-7 justify-end'

app/components/forms.tsx

@@ -25,9 +25,9 @@ export function ErrorList({
 			<AlertCircle className="h-4 w-4" />
 			<AlertTitle>{title}</AlertTitle>
 			<AlertDescription>
-				<ul id={id} className="space-y-2">
+				<ul id={id} className="flex flex-col gap-1">
 					{errorsToRender.map(e => (
-						<li key={e} className="text-sm font-medium text-destructive">
+						<li key={e} className="text-foreground-danger text-[10px]">
 							{e}
 						</li>
 					))}
@@ -43,8 +43,8 @@ export function Field({
 	errors,
 	className,
 }: {
-	labelProps: Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'className'>
-	inputProps: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className'>
+	labelProps: React.LabelHTMLAttributes<HTMLLabelElement>
+	inputProps: React.InputHTMLAttributes<HTMLInputElement>
 	errors?: ListOfErrors
 	className?: string
 }) {
@@ -90,7 +90,7 @@ export function TextareaField({
 				aria-describedby={errorId}
 				{...textareaProps}
 			/>
-			<div className="px-4 pb-3 pt-1">
+			<div className="min-h-[32px] px-4 pb-3 pt-1">
 				{errorId ? <ErrorList id={errorId} errors={errors} /> : null}
 			</div>
 		</div>

app/components/ui/dialog.tsx

@@ -40,7 +40,7 @@ const DialogContent = React.forwardRef<
 		<DialogPrimitive.Content
 			ref={ref}
 			className={cn(
-				'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
+				'fixed left-[50%] top-[50%] z-50 grid max-h-[90%] w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 overflow-y-auto border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
 				className,
 			)}
 			{...props}