ObjectInspector: Add Name

.circleci/config.yml

@@ -165,7 +165,3 @@ workflows:
           requires:
             - lint
             - unit-tests
-          filters:
-            branches:
-              only:
-                - master

components/ObjectInspector/src/Context.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+export interface ObjectInspectorContextProps {
+  /** The key for the root object */
+  name?: string;
+}
+
+/** Context that gives sub-components access to top-level props */
+export const ObjectInspectorContext = React.createContext<
+  ObjectInspectorContextProps
+>({ name: "" });

components/ObjectInspector/src/ObjectInspector.test.tsx

@@ -56,6 +56,26 @@ describe("ObjectInspector", () => {
     });
   });
 
+  test("Displays names", async () => {
+    const nested = {
+      one: {
+        two: {
+          three: "test",
+        },
+      },
+    };
+    await act(async () => {
+      const { getByText } = render(<ObjectInspector data={nested} />);
+      waitFor(() => expect(getByText("nameTest:")).not.toBeDefined());
+    });
+    act(() => {
+      const { getByText } = render(
+        <ObjectInspector data={nested} name="nameTest" />
+      );
+      waitFor(() => expect(getByText("nameTest:")).toBeDefined());
+    });
+  });
+
   test("It calls onSelect correctly", async () => {
     const onSelect = jest.fn();
     const nested = {
@@ -77,7 +97,7 @@ describe("ObjectInspector", () => {
 
       await waitFor(() => expect(getByText('"test"')).toBeDefined());
 
-      const two = getByText("two:");
+      const two = getByText("two");
 
       fireEvent.click(two);
 

components/ObjectInspector/src/ObjectInspector.tsx

@@ -7,6 +7,7 @@ import {
   ResolvedASTNode,
 } from "@devtools-ds/object-parser";
 import { ThemeableElement, useTheme, ThemeProvider } from "@devtools-ds/themes";
+import { ObjectInspectorContext } from "./Context";
 import ObjectInspectorItem from "./ObjectInspectorItem";
 
 import styles from "./ObjectInspector.css";
@@ -15,6 +16,8 @@ interface ObjectInspectorProps
   extends Omit<ThemeableElement<"div">, "onSelect"> {
   /** JSON data to render in the tree. */
   data: SupportedTypes;
+  /** The key for the root object */
+  name?: string;
   /** Depth of the tree that is open at first render. */
   expandLevel: number;
   /** Whether to sort keys like the browsers do. */
@@ -36,6 +39,7 @@ export const ObjectInspector = (props: ObjectInspectorProps) => {
     theme,
     colorScheme,
     onSelect,
+    name,
     ...html
   } = props;
   const [ast, setAST] = useState<ASTNode | undefined>(undefined);
@@ -61,11 +65,13 @@ export const ObjectInspector = (props: ObjectInspectorProps) => {
     >
       {ast && (
         <ThemeProvider theme={currentTheme} colorScheme={currentColorScheme}>
-          <ObjectInspectorItem
-            ast={ast}
-            expandLevel={expandLevel}
-            onSelect={onSelect}
-          />
+          <ObjectInspectorContext.Provider value={{ name }}>
+            <ObjectInspectorItem
+              ast={ast}
+              expandLevel={expandLevel}
+              onSelect={onSelect}
+            />
+          </ObjectInspectorContext.Provider>
         </ThemeProvider>
       )}
     </div>

components/ObjectInspector/src/ObjectLabel.tsx

@@ -11,6 +11,7 @@ import {
   ASTNode,
 } from "@devtools-ds/object-parser";
 import ObjectValue from "./ObjectValue";
+import { ObjectInspectorContext } from "./Context";
 import styles from "./ObjectInspector.css";
 
 interface ObjectLabelProps extends ThemeableElement<"span"> {
@@ -176,6 +177,7 @@ export const ObjectLabel = (props: ObjectLabelProps) => {
     className,
     ...html
   } = props;
+  const { name } = React.useContext(ObjectInspectorContext);
   const { themeClass, currentTheme } = useTheme({ theme, colorScheme }, styles);
   const isPrototype = ast.isPrototype || false;
   const classes = makeClass(styles.objectLabel, themeClass, className, {
@@ -186,10 +188,20 @@ export const ObjectLabel = (props: ObjectLabelProps) => {
 
   /** The key for the node */
   const Key = () => {
+    let { key } = ast;
+    if (isRoot && name) key = name;
+
+    if (isRoot && !name) {
+      return null;
+    }
+
     return (
-      <span className={isPrototype ? styles.prototype : styles.key}>
-        {isRoot ? "" : `${ast.key}: `}
-      </span>
+      <>
+        <span className={isPrototype ? styles.prototype : styles.key}>
+          {key}
+        </span>
+        {key && <span className={styles.text}>:&nbsp;</span>}
+      </>
     );
   };
 

components/ObjectInspector/src/ObjectValue.tsx

@@ -3,6 +3,7 @@ import makeClass from "clsx";
 import { ThemeableElement, useTheme } from "@devtools-ds/themes";
 import { ASTNode, isObject, getPromiseState } from "@devtools-ds/object-parser";
 import styles from "./ObjectInspector.css";
+import { ObjectInspectorContext } from "./Context";
 
 interface ObjectValueProps extends ThemeableElement<"span"> {
   /** Type of object. */
@@ -18,20 +19,23 @@ interface ObjectValueProps extends ThemeableElement<"span"> {
  * @param value - The value string
  * @param valueClass - The class to apply to the value
  * @param showKey - Whether or not to show the key with the value
+ * @param name - The name if the value is the root
  * @param depth - Current depth (so we don't put a key on root)
  */
 const buildValue = (
   key: string,
   value: React.ReactNode,
   valueClass: string,
   showKey: boolean,
+  name: string,
   depth: number
 ) => {
-  const computedKey = key.includes("-") ? `"${key}"` : key;
+  let computedKey = key.includes("-") ? `"${key}"` : key;
   const isRoot = depth <= 0;
+  if (isRoot && name) computedKey = name;
   return (
     <span className={styles.text}>
-      {!isRoot && showKey && (
+      {(!isRoot || name) && showKey && (
         <>
           <span className={styles.key}>{computedKey}</span>
           <span>:&nbsp;</span>
@@ -45,6 +49,8 @@ const buildValue = (
 
 /** Display a leaf key-value pair with appropriate styles. */
 export const ObjectValue = (props: ObjectValueProps) => {
+  const context = React.useContext(ObjectInspectorContext);
+  const name = context?.name || "";
   const { ast, theme, showKey, colorScheme, className, ...html } = props;
   const { themeClass } = useTheme({ theme, colorScheme }, styles);
   const [asyncValue, setAsyncValue] = useState(<span />);
@@ -61,6 +67,7 @@ export const ObjectValue = (props: ObjectValueProps) => {
             `Promise { "${await getPromiseState(promise)}" }`,
             styles.key,
             showKey,
+            name,
             ast.depth
           )
         );
@@ -77,6 +84,7 @@ export const ObjectValue = (props: ObjectValueProps) => {
       String(ast.value),
       styles.number,
       showKey,
+      name,
       ast.depth
     );
   } else if (typeof ast.value === "boolean") {
@@ -86,6 +94,7 @@ export const ObjectValue = (props: ObjectValueProps) => {
       String(ast.value),
       styles.boolean,
       showKey,
+      name,
       ast.depth
     );
   } else if (typeof ast.value === "string") {
@@ -95,6 +104,7 @@ export const ObjectValue = (props: ObjectValueProps) => {
       `"${ast.value}"`,
       styles.string,
       showKey,
+      name,
       ast.depth
     );
   } else if (typeof ast.value === "undefined") {
@@ -104,6 +114,7 @@ export const ObjectValue = (props: ObjectValueProps) => {
       "undefined",
       styles.undefined,
       showKey,
+      name,
       ast.depth
     );
   } else if (typeof ast.value === "symbol") {
@@ -113,6 +124,7 @@ export const ObjectValue = (props: ObjectValueProps) => {
       ast.value.toString(),
       styles.string,
       showKey,
+      name,
       ast.depth
     );
   } else if (typeof ast.value === "function") {
@@ -122,19 +134,28 @@ export const ObjectValue = (props: ObjectValueProps) => {
       `${ast.value.name}()`,
       styles.key,
       showKey,
+      name,
       ast.depth
     );
   } else if (typeof ast.value === "object") {
     if (ast.value === null) {
       // Null
-      value = buildValue(ast.key, "null", styles.null, showKey, ast.depth);
+      value = buildValue(
+        ast.key,
+        "null",
+        styles.null,
+        showKey,
+        name,
+        ast.depth
+      );
     } else if (Array.isArray(ast.value)) {
       // Array
       value = buildValue(
         ast.key,
         `Array(${ast.value.length})`,
         styles.key,
         showKey,
+        name,
         ast.depth
       );
     } else if (ast.value instanceof Date) {
@@ -144,6 +165,7 @@ export const ObjectValue = (props: ObjectValueProps) => {
         `Date ${ast.value.toString()}`,
         styles.value,
         showKey,
+        name,
         ast.depth
       );
     } else if (ast.value instanceof RegExp) {
@@ -153,6 +175,7 @@ export const ObjectValue = (props: ObjectValueProps) => {
         ast.value.toString(),
         styles.regex,
         showKey,
+        name,
         ast.depth
       );
     } else if (ast.value instanceof Error) {
@@ -162,18 +185,20 @@ export const ObjectValue = (props: ObjectValueProps) => {
         ast.value.toString(),
         styles.error,
         showKey,
+        name,
         ast.depth
       );
     } else if (isObject(ast.value)) {
       // Object
-      value = buildValue(ast.key, "{…}", styles.key, showKey, ast.depth);
+      value = buildValue(ast.key, "{…}", styles.key, showKey, name, ast.depth);
     } else {
       // WeakMap, WeakSet, Custom Classes, etc
       value = buildValue(
         ast.key,
         ast.value.constructor.name,
         styles.key,
         showKey,
+        name,
         ast.depth
       );
     }

components/ObjectInspector/src/stories/Features.stories.tsx

@@ -72,6 +72,14 @@ export const DisablePrototypes = () => (
   <ObjectInspector includePrototypes={false} data={data} />
 );
 
+export const NamedObject = () => (
+  <ObjectInspector name="onSelect()" data={data} />
+);
+
+export const NamedValue = () => (
+  <ObjectInspector name="value" data="Some Data" />
+);
+
 export const FontInheritance = () => (
   <div style={{ fontSize: `16px` }}>
     <ObjectInspector sortKeys={false} data={data} />

components/ObjectInspector/src/stories/ObjectInspector.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { boolean, number } from "@storybook/addon-knobs";
+import { boolean, number, text } from "@storybook/addon-knobs";
 import { action } from "@storybook/addon-actions";
 import { ObjectInspector } from "../ObjectInspector";
 import notes from "../../README.md";
@@ -59,11 +59,20 @@ const data = {
   },
 };
 
+const nested = {
+  one: {
+    two: {
+      three: "test",
+    },
+  },
+};
+
 export const Playground = () => {
   const onSelect = action("onSelect");
   return (
     <ObjectInspector
-      data={data}
+      data={nested}
+      name={text("Name", "")}
       expandLevel={number("Expand Level", 1)}
       sortKeys={boolean("Sort Keys", true)}
       includePrototypes={boolean("Include Prototypes", true)}

components/ObjectInspector/src/stories/Overview.stories.mdx

@@ -60,6 +60,14 @@ Similarly, you can disable object `prototypes` from being included.
   <Story id="components-object-inspector-features--disable-prototypes" />
 </Canvas>
 
+### Named Root
+
+You can add a `name` to add a descriptive key to the root node,
+
+<Canvas>
+  <Story id="components-object-inspector-features--named-object" />
+</Canvas>
+
 ### onSelect
 
 You can use the `onSelect` prop to get the `@devtools-ds/object-parser` AST node for the currently selected part of the object.

packages/themes/src/AutoThemeProvider.tsx

@@ -3,14 +3,14 @@ import { all } from "./themes";
 import { ThemeableElement, ThemeContext } from "./utils";
 
 /** Determine if the current browser is FireFox */
-const isFirefox = () => {
+export const getBrowserTheme = () => {
   if (window?.navigator?.userAgent) {
     if (window.navigator.userAgent.toLowerCase().includes("firefox")) {
-      return true;
+      return "firefox";
     }
   }
 
-  return false;
+  return "chrome";
 };
 
 export interface AutoThemeProviderProps extends ThemeableElement<"div"> {
@@ -63,7 +63,7 @@ export const AutoThemeProvider = ({
 }: AutoThemeProviderProps) => {
   const isDark = useDarkMode();
   const colorScheme = propsColorScheme || (isDark ? "dark" : "light");
-  const theme = propsTheme || (isFirefox() ? "firefox" : "chrome");
+  const theme = propsTheme || getBrowserTheme();
   const style = {
     backgroundColor: all[theme][colorScheme].backgroundColor,
     color: all[theme][colorScheme].textColor,