@povio/ui 0.0.4 → 0.0.6

package/src/components/buttons/PillButton/PillButton.tsx

@@ -1,70 +0,0 @@
-import type { ElementType, FC, SVGProps } from "react";
-import {
-  Button as AriaButton,
-  type ButtonProps as AriaButtonProps,
-  ToggleButton as AriaToggleButton,
-  type ToggleButtonProps as AriaToggleButtonProps,
-} from "react-aria-components";
-
-import { CloseIcon } from "#ui/assets/icons/Close";
-import {
-  type PillButtonVariants,
-  pillButton,
-  pillButtonContent,
-  pillButtonIconSize,
-  pillButtonTypography,
-} from "#ui/components/buttons/PillButton/pillButton.cva";
-import { ButtonContent } from "#ui/components/buttons/shared/ButtonContent";
-import type { ButtonContentVariantProps } from "#ui/components/buttons/shared/buttonContent.cva";
-import { TooltipEllipsis } from "#ui/components/overlays/Tooltip/TooltipEllipsis";
-import { UIStyle } from "#ui/config/uiStyle.context";
-
-export interface PillButtonProps
-  extends AriaButtonProps,
-    Omit<AriaToggleButtonProps, keyof AriaButtonProps>,
-    ButtonContentVariantProps,
-    PillButtonVariants {
-  children: string;
-  dismissable?: boolean;
-  toggle?: boolean;
-  icon?: FC<SVGProps<SVGSVGElement>>;
-}
-
-export const PillButton = ({ children, dismissable, toggle, icon, iconPosition, ...props }: PillButtonProps) => {
-  const uiStyle = UIStyle.useConfig();
-  const pillButtonCva = (uiStyle?.pillButton?.cva ?? pillButton) as unknown as UIStyle.Cva<PillButtonVariants>;
-  const pillButtonTypographyMap = uiStyle?.pillButton?.typography ?? pillButtonTypography;
-
-  const Component: ElementType = toggle ? AriaToggleButton : AriaButton;
-
-  const getIconPosition = () => {
-    if (dismissable) {
-      return "right";
-    }
-    return icon ? iconPosition : "none";
-  };
-
-  return (
-    <TooltipEllipsis text={children}>
-      {(onContentRef) => (
-        <Component
-          {...props}
-          className={pillButtonCva({
-            ...props,
-            className: props.className,
-          })}
-        >
-          <ButtonContent
-            text={children}
-            ref={onContentRef}
-            icon={dismissable ? CloseIcon : icon}
-            iconPosition={dismissable ? "right" : iconPosition}
-            className={pillButtonContent({ iconPosition: getIconPosition() })}
-            iconClassName={pillButtonIconSize}
-            typography={pillButtonTypographyMap({ ...props })}
-          />
-        </Component>
-      )}
-    </TooltipEllipsis>
-  );
-};

package/src/components/buttons/SplitButton/SplitButton.tsx

@@ -1,61 +0,0 @@
-import { clsx } from "clsx";
-import type { ButtonProps as AriaButtonProps, LinkProps as AriaLinkProps } from "react-aria-components";
-
-import { ChevronDownIcon } from "#ui/assets/icons/ChevronDown";
-import { Button } from "#ui/components/buttons/Button/Button";
-import type { ButtonVariantProps } from "#ui/components/buttons/Button/button.cva";
-import { IconButton } from "#ui/components/buttons/IconButton/IconButton";
-import { Menu, type MenuItem } from "#ui/components/Menu/Menu";
-
-export interface SplitButtonProps extends ButtonVariantProps, Omit<AriaButtonProps, "children"> {
-  label: string;
-  labelRight: string;
-  link?: AriaLinkProps;
-  items: MenuItem[];
-}
-
-export const SplitButton = ({
-  variant,
-  color,
-  width,
-  size,
-  label,
-  labelRight,
-  link,
-  items,
-  className,
-  ...props
-}: SplitButtonProps) => {
-  return (
-    <div
-      className="group/split flex items-center"
-      data-split=""
-    >
-      <Button
-        {...props}
-        width={width}
-        size={size}
-        variant={variant}
-        color={color}
-        link={link}
-        className={clsx("!rounded-r-none border-r border-solid", className)}
-        data-separator=""
-      >
-        {label}
-      </Button>
-      <Menu
-        trigger={
-          <IconButton
-            size={size}
-            variant={variant}
-            color={color}
-            label={labelRight}
-            icon={ChevronDownIcon}
-            className="!rounded-l-none !border-l-0"
-          />
-        }
-        items={items}
-      />
-    </div>
-  );
-};

package/src/components/buttons/TextButton/TextButton.tsx

@@ -1,29 +0,0 @@
-import type { ButtonProps as AriaButtonProps, LinkProps as AriaLinkProps } from "react-aria-components";
-
-import { Button, type ButtonIconProps } from "#ui/components/buttons/Button/Button";
-import type { ButtonVariantProps } from "#ui/components/buttons/Button/button.cva";
-import type { ButtonContentVariantProps } from "#ui/components/buttons/shared/buttonContent.cva";
-
-export type TextButtonProps = Omit<ButtonVariantProps, "variant"> &
-  ButtonContentVariantProps &
-  AriaButtonProps &
-  ButtonIconProps<true | false> & {
-    children: string;
-    isLoading?: boolean;
-    link?: AriaLinkProps;
-    disableTooltip?: boolean;
-  };
-
-export const TextButton = ({ children, ...props }: TextButtonProps) => {
-  return (
-    <Button
-      {...props}
-      variant="text"
-      size="xxs"
-      width={props.width ?? "hug"}
-      disableTooltip={props.disableTooltip}
-    >
-      {children}
-    </Button>
-  );
-};

package/src/components/buttons/ToggleButton/ToggleButton.tsx

@@ -1,28 +0,0 @@
-import type { ToggleButtonProps as AriaToggleButtonProps } from "react-aria-components";
-
-import { Button, type ButtonIconProps } from "#ui/components/buttons/Button/Button";
-import type { ButtonVariantProps } from "#ui/components/buttons/Button/button.cva";
-import type { ButtonContentVariantProps } from "#ui/components/buttons/shared/buttonContent.cva";
-
-export type ToggleButtonProps = ButtonVariantProps &
-  ButtonContentVariantProps &
-  AriaToggleButtonProps &
-  ButtonIconProps<true | false> & {
-    children: string;
-    disableTooltip?: boolean;
-  };
-
-export const ToggleButton = ({ children, ...props }: ToggleButtonProps) => {
-  return (
-    // @ts-expect-error Types not matching, but this is only for backwards compatibility
-    <Button
-      {...props}
-      toggle
-      variant="outlined"
-      color="primary"
-      disableTooltip={props.disableTooltip}
-    >
-      {children}
-    </Button>
-  );
-};

package/src/components/buttons/shared/ButtonContent.tsx

@@ -1,61 +0,0 @@
-import { clsx } from "clsx";
-import { type FC, type ReactElement, type Ref, type SVGProps, isValidElement } from "react";
-
-import type { ButtonVariantProps } from "#ui/components/buttons/Button/button.cva";
-import { type ButtonContentVariantProps, buttonContent } from "#ui/components/buttons/shared/buttonContent.cva";
-import { Loader } from "#ui/components/status/Loader/Loader";
-import { Typography } from "#ui/components/text/Typography/Typography";
-import type { TypographyVariantProps } from "#ui/components/text/Typography/typography.cva";
-
-interface ButtonContentProps extends ButtonContentVariantProps, Pick<ButtonVariantProps, "size"> {
-  ref?: Ref<HTMLHeadingElement>;
-  text: string;
-  isLoading?: boolean;
-  className?: string;
-  icon?: FC<SVGProps<SVGSVGElement>> | ReactElement;
-  iconClassName?: string;
-  hideText?: boolean;
-  typography?: TypographyVariantProps;
-}
-
-export const ButtonContent = ({
-  ref,
-  text,
-  isLoading,
-  className,
-  icon: Icon,
-  iconClassName,
-  hideText,
-  iconPosition,
-  typography,
-}: ButtonContentProps) => {
-  let iconOrLoader = null;
-  if (isLoading) {
-    iconOrLoader = <Loader className="shrink-0" />;
-  } else if (Icon) {
-    if (isValidElement(Icon)) {
-      iconOrLoader = Icon;
-    } else {
-      iconOrLoader = <Icon className={clsx("shrink-0", iconClassName)} />;
-    }
-  }
-
-  return (
-    <span
-      className={buttonContent({
-        iconPosition: iconOrLoader ? iconPosition : null,
-        className,
-      })}
-    >
-      {iconOrLoader}
-      <Typography
-        as="span"
-        {...{ size: "label-2", variant: "prominent-1", ...typography }}
-        className={clsx("hyphens-auto md:truncate", hideText && "sr-only")}
-        ref={ref}
-      >
-        {text}
-      </Typography>
-    </span>
-  );
-};

package/src/components/buttons/shared/buttonContent.cva.ts

@@ -1,18 +0,0 @@
-import { type VariantProps, cva } from "class-variance-authority";
-
-export const buttonContent = cva("flex w-full items-center justify-center", {
-  variants: {
-    iconPosition: {
-      left: "flex-row",
-      right: "flex-row-reverse",
-      none: "flex-row",
-    },
-  },
-  defaultVariants: {
-    iconPosition: "left",
-  },
-});
-
-// 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 ButtonContentVariantProps extends VariantProps<typeof buttonContent> {}

package/src/components/inputs/Checkbox/Checkbox.tsx

@@ -1,101 +0,0 @@
-import { mergeRefs } from "@react-aria/utils";
-import { clsx } from "clsx";
-import type { ComponentType, ReactElement, Ref, SVGProps } from "react";
-import { Checkbox as AriaCheckbox, type CheckboxProps as AriaCheckboxProps } from "react-aria-components";
-import { Controller, type FieldValues } from "react-hook-form";
-
-import {
-  type CheckboxVariantProps,
-  checkboxIndicatorClass,
-  checkboxTypography,
-} from "#ui/components/inputs/Checkbox/checkbox.cva";
-import { FormFieldError, type FormFieldErrorProps } from "#ui/components/inputs/FormField/FormFieldError";
-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";
-
-import { CheckboxCheckmark } from "./CheckboxCheckmark";
-
-interface CheckboxBaseProps extends FormFieldErrorProps, CheckboxVariantProps, Omit<AriaCheckboxProps, "className"> {
-  ref?: Ref<HTMLLabelElement>;
-  children: string | ReactElement;
-  hideLabel?: boolean;
-  selectedIcon?: ComponentType<SVGProps<SVGSVGElement>>;
-  indeterminateIcon?: ComponentType<SVGProps<SVGSVGElement>>;
-}
-
-const CheckboxBase = (props: CheckboxBaseProps) => {
-  const ui = UIConfig.useConfig();
-  const uiStyle = UIStyle.useConfig();
-  const checkboxTypographyMap = uiStyle?.checkbox?.typography ?? checkboxTypography;
-
-  const {
-    className,
-    children,
-    isDisabled,
-    error,
-    variant = ui.checkbox.variant,
-    hideLabel = ui.input.hideLabel,
-    ...rest
-  } = props;
-
-  const formFieldErrorProps: FormFieldErrorProps = {
-    error,
-    isDisabled,
-  };
-
-  return (
-    <>
-      <AriaCheckbox
-        {...rest}
-        isDisabled={isDisabled}
-        isInvalid={!!error}
-        aria-errormessage={error || undefined}
-        className={clsx(checkboxIndicatorClass, className)}
-      >
-        <CheckboxCheckmark
-          variant={variant}
-          {...rest}
-        />
-        {!hideLabel && <CheckContent typography={checkboxTypographyMap({ variant, ...rest })}>{children}</CheckContent>}
-      </AriaCheckbox>
-      <FormFieldError {...formFieldErrorProps} />
-    </>
-  );
-};
-
-export type CheckboxProps = CheckboxBaseProps;
-
-export type ControlledCheckboxProps<TFieldValues extends FieldValues> = ControlProps<
-  CheckboxProps,
-  TFieldValues,
-  "isSelected"
->;
-
-export const Checkbox = <TFieldValues extends FieldValues>(props: ControlledCheckboxProps<TFieldValues>) => {
-  if ("formControl" in props && props.formControl) {
-    const { formControl, ref, ...innerProps } = props;
-
-    return (
-      <Controller
-        control={formControl.control}
-        name={formControl.name}
-        render={({ field, fieldState: { error } }) => (
-          <CheckboxBase
-            {...innerProps}
-            ref={mergeRefs(ref, field.ref)}
-            isSelected={field.value}
-            onChange={field.onChange}
-            onBlur={field.onBlur}
-            name={field.name}
-            isDisabled={field.disabled || props.isDisabled}
-            error={props.error ?? error?.message}
-          />
-        )}
-      />
-    );
-  }
-
-  return <CheckboxBase {...props} />;
-};

package/src/components/inputs/Checkbox/CheckboxCheckmark.tsx

@@ -1,47 +0,0 @@
-import { clsx } from "clsx";
-import type { ComponentType, SVGProps } from "react";
-
-import { CheckboxCheckmarkIcon } from "#ui/assets/icons/CheckboxCheckmark";
-import { CheckboxIndeterminateIcon } from "#ui/assets/icons/CheckboxIndeterminate";
-import { type CheckboxVariantProps, checkbox } from "#ui/components/inputs/Checkbox/checkbox.cva";
-import { UIStyle } from "#ui/config/uiStyle.context";
-
-interface CheckboxCheckmarkProps extends CheckboxVariantProps {
-  className?: string;
-  selectedIcon?: ComponentType<SVGProps<SVGSVGElement>>;
-  indeterminateIcon?: ComponentType<SVGProps<SVGSVGElement>>;
-}
-
-export const CheckboxCheckmark = ({
-  variant,
-  className,
-  selectedIcon: SelectedIcon = CheckboxCheckmarkIcon,
-  indeterminateIcon: IndeterminateIcon = CheckboxIndeterminateIcon,
-  ...props
-}: CheckboxCheckmarkProps) => {
-  const uiStyle = UIStyle.useConfig();
-  const checkboxCva = (uiStyle?.checkbox?.cva ?? checkbox) as unknown as UIStyle.Cva<CheckboxVariantProps>;
-
-  return (
-    <div
-      className={checkboxCva({
-        variant,
-        ...props,
-        className,
-      })}
-    >
-      <SelectedIcon
-        className={clsx(
-          "absolute hidden size-3 group-selected:block",
-          "text-interactive-contained-primary-on-idle group-hover:text-interactive-contained-primary-on-hover",
-        )}
-      />
-      <IndeterminateIcon
-        className={clsx(
-          "absolute hidden size-3 group-indeterminate:block",
-          "text-interactive-contained-primary-on-idle group-hover:text-interactive-contained-primary-on-hover",
-        )}
-      />
-    </div>
-  );
-};

package/src/components/inputs/DateTime/DatePicker/DatePicker.tsx

@@ -1,269 +0,0 @@
-import {
-  CalendarDate,
-  type DateValue,
-  createCalendar,
-  getLocalTimeZone,
-  toCalendarDate,
-  today,
-} from "@internationalized/date";
-import { mergeRefs } from "@react-aria/utils";
-import { clsx } from "clsx";
-import { DateTime } from "luxon";
-import { type Ref, useRef } from "react";
-import { useDatePicker, useLocale } from "react-aria";
-import { Controller, type FieldValues } from "react-hook-form";
-import { type DatePickerStateOptions, useCalendarState, useDatePickerState } from "react-stately";
-
-import { Calendar } from "#ui/components/inputs/DateTime/shared/Calendar";
-import { DatePickerInput } from "#ui/components/inputs/DateTime/shared/DatePickerInput";
-import { DateTimeDialog } from "#ui/components/inputs/DateTime/shared/DateTimeDialog";
-import { DateTimeDialogFooter } from "#ui/components/inputs/DateTime/shared/DateTimeDialogFooter";
-import { FormField, type FormFieldProps } from "#ui/components/inputs/FormField/FormField";
-import type { FormFieldHeaderProps } from "#ui/components/inputs/FormField/FormFieldHeader";
-import type { ControlProps } from "#ui/components/inputs/shared/form.types";
-import type { InputVariantProps } from "#ui/components/inputs/shared/input.cva";
-import { UIConfig } from "#ui/config/uiConfig.context";
-import { DateTimeUtils } from "#ui/utils/date-time.utils";
-
-// Workaround for bug in React Aria (https://github.com/adobe/react-spectrum/issues/3256#issuecomment-1825942096)
-const PLACEHOLDER_VALUE = new CalendarDate(2024, 1, 1);
-
-interface DatePickerBaseProps
-  extends FormFieldProps,
-    InputVariantProps,
-    Omit<DatePickerStateOptions<CalendarDate>, "granularity" | "shouldCloseOnSelect" | "label"> {
-  ref?: Ref<HTMLDivElement>;
-  disableDropdown?: boolean;
-  isClearable?: boolean;
-  className?: string;
-  todayIcon?: boolean;
-}
-
-const DatePickerBase = (props: DatePickerBaseProps) => {
-  const ui = UIConfig.useConfig();
-
-  const {
-    ref,
-    label,
-    tooltipText,
-    helperText,
-    isRequired,
-    rightContent,
-    isDisabled,
-    headerClassName,
-    errorClassName,
-    isHeaderHidden,
-    error,
-    onChange,
-    value,
-    disableDropdown,
-    className,
-    todayIcon,
-    as = ui.input.as,
-    hideLabel = ui.input.hideLabel,
-    variant = ui.input.variant,
-    size = ui.input.size,
-    isClearable = ui.input.isClearable,
-    ...rest
-  } = props;
-
-  const formFieldProps: FormFieldProps = {
-    error,
-    label,
-    tooltipText,
-    helperText,
-    isRequired,
-    rightContent,
-    isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
-    hideLabel,
-    isDisabled,
-    headerClassName,
-    errorClassName,
-  };
-
-  const dialogState = useDatePickerState({
-    ...rest,
-    defaultValue: value || rest.defaultValue,
-    shouldCloseOnSelect: false,
-  });
-  const state = useDatePickerState({
-    ...rest,
-    value,
-    onChange: (val) => {
-      if (val && ((rest.minValue && val < rest?.minValue) || (rest?.maxValue && val > rest?.maxValue))) {
-        state.setValue(state.value);
-        return;
-      }
-      onChange?.(val);
-      dialogState.setValue(val);
-      calendarState.setFocusedDate(val || today(getLocalTimeZone()));
-    },
-    shouldCloseOnSelect: false,
-  });
-
-  const datePickerRef = useRef<HTMLDivElement>(null);
-
-  const { groupProps, labelProps, fieldProps, buttonProps, dialogProps } = useDatePicker(
-    { ...rest, label },
-    state,
-    datePickerRef,
-  );
-  const { calendarProps } = useDatePicker({ ...rest, label }, dialogState, datePickerRef);
-
-  const { locale } = useLocale();
-  const calendarState = useCalendarState({
-    ...calendarProps,
-    locale,
-    createCalendar,
-  });
-  const headerProps: FormFieldHeaderProps = {
-    label,
-    tooltipText,
-    helperText,
-    isRequired,
-    rightContent,
-    isHeaderHidden: hideLabel || isHeaderHidden,
-    isDisabled,
-    className: headerClassName,
-    labelProps,
-  };
-
-  const onApply = () => {
-    state.setValue(dialogState.value);
-    state.toggle();
-  };
-
-  const onTodayPress = () => {
-    dialogState.setValue(today(getLocalTimeZone()));
-    calendarState.setFocusedDate(today(getLocalTimeZone()));
-  };
-
-  const onOpenChange = (isOpen: boolean) => {
-    state.toggle();
-    calendarState.setFocusedDate((state.value as CalendarDate) || today(getLocalTimeZone()));
-    if (!isOpen) {
-      dialogState.setValue(state.value);
-    }
-  };
-
-  return (
-    <FormField
-      {...formFieldProps}
-      as={as}
-      labelProps={labelProps}
-      className={clsx("relative inline-flex w-full flex-col text-left", className)}
-    >
-      <DatePickerInput
-        ref={mergeRefs(ref, datePickerRef)}
-        as={as}
-        groupProps={groupProps}
-        fieldProps={{ ...fieldProps, placeholderValue: PLACEHOLDER_VALUE }}
-        buttonProps={buttonProps}
-        isDisabled={isDisabled}
-        isInvalid={!!error}
-        disableDropdown={disableDropdown}
-        variant={variant}
-        size={size}
-        isClearable={isClearable}
-        headerProps={headerProps}
-        todayIcon={todayIcon}
-      />
-      {!disableDropdown && (
-        <DateTimeDialog
-          footer={
-            <DateTimeDialogFooter
-              isValid={!dialogState.isInvalid && !!dialogState.value}
-              onTodayPress={onTodayPress}
-              onApply={onApply}
-            />
-          }
-          label={label}
-          triggerRef={datePickerRef}
-          dialogProps={dialogProps}
-          isOpen={state.isOpen}
-          onOpenChange={onOpenChange}
-        >
-          <Calendar
-            state={calendarState}
-            calendarProps={calendarProps}
-            onApply={onApply}
-          />
-        </DateTimeDialog>
-      )}
-    </FormField>
-  );
-};
-
-export interface DatePickerProps extends Omit<DatePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
-  value?: string | null;
-  onChange?: (value: string | null) => void;
-  fullIso?: boolean;
-  minValue?: DateValue | string;
-  maxValue?: DateValue | string;
-}
-
-export type ControlledDatePickerProps<TFieldValues extends FieldValues> = ControlProps<DatePickerProps, TFieldValues>;
-
-export const DatePicker = <TFieldValues extends FieldValues>({
-  fullIso = true,
-  minValue,
-  maxValue,
-  ...props
-}: ControlledDatePickerProps<TFieldValues>) => {
-  const formatCalendarDate = (calendarDate: CalendarDate | null): string | null => {
-    if (calendarDate === null) {
-      return null;
-    }
-    if (fullIso) {
-      return DateTimeUtils.fromCalendarDateToUTCISO(calendarDate);
-    }
-    const date = DateTimeUtils.fromDateValueToLocal(calendarDate);
-    return DateTime.fromJSDate(date).toISODate();
-  };
-
-  const parseCalendarDate = (formattedDate?: string | null): CalendarDate | null | undefined => {
-    if (formattedDate == null) {
-      return formattedDate;
-    }
-    const date = DateTime.fromISO(formattedDate).toJSDate();
-    const zonedDateTime = DateTimeUtils.fromLocalToZonedDateTime(date);
-    return toCalendarDate(zonedDateTime);
-  };
-
-  const dateLimits = {
-    minValue: typeof minValue === "string" ? parseCalendarDate(minValue) : minValue,
-    maxValue: typeof maxValue === "string" ? parseCalendarDate(maxValue) : maxValue,
-  };
-
-  if ("formControl" in props && props.formControl) {
-    const { formControl, ref, ...innerProps } = props;
-
-    return (
-      <Controller
-        control={formControl.control}
-        name={formControl.name}
-        render={({ field, fieldState: { error } }) => (
-          <DatePickerBase
-            {...innerProps}
-            {...dateLimits}
-            ref={mergeRefs(ref, field.ref)}
-            value={parseCalendarDate(field.value)}
-            onChange={(value) => field.onChange(formatCalendarDate(value))}
-            onBlur={field.onBlur}
-            isDisabled={field.disabled || props.isDisabled}
-            error={props.error ?? error?.message}
-          />
-        )}
-      />
-    );
-  }
-
-  return (
-    <DatePickerBase
-      {...props}
-      {...dateLimits}
-      value={parseCalendarDate(props.value)}
-      onChange={(value) => props.onChange?.(formatCalendarDate(value))}
-    />
-  );
-};