AssetProviderPlugin - Docs update

docs/site/components/mdx-components.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import path from 'path';
+import path, { parse } from 'path';
 import Link from 'next/link';
 import {
   Heading,
@@ -53,6 +53,11 @@ const CodeTabsNameMap = new Map([
   ['android', 'Android'],
 ]);
 
+const ContentTabsNameMap = new Map([
+  ['json', 'JSON'],
+  ['tsx', 'TSX'],
+]);
+
 const CodeTabsMap = new Map([['gradle', GradleTab]]);
 
 /**
@@ -127,6 +132,27 @@ const PlatformTabs = (props: React.PropsWithChildren<unknown>) => {
   );
 };
 
+/**
+ * Tab section for Content Authoring. This should include tsx and/or example JSON files.
+ */
+const ContentTabs = (props: React.PropsWithChildren<unknown>) => {
+
+  const children = React.Children.toArray(props.children).filter((c: any) => {
+    return ContentTabsNameMap.has(c.props.mdxType.toLowerCase());
+  });
+
+  return (
+    <Tabs
+      nameMap={ContentTabsNameMap}
+      callback={(tabIndex: number) => {
+        const lang = (children[tabIndex] as any).props.mdxType.toLowerCase();
+      }}
+    >
+      {children}
+    </Tabs>
+  );
+};
+
 const langMap: Record<string, string> = {
   js: 'javascript',
   ts: 'typescript',
@@ -243,6 +269,8 @@ export const MDXComponents: MDXProviderComponents = {
 
   PlatformTabs: withRouter(PlatformTabs),
 
+  ContentTabs,
+
   table: Table,
   th: Th,
   tr: Tr,

docs/site/pages/plugins/asset-provider.mdx

@@ -7,8 +7,9 @@ platform: react
 
 The Asset Provider Plugin enables users to easily register UI components to render their assets. It's used internally by the [Reference Assets](../assets/reference). The matches follow the same rules as asset transforms (more specific matches take priority).
 
-### Usage
+##  Usage
 
+### Platform
 <PlatformTabs>
   <react>
 
@@ -35,7 +36,84 @@ const player = new ReactPlayer({
 })
 ```
 
-This will register a match on `{ type: 'custom-asset' }` and `{ type: 'custom', key: 'asset' }` in the view to use your React components.
-
+  This will register a match on `{ type: 'custom-asset' }` and `{ type: 'custom', key: 'asset' }` in the view to use your React components.
   </react>
 </PlatformTabs>
+
+### Content
+
+In this example, when your content has assets of type `custom-asset` and `custom`, they will render `<div>Hello World!</div>` and `<div>Other Custom Asset</div>`.
+
+<ContentTabs>
+  <tsx>
+
+```tsx
+import { Custom, CustomAsset, Collection } from 'my-assets';
+
+const view = (
+  <Collection>
+    <CustomAsset/>
+    <CustomAsset/>
+  </Collection>
+);
+```
+
+</tsx>
+  <json>
+
+```json
+{
+  "id": "test-flow",
+  "views": [
+    {
+      "id": "view-1",
+      "type": "collection",
+      "label": {
+        "asset": {
+          "id": "title",
+          "type": "text",
+          "value": "Collections are used to group assets."
+        }
+      },
+      "values": [
+        {
+          "asset": {
+            "id": "custom-1",
+            "type": "custom-asset",
+          }
+        },
+        {
+          "asset": {
+            "id": "custom-2",
+            "type": "custom",
+          }
+        }
+      ]
+    }
+  ],
+  "navigation": {
+    "BEGIN": "FLOW_1",
+    "FLOW_1": {
+      "startState": "VIEW_1",
+      "VIEW_1": {
+        "state_type": "VIEW",
+        "ref": "view-1",
+        "transitions": {
+          "*": "END_Done"
+        }
+      },
+      "END_Done": {
+        "state_type": "END",
+        "outcome": "DONE"
+      }
+    }
+  }
+}
+```
+
+  This will register a match on `{ type: 'custom-asset' }` and `{ type: 'custom', key: 'asset' }` in the view to use your React components.
+  </json>
+
+
+</ContentTabs>
+