@hrbolek/uoisfrontend-template 0.6.0

package/src/Base/Components/Table.jsx

@@ -0,0 +1,275 @@
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Link } from "./Link";
+import { CreateButton, CreateLink } from "../Mutations/Create";
+import { UpdateButton, UpdateLink } from "../Mutations/Update";
+import { DeleteButton } from "../Mutations/Delete";
+import { r } from "happy-dom/lib/PropertySymbol";
+
+const CellId = ({ row, name }) => (
+    <td key={name}>
+        <Link item={row}>{row?.id || "Data Error"}</Link>
+    </td>
+)
+
+export const CellName = ({ row, name }) => (
+    <td key={name}>
+        <Link item={row} />
+    </td>
+)
+
+const CellDefault = ({ row, name }) => {
+    const value = row?.[name] ?? ""
+
+    const idpos = name.indexOf("Id")
+    if (idpos === -1) {
+        return <td key={name}>{typeof value === "object" ? `${value}` : (value || "")}</td>
+    }
+
+    const scalarname = name.replace("Id", "")
+    const { id, __typename } = row?.[scalarname] || {}
+
+    if (id && __typename && id == value) {
+        return (
+            <td key={name}>
+                <Link item={row?.[scalarname]}>{value || ""}</Link>
+            </td>
+        )
+    }
+
+    return <td key={name}>{typeof value === "object" ? `${value}` : (value || "")}</td>
+}
+
+// 2) Funkce, která z dat vyrobí table_def
+export const buildTableDef = (data) => {
+    const row = data?.[0] ?? {}
+    const priority = ["__typename", "id", "name"]
+
+    const attribute_names = Object.keys(row).filter((attribute_name) => {
+        const v = row[attribute_name]
+        if (Array.isArray(v)) return false
+        if (typeof v === "object" && v !== null) return false
+        return true
+    })
+
+    const columns = [
+        ...priority.filter((a) => attribute_names.includes(a)),
+        ...attribute_names.filter((a) => !priority.includes(a)),
+    ]
+
+    // table_def: colname -> { label, component }
+    const result = Object.fromEntries(
+        columns.map((name) => {
+            let component = CellDefault
+            if (name === "id") component = CellId
+            if (name === "name") component = CellName
+
+            return [
+                name,
+                {
+                    label: name,        // tady si můžeš dát hezčí label
+                    component,          // React komponenta pro buňku
+                },
+            ]
+        })
+    )
+
+    result["tools"] = {
+        label: "Nástroje",
+        component: ({row}) => <td><KebabMenu actions={[
+            // { label: "Editovat", onClick: () => console.log("edit") },
+            // { label: "Smazat", onClick: () => console.log("delete") },
+            // { label: "Detail", onClick: () => console.log("detail") },
+            { children: <Link 
+                    className="btn btn-sm btn-outline-secondary border-0 text-start w-100"
+                    item={row}
+                >Detail</Link> },
+            { children: <UpdateLink 
+                className="btn btn-sm btn-outline-secondary border-0 text-start w-100"
+                item={row}
+                action="edit"
+                >Editovat</UpdateLink> },
+            { children: <UpdateButton 
+                    className="btn btn-sm btn-outline-secondary border-0 text-start w-100"
+                    item={row}
+                >Editovat (zde)</UpdateButton> },
+            { children: <DeleteButton 
+                className="btn btn-sm btn-outline-secondary border-0 text-start w-100"  
+                >Smazat</DeleteButton> },
+        ]} /></td>,
+    }
+
+    return result
+}
+
+
+export const KebabMenu = ({ actions = [] }) => {
+    const [open, setOpen] = useState(false);
+    const btnRef = useRef(null);
+    const menuRef = useRef(null);
+    const [pos, setPos] = useState({ left: 0, top: 0 });
+
+    const close = () => setOpen(false);
+
+    // zavření při kliku mimo (funguje i s portalem)
+    useEffect(() => {
+        if (!open) return;
+
+        const onMouseDown = (e) => {
+            const btn = btnRef.current;
+            const menu = menuRef.current;
+            if (!btn || !menu) return;
+
+            if (btn.contains(e.target)) return;
+            if (menu.contains(e.target)) return;
+
+            close();
+        };
+
+        const onKeyDown = (e) => {
+            if (e.key === "Escape") close();
+        };
+
+        document.addEventListener("mousedown", onMouseDown);
+        document.addEventListener("keydown", onKeyDown);
+        return () => {
+            document.removeEventListener("mousedown", onMouseDown);
+            document.removeEventListener("keydown", onKeyDown);
+        };
+    }, [open]);
+
+    // spočítat pozici po otevření + při scroll/resize
+    useLayoutEffect(() => {
+        if (!open) return;
+
+        const update = () => {
+            const btn = btnRef.current;
+            if (!btn) return;
+
+            const r = btn.getBoundingClientRect();
+            // menu zarovnané doprava k tlačítku, pod tlačítkem
+            setPos({
+                left: r.right + window.scrollX,
+                top: r.bottom + window.scrollY,
+            });
+        };
+
+        update();
+
+        window.addEventListener("resize", update);
+        // scroll na capture, aby to fungovalo i při scrollu uvnitř wrapperů
+        window.addEventListener("scroll", update, true);
+
+        return () => {
+            window.removeEventListener("resize", update);
+            window.removeEventListener("scroll", update, true);
+        };
+    }, [open]);
+
+    const menu = open ? (
+        <div
+            ref={menuRef}
+            style={{
+                position: "absolute",
+                left: pos.left,
+                top: pos.top,
+                transform: "translateX(-100%)", // right align
+                background: "white",
+                border: "1px solid #ddd",
+                borderRadius: 4,
+                boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+                zIndex: 2000,
+                minWidth: 140,
+            }}
+            role="menu"
+        >
+            {actions.map((action, i) => {
+                const children = action?.children;
+                if (children) return <div key={i}>{children}</div>;
+
+                return (
+                    <button
+                        key={i}
+                        type="button"
+                        className="btn btn-sm btn-outline-secondary border-0 text-start w-100"
+                        onClick={() => {
+                            close();
+                            action?.onClick?.();
+                        }}
+                        style={{
+                            padding: "8px 12px",
+                            textDecoration: "none",
+                        }}
+                        role="menuitem"
+                    >
+                        {action?.label}
+                    </button>
+                );
+            })}
+        </div>
+    ) : null;
+
+    return (
+        <>
+            <button
+                ref={btnRef}
+                className="btn btn-sm btn-outline-secondary border-1"
+                onClick={() => setOpen((o) => !o)}
+                aria-expanded={open}
+                aria-haspopup="menu"
+                aria-label="Menu"
+                type="button"
+            >
+                ⋮
+            </button>
+
+            {open ? createPortal(menu, document.body) : null}
+        </>
+    );
+};
+
+export const TableRow = ({ row, table_def }) => {
+    return (
+        <tr>
+            {Object.keys(table_def).map((name) => {
+                const Cell = table_def[name].component
+                return <Cell key={name} row={row} name={name} />
+            })}
+        </tr>
+    )
+}
+
+const TableRow_ = TableRow
+// 3) Table už jen používá definici
+export const TableBody = ({ data, table_def, TableRow = TableRow_ }) => {
+    return (
+        <tbody>
+            {data.map((row) => <TableRow key={row?.id} row={row} table_def={table_def} />)}
+        </tbody>
+    )
+}
+
+const TableBody_ = TableBody
+
+export const Table = ({ data, table_def = null, TableBody = TableBody_ }) => {
+    if (!data || data.length === 0) return null
+
+    const _table_def = useMemo(() => table_def || buildTableDef(data), [data, table_def])
+    const colnames = useMemo(() => Object.keys(_table_def).map((k) => _table_def[k].label), [_table_def])
+    // console.log(_table_def)
+    return (
+        <div className="table-responsive">
+            <table className="table table-stripped">
+                <thead>
+                    <tr>
+                        {colnames.map((name) => (
+                            <th key={name}>{`${name}`}</th>
+                        ))}
+                    </tr>
+                </thead>
+
+                <TableBody data={data} table_def={_table_def} />
+            </table>
+        </div>
+    )
+}

package/src/Base/Components/index.js

@@ -0,0 +1,14 @@
+export * from './Attribute'
+export * from './CardCapsule'
+export * from './Col'
+export * from './ConfirmEdit'
+export * from './CopyButton'
+export * from './LargeCard'
+export * from './Link'
+export * from './MediumCard'
+export * from './MediumContent'
+export * from './MediumEditableContent'
+export * from './ProxyLink'
+export * from './Row'
+export * from './LiveEdit'
+export * from './Table'

package/src/Base/Components/style.js

@@ -0,0 +1,278 @@
+/**
+ * Combines multiple class name inputs into a single space-separated string.
+ *
+ * This helper is a lightweight alternative to libraries like `classnames`.
+ * It accepts any number of arguments, flattens nested arrays, removes falsy
+ * values, and joins the remaining entries with spaces.
+ *
+ * Supported inputs:
+ * - string:        "btn"
+ * - falsy values:  false, null, undefined, "" (ignored)
+ * - arrays:        ["btn", "btn-primary"]
+ * - nested arrays: ["btn", ["btn-sm", ["is-active"]]]
+ *
+ * Typical usage:
+ * ```js
+ * cx(
+ *   "UiButton",
+ *   isPrimary && "UiButton--primary",
+ *   isDisabled && "is-disabled",
+ *   ["btn", "btn-sm"]
+ * );
+ * // → "UiButton UiButton--primary btn btn-sm"
+ * ```
+ *
+ * Partial / reusable usage:
+ * You can predefine commonly used class combinations and reuse them
+ * across components (layout slots, bootstrap adapters, etc.).
+ *
+ * ```js
+ * // prepare partials
+ * const bsCard = (...extra) => cx("card", "shadow-sm", extra);
+ * const leftColumn = (...extra) => cx("LargeCard__left", "col-12", "col-lg-4", extra);
+ *
+ * // use partials
+ * <div className={bsCard("LargeCard")}>
+ *   <div className={leftColumn("is-collapsed")}>
+ *     ...
+ *   </div>
+ * </div>
+ * ```
+ *
+ * This pattern helps:
+ * - centralize layout / framework mappings (e.g. Bootstrap → custom CSS),
+ * - keep JSX readable,
+ * - make future theme or framework replacement easier.
+ *
+ * Notes:
+ * - The order of arguments does NOT affect CSS priority; it only affects
+ *   the order of class names in the resulting string.
+ * - All falsy values are removed via `Boolean` filtering.
+ * - `flat(Infinity)` ensures arbitrarily nested arrays are supported.
+ *
+ * @param {...(string | false | null | undefined | Array<any>)} parts
+ *   Class name fragments to be combined.
+ *
+ * @returns {string}
+ *   A single space-separated `className` string.
+ */
+export function cx(...parts) {
+    return parts.flat(Infinity).filter(Boolean).join(" ");
+}
+
+/**
+ * Bootstrap class registry (theme adapter).
+ * Use these helpers with `cx(...)` to keep JSX readable and make it easy
+ * to swap Bootstrap for another styling system later.
+ *
+ * Usage:
+ *   <div className={bs.card.root("LargeCard")} />
+ *   <div className={bs.grid.row({ g: 3, align: "center" })} />
+ *   <button className={bs.button({ variant: "primary", size: "sm" })}>OK</button>
+ */
+
+export const bs = {
+    // ---- Layout / grid --------------------------------------------------------
+    grid: {
+        container: (...extra) => cx("container", extra),
+        containerFluid: (...extra) => cx("container-fluid", extra),
+
+        row: (opts = {}, ...extra) => {
+            const {
+                g, // number: 0..5
+                gx,
+                gy,
+                align, // "start" | "center" | "end"
+                justify, // "start" | "center" | "end" | "between" | "around" | "evenly"
+            } = opts || {};
+            return cx(
+                "row",
+                g != null && `g-${g}`,
+                gx != null && `gx-${gx}`,
+                gy != null && `gy-${gy}`,
+                align && `align-items-${align}`,
+                justify && `justify-content-${justify}`,
+                extra
+            );
+        },
+
+        col: (spans = {}, ...extra) => {
+            // spans: { xs, sm, md, lg, xl, xxl } each can be:
+            // - number 1..12
+            // - "auto"
+            // - true (meaning just "col-{bp}")
+            const bp = ["", "sm", "md", "lg", "xl", "xxl"];
+            const parts = [];
+
+            for (const k of bp) {
+                const key = k === "" ? "xs" : k;
+                const v = spans?.[key];
+                if (v == null) continue;
+
+                const prefix = k === "" ? "col" : `col-${k}`;
+                if (v === true) parts.push(prefix);
+                else parts.push(`${prefix}-${v}`);
+            }
+
+            // default fallback if nothing provided
+            if (parts.length === 0) parts.push("col");
+
+            return cx(parts, extra);
+        },
+    },
+
+    // ---- Card -----------------------------------------------------------------
+    card: {
+        root: (...extra) => cx("card", extra),
+        header: (...extra) => cx("card-header", extra),
+        body: (...extra) => cx("card-body", extra),
+        footer: (...extra) => cx("card-footer", extra),
+        title: (...extra) => cx("card-title", extra),
+        subtitle: (...extra) => cx("card-subtitle", "mb-2", "text-muted", extra),
+        text: (...extra) => cx("card-text", extra),
+    },
+
+    // ---- Buttons --------------------------------------------------------------
+    button: (opts = {}, ...extra) => {
+        const {
+            variant = "secondary", // "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link"
+            outline = false,
+            size, // "sm" | "lg"
+            active,
+            disabled,
+        } = opts || {};
+
+        const v = outline ? `btn-outline-${variant}` : `btn-${variant}`;
+        return cx(
+            "btn",
+            v,
+            size && `btn-${size}`,
+            active && "active",
+            disabled && "disabled",
+            extra
+        );
+    },
+
+    // ---- Table ----------------------------------------------------------------
+    table: (opts = {}, ...extra) => {
+        const {
+            striped,
+            bordered,
+            hover,
+            small,
+            responsive, // boolean or breakpoint: "sm"|"md"|"lg"|"xl"|"xxl"
+            variant, // "light" | "dark"
+            align, // "top" | "middle" | "bottom"
+        } = opts || {};
+
+        const tableClass = cx(
+            "table",
+            striped && "table-striped",
+            bordered && "table-bordered",
+            hover && "table-hover",
+            small && "table-sm",
+            variant && `table-${variant}`,
+            align && `align-${align}`,
+            extra
+        );
+
+        const wrapperClass =
+            responsive === true
+                ? "table-responsive"
+                : typeof responsive === "string"
+                    ? `table-responsive-${responsive}`
+                    : null;
+
+        return { tableClass, wrapperClass };
+    },
+
+    // ---- Forms ----------------------------------------------------------------
+    form: {
+        control: (opts = {}, ...extra) => {
+            const { size, plaintext, isValid, isInvalid } = opts || {};
+            return cx(
+                plaintext ? "form-control-plaintext" : "form-control",
+                size && `form-control-${size}`,
+                isValid && "is-valid",
+                isInvalid && "is-invalid",
+                extra
+            );
+        },
+        select: (opts = {}, ...extra) => {
+            const { size, isValid, isInvalid } = opts || {};
+            return cx(
+                "form-select",
+                size && `form-select-${size}`,
+                isValid && "is-valid",
+                isInvalid && "is-invalid",
+                extra
+            );
+        },
+        label: (...extra) => cx("form-label", extra),
+        check: {
+            wrapper: (...extra) => cx("form-check", extra),
+            input: (...extra) => cx("form-check-input", extra),
+            label: (...extra) => cx("form-check-label", extra),
+        },
+        inputGroup: {
+            wrapper: (...extra) => cx("input-group", extra),
+            text: (...extra) => cx("input-group-text", extra),
+        },
+        help: (...extra) => cx("form-text", extra),
+    },
+
+    // ---- Alerts / badges ------------------------------------------------------
+    alert: (variant = "info", ...extra) => cx("alert", `alert-${variant}`, extra),
+    badge: (opts = {}, ...extra) => {
+        const { variant = "secondary", pill = false } = opts || {};
+        return cx("badge", `text-bg-${variant}`, pill && "rounded-pill", extra);
+    },
+
+    // ---- Utilities (common) ---------------------------------------------------
+    util: {
+        d: (v, ...extra) => cx(v && `d-${v}`, extra), // e.g. "flex", "block"
+        flex: (opts = {}, ...extra) => {
+            const { dir, wrap, grow, shrink, align, justify } = opts || {};
+            return cx(
+                "d-flex",
+                dir && `flex-${dir}`,
+                wrap && `flex-${wrap}`,
+                grow != null && `flex-grow-${grow}`,
+                shrink != null && `flex-shrink-${shrink}`,
+                align && `align-items-${align}`,
+                justify && `justify-content-${justify}`,
+                extra
+            );
+        },
+        gap: (n, ...extra) => cx(n != null && `gap-${n}`, extra),
+        text: (opts = {}, ...extra) => {
+            const { align, muted, nowrap, truncate, wrap } = opts || {};
+            return cx(
+                align && `text-${align}`,
+                muted && "text-muted",
+                nowrap && "text-nowrap",
+                truncate && "text-truncate",
+                wrap === false && "text-nowrap",
+                extra
+            );
+        },
+        w: (v, ...extra) => cx(v && `w-${v}`, extra), // e.g. 100 => "w-100"
+        h: (v, ...extra) => cx(v && `h-${v}`, extra),
+        m: (side, n, ...extra) => cx(`m${side ?? ""}-${n}`, extra), // side: "", "t","b","s","e","x","y"
+        p: (side, n, ...extra) => cx(`p${side ?? ""}-${n}`, extra),
+        border: (opts = {}, ...extra) => {
+            const { top, end, bottom, start, color, rounded } = opts || {};
+            return cx(
+                top && "border-top",
+                end && "border-end",
+                bottom && "border-bottom",
+                start && "border-start",
+                color && `border-${color}`,
+                rounded && (rounded === true ? "rounded" : `rounded-${rounded}`),
+                extra
+            );
+        },
+        bg: (variant, ...extra) => cx(variant && `bg-${variant}`, extra),
+    },
+};
+

package/src/Base/FormControls/Collapsible.jsx

@@ -0,0 +1,46 @@
+import React, { useCallback, useEffect, useState } from "react";
+
+export const Collapsible = ({
+    collapsed = true,
+    children,
+    buttonLabel,
+    buttonLabelCollapsed = "Zobrazit",
+    buttonLabelExpanded = "Skrýt",
+    onToggle,
+    ...buttonProps
+}) => {
+    const [isCollapsed, setIsCollapsed] = useState(collapsed);
+
+    useEffect(() => {
+        setIsCollapsed(collapsed);
+    }, [collapsed]);
+
+    const toggle = useCallback(() => {
+        setIsCollapsed(prev => {
+            const next = !prev;
+            onToggle?.(next);
+            return next;
+        });
+    }, [onToggle]);
+
+    const label =
+        buttonLabel ?? (isCollapsed ? buttonLabelCollapsed : buttonLabelExpanded);
+
+    return (
+        <>
+            {/* children zůstávají namountované => jejich state se neztratí */}
+            <div hidden={isCollapsed} aria-hidden={isCollapsed}>
+                {children}
+            </div>
+
+            <button
+                type="button"
+                {...buttonProps}
+                onClick={toggle}
+                aria-expanded={!isCollapsed}
+            >
+                {label}
+            </button>
+        </>
+    );
+};

package/src/Base/FormControls/Dialog.jsx

@@ -0,0 +1,75 @@
+import Button from "react-bootstrap/Button"
+import Modal from 'react-bootstrap/Modal';
+import Row from "react-bootstrap/Row"
+import Col from "react-bootstrap/Col"
+
+/**
+ * A customizable dialog component with a title, content, and action buttons.
+ *
+ * @param {Object} props - The properties for the Dialog component.
+ * @param {React.ReactNode} props.children - The content to display inside the dialog.
+ * @param {string} [props.title="Dialog"] - The title of the dialog.
+ * @param {string} [props.oklabel="Ok"] - The label for the confirmation button.
+ * @param {string} [props.cancellabel="Zrušit"] - The label for the cancel button.
+ * @param {function} props.onOk - Callback for when the confirmation button is clicked.
+ * @param {function} props.onCancel - Callback for when the cancel button or close button is clicked.
+ *
+ * @example
+ * <Dialog
+ *   title="Confirm Delete"
+ *   oklabel="Delete"
+ *   cancellabel="Cancel"
+ *   onOk={handleConfirm}
+ *   onCancel={handleCancel}
+ * >
+ *   Are you sure you want to delete this item?
+ * </Dialog>
+ *
+ * @returns {JSX.Element} A styled modal dialog.
+ */
+export const Dialog = ({
+    children,
+    title = "Dialog",
+    oklabel = "Ok",
+    cancellabel = "Zrušit",
+    onOk,
+    onCancel,
+}) => {
+    const handleFinish = () => {
+        if (onOk) onOk();
+    };
+
+    const handleCancel = () => {
+        if (onCancel) onCancel();
+    };
+
+    return (
+        <Modal 
+            size="xl" 
+            show={true} 
+            onHide={handleCancel}
+            backdrop="static"  // Prevent closing on outside click
+        >
+            <Modal.Header closeButton>
+                <Modal.Title>{title}</Modal.Title>
+            </Modal.Header>
+            <Modal.Body>{children}</Modal.Body>
+            <Modal.Footer>
+                <Row>
+                    <Col>
+                        <div className="d-flex justify-content-end">
+                            <Button variant="outline-success" onClick={handleFinish}>
+                              {oklabel}
+                            </Button>
+                            &nbsp;
+                            <Button variant="outline-danger" onClick={handleCancel}>
+                                {cancellabel}
+                            </Button>
+                        </div>
+                    </Col>
+                </Row>
+            </Modal.Footer>
+        </Modal>
+    );
+};
+