@withwiz/toolkit 0.2.0 → 0.2.2

package/dist/chunk-MAATEX2R.js

@@ -0,0 +1,81 @@
+import {
+  formatLabel
+} from "./chunk-NY5QXT33.js";
+import {
+  LoadingBar
+} from "./chunk-34WAGUT5.js";
+import {
+  Button
+} from "./chunk-L25BNU3E.js";
+
+// src/components/ui/data-table/DataTableBulkActions.tsx
+import { CheckSquare, Square, Loader2 } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function DataTableBulkActions({
+  bulkActions,
+  localSelectedIds,
+  dataLength,
+  bulkActionLoading,
+  onSelectAll,
+  onBulkAction,
+  labels
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 p-3 bg-muted rounded-lg", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            "data-testid": "select-all-btn",
+            variant: "outline",
+            size: "sm",
+            onClick: () => {
+              const allSelected = localSelectedIds.length === dataLength && dataLength > 0;
+              onSelectAll(!allSelected);
+            },
+            className: "flex items-center gap-1 h-9 px-3",
+            children: [
+              localSelectedIds.length === dataLength && dataLength > 0 ? /* @__PURE__ */ jsx(CheckSquare, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Square, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: labels.selectAll }),
+              /* @__PURE__ */ jsx("span", { className: "sm:hidden", children: labels.selectAllShort })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: formatLabel(labels.selected, { count: localSelectedIds.length, total: dataLength }) })
+      ] }) }),
+      localSelectedIds.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2", children: bulkActions.map((action) => {
+        var _a;
+        const isLoading = bulkActionLoading === action.key;
+        const isDisabled = !!bulkActionLoading || ((_a = action.disabled) == null ? void 0 : _a.call(action, localSelectedIds)) || localSelectedIds.length === 0;
+        return /* @__PURE__ */ jsxs(
+          Button,
+          {
+            "data-testid": `bulk-action-${action.key}`,
+            variant: action.variant || "outline",
+            size: "sm",
+            onClick: () => onBulkAction(action),
+            disabled: isDisabled,
+            className: "flex items-center gap-1 h-9 text-xs",
+            children: [
+              isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin" }) : action.icon,
+              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: isLoading ? labels.processing : action.label }),
+              /* @__PURE__ */ jsx("span", { className: "sm:hidden", children: isLoading ? "..." : action.label.split(" ")[0] })
+            ]
+          },
+          action.key
+        );
+      }) })
+    ] }),
+    bulkActionLoading && /* @__PURE__ */ jsxs("div", { className: "p-3 bg-muted/50 rounded-lg", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-primary" }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: formatLabel(labels.processingItems, { count: localSelectedIds.length }) })
+      ] }),
+      /* @__PURE__ */ jsx(LoadingBar, { size: "sm", variant: "primary", className: "mt-2" })
+    ] })
+  ] });
+}
+
+export {
+  DataTableBulkActions
+};

package/dist/chunk-NY5QXT33.js

@@ -0,0 +1,31 @@
+// src/components/ui/data-table/types.ts
+var DEFAULT_LABELS = {
+  search: "Search",
+  filter: "Filter",
+  filterActive: "Active",
+  clearFilters: "Clear Filters",
+  selectAll: "Select All",
+  selectAllShort: "All",
+  selected: "{count} / {total} selected",
+  processing: "Processing...",
+  processingItems: "Processing {count} items...",
+  loading: "Loading data...",
+  perPage: "{size} per page",
+  all: "All",
+  min: "Min",
+  max: "Max",
+  previous: "Previous",
+  next: "Next",
+  showing: "Showing {start} to {end} of {total} results"
+};
+function formatLabel(template, values) {
+  return Object.entries(values).reduce(
+    (result, [key, value]) => result.replace(new RegExp(`\\{${key}\\}`, "g"), String(value)),
+    template
+  );
+}
+
+export {
+  DEFAULT_LABELS,
+  formatLabel
+};

package/dist/chunk-TH45RVP7.js

@@ -0,0 +1,110 @@
+import {
+  formatLabel
+} from "./chunk-NY5QXT33.js";
+import {
+  Button
+} from "./chunk-L25BNU3E.js";
+import {
+  Input
+} from "./chunk-RJUVBBZG.js";
+
+// src/components/ui/data-table/DataTableSearch.tsx
+import { isValidElement } from "react";
+import { Filter } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DataTableSearch({
+  onSearch,
+  onSearchValueChange,
+  searchValue,
+  searchPlaceholder,
+  labels,
+  filters,
+  onToggleFilters,
+  showFilters,
+  hasActiveFilters,
+  pagination,
+  createButton
+}) {
+  const handleSearch = (e) => {
+    if (e.key === "Enter" && onSearch) {
+      onSearch(searchValue);
+    }
+  };
+  const handleSearchClick = () => {
+    if (onSearch) {
+      onSearch(searchValue);
+    }
+  };
+  const handleSearchInputChange = (value) => {
+    if (onSearchValueChange) {
+      onSearchValueChange(value);
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 p-3 bg-muted rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center gap-2", children: [
+    onSearch && /* @__PURE__ */ jsxs("div", { className: "relative flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          "data-testid": "search-input",
+          placeholder: searchPlaceholder,
+          value: searchValue,
+          onChange: (e) => handleSearchInputChange(e.target.value),
+          onKeyPress: handleSearch,
+          className: "min-w-0 pr-20 h-10"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          "data-testid": "search-btn",
+          size: "sm",
+          onClick: handleSearchClick,
+          className: "absolute right-1 top-1/2 transform -translate-y-1/2 h-8 px-3 text-sm",
+          children: labels.search
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
+      filters.length > 0 && onToggleFilters && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          "data-testid": "filter-toggle-btn",
+          variant: "outline",
+          size: "sm",
+          onClick: () => onToggleFilters(!showFilters),
+          className: "flex items-center gap-1 h-10 px-3",
+          children: [
+            /* @__PURE__ */ jsx(Filter, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: labels.filter }),
+            hasActiveFilters && /* @__PURE__ */ jsx("span", { className: "ml-1 bg-primary text-primary-foreground text-xs px-1.5 py-0.5 rounded-full", children: labels.filterActive })
+          ]
+        }
+      ),
+      pagination && /* @__PURE__ */ jsx(
+        "select",
+        {
+          "data-testid": "page-size-select",
+          value: pagination.pageSize,
+          onChange: (e) => pagination.onPageSizeChange(Number(e.target.value)),
+          className: "border rounded px-3 py-2 text-sm bg-background h-10 min-w-[100px]",
+          children: (pagination.pageSizeOptions || [10, 20, 50]).map((size) => /* @__PURE__ */ jsx("option", { value: size, children: formatLabel(labels.perPage, { size }) }, size))
+        }
+      ),
+      createButton && (isValidElement(createButton) ? createButton : /* @__PURE__ */ jsx(
+        Button,
+        {
+          "data-testid": "create-btn",
+          onClick: createButton.onClick,
+          variant: "default",
+          size: "sm",
+          className: "flex-shrink-0 h-10 px-3",
+          children: createButton.label
+        }
+      ))
+    ] })
+  ] }) });
+}
+
+export {
+  DataTableSearch
+};

package/dist/components/ui/DataTable.d.ts

@@ -1,103 +1,8 @@
-import { ReactNode } from "react";
-export interface DataTableLabels {
-    search?: string;
-    filter?: string;
-    filterActive?: string;
-    clearFilters?: string;
-    selectAll?: string;
-    selectAllShort?: string;
-    selected?: string;
-    processing?: string;
-    processingItems?: string;
-    loading?: string;
-    perPage?: string;
-    all?: string;
-    min?: string;
-    max?: string;
-    previous?: string;
-    next?: string;
-    showing?: string;
-}
-export interface ColumnDef<T> {
-    key: string;
-    header: string;
-    accessorKey?: keyof T;
-    cell?: (item: T) => React.ReactNode;
-    sortable?: boolean;
-    width?: string;
-    className?: string;
-    hidden?: boolean;
-    responsive?: {
-        sm?: boolean;
-        md?: boolean;
-        lg?: boolean;
-        xl?: boolean;
-    };
-}
-export interface BulkAction {
-    key: string;
-    label: string;
-    icon?: React.ReactNode;
-    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
-    onClick: (selectedIds: string[]) => Promise<void>;
-    disabled?: (selectedIds: string[]) => boolean;
-}
-export interface FilterConfig {
-    key: string;
-    label: string;
-    type: 'text' | 'select' | 'date' | 'number' | 'switch' | 'range';
-    options?: {
-        value: string;
-        label: string;
-    }[];
-    placeholder?: string;
-    className?: string;
-    inputType?: 'text' | 'number' | 'date';
-    minPlaceholder?: string;
-    maxPlaceholder?: string;
-}
-export interface PaginationConfig {
-    page: number;
-    pageSize: number;
-    total: number;
-    pageSizeOptions?: number[];
-    onPageChange: (page: number) => void;
-    onPageSizeChange: (pageSize: number) => void;
-}
-export interface SortConfig {
-    sort: string;
-    order: 'asc' | 'desc';
-    onSortChange: (sort: string, order: 'asc' | 'desc') => void;
-}
-export interface DataTableProps<T> {
-    data: T[];
-    columns: ColumnDef<T>[];
-    loading?: boolean;
-    error?: string | null;
-    pagination?: PaginationConfig;
-    sort?: SortConfig;
-    bulkActions?: BulkAction[];
-    filters?: FilterConfig[];
-    filterValues?: Record<string, any>;
-    onFilterChange?: (key: string, value: any) => void;
-    onClearFilters?: () => void;
-    selectable?: boolean;
-    onSelectionChange?: (selectedIds: string[]) => void;
-    selectedIds?: string[];
-    getRowId: (item: T) => string;
-    className?: string;
-    emptyMessage?: string;
-    searchPlaceholder?: string;
-    onSearch?: (search: string) => void;
-    onSearchValueChange?: (searchValue: string) => void;
-    searchValue?: string;
-    showFilters?: boolean;
-    onToggleFilters?: (show: boolean) => void;
-    createButton?: ReactNode | {
-        label: string;
-        onClick: () => void;
-    };
-    /** i18n labels - 미제공 시 영어 기본값 사용 */
-    labels?: Partial<DataTableLabels>;
-}
-export declare function DataTable<T>({ data, columns, loading, error, pagination, sort, bulkActions, filters, filterValues, onFilterChange, onClearFilters, selectable, onSelectionChange, selectedIds, getRowId, className, emptyMessage, searchPlaceholder, onSearch, onSearchValueChange, searchValue, showFilters, onToggleFilters, createButton, labels: customLabels, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+/**
+ * DataTable
+ *
+ * 하위 호환성을 위한 re-export wrapper
+ * 실제 구현은 ./data-table/ 디렉토리에 위치
+ */
+export { DataTable } from "./data-table";
+export type { DataTableLabels, ColumnDef, BulkAction, FilterConfig, PaginationConfig, SortConfig, DataTableProps, } from "./data-table";