@dbcdk/react-components 0.0.167 → 0.0.169

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.cjs

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

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

@@ -1,33 +0,0 @@
-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

@@ -1 +0,0 @@
-

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

@@ -1,15 +0,0 @@
-'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

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

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

@@ -1,13 +0,0 @@
-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

@@ -1,126 +0,0 @@
-'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

@@ -1,17 +0,0 @@
-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

@@ -1,111 +0,0 @@
-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 };