@povio/ui 0.0.2 → 0.0.4

package/src/components/segment/Segment.tsx

@@ -0,0 +1,121 @@
+/* oxlint-disable no-nested-ternary */
+
+import { mergeRefs } from "@react-aria/utils";
+import { clsx } from "clsx";
+import { Fragment, useRef } from "react";
+import { useToggleButtonGroup } from "react-aria";
+import { type Key, ToggleButtonGroup } from "react-aria-components";
+import { Controller, type FieldValues } from "react-hook-form";
+import { useToggleGroupState } from "react-stately";
+
+import { FormField, type FormFieldProps } from "#ui/components/inputs/FormField/FormField";
+
+import { SegmentItem } from "./SegmentItem";
+import type { ControlledSegmentProps, SegmentProps } from "./segment.types";
+
+const SegmentBase = <TKey extends Key = Key>({
+  className,
+  items,
+  error,
+  onChange,
+  value,
+  defaultValue,
+  ...rest
+}: SegmentProps<TKey>) => {
+  const props = {
+    ...rest,
+    defaultSelectedKeys: defaultValue ? (Array.isArray(defaultValue) ? defaultValue : [defaultValue]) : undefined,
+    selectedKeys: value ? (Array.isArray(value) ? value : [value]) : undefined,
+  };
+  const buttonGroupRef = useRef<HTMLDivElement>(null);
+
+  const state = useToggleGroupState(props);
+  const { groupProps } = useToggleButtonGroup(props, state, buttonGroupRef);
+
+  const formFieldProps: FormFieldProps = {
+    error,
+    label: "",
+    hideLabel: true,
+    isDisabled: props.isDisabled,
+  };
+
+  const onSelectionChange = (keys: Set<Key>) => {
+    if (props.selectionMode === "multiple") {
+      (onChange as ((value: TKey[]) => void) | undefined)?.(Array.from(keys.values()) as TKey[]);
+    } else {
+      (onChange as ((value: TKey | null) => void) | undefined)?.(Array.from(keys.values())[0] as TKey | null);
+    }
+  };
+
+  return (
+    <FormField
+      {...formFieldProps}
+      className={clsx("relative w-full", className)}
+    >
+      <ToggleButtonGroup
+        {...props}
+        {...groupProps}
+        ref={buttonGroupRef}
+        onSelectionChange={onSelectionChange}
+        className={clsx(
+          "group/segment flex w-fit items-center gap-segmented-control-side-segmented-control p-segmented-control-side-segmented-control",
+          "bg-elevation-fill-default-3",
+          "rounded-segmented-control-rounding-segmented-control",
+          className,
+        )}
+      >
+        {items.map((item, index) => (
+          <Fragment key={item.id}>
+            <SegmentItem
+              {...item}
+              isDisabled={item.isDisabled || props.isDisabled}
+              isSelected={state.selectedKeys.has(item.id)}
+              onPress={() => {
+                state.toggleKey(item.id);
+              }}
+            />
+            {index !== items.length - 1 && items.length > 2 && (
+              <div
+                className={clsx(
+                  "h-5 w-px rounded-2xl",
+                  !state.selectedKeys.has(item.id) &&
+                    !state.selectedKeys.has(items[index + 1].id) &&
+                    "bg-elevation-outline-default-1",
+                )}
+              >
+                <span className="flex h-full w-px" />
+              </div>
+            )}
+          </Fragment>
+        ))}
+      </ToggleButtonGroup>
+    </FormField>
+  );
+};
+
+export const Segment = <TFieldValues extends FieldValues, TKey extends Key = Key>(
+  props: ControlledSegmentProps<TFieldValues, TKey>,
+) => {
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+
+    return (
+      <Controller
+        control={formControl.control}
+        name={formControl.name}
+        render={({ field, fieldState: { error } }) => (
+          <SegmentBase
+            {...innerProps}
+            ref={mergeRefs(ref, field.ref)}
+            value={field.value}
+            onChange={field.onChange}
+            isDisabled={field.disabled || props.isDisabled}
+            error={props.error ?? error?.message}
+          />
+        )}
+      />
+    );
+  }
+
+  return <SegmentBase {...props} />;
+};

package/src/components/segment/SegmentItem.tsx

@@ -0,0 +1,41 @@
+import { clsx } from "clsx";
+import type { FC, SVGProps } from "react";
+import { ToggleButton } from "react-aria-components";
+
+import { Typography } from "#ui/components/text/Typography/Typography";
+
+import type { SegmentItem as SegmentItemProps } from "./segment.types";
+
+export const SegmentItem = ({ label, icon, id, isDisabled, ...props }: SegmentItemProps) => {
+  const IconComponent = icon as FC<SVGProps<SVGSVGElement>>;
+
+  return (
+    <ToggleButton
+      {...props}
+      id={id}
+      className={clsx(
+        "flex items-center justify-center gap-1 transition-all duration-200",
+        "px-segmented-control-side-segment py-segmented-control-height-segment",
+        "rounded-segmented-control-rounding-segment",
+        "hover:bg-interactive-subtle-secondary-hover",
+        "pressed:bg-interactive-subtle-secondary-pressed",
+        "selected:text-interactive-subtle-secondary-on-toggled-idle text-interactive-subtle-secondary-on-idle hover:text-interactive-subtle-secondary-on-hover",
+        "disabled:selected:text-interactive-subtle-secondary-on-toggled-disabled disabled:text-interactive-subtle-secondary-on-disabled",
+        "selected:bg-interactive-subtle-secondary-toggled-idle disabled:selected:bg-interactive-subtle-secondary-toggled-disabled",
+      )}
+      isDisabled={isDisabled}
+    >
+      {icon && <IconComponent className="size-6" />}
+      {label && (
+        <Typography
+          variant={props.isSelected ? "prominent-1" : "default"}
+          size="label-2"
+          as="span"
+          className="overflow-hidden text-ellipsis text-center"
+        >
+          {label}
+        </Typography>
+      )}
+    </ToggleButton>
+  );
+};

package/src/components/segment/segment.types.ts

@@ -0,0 +1,44 @@
+import type { FC, ReactElement, Ref, SVGProps } from "react";
+import type { Key, ToggleButtonGroupProps, ToggleButtonProps } from "react-aria-components";
+import type { FieldValues } from "react-hook-form";
+
+import type { ControlProps } from "#ui/components/inputs/shared/form.types";
+
+export interface SegmentItem<TKey extends Key = Key> extends ToggleButtonProps {
+  id: TKey;
+  label?: string;
+  icon?: FC<SVGProps<SVGSVGElement>> | ReactElement;
+}
+
+export interface SingleSegmentProps<TKey extends Key = Key> {
+  selectionMode?: "single";
+  value?: TKey | undefined | null;
+  onChange?: (value: TKey | null) => void;
+  defaultValue?: TKey | null;
+}
+
+export interface MultiSegmentProps<TKey extends Key = Key> {
+  selectionMode: "multiple";
+  value?: TKey[];
+  onChange?: (value: TKey[]) => void;
+  defaultValue?: TKey[] | null;
+}
+
+export type GroupedSegmentProps<TKey extends Key = Key> = MultiSegmentProps<TKey> | SingleSegmentProps<TKey>;
+
+export type GroupedSegmentControlProps<TFieldValues extends FieldValues, TKey extends Key = Key> =
+  | ({ selectionMode: MultiSegmentProps["selectionMode"] } & ControlProps<MultiSegmentProps<TKey>, TFieldValues>)
+  | ({ selectionMode?: SingleSegmentProps["selectionMode"] } & ControlProps<SingleSegmentProps<TKey>, TFieldValues>);
+
+export type SegmentProps<TKey extends Key = Key> = Omit<
+  ToggleButtonGroupProps,
+  "children" | "onSelectionChange" | "selectedKeys" | "defaultSelectedKeys"
+> & {
+  ref?: Ref<HTMLElement>;
+  items: SegmentItem<TKey>[];
+  className?: string;
+  error?: string;
+} & GroupedSegmentProps<TKey>;
+
+export type ControlledSegmentProps<TFieldValues extends FieldValues, TKey extends Key = Key> = SegmentProps<TKey> &
+  GroupedSegmentControlProps<TFieldValues, TKey>;

package/src/components/shared/pagination/Pagination.tsx

@@ -0,0 +1,75 @@
+import { clsx } from "clsx";
+import { useTranslation } from "react-i18next";
+
+import { NumberInput } from "#ui/components/inputs/Input/NumberInput/NumberInput";
+import { Typography } from "#ui/components/text/Typography/Typography";
+import { ns } from "#ui/config/i18n";
+
+import { PaginationList, type PaginationListProps } from "./PaginationList";
+
+export interface PaginationProps extends Omit<PaginationListProps, "totalPages"> {
+  totalItems: number;
+  pageSize: number;
+  totalPages?: number;
+  className?: string;
+  onPageSizeChange?: (pageSize: number) => void;
+}
+
+export const Pagination = ({
+  size = "s",
+  variant = "subtle",
+  color = "secondary",
+  page,
+  totalItems,
+  totalPages,
+  pageSize,
+  hideText = true,
+  hideFirstLast = true,
+  hidePrevNext = false,
+  hideNumbers = false,
+  className,
+  onPageChange,
+  onPageSizeChange,
+}: PaginationProps) => {
+  const { t } = useTranslation(ns);
+
+  return (
+    <nav
+      id="pagination"
+      className={clsx("flex items-center gap-2", className)}
+    >
+      {totalItems > pageSize && (
+        <PaginationList
+          page={page}
+          size={size}
+          color={color}
+          variant={variant}
+          hideText={hideText}
+          hideFirstLast={hideFirstLast}
+          hidePrevNext={hidePrevNext}
+          hideNumbers={hideNumbers}
+          totalPages={totalPages ?? Math.ceil(totalItems / pageSize)}
+          onPageChange={onPageChange}
+        />
+      )}
+      <div className="flex items-center gap-2">
+        <Typography
+          variant="default"
+          size="label-2"
+          as="span"
+          className="whitespace-nowrap text-text-default-1"
+        >
+          {t(($) => $.ui.pagination.resultsPerPage)}
+        </Typography>
+        <NumberInput
+          value={pageSize}
+          onChange={(value) => onPageSizeChange?.(Number(value))}
+          label={t(($) => $.ui.pagination.resultsPerPage)}
+          hideLabel
+          className="w-min"
+          inputClassName="min-w-12 !px-3 !py-0-5"
+        />
+      </div>
+    </nav>
+  );
+};

package/src/components/shared/pagination/PaginationList.tsx

@@ -0,0 +1,174 @@
+import { clsx } from "clsx";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+
+import { ChevronLeftIcon } from "#ui/assets/icons/ChevronLeft";
+import { ChevronRightIcon } from "#ui/assets/icons/ChevronRight";
+import { ChevronsLeftIcon } from "#ui/assets/icons/ChevronsLeft";
+import { ChevronsRightIcon } from "#ui/assets/icons/ChevronsRight";
+import { Button, type ButtonProps } from "#ui/components/buttons/Button/Button";
+import { ns } from "#ui/config/i18n";
+
+import { minWidth } from "./minWidth.cva";
+
+export interface PaginationListProps {
+  page: number;
+  totalPages: number;
+  hideText?: boolean;
+  hideFirstLast?: boolean;
+  hidePrevNext?: boolean;
+  hideNumbers?: boolean;
+  size?: ButtonProps["size"];
+  color?: ButtonProps["color"];
+  variant?: ButtonProps["variant"];
+  className?: string;
+  onPageChange?: (page: number) => void;
+}
+
+export const PaginationList = ({
+  page,
+  totalPages,
+  size,
+  color,
+  variant,
+  hideText,
+  hideFirstLast,
+  hidePrevNext,
+  hideNumbers,
+  className,
+  onPageChange,
+}: PaginationListProps) => {
+  const { t } = useTranslation(ns);
+
+  const isPrevDisabled = page <= 1;
+  const isNextDisabled = page >= totalPages;
+
+  const renderPageNumbers = useMemo(() => {
+    const pagesToShow: (number | "ellipsis")[] = [];
+
+    pagesToShow.push(1);
+
+    if (page > 3) {
+      pagesToShow.push("ellipsis");
+    }
+
+    for (let i = Math.max(2, page - 1); i <= Math.min(totalPages - 1, page + 1); i++) {
+      pagesToShow.push(i);
+    }
+
+    if (page < totalPages - 2) {
+      pagesToShow.push("ellipsis");
+    }
+
+    if (totalPages > 1 && !pagesToShow.includes(totalPages)) {
+      pagesToShow.push(totalPages);
+    }
+
+    return pagesToShow.map((p, index) => {
+      if (p === "ellipsis") {
+        return (
+          <Button
+            // oxlint-disable-next-line react/no-array-index-key
+            key={`ellipsis-${index}`}
+            variant={variant}
+            color={color}
+            size={size}
+            width="fill"
+            className={clsx(minWidth({ size }))}
+          >
+            ...
+          </Button>
+        );
+      }
+
+      return (
+        <Button
+          key={`page-${p}`}
+          width="hug"
+          size={size}
+          variant={variant}
+          color={color}
+          data-selected={p === page ? true : undefined}
+          className={clsx(p.toString().length <= 2 && minWidth({ size }))}
+          onPress={() => onPageChange?.(p)}
+        >
+          {p.toString()}
+        </Button>
+      );
+    });
+  }, [page, color, size, variant, totalPages, onPageChange]);
+
+  if (totalPages <= 1) {
+    return null;
+  }
+
+  const onNext = () => {
+    if (!isNextDisabled) {
+      onPageChange?.(page + 1);
+    }
+  };
+
+  const onPrevious = () => {
+    if (!isPrevDisabled) {
+      onPageChange?.(page - 1);
+    }
+  };
+
+  return (
+    <nav className={clsx("flex items-center gap-pagination-button-to-button", className)}>
+      {!hideFirstLast && (
+        <Button
+          onClick={() => onPageChange?.(1)}
+          isDisabled={isPrevDisabled}
+          size={size}
+          color={color}
+          variant={variant}
+          iconOnly={hideText}
+          icon={ChevronsLeftIcon}
+        >
+          {t(($) => $.ui.pagination.firstBtn)}
+        </Button>
+      )}
+      {!hidePrevNext && (
+        <Button
+          onClick={onPrevious}
+          isDisabled={isPrevDisabled}
+          size={size}
+          color={color}
+          variant={variant}
+          iconOnly={hideText}
+          icon={ChevronLeftIcon}
+        >
+          {t(($) => $.ui.pagination.backBtn)}
+        </Button>
+      )}
+      {!hideNumbers && renderPageNumbers}
+      {!hidePrevNext && (
+        <Button
+          onClick={onNext}
+          isDisabled={isNextDisabled}
+          size={size}
+          color={color}
+          variant={variant}
+          iconOnly={hideText}
+          icon={ChevronRightIcon}
+        >
+          {t(($) => $.ui.pagination.nextBtn)}
+        </Button>
+      )}
+      {!hideFirstLast && (
+        <Button
+          onClick={() => onPageChange?.(totalPages)}
+          isDisabled={isNextDisabled}
+          size={size}
+          color={color}
+          variant={variant}
+          iconOnly={hideText}
+          icon={ChevronsRightIcon}
+        >
+          {t(($) => $.ui.pagination.lastBtn)}
+        </Button>
+      )}
+    </nav>
+  );
+};

package/src/components/shared/pagination/minWidth.cva.ts

@@ -0,0 +1,13 @@
+import { cva } from "class-variance-authority";
+
+export const minWidth = cva("", {
+  variants: {
+    size: {
+      xxs: ["min-w-button-width-min-width-xxs"],
+      xs: ["min-w-button-width-min-width-xs"],
+      s: ["min-w-button-width-min-width-s"],
+      m: ["min-w-button-width-min-width-m"],
+      l: ["min-w-button-width-min-width-l"],
+    },
+  },
+});

package/src/components/status/Alert/Alert.tsx

@@ -0,0 +1,58 @@
+import type { FC, ReactNode, SVGProps } from "react";
+
+import { type AlertVariantProps, alert } from "#ui/components/status/Alert/alert.cva";
+import { Loader } from "#ui/components/status/Loader/Loader";
+import { statusIcon, statusSeparator } from "#ui/components/status/shared/status.cva";
+import type { ToastVariantProps } from "#ui/components/status/Toast/toast.cva";
+import { Typography } from "#ui/components/text/Typography/Typography";
+import { UIStyle } from "#ui/config/uiStyle.context";
+
+export interface AlertProps extends AlertVariantProps {
+  text: string;
+  isLoading?: boolean;
+  icon?: FC<SVGProps<SVGSVGElement>>;
+  rightContent?: ReactNode;
+  hasSeparator?: boolean;
+  className?: string;
+}
+
+export const Alert = ({
+  variant,
+  color,
+  text,
+  isLoading = false,
+  rightContent,
+  hasSeparator,
+  icon: Icon,
+  className,
+}: AlertProps) => {
+  const uiStyle = UIStyle.useConfig();
+  const alertCva = (uiStyle?.alert?.cva ?? alert) as unknown as UIStyle.Cva<AlertVariantProps>;
+  const iconCva = (uiStyle?.status?.iconCva ?? statusIcon) as unknown as UIStyle.Cva<ToastVariantProps>;
+  const separatorCva = (uiStyle?.status?.separatorCva ?? statusSeparator) as unknown as UIStyle.Cva<ToastVariantProps>;
+
+  return (
+    <div className={alertCva({ variant, color, className })}>
+      <div className="flex w-auto flex-col items-center md:flex-row">
+        <div className="flex w-full items-start gap-alert-gap-icon-to-text px-alert-side-default py-alert-height-content">
+          {isLoading && (
+            <Loader
+              size="default"
+              className="shrink-0"
+            />
+          )}
+          {!isLoading && Icon && <Icon className={iconCva({ variant, color })} />}
+          <Typography size="label-2">{text}</Typography>
+        </div>
+        {!!rightContent && (
+          <>
+            {hasSeparator && <div className={separatorCva({ variant, color })} />}
+            <div className="flex w-full shrink-0 flex-wrap items-center justify-end gap-alert-gap-action px-alert-side-default py-alert-height-actions-mobile md:w-auto md:justify-center md:py-alert-height-actions-desktop">
+              {rightContent}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/status/Alert/alert.cva.ts

@@ -0,0 +1,66 @@
+import { type VariantProps, cva } from "class-variance-authority";
+
+export const alert = cva("min-h-0 overflow-hidden rounded-alert-rounding-default p-0", {
+  variants: {
+    variant: {
+      outlined: "border bg-elevation-fill-default-1 text-text-default-1",
+      contained: "text-text-inverted-1",
+    },
+    color: {
+      neutral: "",
+      success: "",
+      warning: "",
+      error: "",
+    },
+  },
+  compoundVariants: [
+    {
+      variant: "outlined",
+      color: "neutral",
+      className: "border-elevation-outline-default-1",
+    },
+    {
+      variant: "outlined",
+      color: "success",
+      className: "border-elevation-outline-success-1",
+    },
+    {
+      variant: "outlined",
+      color: "warning",
+      className: "border-elevation-outline-warning-1",
+    },
+    {
+      variant: "outlined",
+      color: "error",
+      className: "border-elevation-outline-error-1",
+    },
+    {
+      variant: "contained",
+      color: "neutral",
+      className: "bg-elevation-fill-inverted-1",
+    },
+    {
+      variant: "contained",
+      color: "success",
+      className: "bg-elevation-fill-success-1",
+    },
+    {
+      variant: "contained",
+      color: "warning",
+      className: "bg-elevation-fill-warning-1",
+    },
+    {
+      variant: "contained",
+      color: "error",
+      className: "bg-elevation-fill-error-1",
+    },
+  ],
+  defaultVariants: {
+    variant: "outlined",
+    color: "neutral",
+  },
+});
+
+// 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 AlertVariantProps extends VariantProps<typeof alert> {}

package/src/components/status/Loader/Loader.tsx

@@ -0,0 +1,32 @@
+import type { SVGProps } from "react";
+
+import { type LoaderVariantProps, loader, loaderWrapper } from "#ui/components/status/Loader/loader.cva";
+
+export interface LoaderProps extends LoaderVariantProps, SVGProps<SVGSVGElement> {}
+
+export const Loader = ({ size, className, ...props }: Omit<LoaderProps, "color">) => {
+  return (
+    <div className={loaderWrapper({ size, className })}>
+      <svg
+        className={loader({ size, className })}
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        {...props}
+      >
+        <circle
+          className="opacity-20"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          strokeWidth="4"
+        />
+        <path
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        />
+      </svg>
+    </div>
+  );
+};

package/src/components/status/Loader/loader.cva.ts

@@ -0,0 +1,29 @@
+import { type VariantProps, cva } from "class-variance-authority";
+
+export const loaderWrapper = cva("flex items-center justify-center", {
+  variants: {
+    size: {
+      default: "size-6",
+      l: "size-16",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+});
+
+export const loader = cva("animate-loader-spin", {
+  variants: {
+    size: {
+      default: "size-3-5",
+      l: "size-8",
+    },
+  },
+  defaultVariants: {
+    size: "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 LoaderVariantProps extends VariantProps<typeof loader> {}