@povio/ui 0.0.2 → 0.0.3

package/src/components/inputs/Input/shared/InputContent.tsx

@@ -0,0 +1,154 @@
+import { clsx } from "clsx";
+import {
+  type CSSProperties,
+  type FC,
+  type ReactElement,
+  type ReactNode,
+  type SVGProps,
+  isValidElement,
+  useMemo,
+} from "react";
+import useMeasure from "react-use-measure";
+
+import { InlineIconButton, type InlineIconButtonProps } from "#ui/components/buttons/InlineIconButton/InlineIconButton";
+import type { FormFieldHeaderProps } from "#ui/components/inputs/FormField/FormFieldHeader";
+import { FormFieldLabel } from "#ui/components/inputs/FormField/FormFieldLabel";
+import { InputClear } from "#ui/components/inputs/shared/InputClear";
+import { type InputSideProps, type InputVariantProps, inputSide } from "#ui/components/inputs/shared/input.cva";
+import { Loader } from "#ui/components/status/Loader/Loader";
+import { Typography } from "#ui/components/text/Typography/Typography";
+import { UIStyle } from "#ui/config/uiStyle.context";
+
+export interface InputContentProps {
+  className?: string;
+  unit?: string;
+  isLoading?: boolean;
+  isDisabled?: boolean;
+  action?: {
+    icon: InlineIconButtonProps["icon"];
+    onClick: () => void;
+    altText: string;
+    className?: string;
+  };
+  leadingIcon?: FC<SVGProps<SVGSVGElement>> | ReactElement;
+  trailingIcon?: FC<SVGProps<SVGSVGElement>> | ReactElement;
+  isClearable?: boolean;
+  value?: string;
+  onChange?: (value: string) => void;
+  headerProps?: FormFieldHeaderProps;
+}
+
+interface InputContentComponentProps extends InputContentProps, InputVariantProps {
+  children: (style: CSSProperties) => ReactNode;
+}
+
+export const InputContent = ({
+  leadingIcon: LeadingIcon,
+  trailingIcon: TrailingIcon,
+  unit,
+  isLoading,
+  isDisabled,
+  action,
+  isClearable,
+  value,
+  onChange,
+  children,
+  headerProps,
+  as,
+  size,
+}: InputContentComponentProps) => {
+  const uiStyle = UIStyle.useConfig();
+  const inputSideCva = (uiStyle?.input?.sideCva ?? inputSide) as unknown as UIStyle.Cva<InputSideProps>;
+
+  const [leadingContentRef, { width: leadingWidth }] = useMeasure();
+  const [trailingContentRef, { width: trailingWidth }] = useMeasure();
+  const [labelContentRef, { width: labelWidth }] = useMeasure();
+
+  const isLeadingIconElement = LeadingIcon && isValidElement(LeadingIcon);
+  const isTrailingIconElement = TrailingIcon && isValidElement(TrailingIcon);
+
+  const showClear = isClearable && !!value;
+
+  const style = useMemo(() => {
+    const leftPadding = as === "filter" ? labelWidth + leadingWidth : leadingWidth;
+    return {
+      paddingLeft: `calc(var(${inputSideCva({ size, type: "var" })}) + ${leftPadding}px + ${leftPadding > 0 ? "var(--spacing-2)" : "0px"})`,
+      paddingRight: `calc(var(${inputSideCva({ size, type: "var" })}) + ${trailingWidth}px + ${trailingWidth > 0 ? "var(--spacing-2)" : "0px"})`,
+    };
+  }, [leadingWidth, trailingWidth, labelWidth, as, size, inputSideCva]);
+
+  return (
+    <div className="group/input-content relative">
+      {as && ["filter", "floating"].includes(as) && headerProps && (
+        <FormFieldLabel
+          ref={labelContentRef}
+          as={as}
+          {...headerProps}
+        />
+      )}
+      {children(style)}
+
+      {LeadingIcon && (
+        <div
+          ref={leadingContentRef}
+          className={clsx(
+            "-translate-y-1/2 absolute top-1/2 left-input-side-default",
+            !isLeadingIconElement && "pointer-events-none",
+            inputSideCva({ size, type: "left" }),
+          )}
+        >
+          {isLeadingIconElement ? LeadingIcon : <LeadingIcon className="size-6 text-interactive-text-secondary-idle" />}
+        </div>
+      )}
+
+      <div
+        ref={trailingContentRef}
+        className={clsx(
+          "-translate-y-1/2 absolute top-1/2 flex items-center gap-2",
+          !isTrailingIconElement && !action && !showClear && "pointer-events-none",
+          inputSideCva({ size, type: "right" }),
+        )}
+      >
+        {showClear && <InputClear onClear={() => onChange?.("")} />}
+
+        {unit && (
+          <Typography
+            as="span"
+            size="label-2"
+            variant="prominent-1"
+            className="text-text-default-3"
+          >
+            {unit}
+          </Typography>
+        )}
+
+        {isLoading && (
+          <div className="inline-flex">
+            <Loader />
+          </div>
+        )}
+
+        {!isLoading && action && (
+          <InlineIconButton
+            color="secondary"
+            icon={action.icon}
+            isDisabled={isDisabled}
+            onPress={action.onClick}
+            excludeFromTabOrder
+            label={action.altText}
+            className={action.className}
+          />
+        )}
+
+        {!isLoading &&
+          !action &&
+          TrailingIcon &&
+          (isTrailingIconElement ? (
+            TrailingIcon
+          ) : (
+            <TrailingIcon className="size-6 text-interactive-text-secondary-idle" />
+          ))}
+      </div>
+    </div>
+  );
+};

package/src/components/inputs/Inputs/Form.tsx

@@ -0,0 +1,129 @@
+// oxlint-disable no-unsafe-argument
+// oxlint-disable no-explicit-any
+
+import { type ReactNode, useMemo } from "react";
+import type { SubmitErrorHandler, SubmitHandler, UseFormReturn } from "react-hook-form";
+import { z } from "zod";
+
+import {
+  type InputComponentProps,
+  type InputDef,
+  type InputDefBaseProps,
+  InputItem,
+} from "#ui/components/inputs/Inputs/InputItem";
+import {
+  type AllowedComponentType,
+  type DefaultComponentType,
+  getDefaultInputComponentType,
+} from "#ui/helpers/dynamicInputs";
+import { StringUtils } from "#ui/utils/string.utils";
+import { ZodUtils } from "#ui/utils/zod.utils";
+
+type Capitalize<T extends string> = T extends `${infer First}${infer Rest}` ? `${Uppercase<First>}${Rest}` : T;
+
+type FieldProps<TProps = {}> = {
+  label: string;
+  placeholder?: string;
+} & TProps;
+
+type FieldComponentProps<
+  TSchema extends z.ZodObject<any>,
+  K extends keyof z.infer<TSchema>,
+  T extends AllowedComponentType<TSchema["shape"][K]> | undefined = undefined,
+> = FieldProps<
+  InputDefBaseProps<
+    InputComponentProps<
+      T extends AllowedComponentType<TSchema["shape"][K]> ? T : DefaultComponentType<TSchema["shape"][K]>
+    >
+  >
+> & {
+  inputType?: T extends AllowedComponentType<TSchema["shape"][K]> ? T : never;
+};
+
+type FieldComponents<TSchema extends z.ZodObject<any>> = {
+  [K in keyof Required<z.infer<TSchema>> as Capitalize<K & string>]: <
+    T extends AllowedComponentType<TSchema["shape"][K]> | undefined = undefined,
+  >(
+    props: FieldComponentProps<TSchema, K, T>,
+  ) => ReactNode;
+};
+
+const createFieldComponent = <TSchema extends z.ZodObject<any>>(
+  field: keyof z.infer<TSchema>,
+  schemaKeyType: z.core.$ZodType,
+  form: UseFormReturn<z.infer<TSchema>>,
+) => {
+  return function FieldComponent({
+    inputType,
+    label,
+    placeholder,
+    ...inputProps
+  }: FieldComponentProps<TSchema, typeof field>) {
+    const name = field;
+    const type = inputType ?? getDefaultInputComponentType(schemaKeyType);
+
+    const unwrappedKeyType = ZodUtils.unwrapZodType(schemaKeyType);
+    const defaultProps = unwrappedKeyType instanceof z.ZodArray ? { selectionMode: "multiple" } : {};
+
+    const inputDef = {
+      name,
+      type,
+      label,
+      placeholder,
+      props: { ...defaultProps, ...inputProps },
+    } as InputDef<z.infer<TSchema>>;
+
+    return (
+      <InputItem
+        form={form}
+        inputDef={inputDef}
+      />
+    );
+  };
+};
+
+interface FormProps<TSchema extends z.ZodObject<any>, TSchemaType extends Record<string, any> = z.infer<TSchema>> {
+  form: UseFormReturn<TSchemaType>;
+  schema: TSchema;
+  onSubmit: SubmitHandler<TSchemaType>;
+  onError?: SubmitErrorHandler<TSchemaType>;
+  className?: string;
+  children: (components: FieldComponents<TSchema>) => ReactNode;
+}
+
+export function Form<TSchema extends z.ZodObject<any>>({
+  form,
+  schema,
+  onSubmit,
+  onError,
+  className,
+  children,
+}: FormProps<TSchema>) {
+  const components = useMemo(() => {
+    const fieldComponents = {} as FieldComponents<TSchema>;
+    const fields = Object.keys(schema.shape) as Array<keyof z.infer<TSchema>>;
+
+    for (const field of fields) {
+      const componentName = StringUtils.capitalize(String(field));
+      // oxlint-disable-next-line no-unsafe-assignment no-unsafe-member-access
+      const schemaKeyType = schema.shape[field];
+
+      fieldComponents[componentName as keyof typeof fieldComponents] = createFieldComponent(
+        field,
+        schemaKeyType,
+        form,
+      ) as FieldComponents<TSchema>[keyof FieldComponents<TSchema>];
+    }
+
+    return fieldComponents;
+  }, [schema.shape, form]);
+
+  return (
+    <form
+      onSubmit={form.handleSubmit(onSubmit, onError)}
+      className={className}
+    >
+      {children(components)}
+    </form>
+  );
+}

package/src/components/inputs/Inputs/InputItem.tsx

@@ -0,0 +1,127 @@
+// oxlint-disable no-explicit-any
+
+import type { ComponentProps, ComponentType, JSXElementConstructor, ReactElement, ReactNode } from "react";
+import type { Control, UseFormReturn } from "react-hook-form";
+import type { z } from "zod";
+
+import { Checkbox } from "#ui/components/inputs/Checkbox/Checkbox";
+import { DatePicker } from "#ui/components/inputs/DateTime/DatePicker/DatePicker";
+import { DateRangePicker } from "#ui/components/inputs/DateTime/DateRangePicker/DateRangePicker";
+import { DateTimePicker } from "#ui/components/inputs/DateTime/DateTimePicker/DateTimePicker";
+import { TimePicker } from "#ui/components/inputs/DateTime/TimePicker/TimePicker";
+import { NumberInput } from "#ui/components/inputs/Input/NumberInput/NumberInput";
+import { PasswordInput } from "#ui/components/inputs/Input/PasswordInput/PasswordInput";
+import { TextArea } from "#ui/components/inputs/Input/TextArea/TextArea";
+import { TextInput } from "#ui/components/inputs/Input/TextInput/TextInput";
+import { Autocomplete } from "#ui/components/inputs/Selection/Autocomplete/Autocomplete";
+import { QueryAutocomplete } from "#ui/components/inputs/Selection/Autocomplete/QueryAutocomplete";
+import { Select } from "#ui/components/inputs/Selection/Select/Select";
+import { Slider } from "#ui/components/inputs/Slider/Slider";
+import { TextEditor } from "#ui/components/inputs/TextEditor/TextEditor";
+import { Toggle } from "#ui/components/inputs/Toggle/Toggle";
+import { Segment } from "#ui/components/segment/Segment";
+import type { HasRequiredProperty } from "#ui/types/common";
+
+const componentRegistry = {
+  toggle: Toggle,
+  checkbox: Checkbox,
+  numberInput: NumberInput,
+  slider: Slider,
+  textInput: TextInput,
+  passwordInput: PasswordInput,
+  textArea: TextArea,
+  select: Select,
+  autocomplete: Autocomplete,
+  queryAutocomplete: QueryAutocomplete,
+  segment: Segment,
+  datePicker: DatePicker,
+  dateTimePicker: DateTimePicker,
+  timePicker: TimePicker,
+  dateRangePicker: DateRangePicker,
+  textEditor: TextEditor,
+  unknown: null,
+} as const;
+
+export type InputComponentRegistry = typeof componentRegistry;
+export type InputComponentType = keyof InputComponentRegistry;
+
+interface InputItemProps<TSchema extends z.ZodObject<any>, TSchemaType extends Record<string, any> = z.infer<TSchema>> {
+  form: UseFormReturn<TSchemaType>;
+  inputDef: InputDef<TSchemaType>;
+}
+
+export type InputDef<TSchemaType extends Record<string, any>> = {
+  [T in InputComponentType]: T extends "unknown"
+    ? never
+    : {
+        [K in keyof TSchemaType]: TypeBasedInputDef<TSchemaType, T, K> | RenderBasedInputDef<TSchemaType, K>;
+      }[keyof TSchemaType];
+}[InputComponentType];
+
+type TypeBasedInputDef<
+  TSchemaType extends Record<string, any>,
+  T extends InputComponentType,
+  K extends keyof TSchemaType,
+> = {
+  type: T;
+  name: K;
+  label: string;
+  placeholder?: string;
+  inputWrapper?: InputWrapperType;
+  render?: never;
+} & (HasRequiredProperty<InputDefBaseProps<InputComponentProps<T>>> extends true
+  ? { props?: InputDefBaseProps<InputComponentProps<T>> }
+  : { props: InputDefBaseProps<InputComponentProps<T>> });
+
+interface RenderBasedInputDef<TSchemaType extends Record<string, any>, K extends keyof TSchemaType> {
+  type?: never;
+  name: K;
+  label?: never;
+  placeholder?: never;
+  props?: never;
+  inputWrapper?: never;
+  render: (formControl: { control: Control<TSchemaType>; name: K }, form: UseFormReturn<TSchemaType>) => ReactElement;
+}
+
+export type InputWrapperType = (children: ReactNode, label: string) => ReactElement;
+
+export type InputComponentProps<T extends InputComponentType> = InputComponentRegistry[T] extends
+  | keyof React.JSX.IntrinsicElements
+  | JSXElementConstructor<any>
+  ? ComponentProps<InputComponentRegistry[T]>
+  : null;
+
+export type InputDefBaseProps<TProps> = Omit<TProps, "formControl" | "label" | "placeholder" | "children">;
+
+export function InputItem<
+  TSchema extends z.ZodObject<any>,
+  TSchemaType extends Record<string, any> = z.infer<TSchema>,
+>({ form, inputDef }: InputItemProps<TSchema, TSchemaType>) {
+  const { name, label, placeholder, props, inputWrapper, render, type } = inputDef;
+  const formControl = { control: form.control, name };
+
+  if (render) {
+    return render(formControl, form);
+  }
+
+  if (!type) {
+    return null;
+  }
+
+  const Component = componentRegistry[type] as ComponentType<any>;
+  const usesChildrenAsLabel = ["toggle", "checkbox"].includes(type);
+  const inputProps = props ?? {};
+
+  const inputComponent = (
+    <Component
+      {...inputProps}
+      label={usesChildrenAsLabel ? undefined : label}
+      placeholder={placeholder}
+      formControl={formControl}
+    >
+      {usesChildrenAsLabel ? label : undefined}
+    </Component>
+  );
+
+  return inputWrapper ? inputWrapper(inputComponent, label) : inputComponent;
+}

package/src/components/inputs/Inputs/Inputs.tsx

@@ -0,0 +1,43 @@
+// oxlint-disable no-explicit-any
+import type { ReactNode } from "react";
+import type { UseFormReturn } from "react-hook-form";
+import type { z } from "zod";
+
+import { type InputDef, InputItem } from "./InputItem";
+
+export interface InputsProps<
+  TSchema extends z.ZodObject<any>,
+  TSchemaType extends Record<string, any> = z.infer<TSchema>,
+> {
+  form: UseFormReturn<TSchemaType>;
+  inputDefs: Array<InputDef<TSchemaType>>;
+  children?: (inputs: Record<keyof TSchemaType, ReactNode>) => ReactNode;
+}
+
+export function Inputs<TSchema extends z.ZodObject<any>, TSchemaType extends Record<string, any> = z.infer<TSchema>>({
+  form,
+  inputDefs,
+  children,
+}: InputsProps<TSchema, TSchemaType>) {
+  if (!children) {
+    return inputDefs.map((inputDef) => (
+      <InputItem
+        key={String(inputDef.name)}
+        form={form}
+        inputDef={inputDef}
+      />
+    ));
+  }
+
+  const childrenParams = {} as Record<keyof TSchemaType, ReactNode>;
+  for (const inputDef of inputDefs) {
+    childrenParams[inputDef.name as unknown as keyof TSchemaType] = (
+      <InputItem
+        form={form}
+        inputDef={inputDef}
+      />
+    );
+  }
+
+  return children(childrenParams);
+}

package/src/components/inputs/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,139 @@
+import { mergeRefs } from "@react-aria/utils";
+import { clsx } from "clsx";
+import type { ReactElement, Ref } from "react";
+import {
+  Radio as AriaRadio,
+  RadioGroup as AriaRadioGroup,
+  type RadioGroupProps as AriaRadioGroupProps,
+} from "react-aria-components";
+import { Controller, type FieldValues } from "react-hook-form";
+
+import { FormField, type FormFieldProps } from "#ui/components/inputs/FormField/FormField";
+import {
+  type RadioVariantProps,
+  radio,
+  radioIndicatorClass,
+  radioTypography,
+} from "#ui/components/inputs/RadioGroup/radio.cva";
+import { CheckContent } from "#ui/components/inputs/shared/CheckContent";
+import type { ControlProps } from "#ui/components/inputs/shared/form.types";
+import { UIConfig } from "#ui/config/uiConfig.context";
+import { UIStyle } from "#ui/config/uiStyle.context";
+
+interface RadioGroupBaseProps
+  extends Omit<FormFieldProps, "variant">,
+    RadioVariantProps,
+    Omit<AriaRadioGroupProps, "className"> {
+  ref?: Ref<HTMLDivElement>;
+  options: {
+    label: string | ReactElement;
+    value: string;
+  }[];
+}
+
+const RadioGroupBase = (props: RadioGroupBaseProps) => {
+  const ui = UIConfig.useConfig();
+  const uiStyle = UIStyle.useConfig();
+  const radioCva = (uiStyle?.radio?.cva ?? radio) as unknown as UIStyle.Cva<RadioVariantProps>;
+  const radioTypographyMap = uiStyle?.radio?.typography ?? radioTypography;
+
+  const {
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isDisabled,
+    headerClassName,
+    errorClassName,
+    isHeaderHidden,
+    error,
+    className,
+    options,
+    variant = ui.radioGroup.variant,
+    hideLabel = ui.radioGroup.hideLabel,
+    ...rest
+  } = props;
+
+  const formFieldProps: FormFieldProps = {
+    className,
+    error,
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden,
+    hideLabel,
+    isDisabled,
+    headerClassName,
+    errorClassName,
+  };
+
+  return (
+    <AriaRadioGroup
+      {...rest}
+      isDisabled={isDisabled}
+      isInvalid={!!error}
+    >
+      <FormField {...formFieldProps}>
+        <div className="flex flex-col">
+          {options.map((option) => (
+            <AriaRadio
+              value={option.value}
+              className={radioIndicatorClass}
+              key={option.value}
+            >
+              <div
+                className={radioCva({
+                  variant,
+                  ...rest,
+                })}
+              >
+                <div
+                  className={clsx(
+                    "absolute hidden size-1 rounded-full group-selected:block",
+                    "bg-interactive-contained-primary-on-idle group-hover:bg-interactive-contained-primary-on-hover",
+                  )}
+                />
+              </div>
+
+              <CheckContent typography={radioTypographyMap({ variant, ...rest })}>{option.label}</CheckContent>
+            </AriaRadio>
+          ))}
+        </div>
+      </FormField>
+    </AriaRadioGroup>
+  );
+};
+
+export interface RadioGroupProps extends RadioGroupBaseProps {}
+
+export type ControlledRadioGroupProps<TFieldValues extends FieldValues> = ControlProps<RadioGroupProps, TFieldValues>;
+
+export const RadioGroup = <TFieldValues extends FieldValues>(props: ControlledRadioGroupProps<TFieldValues>) => {
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+
+    return (
+      <Controller
+        control={formControl.control}
+        name={formControl.name}
+        render={({ field, fieldState: { error } }) => (
+          <RadioGroupBase
+            {...innerProps}
+            ref={mergeRefs(ref, field.ref)}
+            value={field.value}
+            onChange={field.onChange}
+            onBlur={field.onBlur}
+            name={field.name}
+            isDisabled={field.disabled || props.isDisabled}
+            error={props.error ?? error?.message}
+          />
+        )}
+      />
+    );
+  }
+
+  return <RadioGroupBase {...props} />;
+};

package/src/components/inputs/RadioGroup/radio.cva.ts

@@ -0,0 +1,51 @@
+import { type VariantProps, cva } from "class-variance-authority";
+
+import { uiGroupOutlineClass } from "#ui/components/outline.clsx";
+import type { TypographyVariantProps } from "#ui/components/text/Typography/typography.cva";
+import { compoundMapper } from "#ui/utils/compoundMapper";
+
+export const radio = cva(
+  ["flex items-center justify-center border-2", "relative size-3-5 rounded-full p-1-5", uiGroupOutlineClass],
+  {
+    variants: {
+      variant: {
+        default: [
+          "border-interactive-contained-secondary-idle",
+          "group-disabled:border-interactive-contained-secondary-disabled",
+          "group-hover:border-interactive-contained-secondary-hover",
+          "group-pressed:border-interactive-contained-secondary-pressed",
+          "group-selected:border-interactive-contained-primary-idle",
+          "group-selected:bg-interactive-contained-primary-idle",
+          "group-selected:group-hover:bg-interactive-contained-primary-hover",
+          "group-selected:group-hover:border-interactive-contained-primary-hover",
+          "group-selected:group-pressed:bg-interactive-contained-primary-pressed",
+          "group-selected:group-pressed:border-interactive-contained-primary-pressed",
+          "group-indeterminate:border-interactive-contained-primary-idle",
+          "group-indeterminate:bg-interactive-contained-primary-idle",
+          "group-indeterminate:group-hover:bg-interactive-contained-primary-hover",
+          "group-indeterminate:group-hover:border-interactive-contained-primary-hover",
+          "group-indeterminate:group-pressed:bg-interactive-contained-primary-pressed",
+          "group-indeterminate:group-pressed:border-interactive-contained-primary-pressed",
+          "group-invalid:border-interactive-contained-error-idle",
+          "group-focus-visible:outline-interactive-contained-primary-focus",
+        ],
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+// oxlint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - If this ignore is missing, overriding cva types causes a type error
+export interface RadioVariantProps extends VariantProps<typeof radio> {}
+
+export const radioIndicatorClass = "group flex items-center gap-2";
+
+export const radioTypography = compoundMapper<TypographyVariantProps, RadioVariantProps>({
+  default: {
+    size: "label-1",
+    variant: "default",
+  },
+});