diff --git a/apps/web/src/dialogs/resume/sections/award.tsx b/apps/web/src/dialogs/resume/sections/award.tsx index 7adc4190a..a19e716a7 100644 --- a/apps/web/src/dialogs/resume/sections/award.tsx +++ b/apps/web/src/dialogs/resume/sections/award.tsx @@ -4,14 +4,6 @@ import { Trans } from "@lingui/react/macro"; import { PencilSimpleLineIcon, PlusIcon } from "@phosphor-icons/react"; import { useStore } from "@tanstack/react-form"; import { awardItemSchema } from "@reactive-resume/schema/resume/data"; -import { Button } from "@reactive-resume/ui/components/button"; -import { - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle, -} from "@reactive-resume/ui/components/dialog"; import { FormControl, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form"; import { Input } from "@reactive-resume/ui/components/input"; import { Switch } from "@reactive-resume/ui/components/switch"; @@ -23,6 +15,7 @@ import { useFormBlocker } from "@/hooks/use-form-blocker"; import { makeSectionItem } from "@/libs/resume/make-section-item"; import { createSectionItem, updateSectionItem } from "@/libs/resume/section-actions"; import { useAppForm, withForm } from "@/libs/tanstack-form"; +import { SectionItemDialog } from "./section-item-dialog"; const formSchema = awardItemSchema; @@ -57,36 +50,16 @@ export function CreateAwardDialog({ data }: DialogProps<"resume.sections.awards. const isSubmitting = useStore(form.store, (state) => state.isSubmitting); return ( - - - - - Create a new award - - - - -
{ - event.preventDefault(); - event.stopPropagation(); - void form.handleSubmit(); - }} - > - - - - - - - - -
+ Create a new award} + icon={} + onSubmit={() => void form.handleSubmit()} + onCancel={requestClose} + isSubmitting={isSubmitting} + submitLabel={Create} + > + + ); } @@ -109,36 +82,16 @@ export function UpdateAwardDialog({ data }: DialogProps<"resume.sections.awards. const isSubmitting = useStore(form.store, (state) => state.isSubmitting); return ( - - - - - Update an existing award - - - - -
{ - event.preventDefault(); - event.stopPropagation(); - void form.handleSubmit(); - }} - > - - - - - - - - -
+ Update an existing award} + icon={} + onSubmit={() => void form.handleSubmit()} + onCancel={requestClose} + isSubmitting={isSubmitting} + submitLabel={Save Changes} + > + + ); } diff --git a/apps/web/src/dialogs/resume/sections/certification.tsx b/apps/web/src/dialogs/resume/sections/certification.tsx index 1e8a15c9f..2d19c5cd1 100644 --- a/apps/web/src/dialogs/resume/sections/certification.tsx +++ b/apps/web/src/dialogs/resume/sections/certification.tsx @@ -4,14 +4,6 @@ import { Trans } from "@lingui/react/macro"; import { PencilSimpleLineIcon, PlusIcon } from "@phosphor-icons/react"; import { useStore } from "@tanstack/react-form"; import { certificationItemSchema } from "@reactive-resume/schema/resume/data"; -import { Button } from "@reactive-resume/ui/components/button"; -import { - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle, -} from "@reactive-resume/ui/components/dialog"; import { FormControl, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form"; import { Switch } from "@reactive-resume/ui/components/switch"; import { RichInput } from "@/components/input/rich-input"; @@ -22,6 +14,7 @@ import { useFormBlocker } from "@/hooks/use-form-blocker"; import { makeSectionItem } from "@/libs/resume/make-section-item"; import { createSectionItem, updateSectionItem } from "@/libs/resume/section-actions"; import { useAppForm, withForm } from "@/libs/tanstack-form"; +import { SectionItemDialog } from "./section-item-dialog"; const formSchema = certificationItemSchema; @@ -56,36 +49,16 @@ export function CreateCertificationDialog({ data }: DialogProps<"resume.sections const isSubmitting = useStore(form.store, (state) => state.isSubmitting); return ( - - - - - Create a new certification - - - - -
{ - event.preventDefault(); - event.stopPropagation(); - void form.handleSubmit(); - }} - > - - - - - - - - -
+ Create a new certification} + icon={} + onSubmit={() => void form.handleSubmit()} + onCancel={requestClose} + isSubmitting={isSubmitting} + submitLabel={Create} + > + + ); } @@ -108,36 +81,16 @@ export function UpdateCertificationDialog({ data }: DialogProps<"resume.sections const isSubmitting = useStore(form.store, (state) => state.isSubmitting); return ( - - - - - Update an existing certification - - - - -
{ - event.preventDefault(); - event.stopPropagation(); - void form.handleSubmit(); - }} - > - - - - - - - - -
+ Update an existing certification} + icon={} + onSubmit={() => void form.handleSubmit()} + onCancel={requestClose} + isSubmitting={isSubmitting} + submitLabel={Save Changes} + > + + ); } diff --git a/apps/web/src/dialogs/resume/sections/cover-letter.tsx b/apps/web/src/dialogs/resume/sections/cover-letter.tsx index 456319506..9b832c6ac 100644 --- a/apps/web/src/dialogs/resume/sections/cover-letter.tsx +++ b/apps/web/src/dialogs/resume/sections/cover-letter.tsx @@ -4,14 +4,6 @@ import { Trans } from "@lingui/react/macro"; import { PencilSimpleLineIcon, PlusIcon } from "@phosphor-icons/react"; import { useStore } from "@tanstack/react-form"; import { coverLetterItemSchema } from "@reactive-resume/schema/resume/data"; -import { Button } from "@reactive-resume/ui/components/button"; -import { - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle, -} from "@reactive-resume/ui/components/dialog"; import { FormControl, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form"; import { RichInput } from "@/components/input/rich-input"; import { useDialogStore } from "@/dialogs/store"; @@ -19,6 +11,7 @@ import { useUpdateResumeData } from "@/features/resume/builder/draft"; import { useFormBlocker } from "@/hooks/use-form-blocker"; import { makeSectionItem } from "@/libs/resume/make-section-item"; import { useAppForm, withForm } from "@/libs/tanstack-form"; +import { SectionItemDialog } from "./section-item-dialog"; const formSchema = coverLetterItemSchema; @@ -53,36 +46,17 @@ export function CreateCoverLetterDialog({ data }: DialogProps<"resume.sections.c const isSubmitting = useStore(form.store, (state) => state.isSubmitting); return ( - - - - - Create a new cover letter - - - - -
{ - event.preventDefault(); - event.stopPropagation(); - void form.handleSubmit(); - }} - > - - - - - - - - -
+ Create a new cover letter} + icon={} + onSubmit={() => void form.handleSubmit()} + onCancel={requestClose} + isSubmitting={isSubmitting} + submitLabel={Create} + singleColumn + > + + ); } @@ -110,36 +84,17 @@ export function UpdateCoverLetterDialog({ data }: DialogProps<"resume.sections.c const isSubmitting = useStore(form.store, (state) => state.isSubmitting); return ( - - - - - Update an existing cover letter - - - - -
{ - event.preventDefault(); - event.stopPropagation(); - void form.handleSubmit(); - }} - > - - - - - - - - -
+ Update an existing cover letter} + icon={} + onSubmit={() => void form.handleSubmit()} + onCancel={requestClose} + isSubmitting={isSubmitting} + submitLabel={Save Changes} + singleColumn + > + + ); } diff --git a/apps/web/src/dialogs/resume/sections/education.tsx b/apps/web/src/dialogs/resume/sections/education.tsx index 33c8fd5ef..2253a266b 100644 --- a/apps/web/src/dialogs/resume/sections/education.tsx +++ b/apps/web/src/dialogs/resume/sections/education.tsx @@ -4,14 +4,6 @@ import { Trans } from "@lingui/react/macro"; import { PencilSimpleLineIcon, PlusIcon } from "@phosphor-icons/react"; import { useStore } from "@tanstack/react-form"; import { educationItemSchema } from "@reactive-resume/schema/resume/data"; -import { Button } from "@reactive-resume/ui/components/button"; -import { - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle, -} from "@reactive-resume/ui/components/dialog"; import { FormControl, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form"; import { Switch } from "@reactive-resume/ui/components/switch"; import { RichInput } from "@/components/input/rich-input"; @@ -22,6 +14,7 @@ import { useFormBlocker } from "@/hooks/use-form-blocker"; import { makeSectionItem } from "@/libs/resume/make-section-item"; import { createSectionItem, updateSectionItem } from "@/libs/resume/section-actions"; import { useAppForm, withForm } from "@/libs/tanstack-form"; +import { SectionItemDialog } from "./section-item-dialog"; const formSchema = educationItemSchema; @@ -59,36 +52,16 @@ export function CreateEducationDialog({ data }: DialogProps<"resume.sections.edu const isSubmitting = useStore(form.store, (state) => state.isSubmitting); return ( - - - - - Create a new education - - - - -
{ - event.preventDefault(); - event.stopPropagation(); - void form.handleSubmit(); - }} - > - - - - - - - - -
+ Create a new education} + icon={} + onSubmit={() => void form.handleSubmit()} + onCancel={requestClose} + isSubmitting={isSubmitting} + submitLabel={Create} + > + + ); } @@ -111,36 +84,16 @@ export function UpdateEducationDialog({ data }: DialogProps<"resume.sections.edu const isSubmitting = useStore(form.store, (state) => state.isSubmitting); return ( - - - - - Update an existing education - - - - -
{ - event.preventDefault(); - event.stopPropagation(); - void form.handleSubmit(); - }} - > - - - - - - - - -
+ Update an existing education} + icon={} + onSubmit={() => void form.handleSubmit()} + onCancel={requestClose} + isSubmitting={isSubmitting} + submitLabel={Save Changes} + > + + ); } diff --git a/apps/web/src/dialogs/resume/sections/experience.tsx b/apps/web/src/dialogs/resume/sections/experience.tsx index 6c8aa6f78..26bba3047 100644 --- a/apps/web/src/dialogs/resume/sections/experience.tsx +++ b/apps/web/src/dialogs/resume/sections/experience.tsx @@ -7,13 +7,6 @@ import { useStore } from "@tanstack/react-form"; import { AnimatePresence, Reorder, useDragControls } from "motion/react"; import { experienceItemSchema } from "@reactive-resume/schema/resume/data"; import { Button } from "@reactive-resume/ui/components/button"; -import { - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle, -} from "@reactive-resume/ui/components/dialog"; import { FormControl, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form"; import { Input } from "@reactive-resume/ui/components/input"; import { Switch } from "@reactive-resume/ui/components/switch"; @@ -26,6 +19,7 @@ import { useFormBlocker } from "@/hooks/use-form-blocker"; import { makeSectionItem } from "@/libs/resume/make-section-item"; import { createSectionItem, updateSectionItem } from "@/libs/resume/section-actions"; import { useAppForm, withForm } from "@/libs/tanstack-form"; +import { SectionItemDialog } from "./section-item-dialog"; const formSchema = experienceItemSchema; @@ -62,36 +56,16 @@ export function CreateExperienceDialog({ data }: DialogProps<"resume.sections.ex const isSubmitting = useStore(form.store, (state) => state.isSubmitting); return ( - - - - - Create a new experience - - - - -
{ - event.preventDefault(); - event.stopPropagation(); - void form.handleSubmit(); - }} - > - - - - - - - - -
+ Create a new experience} + icon={} + onSubmit={() => void form.handleSubmit()} + onCancel={requestClose} + isSubmitting={isSubmitting} + submitLabel={Create} + > + + ); } @@ -114,36 +88,16 @@ export function UpdateExperienceDialog({ data }: DialogProps<"resume.sections.ex const isSubmitting = useStore(form.store, (state) => state.isSubmitting); return ( - - - - - Update an existing experience - - - - -
{ - event.preventDefault(); - event.stopPropagation(); - void form.handleSubmit(); - }} - > - - - - - - - - -
+ Update an existing experience} + icon={} + onSubmit={() => void form.handleSubmit()} + onCancel={requestClose} + isSubmitting={isSubmitting} + submitLabel={Save Changes} + > + + ); } diff --git a/apps/web/src/dialogs/resume/sections/interest.tsx b/apps/web/src/dialogs/resume/sections/interest.tsx index 3b39bc286..b62e9d288 100644 --- a/apps/web/src/dialogs/resume/sections/interest.tsx +++ b/apps/web/src/dialogs/resume/sections/interest.tsx @@ -4,14 +4,6 @@ import { Trans } from "@lingui/react/macro"; import { PencilSimpleLineIcon, PlusIcon } from "@phosphor-icons/react"; import { useStore } from "@tanstack/react-form"; import { interestItemSchema } from "@reactive-resume/schema/resume/data"; -import { Button } from "@reactive-resume/ui/components/button"; -import { - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle, -} from "@reactive-resume/ui/components/dialog"; import { FormControl, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form"; import { Input } from "@reactive-resume/ui/components/input"; import { PopoverTrigger } from "@reactive-resume/ui/components/popover"; @@ -25,6 +17,7 @@ import { useFormBlocker } from "@/hooks/use-form-blocker"; import { makeSectionItem } from "@/libs/resume/make-section-item"; import { createSectionItem, updateSectionItem } from "@/libs/resume/section-actions"; import { useAppForm, withForm } from "@/libs/tanstack-form"; +import { SectionItemDialog } from "./section-item-dialog"; const formSchema = interestItemSchema; @@ -58,36 +51,16 @@ export function CreateInterestDialog({ data }: DialogProps<"resume.sections.inte const isSubmitting = useStore(form.store, (state) => state.isSubmitting); return ( - - - - - Create a new interest - - - - -
{ - event.preventDefault(); - event.stopPropagation(); - void form.handleSubmit(); - }} - > - - - - - - - - -
+ Create a new interest} + icon={} + onSubmit={() => void form.handleSubmit()} + onCancel={requestClose} + isSubmitting={isSubmitting} + submitLabel={Create} + > + + ); } @@ -110,36 +83,16 @@ export function UpdateInterestDialog({ data }: DialogProps<"resume.sections.inte const isSubmitting = useStore(form.store, (state) => state.isSubmitting); return ( - - - - - Update an existing interest - - - - -
{ - event.preventDefault(); - event.stopPropagation(); - void form.handleSubmit(); - }} - > - - - - - - - - -
+ Update an existing interest} + icon={} + onSubmit={() => void form.handleSubmit()} + onCancel={requestClose} + isSubmitting={isSubmitting} + submitLabel={Save Changes} + > + + ); } diff --git a/apps/web/src/dialogs/resume/sections/language.tsx b/apps/web/src/dialogs/resume/sections/language.tsx index 492cce152..14a2c3fdb 100644 --- a/apps/web/src/dialogs/resume/sections/language.tsx +++ b/apps/web/src/dialogs/resume/sections/language.tsx @@ -5,14 +5,6 @@ import { Trans } from "@lingui/react/macro"; import { PencilSimpleLineIcon, PlusIcon } from "@phosphor-icons/react"; import { useStore } from "@tanstack/react-form"; import { languageItemSchema } from "@reactive-resume/schema/resume/data"; -import { Button } from "@reactive-resume/ui/components/button"; -import { - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle, -} from "@reactive-resume/ui/components/dialog"; import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form"; import { Slider } from "@reactive-resume/ui/components/slider"; import { useDialogStore } from "@/dialogs/store"; @@ -21,6 +13,7 @@ import { useFormBlocker } from "@/hooks/use-form-blocker"; import { makeSectionItem } from "@/libs/resume/make-section-item"; import { createSectionItem, updateSectionItem } from "@/libs/resume/section-actions"; import { useAppForm, withForm } from "@/libs/tanstack-form"; +import { SectionItemDialog } from "./section-item-dialog"; const formSchema = languageItemSchema; @@ -53,36 +46,16 @@ export function CreateLanguageDialog({ data }: DialogProps<"resume.sections.lang const isSubmitting = useStore(form.store, (state) => state.isSubmitting); return ( - - - - - Create a new language - - - - -
{ - event.preventDefault(); - event.stopPropagation(); - void form.handleSubmit(); - }} - > - - - - - - - - -
+ Create a new language} + icon={} + onSubmit={() => void form.handleSubmit()} + onCancel={requestClose} + isSubmitting={isSubmitting} + submitLabel={Create} + > + + ); } @@ -105,36 +78,16 @@ export function UpdateLanguageDialog({ data }: DialogProps<"resume.sections.lang const isSubmitting = useStore(form.store, (state) => state.isSubmitting); return ( - - - - - Update an existing language - - - - -
{ - event.preventDefault(); - event.stopPropagation(); - void form.handleSubmit(); - }} - > - - - - - - - - -
+ Update an existing language} + icon={} + onSubmit={() => void form.handleSubmit()} + onCancel={requestClose} + isSubmitting={isSubmitting} + submitLabel={Save Changes} + > + + ); } diff --git a/apps/web/src/dialogs/resume/sections/profile.tsx b/apps/web/src/dialogs/resume/sections/profile.tsx index 580019745..b318a7351 100644 --- a/apps/web/src/dialogs/resume/sections/profile.tsx +++ b/apps/web/src/dialogs/resume/sections/profile.tsx @@ -4,14 +4,6 @@ import { Trans } from "@lingui/react/macro"; import { AtIcon, PencilSimpleLineIcon, PlusIcon } from "@phosphor-icons/react"; import { useStore } from "@tanstack/react-form"; import { profileItemSchema } from "@reactive-resume/schema/resume/data"; -import { Button } from "@reactive-resume/ui/components/button"; -import { - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle, -} from "@reactive-resume/ui/components/dialog"; import { FormControl, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form"; import { Input } from "@reactive-resume/ui/components/input"; import { @@ -32,6 +24,7 @@ import { useFormBlocker } from "@/hooks/use-form-blocker"; import { makeSectionItem } from "@/libs/resume/make-section-item"; import { createSectionItem, updateSectionItem } from "@/libs/resume/section-actions"; import { useAppForm, withForm } from "@/libs/tanstack-form"; +import { SectionItemDialog } from "./section-item-dialog"; const formSchema = profileItemSchema; @@ -66,36 +59,16 @@ export function CreateProfileDialog({ data }: DialogProps<"resume.sections.profi const isSubmitting = useStore(form.store, (state) => state.isSubmitting); return ( - - - - - Create a new profile - - - - -
{ - event.preventDefault(); - event.stopPropagation(); - void form.handleSubmit(); - }} - > - - - - - - - - -
+ Create a new profile} + icon={} + onSubmit={() => void form.handleSubmit()} + onCancel={requestClose} + isSubmitting={isSubmitting} + submitLabel={Create} + > + + ); } @@ -118,36 +91,16 @@ export function UpdateProfileDialog({ data }: DialogProps<"resume.sections.profi const isSubmitting = useStore(form.store, (state) => state.isSubmitting); return ( - - - - - Update an existing profile - - - - -
{ - event.preventDefault(); - event.stopPropagation(); - void form.handleSubmit(); - }} - > - - - - - - - - -
+ Update an existing profile} + icon={} + onSubmit={() => void form.handleSubmit()} + onCancel={requestClose} + isSubmitting={isSubmitting} + submitLabel={Save Changes} + > + + ); } diff --git a/apps/web/src/dialogs/resume/sections/project.tsx b/apps/web/src/dialogs/resume/sections/project.tsx index 113c99577..3e051ce00 100644 --- a/apps/web/src/dialogs/resume/sections/project.tsx +++ b/apps/web/src/dialogs/resume/sections/project.tsx @@ -4,14 +4,6 @@ import { Trans } from "@lingui/react/macro"; import { PencilSimpleLineIcon, PlusIcon } from "@phosphor-icons/react"; import { useStore } from "@tanstack/react-form"; import { projectItemSchema } from "@reactive-resume/schema/resume/data"; -import { Button } from "@reactive-resume/ui/components/button"; -import { - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle, -} from "@reactive-resume/ui/components/dialog"; import { FormControl, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form"; import { Switch } from "@reactive-resume/ui/components/switch"; import { RichInput } from "@/components/input/rich-input"; @@ -22,6 +14,7 @@ import { useFormBlocker } from "@/hooks/use-form-blocker"; import { makeSectionItem } from "@/libs/resume/make-section-item"; import { createSectionItem, updateSectionItem } from "@/libs/resume/section-actions"; import { useAppForm, withForm } from "@/libs/tanstack-form"; +import { SectionItemDialog } from "./section-item-dialog"; const formSchema = projectItemSchema; @@ -55,36 +48,16 @@ export function CreateProjectDialog({ data }: DialogProps<"resume.sections.proje const isSubmitting = useStore(form.store, (state) => state.isSubmitting); return ( - - - - - Create a new project - - - - -
{ - event.preventDefault(); - event.stopPropagation(); - void form.handleSubmit(); - }} - > - - - - - - - - -
+ Create a new project} + icon={} + onSubmit={() => void form.handleSubmit()} + onCancel={requestClose} + isSubmitting={isSubmitting} + submitLabel={Create} + > + + ); } @@ -107,36 +80,16 @@ export function UpdateProjectDialog({ data }: DialogProps<"resume.sections.proje const isSubmitting = useStore(form.store, (state) => state.isSubmitting); return ( - - - - - Update an existing project - - - - -
{ - event.preventDefault(); - event.stopPropagation(); - void form.handleSubmit(); - }} - > - - - - - - - - -
+ Update an existing project} + icon={} + onSubmit={() => void form.handleSubmit()} + onCancel={requestClose} + isSubmitting={isSubmitting} + submitLabel={Save Changes} + > + + ); } diff --git a/apps/web/src/dialogs/resume/sections/publication.tsx b/apps/web/src/dialogs/resume/sections/publication.tsx index 9648b8d3d..5d62b31e9 100644 --- a/apps/web/src/dialogs/resume/sections/publication.tsx +++ b/apps/web/src/dialogs/resume/sections/publication.tsx @@ -4,14 +4,6 @@ import { Trans } from "@lingui/react/macro"; import { PencilSimpleLineIcon, PlusIcon } from "@phosphor-icons/react"; import { useStore } from "@tanstack/react-form"; import { publicationItemSchema } from "@reactive-resume/schema/resume/data"; -import { Button } from "@reactive-resume/ui/components/button"; -import { - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle, -} from "@reactive-resume/ui/components/dialog"; import { FormControl, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form"; import { Switch } from "@reactive-resume/ui/components/switch"; import { RichInput } from "@/components/input/rich-input"; @@ -22,6 +14,7 @@ import { useFormBlocker } from "@/hooks/use-form-blocker"; import { makeSectionItem } from "@/libs/resume/make-section-item"; import { createSectionItem, updateSectionItem } from "@/libs/resume/section-actions"; import { useAppForm, withForm } from "@/libs/tanstack-form"; +import { SectionItemDialog } from "./section-item-dialog"; const formSchema = publicationItemSchema; @@ -56,36 +49,16 @@ export function CreatePublicationDialog({ data }: DialogProps<"resume.sections.p const isSubmitting = useStore(form.store, (state) => state.isSubmitting); return ( - - - - - Create a new publication - - - - -
{ - event.preventDefault(); - event.stopPropagation(); - void form.handleSubmit(); - }} - > - - - - - - - - -
+ Create a new publication} + icon={} + onSubmit={() => void form.handleSubmit()} + onCancel={requestClose} + isSubmitting={isSubmitting} + submitLabel={Create} + > + + ); } @@ -108,36 +81,16 @@ export function UpdatePublicationDialog({ data }: DialogProps<"resume.sections.p const isSubmitting = useStore(form.store, (state) => state.isSubmitting); return ( - - - - - Update an existing publication - - - - -
{ - event.preventDefault(); - event.stopPropagation(); - void form.handleSubmit(); - }} - > - - - - - - - - -
+ Update an existing publication} + icon={} + onSubmit={() => void form.handleSubmit()} + onCancel={requestClose} + isSubmitting={isSubmitting} + submitLabel={Save Changes} + > + + ); } diff --git a/apps/web/src/dialogs/resume/sections/reference.tsx b/apps/web/src/dialogs/resume/sections/reference.tsx index 0bd10f049..11efdfcd9 100644 --- a/apps/web/src/dialogs/resume/sections/reference.tsx +++ b/apps/web/src/dialogs/resume/sections/reference.tsx @@ -4,14 +4,6 @@ import { Trans } from "@lingui/react/macro"; import { PencilSimpleLineIcon, PlusIcon } from "@phosphor-icons/react"; import { useStore } from "@tanstack/react-form"; import { referenceItemSchema } from "@reactive-resume/schema/resume/data"; -import { Button } from "@reactive-resume/ui/components/button"; -import { - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle, -} from "@reactive-resume/ui/components/dialog"; import { FormControl, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form"; import { Switch } from "@reactive-resume/ui/components/switch"; import { RichInput } from "@/components/input/rich-input"; @@ -22,6 +14,7 @@ import { useFormBlocker } from "@/hooks/use-form-blocker"; import { makeSectionItem } from "@/libs/resume/make-section-item"; import { createSectionItem, updateSectionItem } from "@/libs/resume/section-actions"; import { useAppForm, withForm } from "@/libs/tanstack-form"; +import { SectionItemDialog } from "./section-item-dialog"; const formSchema = referenceItemSchema; @@ -56,36 +49,16 @@ export function CreateReferenceDialog({ data }: DialogProps<"resume.sections.ref const isSubmitting = useStore(form.store, (state) => state.isSubmitting); return ( - - - - - Create a new reference - - - - -
{ - event.preventDefault(); - event.stopPropagation(); - void form.handleSubmit(); - }} - > - - - - - - - - -
+ Create a new reference} + icon={} + onSubmit={() => void form.handleSubmit()} + onCancel={requestClose} + isSubmitting={isSubmitting} + submitLabel={Create} + > + + ); } @@ -108,36 +81,16 @@ export function UpdateReferenceDialog({ data }: DialogProps<"resume.sections.ref const isSubmitting = useStore(form.store, (state) => state.isSubmitting); return ( - - - - - Update an existing reference - - - - -
{ - event.preventDefault(); - event.stopPropagation(); - void form.handleSubmit(); - }} - > - - - - - - - - -
+ Update an existing reference} + icon={} + onSubmit={() => void form.handleSubmit()} + onCancel={requestClose} + isSubmitting={isSubmitting} + submitLabel={Save Changes} + > + + ); } diff --git a/apps/web/src/dialogs/resume/sections/section-item-dialog.tsx b/apps/web/src/dialogs/resume/sections/section-item-dialog.tsx new file mode 100644 index 000000000..7324f93ec --- /dev/null +++ b/apps/web/src/dialogs/resume/sections/section-item-dialog.tsx @@ -0,0 +1,76 @@ +import type { ReactNode } from "react"; +import { Trans } from "@lingui/react/macro"; +import { Button } from "@reactive-resume/ui/components/button"; +import { + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, +} from "@reactive-resume/ui/components/dialog"; + +type SectionItemDialogProps = { + /** Full dialog title — pass a Trans node so i18n extraction works per-file */ + title: ReactNode; + /** Leading icon — PlusIcon (create) or PencilSimpleLineIcon (update) */ + icon: ReactNode; + /** Called via `void form.handleSubmit()` from the form's onSubmit handler */ + onSubmit: () => void; + /** Called by useFormBlocker's requestClose */ + onCancel: () => void; + isSubmitting: boolean; + /** Button label: Create or Save Changes */ + submitLabel: ReactNode; + /** When true, uses a single-column form layout (cover-letter, summary-item) */ + singleColumn?: boolean; + children: ReactNode; +}; + +/** + * Shared shell for section-item Create/Update dialogs. + * Each dialog still owns its schema, defaultValues, and form hooks. + * This wrapper only removes the duplicated DialogContent/Header/form/Footer boilerplate. + */ +export function SectionItemDialog({ + title, + icon, + onSubmit, + onCancel, + isSubmitting, + submitLabel, + singleColumn = false, + children, +}: SectionItemDialogProps) { + return ( + + + + {icon} + {title} + + + + +
{ + event.preventDefault(); + event.stopPropagation(); + onSubmit(); + }} + > + {children} + + + + + + +
+ + ); +} diff --git a/apps/web/src/dialogs/resume/sections/skill.tsx b/apps/web/src/dialogs/resume/sections/skill.tsx index c59c47f89..a41781230 100644 --- a/apps/web/src/dialogs/resume/sections/skill.tsx +++ b/apps/web/src/dialogs/resume/sections/skill.tsx @@ -5,14 +5,6 @@ import { Trans } from "@lingui/react/macro"; import { PencilSimpleLineIcon, PlusIcon } from "@phosphor-icons/react"; import { useStore } from "@tanstack/react-form"; import { skillItemSchema } from "@reactive-resume/schema/resume/data"; -import { Button } from "@reactive-resume/ui/components/button"; -import { - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle, -} from "@reactive-resume/ui/components/dialog"; import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form"; import { Input } from "@reactive-resume/ui/components/input"; import { PopoverTrigger } from "@reactive-resume/ui/components/popover"; @@ -27,6 +19,7 @@ import { useFormBlocker } from "@/hooks/use-form-blocker"; import { makeSectionItem } from "@/libs/resume/make-section-item"; import { createSectionItem, updateSectionItem } from "@/libs/resume/section-actions"; import { useAppForm, withForm } from "@/libs/tanstack-form"; +import { SectionItemDialog } from "./section-item-dialog"; const formSchema = skillItemSchema; @@ -62,36 +55,16 @@ export function CreateSkillDialog({ data }: DialogProps<"resume.sections.skills. const isSubmitting = useStore(form.store, (state) => state.isSubmitting); return ( - - - - - Create a new skill - - - - -
{ - event.preventDefault(); - event.stopPropagation(); - void form.handleSubmit(); - }} - > - - - - - - - - -
+ Create a new skill} + icon={} + onSubmit={() => void form.handleSubmit()} + onCancel={requestClose} + isSubmitting={isSubmitting} + submitLabel={Create} + > + + ); } @@ -114,36 +87,16 @@ export function UpdateSkillDialog({ data }: DialogProps<"resume.sections.skills. const isSubmitting = useStore(form.store, (state) => state.isSubmitting); return ( - - - - - Update an existing skill - - - - -
{ - event.preventDefault(); - event.stopPropagation(); - void form.handleSubmit(); - }} - > - - - - - - - - -
+ Update an existing skill} + icon={} + onSubmit={() => void form.handleSubmit()} + onCancel={requestClose} + isSubmitting={isSubmitting} + submitLabel={Save Changes} + > + + ); } diff --git a/apps/web/src/dialogs/resume/sections/summary-item.tsx b/apps/web/src/dialogs/resume/sections/summary-item.tsx index c763e91a8..ae9b31716 100644 --- a/apps/web/src/dialogs/resume/sections/summary-item.tsx +++ b/apps/web/src/dialogs/resume/sections/summary-item.tsx @@ -4,14 +4,6 @@ import { Trans } from "@lingui/react/macro"; import { PencilSimpleLineIcon, PlusIcon } from "@phosphor-icons/react"; import { useStore } from "@tanstack/react-form"; import { summaryItemSchema } from "@reactive-resume/schema/resume/data"; -import { Button } from "@reactive-resume/ui/components/button"; -import { - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle, -} from "@reactive-resume/ui/components/dialog"; import { FormControl, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form"; import { RichInput } from "@/components/input/rich-input"; import { useDialogStore } from "@/dialogs/store"; @@ -19,6 +11,7 @@ import { useUpdateResumeData } from "@/features/resume/builder/draft"; import { useFormBlocker } from "@/hooks/use-form-blocker"; import { makeSectionItem } from "@/libs/resume/make-section-item"; import { useAppForm, withForm } from "@/libs/tanstack-form"; +import { SectionItemDialog } from "./section-item-dialog"; const formSchema = summaryItemSchema; @@ -52,36 +45,17 @@ export function CreateSummaryItemDialog({ data }: DialogProps<"resume.sections.s const isSubmitting = useStore(form.store, (state) => state.isSubmitting); return ( - - - - - Create a new summary item - - - - -
{ - event.preventDefault(); - event.stopPropagation(); - void form.handleSubmit(); - }} - > - - - - - - - - -
+ Create a new summary item} + icon={} + onSubmit={() => void form.handleSubmit()} + onCancel={requestClose} + isSubmitting={isSubmitting} + submitLabel={Create} + singleColumn + > + + ); } @@ -109,36 +83,17 @@ export function UpdateSummaryItemDialog({ data }: DialogProps<"resume.sections.s const isSubmitting = useStore(form.store, (state) => state.isSubmitting); return ( - - - - - Update an existing summary item - - - - -
{ - event.preventDefault(); - event.stopPropagation(); - void form.handleSubmit(); - }} - > - - - - - - - - -
+ Update an existing summary item} + icon={} + onSubmit={() => void form.handleSubmit()} + onCancel={requestClose} + isSubmitting={isSubmitting} + submitLabel={Save Changes} + singleColumn + > + + ); } diff --git a/apps/web/src/dialogs/resume/sections/volunteer.tsx b/apps/web/src/dialogs/resume/sections/volunteer.tsx index bfc96a88b..e4db14e04 100644 --- a/apps/web/src/dialogs/resume/sections/volunteer.tsx +++ b/apps/web/src/dialogs/resume/sections/volunteer.tsx @@ -4,14 +4,6 @@ import { Trans } from "@lingui/react/macro"; import { PencilSimpleLineIcon, PlusIcon } from "@phosphor-icons/react"; import { useStore } from "@tanstack/react-form"; import { volunteerItemSchema } from "@reactive-resume/schema/resume/data"; -import { Button } from "@reactive-resume/ui/components/button"; -import { - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle, -} from "@reactive-resume/ui/components/dialog"; import { FormControl, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form"; import { Switch } from "@reactive-resume/ui/components/switch"; import { RichInput } from "@/components/input/rich-input"; @@ -22,6 +14,7 @@ import { useFormBlocker } from "@/hooks/use-form-blocker"; import { makeSectionItem } from "@/libs/resume/make-section-item"; import { createSectionItem, updateSectionItem } from "@/libs/resume/section-actions"; import { useAppForm, withForm } from "@/libs/tanstack-form"; +import { SectionItemDialog } from "./section-item-dialog"; const formSchema = volunteerItemSchema; @@ -56,36 +49,16 @@ export function CreateVolunteerDialog({ data }: DialogProps<"resume.sections.vol const isSubmitting = useStore(form.store, (state) => state.isSubmitting); return ( - - - - - Create a new volunteer experience - - - - -
{ - event.preventDefault(); - event.stopPropagation(); - void form.handleSubmit(); - }} - > - - - - - - - - -
+ Create a new volunteer experience} + icon={} + onSubmit={() => void form.handleSubmit()} + onCancel={requestClose} + isSubmitting={isSubmitting} + submitLabel={Create} + > + + ); } @@ -108,36 +81,16 @@ export function UpdateVolunteerDialog({ data }: DialogProps<"resume.sections.vol const isSubmitting = useStore(form.store, (state) => state.isSubmitting); return ( - - - - - Update an existing volunteer experience - - - - -
{ - event.preventDefault(); - event.stopPropagation(); - void form.handleSubmit(); - }} - > - - - - - - - - -
+ Update an existing volunteer experience} + icon={} + onSubmit={() => void form.handleSubmit()} + onCancel={requestClose} + isSubmitting={isSubmitting} + submitLabel={Save Changes} + > + + ); }