@calcom/atoms 2.8.0 → 2.8.1

package/src/booker/components/form-builder/components.tsx

@@ -1,541 +0,0 @@
-// @ts-nocheck — loose generic prop factories
-"use client";
-
-import { useEffect } from "react";
-import type { z } from "zod";
-import { AddressInput } from "../../../components/ui/address-input";
-import { Button } from "../../../components/ui/button";
-import { Checkbox, CheckboxField } from "../../../components/ui/checkbox";
-import { Icon } from "../../../components/ui/icon";
-import { InfoBadge } from "../../../components/ui/info-badge";
-import { Label } from "../../../components/ui/label";
-import { RadioField, RadioGroup } from "../../../components/ui/radio";
-import { EmailField, InputField } from "../../../components/ui/text-field";
-import { Tooltip } from "../../../components/ui/tooltip";
-import { useAtomsLocale as useLocale } from "../../../hooks/use-atoms-locale";
-import type { fieldSchema, variantsConfigSchema } from "../../../vendor/form-builder/base-schema";
-import type { FieldType } from "../../../vendor/form-builder/field-type-enum";
-import { propsTypes } from "../../../vendor/form-builder/props-types";
-import { preprocessNameFieldDataWithVariant } from "../../../vendor/form-builder/utils";
-import type { SelectLikeComponentProps, TextLikeComponentProps } from "../../../vendor/form-builder-widgets";
-import Widgets from "../../../vendor/form-builder-widgets";
-import PhoneInput from "../../../vendor/phone-input/phone-input";
-
-import { ComponentForField } from "./form-builder-field";
-
-export const isValidValueProp: Record<Component["propsType"], (val: unknown) => boolean> = {
-  boolean: (val) => typeof val === "boolean",
-  multiselect: (val) => val instanceof Array && val.every((v) => typeof v === "string"),
-  objectiveWithInput: (val) => (typeof val === "object" && val !== null ? "value" in val : false),
-  select: (val) => typeof val === "string",
-  text: (val) => typeof val === "string",
-  textList: (val) => val instanceof Array && val.every((v) => typeof v === "string"),
-  variants: (val) => (typeof val === "object" && val !== null) || typeof val === "string",
-};
-
-type Component =
-  | {
-      propsType: "text";
-      factory: <TProps extends TextLikeComponentProps>(props: TProps) => JSX.Element;
-    }
-  | {
-      propsType: "textList";
-      factory: <TProps extends TextLikeComponentProps<string[]>>(props: TProps) => JSX.Element;
-    }
-  | {
-      propsType: "select";
-      factory: <TProps extends SelectLikeComponentProps>(props: TProps) => JSX.Element;
-    }
-  | {
-      propsType: "boolean";
-      factory: <TProps extends TextLikeComponentProps<boolean>>(props: TProps) => JSX.Element;
-    }
-  | {
-      propsType: "multiselect";
-      factory: <TProps extends SelectLikeComponentProps<string[]>>(props: TProps) => JSX.Element;
-    }
-  | {
-      propsType: "objectiveWithInput";
-      factory: <
-        TProps extends SelectLikeComponentProps<{
-          value: string;
-          optionValue: string;
-        }> & {
-          optionsInputs: NonNullable<z.infer<typeof fieldSchema>["optionsInputs"]>;
-          value: { value: string; optionValue: string };
-        } & {
-          name?: string;
-          required?: boolean;
-          translatedDefaultLabel?: string;
-        },
-      >(
-        props: TProps
-      ) => JSX.Element;
-    }
-  | {
-      propsType: "variants";
-      factory: <
-        TProps extends Omit<TextLikeComponentProps, "value" | "setValue"> & {
-          variant: string | undefined;
-          variants: z.infer<typeof variantsConfigSchema>["variants"];
-          value: Record<string, string> | string | undefined;
-          setValue: (value: string | Record<string, string>) => void;
-        },
-      >(
-        props: TProps
-      ) => JSX.Element;
-    };
-
-export const Components: Record<FieldType, Component> = {
-  text: {
-    propsType: propsTypes.text,
-    factory: (props) => <Widgets.TextWidget id={props.name} noLabel={true} {...props} />,
-  },
-  textarea: {
-    propsType: propsTypes.textarea,
-    factory: (props) => <Widgets.TextAreaWidget id={props.name} rows={3} {...props} />,
-  },
-  number: {
-    propsType: propsTypes.number,
-    factory: (props) => <Widgets.NumberWidget id={props.name} noLabel={true} {...props} />,
-  },
-  name: {
-    propsType: propsTypes.name,
-    factory: (props) => {
-      const { variant: variantName = "fullName" } = props;
-      const onChange = (name: string, value: string) => {
-        let currentValue = props.value;
-        if (typeof currentValue !== "object") {
-          currentValue = {};
-        }
-        props.setValue({
-          ...currentValue,
-          [name]: value,
-        });
-      };
-
-      if (!props.variants) {
-        throw new Error("'variants' is required for 'name' type of field");
-      }
-
-      if (variantName !== "firstAndLastName" && variantName !== "fullName") {
-        throw new Error(`Invalid variant name '${variantName}' for 'name' type of field`);
-      }
-
-      const value = preprocessNameFieldDataWithVariant(variantName, props.value);
-
-      if (variantName === "fullName") {
-        if (typeof value !== "string") {
-          throw new Error("Invalid value for 'fullName' variant");
-        }
-        const variant = props.variants[variantName];
-        const variantField = variant.fields[0];
-        return (
-          <InputField
-            name="name"
-            showAsteriskIndicator={true}
-            placeholder={variantField.placeholder}
-            label={variantField.label}
-            containerClassName="w-full"
-            readOnly={props.readOnly}
-            value={value}
-            required={variantField.required}
-            type="text"
-            autoComplete="name"
-            onChange={(e) => {
-              props.setValue(e.target.value);
-            }}
-          />
-        );
-      }
-
-      const variant = props.variants[variantName];
-
-      if (typeof value !== "object") {
-        throw new Error("Invalid value for 'fullName' variant");
-      }
-
-      return (
-        <div className="flex space-x-4">
-          {variant.fields.map((variantField) => (
-            <InputField
-              className="mb-0!"
-              showAsteriskIndicator={true}
-              key={variantField.name}
-              name={variantField.name}
-              readOnly={props.readOnly}
-              placeholder={variantField.placeholder}
-              label={variantField.label}
-              containerClassName={`w-full testid-${variantField.name}`}
-              value={value[variantField.name as keyof typeof value]}
-              required={variantField.required}
-              type="text"
-              autoComplete={
-                variantField.name === "firstName"
-                  ? "given-name"
-                  : variantField.name === "lastName"
-                    ? "family-name"
-                    : undefined
-              }
-              onChange={(e) => onChange(variantField.name, e.target.value)}
-            />
-          ))}
-        </div>
-      );
-    },
-  },
-  phone: {
-    propsType: propsTypes.phone,
-    factory: ({ setValue, readOnly, ...props }) => {
-      if (!props) {
-        return <div />;
-      }
-      return (
-        <PhoneInput
-          disabled={readOnly}
-          onChange={(val: string) => {
-            setValue(val);
-          }}
-          {...props}
-        />
-      );
-    },
-  },
-  email: {
-    propsType: propsTypes.email,
-    factory: (props) => {
-      if (!props) {
-        return <div />;
-      }
-      return (
-        <InputField
-          type="email"
-          id={props.name}
-          noLabel={true}
-          autoComplete="email"
-          {...props}
-          onChange={(e) => props.setValue(e.target.value)}
-        />
-      );
-    },
-  },
-  address: {
-    propsType: propsTypes.address,
-    factory: (props) => {
-      return (
-        <AddressInput
-          id={props.name}
-          onChange={(val) => {
-            props.setValue(val);
-          }}
-          {...props}
-          disabled={props.readOnly}
-        />
-      );
-    },
-  },
-  multiemail: {
-    propsType: propsTypes.multiemail,
-    factory: function MultiEmail({ value, readOnly, label, setValue, ...props }) {
-      const placeholder = props.placeholder;
-      const { t } = useLocale();
-      value = value || [];
-      return (
-        <>
-          {value.length ? (
-            <div>
-              <label htmlFor="guests" className="text-default  mb-1 block text-sm font-medium">
-                {label}
-              </label>
-              <ul>
-                {value.map((field, index) => (
-                  <li key={index}>
-                    <EmailField
-                      id={`${props.name}.${index}`}
-                      disabled={readOnly}
-                      value={value[index]}
-                      onChange={(e) => {
-                        value[index] = e.target.value.toLowerCase();
-                        setValue(value);
-                      }}
-                      placeholder={placeholder}
-                      label={<></>}
-                      required
-                      onClickAddon={() => {
-                        value.splice(index, 1);
-                        setValue(value);
-                      }}
-                      addOnSuffix={
-                        !readOnly ? (
-                          <Tooltip content="Remove email">
-                            <button className="m-1" type="button">
-                              <Icon name="x" size={12} className="text-default" />
-                            </button>
-                          </Tooltip>
-                        ) : null
-                      }
-                    />
-                  </li>
-                ))}
-              </ul>
-              {!readOnly && (
-                <Button
-                  data-testid="add-another-guest"
-                  type="button"
-                  color="minimal"
-                  StartIcon="user-plus"
-                  className="my-2.5"
-                  onClick={() => {
-                    value.push("");
-                    setValue(value);
-                  }}
-                >
-                  {t("add_another")}
-                </Button>
-              )}
-            </div>
-          ) : (
-            <></>
-          )}
-
-          {!value.length && !readOnly && (
-            <Button
-              data-testid="add-guests"
-              color="minimal"
-              variant="button"
-              StartIcon="user-plus"
-              onClick={() => {
-                value.push("");
-                setValue(value);
-              }}
-              className="mr-auto h-fit whitespace-normal text-left"
-            >
-              <span className="flex-1">{label}</span>
-            </Button>
-          )}
-        </>
-      );
-    },
-  },
-  multiselect: {
-    propsType: propsTypes.multiselect,
-    factory: (props) => {
-      const newProps = {
-        ...props,
-        listValues: props.options.map((o) => ({ title: o.label, value: o.value })),
-      };
-      return <Widgets.MultiSelectWidget id={props.name} {...newProps} />;
-    },
-  },
-  select: {
-    propsType: propsTypes.select,
-    factory: (props) => {
-      const newProps = {
-        ...props,
-        listValues: props.options.map((o) => ({ title: o.label, value: o.value })),
-      };
-      return <Widgets.SelectWidget id={props.name} {...newProps} />;
-    },
-  },
-  checkbox: {
-    propsType: propsTypes.checkbox,
-    factory: ({ options, readOnly, setValue, value }) => {
-      value = value || [];
-      return (
-        <div>
-          {options.map((option, i) => (
-            <label key={i} className="block">
-              <Checkbox
-                disabled={readOnly}
-                onCheckedChange={(checked) => {
-                  const newValue = value.filter((v) => v !== option.value);
-                  if (checked) {
-                    newValue.push(option.value);
-                  }
-                  setValue(newValue);
-                }}
-                value={option.value}
-                checked={value.includes(option.value)}
-              />
-              <span className="text-emphasis me-2 ms-2 text-sm">{option.label ?? ""}</span>
-            </label>
-          ))}
-        </div>
-      );
-    },
-  },
-  radio: {
-    propsType: propsTypes.radio,
-    factory: ({ setValue, name, value, options, readOnly }) => {
-      return (
-        <RadioGroup
-          disabled={readOnly}
-          value={value}
-          onValueChange={(e) => {
-            setValue(e);
-          }}
-        >
-          <>
-            {options.map((option, i) => (
-              <RadioField
-                label={option.label}
-                key={`option.${i}.radio`}
-                value={option.label}
-                id={`${name}.option.${i}.radio`}
-              />
-            ))}
-          </>
-        </RadioGroup>
-      );
-    },
-  },
-  radioInput: {
-    propsType: propsTypes.radioInput,
-    factory: function RadioInputWithLabel({
-      name,
-      label,
-      options,
-      optionsInputs,
-      value,
-      setValue,
-      readOnly,
-      translatedDefaultLabel,
-    }) {
-      useEffect(() => {
-        if (!value) {
-          setValue({
-            value: options[0]?.value,
-            optionValue: "",
-          });
-        }
-      }, [options, setValue, value]);
-
-      const { t } = useLocale();
-
-      const didUserProvideLabel = (
-        label: string | undefined,
-        translatedDefaultLabel: string | undefined
-      ): label is string => {
-        return label && translatedDefaultLabel ? translatedDefaultLabel !== label : false;
-      };
-
-      const getCleanLabel = (label: string): string | JSX.Element => {
-        if (!label) {
-          return "";
-        }
-        return label.search(/^https?:\/\//) !== -1 ? (
-          <a href={label} target="_blank">
-            <span className="underline">{label}</span>
-          </a>
-        ) : (
-          label
-        );
-      };
-
-      return (
-        <div>
-          <div>
-            <div className="mb-2">
-              {options.length > 1 ? (
-                options.map((option, i) => (
-                  <label key={i} className="mb-1 flex items-center">
-                    <input
-                      type="radio"
-                      disabled={readOnly}
-                      name={name}
-                      className="bg-default after:bg-default border-emphasis hover:bg-subtle hover:after:bg-subtle checked:bg-brand-default checked:hover:bg-brand-default checked:after:bg-default dark:checked:bg-brand-default dark:checked:after:bg-brand-accent dark:hover:bg-subtle dark:checked:hover:bg-brand-default text-(--cal-brand) flex h-4 w-4 cursor-pointer items-center justify-center transition after:h-[6px] after:w-[6px] after:rounded-full after:content-[''] after:hover:block focus:ring-0 focus:ring-offset-0 focus:outline-none ltr:mr-2 rtl:ml-2"
-                      value={option.value}
-                      onChange={(e) => {
-                        setValue({
-                          value: e.target.value,
-                          optionValue: "",
-                        });
-                      }}
-                      checked={value?.value === option.value}
-                    />
-                    <span className="text-emphasis me-2 ms-2 text-sm">
-                      {getCleanLabel(option.label) ?? ""}
-                    </span>
-                    <span>
-                      {option.value === "phone" && (
-                        <InfoBadge content={t("number_in_international_format")} />
-                      )}
-                    </span>
-                  </label>
-                ))
-              ) : (
-                <>
-                  <Label className="flex items-center">
-                    {getCleanLabel(
-                      didUserProvideLabel(label, translatedDefaultLabel) ? label : options[0].label
-                    )}
-                    {!readOnly && optionsInputs[options[0].value]?.required ? (
-                      <span className="text-default -mb-2 ml-1 text-sm font-medium">*</span>
-                    ) : null}
-                    {options[0].value === "phone" && (
-                      <InfoBadge content={t("number_in_international_format")} />
-                    )}
-                  </Label>
-                </>
-              )}
-            </div>
-          </div>
-          {(() => {
-            const optionField = optionsInputs[value?.value];
-            if (!optionField) {
-              return null;
-            }
-            return (
-              <div>
-                <ComponentForField
-                  readOnly={!!readOnly}
-                  field={{
-                    ...optionField,
-                    name: "optionField",
-                  }}
-                  value={value?.optionValue}
-                  setValue={(val: string | undefined) => {
-                    setValue({
-                      value: value?.value,
-                      optionValue: val || "",
-                    });
-                  }}
-                />
-              </div>
-            );
-          })()}
-        </div>
-      );
-    },
-  },
-  boolean: {
-    propsType: propsTypes.boolean,
-    factory: ({ readOnly, name, label, value, setValue }) => {
-      return (
-        <div className="flex">
-          <CheckboxField
-            name={name}
-            onChange={(e) => {
-              if (e.target.checked) {
-                setValue(true);
-              } else {
-                setValue(false);
-              }
-            }}
-            placeholder=""
-            checked={value}
-            disabled={readOnly}
-            description=""
-            descriptionAsSafeHtml={label ?? ""}
-          />
-        </div>
-      );
-    },
-  },
-  url: {
-    propsType: propsTypes.url,
-    factory: (props) => {
-      return <Widgets.TextWidget type="url" autoComplete="url" noLabel={true} {...props} />;
-    },
-  },
-} as const;