@povio/ui 0.0.2 → 0.0.4

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

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

package/src/components/status/Toast/toast.cva.ts

@@ -0,0 +1,154 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import { clsx } from "clsx";
+
+import type { ButtonVariantProps } from "#ui/components/buttons/Button/button.cva";
+import { compoundMapper } from "#ui/utils/compoundMapper";
+
+export const toastContainer = cva("m-toast-gap-margin-mobile w-auto p-0 md:m-toast-gap-margin-desktop", {
+  variants: {
+    position: {
+      "bottom-right": "right-0 bottom-0",
+      "bottom-left": "bottom-0 left-0",
+      "top-right": "top-0 right-0",
+      "top-left": "top-0 left-0",
+      "bottom-center": "bottom-0",
+      "top-center": "top-0",
+    },
+  },
+});
+
+export const toastWrapper = clsx("m-0! min-h-0 w-auto! max-w-toast bg-transparent! p-0! shadow-none!");
+
+export const toast = cva(
+  "inline-flex w-auto flex-col items-center overflow-hidden rounded-toast-rounding-default shadow-4 md:flex-row",
+  {
+    variants: {
+      variant: {
+        outlined: "border bg-elevation-fill-default-1 text-text-default-1",
+        contained: "text-text-inverted-1",
+      },
+      color: {
+        neutral: "",
+        success: "",
+        warning: "",
+        error: "",
+      },
+      position: {
+        "bottom-right": "",
+        "bottom-left": "",
+        "bottom-center": "",
+        "top-right": "",
+        "top-left": "",
+        "top-center": "",
+      },
+    },
+    compoundVariants: [
+      {
+        position: ["bottom-right", "bottom-left", "bottom-center"],
+        className: "mt-toast-gap-margin-mobile md:mt-toast-gap-margin-desktop",
+      },
+      {
+        position: ["top-right", "top-left", "top-center"],
+        className: "mb-toast-gap-margin-mobile md:mb-toast-gap-margin-desktop",
+      },
+      {
+        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 ToastVariantProps extends VariantProps<typeof toast> {}
+
+export const buttonColorVariant = compoundMapper<Pick<ButtonVariantProps, "color" | "inverted">, ToastVariantProps>({
+  compoundVariants: [
+    {
+      variant: "outlined",
+      color: "neutral",
+      value: { color: "secondary" },
+    },
+    {
+      variant: "outlined",
+      color: "success",
+      value: { color: "success" },
+    },
+    {
+      variant: "outlined",
+      color: "warning",
+      value: { color: "warning" },
+    },
+    {
+      variant: "outlined",
+      color: "error",
+      value: { color: "error" },
+    },
+    {
+      variant: "contained",
+      color: "neutral",
+      value: { color: "primary", inverted: true },
+    },
+    {
+      variant: "contained",
+      color: "success",
+      value: { color: "success", inverted: true },
+    },
+    {
+      variant: "contained",
+      color: "warning",
+      value: { color: "warning", inverted: true },
+    },
+    {
+      variant: "contained",
+      color: "error",
+      value: { color: "error", inverted: true },
+    },
+  ],
+  defaultVariants: {
+    variant: "outlined",
+    color: "neutral",
+  },
+  default: { color: "secondary" },
+});

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

@@ -0,0 +1,77 @@
+import { useCallback } from "react";
+import { type ToastPosition, toast as showToast } from "react-toastify";
+
+import { Toast, type ToastProps } from "./Toast";
+
+type IShowToast = Omit<ToastProps, "color"> & {
+  position?: ToastPosition;
+};
+
+export const useToast = () => {
+  const successToast = useCallback((params: IShowToast) => {
+    showToast.success(
+      <Toast
+        color="success"
+        {...params}
+      />,
+      {
+        position: params.position,
+        data: {
+          variant: params.variant,
+        },
+      },
+    );
+  }, []);
+
+  const errorToast = useCallback((params: IShowToast) => {
+    showToast.error(
+      <Toast
+        color="error"
+        {...params}
+      />,
+      {
+        position: params.position,
+        data: {
+          variant: params.variant,
+        },
+      },
+    );
+  }, []);
+
+  const warningToast = useCallback((params: IShowToast) => {
+    showToast.warning(
+      <Toast
+        color="warning"
+        {...params}
+      />,
+      {
+        position: params.position,
+        data: {
+          variant: params.variant,
+        },
+      },
+    );
+  }, []);
+
+  const neutralToast = useCallback((params: IShowToast) => {
+    showToast.info(
+      <Toast
+        color="neutral"
+        {...params}
+      />,
+      {
+        position: params.position,
+        data: {
+          variant: params.variant,
+        },
+      },
+    );
+  }, []);
+
+  return {
+    successToast,
+    errorToast,
+    warningToast,
+    neutralToast,
+  };
+};

package/src/components/status/shared/status.cva.ts

@@ -0,0 +1,60 @@
+import { cva } from "class-variance-authority";
+
+export const statusIcon = cva("size-6 shrink-0", {
+  variants: {
+    variant: {
+      outlined: "",
+      contained: "text-text-inverted-1",
+    },
+    color: {
+      neutral: "",
+      success: "",
+      warning: "",
+      error: "",
+    },
+  },
+  compoundVariants: [
+    {
+      variant: "outlined",
+      color: "neutral",
+      class: "text-text-default-2",
+    },
+    {
+      variant: "outlined",
+      color: "success",
+      class: "text-text-success-1",
+    },
+    {
+      variant: "outlined",
+      color: "warning",
+      class: "text-text-warning-1",
+    },
+    {
+      variant: "outlined",
+      color: "error",
+      class: "text-text-error-1",
+    },
+  ],
+  defaultVariants: {
+    variant: "outlined",
+    color: "neutral",
+  },
+});
+
+export const statusSeparator = cva("h-px shrink-0 self-stretch md:h-auto md:w-px", {
+  variants: {
+    variant: {
+      outlined: "",
+      contained: "hidden",
+    },
+    color: {
+      neutral: "bg-elevation-outline-default-1",
+      success: "bg-elevation-outline-success-1",
+      warning: "bg-elevation-outline-warning-1",
+      error: "bg-elevation-outline-error-1",
+    },
+  },
+  defaultVariants: {
+    color: "neutral",
+  },
+});

package/src/components/table/CellText.tsx

@@ -0,0 +1,23 @@
+import { clsx } from "clsx";
+import type { CSSProperties, FC, ReactNode } from "react";
+
+import { Typography } from "#ui/components/text/Typography/Typography";
+
+export interface CellTextProps {
+  children: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}
+
+export const CellText: FC<CellTextProps> = ({ children, style, className }) => (
+  <Typography
+    variant="default"
+    size="label-2"
+    as="span"
+    className={clsx("overflow-hidden text-ellipsis text-text-default-2", className)}
+    style={style}
+    data-rac
+  >
+    {children}
+  </Typography>
+);

package/src/components/table/ColumnConfig.tsx

@@ -0,0 +1,145 @@
+import type { ColumnDef, ColumnOrderState, VisibilityState } from "@tanstack/react-table";
+import type { TFunction } from "i18next";
+import { type ReactNode, useCallback, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { Checkbox } from "#ui/components/inputs/Checkbox/Checkbox";
+import { Modal } from "#ui/components/overlays/Modal/Modal";
+import { Table } from "#ui/components/table/Table";
+import { Typography } from "#ui/components/text/Typography/Typography";
+import { ns } from "#ui/config/i18n";
+import { useTranslationMemo } from "#ui/hooks/useTranslationMemo";
+
+export interface ColumnConfigModalProps<TData, TValue> {
+  isOpen: boolean;
+  onClose: () => void;
+  configColumns: ColumnDef<TData, TValue>[];
+  visibleColumns: VisibilityState;
+  onVisibilityChange: (visibleColumns: VisibilityState) => void;
+  onOrderChange: (columnOrder: ColumnOrderState) => void;
+}
+
+interface ConfigColumn {
+  id: string;
+  label: ReactNode;
+  visible: boolean;
+}
+
+const VisibilityCell = ({ original, onToggle }: { original: ConfigColumn; onToggle: (id: string) => void }) => (
+  <Checkbox
+    isSelected={original.visible}
+    onChange={() => onToggle(original.id)}
+    hideLabel
+  >
+    {original.label as string}
+  </Checkbox>
+);
+
+const getColumns = (t: TFunction, handleToggleVisibility: (columnId: string) => void) =>
+  [
+    {
+      id: "name",
+      header: t(($) => $.ui.table.column, { ns }),
+      meta: {
+        width: "flex-1",
+      },
+      accessorKey: "label",
+    },
+    {
+      id: "visible",
+      header: t(($) => $.ui.table.show, { ns }),
+      meta: {
+        width: "w-20",
+      },
+      cell: ({ original }) => (
+        <VisibilityCell
+          original={original}
+          onToggle={handleToggleVisibility}
+        />
+      ),
+    },
+  ] as ColumnDef<ConfigColumn>[];
+
+export function ColumnConfigModal<TData, TValue>({
+  isOpen,
+  onClose,
+  configColumns,
+  visibleColumns,
+  onVisibilityChange,
+  onOrderChange,
+}: ColumnConfigModalProps<TData, TValue>) {
+  const { t } = useTranslation(ns);
+  const [data, setData] = useState<ConfigColumn[]>([]);
+
+  useEffect(() => {
+    setData(
+      configColumns.map((column) => {
+        const columnId = column.id ?? (column as unknown as { accessorKey: string }).accessorKey;
+        return {
+          id: columnId,
+          label: column.header as unknown as string,
+          visible: visibleColumns?.[columnId] ?? true,
+        };
+      }),
+    );
+  }, [configColumns, visibleColumns]);
+
+  const handleToggleVisibility = useCallback(
+    (columnId: string) => {
+      const newVisible: VisibilityState = {
+        ...visibleColumns,
+        [columnId]: !visibleColumns[columnId],
+      };
+      onVisibilityChange(newVisible);
+    },
+    [visibleColumns, onVisibilityChange],
+  );
+
+  const getColumnsWithTranslation = useCallback(
+    (translateFn: TFunction) => getColumns(translateFn, handleToggleVisibility),
+    [handleToggleVisibility],
+  );
+
+  const columns = useTranslationMemo(getColumnsWithTranslation);
+
+  const handleReorder = useCallback(
+    (reorderedItems: ConfigColumn[]) => {
+      setData(reorderedItems);
+      onOrderChange(reorderedItems.map((item) => item.id));
+    },
+    [onOrderChange],
+  );
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      showCloseIcon
+    >
+      <div className="flex flex-col gap-2 p-4">
+        <Typography
+          as="h2"
+          variant="prominent-1"
+          size="title-5"
+        >
+          {t(($) => $.ui.table.configureColumns)}
+        </Typography>
+        <div className="max-h-96 overflow-y-auto">
+          <Table
+            items={data}
+            columns={columns}
+            showCellBorder
+            className="w-full"
+            enableDragDrop
+            getRowId={(row) => row.id}
+            onReorder={handleReorder}
+          />
+        </div>
+      </div>
+    </Modal>
+  );
+}

package/src/components/table/HeaderText.tsx

@@ -0,0 +1,18 @@
+import type { FC, ReactNode } from "react";
+
+import { Typography } from "#ui/components/text/Typography/Typography";
+
+export interface HeaderTextProps {
+  children: ReactNode;
+}
+
+export const HeaderText: FC<HeaderTextProps> = ({ children }) => (
+  <Typography
+    variant="default"
+    size="label-2"
+    as="span"
+    className="overflow-hidden text-ellipsis text-text-default-1"
+  >
+    {children}
+  </Typography>
+);

package/src/components/table/InfiniteTable.tsx

@@ -0,0 +1,51 @@
+import { useCallback } from "react";
+
+import { Loader } from "#ui/components/status/Loader/Loader";
+import { useIntersectionObserver } from "#ui/hooks/useIntersectionObserver";
+
+import { Table, type TableProps } from "./Table";
+
+export interface InfiniteTableWrapperProps<T> extends Omit<InfiniteTableProps<T>, "columns"> {}
+
+export interface InfiniteTableProps<T> extends TableProps<T> {
+  hasNextPage: boolean;
+  isFetchingNextPage?: boolean;
+  fetchNextPage: () => void;
+}
+
+export const InfiniteTable = <T,>({
+  hasNextPage,
+  isFetchingNextPage = false,
+  fetchNextPage,
+  ...rest
+}: InfiniteTableProps<T>) => {
+  const handleLoadMore = useCallback(() => {
+    if (!isFetchingNextPage && hasNextPage) {
+      fetchNextPage();
+    }
+  }, [isFetchingNextPage, hasNextPage, fetchNextPage]);
+
+  const { setRef } = useIntersectionObserver({
+    onIntersection: handleLoadMore,
+    rootMargin: "100px",
+  });
+
+  return (
+    <div className="flex flex-col">
+      <Table {...rest} />
+      {(hasNextPage || isFetchingNextPage) && (
+        <div
+          ref={(ref) => {
+            setRef(ref);
+            return () => {
+              setRef(null);
+            };
+          }}
+          className="flex justify-center py-4"
+        >
+          <Loader />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/table/PaginatedTable.tsx

@@ -0,0 +1,38 @@
+import type { PaginationState } from "@tanstack/react-table";
+import type { Dispatch, SetStateAction } from "react";
+
+import { Pagination } from "#ui/components/shared/pagination/Pagination";
+
+import { Table, type TableProps } from "./Table";
+
+export interface PaginatedTableWrapperProps<T> extends Omit<PaginatedTableProps<T>, "columns"> {}
+
+export interface PaginatedTableProps<T> extends TableProps<T> {
+  totalItems: number;
+  pagination: PaginationState;
+  setPagination: Dispatch<SetStateAction<PaginationState>>;
+}
+
+export const PaginatedTable = <T,>({
+  pagination,
+  setPagination,
+  items,
+  totalItems,
+  ...rest
+}: PaginatedTableProps<T>) => {
+  return (
+    <div className="flex flex-col gap-4">
+      <Table
+        {...rest}
+        items={items ?? []}
+      />
+      <Pagination
+        page={pagination.pageIndex}
+        pageSize={pagination.pageSize}
+        totalItems={totalItems ?? 0}
+        onPageChange={(page) => setPagination({ ...pagination, pageIndex: page })}
+        onPageSizeChange={(pageSize) => setPagination({ ...pagination, pageSize, pageIndex: 1 })}
+      />
+    </div>
+  );
+};