@withwiz/toolkit 0.2.0 → 0.2.1

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-SEZJN4TC.js

@@ -0,0 +1,136 @@
+import {
+  Input
+} from "./chunk-RJUVBBZG.js";
+import {
+  Label
+} from "./chunk-IJEZ7G7S.js";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "./chunk-WDUFQFDP.js";
+import {
+  Button
+} from "./chunk-L25BNU3E.js";
+import {
+  cn
+} from "./chunk-62FLBG6B.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/ui/data-table/DataTableFilters.tsx
+import { RefreshCw } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DataTableFilters({
+  filters,
+  filterValues,
+  onFilterChange,
+  onClearFilters,
+  hasActiveFilters,
+  labels
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "p-2 bg-muted/50 rounded-lg space-y-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4", children: filters.map((filter) => {
+      var _a, _b, _c, _d, _e;
+      return /* @__PURE__ */ jsxs("div", { className: cn("space-y-1", filter.className), children: [
+        /* @__PURE__ */ jsx(Label, { className: "text-sm font-medium", children: filter.label }),
+        filter.type === "text" && /* @__PURE__ */ jsx(
+          Input,
+          {
+            "data-testid": `filter-${filter.key}`,
+            type: "text",
+            value: filterValues[filter.key] || "",
+            onChange: (e) => onFilterChange == null ? void 0 : onFilterChange(filter.key, e.target.value),
+            placeholder: filter.placeholder,
+            className: "text-xs"
+          }
+        ),
+        filter.type === "select" && /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: filterValues[filter.key] || "all",
+            onValueChange: (value) => onFilterChange == null ? void 0 : onFilterChange(filter.key, value),
+            children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { "data-testid": `filter-${filter.key}`, className: "text-xs w-full h-9", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: filter.placeholder }) }),
+              /* @__PURE__ */ jsxs(SelectContent, { children: [
+                /* @__PURE__ */ jsx(SelectItem, { value: "all", children: labels.all }),
+                (_a = filter.options) == null ? void 0 : _a.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value))
+              ] })
+            ]
+          }
+        ),
+        filter.type === "date" && /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "date",
+            value: filterValues[filter.key] || "",
+            onChange: (e) => onFilterChange == null ? void 0 : onFilterChange(filter.key, e.target.value),
+            className: "text-xs"
+          }
+        ),
+        filter.type === "number" && /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "number",
+            value: filterValues[filter.key] || "",
+            onChange: (e) => onFilterChange == null ? void 0 : onFilterChange(filter.key, e.target.value),
+            placeholder: filter.placeholder,
+            className: "text-xs"
+          }
+        ),
+        filter.type === "range" && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: filter.inputType || "text",
+              value: ((_b = filterValues[filter.key]) == null ? void 0 : _b.min) || ((_c = filterValues[filter.key]) == null ? void 0 : _c.start) || "",
+              onChange: (e) => {
+                const currentValue = filterValues[filter.key] || {};
+                const newValue = filter.key.includes("date") || filter.key.includes("Date") ? __spreadProps(__spreadValues({}, currentValue), { start: e.target.value }) : __spreadProps(__spreadValues({}, currentValue), { min: e.target.value });
+                onFilterChange == null ? void 0 : onFilterChange(filter.key, newValue);
+              },
+              className: "text-xs",
+              placeholder: filter.minPlaceholder || labels.min
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: filter.inputType || "text",
+              value: ((_d = filterValues[filter.key]) == null ? void 0 : _d.max) || ((_e = filterValues[filter.key]) == null ? void 0 : _e.end) || "",
+              onChange: (e) => {
+                const currentValue = filterValues[filter.key] || {};
+                const newValue = filter.key.includes("date") || filter.key.includes("Date") ? __spreadProps(__spreadValues({}, currentValue), { end: e.target.value }) : __spreadProps(__spreadValues({}, currentValue), { max: e.target.value });
+                onFilterChange == null ? void 0 : onFilterChange(filter.key, newValue);
+              },
+              className: "text-xs",
+              placeholder: filter.maxPlaceholder || labels.max
+            }
+          )
+        ] })
+      ] }, filter.key);
+    }) }),
+    hasActiveFilters && onClearFilters && /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        "data-testid": "clear-filters-btn",
+        variant: "outline",
+        size: "sm",
+        onClick: onClearFilters,
+        className: "flex items-center gap-2",
+        children: [
+          /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }),
+          labels.clearFilters
+        ]
+      }
+    ) })
+  ] });
+}
+
+export {
+  DataTableFilters
+};

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";