feat: Add parents field to prop information

Author: Aleksei Dmitriev

README.md

@@ -109,8 +109,12 @@ type PropFilter = (prop: PropItem, component: Component) => boolean;
 
 const options = {
   propFilter: (prop: PropItem, component: Component) => {
-    if (prop.parent) {
-      return !prop.parent.fileName.includes("node_modules");
+    if (prop.parents !== undefined && prop.parents.length > 0) {
+      const hasPropAdditionalDescription = prop.parents.find((parent) => {
+        return !parent.fileName.includes("node_modules");
+      });
+
+      return Boolean(hasPropAdditionalDescription);
     }
 
     return true;

src/__tests__/data/ButtonWithOnClickComponent.tsx

@@ -0,0 +1,14 @@
+import { FC, PropsWithRef } from 'react';
+
+type HTMLButtonProps = JSX.IntrinsicElements['button'];
+
+type Props = HTMLButtonProps & {
+  /** onClick event handler */
+  onClick?: HTMLButtonProps['onClick'];
+};
+
+const ButtonWithOnClickComponent: FC<Props> = props => {
+  return <button {...props} />;
+};
+
+export default ButtonWithOnClickComponent;

src/__tests__/parser.ts

@@ -12,8 +12,6 @@ import {
 import { check, checkComponent, fixturePath } from './testUtils';
 
 describe('parser', () => {
-  const children = { type: 'ReactNode', required: false, description: '' };
-
   it('should parse simple react class component', () => {
     check('Column', {
       Column: {
@@ -986,6 +984,39 @@ describe('parser', () => {
         });
       });
 
+      it('should allow filtering by parent interfaces', () => {
+        const propFilter: PropFilter = prop => {
+          if (prop.parents !== undefined && prop.parents.length > 0) {
+            const hasPropAdditionalDescription = prop.parents.find(parent => {
+              return !parent.fileName.includes('@types/react');
+            });
+
+            return Boolean(hasPropAdditionalDescription);
+          }
+
+          return true;
+        };
+
+        check(
+          'ButtonWithOnClickComponent',
+          {
+            ButtonWithOnClickComponent: {
+              onClick: {
+                type:
+                  '(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void',
+                required: false,
+                description: 'onClick event handler'
+              }
+            }
+          },
+          true,
+          '',
+          {
+            propFilter
+          }
+        );
+      });
+
       describe('skipPropsWithName', () => {
         it('should skip a single property in skipPropsWithName', () => {
           const propFilter = { skipPropsWithName: 'prop1' };

src/parser.ts

@@ -3,8 +3,6 @@ import * as path from 'path';
 import * as ts from 'typescript';
 
 import { buildFilter } from './buildFilter';
-import { symbol } from 'prop-types';
-import { check } from './__tests__/testUtils';
 
 // We'll use the currentDirectoryName to trim parent fileNames
 const currentDirectoryPath = process.cwd();
@@ -32,6 +30,7 @@ export interface PropItem {
   description: string;
   defaultValue: any;
   parent?: ParentType;
+  parents?: ParentType[];
 }
 
 export interface Method {
@@ -643,6 +642,7 @@ export class Parser {
       }
 
       const parent = getParentType(prop);
+      const parents = getParentsType(prop);
       const declarations = prop.declarations || [];
       const baseProp = baseProps.find(p => p.getName() === propName);
 
@@ -665,6 +665,7 @@ export class Parser {
         description: jsDocComment.fullComment,
         name: propName,
         parent,
+        parents,
         required,
         type
       };
@@ -1137,23 +1138,48 @@ export function getDefaultExportForFile(source: ts.SourceFile) {
   return identifier.length ? identifier : 'DefaultName';
 }
 
-function getParentType(prop: ts.Symbol): ParentType | undefined {
+function isTypeLiteral(node: ts.Node): node is ts.TypeLiteralNode {
+  return node.kind === ts.SyntaxKind.TypeLiteral;
+}
+
+function getParentsType(prop: ts.Symbol): ParentType[] | undefined {
   const declarations = prop.getDeclarations();
 
-  if (declarations == null || declarations.length === 0) {
+  if (declarations === undefined || declarations.length === 0) {
     return undefined;
   }
 
-  // Props can be declared only in one place
-  const { parent } = declarations[0];
+  const parents: ParentType[] = [];
 
-  if (!isInterfaceOrTypeAliasDeclaration(parent)) {
-    return undefined;
+  for (let declaration of declarations) {
+    const { parent } = declaration;
+
+    if (!isTypeLiteral(parent) && !isInterfaceOrTypeAliasDeclaration(parent)) {
+      continue;
+    }
+
+    type InterfaceOrTypeAlias =
+      | ts.TypeAliasDeclaration
+      | ts.InterfaceDeclaration;
+
+    const parentName =
+      'name' in parent
+        ? (parent as InterfaceOrTypeAlias).name.text
+        : 'TypeLiteral';
+    const { fileName } = (parent as
+      | InterfaceOrTypeAlias
+      | ts.TypeLiteralNode).getSourceFile();
+
+    parents.push({
+      fileName: trimFileName(fileName),
+      name: parentName
+    });
   }
 
-  const parentName = parent.name.text;
-  const { fileName } = parent.getSourceFile();
+  return parents;
+}
 
+function trimFileName(fileName: string) {
   const fileNameParts = fileName.split('/');
   const trimmedFileNameParts = fileNameParts.slice();
 
@@ -1170,8 +1196,31 @@ function getParentType(prop: ts.Symbol): ParentType | undefined {
     trimmedFileName = fileName;
   }
 
+  return trimmedFileName;
+}
+
+/**
+ * @deprecated
+ */
+function getParentType(prop: ts.Symbol): ParentType | undefined {
+  const declarations = prop.getDeclarations();
+
+  if (declarations == null || declarations.length === 0) {
+    return undefined;
+  }
+
+  // Props can be declared only in one place
+  const { parent } = declarations[0];
+
+  if (!isInterfaceOrTypeAliasDeclaration(parent)) {
+    return undefined;
+  }
+
+  const parentName = parent.name.text;
+  const { fileName } = parent.getSourceFile();
+
   return {
-    fileName: trimmedFileName,
+    fileName: trimFileName(fileName),
     name: parentName
   };
 }