diff --git a/.changeset/fifty-apples-marry.md b/.changeset/fifty-apples-marry.md new file mode 100644 index 00000000..d8719fc7 --- /dev/null +++ b/.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. diff --git a/.changeset/pretty-carrots-raise.md b/.changeset/pretty-carrots-raise.md new file mode 100644 index 00000000..5b1dd3f1 --- /dev/null +++ b/.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. diff --git a/packages/pretty-proptypes/src/PropType/index.js b/packages/pretty-proptypes/src/PropType/index.js index 75011636..427d0fd1 100644 --- a/packages/pretty-proptypes/src/PropType/index.js +++ b/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 = { diff --git a/stories/FlowComponent.js b/stories/FlowComponent.js index f874874e..b75460c7 100644 --- a/stories/FlowComponent.js +++ b/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) =>
Hello World
; diff --git a/stories/TypeScriptComponent.tsx b/stories/TypeScriptComponent.tsx index be27a19b..1a1e3835 100644 --- a/stories/TypeScriptComponent.tsx +++ b/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) =>Hello World
;