@blenx-dev/components 0.0.2 → 0.0.3

package/src/DataTable/data-table-empty.tsx

@@ -1,27 +0,0 @@
-import { FolderOpenIcon } from "@phosphor-icons/react";
-import * as styles from "./data-table.css";
-
-interface DataTableEmptyProps {
-  message?: string;
-  icon?: React.ReactNode;
-  action?: React.ReactNode;
-}
-
-export function DataTableEmpty({
-  message = "No results found",
-  icon,
-  action,
-}: DataTableEmptyProps) {
-  return (
-    <output aria-label={message} className={styles.emptyContainer}>
-      {icon && <div className={styles.iconWrap}>{icon}</div>}
-      {!icon && (
-        <div className={styles.iconWrap}>
-          <FolderOpenIcon size={48} />
-        </div>
-      )}
-      <p className={styles.message}>{message}</p>
-      {action && <div className={styles.actionWrap}>{action}</div>}
-    </output>
-  );
-}

package/src/DataTable/data-table-error.tsx

@@ -1,25 +0,0 @@
-import { WarningCircleIcon } from "@phosphor-icons/react";
-import * as styles from "./data-table.css";
-import { Button } from "../components";
-
-interface DataTableErrorProps {
-  message?: string;
-  onRetry?: () => void;
-}
-
-export function DataTableError({
-  message = "Something went wrong while loading data",
-  onRetry,
-}: DataTableErrorProps) {
-  return (
-    <div role="alert" aria-label={message} className={styles.errorContainer}>
-      <WarningCircleIcon size={48} />
-      <p className={styles.errorMessage}>{message}</p>
-      {onRetry && (
-        <Button variant="outline" size="small" onClick={onRetry}>
-          Retry
-        </Button>
-      )}
-    </div>
-  );
-}

package/src/DataTable/data-table-infinite-loader.tsx

@@ -1,73 +0,0 @@
-import { Button, Spinner } from "../components";
-import type { InfiniteScrollConfig } from "./types";
-import { useInfiniteScroll } from "./use-infinite-scroll";
-import * as styles from "./data-table.css";
-
-interface DataTableInfiniteLoaderProps {
-  fetchNextPage: () => void;
-  hasNextPage: boolean;
-  isFetchingNextPage: boolean;
-  isFetching?: boolean;
-  config?: InfiniteScrollConfig;
-}
-
-export function DataTableInfiniteLoader({
-  fetchNextPage,
-  hasNextPage,
-  isFetchingNextPage,
-  isFetching,
-  config,
-}: DataTableInfiniteLoaderProps) {
-  const isAuto = config?.mode === "auto";
-  const loadingText = config?.loadingText ?? "Loading...";
-  const noMoreText = config?.noMoreText ?? "No more results";
-
-  const { sentinelRef } = useInfiniteScroll({
-    hasNextPage,
-    isFetchingNextPage: isFetchingNextPage || Boolean(isFetching),
-    fetchNextPage,
-    rootMargin: config?.rootMargin,
-    threshold: config?.threshold,
-    enabled: isAuto,
-  });
-
-  if (isAuto) {
-    return (
-      <div
-        ref={sentinelRef}
-        aria-label={isFetchingNextPage ? loadingText : noMoreText}
-        className={styles.sentinel}
-      >
-        {isFetchingNextPage && (
-          <div className={styles.loadingInline}>
-            <Spinner />
-            <span className={styles.loaderLoadingText}>{loadingText}</span>
-          </div>
-        )}
-        {!hasNextPage && !isFetchingNextPage && <span className={styles.noMore}>{noMoreText}</span>}
-      </div>
-    );
-  }
-
-  if (!hasNextPage) {
-    return (
-      <div className={styles.center}>
-        <span className={styles.noMore}>{noMoreText}</span>
-      </div>
-    );
-  }
-
-  return (
-    <div className={styles.center}>
-      <Button
-        variant="outline"
-        onClick={fetchNextPage}
-        disabled={isFetchingNextPage}
-        loading={isFetchingNextPage}
-        aria-label={config?.loadMoreText ?? "Load more"}
-      >
-        {config?.loadMoreText ?? "Load more"}
-      </Button>
-    </div>
-  );
-}

package/src/DataTable/data-table-loading.tsx

@@ -1,67 +0,0 @@
-import { Spinner } from "../components";
-import type { TableSize } from "./types";
-import * as styles from "./data-table.css";
-
-interface DataTableLoadingProps {
-  rowCount?: number;
-  columnCount?: number;
-  size?: TableSize;
-}
-
-const ROW_HEIGHTS: Record<TableSize, number> = {
-  sm: 36,
-  md: 48,
-  lg: 60,
-};
-
-export function DataTableLoading({
-  rowCount = 5,
-  columnCount = 4,
-  size = "md",
-}: DataTableLoadingProps) {
-  const rowHeight = ROW_HEIGHTS[size];
-
-  return (
-    <output className={styles.loadingWrapper} aria-label="Loading table data">
-      <table className={styles.loadingTable}>
-        <thead>
-          <tr>
-            {Array.from({ length: columnCount }).map((_, i) => (
-              <th key={`skeleton-header-${i.toString()}`} className={styles.headerCell}>
-                <div
-                  className={styles.skeletonBar}
-                  style={{ height: 14, width: `${60 + ((i * 10) % 40)}px` }}
-                />
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {Array.from({ length: rowCount }).map((_unknown, rowIdx) => (
-            <tr key={`skeleton-row-${rowIdx.toString()}`}>
-              {Array.from({ length: columnCount }).map((_, colIdx) => (
-                <td
-                  key={`skeleton-cell-${rowIdx.toString()}-${colIdx.toString()}`}
-                  className={styles.cell}
-                  style={{ height: rowHeight }}
-                >
-                  <div
-                    className={styles.skeletonBar}
-                    style={{
-                      height: 12,
-                      width: `${80 + ((rowIdx * 7 + colIdx * 13) % 20)}%`,
-                    }}
-                  />
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-      <div className={styles.loadingFooter}>
-        <Spinner />
-        <span className={styles.loadingText}>Loading data...</span>
-      </div>
-    </output>
-  );
-}

package/src/DataTable/data-table-pagination.tsx

@@ -1,80 +0,0 @@
-import { Button } from "../components";
-import { CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";
-import type { Table } from "@tanstack/react-table";
-import * as styles from "./data-table.css";
-
-interface DataTablePaginationProps<TData> {
-  table: Table<TData>;
-}
-
-export function DataTablePagination<TData>({ table }: DataTablePaginationProps<TData>) {
-  const { pageIndex } = table.getState().pagination;
-  const pageCount = table.getPageCount();
-  const totalRows = table.getPrePaginationRowModel().rows.length;
-  const { pageSize } = table.getState().pagination;
-  const startRow = pageIndex * pageSize + 1;
-  const endRow = Math.min((pageIndex + 1) * pageSize, totalRows);
-  const canPreviousPage = table.getCanPreviousPage();
-  const canNextPage = table.getCanNextPage();
-
-  return (
-    <nav aria-label="Pagination" className={styles.nav}>
-      <span className={styles.info}>{totalRows} results</span>
-      <div className={styles.controls}>
-        <span className={styles.range}>
-          {startRow}-{endRow} of {totalRows}
-        </span>
-        <div className={styles.buttonGroup}>
-          <Button
-            variant="outline"
-            size="small"
-            disabled={!canPreviousPage}
-            onClick={() => table.previousPage()}
-            aria-label="Previous page"
-          >
-            <CaretLeftIcon size={16} />
-          </Button>
-          {Array.from({ length: pageCount }, (_, i) => i + 1)
-            .filter((page) => {
-              const current = pageIndex + 1;
-              if (pageCount <= 7) return true;
-              if (page === 1 || page === pageCount) return true;
-              if (Math.abs(page - current) <= 1) return true;
-              return false;
-            })
-            .map((page, idx, filtered) => {
-              const pageIdx = page - 1;
-              const isActive = pageIdx === pageIndex;
-              const showGap = idx > 0 && page - filtered[idx - 1]! > 1;
-              return (
-                <div key={`page-${page.toString()}`} className={styles.pageWrap}>
-                  {showGap && <span className={styles.ellipsis}>...</span>}
-                  <Button
-                    variant={isActive ? "solid" : "ghost"}
-                    intent={isActive ? "primary" : undefined}
-                    size="small"
-                    disabled={isActive}
-                    onClick={() => table.setPageIndex(pageIdx)}
-                    aria-label={`Page ${page.toString()}`}
-                    aria-current={isActive ? "page" : undefined}
-                    className={styles.pageButton}
-                  >
-                    {page.toString()}
-                  </Button>
-                </div>
-              );
-            })}
-          <Button
-            variant="outline"
-            size="small"
-            disabled={!canNextPage}
-            onClick={() => table.nextPage()}
-            aria-label="Next page"
-          >
-            <CaretRightIcon size={16} />
-          </Button>
-        </div>
-      </div>
-    </nav>
-  );
-}

package/src/DataTable/data-table-toolbar.tsx

@@ -1,62 +0,0 @@
-import { Button, Input } from "../components";
-import type { Table } from "@tanstack/react-table";
-import { DataTableColumnToggle } from "./data-table-column-toggle";
-import type { BulkAction, TableFeatures } from "./types";
-import * as styles from "./data-table.css";
-
-interface DataTableToolbarProps<TData> {
-  table: Table<TData>;
-  features?: TableFeatures;
-  globalSearch?: string;
-  onGlobalSearchChange?: (value: string) => void;
-  customToolbar?: React.ReactNode;
-  bulkActions?: BulkAction<TData>[];
-  selectedRows: TData[];
-}
-
-export function DataTableToolbar<TData>({
-  table,
-  features,
-  globalSearch,
-  onGlobalSearchChange,
-  customToolbar,
-  bulkActions,
-  selectedRows,
-}: DataTableToolbarProps<TData>) {
-  return (
-    <div className={styles.toolbarContainer}>
-      <div className={styles.leftGroup}>
-        {features?.globalSearch && (
-          <div className={styles.searchWrap}>
-            <Input
-              size="sm"
-              placeholder="Search..."
-              value={globalSearch ?? ""}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                onGlobalSearchChange?.(e.target.value);
-              }}
-            />
-          </div>
-        )}
-        {selectedRows.length > 0 &&
-          bulkActions?.map((action, index) => (
-            <Button
-              key={`bulk-action-${index.toString()}`}
-              variant={action.variant === "destructive" ? "solid" : "outline"}
-              intent={action.variant === "destructive" ? "danger" : undefined}
-              size="small"
-              disabled={action.disabled}
-              onClick={() => action.onClick(selectedRows)}
-            >
-              {action.icon && <span>{action.icon}</span>}
-              {action.label}
-            </Button>
-          ))}
-      </div>
-      <div className={styles.rightGroup}>
-        {customToolbar}
-        {features?.columnVisibility && <DataTableColumnToggle table={table} />}
-      </div>
-    </div>
-  );
-}