{"action":"created","issue":{"url":"https://api.github.com/repos/powerhome/nitro-storybook/issues/65","repository_url":"https://api.github.com/repos/powerhome/nitro-storybook","labels_url":"https://api.github.com/repos/powerhome/nitro-storybook/issues/65/labels{/name}","comments_url":"https://api.github.com/repos/powerhome/nitro-storybook/issues/65/comments","events_url":"https://api.github.com/repos/powerhome/nitro-storybook/issues/65/events","html_url":"https://github.com/powerhome/nitro-storybook/pull/65","id":322063641,"number":65,"title":"Implement InputList component","user":{"login":"drborges","id":508128,"avatar_url":"https://avatars0.githubusercontent.com/u/508128?v=4","gravatar_id":"","url":"https://api.github.com/users/drborges","html_url":"https://github.com/drborges","followers_url":"https://api.github.com/users/drborges/followers","following_url":"https://api.github.com/users/drborges/following{/other_user}","gists_url":"https://api.github.com/users/drborges/gists{/gist_id}","starred_url":"https://api.github.com/users/drborges/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/drborges/subscriptions","organizations_url":"https://api.github.com/users/drborges/orgs","repos_url":"https://api.github.com/users/drborges/repos","events_url":"https://api.github.com/users/drborges/events{/privacy}","received_events_url":"https://api.github.com/users/drborges/received_events","type":"User","site_admin":false},"labels":[{"id":753564487,"url":"https://api.github.com/repos/powerhome/nitro-storybook/labels/Planetary","name":"Planetary","color":"2d3c96","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":5,"created_at":"2018-05-10T19:59:39Z","updated_at":"2018-05-11T13:35:29Z","closed_at":null,"author_association":"CONTRIBUTOR","pull_request":{"url":"https://api.github.com/repos/powerhome/nitro-storybook/pulls/65","html_url":"https://github.com/powerhome/nitro-storybook/pull/65","diff_url":"https://github.com/powerhome/nitro-storybook/pull/65.diff","patch_url":"https://github.com/powerhome/nitro-storybook/pull/65.patch"},"body":"### What does this PR doe?\r\n\r\nProvide an `InputList` component that can manage lists of input fields providing add/remove functionality out-of-the-box.\r\n\r\nHere're a few facts about the component:\r\n\r\n1. Parent components may have access to the underlying data by providing an `onChange` event handler to the `InputList`.\r\n2. The input field template is wrapped by `InputList.Input`, that tells the `InputList` how to render the input fields. The wrapped input will automatically receive from the `InputList` a `key`, `value`, `onRemove` and `onChange` props, which are used internally to keep the input field state up-to-date and to respond to item removal when `onRemove` is called.\r\n3. The developer is free to style/structure the list rows/inputs as needed since no assumptions in that regard are made by the component.\r\n4. Components wrapped by `InputList.Add` will receive an `onClick` prop which triggers adding new empty items to the input list.\r\n\r\n### Example\r\n\r\n```jsx\r\nconst incomeSources= [\r\n  {id: 1, source: \"Power\", income: 50000},\r\n  {id: 2, source: \"Retirement Funds\", income: 30000},\r\n]\r\n\r\nconst IncomeSourceInput = ({ value, onChange, onRemove }) => (\r\n  <div>\r\n    <input type=\"checkbox\" name=\"default\" value={value.default} onChange={onChange} />\r\n    <input name=\"source\" value={value.source} onChange={onChange} />\r\n    <input name=\"income\" value={value.income} onChange={onChange} />\r\n    <button type=\"button\" onClick={onRemove}>{\"Remove\"}</button>\r\n  </div>\r\n)\r\n\r\nconst Form = ({ }) => (\r\n  <InputList value={incomeSources} onChange=onChange()>\r\n    <InputList.Add>\r\n      <button type=\"button\">Add</button>\r\n    </InputList.Add>\r\n\r\n    <InputList.Input>\r\n      <IncomeSourceInput/>\r\n    </InputList.Input>\r\n  </InputList>\r\n)\r\n```\r\n\r\n### GIF says 1000 words\r\n\r\n![2018-05-10 16 44 43](https://user-images.githubusercontent.com/508128/39890562-864fc140-5471-11e8-999a-e188071be730.gif)\r\n"},"comment":{"url":"https://api.github.com/repos/powerhome/nitro-storybook/issues/comments/388365275","html_url":"https://github.com/powerhome/nitro-storybook/pull/65#issuecomment-388365275","issue_url":"https://api.github.com/repos/powerhome/nitro-storybook/issues/65","id":388365275,"user":{"login":"xjunior","id":8156,"avatar_url":"https://avatars3.githubusercontent.com/u/8156?v=4","gravatar_id":"","url":"https://api.github.com/users/xjunior","html_url":"https://github.com/xjunior","followers_url":"https://api.github.com/users/xjunior/followers","following_url":"https://api.github.com/users/xjunior/following{/other_user}","gists_url":"https://api.github.com/users/xjunior/gists{/gist_id}","starred_url":"https://api.github.com/users/xjunior/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/xjunior/subscriptions","organizations_url":"https://api.github.com/users/xjunior/orgs","repos_url":"https://api.github.com/users/xjunior/repos","events_url":"https://api.github.com/users/xjunior/events{/privacy}","received_events_url":"https://api.github.com/users/xjunior/received_events","type":"User","site_admin":false},"created_at":"2018-05-11T13:35:29Z","updated_at":"2018-05-11T13:35:29Z","author_association":"CONTRIBUTOR","body":"@wadewinningham @gmfvpereira @drborges  @thatjsguy we got to the agreement that the storybook should be merely that, a place to try out components. Ideally we should prep 2 PR's to move the components into nitro_react."}}
{"actor":{"display_login":"xjunior"}}