uibee 2.9.3 → 2.10.0

package/dist/src/components/buttons/button.d.ts

@@ -5,9 +5,9 @@ type ButtonProps = {
     icon: string | JSX.Element;
     path?: string;
     type?: 'button' | 'submit' | 'reset';
-    color?: 'primary' | 'secondary';
+    variant?: 'primary' | 'secondary' | 'warning' | 'danger' | 'success' | 'info';
     onClick?: (_: object | string) => void;
     disabled?: boolean;
 };
-export default function Button({ text, className, icon, path, color, type, onClick, disabled }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export default function Button({ text, className, icon, path, variant, type, onClick, disabled }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/components/buttons/button.js

@@ -1,9 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from 'next/link';
-export default function Button({ text, className, icon, path, color, type, onClick, disabled }) {
-    const bg = color === 'secondary'
-        ? 'bg-login-500/70 outline-login-500 hover:bg-login-500/90'
-        : 'bg-login/70 outline-login hover:bg-login/90';
+const variants = {
+    primary: 'bg-login/70 outline-login hover:bg-login/90',
+    secondary: 'bg-login-500/70 outline-login-500 hover:bg-login-500/90',
+    warning: 'bg-yellow-500/70 outline-yellow-500 hover:bg-yellow-500/90',
+    danger: 'bg-red-600/70 outline-red-600 hover:bg-red-600/90',
+    success: 'bg-green-600/70 outline-green-600 hover:bg-green-600/90',
+    info: 'bg-blue-600/70 outline-blue-600 hover:bg-blue-600/90'
+};
+export default function Button({ text, className, icon, path, variant = 'primary', type, onClick, disabled }) {
+    const bg = variants[variant];
     if (!path) {
         return (_jsxs("button", { type: type || 'button', disabled: disabled, onClick: onClick, "aria-label": text, className: `
                     ${bg} cursor-pointer px-4 rounded-md min-h-8 h-8 flex

package/dist/src/components/table/body.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { Column } from 'uibee/components';
+type BodyProps = {
+    list: object[];
+    columns: Column[];
+    menuItems?: (data: object, id: string) => React.ReactNode;
+    redirectPath?: string | {
+        path: string;
+        key?: string;
+    };
+    variant?: 'default' | 'minimal';
+    idKey?: string;
+};
+export default function Body({ list, columns, menuItems, redirectPath, variant, idKey }: BodyProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/table/body.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EllipsisVertical } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { useState, useRef, useEffect } from 'react';
+import useClickOutside from '../../hooks/useClickOutside';
+import Menu from './menu';
+import { formatValue } from './format';
+export default function Body({ list, columns, menuItems, redirectPath, variant = 'default', idKey }) {
+    const [openMenuId, setOpenMenuId] = useState(null);
+    const [anchor, setAnchor] = useState(null);
+    const router = useRouter();
+    const menuRef = useRef(null);
+    const tbodyRef = useRef(null);
+    const menuWasOpenOnMouseDown = useRef(false);
+    useClickOutside(menuRef, () => setOpenMenuId(null));
+    useEffect(() => {
+        const el = tbodyRef.current;
+        if (!el)
+            return;
+        const close = () => setOpenMenuId(null);
+        el.addEventListener('scroll', close);
+        return () => el.removeEventListener('scroll', close);
+    }, []);
+    return (_jsx("tbody", { ref: tbodyRef, className: `
+                divide-login-600 block overflow-y-auto flex-1 min-h-0
+                ${variant === 'default' ? 'bg-login-500/50 divide-y' : 'bg-transparent divide-y'}
+            `, children: list.map((item, index) => {
+            const itemRecord = item;
+            let id = '';
+            if (idKey && itemRecord[idKey] !== undefined) {
+                id = String(itemRecord[idKey]);
+            }
+            else if (itemRecord['id'] !== undefined) {
+                id = String(itemRecord['id']);
+            }
+            else {
+                const firstKey = columns[0]?.key || Object.keys(itemRecord)[0];
+                id = String(itemRecord[firstKey]);
+            }
+            const redirectConfig = (typeof redirectPath === 'object' && redirectPath) ? redirectPath : { path: redirectPath };
+            const redirectId = redirectConfig.key ? String(itemRecord[redirectConfig.key]) : id;
+            const menuButtonColors = variant === 'minimal'
+                ? {
+                    active: 'bg-login-600 text-login-100',
+                    inactive: 'hover:bg-login-600 text-login-200 hover:text-login-100'
+                }
+                : {
+                    active: 'bg-login-400 text-login-100',
+                    inactive: 'hover:bg-login-400 text-login-200 hover:text-login-100'
+                };
+            const buttonClass = openMenuId === id ? menuButtonColors.active : menuButtonColors.inactive;
+            return (_jsxs("tr", { className: `
+                            flex w-full group/row transition-colors 
+                            ${redirectConfig.path ? 'cursor-pointer' : ''}
+                            ${variant === 'default' && redirectConfig.path ? 'hover:bg-login-600/30' : ''}
+                            ${variant === 'minimal' ? 'hover:bg-white/5 border-b border-login-600/50 last:border-0' : ''}
+                        `, onMouseDown: () => {
+                    menuWasOpenOnMouseDown.current = openMenuId !== null;
+                }, onClick: () => {
+                    if (menuWasOpenOnMouseDown.current) {
+                        menuWasOpenOnMouseDown.current = false;
+                        return;
+                    }
+                    if (redirectConfig.path) {
+                        if (redirectConfig.path.includes('?')) {
+                            router.push(`${redirectConfig.path}${redirectId}`);
+                        }
+                        else {
+                            router.push(`${redirectConfig.path}/${redirectId}`);
+                        }
+                    }
+                }, onContextMenu: (e) => {
+                    e.preventDefault();
+                    setAnchor({ top: e.clientY, right: window.innerWidth - e.clientX });
+                    setOpenMenuId(id);
+                }, children: [columns.map((col) => {
+                        const val = itemRecord[col.key];
+                        const value = val;
+                        let badgeClass = '';
+                        if (col.highlight) {
+                            const highlightKey = String(value);
+                            const colorName = col.highlight[highlightKey] || col.highlight.default;
+                            if (colorName) {
+                                switch (colorName) {
+                                    case 'green':
+                                        badgeClass = 'bg-green-500/20 text-green-400';
+                                        break;
+                                    case 'yellow':
+                                        badgeClass = 'bg-yellow-500/20 text-yellow-400';
+                                        break;
+                                    case 'red':
+                                        badgeClass = 'bg-red-500/20 text-red-400';
+                                        break;
+                                    case 'blue':
+                                        badgeClass = 'bg-blue-500/20 text-blue-400';
+                                        break;
+                                    case 'gray':
+                                        badgeClass = 'bg-gray-500/20 text-gray-400';
+                                        break;
+                                }
+                                badgeClass += ' px-2 py-1 rounded';
+                            }
+                        }
+                        return (_jsx("td", { className: `
+                                        flex-1 px-6 py-4 whitespace-nowrap text-sm min-w-40 flex items-center text-login-100
+                                        ${variant === 'minimal' ? 'py-3' : ''}
+                                    `, children: _jsx("div", { className: 'relative', children: _jsx("h1", { className: badgeClass, children: formatValue(col.key, value) }) }) }, col.key));
+                    }), menuItems && (_jsx("td", { className: 'shrink-0 w-16 flex flex-row justify-end p-2 px-4\n                                    whitespace-nowrap text-right text-sm font-medium', children: _jsxs("div", { className: 'relative', children: [_jsx("button", { type: 'button', className: `p-1.5 rounded flex items-start justify-center transition-colors ${buttonClass}`, onMouseDown: (e) => e.nativeEvent.stopImmediatePropagation(), onClick: (e) => {
+                                        e.stopPropagation();
+                                        const rect = e.currentTarget.getBoundingClientRect();
+                                        const coords = { top: rect.bottom + 4, right: window.innerWidth - rect.right };
+                                        setAnchor(openMenuId === id ? null : coords);
+                                        setOpenMenuId(openMenuId === id ? null : id);
+                                    }, children: _jsx("span", { className: 'text-xl leading-none select-none', children: _jsx(EllipsisVertical, { className: 'h-5 w-5' }) }) }), openMenuId === id && anchor && (_jsx(Menu, { ref: menuRef, anchor: anchor, onClose: () => setOpenMenuId(null), children: menuItems?.(item, id) }))] }) }))] }, index));
+        }) }));
+}

package/dist/src/components/table/format.d.ts

@@ -0,0 +1 @@
+export declare function formatValue(key: string, value: string | number): string | number;

package/dist/src/components/table/format.js

@@ -0,0 +1,27 @@
+const nullableTimeKeys = ['date', 'last_sent', 'time'];
+const ISODateTimeReg = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/;
+const ISODateReg = /^\d{4}-\d{2}-\d{2}$/;
+const ISOTimeReg = /^\d{2}:\d{2}(:\d{2})?$/;
+const OsloTZ = { timeZone: 'Europe/Oslo', second: undefined };
+const OsloTime = { ...OsloTZ, hour: '2-digit', minute: '2-digit' };
+const OsloDateTime = { ...OsloTime, year: 'numeric', month: '2-digit', day: '2-digit' };
+export function formatValue(key, value) {
+    if (nullableTimeKeys.includes(key) && !value) {
+        return 'Never';
+    }
+    if (typeof value === 'string') {
+        if (ISODateTimeReg.test(value)) {
+            return new Date(value).toLocaleString('nb-NO', OsloDateTime);
+        }
+        if (ISODateReg.test(value)) {
+            return new Date(value).toLocaleDateString('nb-NO', OsloTZ);
+        }
+        if (ISOTimeReg.test(value)) {
+            return new Date(`1970-01-01T${value}`).toLocaleTimeString('nb-NO', OsloTime);
+        }
+    }
+    if (key.includes('capacity')) {
+        return value === 0 ? 'Unlimited' : value;
+    }
+    return value;
+}

package/dist/src/components/table/header.d.ts

@@ -0,0 +1,8 @@
+import type { Column } from 'uibee/components';
+type HeaderProps = {
+    columns: Column[];
+    hideMenu?: boolean;
+    variant?: 'default' | 'minimal';
+};
+export default function Header({ columns, hideMenu, variant }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/table/header.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+export default function Header({ columns, hideMenu, variant = 'default' }) {
+    const [column, setColumn] = useState(columns[0]?.key || '');
+    const [order, setOrder] = useState('asc');
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    useEffect(() => {
+        const params = new URLSearchParams(searchParams.toString());
+        if (searchParams.get('order') !== order ||
+            searchParams.get('column') !== column) {
+            params.set('order', order);
+            params.set('column', column);
+            params.set('page', '1');
+            router.push(`${pathname}?${params.toString()}`);
+        }
+    }, [order, column, pathname, router, searchParams]);
+    function handleChange(key) {
+        setColumn(key);
+        setOrder((prev) => (key === column && prev === 'asc' ? 'desc' : 'asc'));
+    }
+    return (_jsx("thead", { className: `
+            block w-full
+            ${variant === 'default' ? 'bg-login-700' : 'bg-transparent border-b border-login-600'}
+        `, children: _jsxs("tr", { className: 'flex w-full divide-x divide-transparent', children: [columns.map((col) => {
+                    const key = col.key;
+                    const value = col.label || (key.length < 3
+                        ? key.toUpperCase()
+                        : `${key[0].toUpperCase()}${key
+                            .slice(1)
+                            .replaceAll('_', ' ')}`);
+                    return (_jsx("th", { className: `
+                                flex-1 px-6 py-3 text-xs font-medium uppercase tracking-wider text-left
+                                ${variant === 'default' ? 'text-login-200' : 'text-login-100'}
+                            `, children: _jsxs("button", { className: 'flex flex-row items-center gap-2 group uppercase', onClick: () => handleChange(key), children: [value, _jsx("span", { className: 'flex flex-col', children: column === key ? (order === 'asc' ? (_jsx(ChevronUp, { className: 'h-4 w-4' })) : (_jsx(ChevronDown, { className: 'h-4 w-4' }))) : (_jsx(ChevronUp, { className: 'h-4 w-4 stroke-login-200 opacity-0 group-hover:opacity-100' })) })] }) }, key));
+                }), !hideMenu && _jsx("th", { className: 'shrink-0 w-16 px-6 py-3' })] }) }));
+}

package/dist/src/components/table/menu.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export default function Menu({ ref, children, anchor, onClose }: {
+    ref: React.RefObject<HTMLDivElement | null>;
+    children: React.ReactNode;
+    anchor: {
+        top: number;
+        right: number;
+    };
+    onClose?: () => void;
+}): React.ReactPortal;
+export declare function MenuButton({ icon, text, hotKey, onClick, className, }: {
+    icon: React.ReactNode;
+    text: string;
+    hotKey?: string;
+    onClick: () => void;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/table/menu.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { createContext, useContext, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+const MenuContext = createContext({});
+export default function Menu({ ref, children, anchor, onClose }) {
+    return createPortal(_jsx("div", { ref: ref, style: { top: anchor.top, right: anchor.right }, className: 'fixed bg-login-500 border border-login-600 rounded-lg shadow-lg z-9999 w-44', children: _jsx(MenuContext.Provider, { value: { onClose }, children: children }) }), document.body);
+}
+export function MenuButton({ icon, text, hotKey, onClick, className, }) {
+    const { onClose } = useContext(MenuContext);
+    useEffect(() => {
+        if (!hotKey)
+            return;
+        function handleKeyDown(e) {
+            if (e.key.toLowerCase() === hotKey.toLowerCase()) {
+                e.preventDefault();
+                onClick();
+                onClose?.();
+            }
+        }
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [hotKey, onClick, onClose]);
+    return (_jsxs("button", { onClick: () => {
+            onClick();
+            onClose?.();
+        }, className: `flex items-center justify-between w-full px-3 py-2 text-sm hover:bg-login-600 cursor-pointer
+                ${className || ''}
+            `, children: [_jsxs("div", { className: 'flex items-center', children: [React.cloneElement(icon, { className: 'w-4 h-4 mr-2' }), text] }), _jsx("span", { className: 'text-xs opacity-50 font-mono', children: hotKey })] }));
+}

package/dist/src/components/table/pagination.d.ts

@@ -0,0 +1,6 @@
+type PaginationProps = {
+    pageSize?: number;
+    totalRows?: number;
+};
+export default function Pagination({ pageSize, totalRows, }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/table/pagination.js

@@ -0,0 +1,86 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+export default function Pagination({ pageSize = 10, totalRows, }) {
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const rawPage = parseInt(searchParams.get('page') || '1', 10);
+    const initialPage = Math.max(1, Number.isNaN(rawPage) ? 1 : rawPage);
+    const [current, setCurrent] = useState(initialPage);
+    useEffect(() => {
+        const raw = parseInt(searchParams.get('page') || '1', 10);
+        const p = Math.max(1, Number.isNaN(raw) ? 1 : raw);
+        const computedTotalPages = Math.max(1, Math.ceil(totalRows !== undefined && pageSize > 0
+            ? totalRows / pageSize
+            : 1));
+        setCurrent(Math.max(1, Math.min(computedTotalPages, p)));
+    }, [searchParams, totalRows, pageSize]);
+    function updateQuery(p) {
+        const params = new URLSearchParams(searchParams.toString());
+        params.set('page', String(p));
+        router.push(`${pathname}?${params.toString()}`);
+    }
+    function goPrevious() {
+        if (current <= 1)
+            return;
+        const next = current - 1;
+        setCurrent(next);
+        updateQuery(next);
+    }
+    const totalPages = Math.max(1, Math.ceil(totalRows !== undefined && pageSize > 0
+        ? totalRows / pageSize
+        : 1));
+    function goNext() {
+        if (current >= totalPages)
+            return;
+        const next = current + 1;
+        setCurrent(next);
+        updateQuery(next);
+    }
+    function setPage(p) {
+        if (p === current)
+            return;
+        setCurrent(p);
+        updateQuery(p);
+    }
+    function getPages(curr, total) {
+        const delta = 2;
+        const left = Math.max(1, curr - delta);
+        const right = Math.min(total, curr + delta);
+        const pages = [];
+        if (left > 1) {
+            pages.push(1);
+            if (left > 2)
+                pages.push('...');
+        }
+        for (let i = left; i <= right; i++)
+            pages.push(i);
+        if (right < total) {
+            if (right < total - 1)
+                pages.push('...');
+            pages.push(total);
+        }
+        return pages;
+    }
+    const pages = getPages(current, totalPages);
+    const start = Math.max(1, (current - 1) * pageSize + 1);
+    const end = Math.min(current * pageSize, totalRows !== undefined ? totalRows : current * pageSize);
+    return (_jsxs("div", { className: 'flex items-center justify-between w-full pt-4', children: [_jsx("div", { className: 'text-sm /70', children: totalRows !== undefined ? (totalRows === 0 ? (_jsx("span", { children: "Showing 0 results" })) : (_jsxs("span", { children: ["Showing ", start, " to ", end, " of ", totalRows, " results"] }))) : null }), _jsxs("div", { className: 'flex items-center gap-3', children: [_jsx("button", { type: 'button', onClick: goPrevious, disabled: current <= 1, className: `
+                        flex items-center gap-2 p-1 rounded-lg
+                        bg-login-50/5 hover:bg-login-500 disabled:opacity-50
+                        border-[0.10rem] border-login-200 text-sm
+                    `, children: _jsx(ChevronLeft, { className: 'h-5 w-5' }) }), _jsx("nav", { className: 'flex items-center gap-1', "aria-label": 'Pagination', children: pages.map((p, i) => typeof p === 'string' ? (_jsx("span", { className: 'px-3 py-1 text-sm', children: p }, `e-${i}`)) : (_jsx("button", { type: 'button', onClick: () => setPage(p), "aria-current": p === current ? 'page' : undefined, className: `
+                                    px-3 py-1 rounded-lg text-sm
+                                    border-[0.10rem] ${p === current
+                                ? 'bg-login-50/5 border-login-50'
+                                : `bg-login-50/0 border-login-200
+                                    'hover:bg-login-400`}
+                                `, children: p }, p))) }), _jsx("button", { type: 'button', onClick: goNext, disabled: current >= totalPages, className: `
+                        flex items-center gap-2 p-1 rounded-lg bg-login-50/5
+                        hover:bg-login-500 disabled:opacity-50 select-none
+                        border-[0.10rem] border-login-200 text-sm
+                    `, children: _jsx(ChevronRight, { className: 'h-5 w-5' }) })] })] }));
+}

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

@@ -0,0 +1,14 @@
+import type { Column } from 'uibee/components';
+type TableProps = {
+    data: object[];
+    columns: Column[];
+    menuItems?: (data: object, id: string) => React.ReactNode;
+    redirectPath?: string | {
+        path: string;
+        key?: string;
+    };
+    variant?: 'default' | 'minimal';
+    idKey?: string;
+};
+export default function Table({ data, columns, menuItems, redirectPath, variant, idKey }: TableProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/table/table.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Body from './body';
+import Header from './header';
+export default function Table({ data, columns, menuItems, redirectPath, variant = 'default', idKey }) {
+    if (data.length === 0) {
+        return _jsx("div", { className: 'p-4 text-center text-login-200', children: "No data found" });
+    }
+    return (_jsx("div", { className: `
+            flex-1 flex flex-col min-h-0 overflow-x-auto h-full w-full
+            ${variant === 'default' ? 'bg-login-500/50 rounded-lg shadow border border-login-600' : ''}
+            ${variant === 'minimal' ? 'bg-transparent' : ''}
+        `, children: _jsxs("table", { className: 'min-w-full w-max divide-y divide-login-600 flex flex-col flex-1 min-h-0', children: [_jsx(Header, { columns: columns, hideMenu: !menuItems, variant: variant }), _jsx(Body, { list: data, columns: columns, menuItems: menuItems, redirectPath: redirectPath, variant: variant, idKey: idKey })] }) }));
+}