[docs] Replace react-inspector with custom TreeView implementation

[eps1lon]

Use our own TreeView instead of react-inspector for https://material-ui.com/customization/default-theme/ (i.e. dogfeeding).

• new version
• old version

Current bugs:

• keyboard navigation between items doesn't work (collapsing works but not up/down arrow). Any idea why @joshwooding ?

TODO:

• dark/light mode themes use syntax highlighting theme
• expand all
• expandPaths
• [ ] property preview for root object (feature cut, not that useful)
• hide expand icon when object has no properties

Feedback regarding TreeView API:

• naming of defaultCollapseIcon might be confusing: Does this mean the icon that is displayed when we can collapse or is this the icon which is displayed when the item is collapse i.e. when we can expand (the latter one is the case). I would suggest swapping the names so that you don't have to write defaultCollapseIcon={<ExpandIcon />} which adds some cognitive overload ("I have to use the icon indicating expand for collapseIcon")
• end icon is using terminology unknown to me. While leaf icon is just as "jargony" it's at least Math/CS jargon.

[mui-pr-bot]

No bundle size changes comparing 4bfc2e4...eb375bb

Generated by 🚫 dangerJS against eb375bb

[joshwooding]

Was trying to look into it but after building locally. I get a random error saying next-server can't find trim-right. It doesn't even look like the file reported uses trim-right either.

[eps1lon]

Was trying to look into it but after building locally. I get a random error saying next-server can't find trim-right. It doesn't even look like the file reported uses trim-right either.

We had some weird issues with netlify reporting the same error (we don't use trim-right anywhere anymore). Try clearing your node_modules and then docs/.next if that didn't resolve the issue.

[joshwooding]

So this is due to a limitation with the TreeView. https://github.com/mui-org/material-ui/blob/master/packages/material-ui-lab/src/TreeView/TreeView.js#L45 It looks for nodeId on its immediate child. ObjectTreeItem has nodeId but passes a different nodeId to TreeItem which breaks things.

[eps1lon]

So this is due to a limitation with the TreeView. /packages/material-ui-lab/src/TreeView/TreeView.js@master#L45 It looks for nodeId on its immediate child. ObjectTreeItem has nodeId but passes a different nodeId to TreeItem which breaks things.

I completely missed this response, thanks. I'll finish this PR over the week. Current version should have working keyboard navigation.

[oliviertassinari]

It's so cool to see our tree view used here 😍. I have noticed the following:

1. I think that we have an indent issue. Compare these two cases:

• 
  
• 
  

What do you think of adding an indent of the same size as the expand icon, for the leaf case?

2. We don't have enough contrast on the number type to reach the AA level. However; given that it seems to use the same style as the code formatting, I suspect this change https://github.com/mui-org/material-ui/pull/18283/files#r344488449 will fix the problem.