├── .babelrc
├── .editorconfig
├── .gitignore
├── LICENSE
├── Makefile
├── README.md
├── build
    └── index.js
├── example
    ├── index.html
    └── index.js
├── index.js
├── package.json
└── screenshot.png


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["react", "es2015", "stage-0"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | end_of_line = lf
 5 | insert_final_newline = true
 6 | trim_trailing_whitespace = true
 7 | indent_style = space
 8 | indent_size = 4
 9 | charset = utf-8
10 | 
11 | [Makefile]
12 | indent_style = tab
13 | 
14 | [*.md]
15 | trim_trailing_whitespace = false
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | 
 6 | # Runtime data
 7 | pids
 8 | *.pid
 9 | *.seed
10 | 
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 | 
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 | 
17 | # nyc test coverage
18 | .nyc_output
19 | 
20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
21 | .grunt
22 | 
23 | # node-waf configuration
24 | .lock-wscript
25 | 
26 | # Compiled binary addons (http://nodejs.org/api/addons.html)
27 | build/Release
28 | 
29 | # Dependency directories
30 | node_modules
31 | jspm_packages
32 | 
33 | # Optional npm cache directory
34 | .npm
35 | 
36 | # Optional REPL history
37 | .node_repl_history
38 | 
39 | # Bundle
40 | example/bundle.js
41 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Personare
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
1 | 
2 | BUILD_FLAGS := --minified
3 | 
4 | include node_modules/react-fatigue-dev/Makefile
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-storybook-decorator-github-corner
 2 | 
 3 | > Storybook decorator to render the Github Corner. 
 4 | 
 5 | <p align="center">
 6 |   <img width="100%" src="https://raw.githubusercontent.com/Personare/react-storybook-decorator-github-corner/master/screenshot.png" alt="Screenshot" />
 7 | </p>
 8 | 
 9 | ## Installation 
10 | 
11 | ```bash
12 | npm install @personare/react-storybook-decorator-github-corner --save-dev
13 | ```
14 | 
15 | ## Using globally mode
16 | 
17 | Inside `.storybook/config.js`
18 | 
19 | ```js
20 | import { configure, addDecorator } from '@kadira/storybook';
21 | import GithubCorner from '@personare/react-storybook-decorator-github-corner';
22 | 
23 | addDecorator(GithubCorner);
24 | 
25 | function loadStories() {
26 |   require('../src/Button.story');
27 | }
28 | 
29 | configure(loadStories, module);
30 | ```
31 | 
32 | *Note: The link of repository is based on pages that are hosted on Github Pages (***.github.io)*
33 | 
34 | ## Examples
35 | 
36 | * [react-freshdesk-widget](https://personare.github.io/react-freshdesk-widget)
37 | * [lyef-pokemon](https://lyef.github.io/lyef-pokemon/)
38 | * [lyef-switch-button](https://lyef.github.io/lyef-switch-button/)
39 | * [lyef-flags](https://lyef.github.io/lyef-flags/)
40 | 
41 | ## Related
42 | 
43 | * [react-github-corner](https://github.com/skratchdot/react-github-corner) - component used by this decorator
44 | 
45 | ## License
46 | 
47 | [MIT © Personare](./LICENSE)
48 | 


--------------------------------------------------------------------------------
/build/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var _react=require('react');var _react2=_interopRequireDefault(_react);var _reactGithubCorner=require('react-github-corner');var _reactGithubCorner2=_interopRequireDefault(_reactGithubCorner);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}exports.default=function(storyFn){var location=window.parent.location;var hostname=location.hostname;var githubRepository='/';if(hostname.indexOf('github.io')>-1){var user=hostname.split('.')[0];var repository=location.pathname.replace('/iframe.html','');githubRepository='https://github.com/'+user+repository}return _react2.default.createElement('div',null,storyFn(),_react2.default.createElement('base',{target:'_parent'}),_react2.default.createElement(_reactGithubCorner2.default,{href:githubRepository}))};


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Storybook Decorator Github Corner Example</title>
 5 | </head>
 6 | <body>
 7 |     <div id="example"></div>
 8 |     <script src="bundle.js"></script>
 9 | </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/example/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | 
 4 | import decorator from '../';
 5 | 
 6 | ReactDOM.render(
 7 |     decorator(() => 'Little example'),
 8 |     document.getElementById('example')
 9 | );
10 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import GithubCorner from 'react-github-corner';
 3 | 
 4 | export default (storyFn) => {
 5 |     const location = window.parent.location;
 6 |     const hostname = location.hostname;
 7 | 
 8 |     let githubRepository = '/';
 9 | 
10 |     if (hostname.indexOf('github.io') > -1) {
11 |         const user = hostname.split('.')[0];
12 |         const repository = location.pathname.replace('/iframe.html', '');
13 |         githubRepository = `https://github.com/${user}${repository}`;
14 |     }
15 | 
16 |     return (
17 |         <div>
18 |             {storyFn()}
19 |             <base target="_parent" />
20 |             <GithubCorner href={githubRepository} />
21 |         </div>
22 |     );
23 | };
24 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@personare/react-storybook-decorator-github-corner",
 3 |   "version": "0.1.5",
 4 |   "description": "Storybook decorator to render the Github corner",
 5 |   "main": "build/index.js",
 6 |   "author": {
 7 |     "name": "Cauê Alves",
 8 |     "email": "cauealveseng@gmail.com",
 9 |     "url": "http://cauealves.com"
10 |   },
11 |   "scripts": {
12 |     "prepublish": "make build"
13 |   },
14 |   "keywords": [
15 |     "react",
16 |     "storybook",
17 |     "react-storybook",
18 |     "corner",
19 |     "github",
20 |     "banner"
21 |   ],
22 |   "license": "MIT",
23 |   "dependencies": {
24 |     "react": "^15.3.0",
25 |     "react-github-corner": "^0.3.0"
26 |   },
27 |   "devDependencies": {
28 |     "react-fatigue-dev": "github:tj/react-fatigue-dev"
29 |   },
30 |   "repository": {
31 |     "type": "git",
32 |     "url": "git+https://github.com/Personare/react-storybook-decorator-github-corner.git"
33 |   },
34 |   "bugs": {
35 |     "url": "https://github.com/Personare/react-storybook-decorator-github-corner/issues"
36 |   },
37 |   "homepage": "https://github.com/Personare/react-storybook-decorator-github-corner#readme",
38 |   "browserify": {
39 |     "transform": [
40 |       "babelify"
41 |     ]
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Personare/react-storybook-decorator-github-corner/471debf27527d87e3a0576644a4000adcfbca928/screenshot.png


--------------------------------------------------------------------------------