Julian Tabel
3a64661760
- Add missing tsconfig strictness flags (noUncheckedIndexedAccess, exactOptionalPropertyTypes, noImplicitOverride, noPropertyAccessFromIndexSignature) and fix all resulting type errors - Replace ESLint/Prettier with oxlint 1.48.0 and oxfmt 0.33.0 - Pin all frontend and backend dependencies to exact versions - Pin GitHub Actions to SHA hashes with persist-credentials: false - Fix CI Python version mismatch (3.12 -> 3.14) and ruff target-version - Add vitest 4.0.18 with jsdom environment for frontend testing - Add ty 0.0.17 for Python type checking (non-blocking in CI) - Add actionlint and zizmor CI job for workflow linting and security audit - Add Dependabot config for npm, pip, and github-actions - Update CLAUDE.md and pre-commit hooks to reflect new tooling - Ignore Claude Code sandbox artifacts in gitignore Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
82 lines
2.8 KiB
TypeScript
82 lines
2.8 KiB
TypeScript
import { type FormEvent, type ReactNode, useState, useEffect } from 'react'
|
|
|
|
interface FormModalProps {
|
|
title: string
|
|
onClose: () => void
|
|
onSubmit: (e: FormEvent) => void
|
|
children: ReactNode
|
|
submitLabel?: string | undefined
|
|
isSubmitting?: boolean | undefined
|
|
onDelete?: (() => void) | undefined
|
|
isDeleting?: boolean | undefined
|
|
headerExtra?: ReactNode | undefined
|
|
}
|
|
|
|
export function FormModal({
|
|
title,
|
|
onClose,
|
|
onSubmit,
|
|
children,
|
|
submitLabel = 'Save',
|
|
isSubmitting,
|
|
onDelete,
|
|
isDeleting,
|
|
headerExtra,
|
|
}: FormModalProps) {
|
|
const [confirmingDelete, setConfirmingDelete] = useState(false)
|
|
|
|
// Reset confirm state when modal closes/reopens
|
|
useEffect(() => {
|
|
setConfirmingDelete(false)
|
|
}, [onDelete])
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
|
<div className="fixed inset-0 bg-black/50" onClick={onClose} />
|
|
<div className="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-lg w-full mx-4 max-h-[90vh] overflow-y-auto">
|
|
<div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
|
<h2 className="text-lg font-semibold">{title}</h2>
|
|
{headerExtra}
|
|
</div>
|
|
<form onSubmit={onSubmit}>
|
|
<div className="px-6 py-4 space-y-4">{children}</div>
|
|
<div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex items-center gap-3">
|
|
{onDelete && (
|
|
<button
|
|
type="button"
|
|
disabled={isDeleting}
|
|
onClick={() => {
|
|
if (confirmingDelete) {
|
|
onDelete()
|
|
} else {
|
|
setConfirmingDelete(true)
|
|
}
|
|
}}
|
|
onBlur={() => setConfirmingDelete(false)}
|
|
className="px-4 py-2 text-sm font-medium rounded-md text-red-600 dark:text-red-400 border border-red-300 dark:border-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 disabled:opacity-50"
|
|
>
|
|
{isDeleting ? 'Deleting...' : confirmingDelete ? 'Confirm?' : 'Delete'}
|
|
</button>
|
|
)}
|
|
<div className="flex-1" />
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="px-4 py-2 text-sm font-medium rounded-md border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
className="px-4 py-2 text-sm font-medium rounded-md bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50"
|
|
>
|
|
{isSubmitting ? 'Saving...' : submitLabel}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|