{"action":"created","issue":{"url":"https://api.github.com/repos/code-dot-org/code-dot-org/issues/9116","repository_url":"https://api.github.com/repos/code-dot-org/code-dot-org","labels_url":"https://api.github.com/repos/code-dot-org/code-dot-org/issues/9116/labels{/name}","comments_url":"https://api.github.com/repos/code-dot-org/code-dot-org/issues/9116/comments","events_url":"https://api.github.com/repos/code-dot-org/code-dot-org/issues/9116/events","html_url":"https://github.com/code-dot-org/code-dot-org/pull/9116","id":161773171,"number":9116,"title":"Use react-storyboook instead of hand-rolled styleguide","user":{"login":"pcardune","id":124827,"avatar_url":"https://avatars.githubusercontent.com/u/124827?v=3","gravatar_id":"","url":"https://api.github.com/users/pcardune","html_url":"https://github.com/pcardune","followers_url":"https://api.github.com/users/pcardune/followers","following_url":"https://api.github.com/users/pcardune/following{/other_user}","gists_url":"https://api.github.com/users/pcardune/gists{/gist_id}","starred_url":"https://api.github.com/users/pcardune/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pcardune/subscriptions","organizations_url":"https://api.github.com/users/pcardune/orgs","repos_url":"https://api.github.com/users/pcardune/repos","events_url":"https://api.github.com/users/pcardune/events{/privacy}","received_events_url":"https://api.github.com/users/pcardune/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":{"login":"Bjvanminnen","id":1767466,"avatar_url":"https://avatars.githubusercontent.com/u/1767466?v=3","gravatar_id":"","url":"https://api.github.com/users/Bjvanminnen","html_url":"https://github.com/Bjvanminnen","followers_url":"https://api.github.com/users/Bjvanminnen/followers","following_url":"https://api.github.com/users/Bjvanminnen/following{/other_user}","gists_url":"https://api.github.com/users/Bjvanminnen/gists{/gist_id}","starred_url":"https://api.github.com/users/Bjvanminnen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Bjvanminnen/subscriptions","organizations_url":"https://api.github.com/users/Bjvanminnen/orgs","repos_url":"https://api.github.com/users/Bjvanminnen/repos","events_url":"https://api.github.com/users/Bjvanminnen/events{/privacy}","received_events_url":"https://api.github.com/users/Bjvanminnen/received_events","type":"User","site_admin":false},"milestone":null,"comments":9,"created_at":"2016-06-22T20:05:23Z","updated_at":"2016-06-23T17:10:56Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/code-dot-org/code-dot-org/pulls/9116","html_url":"https://github.com/code-dot-org/code-dot-org/pull/9116","diff_url":"https://github.com/code-dot-org/code-dot-org/pull/9116.diff","patch_url":"https://github.com/code-dot-org/code-dot-org/pull/9116.patch"},"body":"tl;dr\r\n\r\n```\r\ncd apps\r\nnpm install\r\nnpm run storybook\r\n```\r\n\r\nopen http://localhost:9001 and see this beauty:\r\n\r\n<img width=\"1125\" alt=\"screen shot 2016-06-22 at 12 59 52 pm\" src=\"https://cloud.githubusercontent.com/assets/124827/16281511/9e8fad26-3879-11e6-93d9-461a47550859.png\">\r\n\r\nAnd then click on the question mark in the top right, and see even more details about the component, including the code that renders it:\r\n\r\n<img width=\"1125\" alt=\"screen shot 2016-06-22 at 12 59 42 pm\" src=\"https://cloud.githubusercontent.com/assets/124827/16281531/b5e22f80-3879-11e6-933b-81d4226284b3.png\">\r\n\r\nAnd the code to add a new component is as simple as:\r\n\r\n```javascript\r\nif (BUILD_STYLEGUIDE) {\r\n  SomeComponent.styleGuideExamples = storybook => {\r\n    return storybook\r\n      .storiesOf('SomeComponent', module)\r\n      .addWithInfo(\r\n        'Example #1',\r\n        'The first example is always the best example...',\r\n        () => <Component/>\r\n      )\r\n  };\r\n}\r\n```"},"comment":{"url":"https://api.github.com/repos/code-dot-org/code-dot-org/issues/comments/228117492","html_url":"https://github.com/code-dot-org/code-dot-org/pull/9116#issuecomment-228117492","issue_url":"https://api.github.com/repos/code-dot-org/code-dot-org/issues/9116","id":228117492,"user":{"login":"davidsbailey","id":8001765,"avatar_url":"https://avatars.githubusercontent.com/u/8001765?v=3","gravatar_id":"","url":"https://api.github.com/users/davidsbailey","html_url":"https://github.com/davidsbailey","followers_url":"https://api.github.com/users/davidsbailey/followers","following_url":"https://api.github.com/users/davidsbailey/following{/other_user}","gists_url":"https://api.github.com/users/davidsbailey/gists{/gist_id}","starred_url":"https://api.github.com/users/davidsbailey/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/davidsbailey/subscriptions","organizations_url":"https://api.github.com/users/davidsbailey/orgs","repos_url":"https://api.github.com/users/davidsbailey/repos","events_url":"https://api.github.com/users/davidsbailey/events{/privacy}","received_events_url":"https://api.github.com/users/davidsbailey/received_events","type":"User","site_admin":false},"created_at":"2016-06-23T17:10:56Z","updated_at":"2016-06-23T17:10:56Z","body":"OK, let's not block on that then. Storybook looks really cool! LGTM."}}
{"actor":{"display_login":"davidsbailey"}}