@bouku/core 0.1.6 → 0.1.7

package/dist/components/table/header.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };

package/dist/components/table/index.d.ts

@@ -1,4 +1,4 @@
-import { type Row } from "./row";
+import { type Row, type Action } from "./row";
 type ColumnOptions = {
     label?: string;
     pad?: number;
@@ -9,6 +9,7 @@ type Props<T extends Row> = {
     title?: string;
     config: Partial<Record<keyof T, boolean | ColumnOptions>>;
     items: T[];
+    actions?: Action<T>[];
 };
-export default function Table<T extends Row>({ style, title, config: initConfig, items }: Props<T>): import("react").JSX.Element;
+export default function Table<T extends Row>({ style, title, config: initConfig, items, actions }: Props<T>): import("react").JSX.Element;
 export {};

package/dist/components/table/index.js

@@ -4,25 +4,30 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Table;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const sorter_1 = require("./sorter");
+const ts_helper_kit_1 = require("ts-helper-kit");
+const _1 = require("../../utils/functions/_");
 const flex_1 = require("../layout/flex");
 const header_1 = require("./header");
 const row_1 = require("./row");
-const ts_helper_kit_1 = require("ts-helper-kit");
-const style_1 = require("../../utils/functions/style");
-function Table({ style, title, config: initConfig, items }) {
+function Table({ style, title, config: initConfig, items, actions }) {
     const { sortedItems, ...sortOptions } = (0, sorter_1.useSort)(items);
-    const config = parseConfig(initConfig);
+    const config = parseConfig(initConfig, !!actions?.length);
     const columns = Object.keys(config);
     const condensedItems = (0, ts_helper_kit_1.condenseArray)(sortedItems, columns);
-    return ((0, jsx_runtime_1.jsxs)(flex_1.ColumnBox, { style: (0, style_1.cn)(s.container, style), children: [title && ((0, jsx_runtime_1.jsx)("span", { className: s.title, children: title })), (0, jsx_runtime_1.jsxs)(flex_1.ColumnBox, { style: s.subcontainer, children: [(0, jsx_runtime_1.jsx)(header_1.Header, { ...sortOptions, columnLabels: Object.fromEntries(columns.map(c => [c, config[c].label])) }), (0, jsx_runtime_1.jsx)(flex_1.ColumnBox, { style: s.rows, children: condensedItems.map(({ item, count }, i) => ((0, jsx_runtime_1.jsx)(row_1.TableRow, { config: config, data: item, count: count }, i))) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(flex_1.ColumnBox, { style: (0, _1.cn)(s.container, style), children: [title && ((0, jsx_runtime_1.jsx)("span", { className: s.title, children: title })), (0, jsx_runtime_1.jsxs)(flex_1.ColumnBox, { style: s.subcontainer, children: [(0, jsx_runtime_1.jsx)(header_1.Header, { ...sortOptions, columnLabels: Object.fromEntries(columns.map(c => [c, config[c].label])) }), (0, jsx_runtime_1.jsx)(flex_1.ColumnBox, { style: s.rows, children: condensedItems.map(({ item, count }, i) => ((0, jsx_runtime_1.jsx)(row_1.TableRow, { config: config, data: item, count: count, actions: actions }, i))) })] })] }));
 }
-function parseConfig(config) {
-    return Object.entries(config).reduce((acc, [key, value]) => {
+function parseConfig(config, hasActions) {
+    const parsed = Object.entries(config).reduce((acc, [key, value]) => {
         const label = String(key).replaceAll("_", " ");
         const isObject = typeof value === "object" && value !== null;
         acc[key] = isObject ? { label, ...value } : { label };
         return acc;
     }, {});
+    // Automatically append an actions column if actions exist
+    if (hasActions) {
+        parsed["actions"] = { label: "Actions" };
+    }
+    return parsed;
 }
 const s = {
     container: "gap-3 overflow-hidden",

package/dist/components/table/row.d.ts

@@ -4,12 +4,19 @@ type ColumnOptions = {
     pad?: number;
     link?: string;
 };
+export type Action<T> = {
+    variant?: "accent" | "surface" | "error";
+    icon?: React.ReactNode;
+    style?: string;
+    handler: (row: T) => void;
+};
 interface Props<T> {
     config: Record<string, ColumnOptions>;
     data: T;
     count: number;
+    actions?: Action<T>[];
 }
 export type Row = Record<string, CellValue>;
 export type CellValue = string | number | boolean | object | null;
-export declare function TableRow<T extends Row>({ config, data, count }: Props<T>): import("react").JSX.Element;
+export declare function TableRow<T extends Row>({ config, data, actions, count }: Props<T>): import("react").JSX.Element;
 export {};

package/dist/components/table/row.js

@@ -7,13 +7,22 @@ exports.isDateLike = void 0;
 exports.TableRow = TableRow;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const flex_1 = require("../layout/flex");
-const ts_helper_kit_1 = require("ts-helper-kit");
+const _1 = require("../button/_");
 const check_circle_svg_1 = __importDefault(require("../../assets/icons/check-circle.svg"));
 const x_circle_svg_1 = __importDefault(require("../../assets/icons/x-circle.svg"));
+const ts_helper_kit_1 = require("ts-helper-kit");
 const isDateLike = (val) => !isNaN(Date.parse(val)) && isNaN(Number(val));
 exports.isDateLike = isDateLike;
-function TableRow({ config, data, count }) {
+function TableRow({ config, data, actions, count }) {
     return ((0, jsx_runtime_1.jsxs)(flex_1.RowBox, { style: s.container, children: [Object.keys(config).map((key, i) => {
+                if (key === "actions" && actions) {
+                    return ((0, jsx_runtime_1.jsx)(flex_1.RowBox, { style: s.cell, children: (0, jsx_runtime_1.jsx)(flex_1.RowBox, { style: "gap-2 items-center", children: actions.map((action, actionIdx) => {
+                                const variantStyles = action.variant === "error" ? "bg-error/10 text-error hover:bg-error/20" :
+                                    action.variant === "accent" ? "bg-accent/10 text-accent hover:bg-accent/20" :
+                                        "bg-surface-light text-primary hover:bg-surface-light/80";
+                                return ((0, jsx_runtime_1.jsx)(_1.Button, { size: "xs", variant: "surface", style: action.style, icon: action.icon, action: () => action.handler(data) }, actionIdx));
+                            }) }) }, i));
+                }
                 const rawValue = data[key];
                 const value = rawValue === 0 ? 0 : (data[key] ?? "N/A");
                 const options = config[key];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bouku/core",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",