@povio/ui 0.0.4 → 0.0.6

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

@@ -1,180 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,166 +0,0 @@
-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

@@ -1,181 +0,0 @@
-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} />;
-};