@dbcdk/react-components 0.0.103 → 0.0.104

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

@@ -0,0 +1,164 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var JsonNode = require('./JsonNode');
+var styles = require('./JsonViewer.module.css');
+var useClipboardStatus = require('./useClipboardStatus');
+var utils = require('./utils');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function JsonViewer({
+  value,
+  defaultExpandedDepth = 2,
+  expandAll = false,
+  searchDebounceMs = 800,
+  helperText,
+  searchPlaceholder = "S\xF8g i n\xF8gler, stier og v\xE6rdier",
+  emptySearchText = "Ingen matchende noder fundet.",
+  className,
+  maxHeight
+}) {
+  const [queryInput, setQueryInput] = react.useState("");
+  const [query, setQuery] = react.useState("");
+  const normalizedQuery = utils.normalizeSearch(query);
+  const inputId = react.useId();
+  const { copiedId, setCopiedId } = useClipboardStatus.useClipboardStatus();
+  react.useEffect(() => {
+    const timeoutId = window.setTimeout(() => {
+      setQuery(queryInput);
+    }, searchDebounceMs);
+    return () => window.clearTimeout(timeoutId);
+  }, [queryInput, searchDebounceMs]);
+  const safeValue = react.useMemo(() => {
+    if (utils.isJsonValue(value)) return value;
+    return {
+      unsupported: {
+        besked: "Den angivne v\xE6rdi kan ikke vises som JSON",
+        modtagetType: typeof value
+      }
+    };
+  }, [value]);
+  const matches = react.useMemo(
+    () => normalizedQuery ? utils.collectSearchMatches(safeValue, normalizedQuery) : /* @__PURE__ */ new Map(),
+    [normalizedQuery, safeValue]
+  );
+  const allExpandableNodeIds = react.useMemo(() => utils.collectExpandableNodeIds(safeValue), [safeValue]);
+  const [expandedNodeIds, setExpandedNodeIds] = react.useState(
+    () => new Set(utils.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(/* @__PURE__ */ 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 /* @__PURE__ */ jsxRuntime.jsxs("section", { className: [styles__default.default.viewer, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.toolbar, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.toolbarTop, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: inputId, className: styles__default.default.searchField, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: styles__default.default.searchIcon, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id: inputId,
+              type: "search",
+              value: queryInput,
+              onChange: (event) => setQueryInput(event.target.value),
+              placeholder: searchPlaceholder,
+              className: styles__default.default.searchInput
+            }
+          ),
+          queryInput ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: styles__default.default.clearButton,
+              "aria-label": "Ryd s\xF8gning",
+              onClick: () => {
+                setQueryInput("");
+                setQuery("");
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": "true" })
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.actions, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: styles__default.default.toolbarButton,
+              onClick: handleExpandAll,
+              disabled: Boolean(normalizedQuery),
+              children: "Fold alle ud"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: styles__default.default.toolbarButton,
+              onClick: handleCollapseAll,
+              disabled: Boolean(normalizedQuery),
+              children: "Fold alle sammen"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.metaRow, children: [
+        helperText ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.helperText, children: helperText }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.statusText, children: normalizedQuery ? `${matches.size} matchende node${matches.size === 1 ? "" : "r"}` : "" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: styles__default.default.treePane,
+        role: "tree",
+        "aria-label": "JSON-visning",
+        style: maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
+        children: hasResults ? /* @__PURE__ */ jsxRuntime.jsx(
+          JsonNode.JsonNode,
+          {
+            keyName: void 0,
+            path: [],
+            value: safeValue,
+            depth: 0,
+            defaultExpandedDepth,
+            query: normalizedQuery,
+            matches,
+            expandedNodeIds,
+            onToggleNode: handleToggleNode,
+            copiedId,
+            onCopy: handleCopy
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.emptyState, children: emptySearchText })
+      }
+    )
+  ] });
+}
+
+exports.JsonViewer = JsonViewer;

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

@@ -0,0 +1,158 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Search, X } from 'lucide-react';
+import { useState, useId, useEffect, useMemo } from 'react';
+import { JsonNode } from './JsonNode';
+import styles from './JsonViewer.module.css';
+import { useClipboardStatus } from './useClipboardStatus';
+import { normalizeSearch, isJsonValue, collectSearchMatches, collectExpandableNodeIds, collectInitiallyExpandedNodeIds } from './utils';
+
+function JsonViewer({
+  value,
+  defaultExpandedDepth = 2,
+  expandAll = false,
+  searchDebounceMs = 800,
+  helperText,
+  searchPlaceholder = "S\xF8g i n\xF8gler, stier og v\xE6rdier",
+  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\xE6rdi kan ikke vises som JSON",
+        modtagetType: typeof value
+      }
+    };
+  }, [value]);
+  const matches = useMemo(
+    () => normalizedQuery ? collectSearchMatches(safeValue, normalizedQuery) : /* @__PURE__ */ 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(/* @__PURE__ */ 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 /* @__PURE__ */ jsxs("section", { className: [styles.viewer, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.toolbar, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.toolbarTop, children: [
+        /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: styles.searchField, children: [
+          /* @__PURE__ */ jsx(Search, { className: styles.searchIcon, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: inputId,
+              type: "search",
+              value: queryInput,
+              onChange: (event) => setQueryInput(event.target.value),
+              placeholder: searchPlaceholder,
+              className: styles.searchInput
+            }
+          ),
+          queryInput ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: styles.clearButton,
+              "aria-label": "Ryd s\xF8gning",
+              onClick: () => {
+                setQueryInput("");
+                setQuery("");
+              },
+              children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.actions, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: styles.toolbarButton,
+              onClick: handleExpandAll,
+              disabled: Boolean(normalizedQuery),
+              children: "Fold alle ud"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: styles.toolbarButton,
+              onClick: handleCollapseAll,
+              disabled: Boolean(normalizedQuery),
+              children: "Fold alle sammen"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.metaRow, children: [
+        helperText ? /* @__PURE__ */ jsx("span", { className: styles.helperText, children: helperText }) : /* @__PURE__ */ jsx("span", {}),
+        /* @__PURE__ */ jsx("span", { className: styles.statusText, children: normalizedQuery ? `${matches.size} matchende node${matches.size === 1 ? "" : "r"}` : "" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: styles.treePane,
+        role: "tree",
+        "aria-label": "JSON-visning",
+        style: maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
+        children: hasResults ? /* @__PURE__ */ jsx(
+          JsonNode,
+          {
+            keyName: void 0,
+            path: [],
+            value: safeValue,
+            depth: 0,
+            defaultExpandedDepth,
+            query: normalizedQuery,
+            matches,
+            expandedNodeIds,
+            onToggleNode: handleToggleNode,
+            copiedId,
+            onCopy: handleCopy
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: styles.emptyState, children: emptySearchText })
+      }
+    )
+  ] });
+}
+
+export { JsonViewer };

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

@@ -0,0 +1,346 @@
+.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.cjs

@@ -0,0 +1,2 @@
+'use strict';
+

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,15 @@
+'use strict';
+
+var react = require('react');
+
+function useClipboardStatus() {
+  const [copiedId, setCopiedId] = react.useState(null);
+  react.useEffect(() => {
+    if (!copiedId) return;
+    const timer = window.setTimeout(() => setCopiedId(null), 1400);
+    return () => window.clearTimeout(timer);
+  }, [copiedId]);
+  return { copiedId, setCopiedId };
+}
+
+exports.useClipboardStatus = useClipboardStatus;

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

@@ -0,0 +1,13 @@
+import { useState, useEffect } from 'react';
+
+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 };
+}
+
+export { useClipboardStatus };