add first initial structure

FreeCodeCamp · f36852a218b2a7e2ddbde48486fcdc0315cc6aed · pedronauck committed Oct 20, 2014 · Oct 20, 2014 · f36852a
commit f36852a218b2a7e2ddbde48486fcdc0315cc6aed
@@ -0,0 +1,13 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = spaces
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
@@ -0,0 +1,3 @@
+*.DS_Store
+*.log
+/node_modules
@@ -0,0 +1,3 @@
+example
+gulpfile.js
+.editorconfig
@@ -0,0 +1,3 @@
+language: node_js
+node_js:
+- '0.10'
@@ -0,0 +1,54 @@
+# Contributing to React Video
+
+So you're interested in giving us a hand? That's awesome! We've put together some brief guidelines that should help you get started quickly and easily.
+
+Please, if you see anything wrong you can fix/improve it :ghost:
+
+## Installing the project
+
+1. Fork this project on github
+1. Clone this project on your local
+1. Then, you need to install `node` and `npm` to run the mainly packages.
+1. After installed `node` and `npm`, run this script:
+
+```bash
+$ npm install
+```
+
+That's it! You're done.
+
+## How to work
+
+We are using a bunch of things to put all togethe and make the work easy.
+
+Dependency | Description
+---------- | -----------
+[NPM](http://npmjs.org) | Node package manager
+[Gulp](http://gulpjs.com/) | Run some tasks (bundle, server, etc)
+[BrowserSync](http://www.browsersync.io/) | Create a `localhost` server with livereload
+[Webpack](http://www.browsersync.io/) | Generated a UMD bundled version
+[Jest](http://facebook.github.io/jest/) | Run the tests
+
+So, have some scripts that you need to know to run the project locally. It's just fews, but it's very important.
+
+Command | Description
+------- | -----------
+`npm run bundle` | run `$ gulp bundle` task
+`npm start` | Run `$ gulp default` task
+`npm test` | Run all tests with Jest
+`gulp` | Default task that runs `gulp webpack`, `gulp server` and `gulp watch`
+`gulp webpack` | Run the Webpack bundle
+`gulp webpack -p` | Run the Webpack bundle minified
+`gulp css` | Compile `.styl` files
+`gulp css -p` | Compile `.styl` files in a minified version
+`gulp server` | Run the BrowserSync server
+`gulp bundle` | Make the entire bundle with Gulp (compressed and uncompreed version)
+`gulp watch` | Watch when the lib files change
+
+## Submitting a Pull request
+
+1. Create your feature branch: git checkout -b my-new-feature
+1. Commit your changes: git commit -m 'Add some feature'
+1. Push to the branch: git push origin my-new-feature
+1. Make sure that all bundles are passing in [TravisCI](https://travis-ci.org/pedronauck/react-video)
+1. Submit a pull request :D
@@ -0,0 +1,7 @@
+(The MIT License)
+
+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:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+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.
@@ -0,0 +1,82 @@
+# React Video
+
+![Git release](http://img.shields.io/github/release/pedronauck/react-video.svg?style=flat) ![Travis](http://img.shields.io/travis/pedronauck/react-video.svg?style=flat) ![license](http://img.shields.io/npm/l/react-video.svg?style=flat)
+
+[![NPM](https://nodei.co/npm/react-video.png)](https://nodei.co/npm/react-video/)
+
+React `<Video />` component to load video from Vimeo or Youtube across any device. Inspired by [PrettyEmbed.js](https://github.com/mike-zarandona/PrettyEmbed.js)
+
+## Install
+
+Installing this component is very easy and it has just one dependency: [React](http://facebook.github.io/react/downloads.html). So, you have a lot of options to do that:
+
+- Using NPM *~the quickest way~*
+```bash
+  $ npm install --save react-youtube
+```
+
+- Using Bower
+```bash
+  $ bower install --save react-youtube
+```
+
+- Or if you want to [download the lastest release](https://github.com/pedronauck/react-video/archive/v0.0.1.zip) and put in your website, it will work too!
+
+**NOTICE:** You need just one thing to make the component work. Put the [base component style](./dist/react-video.css) at the `<header>` tag. If you don't wanna use the `.css` extension, you can get the `.styl` or `.scss` extension at the folder `./lib`.
+
+Then you're done! :smile_cat:
+
+## Usage
+
+Using the component is simpler than installing. See an example with [browserify](http://truongtx.me/2014/07/18/using-reactjs-with-browserify-and-gulp/) to bundle your script:
+
+```javascript
+// browserify example here
+```
+
+If you decide to use just Javascript without any module loader, you can get the global variable `window.ReactVideo` *(or just `ReactVideo`)*:
+
+```javascript
+  /** @jsx React.DOM */
+
+  var Video = ReactVideo;
+  var App = React.createClass({
+    render: function() {
+      ...
+    }
+  });
+```
+
+## Behind the Scene
+
+There are some things that you should know about the component. The first one is the structure created inside by the component if you wish to stylize it.
+
+So, the semantic HTML structure will be something like this:
+
+```html
+  <!-- showing semantic structure -->
+```
+
+This is a very simple structure to stylize however you want. So, if you are lost, don't panic, there is a [real functional example](/example) that you can follow.
+
+The other thing that I have to share with you is that the component has some properties that you can use. Example:
+
+#### TODO: Talking about component default properties
+
+For more details, check out the API below.
+
+## Component API
+
+`<Video>` component:
+
+Property | Type | Default | Required | Description
+-------- | ---- | ------- | -------- |-----------
+propery | `Type` | 1 | no | Some description
+
+## Contributing
+
+Anyone can help make this project better - check out the [Contributing guide](CONTRIBUTING.md)!
+
+## License
+
+See the [License](LICENSE) file.
@@ -0,0 +1,32 @@
+{
+  "name": "react-video",
+  "version": "0.0.1",
+  "description": "React component to load video from Vimeo or Youtube across any device",
+  "homepage": "https://github.com/pedronauck/react-video",
+  "authors": [
+    "Pedro Nauck <pedronauck@gmail.com> (https://github.com/pedronauck)"
+  ],
+  "main": "dist/react-video.js",
+  "moduleType": [
+    "amd",
+    "globals",
+    "node"
+  ],
+  "keywords": [
+    "react",
+    "react-component",
+    "react-video",
+    "video",
+    "youtube",
+    "video",
+    "player"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}
@@ -0,0 +1,76 @@
+'use strict';
+
+var gulp = require('gulp'),
+    gutil = require('gulp-util'),
+    shell = require('gulp-shell'),
+    stylus = require('gulp-stylus'),
+    header = require('gulp-header'),
+    rename = require('gulp-rename'),
+    minifyCSS = require('gulp-minify-css'),
+    browserSync = require('browser-sync'),
+    argv = require('yargs').argv,
+    webpack = require('webpack'),
+    webpackConfig = require('./webpack.config.js'),
+    nib = require('nib');
+
+gulp.task('webpack', function(callback) {
+  var jsFilename = webpackConfig.output.filename;
+
+  if (argv.production || argv.p) {
+    webpackConfig.output.filename = gutil.replaceExtension(jsFilename, '.min.js');
+    webpackConfig.plugins = webpackConfig.plugins.concat(
+      new webpack.DefinePlugin({
+        'process.env': { 'NODE_ENV': JSON.stringify('production') }
+      }),
+      new webpack.optimize.DedupePlugin(),
+      new webpack.optimize.UglifyJsPlugin()
+    );
+  }
+
+  webpack(webpackConfig).run(function(err, stats) {
+    if (err) {
+      throw new gutil.PluginError('webpack', err);
+    }
+
+    gutil.log('[webpack]', stats.toString({ colors: true }));
+    callback();
+  });
+});
+
+gulp.task('css', function () {
+  if (argv.production || argv.p) {
+    return gulp.src('./dist/react-video.css')
+      .pipe(minifyCSS())
+      .pipe(rename({ suffix: '.min'}))
+      .pipe(header(require('./utils/banner')))
+      .pipe(gulp.dest('./dist'));
+  }
+  else {
+    return gulp.src('./lib/*.styl')
+      .pipe(stylus({ use: [nib()], errors: true }))
+      .pipe(header(require('./utils/banner')))
+      .pipe(gulp.dest('./dist'));
+  }
+});
+
+gulp.task('server', function() {
+  browserSync({
+    server: {
+      baseDir: ['example', 'dist']
+    }
+  });
+});
+
+gulp.task('watch', function() {
+  gulp.watch('./lib/**/*.jsx', ['webpack', browserSync.reload]);
+  gulp.watch('./lib/*.styl', ['css', browserSync.reload]);
+});
+
+gulp.task('bundle', shell.task([
+  'gulp webpack',
+  'gulp webpack -p',
+  'gulp css',
+  'gulp css -p'
+]));
+
+gulp.task('default', ['webpack', 'server', 'watch']);
@@ -0,0 +1,69 @@
+{
+  "name": "react-video",
+  "version": "0.0.1",
+  "description": "React component to load video from Vimeo or Youtube across any device",
+  "author": {
+    "name": "Pedro Nauck",
+    "email": "pedronauck@gmail.com",
+    "url": "https://github.com/pedronauck"
+  },
+  "bugs": {
+    "url": "https://github.com/pedronauck/react-video/issues"
+  },
+  "homepage": "https://github.com/pedronauck/react-video",
+  "license": "MIT",
+  "main": "dist/react-video.js",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/pedronauck/react-video"
+  },
+  "keywords": [
+    "react",
+    "react-component",
+    "react-video",
+    "video",
+    "youtube",
+    "video",
+    "player"
+  ],
+  "scripts": {
+    "bundle": "gulp bundle",
+    "start": "gulp",
+    "test": "jest"
+  },
+  "jest": {
+    "scriptPreprocessor": "./utils/jsx-preprocessor.js",
+    "unmockedModulePathPatterns": [
+      "./node_modules/react"
+    ],
+    "testFileExtensions": [
+      "js",
+      "jsx"
+    ],
+    "moduleFileExtensions": [
+      "js",
+      "jsx",
+      "json"
+    ]
+  },
+  "dependencies": {
+    "react": "^0.11.2"
+  },
+  "devDependencies": {
+    "browser-sync": "^1.5.2",
+    "gulp": "^3.8.6",
+    "gulp-header": "^1.2.1",
+    "gulp-minify-css": "^0.3.11",
+    "gulp-rename": "^1.2.0",
+    "gulp-shell": "^0.2.10",
+    "gulp-stylus": "^1.3.3",
+    "gulp-util": "^3.0.1",
+    "jest-cli": "^0.1.18",
+    "jsx-loader": "^0.11.2",
+    "lodash": "^2.4.1",
+    "nib": "^1.0.4",
+    "react-tools": "^0.11.2",
+    "webpack": "^1.4.4",
+    "yargs": "^1.3.2"
+  }
+}
@@ -0,0 +1,13 @@
+'use strict';
+
+module.exports = require('lodash').template([
+  '/*',
+  ' * React Video - <%= pkg.description %>',
+  ' * @version v<%= pkg.version %>',
+  ' * @link <%= pkg.homepage %>',
+  ' * @license <%= pkg.license %>',
+  ' * @author <%= pkg.author.name %> (<%= pkg.author.url %>)',
+  '*/\n',
+].join('\n'), {
+  pkg: require('../package.json')
+});
@@ -0,0 +1,13 @@
+/**
+ * Produces the same result as React.addons.classSet
+ * @param  {object} classes
+ * @return {string}
+ *
+ * @author Ciro S. Costa <https://github.com/cirocosta>
+ */
+
+module.exports = (classes) => {
+  return typeof classes !== 'object' ?
+    Array.prototype.join.call(arguments, ' ') :
+    Object.keys(classes).filter((className) => classes[className]).join(' ');
+};
@@ -0,0 +1,12 @@
+'use strict';
+
+var ReactTools = require('react-tools');
+
+module.exports = {
+  process: function (src, path) {
+    if (!path.match(/\.jsx$/))
+      return src;
+
+    return ReactTools.transform(src);
+  }
+};
@@ -0,0 +1,45 @@
+'use strict';
+
+var _ = require('lodash');
+var webpack = require('webpack');
+var banner = require('./utils/banner');
+var LIB_NAME = 'react-video';
+var GLOBAL_VAR = 'ReactVideo';
+
+module.exports = {
+  entry: './lib/' + LIB_NAME + '.jsx',
+  output: {
+    path: __dirname + '/dist',
+    filename: LIB_NAME + '.js',
+    libraryTarget: 'umd',
+    library: GLOBAL_VAR
+  },
+  externals: {
+    react: {
+      root: 'React',
+      commonjs: 'react',
+      commonjs2: 'react',
+      amd: 'react'
+    }
+  },
+  module: {
+    loaders: [{
+      test: /\.(js|jsx)$/,
+      loader: 'jsx-loader?harmony'
+    }, {
+      test: /\.(js|jsx)$/,
+      loader: 'jsx-loader?insertPragma=React.DOM'
+    }]
+  },
+  resolve: {
+    extensions: ['', '.js', '.jsx']
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
+      }
+    }),
+    new webpack.BannerPlugin(banner, { raw: true, entryOnly: true })
+  ]
+};