@dbcdk/react-components 0.0.96 → 0.0.98

package/dist/components/json-viewer/JsonViewer.js

@@ -1,68 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Search, X } from 'lucide-react';
-import { useEffect, useId, useMemo, useState } from 'react';
-import { JsonNode } from './JsonNode';
-import styles from './JsonViewer.module.css';
-import { useClipboardStatus } from './useClipboardStatus';
-import { collectExpandableNodeIds, collectInitiallyExpandedNodeIds, collectSearchMatches, isJsonValue, normalizeSearch, } from './utils';
-export function JsonViewer({ value, defaultExpandedDepth = 2, expandAll = false, searchDebounceMs = 800, helperText, searchPlaceholder = 'Søg i nøgler, stier og værdier', emptySearchText = 'Ingen matchende noder fundet.', className, maxHeight, }) {
-    const [queryInput, setQueryInput] = useState('');
-    const [query, setQuery] = useState('');
-    const normalizedQuery = normalizeSearch(query);
-    const inputId = useId();
-    const { copiedId, setCopiedId } = useClipboardStatus();
-    useEffect(() => {
-        const timeoutId = window.setTimeout(() => {
-            setQuery(queryInput);
-        }, searchDebounceMs);
-        return () => window.clearTimeout(timeoutId);
-    }, [queryInput, searchDebounceMs]);
-    const safeValue = useMemo(() => {
-        if (isJsonValue(value))
-            return value;
-        return {
-            unsupported: {
-                besked: 'Den angivne værdi kan ikke vises som JSON',
-                modtagetType: typeof value,
-            },
-        };
-    }, [value]);
-    const matches = useMemo(() => (normalizedQuery ? collectSearchMatches(safeValue, normalizedQuery) : new Map()), [normalizedQuery, safeValue]);
-    const allExpandableNodeIds = useMemo(() => collectExpandableNodeIds(safeValue), [safeValue]);
-    const [expandedNodeIds, setExpandedNodeIds] = useState(() => new Set(collectInitiallyExpandedNodeIds(safeValue, defaultExpandedDepth, expandAll)));
-    const hasResults = normalizedQuery ? matches.size > 0 : true;
-    const handleCopy = async (nodeId, rawValue) => {
-        try {
-            await navigator.clipboard.writeText(rawValue);
-            setCopiedId(nodeId);
-        }
-        catch {
-            setCopiedId(null);
-        }
-    };
-    const handleExpandAll = () => {
-        setExpandedNodeIds(new Set(allExpandableNodeIds));
-    };
-    const handleCollapseAll = () => {
-        setExpandedNodeIds(new Set());
-    };
-    const handleToggleNode = (nodeId) => {
-        setExpandedNodeIds(current => {
-            const next = new Set(current);
-            if (next.has(nodeId))
-                next.delete(nodeId);
-            else
-                next.add(nodeId);
-            return next;
-        });
-    };
-    return (_jsxs("section", { className: [styles.viewer, className].filter(Boolean).join(' '), children: [_jsxs("div", { className: styles.toolbar, children: [_jsxs("div", { className: styles.toolbarTop, children: [_jsxs("label", { htmlFor: inputId, className: styles.searchField, children: [_jsx(Search, { className: styles.searchIcon, "aria-hidden": "true" }), _jsx("input", { id: inputId, type: "search", value: queryInput, onChange: event => setQueryInput(event.target.value), placeholder: searchPlaceholder, className: styles.searchInput }), queryInput ? (_jsx("button", { type: "button", className: styles.clearButton, "aria-label": "Ryd s\u00F8gning", onClick: () => {
-                                            setQueryInput('');
-                                            setQuery('');
-                                        }, children: _jsx(X, { "aria-hidden": "true" }) })) : null] }), _jsxs("div", { className: styles.actions, children: [_jsx("button", { type: "button", className: styles.toolbarButton, onClick: handleExpandAll, disabled: Boolean(normalizedQuery), children: "Fold alle ud" }), _jsx("button", { type: "button", className: styles.toolbarButton, onClick: handleCollapseAll, disabled: Boolean(normalizedQuery), children: "Fold alle sammen" })] })] }), _jsxs("div", { className: styles.metaRow, children: [helperText ? _jsx("span", { className: styles.helperText, children: helperText }) : _jsx("span", {}), _jsx("span", { className: styles.statusText, children: normalizedQuery
-                                    ? `${matches.size} matchende node${matches.size === 1 ? '' : 'r'}`
-                                    : '' })] })] }), _jsx("div", { className: styles.treePane, role: "tree", "aria-label": "JSON-visning", style: maxHeight !== undefined
-                    ? { maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight }
-                    : undefined, children: hasResults ? (_jsx(JsonNode, { keyName: undefined, path: [], value: safeValue, depth: 0, defaultExpandedDepth: defaultExpandedDepth, query: normalizedQuery, matches: matches, expandedNodeIds: expandedNodeIds, onToggleNode: handleToggleNode, copiedId: copiedId, onCopy: handleCopy })) : (_jsx("div", { className: styles.emptyState, children: emptySearchText })) })] }));
-}

package/dist/components/json-viewer/JsonViewer.module.css

@@ -1,346 +0,0 @@
-.viewer {
-  --json-pane-bg: var(--color-bg-inverse);
-  --json-pane-border: color-mix(in oklab, var(--color-fg-inverse) 12%, transparent);
-  --json-pane-border-strong: color-mix(in oklab, var(--color-fg-inverse) 18%, transparent);
-  --json-pane-text: var(--color-fg-inverse);
-  --json-pane-muted: color-mix(in oklab, var(--color-fg-inverse) 64%, transparent);
-  --json-pane-subtle: color-mix(in oklab, var(--color-fg-inverse) 44%, transparent);
-  --json-pane-hover: color-mix(in oklab, var(--color-fg-inverse) 8%, transparent);
-  --json-pane-selected: color-mix(in oklab, var(--color-brand) 24%, transparent);
-  --json-pane-highlight: color-mix(
-    in oklab,
-    var(--color-brand) 68%,
-    var(--color-syntax-accent) 32%
-  );
-  --color-highlight-bg: color-mix(in oklab, var(--json-pane-highlight) 58%, transparent);
-  --color-highlight-fg: var(--color-fg-inverse);
-  --json-pane-key: color-mix(in oklab, var(--color-fg-inverse) 88%, var(--color-syntax-accent) 12%);
-  --json-pane-string: color-mix(in oklab, var(--color-syntax-string) 78%, white 22%);
-  --json-pane-number: color-mix(in oklab, var(--color-syntax-number) 76%, white 24%);
-  --json-pane-boolean: color-mix(in oklab, var(--color-syntax-boolean) 74%, white 26%);
-  --json-pane-null: color-mix(in oklab, var(--color-fg-inverse) 54%, transparent);
-
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-  background: var(--json-pane-bg);
-  color: var(--json-pane-text);
-  border: var(--border-width-thin) solid var(--json-pane-border);
-  border-radius: var(--border-radius-xl);
-  box-shadow: var(--shadow-md);
-  padding: var(--spacing-sm);
-  font-family: var(--font-family-mono);
-}
-
-.toolbar {
-  display: grid;
-  gap: var(--spacing-xs);
-}
-
-.toolbarTop {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: var(--spacing-sm);
-  align-items: center;
-}
-
-.searchField {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  align-items: center;
-  gap: var(--spacing-xs);
-  min-height: var(--component-size-md);
-  padding-inline: var(--spacing-sm);
-  border: var(--border-width-thin) solid var(--json-pane-border);
-  border-radius: var(--border-radius-lg);
-  background: transparent;
-}
-
-.searchField:focus-within {
-  border-color: var(--json-pane-border-strong);
-  box-shadow: var(--focus-ring);
-}
-
-.searchIcon,
-.clearButton svg {
-  inline-size: var(--icon-size-sm);
-  block-size: var(--icon-size-sm);
-  color: var(--json-pane-subtle);
-}
-
-.searchInput {
-  inline-size: 100%;
-  min-inline-size: 0;
-  min-block-size: var(--component-size-md);
-  background: transparent;
-  border: 0;
-  color: var(--json-pane-text);
-  font: inherit;
-  outline: none;
-}
-
-.searchInput::placeholder {
-  color: var(--json-pane-subtle);
-}
-
-.clearButton {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: var(--component-size-xs);
-  block-size: var(--component-size-xs);
-  border: 0;
-  border-radius: var(--border-radius-round);
-  background: transparent;
-  cursor: pointer;
-}
-
-.clearButton:hover {
-  background: var(--json-pane-hover);
-}
-
-.metaRow {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-md);
-  font-size: var(--font-size-xs);
-  color: var(--json-pane-muted);
-}
-
-.actions {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-}
-
-.toolbarButton {
-  min-block-size: var(--component-size-sm);
-  padding-inline: var(--spacing-sm);
-  border: var(--border-width-thin) solid var(--json-pane-border);
-  border-radius: var(--border-radius-md);
-  background: transparent;
-  color: var(--json-pane-text);
-  font: inherit;
-  cursor: pointer;
-}
-
-.toolbarButton:hover:not(:disabled) {
-  background: var(--json-pane-hover);
-}
-
-.toolbarButton:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-
-.toolbarButton:disabled {
-  opacity: 0.45;
-  cursor: default;
-}
-
-.helperText,
-.statusText {
-  min-inline-size: 0;
-}
-
-.treePane {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-2xs);
-  background: transparent;
-  padding: 0;
-  overflow: auto;
-}
-
-.node {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-}
-
-.row,
-.pathHint {
-  padding-left: calc(var(--json-indent) * var(--spacing-md));
-}
-
-.row {
-  display: flex;
-  align-items: flex-start;
-  min-inline-size: 0;
-  border-radius: var(--border-radius-md);
-}
-
-.row[data-match='true'] {
-  background: var(--json-pane-selected);
-}
-
-.toggle,
-.valueButton {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  min-inline-size: 0;
-  inline-size: 100%;
-  padding-block: 6px;
-  padding-inline: var(--spacing-xs);
-  background: transparent;
-  border: 0;
-  border-radius: var(--border-radius-md);
-  color: inherit;
-  text-align: left;
-  cursor: pointer;
-  font: inherit;
-}
-
-.toggle {
-  justify-content: flex-start;
-}
-
-.valueButton {
-  justify-content: flex-start;
-}
-
-.toggle:hover,
-.valueButton:hover {
-  background: var(--json-pane-hover);
-}
-
-.toggle:focus-visible,
-.valueButton:focus-visible,
-.clearButton:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-
-.toggle svg,
-.copyState svg {
-  inline-size: var(--icon-size-sm);
-  block-size: var(--icon-size-sm);
-  flex: 0 0 auto;
-}
-
-.rowLabel {
-  display: inline-flex;
-  align-items: baseline;
-  flex-wrap: nowrap;
-  gap: 6px;
-  min-inline-size: 0;
-  flex: 1 1 auto;
-}
-
-.keyChunk {
-  display: inline-flex;
-  align-items: baseline;
-  gap: 4px;
-  flex: 0 0 auto;
-}
-
-.rootLabel,
-.key {
-  color: var(--json-pane-key);
-  font-weight: var(--font-weight-medium);
-}
-
-.punctuation,
-.bracket {
-  color: var(--json-pane-subtle);
-}
-
-.summary,
-.pathHint {
-  color: var(--json-pane-muted);
-}
-
-.children {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  position: relative;
-}
-
-.children::before {
-  content: '';
-  position: absolute;
-  left: calc(var(--spacing-md) - 2px);
-  top: 0;
-  bottom: 0;
-  width: 1px;
-  background: color-mix(in oklab, var(--color-fg-inverse) 8%, transparent);
-  pointer-events: none;
-}
-
-.value {
-  min-inline-size: 0;
-  flex: 0 1 auto;
-  word-break: break-word;
-}
-
-.valueString {
-  color: var(--json-pane-string);
-}
-
-.valueNumber {
-  color: var(--json-pane-number);
-}
-
-.valueBoolean {
-  color: var(--json-pane-boolean);
-}
-
-.valueNull {
-  color: var(--json-pane-null);
-}
-
-.copyState {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-xxs);
-  margin-left: auto;
-  color: var(--json-pane-subtle);
-  font-size: var(--font-size-xs);
-  white-space: nowrap;
-  opacity: 0;
-  transform: translateX(4px);
-  transition:
-    opacity var(--transition-fast) var(--ease-standard),
-    transform var(--transition-fast) var(--ease-standard);
-}
-
-.valueButton:hover .copyState,
-.valueButton:focus-visible .copyState,
-.valueButton:focus-within .copyState {
-  opacity: 1;
-  transform: translateX(0);
-}
-
-.valueButton[title='Kopieret'] .copyState {
-  opacity: 1;
-  transform: translateX(0);
-  color: color-mix(in oklab, var(--color-syntax-string) 78%, white 22%);
-}
-
-.emptyState {
-  padding: var(--spacing-md);
-  color: var(--json-pane-muted);
-  text-align: center;
-}
-
-@media (max-width: 640px) {
-  .toolbarTop {
-    grid-template-columns: 1fr;
-  }
-
-  .actions {
-    flex-wrap: wrap;
-  }
-
-  .metaRow {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .copyState span {
-    display: none;
-  }
-}

package/dist/components/json-viewer/types.js

@@ -1 +0,0 @@
-export {};

package/dist/components/json-viewer/useClipboardStatus.js

@@ -1,11 +0,0 @@
-import { useEffect, useState } from 'react';
-export function useClipboardStatus() {
-    const [copiedId, setCopiedId] = useState(null);
-    useEffect(() => {
-        if (!copiedId)
-            return;
-        const timer = window.setTimeout(() => setCopiedId(null), 1400);
-        return () => window.clearTimeout(timer);
-    }, [copiedId]);
-    return { copiedId, setCopiedId };
-}

package/dist/components/json-viewer/utils.js

@@ -1,125 +0,0 @@
-export function isJsonArray(value) {
-    return Array.isArray(value);
-}
-export function isJsonObject(value) {
-    return value !== null && typeof value === 'object' && !Array.isArray(value);
-}
-export function isJsonValue(value) {
-    if (value === null)
-        return true;
-    if (Array.isArray(value))
-        return value.every(isJsonValue);
-    if (typeof value === 'object') {
-        return Object.values(value).every(isJsonValue);
-    }
-    return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean';
-}
-export function getValueType(value) {
-    if (value === null)
-        return 'null';
-    if (Array.isArray(value))
-        return 'array';
-    if (typeof value === 'object')
-        return 'object';
-    if (typeof value === 'string')
-        return 'string';
-    if (typeof value === 'number')
-        return 'number';
-    if (typeof value === 'boolean')
-        return 'boolean';
-    return 'string';
-}
-export function formatPrimitive(value) {
-    if (value === null)
-        return 'null';
-    if (typeof value === 'string')
-        return JSON.stringify(value);
-    return String(value);
-}
-export function getPrimitiveRawValue(value) {
-    if (value === null)
-        return 'null';
-    return String(value);
-}
-export function getSummary(value) {
-    if (isJsonArray(value)) {
-        return `${value.length} element${value.length === 1 ? '' : 'er'}`;
-    }
-    if (!isJsonObject(value))
-        return '0 felter';
-    const count = Object.keys(value).length;
-    return `${count} felt${count === 1 ? '' : 'er'}`;
-}
-export function getNodeId(path) {
-    return path.length === 0 ? '$' : `$.${path.join('.')}`;
-}
-export function getPathLabel(path) {
-    return getNodeId(path);
-}
-export function normalizeSearch(value) {
-    return value.trim().toLowerCase();
-}
-export function capitalize(value) {
-    return value.charAt(0).toUpperCase() + value.slice(1);
-}
-function valueToSearchString(value) {
-    return value === null ? 'null' : String(value).toLowerCase();
-}
-export function collectSearchMatches(value, query, path = [], key) {
-    const matches = new Map();
-    const visit = (current, currentPath, currentKey) => {
-        const nodeId = getNodeId(currentPath);
-        const pathLabel = getPathLabel(currentPath).toLowerCase();
-        const keyLabel = (currentKey !== null && currentKey !== void 0 ? currentKey : '').toLowerCase();
-        let self = keyLabel.includes(query) || pathLabel.includes(query);
-        let descendant = false;
-        if (isJsonArray(current)) {
-            current.forEach((item, index) => {
-                const childMatches = visit(item, [...currentPath, String(index)], String(index));
-                descendant = descendant || childMatches;
-            });
-        }
-        else if (isJsonObject(current)) {
-            Object.entries(current).forEach(([childKey, childValue]) => {
-                const childMatches = visit(childValue, [...currentPath, childKey], childKey);
-                descendant = descendant || childMatches;
-            });
-        }
-        else {
-            self = self || valueToSearchString(current).includes(query);
-        }
-        const any = self || descendant;
-        if (any) {
-            matches.set(nodeId, { self, descendant });
-        }
-        return any;
-    };
-    visit(value, path, key);
-    return matches;
-}
-export function collectExpandableNodeIds(value, path = []) {
-    if (!isJsonArray(value) && !isJsonObject(value))
-        return [];
-    const nodeId = getNodeId(path);
-    const childEntries = isJsonArray(value)
-        ? value.map((item, index) => [String(index), item])
-        : Object.entries(value);
-    return [
-        nodeId,
-        ...childEntries.flatMap(([childKey, childValue]) => collectExpandableNodeIds(childValue, [...path, childKey])),
-    ];
-}
-export function collectInitiallyExpandedNodeIds(value, defaultExpandedDepth, expandAll, depth = 0, path = []) {
-    if (!isJsonArray(value) && !isJsonObject(value))
-        return [];
-    const nodeId = getNodeId(path);
-    const childEntries = isJsonArray(value)
-        ? value.map((item, index) => [String(index), item])
-        : Object.entries(value);
-    const includeNode = expandAll || depth < defaultExpandedDepth;
-    const nested = childEntries.flatMap(([childKey, childValue]) => collectInitiallyExpandedNodeIds(childValue, defaultExpandedDepth, expandAll, depth + 1, [
-        ...path,
-        childKey,
-    ]));
-    return includeNode ? [nodeId, ...nested] : nested;
-}