├── .gitignore ├── .npmignore ├── CHANGELOG ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── component ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── _babelrc ├── _editorconfig ├── _eslintrc ├── _gitignore ├── _npmignore ├── _travis.yml ├── css │ └── main.css ├── package.json ├── src │ └── Main.js ├── stories │ └── Main.js ├── storybook │ └── config.js └── tests │ ├── helpers │ └── setup.js │ └── specs │ └── Main.spec.js ├── package.json ├── slush-image.gif └── slushfile.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | temp 3 | *.log 4 | .idea 5 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | temp 3 | *.log 4 | .idea 5 | 6 | 7 | # don't ignore .npmignore files 8 | !.npmignore 9 | -------------------------------------------------------------------------------- /CHANGELOG: -------------------------------------------------------------------------------- 1 | v0.1.0: 2 | date: 2016-7-25 3 | changes: 4 | - Initial release. -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to lyef-react 2 | 3 | Please take a moment to review this document in order to make the contribution 4 | process easy and effective for everyone involved. 5 | 6 | Following these guidelines helps to communicate that you respect the time of 7 | the developers managing and developing this open source project. In return, 8 | they should reciprocate that respect in addressing your issue or assessing 9 | patches and features. 10 | 11 | 12 | ## Using the issue tracker 13 | 14 | The issue tracker is the preferred channel for [bug reports](#bug-reports), 15 | [features requests](#feature-requests) and [submitting pull 16 | requests](#pull-requests), but please respect the following restrictions: 17 | 18 | * Please **do not** use the issue tracker for personal support requests (use 19 | [Stack Overflow](http://stackoverflow.com) or IRC). 20 | 21 | * Please **do not** derail or troll issues. Keep the discussion on topic and 22 | respect the opinions of others. 23 | 24 | 25 | ## Bug reports 26 | 27 | A bug is a _demonstrable problem_ that is caused by the code in the repository. 28 | Good bug reports are extremely helpful - thank you! 29 | 30 | Guidelines for bug reports: 31 | 32 | 1. **Use the GitHub issue search** — check if the issue has already been 33 | reported. 34 | 35 | 2. **Check if the issue has been fixed** — try to reproduce it using the 36 | latest `master` or development branch in the repository. 37 | 38 | 3. **Isolate the problem** — create a [reduced test 39 | case](http://css-tricks.com/6263-reduced-test-cases/) and a live example. 40 | 41 | A good bug report shouldn't leave others needing to chase you up for more 42 | information. Please try to be as detailed as possible in your report. What is 43 | your environment? What steps will reproduce the issue? What browser(s) and OS 44 | experience the problem? What would you expect to be the outcome? All these 45 | details will help people to fix any potential bugs. 46 | 47 | Example: 48 | 49 | > Short and descriptive example bug report title 50 | > 51 | > A summary of the issue and the browser/OS environment in which it occurs. If 52 | > suitable, include the steps required to reproduce the bug. 53 | > 54 | > 1. This is the first step 55 | > 2. This is the second step 56 | > 3. Further steps, etc. 57 | > 58 | > `` - a link to the reduced test case 59 | > 60 | > Any other information you want to share that is relevant to the issue being 61 | > reported. This might include the lines of code that you have identified as 62 | > causing the bug, and potential solutions (and your opinions on their 63 | > merits). 64 | 65 | 66 | ## Feature requests 67 | 68 | Feature requests are welcome. But take a moment to find out whether your idea 69 | fits with the scope and aims of the project. It's up to *you* to make a strong 70 | case to convince the project's developers of the merits of this feature. Please 71 | provide as much detail and context as possible. 72 | 73 | 74 | ## Pull requests 75 | 76 | Good pull requests - patches, improvements, new features - are a fantastic 77 | help. They should remain focused in scope and avoid containing unrelated 78 | commits. 79 | 80 | **Please ask first** before embarking on any significant pull request (e.g. 81 | implementing features, refactoring code, porting to a different language), 82 | otherwise you risk spending a lot of time working on something that the 83 | project's developers might not want to merge into the project. 84 | 85 | Please adhere to the coding conventions used throughout a project (indentation, 86 | accurate comments, etc.) and any other requirements (such as test coverage). 87 | 88 | Follow this process if you'd like your work considered for inclusion in the 89 | project: 90 | 91 | 1. [Fork](http://help.github.com/fork-a-repo/) the project, clone your fork, 92 | and configure the remotes: 93 | 94 | ```bash 95 | # Clone your fork of the repo into the current directory 96 | git clone https://github.com//slush-lyef-react 97 | # Navigate to the newly cloned directory 98 | cd slush-lyef-react 99 | # Assign the original repo to a remote called "upstream" 100 | git remote add upstream https://github.com/lyef/slush-lyef-react 101 | ``` 102 | 103 | 2. If you cloned a while ago, get the latest changes from upstream: 104 | 105 | ```bash 106 | git checkout 107 | git pull upstream 108 | ``` 109 | 110 | 3. Create a new topic branch (off the main project development branch) to 111 | contain your feature, change, or fix: 112 | 113 | ```bash 114 | git checkout -b 115 | ``` 116 | 117 | 4. Commit your changes in logical chunks. Please adhere to these [git commit 118 | message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html) 119 | or your code is unlikely be merged into the main project. Use Git's 120 | [interactive rebase](https://help.github.com/articles/interactive-rebase) 121 | feature to tidy up your commits before making them public. 122 | 123 | 5. Locally merge (or rebase) the upstream development branch into your topic branch: 124 | 125 | ```bash 126 | git pull [--rebase] upstream 127 | ``` 128 | 129 | 6. Push your topic branch up to your fork: 130 | 131 | ```bash 132 | git push origin 133 | ``` 134 | 135 | 7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/) 136 | with a clear title and description. 137 | 138 | ## Conventions of commit messages 139 | 140 | Adding files on repo 141 | 142 | ```bash 143 | git commit -m "Add filename" 144 | ``` 145 | 146 | Updating files on repo 147 | 148 | ```bash 149 | git commit -m "Update filename, filename2, filename3" 150 | ``` 151 | 152 | Removing files on repo 153 | 154 | ```bash 155 | git commit -m "Remove filename" 156 | ``` 157 | 158 | Renaming files on repo 159 | 160 | ```bash 161 | git commit -m "Rename filename" 162 | ``` 163 | 164 | Fixing errors and issues on repo 165 | 166 | ```bash 167 | git commit -m "Fixed #issuenumber Message about this fix" 168 | ``` 169 | 170 | Adding features on repo 171 | 172 | ```bash 173 | git commit -m "Add Feature: nameoffeature Message about this feature" 174 | ``` 175 | 176 | Updating features on repo 177 | 178 | ```bash 179 | git commit -m "Update Feature: nameoffeature Message about this update" 180 | ``` 181 | 182 | Removing features on repo 183 | 184 | ```bash 185 | git commit -m "Remove Feature: nameoffeature Message about this" 186 | ``` 187 | 188 | Ignoring Travis CI build on repo 189 | 190 | ```bash 191 | git commit -m "Commit message here [ci-skip]" 192 | ``` 193 | 194 | **IMPORTANT**: By submitting a patch, you agree to allow the project owner to 195 | license your work under the same license as that used by the project. 196 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2016, lyef 4 | 5 | Permission is hereby granted, free of charge, to any person 6 | obtaining a copy of this software and associated documentation 7 | files (the "Software"), to deal in the Software without 8 | restriction, including without limitation the rights to use, 9 | copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the 11 | Software is furnished to do so, subject to the following 12 | conditions: 13 | 14 | The above copyright notice and this permission notice shall be 15 | included in all copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 18 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 19 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 20 | NON INFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 21 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 22 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 23 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 24 | OTHER DEALINGS IN THE SOFTWARE. 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Slush Lyef-react [![NPM version](https://badge-me.herokuapp.com/api/npm/slush-lyef-react.png)](http://badges.enytc.com/for/npm/slush-lyef-react) 2 | 3 | > A slush generator to create isolated and decoupled react componentes with es6. To understand more about the structure and philosophy, please take a look at the [generated structure here](https://github.com/lyef/lyef-react-component/). 4 | 5 | ![Terminal running Slush](slush-image.gif) 6 | 7 | ## Getting Started 8 | 9 | Install `slush-lyef-react` globally: 10 | 11 | ```bash 12 | $ npm install -g slush-lyef-react 13 | ``` 14 | 15 | ### Usage 16 | 17 | Create a new folder for your component: 18 | 19 | ```bash 20 | $ mkdir my-component 21 | ``` 22 | 23 | Run the generator from within the new folder: 24 | 25 | ```bash 26 | $ cd my-component 27 | $ slush lyef-react 28 | ``` 29 | 30 | ## Getting To Know Slush 31 | 32 | Slush is a tool that uses Gulp for project scaffolding. 33 | 34 | To find out more about Slush, check out the [documentation](https://github.com/slushjs/slush). 35 | 36 | ## Contributing 37 | 38 | See the [CONTRIBUTING Guidelines](https://github.com/lyef/slush-lyef-react/blob/master/CONTRIBUTING.md) 39 | 40 | ## Support 41 | If you have any problem or suggestion please open an issue [here](https://github.com/lyef/slush-lyef-react/issues). 42 | 43 | ## License 44 | 45 | [MIT License](https://github.com/lyef/slush-lyef-react/blob/master/LICENSE.md) @ [lyef](https://lyef.github.io) -------------------------------------------------------------------------------- /component/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | 1. Fork it! 4 | 2. Create your feature branch: `git checkout -b my-new-feature` 5 | 3. Commit your changes: `git commit -m 'Add some feature'` 6 | 4. Push to the branch: `git push origin my-new-feature` 7 | 8 | *Remember that we have a pre-push hook with steps that analyzes and prevents mistakes.* 9 | 10 | **After your pull request is merged**, you can safely delete your branch. 11 | 12 | ### Folders and Files 13 | 14 | ```sh 15 | . 16 | ├── css 17 | │   └── main.csas 18 | ├── dist 19 | │   ├── Main.js 20 | │   ├── Main.min.js 21 | ├── src 22 | │   ├── Main.js 23 | ├── stories 24 | │   └── Main.js 25 | ├── storybook 26 | │   ├── config.js 27 | │   └── webpack.config.js 28 | ├── tests 29 | │   ├── helpers 30 | │   │   └── setup.js 31 | │   └── specs 32 | │   ├── Main.spec.js 33 | ├── .babelrc 34 | ├── .editorconfig 35 | ├── .eslintrc 36 | ├── .gitignore 37 | ├── .npmignore 38 | ├── .travis.yml 39 | ├── CONTRIBUTING.md 40 | ├── LICENSE.md 41 | ├── README.md 42 | └── package.json 43 | ``` 44 | 45 | ### How to Develop with Storybook 46 | 47 | Create your [storybook stories](https://github.com/kadirahq/react-storybook/blob/master/docs/writing_stories.md) on `stories` folder. If you want to create another story file, remember to load on `.storybook/config.js`. With all stories, just run `npm run storybook` to open your isolated environment. 48 | 49 | If you want to know more about storybook, [see this link](https://github.com/kadirahq/react-storybook). 50 | 51 | ### Code Standarts 52 | 53 | We follow the [Airbnb React/JSX Style Guide](https://github.com/airbnb/javascript/tree/master/react). 54 | 55 | This project uses [eslint](http://eslint.org/) and [.editorconfig](http://editorconfig.org/) is defined to have indent_size of **4 spaces**. 56 | 57 | This project also uses [Husky](https://github.com/typicode/husky) to prevent push messy and wrong code. Please, don't be stupid, fix all errors before push =D 58 | 59 | ### Tasks 60 | 61 | * `npm run build`: build component to external use. 62 | * `npm run pub`: build and publish the component to npm. 63 | * `npm run storybook`: launch storybook to develop your component. 64 | * `npm run build-storybook`: build an static storybook to `.out` folder. 65 | * `npm run deploy-storybook`: build and deploy a storybook with component to gh-pages. 66 | * `npm run test`: run all specs. 67 | * `npm run test:tdd`: run all specs and watch. 68 | * `npm run test:coverage`: run all specs and coverage. 69 | * `npm run lint`: lint all files searching for errors. 70 | * `npm run lint:fix`: fix some lint errors. 71 | 72 | 73 | ### [<-- Back](https://github.com/lyef/<%= appName %>) 74 | -------------------------------------------------------------------------------- /component/LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Lyef, lyef.github.io 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /component/README.md: -------------------------------------------------------------------------------- 1 | # <%= appNameHumanized %> 2 | [![Build Status](https://travis-ci.org/lyef/<%= appName %>.svg?branch=master)](https://travis-ci.org/lyef/<%= appName %>) 3 | ![Badge size](https://badge-size.herokuapp.com/lyef/<%= appName %>/master/dist/Main.min.js.svg) 4 | ![Badge gzip size](https://badge-size.herokuapp.com/lyef/<%= appName %>/master/dist/Main.min.js.svg?compression=gzip) 5 | 6 | ## Demo 7 | 8 | [Live examples](https://lyef.github.io/<%= appName %>) 9 | 10 | ## Installation 11 | 12 | ```sh 13 | $ npm install --save <%= appName %> 14 | ``` 15 | 16 | *Remember to import the styles on `css/main.css` folder to your project.* 17 | 18 | ## Basic Usage 19 | 20 | ```jsx 21 | import <%= appNameCamel %> from '<%= appName %>'; 22 | 23 | ... 24 | render() { 25 | return ( 26 | <<%=appNameCamel %> /> 27 | ); 28 | } 29 | ... 30 | ``` 31 | 32 | ## Props 33 | 34 | - `prop` (type) - description 35 | - `prop` (type) - description 36 | - `prop` (type) - description 37 | 38 | ## Architecture 39 | 40 | We've developed this component using the following boilerplate: 41 | [lyef-react-component](https://github.com/lyef/lyef-react-component). 42 | 43 | To know more about the architecture or if you want to contribute with this component: 44 | [Contributing Documentation](https://github.com/lyef/<%= appName %>/blob/master/CONTRIBUTING.md). 45 | 46 | ## License 47 | 48 | [MIT License](https://github.com/lyef/<%= appName %>/blob/master/LICENSE.md) @ [lyef](https://lyef.github.io/) -------------------------------------------------------------------------------- /component/_babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["airbnb"] 3 | } 4 | -------------------------------------------------------------------------------- /component/_editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 4 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true -------------------------------------------------------------------------------- /component/_eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "airbnb", 3 | "env": { 4 | "es6": true 5 | }, 6 | "ecmaFeatures": { 7 | "modules": true 8 | }, 9 | "settings": { 10 | "react": { 11 | "pragma": "React", 12 | "version": "15.0" 13 | } 14 | }, 15 | "rules": { 16 | "indent": ["error", 4], 17 | "id-length": 0, 18 | "react/jsx-indent": [2, 4], 19 | "react/jsx-indent-props": [2, 4] 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /component/_gitignore: -------------------------------------------------------------------------------- 1 | #### joe made this: https://goel.io/joe 2 | 3 | #####=== Node ===##### 4 | 5 | # Logs 6 | logs 7 | *.log 8 | .nyc_output 9 | coverage/ 10 | 11 | # build 12 | .out 13 | 14 | # Runtime data 15 | pids 16 | *.pid 17 | *.seed 18 | 19 | # Directory for instrumented libs generated by jscoverage/JSCover 20 | lib-cov 21 | 22 | # Coverage directory used by tools like istanbul 23 | coverage 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # node-waf configuration 29 | .lock-wscript 30 | 31 | # Compiled binary addons (http://nodejs.org/api/addons.html) 32 | build/Release 33 | 34 | # Dependency directory 35 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git- 36 | node_modules 37 | 38 | # Debug log from npm 39 | npm-debug.log 40 | 41 | #####=== OSX ===##### 42 | .DS_Store 43 | .AppleDouble 44 | .LSOverride 45 | 46 | # Icon must end with two \r 47 | Icon 48 | 49 | 50 | # Thumbnails 51 | ._* 52 | 53 | # Files that might appear on external disk 54 | .Spotlight-V100 55 | .Trashes 56 | 57 | # Directories potentially created on remote AFP share 58 | .AppleDB 59 | .AppleDesktop 60 | Network Trash Folder 61 | Temporary Items 62 | .apdisk 63 | 64 | -------------------------------------------------------------------------------- /component/_npmignore: -------------------------------------------------------------------------------- 1 | coverage 2 | build -------------------------------------------------------------------------------- /component/_travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | node_js: 4 | - stable 5 | 6 | cache: 7 | directories: 8 | - node_modules 9 | 10 | script: 11 | - npm run lint 12 | - npm test 13 | -------------------------------------------------------------------------------- /component/css/main.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | font-size: 50px; 3 | } 4 | -------------------------------------------------------------------------------- /component/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "<%= appName %>", 3 | "version": "<%= appVersion %>", 4 | "description": "<%= appDescription %>", 5 | "main": "dist/Main.js", 6 | "scripts": { 7 | "build": "npm run clean && npm run babel && npm run minify", 8 | "babel": "./node_modules/.bin/babel src -d dist", 9 | "minify": "./node_modules/.bin/uglifyjs -c -m -o dist/Main.min.js dist/Main.js", 10 | "pub": "npm run build && npm publish", 11 | "clean": "rimraf dist", 12 | "start": "npm run storybook", 13 | "storybook": "./node_modules/.bin/start-storybook -p 9001 -c ./storybook", 14 | "build-storybook": "./node_modules/.bin/build-storybook -c ./storybook -o .out", 15 | "deploy-storybook": "storybook-to-ghpages", 16 | "test": "./node_modules/.bin/mocha --require tests/helpers/setup.js tests/specs/**/*.spec.js", 17 | "test:tdd": "./node_modules/.bin/mocha --require tests/helpers/setup.js tests/specs/**/*.spec.js -w", 18 | "test:coverage": "./node_modules/.bin/nyc --reporter=html --reporter=text ./node_modules/.bin/mocha tests/helpers/setup.js tests/specs/**/*.spec.js", 19 | "lint": "./node_modules/.bin/eslint src", 20 | "lint:fix": "./node_modules/.bin/eslint src --fix", 21 | "prepush": "npm run lint && npm test" 22 | }, 23 | "nyc": { 24 | "exclude": [ 25 | "tests", 26 | "dist" 27 | ] 28 | }, 29 | "repository": { 30 | "type": "git", 31 | "url": "git+ssh://git@github.com/lyef/<%= appName %>.git" 32 | }, 33 | "keywords": [ 34 | "react", 35 | "component", 36 | "es6", 37 | "storybook", 38 | "babel", 39 | "webpack" 40 | ], 41 | "author": "<%= authorName %>", 42 | "license": "MIT", 43 | "devDependencies": { 44 | "@personare/react-storybook-decorator-github-corner": "^0.1.4", 45 | "@storybook/react": "^3.2.6", 46 | "@storybook/storybook-deployer": "^2.0.0", 47 | "assert-equal-jsx": "^1.0.3", 48 | "babel-cli": "^6.11.4", 49 | "babel-core": "^6.10.4", 50 | "babel-loader": "^6.2.4", 51 | "babel-preset-airbnb": "^2.0.0", 52 | "babel-register": "^6.26.0", 53 | "chai": "^3.5.0", 54 | "enzyme": "^2.4.1", 55 | "eslint": "^2.13.1", 56 | "eslint-config-airbnb": "^9.0.1", 57 | "eslint-plugin-import": "^1.12.0", 58 | "eslint-plugin-jsx-a11y": "^1.5.5", 59 | "eslint-plugin-react": "^5.2.2", 60 | "husky": "^0.11.4", 61 | "jsdom": "^9.4.1", 62 | "mocha": "^2.5.3", 63 | "nyc": "^7.0.0", 64 | "raw-loader": "^0.5.1", 65 | "react-test-renderer": "^15.6.1", 66 | "rimraf": "^2.5.3", 67 | "sinon": "^1.17.4", 68 | "sinon-chai": "^2.8.0", 69 | "style-loader": "^0.13.1", 70 | "uglify-js": "^2.7.0" 71 | }, 72 | "dependencies": { 73 | "prop-types": "^15.5.10", 74 | "react": "^15.6.1", 75 | "react-dom": "^15.6.1" 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /component/src/Main.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | const Hello = ({ name }) => ( 5 |

Hello {name}!

6 | ); 7 | 8 | Hello.propTypes = { 9 | name: PropTypes.string.isRequired, 10 | }; 11 | 12 | export default Hello; 13 | -------------------------------------------------------------------------------- /component/stories/Main.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Hello from '../src/Main'; // This is our component 3 | import { storiesOf } from '@storybook/react'; 4 | 5 | storiesOf('Hello', module) 6 | .add('with lyef name', () => ( 7 | 8 | )) 9 | .add('with another name', () => ( 10 | 11 | )) 12 | -------------------------------------------------------------------------------- /component/storybook/config.js: -------------------------------------------------------------------------------- 1 | import { configure, addDecorator } from '@storybook/react'; 2 | import GithubCorner from '@personare/react-storybook-decorator-github-corner'; 3 | 4 | addDecorator(GithubCorner); 5 | 6 | import '../css/main.css'; 7 | 8 | function loadStories() { 9 | require('../stories/Main.js'); 10 | } 11 | 12 | configure(loadStories, module); 13 | -------------------------------------------------------------------------------- /component/tests/helpers/setup.js: -------------------------------------------------------------------------------- 1 | require('babel-register')(); 2 | 3 | var jsdom = require('jsdom').jsdom; 4 | 5 | var exposedProperties = ['window', 'navigator', 'document']; 6 | 7 | global.document = jsdom(''); 8 | global.window = document.defaultView; 9 | Object.keys(document.defaultView).forEach((property) => { 10 | if (typeof global[property] === 'undefined') { 11 | exposedProperties.push(property); 12 | global[property] = document.defaultView[property]; 13 | } 14 | }); 15 | 16 | global.navigator = { 17 | userAgent: 'node.js' 18 | }; 19 | 20 | documentRef = document; 21 | -------------------------------------------------------------------------------- /component/tests/specs/Main.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { expect } from 'chai'; 3 | import { shallow } from 'enzyme'; 4 | import assertEqualJSX from 'assert-equal-jsx'; 5 | import Component from '../../src/Main'; 6 | 7 | describe('Component Hello', () => { 8 | 9 | it('should have h1 to display the Hello', () => { 10 | const wrapper = shallow(); 11 | expect(wrapper.find('h1')).to.have.length(1); 12 | }); 13 | 14 | it('should have props for name', () => { 15 | const wrapper = shallow(); 16 | expect(wrapper.props().name).to.be.defined; 17 | }); 18 | 19 | it('should create a correct DOM structure', () => { 20 | const componentMock =

Hello lyef!

; 21 | assertEqualJSX(, componentMock); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "slush-lyef-react", 3 | "description": "A slush generator to create isolated and decoupled react componentes with es6.", 4 | "version": "1.1.0", 5 | "homepage": "https://github.com/lyef/slush-lyef-react", 6 | "author": { 7 | "name": "lyef", 8 | "email": "lyef@gmail.com" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git://github.com/lyef/slush-lyef-react.git" 13 | }, 14 | "bugs": { 15 | "url": "https://github.com/lyef/slush-lyef-react/issues" 16 | }, 17 | "license": "MIT", 18 | "main": "slushfile.js", 19 | "engines": { 20 | "node": ">= 0.10.26", 21 | "npm": ">=1.4.3" 22 | }, 23 | "scripts": { 24 | "test": "" 25 | }, 26 | "dependencies": { 27 | "slush": ">=1.0.0", 28 | "gulp": "^3.6.2", 29 | "gulp-template": "^0.1.1", 30 | "gulp-install": "^0.1.4", 31 | "gulp-conflict": "^0.1.1", 32 | "gulp-rename": "^1.2.0", 33 | "underscore.string": "^2.3.3", 34 | "inquirer": "^0.8.0", 35 | "iniparser": "^1.0.5" 36 | }, 37 | "keywords": [ 38 | "slushgenerator", 39 | "react", 40 | "component", 41 | "es6", 42 | "babel", 43 | "webpack", 44 | "storybook" 45 | ] 46 | } 47 | -------------------------------------------------------------------------------- /slush-image.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lyef/slush-lyef-react/9ac2214f56e9f958471d0dfc529138b51f335a11/slush-image.gif -------------------------------------------------------------------------------- /slushfile.js: -------------------------------------------------------------------------------- 1 | /* 2 | * slush-lyef-react 3 | * https://github.com/lyef/slush-lyef-react 4 | * 5 | * Copyright (c) 2016, lyef 6 | * Licensed under the MIT license. 7 | */ 8 | 9 | 'use strict'; 10 | 11 | var gulp = require('gulp'), 12 | install = require('gulp-install'), 13 | conflict = require('gulp-conflict'), 14 | template = require('gulp-template'), 15 | rename = require('gulp-rename'), 16 | _ = require('underscore.string'), 17 | inquirer = require('inquirer'), 18 | path = require('path'); 19 | 20 | function format(string) { 21 | var username = string.toLowerCase(); 22 | return username.replace(/\s/g, ''); 23 | } 24 | 25 | var defaults = (function () { 26 | var workingDirName = path.basename(process.cwd()), 27 | homeDir, osUserName, configFile, user; 28 | 29 | if (process.platform === 'win32') { 30 | homeDir = process.env.USERPROFILE; 31 | osUserName = process.env.USERNAME || path.basename(homeDir).toLowerCase(); 32 | } 33 | else { 34 | homeDir = process.env.HOME || process.env.HOMEPATH; 35 | osUserName = homeDir && homeDir.split('/').pop() || 'root'; 36 | } 37 | 38 | configFile = path.join(homeDir, '.gitconfig'); 39 | user = {}; 40 | 41 | if (require('fs').existsSync(configFile)) { 42 | user = require('iniparser').parseSync(configFile).user; 43 | } 44 | 45 | return { 46 | appName: workingDirName, 47 | userName: osUserName || format(user.name || ''), 48 | authorName: user.name || '', 49 | authorEmail: user.email || '' 50 | }; 51 | })(); 52 | 53 | gulp.task('default', function (done) { 54 | var prompts = [{ 55 | name: 'appName', 56 | message: 'What is the name of your component?', 57 | default: defaults.appName 58 | }, { 59 | name: 'appDescription', 60 | message: 'What is the description?' 61 | }, { 62 | name: 'appVersion', 63 | message: 'What is the version of your component?', 64 | default: '0.1.0' 65 | }, { 66 | name: 'authorName', 67 | message: 'What is the author name?', 68 | default: defaults.authorName 69 | }, { 70 | type: 'confirm', 71 | name: 'moveon', 72 | message: 'Continue?' 73 | }]; 74 | //Ask 75 | inquirer.prompt(prompts, 76 | function (answers) { 77 | if (!answers.moveon) { 78 | return done(); 79 | } 80 | answers.appNameSlug = _.slugify(answers.appName); 81 | answers.appNameCamel = _.camelize(answers.appName); 82 | answers.appNameHumanized = _.humanize(answers.appName); 83 | gulp.src(__dirname + '/component/**') 84 | .pipe(template(answers)) 85 | .pipe(rename(function (file) { 86 | if (file.basename[0] === '_') { 87 | file.basename = '.' + file.basename.slice(1); 88 | } 89 | })) 90 | .pipe(conflict('./')) 91 | .pipe(gulp.dest('./')) 92 | .pipe(install()) 93 | .on('end', function () { 94 | done(); 95 | }); 96 | }); 97 | }); 98 | --------------------------------------------------------------------------------