@povio/ui 0.0.4 → 0.0.6

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

@@ -1,77 +0,0 @@
-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/table/CellText.tsx

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

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

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

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

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