Integration with Doc Prop

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+- Doc Prop dependency and integration (via markdown placeholder on components readme.md).
+
 ## [2.1.2] - 2020-06-24
 ### Fixed
 - Link `Next Article` and `Previous Article` to work with trailing slash.

docs/README.md

@@ -3,3 +3,7 @@
 This is the UI for VTEX IO documentation at https://vtex.io/docs.
 
 To contribute to the available content, please refer to [IO Documentation](https://github.com/vtex-apps/io-documentation).
+
+## Doc Prop
+
+For Store Framework components, props can be documented using Doc Prop.

manifest.json

@@ -15,7 +15,8 @@
     "vtex.styleguide": "9.x",
     "vtex.store-drawer": "0.x",
     "vtex.docs-graphql": "1.x",
-    "vtex.device-detector": "0.x"
+    "vtex.device-detector": "0.x",
+    "vtex.doc-prop": "1.x"
   },
   "mustUpdateAt": "2018-09-05",
   "categories": [],

react/components/CustomTags.tsx

@@ -4,6 +4,7 @@ import React, { Fragment } from 'react'
 import { useRuntime } from 'vtex.render-runtime'
 import { useDevice } from 'vtex.device-detector'
 import { Link } from 'vtex.styleguide'
+import { DocProp } from 'vtex.doc-prop'
 
 import ArticleNav from './ArticleNav'
 import { slug } from '../modules'
@@ -12,6 +13,7 @@ import {
   removeIgnoredNodesFromDocs,
 } from '../modules/ignoreTokens'
 import CodeBlock from './CodeBlock'
+import { DOC_PROP_PLACEHOLDER_MATCH, DOC_PROP_PLACEHOLDER } from '../utils/constants'
 
 export const CustomRenderers = {
   root: ({ children }: { children: any[] }) => {
@@ -187,7 +189,9 @@ export const CustomRenderers = {
   ),
   paragraph: (props: any) => {
     if (props.children === '' || props.children.length === 0) return null
-    return <p className="t-body c-on-base mt0 lh-copy mb6">{props.children}</p>
+
+    return checkDocProp(props) ?
+    getDocProp(props) : (<p className="t-body c-on-base mt0 lh-copy mb6">{props.children}</p>)
   },
   strong: (props: any) => <strong className="fw7">{props.children}</strong>,
   table: (props: any) => (
@@ -225,3 +229,16 @@ function getHeadingSlug(childNodes: any) {
     (childNodes[0].props.children && slug(childNodes[0].props.children)) || ''
   )
 }
+
+function checkDocProp(props: any) {
+  const paragraphValue = props?.children[0]?.props?.value ?? ''
+
+  return paragraphValue.includes(DOC_PROP_PLACEHOLDER)
+}
+
+function getDocProp(props: any) {
+  const match = props.children[0].props.value.match(DOC_PROP_PLACEHOLDER_MATCH)
+  const blockInterface = match?.[1] ?? ''
+
+  return <DocProp blockInterface={blockInterface} />
+}

react/utils/constants.ts

@@ -0,0 +1,3 @@
+export const DOC_PROP_PLACEHOLDER = '%PROPS='
+
+export const DOC_PROP_PLACEHOLDER_MATCH = /\%PROPS=(.*)\%/