Merge pull request #2717 from bryceosterhaus/2716

chore: scrape API table for a specific specific named component
liferay · Nov 12, 2019 · f1d1746 · f1d1746
2 parents a35dd8f + 5a0b42f
commit f1d1746
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 12 deletions.
diff --git a/clayui.com/content/docs/components/forms/form.mdx b/clayui.com/content/docs/components/forms/form.mdx
@@ -62,4 +62,26 @@ Use `ClayForm.Text` for creating a caption on Form Groups.
 
 ## API
 
+### Form
+
 <div>[APITable "clay-form/src/Form.tsx"]</div>
+
+### Form.FeedbackGroup
+
+<div>[APITable "clay-form/src/Form.tsx#FeedbackGroup"]</div>
+
+### Form.FeedbackIndicator
+
+<div>[APITable "clay-form/src/Form.tsx#FeedbackIndicator"]</div>
+
+### Form.FeedbackItem
+
+<div>[APITable "clay-form/src/Form.tsx#FeedbackItem"]</div>
+
+### Form.Group
+
+<div>[APITable "clay-form/src/Form.tsx#Group"]</div>
+
+### Form.Text
+
+<div>[APITable "clay-form/src/Form.tsx#Text"]</div>
diff --git a/clayui.com/plugins/gatsby-remark-api-table/index.js b/clayui.com/plugins/gatsby-remark-api-table/index.js
@@ -38,23 +38,45 @@ module.exports = ({markdownAST}) => {
 			node =>
 				// eslint-disable-next-line no-async-promise-executor
 				new Promise(async resolve => {
-					const pathFile = path.resolve(
-						'../packages/',
-						node.value.split('"')[1]
-					);
+					/**
+					 * `.split()` is used to extract the file path from
+					 * a string like `[APITable "clay-form/src/Form.tsx#Text"]`
+					 */
+					const APITablePath = node.value.split('"')[1];
 
-					if (!fs.existsSync(pathFile)) {
+					/**
+					 * `.split()` is used remove the named component specified
+					 * and the filepath..
+					 */
+					const [fileName, componentName] = APITablePath.split('#');
+
+					const filePath = path.resolve('../packages/', fileName);
+
+					if (!fs.existsSync(filePath)) {
 						resolve(node);
 						return;
 					}
 
 					try {
-						const content = fs.readFileSync(pathFile, 'utf8');
-						const AST = await reactDocs.parse(content, null, null, {
-							filename: pathFile,
-						});
+						const content = fs.readFileSync(filePath, 'utf8');
+						const AST = await reactDocs.parse(
+							content,
+							componentName
+								? reactDocs.resolver.findAllComponentDefinitions
+								: null,
+							null,
+							{
+								filename: filePath,
+							}
+						);
+
+						const component = componentName
+							? AST.find(
+									comp => comp.displayName === componentName
+							  )
+							: AST;
 
-						const propsKeys = Object.keys(AST.props || {});
+						const propsKeys = Object.keys(component.props || {});
 
 						// eslint-disable-next-line require-atomic-updates
 						node.value = propsKeys.length
@@ -70,7 +92,7 @@ module.exports = ({markdownAST}) => {
 							</tr>
 						</thead>
 						<tbody>
-						${propsKeys.map(key => generateTr(AST.props[key], key)).join('')}
+						${propsKeys.map(key => generateTr(component.props[key], key)).join('')}
 						</tbody>
 						</table>`
 							: 'None.';

diff --git a/packages/clay-form/src/Form.tsx b/packages/clay-form/src/Form.tsx
@@ -16,7 +16,7 @@ interface IGroup extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 const Group = React.forwardRef<HTMLDivElement, IGroup>(
-	({children, className, small, ...otherProps}, ref) => (
+	({children, className, small, ...otherProps}: IGroup, ref) => (
 		<div
 			{...otherProps}
 			className={classNames(
@@ -33,6 +33,8 @@ const Group = React.forwardRef<HTMLDivElement, IGroup>(
 	)
 );
 
+Group.displayName = 'Group';
+
 const Text = React.forwardRef<
 	HTMLDivElement,
 	React.HTMLAttributes<HTMLDivElement>
@@ -46,6 +48,8 @@ const Text = React.forwardRef<
 	</div>
 ));
 
+Text.displayName = 'Text';
+
 const FeedbackGroup = React.forwardRef<
 	HTMLDivElement,
 	React.HTMLAttributes<HTMLDivElement>
@@ -59,6 +63,8 @@ const FeedbackGroup = React.forwardRef<
 	</div>
 ));
 
+FeedbackGroup.displayName = 'FeedbackGroup';
+
 const FeedbackItem = React.forwardRef<
 	HTMLDivElement,
 	React.HTMLAttributes<HTMLDivElement>
@@ -72,6 +78,8 @@ const FeedbackItem = React.forwardRef<
 	</div>
 ));
 
+FeedbackItem.displayName = 'FeedbackItem';
+
 interface IFeedbackIndicatorProps
 	extends React.HTMLAttributes<HTMLSpanElement> {
 	/**
@@ -103,6 +111,8 @@ const FeedbackIndicator = React.forwardRef<
 	)
 );
 
+FeedbackIndicator.displayName = 'FeedbackIndicator';
+
 const ClayForm = React.forwardRef<
 	HTMLFormElement,
 	React.HTMLAttributes<HTMLFormElement>
@@ -112,6 +122,8 @@ const ClayForm = React.forwardRef<
 	</form>
 ));
 
+ClayForm.displayName = 'ClayForm';
+
 export default Object.assign(ClayForm, {
 	FeedbackGroup,
 	FeedbackIndicator,