{"action":"created","issue":{"url":"https://api.github.com/repos/plotly/dash/issues/207","repository_url":"https://api.github.com/repos/plotly/dash","labels_url":"https://api.github.com/repos/plotly/dash/issues/207/labels{/name}","comments_url":"https://api.github.com/repos/plotly/dash/issues/207/comments","events_url":"https://api.github.com/repos/plotly/dash/issues/207/events","html_url":"https://github.com/plotly/dash/pull/207","id":292964701,"number":207,"title":"187 support flow types","user":{"login":"mjclawar","id":16123745,"avatar_url":"https://avatars3.githubusercontent.com/u/16123745?v=4","gravatar_id":"","url":"https://api.github.com/users/mjclawar","html_url":"https://github.com/mjclawar","followers_url":"https://api.github.com/users/mjclawar/followers","following_url":"https://api.github.com/users/mjclawar/following{/other_user}","gists_url":"https://api.github.com/users/mjclawar/gists{/gist_id}","starred_url":"https://api.github.com/users/mjclawar/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mjclawar/subscriptions","organizations_url":"https://api.github.com/users/mjclawar/orgs","repos_url":"https://api.github.com/users/mjclawar/repos","events_url":"https://api.github.com/users/mjclawar/events{/privacy}","received_events_url":"https://api.github.com/users/mjclawar/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2018-01-30T22:39:59Z","updated_at":"2018-02-22T00:46:33Z","closed_at":null,"author_association":"NONE","pull_request":{"url":"https://api.github.com/repos/plotly/dash/pulls/207","html_url":"https://github.com/plotly/dash/pull/207","diff_url":"https://github.com/plotly/dash/pull/207.diff","patch_url":"https://github.com/plotly/dash/pull/207.patch"},"body":"### Description\r\nSupports creating docstrings using `react-docgen` for Dash components written _solely_ with Flow type annotations. This is a non-breaking change.\r\n\r\nThe new logic, as determined in discussion in #187 is:\r\n1. If a Dash component has `PropTypes`-generated typing, the docstring uses the `PropTypes`, _regardless of whether the component also has Flow types (current behavior)._\r\n2. Otherwise if a Dash component has Flow types but _not `PropTypes`_, the docstring now uses the objects generated by `react-docgen` from the Flow types (**new behavior**).\r\n \r\n### Implementation\r\nThere are no breaking changes, and all pre-existing tests for the `base_component` suite still pass. Unit tests were added by @coralvanda for the docstrings generated by Flow. The unit tests only added another `metadata.json` file for a Flow-generated `metadata.json` test example, and a [`TestFlowMetaDataConversions` `TestCase`](https://github.com/plotly/dash/blob/20f4b042948282d93dee559084c1c383bf5a65d7/tests/development/test_base_component.py#L760). \r\n\r\nAs an example, the new Flow support on the Python `dict` in [this gist](https://gist.github.com/mjclawar/f108ca3d5d3f9ad55016816e6edf202b) will create this docstring:\r\n```python\r\n\"\"\"\r\nA MyComponent component.\r\ntest description\r\n\r\nKeyword arguments:\r\n- requiredUnion (string | number; required)\r\n- optionalString (string; optional): A string that isn't required.\r\n- optionalBoolean (boolean; optional): A boolean test\r\n- optionalArray (list; optional): An array test with a particularly \r\nlong description that covers several lines. It includes the newline character \r\nand should span 3 lines in total.\r\n- requiredString (string; required): A required string\r\n- optionalSignature(shape) (optional): This is a test of an object's shape. optionalSignature(shape) has the following type: dict containing keys 'checked', 'children', 'customData', 'disabled', 'label', 'primaryText', 'secondaryText', 'style', 'value'.\r\n  Those keys have the following types: \r\n  - checked (boolean; optional)\r\n  - children (a list of or a singular dash component, string or number; optional)\r\n  - customData (bool | number | str | dict | list; required): A test description\r\n  - disabled (boolean; optional)\r\n  - label (string; optional)\r\n  - primaryText (string; required): Another test description\r\n  - secondaryText (string; optional)\r\n  - style (dict; optional)\r\n  - value (bool | number | str | dict | list; required)\r\n- requiredNested (required): . requiredNested has the following type: dict containing keys 'customData', 'value'.\r\n  Those keys have the following types: \r\n  - customData (required): . customData has the following type: dict containing keys 'checked', 'children', 'customData', 'disabled', 'label', 'primaryText', 'secondaryText', 'style', 'value'.\r\n    Those keys have the following types: \r\n    - checked (boolean; optional)\r\n    - children (a list of or a singular dash component, string or number; optional)\r\n    - customData (bool | number | str | dict | list; required)\r\n    - disabled (boolean; optional)\r\n    - label (string; optional)\r\n    - primaryText (string; required)\r\n    - secondaryText (string; optional)\r\n    - style (dict; optional)\r\n    - value (bool | number | str | dict | list; required)\r\n  - value (bool | number | str | dict | list; required)\r\n- optionalNode (a list of or a singular dash component, string or number; optional): A node test\r\n\"\"\"\r\n``` \r\n\r\nThanks to @coralvanda, this now also supports nested object definitions for Flow, e.g. this section:\r\n```\r\n- requiredNested (required): . requiredNested has the following type: dict containing keys 'customData', 'value'.\r\n  Those keys have the following types: \r\n  - customData (required): . customData has the following type: dict containing keys 'checked', 'children', 'customData', 'disabled', 'label', 'primaryText', 'secondaryText', 'style', 'value'.\r\n    Those keys have the following types: \r\n    - checked (boolean; optional)\r\n    - children (a list of or a singular dash component, string or number; optional)\r\n    - customData (bool | number | str | dict | list; required)\r\n    - disabled (boolean; optional)\r\n    - label (string; optional)\r\n    - primaryText (string; required)\r\n    - secondaryText (string; optional)\r\n    - style (dict; optional)\r\n    - value (bool | number | str | dict | list; required)\r\n  - value (bool | number | str | dict | list; required)\r\n```\r\nwhich is pulled recursively from the `requiredNested` prop found [here in the gist](https://gist.github.com/mjclawar/f108ca3d5d3f9ad55016816e6edf202b#file-dash-metadata-with-flow-example-py-L265).\r\n\r\n### Related issue\r\nCloses #187 \r\nBumps version to 0.20.1, assuming this is appropriate. "},"comment":{"url":"https://api.github.com/repos/plotly/dash/issues/comments/367529078","html_url":"https://github.com/plotly/dash/pull/207#issuecomment-367529078","issue_url":"https://api.github.com/repos/plotly/dash/issues/207","id":367529078,"user":{"login":"chriddyp","id":1280389,"avatar_url":"https://avatars3.githubusercontent.com/u/1280389?v=4","gravatar_id":"","url":"https://api.github.com/users/chriddyp","html_url":"https://github.com/chriddyp","followers_url":"https://api.github.com/users/chriddyp/followers","following_url":"https://api.github.com/users/chriddyp/following{/other_user}","gists_url":"https://api.github.com/users/chriddyp/gists{/gist_id}","starred_url":"https://api.github.com/users/chriddyp/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/chriddyp/subscriptions","organizations_url":"https://api.github.com/users/chriddyp/orgs","repos_url":"https://api.github.com/users/chriddyp/repos","events_url":"https://api.github.com/users/chriddyp/events{/privacy}","received_events_url":"https://api.github.com/users/chriddyp/received_events","type":"User","site_admin":false},"created_at":"2018-02-22T00:46:33Z","updated_at":"2018-02-22T00:46:33Z","author_association":"OWNER","body":"> I think that I'd like to make a separate repo containing a sample flowtypes component that I can include across Dash's end-to-end integration tests\r\n\r\nI created this here: https://github.com/plotly/dash-flow-example. I'll add an integration test that includes these prop types once this PR is merged. Screenshot of the example app:\r\n![image](https://user-images.githubusercontent.com/1280389/36513890-ce5cdbf4-173f-11e8-9838-8e77a75acd0b.png)\r\n\r\n@mjclawar or @coralvanda - How would I convert these nested `PropTypes` into flow types?\r\n```\r\n\r\n    /**\r\n     * A list of options\r\n     * Multiline description\r\n     */\r\n    options: PropTypes.arrayOf(PropTypes.shape({\r\n        /**\r\n         * The label of the option\r\n         */\r\n        'label': PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\r\n\r\n        /**\r\n         * The value of the option\r\n         */\r\n        'value': PropTypes.string,\r\n    })),\r\n\r\n    /**\r\n     * A config object\r\n     */\r\n    config: PropTypes.shape({\r\n        /**\r\n         * The title option\r\n         */\r\n        'title': PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\r\n\r\n        /**\r\n         * The value of the option\r\n         */\r\n        'value': PropTypes.string,\r\n    }),\r\n```\r\nI'd like to add a couple of nested properties to the flow example: https://github.com/plotly/dash-flow-example/blob/master/src/components/ExampleFlowComponent.react.js#L3"}}
{"actor":{"display_login":"chriddyp"}}