large rewrite; lint, type fixes; artwork branch clone complete

.husky/pre-commit

@@ -1,6 +1,6 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-# npm run build
-# npm run lint
-# npm run typecheck
+npm run build
+npm run lint
+npm run typecheck

.prettierrc.js

@@ -5,34 +5,3 @@ export default {
 	...defaultConfig,
 	// .. your overrides here...
 }
-
-// /** @type {import("prettier").Options} */
-// export default {
-// 	arrowParens: 'avoid',
-// 	bracketSameLine: false,
-// 	bracketSpacing: true,
-// 	embeddedLanguageFormatting: 'auto',
-// 	endOfLine: 'lf',
-// 	htmlWhitespaceSensitivity: 'css',
-// 	insertPragma: false,
-// 	jsxSingleQuote: false,
-// 	printWidth: 80,
-// 	proseWrap: 'always',
-// 	quoteProps: 'as-needed',
-// 	requirePragma: false,
-// 	semi: false,
-// 	singleAttributePerLine: false,
-// 	singleQuote: true,
-// 	tabWidth: 2,
-// 	trailingComma: 'all',
-// 	useTabs: true,
-// 	overrides: [
-// 		{
-// 			files: ['**/*.json'],
-// 			options: {
-// 				useTabs: false,
-// 			},
-// 		},
-// 	],
-// 	plugins: ['prettier-plugin-tailwindcss'],
-// }

app/components/logo.tsx

@@ -21,7 +21,7 @@ const Logo = () => {
 		<Link to="/" className="group grid leading-snug">
 			<div className="mt-[-12px] flex flex-col">
 				{/* It first renders the Character component for the first character of the string */}
-				<Character char={str[0]} />
+				<Character char={str[0] as string} />
 				<div className="flex">
 					{/* Then it maps over the rest of the string and for each character, it renders a Character component */}
 					{str

app/components/progress-bar.tsx

@@ -22,7 +22,7 @@ function EpicProgress() {
 			.getAnimations()
 			.map(({ finished }) => finished)
 
-		Promise.allSettled(animationPromises).then(() => {
+		void Promise.allSettled(animationPromises).then(() => {
 			if (!delayedPending) setAnimationComplete(true)
 		})
 	}, [delayedPending])

app/components/templates/canvas/artwork-canvas.tsx

@@ -20,13 +20,13 @@ export const ArtworkCanvas = memo(
 		useEffect(() => {
 			const canvas = canvasRef.current
 			if (canvas) {
-				canvasDrawService({ canvas, generator })
+				void canvasDrawService({ canvas, generator })
 			}
 		}, [canvasRef, generator, refresh])
 
 		const canvasFooter = useCallback(() => {
 			const handleRefresh = () => {
-				setRefresh(prev => prev + 1)
+				setRefresh((prev) => prev + 1)
 			}
 			return (
 				<CanvasFooter

app/components/templates/canvas/canvas-share.tsx

@@ -19,7 +19,7 @@ export const ShareCanvas = memo(
 				const canvas = canvasRef.current
 				if (!canvas) return false
 
-				canvas.toBlob(blob => {
+				canvas.toBlob((blob) => {
 					if (!blob) return
 					const file = new File([blob], downloadImageFileName(), {
 						type: 'image/png',
@@ -63,7 +63,7 @@ export const ShareCanvas = memo(
 			const shareData = {
 				files: filesArray,
 			}
-			navigator.share(shareData as any).then(() => {
+			void navigator.share(shareData as any).then(() => {
 				console.log('Shared successfully')
 			})
 		}

app/components/templates/combobox/nav-combobox.tsx

@@ -21,7 +21,6 @@ import { capitalize } from '#app/utils/string-formatting'
 
 interface EntitySelectorProps extends PopoverProps {
 	entities: IEntityWithSlug[]
-	entitySingular?: string
 	entityPlural?: string
 	placeholder?: string
 	slugParam?: string
@@ -30,7 +29,6 @@ interface EntitySelectorProps extends PopoverProps {
 
 export function ComboboxNav({
 	entities,
-	entitySingular = 'entity',
 	entityPlural = 'entities',
 	placeholder = 'Select...',
 	slugParam,
@@ -40,7 +38,7 @@ export function ComboboxNav({
 	const [open, setOpen] = useState(false)
 	const params = useParams()
 	const paramsSlug = slugParam ? params[slugParam] : params.slug
-	const currentEntity = entities.find(entity => entity.slug === paramsSlug)
+	const currentEntity = entities.find((entity) => entity.slug === paramsSlug)
 
 	return (
 		<Popover open={open} onOpenChange={setOpen} {...props}>
@@ -64,7 +62,7 @@ export function ComboboxNav({
 					<CommandInput placeholder={`Search ${entityPlural}...`} />
 					<CommandEmpty>No {entityPlural} found.</CommandEmpty>
 					<CommandGroup heading={capitalize(entityPlural)}>
-						{entities.map(entity => (
+						{entities.map((entity) => (
 							<CommandItem key={entity.id} onSelect={() => setOpen(false)}>
 								<Link prefetch="intent" to={`${baseUrl}/${entity.slug}`}>
 									{entity.name}

app/components/templates/form/fetcher-hex.tsx

@@ -68,7 +68,7 @@ export const FetcherHex = ({
 	// hack to submit select form on change
 	// through conform-to and fetcher
 	const submitRef = useRef<HTMLButtonElement>(null)
-	const handleChangeSubmit = useDebounce((f: HTMLFormElement) => {
+	const handleChangeSubmit = useDebounce(() => {
 		submitRef.current?.click()
 	}, 400)
 
@@ -82,7 +82,7 @@ export const FetcherHex = ({
 		<fetcher.Form
 			method="POST"
 			action={route}
-			onChange={e => handleChangeSubmit(e.currentTarget)}
+			onChange={handleChangeSubmit}
 			{...form.props}
 			className="flex-1"
 		>
@@ -95,10 +95,10 @@ export const FetcherHex = ({
 				<Input
 					maxLength={6}
 					className="flex h-8"
-					onInput={e => handleInput(e.currentTarget)}
+					onInput={(e) => handleInput(e.currentTarget)}
 					placeholder={placeholder}
 					disabled={isPending}
-					{...conform.input(fields[fieldName], {
+					{...conform.input(fields[fieldName]!, {
 						ariaAttributes: true,
 					})}
 				/>

app/components/templates/form/fetcher-icon-dialog.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react'
 import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { type z } from 'zod'
 import { DialogContentGrid } from '#app/components/layout/dialog'
+import { quickToast } from '#app/components/toaster.js'
 import {
 	Dialog,
 	DialogContent,
@@ -73,6 +74,15 @@ export const FetcherIconDialog = ({
 			// parent component may want to do something
 			// such as navigate to a new page
 			onSuccessfulSubmission(fetcher.data)
+		} else if (
+			fetcher.state === 'loading' &&
+			fetcher.data?.status === 'error'
+		) {
+			quickToast({
+				type: 'error',
+				title: 'Error',
+				description: fetcher.data.message,
+			})
 		}
 	}, [fetcher, onSuccessfulSubmission])
 

app/components/templates/form/fetcher-image-select.tsx

@@ -129,7 +129,7 @@ export const FetcherImageSelect = ({
 							<fieldset>
 								<FlexColumn className="gap-4">
 									{conform
-										.collection(assetImageId, {
+										.collection(assetImageId!, {
 											type: 'radio',
 											options: images.map(image => image.id),
 										})

app/components/templates/form/fetcher-image-upload.tsx

@@ -124,7 +124,7 @@ export const FetcherImageUpload = ({
 								<ImagePreviewContainer>
 									<ImagePreviewWrapper>
 										<ImagePreviewLabel
-											htmlFor={fields.file.id}
+											htmlFor={fields.file?.id ?? ''}
 											className={!previewImage ? noImagePreviewClassName : ''}
 										>
 											{previewImage ? (
@@ -159,7 +159,7 @@ export const FetcherImageUpload = ({
 													}
 												}}
 												accept="image/*"
-												{...conform.input(fields.file, {
+												{...conform.input(fields.file!, {
 													type: 'file',
 													ariaAttributes: true,
 												})}
@@ -168,38 +168,38 @@ export const FetcherImageUpload = ({
 									</ImagePreviewWrapper>
 									<div className="min-h-[32px] px-4 pb-3 pt-1">
 										<ErrorList
-											id={fields.file.errorId}
-											errors={fields.file.errors}
+											id={fields.file?.errorId ?? ''}
+											errors={fields.file?.errors ?? []}
 										/>
 									</div>
 								</ImagePreviewContainer>
 								<Field
 									labelProps={{ children: 'Name' }}
 									inputProps={{
 										autoFocus: true,
-										...conform.input(fields.name, { ariaAttributes: true }),
-										onChange: e => setName(e.currentTarget.value),
+										...conform.input(fields.name!, { ariaAttributes: true }),
+										onChange: (e) => setName(e.currentTarget.value),
 									}}
-									errors={fields.name.errors}
+									errors={fields.name!.errors}
 								/>
 								<TextareaField
 									labelProps={{ children: 'Description' }}
 									textareaProps={{
-										...conform.textarea(fields.description, {
+										...conform.textarea(fields.description!, {
 											ariaAttributes: true,
 										}),
 									}}
-									errors={fields.description.errors}
+									errors={fields.description!.errors}
 								/>
 								<TextareaField
 									labelProps={{ children: 'Alt Text' }}
 									textareaProps={{
-										...conform.textarea(fields.altText, {
+										...conform.textarea(fields.altText!, {
 											ariaAttributes: true,
 										}),
-										onChange: e => setAltText(e.currentTarget.value),
+										onChange: (e) => setAltText(e.currentTarget.value),
 									}}
-									errors={fields.altText.errors}
+									errors={fields.altText!.errors}
 								/>
 							</FlexColumn>
 						</DialogFormsContainer>

app/components/templates/form/fetcher-number.tsx

@@ -67,15 +67,15 @@ export const FetcherNumber = ({
 	// hack to submit select form on change
 	// through conform-to and fetcher
 	const submitRef = useRef<HTMLButtonElement>(null)
-	const handleChangeSubmit = useDebounce((f: HTMLFormElement) => {
+	const handleChangeSubmit = useDebounce(() => {
 		submitRef.current?.click()
 	}, 400)
 
 	return (
 		<fetcher.Form
 			method="POST"
 			action={route}
-			onChange={e => handleChangeSubmit(e.currentTarget)}
+			onChange={handleChangeSubmit}
 			{...form.props}
 			className="flex-1"
 		>
@@ -88,7 +88,7 @@ export const FetcherNumber = ({
 			<div className="flex w-full items-center space-x-2">
 				{/* icon might be for artwork height, width */}
 				{icon && (
-					<Label htmlFor={fields[fieldName].id} className="w-5 flex-shrink-0">
+					<Label htmlFor={fields[fieldName]!.id} className="w-5 flex-shrink-0">
 						<Icon name={icon} className="h-5 w-5" />
 					</Label>
 				)}
@@ -103,7 +103,7 @@ export const FetcherNumber = ({
 						autoComplete="off"
 						placeholder={placeholder}
 						disabled={isPending}
-						{...conform.input(fields[fieldName], {
+						{...conform.input(fields[fieldName]!, {
 							ariaAttributes: true,
 						})}
 					/>

app/components/templates/form/fetcher-select.tsx

@@ -71,15 +71,15 @@ export const FetcherSelect = ({
 	// hack to submit select form on change
 	// through conform-to and fetcher
 	const submitRef = useRef<HTMLButtonElement>(null)
-	const handleChangeSubmit = (f: HTMLFormElement) => {
+	const handleChangeSubmit = () => {
 		submitRef.current?.click()
 	}
 
 	return (
 		<fetcher.Form
 			method="POST"
 			action={route}
-			onChange={e => handleChangeSubmit(e.currentTarget)}
+			onChange={handleChangeSubmit}
 			{...form.props}
 			className="flex-1"
 		>
@@ -88,15 +88,15 @@ export const FetcherSelect = ({
 			{/* hidden field values */}
 			{children}
 
-			<Select disabled={isPending} {...conform.input(fields[fieldName])}>
+			<Select disabled={isPending} {...conform.input(fields[fieldName]!)}>
 				<TooltipHydrated tooltipText={tooltipText} isHydrated={isHydrated}>
 					<SelectTrigger className="flex h-8 flex-1 text-left">
 						<SelectValue placeholder={placeholder} />
 					</SelectTrigger>
 				</TooltipHydrated>
 				<SelectContent>
-					{options.map(option => {
-						const [value, label] = Object.entries(option)[0]
+					{options.map((option) => {
+						const [value, label] = Object.entries(option)[0] as [string, string]
 						return (
 							<SelectItem key={label} value={value}>
 								{label as string}

app/components/templates/form/fetcher-text.tsx

@@ -69,15 +69,15 @@ export const FetcherText = ({
 	// hack to submit select form on change
 	// through conform-to and fetcher
 	const submitRef = useRef<HTMLButtonElement>(null)
-	const handleChangeSubmit = useDebounce((f: HTMLFormElement) => {
+	const handleChangeSubmit = useDebounce(() => {
 		submitRef.current?.click()
 	}, 400)
 
 	return (
 		<fetcher.Form
 			method="POST"
 			action={route}
-			onChange={e => handleChangeSubmit(e.currentTarget)}
+			onChange={handleChangeSubmit}
 			{...form.props}
 			className="flex-1"
 		>
@@ -90,7 +90,7 @@ export const FetcherText = ({
 			<div className="flex w-full items-center space-x-2">
 				{/* icon might be for artwork height, width */}
 				{icon && (
-					<Label htmlFor={fields[fieldName].id} className="w-5 flex-shrink-0">
+					<Label htmlFor={fields[fieldName]!.id} className="w-5 flex-shrink-0">
 						<Icon name={icon} className="h-5 w-5" />
 					</Label>
 				)}
@@ -101,7 +101,7 @@ export const FetcherText = ({
 						autoComplete="off"
 						placeholder={placeholder}
 						disabled={disabled || isPending}
-						{...conform.input(fields[fieldName], {
+						{...conform.input(fields[fieldName]!, {
 							ariaAttributes: true,
 						})}
 					/>