mirror of
https://github.com/hanzoai/sign.git
synced 2026-10-21 01:21:51 +00:00
zeekay
76ce46705f
Radix was leaking out of the primitive layer into application code. Thirty dialog components under apps/remix imported `@radix-ui/react-dialog` purely to spell `Omit<DialogPrimitive.DialogProps, 'children'>`, and two more imported `TooltipArrow` directly. Each of those is a place the UI substrate has to be swapped when it changes, for no gain — the app never touched Radix behaviour, only a type and one arrow element. `packages/ui/primitives/dialog.tsx` now exports `DialogProps` and `tooltip.tsx` exports `TooltipArrow`, so callers name the primitive, not the library behind it. Radix imports outside packages/ui: 32 -> 0. Eleven vendored shadcn primitives had no importers at all — aspect-ratio, auto-sized-text, calendar, collapsible, context-menu, menubar, navigation-menu, slider, toggle, a stray document-flow dialog and a signature-pad Canvas class shadowed by skia-canvas. Dead component code reads as supported API in review, so it is deleted rather than carried. That retires eight Radix packages plus react-day-picker from packages/ui and @radix-ui/react-tabs from apps/docs, which was declared and never imported: 28 declared Radix packages -> 19. The embedding doc taught Tailwind classes in a snippet third parties copy into their own apps; it now uses the same inline styles as the plain-HTML example directly above it. `.cursorrules` told every AI touching this repo to write "Shadcn UI, Radix, and Tailwind Aria" — it now points at @hanzo/gui and says the inherited layer is to be replaced, not extended. Verified: apps/remix typecheck 0 errors, client+server build green, prisma 38/38.
189 lines
5.5 KiB
TypeScript
189 lines
5.5 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import { Trans, useLingui } from '@lingui/react/macro';
|
|
import { useForm } from 'react-hook-form';
|
|
import type { z } from 'zod';
|
|
|
|
import type { TGetOrganisationEmailDomainResponse } from '@hanzo/esign-trpc/server/organisation-router/get-organisation-email-domain.types';
|
|
import {
|
|
type TUpdateOrganisationEmailRequest,
|
|
ZUpdateOrganisationEmailRequestSchema,
|
|
} from '@hanzo/esign-trpc/server/organisation-router/update-organisation-email.types';
|
|
import { useZapMutation } from '@hanzo/esign-trpc/zap/react';
|
|
import { Button } from '@hanzo/esign-ui/primitives/button';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
type DialogProps,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from '@hanzo/esign-ui/primitives/dialog';
|
|
import {
|
|
Form,
|
|
FormControl,
|
|
FormDescription,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage,
|
|
} from '@hanzo/esign-ui/primitives/form/form';
|
|
import { Input } from '@hanzo/esign-ui/primitives/input';
|
|
import { useToast } from '@hanzo/esign-ui/primitives/use-toast';
|
|
|
|
export type OrganisationEmailUpdateDialogProps = {
|
|
trigger: React.ReactNode;
|
|
organisationEmail: TGetOrganisationEmailDomainResponse['emails'][number];
|
|
} & Omit<DialogProps, 'children'>;
|
|
|
|
const ZUpdateOrganisationEmailFormSchema = ZUpdateOrganisationEmailRequestSchema.pick({
|
|
emailName: true,
|
|
// replyTo: true,
|
|
});
|
|
|
|
type ZUpdateOrganisationEmailSchema = z.infer<typeof ZUpdateOrganisationEmailFormSchema>;
|
|
|
|
export const OrganisationEmailUpdateDialog = ({
|
|
trigger,
|
|
organisationEmail,
|
|
...props
|
|
}: OrganisationEmailUpdateDialogProps) => {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const { t } = useLingui();
|
|
const { toast } = useToast();
|
|
|
|
const form = useForm<ZUpdateOrganisationEmailSchema>({
|
|
resolver: zodResolver(ZUpdateOrganisationEmailFormSchema),
|
|
defaultValues: {
|
|
emailName: organisationEmail.emailName,
|
|
// replyTo: organisationEmail.replyTo ?? undefined,
|
|
},
|
|
});
|
|
|
|
const { mutateAsync: updateOrganisationEmail, isPending } = useZapMutation<
|
|
void,
|
|
TUpdateOrganisationEmailRequest
|
|
>('organisation.email.update');
|
|
|
|
const onFormSubmit = async ({ emailName }: ZUpdateOrganisationEmailSchema) => {
|
|
try {
|
|
await updateOrganisationEmail({
|
|
emailId: organisationEmail.id,
|
|
emailName,
|
|
// replyTo,
|
|
});
|
|
|
|
toast({
|
|
title: t`Success`,
|
|
duration: 5000,
|
|
});
|
|
|
|
setOpen(false);
|
|
} catch {
|
|
toast({
|
|
title: t`An unknown error occurred`,
|
|
variant: 'destructive',
|
|
});
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!open) {
|
|
return;
|
|
}
|
|
|
|
form.reset({
|
|
emailName: organisationEmail.emailName,
|
|
// replyTo: organisationEmail.replyTo ?? undefined,
|
|
});
|
|
}, [open, form]);
|
|
|
|
return (
|
|
<Dialog
|
|
{...props}
|
|
open={open}
|
|
onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
|
|
>
|
|
<DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
|
|
{trigger}
|
|
</DialogTrigger>
|
|
|
|
<DialogContent position="center">
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
<Trans>Update email</Trans>
|
|
</DialogTitle>
|
|
|
|
<DialogDescription>
|
|
<Trans>
|
|
You are currently updating{' '}
|
|
<span className="font-bold">{organisationEmail.email}</span>
|
|
</Trans>
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(onFormSubmit)}>
|
|
<fieldset className="flex h-full flex-col space-y-4" disabled={isPending}>
|
|
<FormField
|
|
control={form.control}
|
|
name="emailName"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel required>
|
|
<Trans>Display Name</Trans>
|
|
</FormLabel>
|
|
<FormControl>
|
|
<Input {...field} placeholder={t`Support`} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
<FormDescription>
|
|
<Trans>The display name for this email address</Trans>
|
|
</FormDescription>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
{/* <FormField
|
|
control={form.control}
|
|
name="replyTo"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>
|
|
<Trans>Reply-To Email</Trans>
|
|
</FormLabel>
|
|
<FormControl>
|
|
<Input {...field} placeholder="[email protected]" />
|
|
</FormControl>
|
|
<FormMessage />
|
|
<FormDescription>
|
|
<Trans>
|
|
Optional no-reply email address attached to emails. Leave blank to default
|
|
to the organisation settings reply-to email.
|
|
</Trans>
|
|
</FormDescription>
|
|
</FormItem>
|
|
)}
|
|
/> */}
|
|
|
|
<DialogFooter>
|
|
<Button type="button" variant="secondary" onClick={() => setOpen(false)}>
|
|
<Trans>Cancel</Trans>
|
|
</Button>
|
|
|
|
<Button type="submit" loading={isPending}>
|
|
<Trans>Update</Trans>
|
|
</Button>
|
|
</DialogFooter>
|
|
</fieldset>
|
|
</form>
|
|
</Form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|