@povio/ui 0.0.2 → 0.0.3

package/src/components/inputs/Input/NumberInput/NumberInput.tsx

@@ -0,0 +1,180 @@
+import { mergeRefs } from "@react-aria/utils";
+import { clsx } from "clsx";
+import { type Ref, useRef } from "react";
+import { useNumberField } from "react-aria";
+import { Input as AriaInput, type NumberFieldProps as AriaNumberFieldProps, useLocale } from "react-aria-components";
+import { Controller, type FieldValues } from "react-hook-form";
+import { type NumberFieldStateOptions, useNumberFieldState } from "react-stately";
+
+import { FormField, type FormFieldProps } from "#ui/components/inputs/FormField/FormField";
+import type { FormFieldHeaderProps } from "#ui/components/inputs/FormField/FormFieldHeader";
+import { InputContent, type InputContentProps } from "#ui/components/inputs/Input/shared/InputContent";
+import type { ControlProps } from "#ui/components/inputs/shared/form.types";
+import { type InputVariantProps, useInputCva } from "#ui/components/inputs/shared/input.cva";
+import { UIConfig } from "#ui/config/uiConfig.context";
+
+interface NumberInputBaseProps
+  extends FormFieldProps,
+    InputVariantProps,
+    Omit<InputContentProps, "ref" | "value" | "onChange">,
+    Omit<AriaNumberFieldProps, "value" | "onChange" | "className"> {
+  ref?: Ref<HTMLInputElement>;
+  placeholder?: string;
+  inputClassName?: string;
+  value?: number | null;
+  onChange?: (value: number | null) => void;
+}
+
+const NumberInputBase = (props: NumberInputBaseProps) => {
+  const ui = UIConfig.useConfig();
+  const inputCva = useInputCva();
+
+  const {
+    ref,
+    inputClassName,
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isDisabled,
+    headerClassName,
+    errorClassName,
+    isHeaderHidden,
+    error,
+    className,
+    unit,
+    isLoading,
+    action,
+    leadingIcon,
+    trailingIcon,
+    value,
+    onChange,
+    onBlur,
+    formatOptions = ui.numberInput.formatOptions,
+    variant = ui.input.variant,
+    as = ui.input.as,
+    size = ui.input.size,
+    hideLabel = ui.input.hideLabel,
+    isClearable = ui.input.isClearable,
+    ...rest
+  } = props;
+
+  const numberFieldRef = useRef<HTMLInputElement>(null);
+
+  const { locale } = useLocale();
+
+  const numberProps: NumberFieldStateOptions = {
+    ...rest,
+    value: value ?? undefined,
+    label,
+    isDisabled,
+    isInvalid: !!error,
+    isRequired,
+    onChange,
+    onBlur,
+    locale,
+    formatOptions,
+  };
+
+  const state = useNumberFieldState(numberProps);
+  const { labelProps, inputProps } = useNumberField(numberProps, state, numberFieldRef);
+
+  const formFieldProps: FormFieldProps = {
+    error,
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+    hideLabel,
+    isDisabled,
+    headerClassName,
+    errorClassName,
+  };
+
+  const inputContentProps: InputContentProps = {
+    unit,
+    isLoading,
+    isDisabled,
+    action,
+    leadingIcon,
+    trailingIcon,
+    isClearable,
+  };
+
+  const headerProps: FormFieldHeaderProps = {
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden: hideLabel || isHeaderHidden,
+    isDisabled,
+    className: headerClassName,
+    labelProps,
+  };
+
+  return (
+    <FormField
+      {...formFieldProps}
+      as={as}
+      labelProps={labelProps}
+      className={clsx("group w-full", className)}
+    >
+      <InputContent
+        {...inputContentProps}
+        headerProps={headerProps}
+        as={as}
+        size={size}
+      >
+        {(style) => (
+          <AriaInput
+            {...inputProps}
+            ref={ref}
+            placeholder={as === "floating" ? "" : inputProps.placeholder}
+            className={inputCva({
+              variant,
+              as,
+              size,
+              ...rest,
+              className: inputClassName,
+            })}
+            style={style}
+          />
+        )}
+      </InputContent>
+    </FormField>
+  );
+};
+
+export type NumberInputProps = NumberInputBaseProps;
+
+export type ControlledNumberInputProps<TFieldValues extends FieldValues> = ControlProps<NumberInputProps, TFieldValues>;
+
+export const NumberInput = <TFieldValues extends FieldValues>(props: ControlledNumberInputProps<TFieldValues>) => {
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+
+    return (
+      <Controller
+        control={formControl.control}
+        name={formControl.name}
+        render={({ field, fieldState: { error } }) => (
+          <NumberInputBase
+            {...innerProps}
+            ref={mergeRefs(ref, field.ref)}
+            value={field.value}
+            onChange={field.onChange}
+            onBlur={field.onBlur}
+            isDisabled={field.disabled || props.isDisabled}
+            error={props.error ?? error?.message}
+          />
+        )}
+      />
+    );
+  }
+
+  return <NumberInputBase {...props} />;
+};

package/src/components/inputs/Input/PasswordInput/PasswordInput.tsx

@@ -0,0 +1,34 @@
+import { useState } from "react";
+import type { FieldValues } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+
+import { ViewIcon } from "#ui/assets/icons/View";
+import { ViewOffIcon } from "#ui/assets/icons/ViewOff";
+import { TextInput, type TextInputProps } from "#ui/components/inputs/Input/TextInput/TextInput";
+import type { ControlProps } from "#ui/components/inputs/shared/form.types";
+import { ns } from "#ui/config/i18n";
+
+export interface PasswordInputProps extends Omit<TextInputProps, "type" | "action" | "trailingIcon" | "unit"> {}
+
+export type ControlledPasswordInputProps<TFieldValues extends FieldValues> = ControlProps<
+  PasswordInputProps,
+  TFieldValues
+>;
+
+export const PasswordInput = <TFieldValues extends FieldValues>(props: ControlledPasswordInputProps<TFieldValues>) => {
+  const { t } = useTranslation(ns);
+  const [isRevealed, setIsRevealed] = useState(false);
+
+  return (
+    <TextInput
+      {...props}
+      // @ts-expect-error Type "password" is allowed inside the PasswordInput component
+      type={isRevealed ? "text" : "password"}
+      action={{
+        icon: isRevealed ? ViewIcon : ViewOffIcon,
+        altText: t(($) => (isRevealed ? $.ui.password.hide : $.ui.password.reveal)),
+        onClick: () => setIsRevealed(!isRevealed),
+      }}
+    />
+  );
+};

package/src/components/inputs/Input/TextArea/TextArea.tsx

@@ -0,0 +1,166 @@
+import { mergeRefs } from "@react-aria/utils";
+import { clsx } from "clsx";
+import { type Ref, useRef } from "react";
+import { type AriaTextFieldProps, useTextField } from "react-aria";
+import { TextArea as AriaTextArea, type TextAreaProps as AriaTextAreaProps } from "react-aria-components";
+import { Controller, type FieldValues } from "react-hook-form";
+
+import { FormField, type FormFieldProps } from "#ui/components/inputs/FormField/FormField";
+import type { FormFieldHeaderProps } from "#ui/components/inputs/FormField/FormFieldHeader";
+import { FormFieldLabel } from "#ui/components/inputs/FormField/FormFieldLabel";
+import type { ControlProps } from "#ui/components/inputs/shared/form.types";
+import { InputClear } from "#ui/components/inputs/shared/InputClear";
+import { type InputVariantProps, useInputCva } from "#ui/components/inputs/shared/input.cva";
+import { UIConfig } from "#ui/config/uiConfig.context";
+
+interface TextAreaBaseProps
+  extends FormFieldProps,
+    InputVariantProps,
+    Omit<
+      AriaTextAreaProps,
+      "value" | "defaultValue" | "onChange" | "disabled" | "required" | "className" | keyof AriaTextFieldProps
+    >,
+    Omit<AriaTextFieldProps<HTMLTextAreaElement>, "label"> {
+  ref?: Ref<HTMLTextAreaElement>;
+  isClearable?: boolean;
+  inputClassName?: string;
+}
+
+const TextAreaBase = (props: TextAreaBaseProps) => {
+  const ui = UIConfig.useConfig();
+  const inputCva = useInputCva();
+
+  const {
+    ref,
+    className,
+    inputClassName,
+    error,
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isDisabled,
+    headerClassName,
+    errorClassName,
+    isHeaderHidden,
+    value,
+    onChange,
+    onBlur,
+    as = ui.input.as,
+    hideLabel = ui.input.hideLabel,
+    variant = ui.input.variant,
+    isClearable = ui.input.isClearable,
+    ...rest
+  } = props;
+
+  const textFieldRef = useRef<HTMLTextAreaElement>(null);
+
+  const textFieldProps: AriaTextFieldProps<HTMLTextAreaElement> = {
+    ...rest,
+    label,
+    isDisabled,
+    isInvalid: !!error,
+    isRequired,
+    value,
+    onChange,
+    onBlur,
+  };
+
+  const { labelProps, inputProps } = useTextField<"textarea">(textFieldProps, textFieldRef);
+
+  const formFieldProps: FormFieldProps = {
+    error,
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+    hideLabel,
+    isDisabled,
+    headerClassName,
+    errorClassName,
+  };
+
+  const headerProps: FormFieldHeaderProps = {
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden: hideLabel || isHeaderHidden,
+    isDisabled,
+    className: headerClassName,
+    labelProps,
+  };
+
+  const showClear = isClearable && value != null && value !== "";
+
+  return (
+    <FormField
+      {...formFieldProps}
+      as={as}
+      labelProps={labelProps}
+      className={clsx("w-full", className)}
+    >
+      <div
+        className="group/text-area relative h-full"
+        data-text-area
+      >
+        {as === "floating" && headerProps && (
+          <FormFieldLabel
+            as={as}
+            {...headerProps}
+          />
+        )}
+        <AriaTextArea
+          {...inputProps}
+          placeholder={as === "floating" ? "" : inputProps.placeholder}
+          className={inputCva({
+            variant,
+            as,
+            ...rest,
+            className: clsx("block h-full min-h-8", inputClassName),
+          })}
+          ref={ref}
+        />
+        {showClear && (
+          <InputClear
+            onClear={() => onChange?.("")}
+            className="absolute top-input-side-default right-input-side-default"
+          />
+        )}
+      </div>
+    </FormField>
+  );
+};
+
+export interface TextAreaProps extends TextAreaBaseProps {}
+
+export type ControlledTextAreaProps<TFieldValues extends FieldValues> = ControlProps<TextAreaProps, TFieldValues>;
+
+export const TextArea = <TFieldValues extends FieldValues>(props: ControlledTextAreaProps<TFieldValues>) => {
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+
+    return (
+      <Controller
+        control={formControl.control}
+        name={formControl.name}
+        render={({ field, fieldState: { error } }) => (
+          <TextAreaBase
+            {...innerProps}
+            ref={mergeRefs(ref, field.ref)}
+            value={field.value ?? ""}
+            onChange={field.onChange}
+            isDisabled={field.disabled || props.isDisabled}
+            error={props.error ?? error?.message}
+          />
+        )}
+      />
+    );
+  }
+
+  return <TextAreaBase {...props} />;
+};

package/src/components/inputs/Input/TextInput/TextInput.tsx

@@ -0,0 +1,181 @@
+import { mergeRefs } from "@react-aria/utils";
+import { clsx } from "clsx";
+import { type Ref, useRef } from "react";
+import { type AriaTextFieldProps, useTextField } from "react-aria";
+import { Input as AriaInput, type InputProps as AriaInputProps } from "react-aria-components";
+import { Controller, type FieldValues } from "react-hook-form";
+
+import { FormField, type FormFieldProps } from "#ui/components/inputs/FormField/FormField";
+import type { FormFieldHeaderProps } from "#ui/components/inputs/FormField/FormFieldHeader";
+import { InputContent, type InputContentProps } from "#ui/components/inputs/Input/shared/InputContent";
+import type { ControlProps } from "#ui/components/inputs/shared/form.types";
+import { type InputVariantProps, useInputCva } from "#ui/components/inputs/shared/input.cva";
+import { UIConfig } from "#ui/config/uiConfig.context";
+
+type AllowedHTMLInputTypeAttribute = "email" | "hidden" | "tel" | "text" | "url";
+
+interface TextInputBaseProps
+  extends FormFieldProps,
+    InputVariantProps,
+    Omit<InputContentProps, "ref" | "value" | "onChange">,
+    Omit<
+      AriaInputProps,
+      | "value"
+      | "defaultValue"
+      | "onChange"
+      | "disabled"
+      | "required"
+      | "type"
+      | "size"
+      | "className"
+      | keyof AriaTextFieldProps
+    >,
+    Omit<AriaTextFieldProps<HTMLInputElement>, "label"> {
+  ref?: Ref<HTMLInputElement>;
+  inputClassName?: string;
+  type?: AllowedHTMLInputTypeAttribute;
+}
+
+const TextInputBase = (props: TextInputBaseProps) => {
+  const ui = UIConfig.useConfig();
+  const inputCva = useInputCva();
+
+  const {
+    ref,
+    inputClassName,
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isDisabled,
+    headerClassName,
+    errorClassName,
+    isHeaderHidden,
+    error,
+    className,
+    unit,
+    isLoading,
+    action,
+    leadingIcon,
+    trailingIcon,
+    value,
+    onChange,
+    onBlur,
+    as = ui.input.as,
+    hideLabel = ui.input.hideLabel,
+    variant = ui.input.variant,
+    size = ui.input.size,
+    isClearable = ui.input.isClearable,
+    ...rest
+  } = props;
+
+  const textFieldRef = useRef<HTMLInputElement>(null);
+
+  const textFieldProps: AriaTextFieldProps<HTMLInputElement> = {
+    ...rest,
+    label,
+    isDisabled,
+    isInvalid: !!error,
+    isRequired,
+    value,
+    onChange,
+    onBlur,
+  };
+
+  const { labelProps, inputProps } = useTextField(textFieldProps, textFieldRef);
+
+  const formFieldProps: FormFieldProps = {
+    error,
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+    hideLabel,
+    isDisabled,
+    headerClassName,
+    errorClassName,
+  };
+
+  const inputContentProps: InputContentProps = {
+    unit,
+    isLoading,
+    isDisabled,
+    action,
+    leadingIcon,
+    trailingIcon,
+    isClearable,
+    value,
+    onChange,
+  };
+
+  const headerProps: FormFieldHeaderProps = {
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden: hideLabel || isHeaderHidden,
+    isDisabled,
+    className: headerClassName,
+    labelProps,
+  };
+
+  return (
+    <FormField
+      {...formFieldProps}
+      as={as}
+      labelProps={labelProps}
+      className={clsx("group w-full", className)}
+    >
+      <InputContent
+        {...inputContentProps}
+        headerProps={headerProps}
+        as={as}
+        size={size}
+      >
+        {(style) => (
+          <AriaInput
+            {...inputProps}
+            ref={ref}
+            placeholder={as === "floating" ? "" : inputProps.placeholder}
+            className={inputCva({ variant, as, size, ...rest, className: inputClassName })}
+            style={style}
+          />
+        )}
+      </InputContent>
+    </FormField>
+  );
+};
+
+export interface TextInputProps extends TextInputBaseProps {}
+
+export type ControlledTextInputProps<TFieldValues extends FieldValues> = ControlProps<TextInputProps, TFieldValues>;
+
+export const TextInput = <TFieldValues extends FieldValues>(props: ControlledTextInputProps<TFieldValues>) => {
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+
+    return (
+      <Controller
+        control={formControl.control}
+        name={formControl.name}
+        render={({ field, fieldState: { error } }) => (
+          <TextInputBase
+            {...innerProps}
+            ref={mergeRefs(ref, field.ref)}
+            value={field.value}
+            onChange={field.onChange}
+            onBlur={field.onBlur}
+            isDisabled={field.disabled || props.isDisabled}
+            error={props.error ?? error?.message}
+          />
+        )}
+      />
+    );
+  }
+
+  return <TextInputBase {...props} />;
+};