@availity/mui-tree 0.1.1 → 0.2.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.2.0](https://github.com/Availity/element/compare/@availity/mui-tree@0.1.1...@availity/mui-tree@0.2.0) (2024-09-18)
+
+
+### Features
+
+* **mui-tree:** add JsonViewer component ([b17a9c8](https://github.com/Availity/element/commit/b17a9c82f4348fd51da10bd26a5944f32405db0c))
+
 ## [0.1.1](https://github.com/Availity/element/compare/@availity/mui-tree@0.1.0...@availity/mui-tree@0.1.1) (2024-09-11)
 
 

package/package.json

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

package/src/lib/DynamicTreeView.stories.tsx

@@ -24,7 +24,7 @@ const items: TreeViewBaseItem[] = [
     id: 'tree-1',
     label: 'Tree 1',
     children: [
-      { id: 'sub-tree-1.1', label: 'Sub Tree 1.1' },
+      { id: 'sub-tree-1.1', label: 'Sub Tree 1.1', children: [{ id: 'sub-tree-1.1.1', label: 'Sub Tree 1.1.1' }] },
       { id: 'sub-tree-1.2', label: 'Sub Tree 1.2' },
       { id: 'sub-tree-1.3', label: 'Sub Tree 1.3' },
     ],

package/src/lib/JsonViewer.stories.tsx

@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import JsonViewer, { JsonViewerProps } from './JsonViewer';
+// import README from '../README.md';
+
+const meta: Meta<typeof JsonViewer> = {
+  title: 'Components/TreeView/JsonViewer',
+  component: JsonViewer,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _JsonViewer: StoryObj<typeof JsonViewer> = {
+  render: ({ data, ...rest }: JsonViewerProps) => <JsonViewer data={data} {...rest} />,
+  args: {
+    data: { foo: { bar: { baz: ['stuff', 'things', 'etc.'] } } },
+  },
+};

package/src/lib/JsonViewer.test.tsx

@@ -0,0 +1,21 @@
+import { render, fireEvent } from '@testing-library/react';
+import JsonViewer from './JsonViewer';
+
+const setup = (data: Record<string, unknown>) => render(<JsonViewer data={data} />);
+
+describe('JsonViewer', () => {
+  test('does not render keys with null or undefined values without throwing error', () => {
+    const { getByText, queryByText } = setup({ foo: 'bar', baz: null, somethingElse: undefined });
+    const el = getByText(/bar/i);
+    expect(el).toBeInTheDocument();
+    const ghost = queryByText('baz');
+    expect(ghost).not.toBeInTheDocument();
+  });
+  test('renders deeply nested objects into the dom so they can be read by screenreaders even if parent elements are not open', () => {
+    const { getByText } = setup({ foo: { bar: { baz: ['stuff', 'things', 'etc.'] } } });
+    fireEvent.click(getByText('foo: { } 1 keys'));
+    fireEvent.click(getByText('bar: { } 1 keys'));
+    fireEvent.click(getByText('baz: [ ] 3 items'));
+    expect(getByText('0: stuff')).toBeInTheDocument();
+  });
+});

package/src/lib/JsonViewer.tsx

@@ -0,0 +1,43 @@
+import { TreeItem } from './TreeItem';
+import { TreeView, TreeViewProps } from './TreeView';
+
+export 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>;
+}
+
+const isPrimitive = (value: unknown): value is string | number | boolean => {
+  return ['string', 'number', 'boolean'].includes(typeof value);
+};
+
+const isObject = (value: unknown): value is Record<string, unknown> => {
+  return !!value && typeof value === 'object';
+};
+
+const getDetails = ({ data }: JsonViewerProps): (JSX.Element | null)[] => {
+  return Object.entries(data).map((entry) => {
+    const [key, value] = entry;
+
+    if (isPrimitive(value)) {
+      const label = `${key}: ${value.toString()}`;
+      return <TreeItem label={label} itemId={`${key}.${value}`} key={`${key}.${value}`} />;
+    }
+    if (isObject(value)) {
+      const label = `${key}: ${Array.isArray(value) ? `[ ] ${value.length} items` : `{ } ${Object.keys(value).length} keys`}`;
+      return (
+        <TreeItem label={label} itemId={key} key={key}>
+          {getDetails({ data: value })}
+        </TreeItem>
+      );
+    }
+
+    return null;
+  });
+};
+
+const JsonViewer = ({ data, ...rest }: JsonViewerProps): JSX.Element => {
+  const details = getDetails({ data });
+  return <TreeView {...rest}>{details}</TreeView>;
+};
+
+export default JsonViewer;