@dbcdk/react-components 0.0.169 → 0.0.171

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.d.ts

@@ -0,0 +1,33 @@
+export type JsonPrimitive = string | number | boolean | null;
+export type JsonValue = JsonPrimitive | JsonValue[] | {
+    [key: string]: JsonValue;
+};
+export type PrimitiveKind = 'string' | 'number' | 'boolean' | 'null';
+export type SearchMatch = {
+    self: boolean;
+    descendant: boolean;
+};
+export interface JsonViewerProps {
+    value: unknown;
+    defaultExpandedDepth?: number;
+    expandAll?: boolean;
+    searchDebounceMs?: number;
+    helperText?: string;
+    searchPlaceholder?: string;
+    emptySearchText?: string;
+    className?: string;
+    maxHeight?: number | string;
+}
+export type JsonNodeProps = {
+    keyName?: string;
+    path: string[];
+    value: JsonValue;
+    depth: number;
+    defaultExpandedDepth: number;
+    query: string;
+    matches: Map<string, SearchMatch>;
+    expandedNodeIds: Set<string>;
+    onToggleNode: (nodeId: string) => void;
+    copiedId: string | null;
+    onCopy: (nodeId: string, rawValue: string) => void;
+};

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.d.ts

@@ -0,0 +1,4 @@
+export declare function useClipboardStatus(): {
+    copiedId: string | null;
+    setCopiedId: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+};

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

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

@@ -0,0 +1,126 @@
+'use strict';
+
+function isJsonArray(value) {
+  return Array.isArray(value);
+}
+function isJsonObject(value) {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+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";
+}
+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";
+}
+function formatPrimitive(value) {
+  if (value === null) return "null";
+  if (typeof value === "string") return JSON.stringify(value);
+  return String(value);
+}
+function getPrimitiveRawValue(value) {
+  if (value === null) return "null";
+  return String(value);
+}
+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"}`;
+}
+function getNodeId(path) {
+  return path.length === 0 ? "$" : `$.${path.join(".")}`;
+}
+function getPathLabel(path) {
+  return getNodeId(path);
+}
+function normalizeSearch(value) {
+  return value.trim().toLowerCase();
+}
+function capitalize(value) {
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
+function valueToSearchString(value) {
+  return value === null ? "null" : String(value).toLowerCase();
+}
+function collectSearchMatches(value, query, path = [], key) {
+  const matches = /* @__PURE__ */ new Map();
+  const visit = (current, currentPath, currentKey) => {
+    const nodeId = getNodeId(currentPath);
+    const pathLabel = getPathLabel(currentPath).toLowerCase();
+    const keyLabel = (currentKey != null ? 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;
+}
+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])
+    )
+  ];
+}
+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;
+}
+
+exports.capitalize = capitalize;
+exports.collectExpandableNodeIds = collectExpandableNodeIds;
+exports.collectInitiallyExpandedNodeIds = collectInitiallyExpandedNodeIds;
+exports.collectSearchMatches = collectSearchMatches;
+exports.formatPrimitive = formatPrimitive;
+exports.getNodeId = getNodeId;
+exports.getPathLabel = getPathLabel;
+exports.getPrimitiveRawValue = getPrimitiveRawValue;
+exports.getSummary = getSummary;
+exports.getValueType = getValueType;
+exports.isJsonArray = isJsonArray;
+exports.isJsonObject = isJsonObject;
+exports.isJsonValue = isJsonValue;
+exports.normalizeSearch = normalizeSearch;

package/dist/components/json-viewer/utils.d.ts

@@ -0,0 +1,17 @@
+import type { JsonValue, JsonPrimitive, PrimitiveKind, SearchMatch } from './types';
+export declare function isJsonArray(value: JsonValue): value is JsonValue[];
+export declare function isJsonObject(value: JsonValue): value is {
+    [key: string]: JsonValue;
+};
+export declare function isJsonValue(value: unknown): value is JsonValue;
+export declare function getValueType(value: unknown): PrimitiveKind | 'array' | 'object';
+export declare function formatPrimitive(value: JsonPrimitive): string;
+export declare function getPrimitiveRawValue(value: JsonPrimitive): string;
+export declare function getSummary(value: JsonValue): string;
+export declare function getNodeId(path: string[]): string;
+export declare function getPathLabel(path: string[]): string;
+export declare function normalizeSearch(value: string): string;
+export declare function capitalize(value: string): string;
+export declare function collectSearchMatches(value: JsonValue, query: string, path?: string[], key?: string): Map<string, SearchMatch>;
+export declare function collectExpandableNodeIds(value: JsonValue, path?: string[]): string[];
+export declare function collectInitiallyExpandedNodeIds(value: JsonValue, defaultExpandedDepth: number, expandAll: boolean, depth?: number, path?: string[]): string[];

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

@@ -0,0 +1,111 @@
+function isJsonArray(value) {
+  return Array.isArray(value);
+}
+function isJsonObject(value) {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+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";
+}
+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";
+}
+function formatPrimitive(value) {
+  if (value === null) return "null";
+  if (typeof value === "string") return JSON.stringify(value);
+  return String(value);
+}
+function getPrimitiveRawValue(value) {
+  if (value === null) return "null";
+  return String(value);
+}
+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"}`;
+}
+function getNodeId(path) {
+  return path.length === 0 ? "$" : `$.${path.join(".")}`;
+}
+function getPathLabel(path) {
+  return getNodeId(path);
+}
+function normalizeSearch(value) {
+  return value.trim().toLowerCase();
+}
+function capitalize(value) {
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
+function valueToSearchString(value) {
+  return value === null ? "null" : String(value).toLowerCase();
+}
+function collectSearchMatches(value, query, path = [], key) {
+  const matches = /* @__PURE__ */ new Map();
+  const visit = (current, currentPath, currentKey) => {
+    const nodeId = getNodeId(currentPath);
+    const pathLabel = getPathLabel(currentPath).toLowerCase();
+    const keyLabel = (currentKey != null ? 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;
+}
+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])
+    )
+  ];
+}
+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;
+}
+
+export { capitalize, collectExpandableNodeIds, collectInitiallyExpandedNodeIds, collectSearchMatches, formatPrimitive, getNodeId, getPathLabel, getPrimitiveRawValue, getSummary, getValueType, isJsonArray, isJsonObject, isJsonValue, normalizeSearch };