@availity/mui-tree 0.2.1 → 0.2.3

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.2.3](https://github.com/Availity/element/compare/@availity/mui-tree@0.2.2...@availity/mui-tree@0.2.3) (2024-11-22)
+
+
+### Bug Fixes
+
+* **mui-tree:** don't export JsonViewer as default ([404861f](https://github.com/Availity/element/commit/404861f4cb98a0dc3237b60c4d199ab24bbb3447))
+
+## [0.2.2](https://github.com/Availity/element/compare/@availity/mui-tree@0.2.1...@availity/mui-tree@0.2.2) (2024-11-21)
+
+
+### Bug Fixes
+
+* **mui-tree:** export JsonViewer ([23f0c96](https://github.com/Availity/element/commit/23f0c9669af657f7332998ad57e54b7c4eaa598f))
+
 ## [0.2.1](https://github.com/Availity/element/compare/@availity/mui-tree@0.2.0...@availity/mui-tree@0.2.1) (2024-10-31)
 
 ### Dependency Updates

package/dist/index.d.mts

@@ -14,4 +14,10 @@ interface TreeItemProps extends TreeItem2Props {
 }
 declare const TreeItem: ({ children, label, slots, slotProps, truncate, ...rest }: TreeItemProps) => JSX.Element;
 
-export { DynamicTreeView, type DynamicTreeViewProps, TreeItem, type TreeItemProps, TreeView, type TreeViewProps };
+interface JsonViewerProps extends Omit<TreeViewProps, 'children'> {
+    /** Data to be rendered, can be most valid javascript objects, some uncommon types may not by fully supported - like cyclical objects, proxies, symbols as keys. */
+    data: Record<string, unknown>;
+}
+declare const JsonViewer: ({ data, ...rest }: JsonViewerProps) => JSX.Element;
+
+export { DynamicTreeView, type DynamicTreeViewProps, JsonViewer, type JsonViewerProps, TreeItem, type TreeItemProps, TreeView, type TreeViewProps };

package/dist/index.d.ts

@@ -14,4 +14,10 @@ interface TreeItemProps extends TreeItem2Props {
 }
 declare const TreeItem: ({ children, label, slots, slotProps, truncate, ...rest }: TreeItemProps) => JSX.Element;
 
-export { DynamicTreeView, type DynamicTreeViewProps, TreeItem, type TreeItemProps, TreeView, type TreeViewProps };
+interface JsonViewerProps extends Omit<TreeViewProps, 'children'> {
+    /** Data to be rendered, can be most valid javascript objects, some uncommon types may not by fully supported - like cyclical objects, proxies, symbols as keys. */
+    data: Record<string, unknown>;
+}
+declare const JsonViewer: ({ data, ...rest }: JsonViewerProps) => JSX.Element;
+
+export { DynamicTreeView, type DynamicTreeViewProps, JsonViewer, type JsonViewerProps, TreeItem, type TreeItemProps, TreeView, type TreeViewProps };

package/dist/index.js

@@ -50,6 +50,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   DynamicTreeView: () => DynamicTreeView,
+  JsonViewer: () => JsonViewer,
   TreeItem: () => TreeItem,
   TreeView: () => TreeView
 });
@@ -104,9 +105,38 @@ var DynamicTreeView = (_a) => {
   var _b = _a, { children, slots } = _b, rest = __objRest(_b, ["children", "slots"]);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_RichTreeView.RichTreeView, __spreadProps(__spreadValues({}, rest), { slots: __spreadProps(__spreadValues({}, slots), { item: TreeItem }), children }));
 };
+
+// src/lib/JsonViewer.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var isPrimitive = (value) => {
+  return ["string", "number", "boolean"].includes(typeof value);
+};
+var isObject = (value) => {
+  return !!value && typeof value === "object";
+};
+var getDetails = ({ data }) => {
+  return Object.entries(data).map((entry) => {
+    const [key, value] = entry;
+    if (isPrimitive(value)) {
+      const label = `${key}: ${value.toString()}`;
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TreeItem, { label, itemId: `${key}.${value}` }, `${key}.${value}`);
+    }
+    if (isObject(value)) {
+      const label = `${key}: ${Array.isArray(value) ? `[ ] ${value.length} items` : `{ } ${Object.keys(value).length} keys`}`;
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TreeItem, { label, itemId: key, children: getDetails({ data: value }) }, key);
+    }
+    return null;
+  });
+};
+var JsonViewer = (_a) => {
+  var _b = _a, { data } = _b, rest = __objRest(_b, ["data"]);
+  const details = getDetails({ data });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TreeView, __spreadProps(__spreadValues({}, rest), { children: details }));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DynamicTreeView,
+  JsonViewer,
   TreeItem,
   TreeView
 });

package/dist/index.mjs

@@ -79,8 +79,37 @@ var DynamicTreeView = (_a) => {
   var _b = _a, { children, slots } = _b, rest = __objRest(_b, ["children", "slots"]);
   return /* @__PURE__ */ jsx3(RichTreeView, __spreadProps(__spreadValues({}, rest), { slots: __spreadProps(__spreadValues({}, slots), { item: TreeItem }), children }));
 };
+
+// src/lib/JsonViewer.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var isPrimitive = (value) => {
+  return ["string", "number", "boolean"].includes(typeof value);
+};
+var isObject = (value) => {
+  return !!value && typeof value === "object";
+};
+var getDetails = ({ data }) => {
+  return Object.entries(data).map((entry) => {
+    const [key, value] = entry;
+    if (isPrimitive(value)) {
+      const label = `${key}: ${value.toString()}`;
+      return /* @__PURE__ */ jsx4(TreeItem, { label, itemId: `${key}.${value}` }, `${key}.${value}`);
+    }
+    if (isObject(value)) {
+      const label = `${key}: ${Array.isArray(value) ? `[ ] ${value.length} items` : `{ } ${Object.keys(value).length} keys`}`;
+      return /* @__PURE__ */ jsx4(TreeItem, { label, itemId: key, children: getDetails({ data: value }) }, key);
+    }
+    return null;
+  });
+};
+var JsonViewer = (_a) => {
+  var _b = _a, { data } = _b, rest = __objRest(_b, ["data"]);
+  const details = getDetails({ data });
+  return /* @__PURE__ */ jsx4(TreeView, __spreadProps(__spreadValues({}, rest), { children: details }));
+};
 export {
   DynamicTreeView,
+  JsonViewer,
   TreeItem,
   TreeView
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-tree",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Availity MUI Tree Component - part of the @availity/element design system",
   "keywords": [
     "react",

package/src/index.ts

@@ -1,3 +1,4 @@
 export * from './lib/TreeView';
 export * from './lib/DynamicTreeView';
 export * from './lib/TreeItem';
+export * from './lib/JsonViewer';

package/src/lib/JsonViewer.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import JsonViewer, { JsonViewerProps } from './JsonViewer';
+import { JsonViewer, JsonViewerProps } from './JsonViewer';
 // import README from '../README.md';
 
 const meta: Meta<typeof JsonViewer> = {

package/src/lib/JsonViewer.test.tsx

@@ -1,5 +1,5 @@
 import { render, fireEvent } from '@testing-library/react';
-import JsonViewer from './JsonViewer';
+import { JsonViewer } from './JsonViewer';
 
 const setup = (data: Record<string, unknown>) => render(<JsonViewer data={data} />);
 

package/src/lib/JsonViewer.tsx

@@ -35,9 +35,7 @@ const getDetails = ({ data }: JsonViewerProps): (JSX.Element | null)[] => {
   });
 };
 
-const JsonViewer = ({ data, ...rest }: JsonViewerProps): JSX.Element => {
+export const JsonViewer = ({ data, ...rest }: JsonViewerProps): JSX.Element => {
   const details = getDetails({ data });
   return <TreeView {...rest}>{details}</TreeView>;
 };
-
-export default JsonViewer;