cal.pub0.org/packages/ui/form/fields.tsx

261 lines
7.3 KiB
TypeScript
Raw Normal View History

2021-10-12 09:35:44 +00:00
import { useId } from "@radix-ui/react-id";
2022-05-06 21:46:31 +00:00
import React, { forwardRef, ReactElement, ReactNode, Ref } from "react";
import { FieldValues, FormProvider, SubmitHandler, useFormContext, UseFormReturn } from "react-hook-form";
2021-10-12 09:35:44 +00:00
import classNames from "@calcom/lib/classNames";
import { getErrorFromUnknown } from "@calcom/lib/errors";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import showToast from "@calcom/ui/v2/core/notifications";
2021-10-12 09:35:44 +00:00
import { Alert } from "../Alert";
2021-10-18 07:02:25 +00:00
type InputProps = Omit<JSX.IntrinsicElements["input"], "name"> & { name: string };
2021-10-18 07:02:25 +00:00
export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(props, ref) {
2021-10-12 09:35:44 +00:00
return (
<input
{...props}
ref={ref}
className={classNames(
"mt-1 block w-full rounded-sm border border-gray-300 py-2 px-3 shadow-sm focus:border-neutral-800 focus:outline-none focus:ring-1 focus:ring-neutral-800 sm:text-sm",
2021-10-12 09:35:44 +00:00
props.className
)}
/>
);
});
export function Label(props: JSX.IntrinsicElements["label"]) {
return (
<label {...props} className={classNames("block text-sm font-medium text-gray-700", props.className)}>
{props.children}
</label>
);
}
export function InputLeading(props: JSX.IntrinsicElements["div"]) {
return (
Feat/design system (#3051) * Storybook Boilerplate setup * Inital Setup * First story * Color Design System * Badge Story + Comp * Checkbox UI + Stories * Update Red colors + Button Group * Switch+Stories / Default brand color * Update Version + Button Group combined * Compact Butotn Group * Tidy up Selectors * Adds Tooltip to Button * TextInput * Update SB * Prefix Input * Match text area styles * Prefix Controls * Update spacing on text area * Text Input Suffix * Color Picker * Update storybook * Icon Suffix/Prefix * Datepicker + move components to monorepo * Text color on labels * Move Radio over to monorepo * Move CustomBranding to calcom/ib * Radio * IconBadge Component * Update radio indicator background * Disabled radio state * Delete yarn.lock * Revert "Delete yarn.lock" This reverts commit 9b99d244b70872153a16bec1f1f3bc651e94be7a. * Fix webhook test * Replace old toast location * Update radio path * Empty State * Update Badge.tsx * Update Badge.tsx * Banner Component+story * Creation Modal * Creation Dialog updated * Button hover dialog * Confirmation Modal * Datepicker (Booking) * PageHeader * Fix border width * PageHeader update search bar * Fix input height * Fix button group size * Add spacing between badges - font smoothing * Update button position on banner * Banner update * Fixing focus state on suffix/prefix inputs * Implement A11y addon * Add aria label * error && "text-red-800" * Fix button hover * Change colors * Generate snapshot tests for on hover button * Revert colors to demo * Change colors * Fix Linear Issues * Form Stepper component * Add padding back to input * Move ui to UI_V2 * Use V2 * Update imports for v1 * Update imports for v1 * Upgrade to nextjs in storybook root * Update website submodule * Avatar Groups * Fix webpack again * Vertical Tab Item [WIP] - active state on small item is not working currently * Vertical Tab Group * Add Github action * Fix website submodule * Fix GH action * Rename Workflow * Adds lint report for CI * Lint report fixes * NavigationItem comments * VerticalTabItem type fixes * Fix avatar blur * Fix comments * Adding isEmbed to window object * Disable components that use router mock. * Load inter via google fonts * Started select * Adding base Breadcrumb * Update readme * Formatting * Fixes * Dependencies matching * Linting * Update FormStep.stories.tsx * Linting * Update MultiSelectCheckboxes.tsx Co-authored-by: zomars <zomars@me.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com>
2022-07-23 00:39:50 +00:00
<span className="inline-flex flex-shrink-0 items-center rounded-l-sm border border-r-0 border-gray-300 bg-gray-50 px-3 text-gray-500 sm:text-sm">
{props.children}
</span>
);
}
type InputFieldProps = {
label?: ReactNode;
2022-05-06 22:09:40 +00:00
hint?: ReactNode;
addOnLeading?: ReactNode;
} & React.ComponentProps<typeof Input> & {
labelProps?: React.ComponentProps<typeof Label>;
};
2021-10-12 09:35:44 +00:00
const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function InputField(props, ref) {
const id = useId();
const { t } = useLocale();
const methods = useFormContext();
const {
label = t(props.name),
labelProps,
placeholder = t(props.name + "_placeholder") !== props.name + "_placeholder"
? t(props.name + "_placeholder")
: "",
className,
addOnLeading,
2022-05-06 22:09:40 +00:00
hint,
...passThrough
} = props;
2021-10-12 09:35:44 +00:00
return (
<div>
Improvement/teams (#1285) * [WIP] checkpoint before pull & merge - Added teams to sidebar - Refactored team settings - Improved team list UI This code will be partly reverted next commit. * [WIP] - Moved team code back to components - Removed team link from sidebar - Built new team manager screen based on Event Type designs - Component-ized frequently reused code (SettingInputContainer, FlatIconButton) * [WIP] - Created LinkIconButton as standalone component - Added functionality to sidebar of team settings - Fixed type bug on public team page induced by my normalization of members array in team query - Removed teams-old which was kept as refrence - Cleaned up loose ends * [WIP] - added create team model - fixed profile missing label due to my removal of default label from component * [WIP] - Fixed TeamCreateModal trigger - removed TeamShell, it didn't make the cut - added getPlaceHolderAvatar - renamed TeamCreate to TeamCreateModal - removed deprecated UsernameInput and replaced uses with suggested TextField * fix save button * [WIP] - Fixed drop down actions on team list - Cleaned up state updates * [WIP] converting teams to tRPC * [WIP] Finished refactor to tRPC * [WIP] Finishing touches * [WIP] Team availability beginning * team availability mvp * - added validation to change role - modified layout of team availability - corrected types * fix ui issue on team availability screen * - added virtualization to team availability - added flexChildrenContainer boolean to Shell to allow for flex on children * availability style fix * removed hard coded team type as teams now use inferred type from tRPC * Removed unneeded vscode settings * Reverted prisma schema * Fixed migrations * Removes unused dayjs plugins * Reverts type regression * Type fix * Type fixes * Type fixes * Moves team availability code to ee Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com>
2021-12-09 23:51:30 +00:00
{!!props.name && (
<Label htmlFor={id} {...labelProps}>
{label}
</Label>
)}
{addOnLeading ? (
Feat/design system (#3051) * Storybook Boilerplate setup * Inital Setup * First story * Color Design System * Badge Story + Comp * Checkbox UI + Stories * Update Red colors + Button Group * Switch+Stories / Default brand color * Update Version + Button Group combined * Compact Butotn Group * Tidy up Selectors * Adds Tooltip to Button * TextInput * Update SB * Prefix Input * Match text area styles * Prefix Controls * Update spacing on text area * Text Input Suffix * Color Picker * Update storybook * Icon Suffix/Prefix * Datepicker + move components to monorepo * Text color on labels * Move Radio over to monorepo * Move CustomBranding to calcom/ib * Radio * IconBadge Component * Update radio indicator background * Disabled radio state * Delete yarn.lock * Revert "Delete yarn.lock" This reverts commit 9b99d244b70872153a16bec1f1f3bc651e94be7a. * Fix webhook test * Replace old toast location * Update radio path * Empty State * Update Badge.tsx * Update Badge.tsx * Banner Component+story * Creation Modal * Creation Dialog updated * Button hover dialog * Confirmation Modal * Datepicker (Booking) * PageHeader * Fix border width * PageHeader update search bar * Fix input height * Fix button group size * Add spacing between badges - font smoothing * Update button position on banner * Banner update * Fixing focus state on suffix/prefix inputs * Implement A11y addon * Add aria label * error && "text-red-800" * Fix button hover * Change colors * Generate snapshot tests for on hover button * Revert colors to demo * Change colors * Fix Linear Issues * Form Stepper component * Add padding back to input * Move ui to UI_V2 * Use V2 * Update imports for v1 * Update imports for v1 * Upgrade to nextjs in storybook root * Update website submodule * Avatar Groups * Fix webpack again * Vertical Tab Item [WIP] - active state on small item is not working currently * Vertical Tab Group * Add Github action * Fix website submodule * Fix GH action * Rename Workflow * Adds lint report for CI * Lint report fixes * NavigationItem comments * VerticalTabItem type fixes * Fix avatar blur * Fix comments * Adding isEmbed to window object * Disable components that use router mock. * Load inter via google fonts * Started select * Adding base Breadcrumb * Update readme * Formatting * Fixes * Dependencies matching * Linting * Update FormStep.stories.tsx * Linting * Update MultiSelectCheckboxes.tsx Co-authored-by: zomars <zomars@me.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com>
2022-07-23 00:39:50 +00:00
<div className="mt-1 flex rounded-md shadow-sm">
{addOnLeading}
<Input
id={id}
placeholder={placeholder}
className={classNames(className, "mt-0", props.addOnLeading && "rounded-l-none")}
{...passThrough}
ref={ref}
/>
</div>
) : (
<Input id={id} placeholder={placeholder} className={className} {...passThrough} ref={ref} />
)}
2022-05-06 22:09:40 +00:00
{hint}
{methods?.formState?.errors[props.name]?.message && (
<Alert
className="mt-1"
severity="error"
message={<>{methods.formState.errors[props.name]!.message}</>}
/>
)}
2021-10-12 09:35:44 +00:00
</div>
);
});
export const TextField = forwardRef<HTMLInputElement, InputFieldProps>(function TextField(props, ref) {
return <InputField ref={ref} {...props} />;
});
export const PasswordField = forwardRef<HTMLInputElement, InputFieldProps>(function PasswordField(
props,
ref
) {
Improve 2fa: ask for code before account removal and 2fa disabling (#3817) * fix conflicts * fix remove separate function and call mutation directly * feat: add new react-otp-input to enable 2fa flow * fix: comment out * fix: remove next-auth 4.9.0 from yarn.lock * fix: delete account test fill password before submit * fix: test delete accc * fix typo in delete acc test * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * feat: remove react-otp-input reuse TwoFactor * feat: add center props to TwoFactor * fix: no v2 * feat: disable 2fa requires 2fa api * feat: make 2fa required to disable 2fa * fix: FormEvent instead of SyntheticEvent * fix: types * fix: move disable 2fa form to fully use RHF * fix if (e) e.preventDefault(); * feat: fix remove account * fix: remove react-otp-input types * fix: separate onConfirm to add to form handleSubmit * fix: types e:SyntethicEvent * fix: types * fix: import packages lib not web lib * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * Update apps/web/components/security/EnableTwoFactorModal.tsx Co-authored-by: Omar López <zomars@me.com> * fix: no import from web * fix: import * fix: remove duplicate FormEvent * fix: upgrade ErrorCode imports * fix profile types totpCode not optional * fix: build pass * fix: dont touch test delete-account * fix: type * fix: add data-testid to password field * fix: conflicts w syncServices * Build fixes * Fixes delete account e2e test Co-authored-by: Agusti Fernandez Pardo <git@agusti.me> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-08-31 20:57:53 +00:00
return (
<InputField data-testid="password" type="password" placeholder="•••••••••••••" ref={ref} {...props} />
);
});
export const EmailInput = forwardRef<HTMLInputElement, InputFieldProps>(function EmailInput(props, ref) {
return (
<Input
ref={ref}
type="email"
autoCapitalize="none"
autoComplete="email"
autoCorrect="off"
inputMode="email"
{...props}
/>
);
});
export const EmailField = forwardRef<HTMLInputElement, InputFieldProps>(function EmailField(props, ref) {
return (
<InputField
ref={ref}
type="email"
autoCapitalize="none"
autoComplete="email"
autoCorrect="off"
inputMode="email"
{...props}
/>
);
});
type TextAreaProps = Omit<JSX.IntrinsicElements["textarea"], "name"> & { name: string };
export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextAreaInput(props, ref) {
return (
<textarea
ref={ref}
{...props}
className={classNames(
Workflows (#3236) * build basic database structure and basic design * create simple workflow list * add editing dots to list * add mutation to create workflows * add createMutation on submit + redirect to editing page * redirect to edit page when clicking on row * add functionality to delete workflow * add timeUnit + input validation * add empty screen view * add time before it triggers to description * add multi select with checkboxes * remove getServerSideProps * set default time period to 24 * fetch eventypes and display in dropdown * add functionality to update workflows + many-to-many relationship * fix all checked event types * add SMS reminders * fix bug with trigger + relocate sms template * clean code * add model for unscheduled reminders * fix selected eventTypes * fixing value to show how many event types selected * fix plural of event types in select * add onDelete cascade for all relations * fix errors * add functionality to send SMS to specific number * fix type error for timeUnit * set default value for time unit + fix type issues * remove console.logs * fix error in checking if scheduled date is more than 1h in advance * fix build errors * add migration for workflows * add basic UI for editing workflow steps * add formSchema * improve functionality to update a step * remove console logs * fix issue with active event types * allow null value for time and timeUnit * sort steps asc step number * add action to workflow (frontend) * add phone number input for SMS to specific number * use PhoneInput for number input + input validation * improve invalid input for phone number * improve UI of phoneInput * Improve design and validation * fix undefined error * set default action when adding action * include all team event types * fix phone number input for editing steps * fix update muation to add steps * remove console logs * fix order of steps * functionality to delete steps * add trigger when event is cancelled * add custom email body * sms and email reminder updates * add custom emails * add custom email subject * send reminder email to all attendees * update migration * fix default value for time and timeUnit * save email reminders to database * clean code * add custom template to SMS actions * schedule emails with sendgrid * clean code * add workflow templates * keep custom template saved when changing templates * create reminder template for email * add dot at the end of sentace for email template * fix merge error * fix issue that template was not saved * include sending emails for when event is cancelled * fix bug that email was always sent * add templates to sms reminders * add info that sending sms to attendees won't trigger for already exisitng bookings * only schedule sms for attendees when smsReminderNumber exists * only schedule sms for attendees when smsReminderNumber exists * set scheduled of workflow reminder to false when longer than 72 hours * add cron for email scheduling + fixes for for sms an email scheduling * adjust step number when deleting a step * cast to boolean with !! * update cron job for email reminders * update sms template * send reminder email not to guests * remove sendTo from workflow reminder * fixes sending sms without name + removing sendTo everywhere * fix undefined name in sms template * set user name to undefined for sending sms to a specific number * fix singular and plural for time unit * set to edit mode when changing action and custom template is selected * delete reminders when booking cancelled or not active anymore * fix type errors * fix error that deleted reminders twice * create booking reminders for existing bookings when eventType is set active * improve email and sms templates * use BookingInfo type instead of calendarEvent for reminder emails * schedule emails for already existing bookings * add and remove reminders for new active event types and cancelled events * connect add action button with last step * fix step container width for mobile view * helper functions that return options for select * fix typo and remove comment * clean code * add/improve error messages for forms * fix typo * clean code * improve email template * clean code * fix missing prop * save reference id when scheduling reminder * fix step not added because of changed id for new steps * small fixes + code cleanup * code cleanup * show error message when number is invalid * fix typo * fix phone number input when location is already phone * set multi select checkbox to read only * change email scheduling in cron job from 7 days to 72 hours * show active event types in workflow list * fix trigger information for workflow list * improve layout for small screens in workflow list * remove optional from zod type for workflow name * order workflows by id * use link icon to show active event types * fix plural and add translation for showing nr of active eventtypes * fix text for sms reminder template * add reminders for added steps * remove optional for activeOn * improve reminder templates * improve design of custom input fields * set edit mode to false when phone number isn't needed anymore * set sendTo in workflow step only for SMS_NUMBER action * set email body and subject only when custom template * only delete reminders that belong to workflow steps * improve text for new event book trigger * move reminders folder to workflows * fix issue that save button was sometimes enabled in edit mode * fix form issues for send to * delete all scheduled reminders when workflow is deleted * use enum for method * fix imports for workflow methods * add missing import * fix edit mode * create reminders when event is confirmed * add reminderScheduler to reduce duplicate code * make workflow enterprise and pro only feature * move all files to /ee/ folder * move package.json change to /ee/ folder * add pro badge to shell * set to edit mode to true if email subject is missing when action changes * fix loading bug * add migration * fix old imports * don't schedule reminders for opt-ins * fix style of email body * code clean up * Update yarn.lock * fix isLoading for active on dropdown * update import for prisma Co-authored-by: Omar López <zomars@me.com> * update imports * remove console * use session to check if user has valid license * use defaultHandler * clean up code * Create db-staging-snapshot.yml * move LisenceRequired inside shell * update import for FormValues * fix phone input design * fix disabled save button for edit mode * squah all migration into a single one * use isAfter and isBefore instead of isBetween * import dayjs from @calcom * validate phone number for sms reminders when booking event * Allows auto approvals for crowdin Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com>
2022-07-14 00:10:45 +00:00
"block w-full rounded-sm border-gray-300 shadow-sm focus:border-neutral-900 focus:ring-neutral-900 sm:text-sm",
props.className
)}
/>
);
});
type TextAreaFieldProps = {
label?: ReactNode;
} & React.ComponentProps<typeof TextArea> & {
labelProps?: React.ComponentProps<typeof Label>;
};
export const TextAreaField = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>(function TextField(
props,
ref
) {
const id = useId();
const { t } = useLocale();
const methods = useFormContext();
const {
label = t(props.name as string),
labelProps,
placeholder = t(props.name + "_placeholder") !== props.name + "_placeholder"
? t(props.name + "_placeholder")
: "",
...passThrough
} = props;
return (
<div>
{!!props.name && (
<Label htmlFor={id} {...labelProps}>
{label}
</Label>
)}
<TextArea ref={ref} placeholder={placeholder} {...passThrough} />
{methods?.formState?.errors[props.name]?.message && (
<Alert
className="mt-1"
severity="error"
message={<>{methods.formState.errors[props.name]!.message}</>}
/>
)}
</div>
);
});
2022-05-06 21:46:31 +00:00
type FormProps<T extends object> = { form: UseFormReturn<T>; handleSubmit: SubmitHandler<T> } & Omit<
JSX.IntrinsicElements["form"],
"onSubmit"
>;
const PlainForm = <T extends FieldValues>(props: FormProps<T>, ref: Ref<HTMLFormElement>) => {
const { form, handleSubmit, ...passThrough } = props;
2021-10-12 09:35:44 +00:00
return (
<FormProvider {...form}>
<form
ref={ref}
onSubmit={(event) => {
2022-05-06 22:09:40 +00:00
event.preventDefault();
form
.handleSubmit(handleSubmit)(event)
.catch((err) => {
showToast(`${getErrorFromUnknown(err).message}`, "error");
});
}}
{...passThrough}>
2022-05-06 21:46:31 +00:00
{
/* @see https://react-hook-form.com/advanced-usage/#SmartFormComponent */
React.Children.map(props.children, (child) => {
return typeof child !== "string" &&
typeof child !== "number" &&
typeof child !== "boolean" &&
child &&
"props" in child &&
child.props.name
? React.createElement(child.type, {
...{
...child.props,
register: form.register,
key: child.props.name,
},
})
: child;
})
}
</form>
</FormProvider>
);
};
export const Form = forwardRef(PlainForm) as <T extends FieldValues>(
p: FormProps<T> & { ref?: Ref<HTMLFormElement> }
) => ReactElement;
2021-10-18 07:02:25 +00:00
export function FieldsetLegend(props: JSX.IntrinsicElements["legend"]) {
return (
<legend {...props} className={classNames("text-sm font-medium text-gray-700", props.className)}>
{props.children}
</legend>
);
}
export function InputGroupBox(props: JSX.IntrinsicElements["div"]) {
return (
<div
{...props}
className={classNames("space-y-2 rounded-sm border border-gray-300 bg-white p-2", props.className)}>
2021-10-18 07:02:25 +00:00
{props.children}
</div>
);
}