[Docs] Platform consolidation (#287)

* platform consolidated getting started

* fix alert status reference

* add platform tabs for custom and reference assets

* re-add viewmodel + fragment docs

---------

Co-authored-by: nancywu1 <nancy_wu1@intuit.com>

docs/site/components/mdx-components.tsx

@@ -23,12 +23,19 @@ import {
   Tr,
   Td,
   Link as CLink,
+  Alert as ChakraAlert,
+  AlertStatus,
+  AlertTitle,
+  AlertDescription,
+  AlertIcon,
+  Box,
 } from '@chakra-ui/react';
 import { MDXProviderComponents } from '@mdx-js/react';
 import { withRouter, useRouter } from 'next/router';
 import { CodeHighlight } from './code-highlight';
 import { withBasePrefix } from './Image';
 import { PlayerTeam } from './PlayerTeam';
+import {AppContext} from "./Context";
 
 /**
  * Generic Tab Component that extends Chakra's Tab
@@ -67,7 +74,7 @@ const Tabs = (props: any) => {
   return (
     <ChakraTabs
       colorScheme="blue"
-      defaultIndex={props.defaultTab}
+      index={props.defaultTab}
       onChange={(index) => props.callback?.(index)}
     >
       <TabList>
@@ -226,6 +233,26 @@ export const InlineCode = (props: JSX.IntrinsicElements['code']) => {
   );
 };
 
+type ChakraAlertProps = React.PropsWithChildren<{
+  status?: AlertStatus;
+  title?: string;
+  description?: string;
+}>
+
+export const Alert = (props: ChakraAlertProps) => {
+  return (
+      <ChakraAlert status={props.status} variant='left-accent'>
+        <AlertIcon />
+        <Box flex={1}>
+          {props.title && <AlertTitle>{props.title}</AlertTitle>}
+          {props.description && <AlertDescription>{props.description}</AlertDescription>}
+          {props.children}
+        </Box>
+      </ChakraAlert>
+  );
+};
+
+
 /**
  * Anchor tab component wrapping Chakra's
  */
@@ -267,4 +294,8 @@ export const MDXComponents: MDXProviderComponents = {
   td: Td,
 
   inlineCode: InlineCode,
+
+  Alert,
+  AlertTitle,
+  AlertDescription,
 };

docs/site/pages/assets/custom.mdx

@@ -4,9 +4,10 @@ title: 'Custom Assets'
 
 # Custom Assets
 
-One of the conscious design decisions we made when building Player was to abstract away the actual asset implementation and open it up for users to bring their own when using Player. This way you can seamlessly integrate Player into your existing experiences and reuse UI assets you may have already built. Below we've outlined the way to build custom assets on the various platforms Player supports. 
+One of the conscious design decisions we made when building Player was to abstract away the actual asset implementation and open it up for users to bring their own when using Player. This way you can seamlessly integrate Player into your existing experiences and reuse UI assets you may have already built. Below we've outlined the way to build custom assets on the various platforms Player supports.
 
-## React
+<PlatformTabs>
+  <react>
 
 ### Create Your Asset
 
@@ -61,7 +62,8 @@ const CustomAssetComp = (props) => {
 
 This would automatically find the appropriate handler for the `props.header` asset and use that to render.
 
-## iOS
+  </react>
+  <ios>
 
 SwiftUI Player assets are made of 3 parts:
 
@@ -190,7 +192,7 @@ In either situation, your asset implementation needs only to override the view p
 
 ```swift
 class ActionAsset: UncontrolledAsset<ActionData> {
-		public override var view: AnyView { AnyView(ActionView(model: model)) }
+        public override var view: AnyView { AnyView(ActionView(model: model)) }
 }
 ```
 
@@ -230,11 +232,15 @@ In the latter case, it is recommended to extend the original asset, so as to avo
 
 ##### Why Would I Register my Asset as a Variant?
 
+
 1. Transform backed assets have functions that are attached to them, through shared JavaScript plugins. This simplifies setting data from the asset, by giving simple functions like `run` in the reference `ActionAsset` for example. Swift only asset types will not have any convenience functions.
 
 2. Registering as a variant allows you to maintain usage of the transform backed asset as well as your new asset, so both can be used by the same `SwiftUIPlayer` instance, including in the same flow. This also maintains the semantics of Player content, an `action` asset is always an `action` type of interaction, but with `metaData`, it can be displayed differently.
 
-## Android 
+
+
+  </ios>
+  <android>
 
 In order to render an asset a renderer for that type must be registered in the Android Player. If a renderer is found, then Player will delegate rendering when that type is encountered, otherwise Player will skip that node. Creating and registering such a renderer requires the following:
 
@@ -278,12 +284,12 @@ In most cases, there is some additional data that is used to make the rendering
 
 ```kotlin
 class TextAsset(assetContext: AssetContext) : DecodableAsset<TextAsset.Data>(Data.serializer()) {
-   
+
     @Serializable
     data class Data(
        val value: String
     )
-    
+
 }
 ```
 
@@ -335,7 +341,7 @@ A helper is provided to reduce overhead with rendering an asset into a layout. `
 
 ```kotlin
 // title_container is a view extension referencing a FrameLayout in an XML layout
-data.title.render() into title_container 
+data.title.render() into title_container
 ```
 
 #### Styling
@@ -408,3 +414,7 @@ This asset will only be used when decoding a view in the JSON tree that is type
 In this scenario, the custom action asset implementation would still have access to the transformed values of a regular action asset, such as the `run` method.
 
 When creating a new plugin, remember to register it when building the AndroidPlayer!
+
+
+  </android>
+</PlatformTabs>

docs/site/pages/assets/reference.mdx

@@ -4,9 +4,10 @@ title: 'Reference Assets'
 
 # Reference Assets
 
-To help users get started with Player, we have created a minimal set of useable assets for React, iOS and Android. These reference assets showcase the design philosophy we encourage when building your own asset sets. While these components are functional we _do not_ recommend shipping them to production as they have not been tested to be production ready. 
+To help users get started with Player, we have created a minimal set of useable assets for React, iOS and Android. These reference assets showcase the design philosophy we encourage when building your own asset sets. While these components are functional we _do not_ recommend shipping them to production as they have not been tested to be production ready.
 
-## React
+<PlatformTabs>
+  <react>
 
 For the React Player, we ship a package (`@player-ui/reference-assets-plugin-react`) that provides the reference set of assets. Each asset package exposes a `Component`, type, and optional transform. They also export hooks for easily consuming the transformed component and supplying your own UI for a custom look and feel. These components are all then exposed via a plugin that can be added to Player like so:
 
@@ -23,8 +24,8 @@ const reactPlayer = new ReactPlayer({
 
 The reference assets + React player can be viewed in [Storybook](/storybook-demo)
 
-
-## iOS 
+  </react>
+  <ios>
 
 Alongside distributing the `PlayerUI` pod, there is a `PlayerUI/ReferenceAssets` subspec used as examples of how Player APIs work for building assets. This pod uses the shared TypeScript transform functions that the React and Android players use for their reference assets, ensuring consistent behavior across platforms. These assets can be loaded into Player like so:
 
@@ -44,12 +45,16 @@ struct MyApp: View {
 }
 ```
 
-## Android 
+  </ios>
+  <android>
 
 Alongside distributing the Android Player framework, there is a reference assets library used as an example of how Player APIs work for building assets. These are intended to serve as a reference, but can be used early on in development as a means of understanding how to work with Player. This asset set uses the shared TypeScript transform functions that the Web and Android players use for their reference assets, ensuring consistent behavior across platforms. These assets can be loaded into Player like so:
 
 ```kotlin
 import com.intuit.player.android.reference.assets.ReferenceAssetsPlugin
 
 val player = AndroidPlayer(context, ReferenceAssetsPlugin())
-```
+```
+  </android>
+</PlatformTabs>
+