@povio/ui 0.0.4 → 0.0.6

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

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

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

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

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

@@ -1,139 +0,0 @@
-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/Selection/Autocomplete/Autocomplete.tsx

@@ -1,61 +0,0 @@
-import { mergeRefs } from "@react-aria/utils";
-import type { Key } from "react-aria-components";
-import { Controller, type FieldValues } from "react-hook-form";
-
-import { SelectBase, type SelectBaseProps } from "#ui/components/inputs/Selection/shared/SelectBase";
-import type {
-  DefaultInitialSelectItem,
-  GroupedSelectControlProps,
-  GroupedSelectProps,
-} from "#ui/components/inputs/Selection/shared/select.types";
-import type { OmitDiscriminatedUnion } from "#ui/types/common";
-
-export type AutocompleteProps<
-  TKey extends Key = Key,
-  TInitialSelectItem = DefaultInitialSelectItem<TKey>,
-> = OmitDiscriminatedUnion<SelectBaseProps<TKey, TInitialSelectItem>, "isSearchable">;
-
-export type ControlledAutocompleteProps<
-  TFieldValues extends FieldValues,
-  TKey extends Key = Key,
-  TInitialSelectItem = DefaultInitialSelectItem<TKey>,
-> = Omit<AutocompleteProps<TKey, TInitialSelectItem>, keyof GroupedSelectProps> &
-  GroupedSelectControlProps<TFieldValues, TKey, TInitialSelectItem>;
-
-export const Autocomplete = <
-  TFieldValues extends FieldValues,
-  TKey extends Key = Key,
-  TInitialSelectItem = DefaultInitialSelectItem<TKey>,
->(
-  props: ControlledAutocompleteProps<TFieldValues, TKey, TInitialSelectItem>,
-) => {
-  if ("formControl" in props && props.formControl) {
-    const { formControl, ref, ...innerProps } = props;
-
-    return (
-      <Controller
-        control={formControl.control}
-        name={formControl.name}
-        render={({ field, fieldState: { error } }) => (
-          <SelectBase
-            {...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}
-            isSearchable
-          />
-        )}
-      />
-    );
-  }
-
-  return (
-    <SelectBase
-      {...props}
-      isSearchable
-    />
-  );
-};