@dbcdk/react-components 0.0.103 → 0.0.104

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

package/dist/components/media-card/MediaCard.cjs

@@ -0,0 +1,60 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./MediaCard.module.css');
+var SkeletonLoaderItem = require('../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function MediaCard({
+  src,
+  alt,
+  href,
+  loading = false,
+  aspectRatio = "1 / 1",
+  objectFit = "cover",
+  objectPosition = "center",
+  caption,
+  meta,
+  showCaption = Boolean(caption || meta),
+  className,
+  imageClassName,
+  linkProps
+}) {
+  const isInteractive = Boolean(href);
+  const hasCaption = showCaption && (caption || meta);
+  const content = /* @__PURE__ */ jsxRuntime.jsx(
+    "figure",
+    {
+      className: [styles__default.default.root, isInteractive ? styles__default.default.interactive : "", className != null ? className : ""].join(" "),
+      style: { "--media-card-aspect-ratio": aspectRatio },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.media, children: [
+        loading || !src ? /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, { height: "100%" }) : /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src,
+            alt,
+            className: [styles__default.default.image, imageClassName != null ? imageClassName : ""].join(" "),
+            style: {
+              objectFit,
+              objectPosition
+            }
+          }
+        ),
+        !loading && hasCaption && /* @__PURE__ */ jsxRuntime.jsxs("figcaption", { className: styles__default.default.caption, children: [
+          caption && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.captionText, children: caption }),
+          meta && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.meta, children: meta })
+        ] })
+      ] })
+    }
+  );
+  if (!href) {
+    return content;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: styles__default.default.link, ...linkProps, children: content });
+}
+
+exports.MediaCard = MediaCard;

package/dist/components/media-card/MediaCard.d.ts

@@ -0,0 +1,19 @@
+import type { AnchorHTMLAttributes, CSSProperties, ReactNode } from 'react';
+type AspectRatio = '1 / 1' | '4 / 3' | '3 / 4' | '16 / 9' | string;
+export type MediaCardProps = {
+    src?: string;
+    alt: string;
+    href?: string;
+    loading?: boolean;
+    aspectRatio?: AspectRatio;
+    objectFit?: CSSProperties['objectFit'];
+    objectPosition?: CSSProperties['objectPosition'];
+    caption?: ReactNode;
+    meta?: ReactNode;
+    showCaption?: boolean;
+    className?: string;
+    imageClassName?: string;
+    linkProps?: Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'children'>;
+};
+export declare function MediaCard({ src, alt, href, loading, aspectRatio, objectFit, objectPosition, caption, meta, showCaption, className, imageClassName, linkProps, }: MediaCardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/media-card/MediaCard.js

@@ -0,0 +1,54 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import styles from './MediaCard.module.css';
+import { SkeletonLoaderItem } from '../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
+
+function MediaCard({
+  src,
+  alt,
+  href,
+  loading = false,
+  aspectRatio = "1 / 1",
+  objectFit = "cover",
+  objectPosition = "center",
+  caption,
+  meta,
+  showCaption = Boolean(caption || meta),
+  className,
+  imageClassName,
+  linkProps
+}) {
+  const isInteractive = Boolean(href);
+  const hasCaption = showCaption && (caption || meta);
+  const content = /* @__PURE__ */ jsx(
+    "figure",
+    {
+      className: [styles.root, isInteractive ? styles.interactive : "", className != null ? className : ""].join(" "),
+      style: { "--media-card-aspect-ratio": aspectRatio },
+      children: /* @__PURE__ */ jsxs("div", { className: styles.media, children: [
+        loading || !src ? /* @__PURE__ */ jsx(SkeletonLoaderItem, { height: "100%" }) : /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt,
+            className: [styles.image, imageClassName != null ? imageClassName : ""].join(" "),
+            style: {
+              objectFit,
+              objectPosition
+            }
+          }
+        ),
+        !loading && hasCaption && /* @__PURE__ */ jsxs("figcaption", { className: styles.caption, children: [
+          caption && /* @__PURE__ */ jsx("span", { className: styles.captionText, children: caption }),
+          meta && /* @__PURE__ */ jsx("span", { className: styles.meta, children: meta })
+        ] })
+      ] })
+    }
+  );
+  if (!href) {
+    return content;
+  }
+  return /* @__PURE__ */ jsx("a", { href, className: styles.link, ...linkProps, children: content });
+}
+
+export { MediaCard };

package/dist/components/media-card/MediaCard.module.css

@@ -0,0 +1,92 @@
+.root {
+  --media-card-aspect-ratio: 1 / 1;
+
+  position: relative;
+  margin: 0;
+}
+
+.link {
+  display: block;
+  width: 100%;
+  color: inherit;
+  text-decoration: none;
+  border-radius: var(--border-radius-md);
+}
+
+.link:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.media {
+  position: relative;
+  aspect-ratio: var(--media-card-aspect-ratio);
+  width: 100%;
+  overflow: hidden;
+  border-radius: var(--border-radius-md);
+  background: var(--card-bg-subtle);
+  box-shadow: var(--shadow-sm);
+}
+
+.image {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.interactive .image {
+  transition:
+    transform var(--transition-fast) var(--ease-standard),
+    filter var(--transition-fast) var(--ease-standard);
+}
+
+.link:hover .interactive .image {
+  transform: scale(1.02);
+}
+
+.caption {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: var(--spacing-xs);
+
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-sm);
+
+  color: var(--color-fg-inverse);
+  background: var(--overlay-scrim);
+  backdrop-filter: blur(var(--backdrop-blur));
+
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-tight);
+  letter-spacing: var(--letter-spacing-wide);
+}
+
+.captionText {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.meta {
+  flex-shrink: 0;
+  opacity: 0.8;
+  font-weight: var(--font-weight-default);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .interactive .image {
+    transition: none;
+  }
+
+  .link:hover .interactive .image {
+    transform: none;
+  }
+}