@speron/projekt-front 0.0.3

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>
+    );
+};
+

package/src/Base/FormControls/EntityLookup.jsx

@@ -0,0 +1,175 @@
+import { CreateDelayer, ErrorHandler, LoadingSpinner } from "@hrbolek/uoisfrontend-shared"
+import { useCallback } from "react"
+import { useGQLClient } from "../../../../dynamic/src/Store"
+import { useAsync } from "../../../../dynamic/src/Hooks"
+import { useEffect } from "react"
+import { useState } from "react"
+import { Label } from "./Label"
+import { Input } from "./Input"
+import { AsyncStateIndicator } from "../Helpers/AsyncStateIndicator"
+
+/**
+ * Vyhledávací komponenta pro výběr entity (lookup/autocomplete).
+ *
+ * Zobrazí textový input a po zadání alespoň 3 znaků spustí odložené (debounced)
+ * hledání přes `asyncAction`. Výsledky zobrazí jako seznam, ze kterého lze
+ * vybrat položku. Po výběru zavolá `onSelect` a/nebo `onChange` ve stylu
+ * normalizovaného eventu `{ target: { id, value } }`.
+ *
+ * Chování:
+ * - Při psaní: pokud délka textu < 3, nic se nenačítá.
+ * - Pokud uživatel smaže text (prázdný string), zavolá se `onChange` s `value: null`.
+ * - Při výběru položky: zavolá se `onChange` s `value: item.id` a zavolá se `onSelect(item)`.
+ *   `onSelect` může vrátit objekt `{ clear?: boolean }` (default `true`) pro vyčištění výsledků.
+ *
+ * Pozn.: `skip`/`limit` jsou v props, ale v ukázce kódu se aktuálně nepoužívají
+ * v parametrech `run(...)` (můžeš je doplnit do volání, pokud je asyncAction podporuje).
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} props.id
+ *  Identifikátor pole pro `onChange` event (`target.id`), tj. “kam” ukládat vybranou hodnotu.
+ * @param {Function} props.asyncAction
+ *  Asynchronní akce pro hledání (předává se do `useAsync`). Očekává se, že `run`
+ *  vrátí pole nalezených položek. Komponenta volá `run({ pattern }, gqlClient)`.
+ * @param {Object} [props.value]
+ *  Aktuálně vybraná položka (typicky entity objekt). Pro zobrazení se používá `value?.name`.
+ * @param {(item: any) => ({clear?: boolean}|void)} [props.onSelect]
+ *  Callback při výběru položky ze seznamu. Může vrátit `{ clear: boolean }`,
+ *  které určuje, zda se mají po výběru vyčistit výsledky (default `true`).
+ * @param {(e: {target: {id: string, value: any}}) => void} [props.onChange=null]
+ *  Callback pro změnu hodnoty (např. do formuláře). Volá se:
+ *  - při vymazání textu: `value: null`
+ *  - při výběru položky: `value: item.id`
+ * @param {number} [props.skip=0]
+ *  Offset pro stránkování výsledků (aktuálně nepoužito v `run`, viz pozn.).
+ * @param {number} [props.limit=10]
+ *  Limit výsledků (aktuálně nepoužito v `run`, viz pozn.).
+ * @param {string} [props.label="Hledaný text"]
+ *  Titulek sekce (renderuje se přes {@link Label}).
+ *
+ * @param {Object<string, any>} [props.props]
+ *  Další props předané do vnitřního {@link Input} (např. `className`, `disabled`, apod.).
+ *  Pozn.: vnitřní input má natvrdo `id="__phrase"`, `placeholder` a `value={value_?.name}`.
+ *
+ * @returns {JSX.Element}
+ *
+ * @example
+ * <EntityLookup
+ *   id="userId"
+ *   label="Uživatel"
+ *   asyncAction={UserReadPageAsyncAction}
+ *   value={selectedUser}
+ *   onChange={({ target }) => setForm(s => ({ ...s, [target.id]: target.value }))}
+ *   onSelect={(user) => ({ clear: true })}
+ * />
+ */
+export const EntityLookup = ({ 
+    id,
+    asyncAction, 
+    value,
+    onSelect = (item) => { clear: true }, 
+    onChange = null,
+    skip = 0, 
+    limit = 10, 
+    label, 
+    ...props 
+}) => {
+    if (typeof asyncAction !== "function")
+        throw Error("EntityLookup.asyncAction must be function - dispatchable async action creator")
+
+    // const dispatch = useDispatch()
+    const [Delayer] = useState(() => CreateDelayer()) // useState checks for a function ;)
+    const { run, loading, error } = useAsync(asyncAction, {}, { deferred: true })
+    const [fetchedItems, setFetchedItems] = useState([])
+    const gqlClient = useGQLClient()
+    const [value_, setValue_] = useState(value)
+
+    useEffect(()=>{
+        console.log("EntityLookup.useEffect", value)
+        setValue_(value)
+    },[value])
+
+
+    const handleChange = useCallback(async (e) => {
+        const target = e?.target || {}
+        const value = target?.value || ""
+        if (target?.value === "") {
+            if (onChange) {
+                onChange({target: {id, value: null}})    
+            }
+        }
+        if (value.length < 3) return
+        const searchresult = await Delayer(async () => await run({ pattern: "%" + value + "%" }, gqlClient))
+        // console.log("searchresult", searchresult)
+        if (!Array.isArray(searchresult))
+            throw Error("EntityLookup.searchresult doest not return array, check EntityLookup.asyncAction")
+        setFetchedItems(old => searchresult)
+    }, [asyncAction, skip, limit])
+
+    const handleSelect = useCallback((item) => {
+        // console.log("EntityLookup.handleSelect", item)
+        setValue_(prev => (item || prev))
+
+        if (onChange) {
+            onChange({target: {id, value: item?.id}})
+            setFetchedItems(() => [])
+        }
+
+        const response = onSelect(item) || {}
+        const { clear = true } = response
+        if (clear) {
+            setFetchedItems(() => [])
+        }
+        
+    }, [onSelect, setFetchedItems])
+
+    // const sureValue = value || {}
+    // const inputValue = sureValue?.fullname || sureValue?.name
+    const content = (<>
+        <Input {...props} 
+            id={"__phrase"} 
+            onChange={handleChange} 
+            placeholder="Napište alespoň 3 znaky" 
+            value={value_?.fullname || value_?.name}
+            reset={value_}
+            // defaultValue={value_?.name}
+        />
+        {fetchedItems.map(
+            item => <SearchResult key={item?.id} item={item} onSelect={handleSelect} />
+        )}
+    </>)
+
+    if (label)
+        return (
+            <>
+                <AsyncStateIndicator loading={loading} error={error} text={"Hledám"} />
+                {/* {JSON.stringify(value_)}<br/>
+                {value_?.fullname || value_?.name} */}
+                <Label title={label}>{content}</Label>
+            </>
+        )
+        return (
+            <>
+                <AsyncStateIndicator loading={loading} error={error} text={"Hledám"} />
+                {/* {JSON.stringify(value_)}<br/>
+                {value_?.fullname || value_?.name} */}
+                {content}
+            </>
+        )
+
+}
+
+const SearchResult = ({ item, onSelect }) => {
+    const text = item?.fullname || item?.name || item?.id || "(Chyba v programu, dotaz nevraci jmena)";
+    return (
+        <button
+            type="button"
+            className="btn btn-outline-secondary"
+            onClick={() => onSelect(item)}
+            style={{ display: "block", width: "100%", textAlign: "left" }}
+        >
+            {text}
+        </button>
+    );
+};