refactor: only export custom prop-type functions

.prettierrc.js

@@ -2,4 +2,13 @@ const { config } = require('@dhis2/cli-style')
 
 module.exports = {
     ...require(config.prettier),
+    overrides: [
+        {
+            files: '**/__testfixtures__/*.js',
+            options: {
+                // Codemod does not support spreading imports over multiple lines
+                printWidth: 10000,
+            },
+        },
+    ],
 }

codemods/__testfixtures__/.eslintrc.js

@@ -0,0 +1,11 @@
+const { config } = require('@dhis2/cli-style')
+
+module.exports = {
+    extends: [config.eslintReact],
+    rules: {
+        'no-unused-vars': 'off',
+        'no-undef': 'off',
+        'react/no-unused-prop-types': 'off',
+        'react/sort-prop-types': 'off',
+    },
+}

codemods/__testfixtures__/transforms-dhis2-prop-types-import-and-declarations.input.js

@@ -0,0 +1,19 @@
+import PropTypes from '@dhis2/prop-types'
+import React from 'react'
+
+const Child = () => <span>child</span>
+
+const MyComponent = ({ child }) => <div>{child}</div>
+
+const statusProp = PropTypes.mutuallyExclusive(['success', 'warning', 'error'], PropTypes.bool)
+
+MyComponent.propTypes = {
+    arr: PropTypes.arrayWithLength(1, 2, PropTypes.number),
+    cond: PropTypes.conditional(props => (props.multiple ? PropTypes.arrayOf(PropTypes.number) : PropTypes.number)),
+    multiple: PropTypes.bool,
+    success: statusProp,
+    warning: statusProp,
+    error: statusProp,
+    child: PropTypes.instanceOfComponent(Child),
+    errorMsg: PropTypes.requiredIf(props => props.error, PropTypes.string),
+}

codemods/__testfixtures__/transforms-dhis2-prop-types-import-and-declarations.output.js

@@ -0,0 +1,20 @@
+import { arrayWithLength, conditional, instanceOfComponent, mutuallyExclusive, requiredIf } from '@dhis2/prop-types'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const Child = () => <span>child</span>
+
+const MyComponent = ({ child }) => <div>{child}</div>
+
+const statusProp = mutuallyExclusive(['success', 'warning', 'error'], PropTypes.bool)
+
+MyComponent.propTypes = {
+    arr: arrayWithLength(1, 2, PropTypes.number),
+    cond: conditional(props => (props.multiple ? PropTypes.arrayOf(PropTypes.number) : PropTypes.number)),
+    multiple: PropTypes.bool,
+    success: statusProp,
+    warning: statusProp,
+    error: statusProp,
+    child: instanceOfComponent(Child),
+    errorMsg: requiredIf(props => props.error, PropTypes.string),
+}

codemods/__testfixtures__/transforms-dhis2-prop-types-import-and-static-declarations.input.js

@@ -0,0 +1,23 @@
+import PropTypes from '@dhis2/prop-types'
+import React from 'react'
+
+const statusProp = PropTypes.mutuallyExclusive(['success', 'warning', 'error'], PropTypes.bool)
+
+const Child = () => <span>child</span>
+
+export class MyComponent extends React.Component {
+    static propTypes = {
+        arr: PropTypes.arrayWithLength(1, 2, PropTypes.number),
+        cond: PropTypes.conditional(props => (props.multiple ? PropTypes.arrayOf(PropTypes.number) : PropTypes.number)),
+        multiple: PropTypes.bool,
+        success: statusProp,
+        warning: statusProp,
+        error: statusProp,
+        child: PropTypes.instanceOfComponent(Child),
+        errorMsg: PropTypes.requiredIf(props => props.error, PropTypes.string),
+    }
+
+    render() {
+        return <div>{this.props.child}</div>
+    }
+}

codemods/__testfixtures__/transforms-dhis2-prop-types-import-and-static-declarations.output.js

@@ -0,0 +1,24 @@
+import { arrayWithLength, conditional, instanceOfComponent, mutuallyExclusive, requiredIf } from '@dhis2/prop-types'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const statusProp = mutuallyExclusive(['success', 'warning', 'error'], PropTypes.bool)
+
+const Child = () => <span>child</span>
+
+export class MyComponent extends React.Component {
+    static propTypes = {
+        arr: arrayWithLength(1, 2, PropTypes.number),
+        cond: conditional(props => (props.multiple ? PropTypes.arrayOf(PropTypes.number) : PropTypes.number)),
+        multiple: PropTypes.bool,
+        success: statusProp,
+        warning: statusProp,
+        error: statusProp,
+        child: instanceOfComponent(Child),
+        errorMsg: requiredIf(props => props.error, PropTypes.string),
+    }
+
+    render() {
+        return <div>{this.props.child}</div>
+    }
+}

codemods/__testfixtures__/transforms-prop-types-import-and-declarations.input.js

@@ -0,0 +1,49 @@
+import React from 'react'
+import { any, array, arrayOf, bool, element, elementType, exact, func, instanceOf, node, number, object, objectOf, oneOf, oneOfType, shape, string, symbol } from 'prop-types'
+
+const MyComponent = () => {}
+
+const specialProp = shape({
+    flag: bool,
+    id: number,
+})
+
+MyComponent.propTypes = {
+    optionalArray: array,
+    optionalBool: bool,
+    optionalFunc: func,
+    optionalNumber: number,
+    optionalObject: object,
+    optionalString: string,
+    optionalSymbol: symbol,
+    optionalNode: node,
+    optionalElement: element,
+    optionalElementType: elementType,
+    optionalMessage: instanceOf(Message),
+    optionalEnum: oneOf(['News', 'Photos']),
+    optionalUnion: oneOfType([string, number, instanceOf(Message)]),
+    optionalArrayOf: arrayOf(number),
+    optionalObjectOf: objectOf(number),
+    optionalObjectWithShape: shape({
+        optionalProperty: string,
+        requiredProperty: number,
+    }),
+    optionalObjectWithStrictShape: exact({
+        optionalProperty: string,
+        requiredProperty: number,
+    }),
+    requiredFunc: func,
+    requiredAny: any,
+    aDeeplyNestedThing: arrayOf(
+        shape({
+            subList: arrayOf(
+                shape({
+                    id: number,
+                    content: oneOfType([bool, number, string]),
+                })
+            ),
+            id: oneOf([1, 2, 3]),
+        })
+    ),
+    aSpecialProp: specialProp,
+}

codemods/__testfixtures__/transforms-prop-types-import-and-declarations.output.js

@@ -0,0 +1,49 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const MyComponent = () => {}
+
+const specialProp = PropTypes.shape({
+    flag: PropTypes.bool,
+    id: PropTypes.number,
+})
+
+MyComponent.propTypes = {
+    optionalArray: PropTypes.array,
+    optionalBool: PropTypes.bool,
+    optionalFunc: PropTypes.func,
+    optionalNumber: PropTypes.number,
+    optionalObject: PropTypes.object,
+    optionalString: PropTypes.string,
+    optionalSymbol: PropTypes.symbol,
+    optionalNode: PropTypes.node,
+    optionalElement: PropTypes.element,
+    optionalElementType: PropTypes.elementType,
+    optionalMessage: PropTypes.instanceOf(Message),
+    optionalEnum: PropTypes.oneOf(['News', 'Photos']),
+    optionalUnion: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.instanceOf(Message)]),
+    optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
+    optionalObjectOf: PropTypes.objectOf(PropTypes.number),
+    optionalObjectWithShape: PropTypes.shape({
+        optionalProperty: PropTypes.string,
+        requiredProperty: PropTypes.number,
+    }),
+    optionalObjectWithStrictShape: PropTypes.exact({
+        optionalProperty: PropTypes.string,
+        requiredProperty: PropTypes.number,
+    }),
+    requiredFunc: PropTypes.func,
+    requiredAny: PropTypes.any,
+    aDeeplyNestedThing: PropTypes.arrayOf(
+        PropTypes.shape({
+            subList: PropTypes.arrayOf(
+                PropTypes.shape({
+                    id: PropTypes.number,
+                    content: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]),
+                })
+            ),
+            id: PropTypes.oneOf([1, 2, 3]),
+        })
+    ),
+    aSpecialProp: specialProp,
+}

codemods/__testfixtures__/transforms-prop-types-import-and-static-declarations.input.js

@@ -0,0 +1,53 @@
+import React from 'react'
+import { any, array, arrayOf, bool, element, elementType, exact, func, instanceOf, node, number, object, objectOf, oneOf, oneOfType, shape, string, symbol } from 'prop-types'
+
+const specialProp = shape({
+    flag: bool,
+    id: number,
+})
+
+export class MyComponent extends React.Component {
+    static propTypes = {
+        optionalArray: array,
+        optionalBool: bool,
+        optionalFunc: func,
+        optionalNumber: number,
+        optionalObject: object,
+        optionalString: string,
+        optionalSymbol: symbol,
+        optionalNode: node,
+        optionalElement: element,
+        optionalElementType: elementType,
+        optionalMessage: instanceOf(Message),
+        optionalEnum: oneOf(['News', 'Photos']),
+        optionalUnion: oneOfType([string, number, instanceOf(Message)]),
+        optionalArrayOf: arrayOf(number),
+        optionalObjectOf: objectOf(number),
+        optionalObjectWithShape: shape({
+            optionalProperty: string,
+            requiredProperty: number,
+        }),
+        optionalObjectWithStrictShape: exact({
+            optionalProperty: string,
+            requiredProperty: number,
+        }),
+        requiredFunc: func,
+        requiredAny: any,
+        aDeeplyNestedThing: arrayOf(
+            shape({
+                subList: arrayOf(
+                    shape({
+                        id: number,
+                        content: oneOfType([bool, number, string]),
+                    })
+                ),
+                id: oneOf([1, 2, 3]),
+            })
+        ),
+        aSpecialProp: specialProp,
+    }
+
+    render() {
+        return <h1>Hello</h1>
+    }
+}

codemods/__testfixtures__/transforms-prop-types-import-and-static-declarations.output.js

@@ -0,0 +1,53 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const specialProp = PropTypes.shape({
+    flag: PropTypes.bool,
+    id: PropTypes.number,
+})
+
+export class MyComponent extends React.Component {
+    static propTypes = {
+        optionalArray: PropTypes.array,
+        optionalBool: PropTypes.bool,
+        optionalFunc: PropTypes.func,
+        optionalNumber: PropTypes.number,
+        optionalObject: PropTypes.object,
+        optionalString: PropTypes.string,
+        optionalSymbol: PropTypes.symbol,
+        optionalNode: PropTypes.node,
+        optionalElement: PropTypes.element,
+        optionalElementType: PropTypes.elementType,
+        optionalMessage: PropTypes.instanceOf(Message),
+        optionalEnum: PropTypes.oneOf(['News', 'Photos']),
+        optionalUnion: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.instanceOf(Message)]),
+        optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
+        optionalObjectOf: PropTypes.objectOf(PropTypes.number),
+        optionalObjectWithShape: PropTypes.shape({
+            optionalProperty: PropTypes.string,
+            requiredProperty: PropTypes.number,
+        }),
+        optionalObjectWithStrictShape: PropTypes.exact({
+            optionalProperty: PropTypes.string,
+            requiredProperty: PropTypes.number,
+        }),
+        requiredFunc: PropTypes.func,
+        requiredAny: PropTypes.any,
+        aDeeplyNestedThing: PropTypes.arrayOf(
+            PropTypes.shape({
+                subList: PropTypes.arrayOf(
+                    PropTypes.shape({
+                        id: PropTypes.number,
+                        content: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]),
+                    })
+                ),
+                id: PropTypes.oneOf([1, 2, 3]),
+            })
+        ),
+        aSpecialProp: specialProp,
+    }
+
+    render() {
+        return <h1>Hello</h1>
+    }
+}

codemods/__testfixtures__/transforms-required-dhis2-prop-types-import-and-declarations.input.js

@@ -0,0 +1,19 @@
+import PropTypes from '@dhis2/prop-types'
+import React from 'react'
+
+const Child = () => <span>child</span>
+
+const MyComponent = ({ child }) => <div>{child}</div>
+
+const statusProp = PropTypes.mutuallyExclusive(['success', 'warning', 'error'], PropTypes.bool)
+
+MyComponent.propTypes = {
+    arr: PropTypes.arrayWithLength(1, 2, PropTypes.number).isRequired,
+    cond: PropTypes.conditional(props => (props.multiple ? PropTypes.arrayOf(PropTypes.number) : PropTypes.number)).isRequired,
+    multiple: PropTypes.bool.isRequired,
+    success: statusProp.isRequired,
+    warning: statusProp.isRequired,
+    error: statusProp.isRequired,
+    child: PropTypes.instanceOfComponent(Child).isRequired,
+    errorMsg: PropTypes.requiredIf(props => props.error, PropTypes.string).isRequired,
+}

codemods/__testfixtures__/transforms-required-dhis2-prop-types-import-and-declarations.output.js

@@ -0,0 +1,20 @@
+import { arrayWithLength, conditional, instanceOfComponent, mutuallyExclusive, requiredIf } from '@dhis2/prop-types'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const Child = () => <span>child</span>
+
+const MyComponent = ({ child }) => <div>{child}</div>
+
+const statusProp = mutuallyExclusive(['success', 'warning', 'error'], PropTypes.bool)
+
+MyComponent.propTypes = {
+    arr: arrayWithLength(1, 2, PropTypes.number).isRequired,
+    cond: conditional(props => (props.multiple ? PropTypes.arrayOf(PropTypes.number) : PropTypes.number)).isRequired,
+    multiple: PropTypes.bool.isRequired,
+    success: statusProp.isRequired,
+    warning: statusProp.isRequired,
+    error: statusProp.isRequired,
+    child: instanceOfComponent(Child).isRequired,
+    errorMsg: requiredIf(props => props.error, PropTypes.string).isRequired,
+}

codemods/__testfixtures__/transforms-required-dhis2-prop-types-import-and-static-declarations.input.js

@@ -0,0 +1,23 @@
+import PropTypes from '@dhis2/prop-types'
+import React from 'react'
+
+const statusProp = PropTypes.mutuallyExclusive(['success', 'warning', 'error'], PropTypes.bool).isRequired
+
+const Child = () => <span>child</span>
+
+export class MyComponent extends React.Component {
+    static propTypes = {
+        arr: PropTypes.arrayWithLength(1, 2, PropTypes.number).isRequired,
+        cond: PropTypes.conditional(props => (props.multiple ? PropTypes.arrayOf(PropTypes.number) : PropTypes.number)).isRequired,
+        multiple: PropTypes.bool.isRequired,
+        success: statusProp,
+        warning: statusProp,
+        error: statusProp,
+        child: PropTypes.instanceOfComponent(Child).isRequired,
+        errorMsg: PropTypes.requiredIf(props => props.error, PropTypes.string).isRequired,
+    }
+
+    render() {
+        return <div>{this.props.child}</div>
+    }
+}