Exclude types with comments (#199)

.changeset/fifty-apples-marry.md

@@ -0,0 +1,6 @@
+---
+'pretty-proptypes': minor
+---
+
+Props that have comments which start with `eslint-ignore` or `@ts-` are no longer rendered,
+other surrounding comments are still rendered for the prop however.

.changeset/pretty-carrots-raise.md

@@ -0,0 +1,6 @@
+---
+'pretty-proptypes': minor
+---
+
+Props that have comments which contain `@internal` or `@access private` are no longer rendered to the props table,
+essentially having the prop and all of its comments hidden.

packages/pretty-proptypes/src/PropType/index.js

@@ -4,6 +4,39 @@ import React from 'react';
 import convert, { getKind, reduceToObj } from 'kind2string';
 import allComponents from '../components';
 
+const IGNORE_COMMENTS_STARTING_WITH = ['eslint-disable', '@ts-'];
+const HIDE_PROPS_THAT_CONTAIN = ['@internal', '@access private'];
+
+const shouldIgnoreComment = comment => {
+  if (!comment) {
+    return false;
+  }
+
+  for (let i = 0; i < IGNORE_COMMENTS_STARTING_WITH.length; i++) {
+    const value = IGNORE_COMMENTS_STARTING_WITH[i];
+    if (comment.startsWith(value)) {
+      return true;
+    }
+  }
+
+  return false;
+};
+
+const shouldHideProp = comment => {
+  if (!comment) {
+    return false;
+  }
+
+  for (let i = 0; i < HIDE_PROPS_THAT_CONTAIN.length; i++) {
+    const value = HIDE_PROPS_THAT_CONTAIN[i];
+    if (comment.includes(value)) {
+      return true;
+    }
+  }
+
+  return false;
+};
+
 const renderPropType = (
   propType: any,
   { overrides = {}, shouldCollapseProps, components }: any,
@@ -28,7 +61,9 @@ const renderPropType = (
 
   let description;
   if (propType.leadingComments) {
-    description = propType.leadingComments.reduce((acc, { value }) => acc.concat(`\n${value}`), '');
+    description = propType.leadingComments
+      .filter(({ value }) => !shouldIgnoreComment(value))
+      .reduce((acc, { value }) => acc.concat(`\n${value}`), '');
   }
 
   if (!propType.value) {
@@ -41,6 +76,10 @@ const renderPropType = (
     return null;
   }
 
+  if (shouldHideProp(description)) {
+    return null;
+  }
+
   const name = propType.kind === 'spread' ? '...' : convert(propType.key);
   const OverrideComponent = overrides[name];
   const commonProps = {

stories/FlowComponent.js

@@ -7,8 +7,10 @@ import React from 'react';
 
 type FlowComponentProps = {
   // This prop is required as it is not optional and has no default
+  // eslint-disable-next-line
   requiredProp: any,
   // This prop is a string
+  // @ts-ignore
   stringProp: string,
   // This prop is a number
   numberProp: number,
@@ -27,7 +29,9 @@ type FlowComponentProps = {
   // This prop is a mixed
   mixedProp: mixed,
   // This prop is a union
-  unionProp: 'hello' | 'world'
+  unionProp: 'hello' | 'world',
+  // @internal
+  hideProp: Boolean
 };
 
 const FlowComponent = (props: FlowComponentProps) => <p>Hello World</p>;

stories/TypeScriptComponent.tsx

@@ -11,8 +11,10 @@ interface DummyInterface {
 
 type TypeScriptComponentProps = {
   // This prop is required as it is not optional and has no default
+  // eslint-disable-next-line
   requiredProp: any;
   // This prop is a string
+  // @ts-ignore
   stringProp: string;
   // This prop is a number
   numberProp: number;
@@ -36,6 +38,8 @@ type TypeScriptComponentProps = {
   unsupportedProp: keyof DummyInterface;
   // This prop uses hyphens, so the type uses quotations around the key
   'quoted-prop': any;
+  // @internal
+  hideProp: Boolean;
 };
 
 const TypeScriptComponent = (props: TypeScriptComponentProps) => <p>Hello World</p>;