Update "Custom value component" docs page

- Move to new home in "Customizations" section
- Switch to using tabs
- Define example schema that features enum, default, and const
- Include example ValueComponent that references schema in logic

Author: gnidan

testsite/docs/demo-viewer/custom/values.mdx

@@ -0,0 +1,72 @@
+---
+description: customize display of values
+title: "🎨 Custom value Component"
+---
+
+import CodeBlock from "@theme/CodeBlock"
+import Schema from "@site/static/schemas/examples/custom/values.json"
+import JSONSchemaViewer from "@theme/JSONSchemaViewer"
+import ReactMarkdown from "react-markdown"
+import Tabs from "@theme/Tabs"
+import TabItem from "@theme/TabItem"
+
+# Custom value component
+
+<Tabs>
+  <TabItem value="Viewer" label="Viewer" default>
+    <JSONSchemaViewer
+      schema={Schema}
+      viewerOptions={{
+        ValueComponent: ({ value, schema }) => {
+            // render complex values as multiline JSON with 2 space indentation
+            if (!(["string", "number", "undefined"].includes(typeof value))) {
+                return <CodeBlock language="json">{`${
+                    JSON.stringify(value, null, 2)
+                }`}</CodeBlock>;
+            }
+
+            // display elementary values inline.
+            const component = <code>{`${value}`}</code>;
+
+            // if schema defines a default value, ensure it is bold wherever it
+            // appears (e.g. in an enum)
+            if (value === schema.default) {
+                return <strong>{component}</strong>
+            }
+
+            return component;
+        },
+      }}
+    />
+
+  </TabItem>
+  <TabItem value="viewerOptions" label="viewerOptions">
+        ```js
+        {
+            ValueComponent: ({ value, schema }) => {
+                // render complex values as multiline JSON with 2 space indentation
+                if (!(["string", "number", "undefined"].includes(typeof value))) {
+                    return <CodeBlock language="json">{`${
+                        JSON.stringify(value, null, 2)
+                    }`}</CodeBlock>;
+                }
+
+                // display elementary values inline.
+                const component = <code>{`${value}`}</code>;
+
+                // if schema defines a default value, ensure it is bold wherever it
+                // appears (e.g. in an enum)
+                if (value === schema.default) {
+                    return <strong>{component}</strong>
+                }
+
+                return component;
+            }
+        }
+        ```
+
+  </TabItem>
+  <TabItem value="JSON Schema" label="JSON Schema">
+        <CodeBlock language="json">{JSON.stringify(Schema, null, 2)}</CodeBlock>
+  </TabItem>
+</Tabs>

testsite/docs/demo-viewer/generic_keywords/customize_value_display.mdx

@@ -0,0 +1,21 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "CustomizationOptions",
+  "description": "JSON schema for customized options",
+  "type": "object",
+  "properties": {
+    "customField": {
+      "type": "string",
+      "description": "A customized or personalized field",
+      "enum": ["palette", "teddyBear", "tools", "laptop", "thread", "phone", "puzzle", "scissors", "hammer", "note"],
+      "default": "palette",
+      "examples": ["tools", "note"]
+    },
+    "customConstObject": {
+      "type": "object",
+      "const": { "version": 5 }
+    }
+  },
+  "required": ["customField"],
+  "additionalProperties": false
+}