@povio/ui 0.0.4 → 0.0.6

package/src/components/segment/Segment.tsx

@@ -1,121 +0,0 @@
-/* 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/segment.types.ts

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

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

@@ -1,174 +0,0 @@
-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/status/Alert/Alert.tsx

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

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

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

@@ -1,29 +0,0 @@
-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> {}

package/src/components/status/Toast/Toast.tsx

@@ -1,86 +0,0 @@
-import type { FC, ReactNode, SVGProps } from "react";
-import { ToastContainer as ToastifyToastContainer } from "react-toastify";
-
-import { Button } from "#ui/components/buttons/Button/Button";
-import { Loader } from "#ui/components/status/Loader/Loader";
-import { statusIcon, statusSeparator } from "#ui/components/status/shared/status.cva";
-import {
-  type ToastVariantProps,
-  buttonColorVariant,
-  toast,
-  toastContainer,
-  toastWrapper,
-} from "#ui/components/status/Toast/toast.cva";
-import { Typography } from "#ui/components/text/Typography/Typography";
-import { UIStyle } from "#ui/config/uiStyle.context";
-
-export interface ToastAction {
-  text: string;
-  onPress: () => void;
-}
-
-export interface ToastProps extends ToastVariantProps {
-  text: ReactNode;
-  isLoading?: boolean;
-  icon?: FC<SVGProps<SVGSVGElement>>;
-  actions?: ToastAction[];
-}
-
-export const Toast = ({ text, isLoading = false, actions = [], icon: Icon, ...props }: ToastProps) => {
-  const uiStyle = UIStyle.useConfig();
-  const toastCva = (uiStyle?.toast?.cva ?? toast) as unknown as UIStyle.Cva<ToastVariantProps>;
-  const buttonColor = uiStyle?.toast?.buttonColor ?? buttonColorVariant;
-  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={toastCva({ ...props })}>
-      <div className="flex items-start gap-toast-gap-icon-to-text px-toast-side-default py-toast-height-content">
-        {isLoading && (
-          <Loader
-            size="default"
-            className="shrink-0"
-          />
-        )}
-        {!isLoading && Icon && <Icon className={iconCva({ ...props })} />}
-        <Typography size="label-2">{text}</Typography>
-      </div>
-      {actions.length > 0 && (
-        <>
-          <div className={separatorCva({ ...props })} />
-          <div className="flex w-full shrink-0 flex-wrap items-center justify-end gap-toast-gap-action px-toast-side-default py-toast-height-actions-mobile md:w-auto md:justify-center md:py-toast-height-actions-desktop">
-            {actions.map(({ text: buttonText, onPress }) => (
-              <Button
-                key={buttonText}
-                onPress={onPress}
-                {...buttonColor({ ...props })}
-                variant="text"
-                size="xs"
-              >
-                {buttonText}
-              </Button>
-            ))}
-          </div>
-        </>
-      )}
-    </div>
-  );
-};
-
-export const ToastContainer = () => {
-  return (
-    <ToastifyToastContainer
-      className={(params) => {
-        return toastContainer({
-          position: params?.position,
-          className: params?.defaultClassName,
-        });
-      }}
-      toastClassName={toastWrapper}
-      autoClose={2500}
-      icon={false}
-      closeButton={false}
-      hideProgressBar
-    />
-  );
-};