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

264 lines
7.3 KiB
TypeScript
Raw Normal View History

2021-10-12 09:35:44 +00:00
import { useId } from "@radix-ui/react-id";
import type { ReactElement, ReactNode, Ref } from "react";
import React, { forwardRef } from "react";
import type { FieldValues, SubmitHandler, UseFormReturn } from "react-hook-form";
import { FormProvider, useFormContext } 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";
2021-10-12 09:35:44 +00:00
import { Alert, showToast } from "../";
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(
"border-default mt-1 block w-full rounded-sm border 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("text-default block text-sm font-medium", props.className)}>
2021-10-12 09:35:44 +00:00
{props.children}
</label>
);
}
export function InputLeading(props: JSX.IntrinsicElements["div"]) {
return (
<span className="bg-muted border-default text-subtle inline-flex flex-shrink-0 items-center rounded-l-sm border border-r-0 px-3 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("mt-0", props.addOnLeading && "rounded-l-none", className)}
{...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(
"border-default block w-full rounded-sm 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();
event.stopPropagation();
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-default text-sm font-medium", props.className)}>
2021-10-18 07:02:25 +00:00
{props.children}
</legend>
);
}
export function InputGroupBox(props: JSX.IntrinsicElements["div"]) {
return (
<div
{...props}
className={classNames("bg-default border-default space-y-2 rounded-sm border p-2", props.className)}>
2021-10-18 07:02:25 +00:00
{props.children}
</div>
);
}