@bouku/core 0.2.1 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/button/_.d.ts +1 -0
- package/dist/components/button/_.js +3 -1
- package/dist/components/button/actions.d.ts +14 -0
- package/dist/components/button/actions.js +8 -0
- package/dist/components/button/upload.js +1 -1
- package/dist/utils/types/element.d.ts +5 -0
- package/package.json +7 -2
- package/dist/assets/styles/button.css +0 -76
- package/dist/components/accordion/index.d.ts +0 -6
- package/dist/components/accordion/index.js +0 -12
- package/dist/components/accordion/tab.d.ts +0 -4
- package/dist/components/accordion/tab.js +0 -35
- package/dist/components/dropdown/normal.d.ts +0 -10
- package/dist/components/dropdown/normal.js +0 -22
- package/dist/components/fade/_.d.ts +0 -1
- package/dist/components/fade/_.js +0 -8
- package/dist/components/fade/circle.d.ts +0 -10
- package/dist/components/fade/circle.js +0 -8
- package/dist/components/heading/_.d.ts +0 -2
- package/dist/components/heading/_.js +0 -10
- package/dist/components/heading/normal.d.ts +0 -24
- package/dist/components/heading/normal.js +0 -26
- package/dist/components/heading/page.d.ts +0 -25
- package/dist/components/heading/page.js +0 -26
- package/dist/components/information/_.d.ts +0 -1
- package/dist/components/information/_.js +0 -8
- package/dist/components/information/card.d.ts +0 -8
- package/dist/components/information/card.js +0 -22
- package/dist/components/layout/absolute.d.ts +0 -9
- package/dist/components/layout/absolute.js +0 -12
- package/dist/components/layout/fade.d.ts +0 -7
- package/dist/components/layout/fade.js +0 -20
- package/dist/components/layout/flex.d.ts +0 -17
- package/dist/components/layout/flex.js +0 -49
- package/dist/components/layout/media-row.d.ts +0 -15
- package/dist/components/layout/media-row.js +0 -11
- package/dist/components/layout/rnd.d.ts +0 -10
- package/dist/components/layout/rnd.js +0 -32
- package/dist/components/layout/scroll-box.d.ts +0 -14
- package/dist/components/layout/scroll-box.js +0 -11
- package/dist/components/pagination/index.d.ts +0 -9
- package/dist/components/pagination/index.js +0 -21
- package/dist/components/progress/_.d.ts +0 -1
- package/dist/components/progress/_.js +0 -8
- package/dist/components/progress/bar.d.ts +0 -4
- package/dist/components/progress/bar.js +0 -12
- package/dist/components/table/_.d.ts +0 -1
- package/dist/components/table/_.js +0 -8
- package/dist/components/table/header.d.ts +0 -10
- package/dist/components/table/header.js +0 -20
- package/dist/components/table/index.d.ts +0 -15
- package/dist/components/table/index.js +0 -37
- package/dist/components/table/normal.d.ts +0 -7
- package/dist/components/table/normal.js +0 -20
- package/dist/components/table/row.d.ts +0 -22
- package/dist/components/table/row.js +0 -40
- package/dist/components/table/sorter.d.ts +0 -10
- package/dist/components/table/sorter.js +0 -53
- package/dist/ui/button/_.d.ts +0 -2
- package/dist/ui/button/_.js +0 -10
- package/dist/ui/button/copy.d.ts +0 -6
- package/dist/ui/button/copy.js +0 -16
- package/dist/ui/button/normal.d.ts +0 -11
- package/dist/ui/button/normal.js +0 -48
- package/dist/ui/date/_.d.ts +0 -1
- package/dist/ui/date/_.js +0 -8
- package/dist/ui/date/time-ago.d.ts +0 -7
- package/dist/ui/date/time-ago.js +0 -13
- package/dist/ui/dropdown/normal.d.ts +0 -10
- package/dist/ui/dropdown/normal.js +0 -22
- package/dist/ui/fade/_.d.ts +0 -1
- package/dist/ui/fade/_.js +0 -8
- package/dist/ui/fade/circle.d.ts +0 -10
- package/dist/ui/fade/circle.js +0 -8
- package/dist/ui/heading/_.d.ts +0 -2
- package/dist/ui/heading/_.js +0 -10
- package/dist/ui/heading/normal.d.ts +0 -24
- package/dist/ui/heading/normal.js +0 -26
- package/dist/ui/heading/page.d.ts +0 -25
- package/dist/ui/heading/page.js +0 -26
- package/dist/ui/index.d.ts +0 -19
- package/dist/ui/index.js +0 -45
- package/dist/ui/information/_.d.ts +0 -1
- package/dist/ui/information/_.js +0 -8
- package/dist/ui/information/card.d.ts +0 -7
- package/dist/ui/information/card.js +0 -20
- package/dist/ui/layout/_.d.ts +0 -2
- package/dist/ui/layout/_.js +0 -10
- package/dist/ui/layout/absolute.d.ts +0 -9
- package/dist/ui/layout/absolute.js +0 -12
- package/dist/ui/layout/fade.d.ts +0 -7
- package/dist/ui/layout/fade.js +0 -20
- package/dist/ui/layout/flex.d.ts +0 -17
- package/dist/ui/layout/flex.js +0 -49
- package/dist/ui/layout/footer.d.ts +0 -15
- package/dist/ui/layout/footer.js +0 -13
- package/dist/ui/layout/media-row.d.ts +0 -15
- package/dist/ui/layout/media-row.js +0 -11
- package/dist/ui/layout/rnd.d.ts +0 -10
- package/dist/ui/layout/rnd.js +0 -32
- package/dist/ui/layout/scroll-box.d.ts +0 -14
- package/dist/ui/layout/scroll-box.js +0 -11
- package/dist/ui/layout/section.d.ts +0 -15
- package/dist/ui/layout/section.js +0 -19
- package/dist/ui/layout/separator.d.ts +0 -3
- package/dist/ui/layout/separator.js +0 -8
- package/dist/ui/link/_.d.ts +0 -1
- package/dist/ui/link/_.js +0 -8
- package/dist/ui/link/tab.d.ts +0 -22
- package/dist/ui/link/tab.js +0 -30
- package/dist/ui/list/index.d.ts +0 -2
- package/dist/ui/list/index.js +0 -10
- package/dist/ui/list/item.d.ts +0 -9
- package/dist/ui/list/item.js +0 -9
- package/dist/ui/list/search-bar.d.ts +0 -14
- package/dist/ui/list/search-bar.js +0 -33
- package/dist/ui/list/variants/bullet.d.ts +0 -9
- package/dist/ui/list/variants/bullet.js +0 -21
- package/dist/ui/list/variants/number.d.ts +0 -10
- package/dist/ui/list/variants/number.js +0 -23
- package/dist/ui/pagination/index.d.ts +0 -9
- package/dist/ui/pagination/index.js +0 -21
- package/dist/ui/progress/_.d.ts +0 -1
- package/dist/ui/progress/_.js +0 -8
- package/dist/ui/progress/bar.d.ts +0 -4
- package/dist/ui/progress/bar.js +0 -12
- package/dist/ui/table/_.d.ts +0 -1
- package/dist/ui/table/_.js +0 -8
- package/dist/ui/table/normal.d.ts +0 -7
- package/dist/ui/table/normal.js +0 -20
- package/dist/ui/text/_.d.ts +0 -2
- package/dist/ui/text/_.js +0 -10
- package/dist/ui/text/badge.d.ts +0 -18
- package/dist/ui/text/badge.js +0 -42
- package/dist/ui/text/input.d.ts +0 -39
- package/dist/ui/text/input.js +0 -50
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
"use strict";
|
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.default = RnD;
|
|
5
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
-
const react_rnd_1 = require("react-rnd");
|
|
7
|
-
const style_1 = require("../../utils/functions/style");
|
|
8
|
-
function RnD({ style, min, max, minWidth, update, children }) {
|
|
9
|
-
const gapSize = max - min;
|
|
10
|
-
const handleResize = (x, width) => {
|
|
11
|
-
update(x, width);
|
|
12
|
-
};
|
|
13
|
-
const handleDrag = (x) => {
|
|
14
|
-
update(x, gapSize);
|
|
15
|
-
};
|
|
16
|
-
return ((0, jsx_runtime_1.jsx)(react_rnd_1.Rnd, { ...opts(min, max, minWidth), className: (0, style_1.cn)("flex! justify-center items-center overflow-hidden", style), size: { width: gapSize, height: "100%" }, position: { x: min, y: 0 }, onResize: (e, dir, ref, d, pos) => handleResize(pos.x, ref.offsetWidth), onDragStop: (e, d) => handleDrag(d.x), children: children }));
|
|
17
|
-
}
|
|
18
|
-
const opts = (min, max, minWidth) => ({
|
|
19
|
-
bounds: "parent",
|
|
20
|
-
axis: "x",
|
|
21
|
-
minWidth: minWidth || 30,
|
|
22
|
-
default: {
|
|
23
|
-
x: min,
|
|
24
|
-
y: 0,
|
|
25
|
-
width: max - min,
|
|
26
|
-
height: "100%"
|
|
27
|
-
},
|
|
28
|
-
enableResizing: {
|
|
29
|
-
left: true,
|
|
30
|
-
right: true
|
|
31
|
-
}
|
|
32
|
-
});
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { Dispatch, SetStateAction } from "react";
|
|
2
|
-
type RowProps<T> = {
|
|
3
|
-
data: T;
|
|
4
|
-
hovered: boolean;
|
|
5
|
-
setHovered: Dispatch<SetStateAction<number | null>>;
|
|
6
|
-
index: number;
|
|
7
|
-
};
|
|
8
|
-
type Props<T> = {
|
|
9
|
-
style?: string;
|
|
10
|
-
items: T[];
|
|
11
|
-
element: React.ComponentType<RowProps<T>>;
|
|
12
|
-
};
|
|
13
|
-
export declare function ScrollBox<T>({ style, items, element: Row }: Props<T>): import("react").JSX.Element;
|
|
14
|
-
export {};
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.ScrollBox = ScrollBox;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const react_1 = require("react");
|
|
6
|
-
const style_1 = require("../../utils/functions/style");
|
|
7
|
-
const flex_1 = require("./flex");
|
|
8
|
-
function ScrollBox({ style, items, element: Row }) {
|
|
9
|
-
const [hoveredIndex, setHoveredIndex] = (0, react_1.useState)(null);
|
|
10
|
-
return ((0, jsx_runtime_1.jsx)(flex_1.ColumnBox, { style: (0, style_1.cn)("grow gap-1 w-full overflow-y-auto", style), children: items.map((x, i) => ((0, jsx_runtime_1.jsx)(Row, { data: x, hovered: hoveredIndex === i, setHovered: setHoveredIndex, index: i }, i))) }));
|
|
11
|
-
}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.default = Pagination;
|
|
7
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
-
const chevron_left_svg_1 = __importDefault(require("../../assets/icons/chevron-left.svg"));
|
|
9
|
-
const chevron_right_svg_1 = __importDefault(require("../../assets/icons/chevron-right.svg"));
|
|
10
|
-
const flex_1 = require("../layout/flex");
|
|
11
|
-
const normal_1 = require("../button/normal");
|
|
12
|
-
const style_1 = require("../../utils/functions/style");
|
|
13
|
-
function Pagination({ style, page, prev, next, totalPages = 99 }) {
|
|
14
|
-
const canPrev = page > 1;
|
|
15
|
-
const canNext = totalPages > 0 ? page < totalPages : true;
|
|
16
|
-
return ((0, jsx_runtime_1.jsxs)(flex_1.RowBox, { style: (0, style_1.cn)(s.container, style), children: [(0, jsx_runtime_1.jsx)(normal_1.Button, { size: "xs", style: "rounded-none rounded-l-sm", action: prev, disabled: !canPrev, children: (0, jsx_runtime_1.jsx)(chevron_left_svg_1.default, {}) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-px justify-center items-center w-11 h-6 px-2 bg-border-dark/20 border-y border-border-dark text-xs font-medium", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-primary", children: page }), "/", (0, jsx_runtime_1.jsx)("span", { className: "text-primary-darker", children: totalPages || 99 })] }), (0, jsx_runtime_1.jsx)(normal_1.Button, { size: "xs", style: "rounded-none rounded-r-sm", action: next, disabled: !canNext, children: (0, jsx_runtime_1.jsx)(chevron_right_svg_1.default, {}) })] }));
|
|
17
|
-
}
|
|
18
|
-
const s = {
|
|
19
|
-
container: "justify-center items-center text-primary-darker select-none",
|
|
20
|
-
subcontainer: "gap-2",
|
|
21
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as ProgressBar } from "./bar";
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.ProgressBar = void 0;
|
|
7
|
-
var bar_1 = require("./bar");
|
|
8
|
-
Object.defineProperty(exports, "ProgressBar", { enumerable: true, get: function () { return __importDefault(bar_1).default; } });
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.default = ProgressBar;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const style_1 = require("../../utils/functions/style");
|
|
6
|
-
function ProgressBar({ value, style }) {
|
|
7
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: (0, style_1.cn)(s.container, style), children: (0, jsx_runtime_1.jsx)("div", { className: s.filled, style: { width: (value * 100) + "%" } }) }));
|
|
8
|
-
}
|
|
9
|
-
const s = {
|
|
10
|
-
container: "flex grow h-1 rounded-full bg-surface overflow-hidden",
|
|
11
|
-
filled: "h-full bg-accent"
|
|
12
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as Table } from "./normal";
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.Table = void 0;
|
|
7
|
-
var normal_1 = require("./normal");
|
|
8
|
-
Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return __importDefault(normal_1).default; } });
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { CellValue } from "./row";
|
|
2
|
-
type Props<T> = {
|
|
3
|
-
columnLabels: Record<string, string>;
|
|
4
|
-
sortColumn: keyof T | null;
|
|
5
|
-
sortDirection: "asc" | "desc";
|
|
6
|
-
sortBy: (x: string | null) => void;
|
|
7
|
-
toggleSortDirection: () => void;
|
|
8
|
-
};
|
|
9
|
-
export declare const Header: <T extends Record<keyof T, CellValue>>({ columnLabels, sortColumn, sortDirection, sortBy, toggleSortDirection }: Props<T>) => import("react").JSX.Element;
|
|
10
|
-
export {};
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
"use strict";
|
|
3
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
4
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
5
|
-
};
|
|
6
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
-
exports.Header = void 0;
|
|
8
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
9
|
-
const react_1 = require("react");
|
|
10
|
-
const flex_1 = require("../layout/flex");
|
|
11
|
-
const arrow_up_svg_1 = __importDefault(require("../../assets/icons/arrow-up.svg"));
|
|
12
|
-
const arrow_down_svg_1 = __importDefault(require("../../assets/icons/arrow-down.svg"));
|
|
13
|
-
const Header = ({ columnLabels, sortColumn, sortDirection, sortBy, toggleSortDirection }) => ((0, jsx_runtime_1.jsx)(flex_1.RowBox, { style: s.container, children: Object.entries(columnLabels).map(([col, label], i) => ((0, jsx_runtime_1.jsxs)(flex_1.RowBox, { style: s.column, children: [(0, jsx_runtime_1.jsx)("span", { className: s.label, onClick: () => sortBy(col), children: label }), col === sortColumn && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [sortDirection === "desc" && (0, jsx_runtime_1.jsx)(arrow_down_svg_1.default, { className: s.sorter, onClick: () => toggleSortDirection() }), sortDirection === "asc" && (0, jsx_runtime_1.jsx)(arrow_up_svg_1.default, { className: s.sorter, onClick: () => toggleSortDirection() })] }))] }, i))) }));
|
|
14
|
-
exports.Header = Header;
|
|
15
|
-
const s = {
|
|
16
|
-
container: "w-full px-4 py-3 bg-background-light border-b border-border",
|
|
17
|
-
column: "flex-1 gap-1 first:justify-start justify-center last:justify-end items-center uppercase text-primary-dark font-light text-sm",
|
|
18
|
-
label: "hover:brightness-120 duration-200 cursor-pointer",
|
|
19
|
-
sorter: "hover:text-primary cursor-pointer duration-200"
|
|
20
|
-
};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { type Row, type Action } from "./row";
|
|
2
|
-
type ColumnOptions = {
|
|
3
|
-
label?: string;
|
|
4
|
-
pad?: number;
|
|
5
|
-
link?: string;
|
|
6
|
-
};
|
|
7
|
-
type Props<T extends Row> = {
|
|
8
|
-
style?: string;
|
|
9
|
-
title?: string;
|
|
10
|
-
config: Partial<Record<keyof T, boolean | ColumnOptions>>;
|
|
11
|
-
items: T[];
|
|
12
|
-
actions?: Action<T>[];
|
|
13
|
-
};
|
|
14
|
-
export default function Table<T extends Row>({ style, title, config: initConfig, items, actions }: Props<T>): import("react").JSX.Element;
|
|
15
|
-
export {};
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
"use strict";
|
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.default = Table;
|
|
5
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
-
const sorter_1 = require("./sorter");
|
|
7
|
-
const ts_helper_kit_1 = require("ts-helper-kit");
|
|
8
|
-
const _1 = require("../../utils/functions/_");
|
|
9
|
-
const flex_1 = require("../layout/flex");
|
|
10
|
-
const header_1 = require("./header");
|
|
11
|
-
const row_1 = require("./row");
|
|
12
|
-
function Table({ style, title, config: initConfig, items, actions }) {
|
|
13
|
-
const { sortedItems, ...sortOptions } = (0, sorter_1.useSort)(items);
|
|
14
|
-
const config = parseConfig(initConfig, !!actions?.length);
|
|
15
|
-
const columns = Object.keys(config);
|
|
16
|
-
const condensedItems = (0, ts_helper_kit_1.condenseArray)(sortedItems, columns);
|
|
17
|
-
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))) })] })] }));
|
|
18
|
-
}
|
|
19
|
-
function parseConfig(config, hasActions) {
|
|
20
|
-
const parsed = Object.entries(config).reduce((acc, [key, value]) => {
|
|
21
|
-
const label = String(key).replaceAll("_", " ");
|
|
22
|
-
const isObject = typeof value === "object" && value !== null;
|
|
23
|
-
acc[key] = isObject ? { label, ...value } : { label };
|
|
24
|
-
return acc;
|
|
25
|
-
}, {});
|
|
26
|
-
// Automatically append an actions column if actions exist
|
|
27
|
-
if (hasActions) {
|
|
28
|
-
parsed["actions"] = { label: "Actions" };
|
|
29
|
-
}
|
|
30
|
-
return parsed;
|
|
31
|
-
}
|
|
32
|
-
const s = {
|
|
33
|
-
container: "gap-3 overflow-hidden",
|
|
34
|
-
title: "text-xl font-bold text-primary",
|
|
35
|
-
subcontainer: "grow w-full border border-border rounded-md overflow-hidden",
|
|
36
|
-
rows: "grow overflow-y-auto no-scrollbar"
|
|
37
|
-
};
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
"use strict";
|
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.default = Table;
|
|
5
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
-
const flex_1 = require("../layout/flex");
|
|
7
|
-
const _1 = require("../button/_");
|
|
8
|
-
const ts_1 = require("@bouko/ts");
|
|
9
|
-
const style_1 = require("@bouko/style");
|
|
10
|
-
function Table({ columns, items }) {
|
|
11
|
-
return ((0, jsx_runtime_1.jsxs)(flex_1.ColumnBox, { style: s.table, children: [(0, jsx_runtime_1.jsx)(flex_1.RowBox, { style: s.header, children: columns.map((x, i) => ((0, jsx_runtime_1.jsx)(flex_1.RowBox, { style: (0, style_1.cn)(s.columnLabel, i === 0 ? "justify-start" : i === columns.length - 1 ? "justify-end" : "justify-center"), children: x }, i))) }), (0, jsx_runtime_1.jsx)(flex_1.ColumnBox, { style: s.rows, children: items.map((x, i) => ((0, jsx_runtime_1.jsx)(flex_1.RowBox, { style: (0, style_1.cn)(s.row, i % 2 === 0 && "bg-surface", i === 0 ? "border-none" : i === items.length - 1 ? "border-none" : "border-b"), children: columns.map((key, j) => ((0, jsx_runtime_1.jsxs)(flex_1.RowBox, { style: (0, style_1.cn)(s.cell, j === 0 ? "justify-start" : j === columns.length - 1 ? "justify-end" : "justify-center"), children: [key === "id" ? (0, ts_1.shortenStr)(x[key]) : (x[key] ?? "N/A"), key === "id" && (0, jsx_runtime_1.jsx)(_1.CopyButton, { style: "text-primary-dark", value: (x["id"] || "N/A").toString() })] }, j))) }, i))) })] }));
|
|
12
|
-
}
|
|
13
|
-
const s = {
|
|
14
|
-
table: "grow w-full border border-border rounded-md overflow-hidden",
|
|
15
|
-
header: "w-full px-4 py-3 bg-background-light border-b border-border",
|
|
16
|
-
columnLabel: "flex-1 uppercase text-primary-dark font-light text-sm",
|
|
17
|
-
rows: "grow overflow-y-auto no-scrollbar",
|
|
18
|
-
row: "w-full px-4 py-4 border-b border-border",
|
|
19
|
-
cell: "flex-1 items-center gap-2"
|
|
20
|
-
};
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
export declare const isDateLike: (val: string) => boolean;
|
|
2
|
-
type ColumnOptions = {
|
|
3
|
-
label: string;
|
|
4
|
-
pad?: number;
|
|
5
|
-
link?: string;
|
|
6
|
-
};
|
|
7
|
-
export type Action<T> = {
|
|
8
|
-
variant?: "accent" | "surface" | "error";
|
|
9
|
-
icon?: React.ReactNode;
|
|
10
|
-
style?: string;
|
|
11
|
-
handler: (row: T) => void;
|
|
12
|
-
};
|
|
13
|
-
interface Props<T> {
|
|
14
|
-
config: Record<string, ColumnOptions>;
|
|
15
|
-
data: T;
|
|
16
|
-
count: number;
|
|
17
|
-
actions?: Action<T>[];
|
|
18
|
-
}
|
|
19
|
-
export type Row = Record<string, CellValue>;
|
|
20
|
-
export type CellValue = string | number | boolean | object | null;
|
|
21
|
-
export declare function TableRow<T extends Row>({ config, data, actions, count }: Props<T>): import("react").JSX.Element;
|
|
22
|
-
export {};
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.isDateLike = void 0;
|
|
7
|
-
exports.TableRow = TableRow;
|
|
8
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
9
|
-
const flex_1 = require("../layout/flex");
|
|
10
|
-
const _1 = require("../button/_");
|
|
11
|
-
const check_circle_svg_1 = __importDefault(require("../../assets/icons/check-circle.svg"));
|
|
12
|
-
const x_circle_svg_1 = __importDefault(require("../../assets/icons/x-circle.svg"));
|
|
13
|
-
const ts_helper_kit_1 = require("ts-helper-kit");
|
|
14
|
-
const isDateLike = (val) => !isNaN(Date.parse(val)) && isNaN(Number(val));
|
|
15
|
-
exports.isDateLike = isDateLike;
|
|
16
|
-
function TableRow({ config, data, actions, count }) {
|
|
17
|
-
return ((0, jsx_runtime_1.jsxs)(flex_1.RowBox, { style: s.container, children: [Object.keys(config).map((key, i) => {
|
|
18
|
-
if (key === "actions" && actions) {
|
|
19
|
-
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) => {
|
|
20
|
-
const variantStyles = action.variant === "error" ? "bg-error/10 text-error hover:bg-error/20" :
|
|
21
|
-
action.variant === "accent" ? "bg-accent/10 text-accent hover:bg-accent/20" :
|
|
22
|
-
"bg-surface-light text-primary hover:bg-surface-light/80";
|
|
23
|
-
return ((0, jsx_runtime_1.jsx)(_1.Button, { size: "xs", variant: "surface", style: action.style, icon: action.icon, action: () => action.handler(data) }, actionIdx));
|
|
24
|
-
}) }) }, i));
|
|
25
|
-
}
|
|
26
|
-
const rawValue = data[key];
|
|
27
|
-
const value = rawValue === 0 ? 0 : (data[key] ?? "N/A");
|
|
28
|
-
const options = config[key];
|
|
29
|
-
let cellValue = value;
|
|
30
|
-
if (options && options.pad)
|
|
31
|
-
cellValue = (0, ts_helper_kit_1.padNum)(cellValue, options.pad);
|
|
32
|
-
else if ((0, exports.isDateLike)(cellValue.toString()))
|
|
33
|
-
cellValue = new Date(cellValue.toString()).toLocaleDateString();
|
|
34
|
-
return ((0, jsx_runtime_1.jsxs)(flex_1.RowBox, { style: s.cell, children: [options && options?.link && (0, jsx_runtime_1.jsx)("a", { className: "text-primary underline duration-200 hover:text-accent", href: options.link?.replace("[x]", rawValue), children: cellValue }), options && !options?.link && ((0, jsx_runtime_1.jsx)("span", { className: "truncate", children: value === true ? (0, jsx_runtime_1.jsx)(check_circle_svg_1.default, { className: "text-success" }) : value === false ? (0, jsx_runtime_1.jsx)(x_circle_svg_1.default, { className: "text-error" }) : (typeof cellValue === "object" ? JSON.stringify(cellValue) : cellValue) }))] }, i));
|
|
35
|
-
}), count > 1 && ((0, jsx_runtime_1.jsx)("span", { className: "absolute top-0 left-0 pb-px px-1 bg-surface-light border-b border-r rounded-br border-border-light font-bold font-mono text-px text-accent", children: count }))] }));
|
|
36
|
-
}
|
|
37
|
-
const s = {
|
|
38
|
-
container: "relative w-full px-4 py-4 even:bg-surface border-b border-border last:border-b-0",
|
|
39
|
-
cell: "flex-1 first-of-type:justify-start justify-center last-of-type:justify-end items-center gap-2 font-mono overflow-hidden"
|
|
40
|
-
};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { CellValue } from "./row";
|
|
2
|
-
type SortDirection = "asc" | "desc";
|
|
3
|
-
export declare function useSort<T extends Record<string, CellValue>>(items: T[]): {
|
|
4
|
-
sortedItems: T[];
|
|
5
|
-
sortBy: (col: keyof T | null) => void;
|
|
6
|
-
toggleSortDirection: () => void;
|
|
7
|
-
sortColumn: keyof T | null;
|
|
8
|
-
sortDirection: SortDirection;
|
|
9
|
-
};
|
|
10
|
-
export {};
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.useSort = useSort;
|
|
4
|
-
const react_1 = require("react");
|
|
5
|
-
function useSort(items) {
|
|
6
|
-
const [column, setColumn] = (0, react_1.useState)(null);
|
|
7
|
-
const [isDescending, setDescending] = (0, react_1.useState)(true);
|
|
8
|
-
const sortBy = (col) => {
|
|
9
|
-
if (col === column)
|
|
10
|
-
return setColumn(null);
|
|
11
|
-
setDescending(true);
|
|
12
|
-
setColumn(col);
|
|
13
|
-
};
|
|
14
|
-
const sortedItems = (0, react_1.useMemo)(() => {
|
|
15
|
-
if (!column)
|
|
16
|
-
return items;
|
|
17
|
-
return [...items].sort((a, b) => {
|
|
18
|
-
const valA = a[column];
|
|
19
|
-
const valB = b[column];
|
|
20
|
-
if (valA === undefined || valA === null)
|
|
21
|
-
return 1;
|
|
22
|
-
if (valB === undefined || valB === null)
|
|
23
|
-
return -1;
|
|
24
|
-
let comparison = 0;
|
|
25
|
-
// 2. Date detection & comparison
|
|
26
|
-
const isDateLike = (val) => val instanceof Date ||
|
|
27
|
-
(typeof val === "string" && !isNaN(Date.parse(val)) && isNaN(Number(val)));
|
|
28
|
-
if (isDateLike(valA) && isDateLike(valB)) {
|
|
29
|
-
const timeA = new Date(valA).getTime();
|
|
30
|
-
const timeB = new Date(valB).getTime();
|
|
31
|
-
// Swap this to timeB - timeA so the base comparison defaults to descending
|
|
32
|
-
comparison = timeA - timeB;
|
|
33
|
-
}
|
|
34
|
-
// 3. Number comparison
|
|
35
|
-
else if (typeof valA === "number" && typeof valB === "number")
|
|
36
|
-
comparison = valA - valB;
|
|
37
|
-
// 4. String / Fallback comparison (case-insensitive)
|
|
38
|
-
else {
|
|
39
|
-
const strA = String(valA).toLowerCase();
|
|
40
|
-
const strB = String(valB).toLowerCase();
|
|
41
|
-
comparison = strA.localeCompare(strB);
|
|
42
|
-
}
|
|
43
|
-
return isDescending ? -comparison : comparison;
|
|
44
|
-
});
|
|
45
|
-
}, [items, column, isDescending]);
|
|
46
|
-
return {
|
|
47
|
-
sortedItems,
|
|
48
|
-
sortBy,
|
|
49
|
-
toggleSortDirection: () => setDescending(p => !p),
|
|
50
|
-
sortColumn: column,
|
|
51
|
-
sortDirection: isDescending ? "desc" : "asc"
|
|
52
|
-
};
|
|
53
|
-
}
|
package/dist/ui/button/_.d.ts
DELETED
package/dist/ui/button/_.js
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.CopyButton = exports.Button = void 0;
|
|
7
|
-
var normal_1 = require("./normal");
|
|
8
|
-
Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(normal_1).default; } });
|
|
9
|
-
var copy_1 = require("./copy");
|
|
10
|
-
Object.defineProperty(exports, "CopyButton", { enumerable: true, get: function () { return __importDefault(copy_1).default; } });
|
package/dist/ui/button/copy.d.ts
DELETED
package/dist/ui/button/copy.js
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.default = CopyButton;
|
|
7
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
-
const normal_1 = require("./normal");
|
|
9
|
-
const copy_svg_1 = __importDefault(require("../../assets/icons/copy.svg"));
|
|
10
|
-
function CopyButton({ value, action, children, ...props }) {
|
|
11
|
-
const submit = async () => {
|
|
12
|
-
await navigator.clipboard.writeText(value);
|
|
13
|
-
await action?.();
|
|
14
|
-
};
|
|
15
|
-
return ((0, jsx_runtime_1.jsxs)(normal_1.Button, { action: submit, ...props, children: [(0, jsx_runtime_1.jsx)(copy_svg_1.default, {}), children] }));
|
|
16
|
-
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { ReactNode } from "react";
|
|
2
|
-
import type { Component } from "../../utils";
|
|
3
|
-
export type ButtonProps = Component & {
|
|
4
|
-
size?: "xs" | "sm" | "md" | "lg";
|
|
5
|
-
variant?: "surface" | "accent" | "outline" | "ghost" | "error" | "future";
|
|
6
|
-
icon?: ReactNode;
|
|
7
|
-
action?: () => void;
|
|
8
|
-
disabled?: boolean;
|
|
9
|
-
};
|
|
10
|
-
export declare function Button({ style, size, variant, icon, children, disabled, action }: ButtonProps): import("react").JSX.Element;
|
|
11
|
-
export default Button;
|
package/dist/ui/button/normal.js
DELETED
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.Button = Button;
|
|
7
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
-
const react_1 = require("react");
|
|
9
|
-
const style_1 = require("@bouko/style");
|
|
10
|
-
const tailwind_variants_1 = require("tailwind-variants");
|
|
11
|
-
const spinner_svg_1 = __importDefault(require("../../assets/icons/spinner.svg"));
|
|
12
|
-
function Button({ style, size, variant, icon, children, disabled, action }) {
|
|
13
|
-
const [isLoading, setLoading] = (0, react_1.useState)(false);
|
|
14
|
-
const handleClick = async () => {
|
|
15
|
-
if (action) {
|
|
16
|
-
setLoading(true);
|
|
17
|
-
await action();
|
|
18
|
-
setLoading(false);
|
|
19
|
-
}
|
|
20
|
-
};
|
|
21
|
-
return ((0, jsx_runtime_1.jsxs)("button", { className: (0, style_1.cn)(styles({ size, variant }), style), onClick: handleClick, disabled: disabled || isLoading, children: [icon && isLoading
|
|
22
|
-
? (0, jsx_runtime_1.jsx)(spinner_svg_1.default, { className: "animate-spin" })
|
|
23
|
-
: icon, children] }));
|
|
24
|
-
}
|
|
25
|
-
const styles = (0, tailwind_variants_1.tv)({
|
|
26
|
-
base: "relative flex justify-center items-center border outline-none rounded font-semibold duration-200 cursor-pointer disabled:cursor-not-allowed hover:brightness-115",
|
|
27
|
-
defaultVariants: {
|
|
28
|
-
size: "md",
|
|
29
|
-
variant: "surface"
|
|
30
|
-
},
|
|
31
|
-
variants: {
|
|
32
|
-
size: {
|
|
33
|
-
xs: "gap-1 px-2 py-2 text-sm rounded-full",
|
|
34
|
-
sm: "gap-2 px-3 py-2 text-xs sm:text-sm",
|
|
35
|
-
md: "gap-2 px-4 py-2 text-xs sm:text-sm",
|
|
36
|
-
lg: "gap-3 px-5 py-3 text-base sm:text-lg"
|
|
37
|
-
},
|
|
38
|
-
variant: {
|
|
39
|
-
surface: "bg-surface border-border text-primary",
|
|
40
|
-
accent: "bg-accent border-accent-dark text-background",
|
|
41
|
-
outline: "bg-transparent border-accent text-accent",
|
|
42
|
-
ghost: "bg-transparent border-transparent text-primary",
|
|
43
|
-
error: "bg-error border-error-dark text-background",
|
|
44
|
-
future: "backdrop-blur-sm test-button"
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
});
|
|
48
|
-
exports.default = Button;
|
package/dist/ui/date/_.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as TimeAgo } from "./time-ago";
|
package/dist/ui/date/_.js
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.TimeAgo = void 0;
|
|
7
|
-
var time_ago_1 = require("./time-ago");
|
|
8
|
-
Object.defineProperty(exports, "TimeAgo", { enumerable: true, get: function () { return __importDefault(time_ago_1).default; } });
|
package/dist/ui/date/time-ago.js
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.default = TimeAgo;
|
|
7
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
-
const react_time_ago_1 = __importDefault(require("react-time-ago"));
|
|
9
|
-
function TimeAgo({ style, prefix, date }) {
|
|
10
|
-
if (!date)
|
|
11
|
-
return null;
|
|
12
|
-
return ((0, jsx_runtime_1.jsxs)("span", { className: style, children: [(0, jsx_runtime_1.jsx)("span", { className: "mr-1", children: prefix }), (0, jsx_runtime_1.jsx)(react_time_ago_1.default, { date: date, timeStyle: "mini-minute-now" })] }));
|
|
13
|
-
}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
"use strict";
|
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.default = Dropdown;
|
|
5
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
-
const react_1 = require("react");
|
|
7
|
-
const framer_motion_1 = require("framer-motion");
|
|
8
|
-
function Dropdown({ options, children }) {
|
|
9
|
-
const [isOpen, setOpen] = (0, react_1.useState)(false);
|
|
10
|
-
const boom = (action) => {
|
|
11
|
-
action();
|
|
12
|
-
setOpen(false);
|
|
13
|
-
};
|
|
14
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: styles.container, children: [(0, jsx_runtime_1.jsx)("div", { onClick: () => setOpen(true), children: children }), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: isOpen && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: styles.dropdown, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: options.map(({ label, action }, i) => ((0, jsx_runtime_1.jsx)("div", { className: "cursor-pointer duration-200 hover:brightness-115", onClick: () => boom(action), children: label }, i))) }, "dropdown")) })] }));
|
|
15
|
-
}
|
|
16
|
-
const styles = {
|
|
17
|
-
container: "relative shrink-0",
|
|
18
|
-
subcontainer: "flex flex-col gap-1 w-full",
|
|
19
|
-
label: "text-xs text-slate-600",
|
|
20
|
-
trigger: "flex justify-between items-center px-3 py-2 bg-slate-200/50 hover:bg-slate-200/80 border border-slate-300 outline-blue-500 rounded text-sm duration-200 cursor-pointer",
|
|
21
|
-
dropdown: "absolute mt-2 z-50 flex flex-col items-end justify-end gap-1 w-full bg-slate-950 rounded border border-border-dark p-3 pr-4 text-sm max-h-46 overflow-y-auto"
|
|
22
|
-
};
|
package/dist/ui/fade/_.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as CircleFade } from "./circle";
|
package/dist/ui/fade/_.js
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.CircleFade = void 0;
|
|
7
|
-
var circle_1 = require("./circle");
|
|
8
|
-
Object.defineProperty(exports, "CircleFade", { enumerable: true, get: function () { return __importDefault(circle_1).default; } });
|
package/dist/ui/fade/circle.d.ts
DELETED
package/dist/ui/fade/circle.js
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.default = CircleFade;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const style_1 = require("@bouko/style");
|
|
6
|
-
function CircleFade({ className, style }) {
|
|
7
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: (0, style_1.cn)("absolute size-24 bg-radial from-background", className), style: style }));
|
|
8
|
-
}
|
package/dist/ui/heading/_.d.ts
DELETED
package/dist/ui/heading/_.js
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.PageHeading = exports.Heading = void 0;
|
|
7
|
-
var normal_1 = require("./normal");
|
|
8
|
-
Object.defineProperty(exports, "Heading", { enumerable: true, get: function () { return __importDefault(normal_1).default; } });
|
|
9
|
-
var page_1 = require("./page");
|
|
10
|
-
Object.defineProperty(exports, "PageHeading", { enumerable: true, get: function () { return __importDefault(page_1).default; } });
|