├── .gitignore
├── README.md
├── autoprefixer-sandbox
    ├── README.md
    ├── experiment.js
    └── package.json
├── context-callback
    ├── .babelrc
    ├── .eslintignore
    ├── .eslintrc
    ├── .gitignore
    ├── README.md
    ├── galaxy.png
    ├── js
    │   ├── Galaxy.js
    │   ├── Planet.js
    │   ├── SolarSystem.js
    │   └── main.js
    ├── package.json
    ├── server.js
    ├── webpack.config.js
    └── www
    │   └── index.html
├── css-modules-by-example
    ├── README.md
    ├── package.json
    ├── server.js
    ├── src
    │   ├── 0_Cat
    │   │   ├── Cat.css
    │   │   ├── Cat.js
    │   │   └── README.md
    │   ├── 1_Single_Class_Name
    │   │   ├── README.md
    │   │   ├── Widget1.css
    │   │   └── Widget1.js
    │   ├── 2_Multiple_Class_Names
    │   │   ├── README.md
    │   │   ├── Widget2.css
    │   │   └── Widget2.js
    │   ├── 3_Combination_Class_Names
    │   │   ├── README.md
    │   │   ├── Widget3.css
    │   │   └── Widget3.js
    │   ├── 4_Nested_Class_Names
    │   │   ├── README.md
    │   │   ├── Widget4.css
    │   │   └── Widget4.js
    │   ├── 5_Composition
    │   │   ├── README.md
    │   │   ├── Widget5.css
    │   │   ├── Widget5.js
    │   │   └── util.css
    │   ├── 6_Tag_Names
    │   │   ├── README.md
    │   │   ├── Widget6.css
    │   │   └── Widget6.js
    │   ├── 7_Media_Queries
    │   │   ├── README.md
    │   │   ├── Widget7.css
    │   │   └── Widget7.js
    │   └── index.js
    ├── webpack.config.js
    └── www
    │   └── index.html
├── install.rb
├── twemoji-sandbox
    ├── README.md
    ├── experiment.js
    └── package.json
└── yargs-sandbox
    ├── README.md
    ├── experiment.js
    └── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | React Samples
 2 | ---
 3 | 
 4 | Various isolated examples for React and other JavaScript packages.
 5 | 
 6 | 
 7 | Usage
 8 | ---
 9 | 
10 | To download just one of the samples, you can run this command. It will prompt you for which sample you want to download:
11 | 
12 | ```
13 | /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/ahfarmer/react-samples/master/install.rb)"
14 | ```
15 | 
16 | 
17 | More
18 | ---
19 | 
20 | For more React fun, see [javascriptstuff.com](https://www.javascriptstuff.com/)
21 | 


--------------------------------------------------------------------------------
/autoprefixer-sandbox/README.md:
--------------------------------------------------------------------------------
 1 | autoprefixer sandbox
 2 | ---
 3 | https://github.com/postcss/autoprefixer
 4 | 
 5 | A test to see what autoprefixer will print out when given different values for it's "browsers" option.
 6 | 
 7 | I was particularly interested in `display: flex` and iOS 8, because a client of mine wanted iOS 8 support, and I know that iOS 8 requires `display: flex` to be converted to `display: -webkit-flex;`.
 8 | 
 9 | 
10 | 
11 | Usage
12 | ---
13 | 
14 | ```
15 | node experiment.js
16 | ```
17 | 
18 | 
19 | 
20 | Results
21 | ---
22 | 
23 | `display: -webkit-flex` shows up in the CSS output when you add `iOS >= 8` to the browsers list.
24 | 


--------------------------------------------------------------------------------
/autoprefixer-sandbox/experiment.js:
--------------------------------------------------------------------------------
 1 | var autoprefixer = require('autoprefixer');
 2 | var postcss = require('postcss');
 3 | 
 4 | var css = `
 5 | .example {
 6 |   display: flex;
 7 |   font-size: 11px;
 8 | }
 9 | `;
10 | 
11 | [
12 |   // Test with recent browsers
13 |   ['last 2 version'],
14 | 
15 |   // Test with recent browsers + iOS 8
16 |   ['last 2 version', 'iOS >= 8'],
17 | 
18 |   // Test with recent browsers by usage, plus iOS 8, no IE.
19 |   // I discovered that 'not ie' is not allowed. You must set a version.
20 |   // To disable IE entirely, use 'not ie >= 1'
21 |   ['last 2 version', 'iOS >= 8', 'not ie >= 1'],
22 | 
23 |   // I discovered that disabling IE doesn't disable IE mobile.
24 |   // To disable IE mobile, I added an extra query.
25 |   ['last 2 version', 'iOS >= 8', 'not ie >= 1', 'not ie_mob >= 1'],
26 | ].forEach(function(query) {
27 |   var plugin = autoprefixer({ browsers: query });
28 |   postcss([ plugin ]).process(css).then(function (result) {
29 |     result.warnings().forEach(function (warn) {
30 |         console.warn(warn.toString());
31 |     });
32 |     console.log(query);
33 |     console.log(result.css);
34 |     console.log('\n');
35 |   });
36 | });
37 | 


--------------------------------------------------------------------------------
/autoprefixer-sandbox/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "autoprefixer-sandbox",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "ISC",
12 |   "dependencies": {
13 |     "autoprefixer": "^6.3.6",
14 |     "postcss-cli": "^2.5.2"
15 |   }
16 | }
17 | 


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


--------------------------------------------------------------------------------
/context-callback/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/context-callback/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "airbnb"
3 | }
4 | 


--------------------------------------------------------------------------------
/context-callback/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | bundle.js
3 | 


--------------------------------------------------------------------------------
/context-callback/README.md:
--------------------------------------------------------------------------------
 1 | Context Callback
 2 | ---
 3 | 
 4 | Shows how callback functions can be used with React's [context](https://facebook.github.io/react/docs/context.html) feature.
 5 | 
 6 | This project was created in response to a question about my [component communication](http://andrewhfarmer.com/component-communication/) post, particularly, the [context section](http://andrewhfarmer.com/component-communication/#8-context).
 7 | 
 8 | 
 9 | 
10 | Setup
11 | ---
12 | 
13 | ```
14 | npm install
15 | ```
16 | 
17 | 
18 | 
19 | Running
20 | ---
21 | 
22 | ```
23 | node server.js
24 | ```
25 | 
26 | Open [http://localhost:8080](http://localhost:8080) and you should see this:
27 | 
28 | <img src='galaxy.png' width='116' height='257' />
29 | 
30 | 
31 | 
32 | About the Code
33 | ---
34 | 
35 | In this project we use context to allow a parent node to be notified when a particular event occurs in one of the components in its subtree.
36 | 
37 | Notice that clicking on any of the planets prints a message to the console. That console message is in `Galaxy.js`.
38 | 
39 | Component hierarchy looks like: `Galaxy -> SolarSystem -> Planet`
40 | 
41 | `Galaxy.js` defines `getChildContext()` and `childContextTypes`. This specifies what `context` is available to it's subtree. `planetClickHandler` is the method that is passed down in the context.
42 | 
43 | `SolarSystem.js` is an intermediary component that doesn't do much. Its purpose is to separate the `Galaxy` from the `Planet`.
44 | 
45 | `Planet` calls the `planetClickHandler` context callback method, which is defined 2 levels up in `Galaxy`.
46 | 


--------------------------------------------------------------------------------
/context-callback/galaxy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andrewagain/react-samples/fecf0485d3e72eceedd5fc028da4d24233965d8b/context-callback/galaxy.png


--------------------------------------------------------------------------------
/context-callback/js/Galaxy.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import SolarSystem from './SolarSystem';
 3 | 
 4 | class Galaxy extends React.Component {
 5 |   getChildContext() {
 6 |     return {
 7 |       planetClickHandler: this.planetClickHandler.bind(this),
 8 |     };
 9 |   }
10 | 
11 |   planetClickHandler() {
12 |     console.log('Planet clicked. Galaxy noticed.');
13 |   }
14 | 
15 |   render() {
16 |     return (
17 |       <SolarSystem />
18 |     );
19 |   }
20 | }
21 | Galaxy.childContextTypes = {
22 |   planetClickHandler: React.PropTypes.func,
23 | };
24 | export default Galaxy;
25 | 


--------------------------------------------------------------------------------
/context-callback/js/Planet.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | class Planet extends React.Component {
 4 |   render() {
 5 |     return (
 6 |       <div
 7 |         className={this.props.name}
 8 |         onClick={this.context.planetClickHandler}
 9 |         style={{
10 |           backgroundColor: this.props.color,
11 |           position: 'relative',
12 |           width: this.props.diameter,
13 |           height: this.props.diameter,
14 |           borderRadius: this.props.diameter / 2,
15 |           textAlign: 'center',
16 |           color: 'white',
17 |         }}
18 |       >
19 |         <div
20 |           style={{
21 |             position: 'absolute',
22 |             top: '50%',
23 |             left: '50%',
24 |             transform: 'translate(-50%, -50%)',
25 |           }}
26 |         >
27 |           {this.props.name}
28 |         </div>
29 |       </div>
30 |     );
31 |   }
32 | }
33 | Planet.propTypes = {
34 |   name: React.PropTypes.string,
35 |   color: React.PropTypes.string,
36 |   diameter: React.PropTypes.number,
37 | };
38 | Planet.contextTypes = {
39 |   planetClickHandler: React.PropTypes.func,
40 | };
41 | export default Planet;
42 | 


--------------------------------------------------------------------------------
/context-callback/js/SolarSystem.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Planet from './Planet';
 3 | 
 4 | class SolarSystem extends React.Component {
 5 |   render() {
 6 |     return (
 7 |       <div className="solar">
 8 |         <Planet
 9 |           color="blue"
10 |           diameter={100}
11 |           name="Earth"
12 |         />
13 |         <Planet
14 |           color="red"
15 |           diameter={80}
16 |           name="Mars"
17 |         />
18 |         <Planet
19 |           color="orange"
20 |           diameter={60}
21 |           name="Venus"
22 |         />
23 |       </div>
24 |     );
25 |   }
26 | }
27 | export default SolarSystem;
28 | 


--------------------------------------------------------------------------------
/context-callback/js/main.js:
--------------------------------------------------------------------------------
1 | import Galaxy from './Galaxy';
2 | import React from 'react';
3 | import ReactDom from 'react-dom';
4 | 
5 | ReactDom.render(
6 |   <Galaxy />,
7 |   document.getElementById('mount'));
8 | 


--------------------------------------------------------------------------------
/context-callback/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "live-webpack-starter",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "js/main.js",
 6 |   "scripts": {
 7 |     "lint": "\"$(npm bin)\"/eslint js"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "ISC",
12 |   "dependencies": {
13 |     "babel": "^6.3.26",
14 |     "babel-core": "^6.4.5",
15 |     "babel-eslint": "^4.1.6",
16 |     "babel-loader": "^6.2.1",
17 |     "babel-preset-es2015": "^6.3.13",
18 |     "babel-preset-react": "^6.3.13",
19 |     "eslint": "^1.10.3",
20 |     "eslint-config-airbnb": "^4.0.0",
21 |     "eslint-plugin-react": "^3.16.1",
22 |     "react": "^0.14.7",
23 |     "react-dom": "^0.14.7",
24 |     "webpack": "^1.12.12",
25 |     "webpack-dev-server": "^1.14.1"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/context-callback/server.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable no-var, no-console */
 2 | /**
 3 |  * This file runs a webpack-dev-server, using the API.
 4 |  *
 5 |  * For more information on the options passed to WebpackDevServer,
 6 |  * see the webpack-dev-server API docs:
 7 |  * https://github.com/webpack/docs/wiki/webpack-dev-server#api
 8 |  */
 9 | var WebpackDevServer = require('webpack-dev-server');
10 | var webpack = require('webpack');
11 | var config = require('./webpack.config.js');
12 | 
13 | var compiler = webpack(config);
14 | var server = new WebpackDevServer(compiler, {
15 |   contentBase: 'www',
16 |   hot: true,
17 |   filename: 'bundle.js',
18 |   publicPath: '/',
19 |   stats: {
20 |     colors: true,
21 |   },
22 | });
23 | server.listen(8080, 'localhost', () => {
24 |   console.log('Server started, webpack is compiling...');
25 | });
26 | 


--------------------------------------------------------------------------------
/context-callback/webpack.config.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable no-var */
 2 | var path = require('path');
 3 | var webpack = require('webpack');
 4 | 
 5 | var projectRoot = __dirname;
 6 | 
 7 | var config = {
 8 |   // Must be an absolute path or watching feature will fail
 9 |   context: path.join(projectRoot, 'js'),
10 |   entry: [
11 |     './main.js',
12 |     'webpack/hot/dev-server',
13 |     'webpack-dev-server/client?http://localhost:8080/',
14 |   ],
15 |   output: {
16 |     path: path.join(projectRoot, 'www'),
17 |     filename: 'bundle.js',
18 |     publicPath: '/',
19 |   },
20 |   module: {
21 |     loaders: [
22 |       // ES6
23 |       { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
24 |     ],
25 |   },
26 |   resolveLoader: {
27 |     root: [
28 |       path.join(projectRoot, 'node_modules'),
29 |     ],
30 |   },
31 |   resolve: {
32 |     root: [
33 |       path.join(projectRoot, 'node_modules'),
34 |     ],
35 |   },
36 |   plugins: [
37 |     new webpack.HotModuleReplacementPlugin(),
38 |   ],
39 | };
40 | module.exports = config;
41 | 


--------------------------------------------------------------------------------
/context-callback/www/index.html:
--------------------------------------------------------------------------------
1 | <html>
2 | <body>
3 |   <div id='mount'>
4 |   </div>
5 |   <script src='bundle.js' ></script>
6 | </body>
7 | </html>
8 | 


--------------------------------------------------------------------------------
/css-modules-by-example/README.md:
--------------------------------------------------------------------------------
 1 | CSS Modules by Example
 2 | ---
 3 | 
 4 | These are the example components shown in my [CSS Modules by Example](http://andrewhfarmer.com/css-modules-by-example/) post.
 5 | 
 6 | 
 7 | 
 8 | Setup
 9 | ---
10 | 
11 | ```
12 | npm install
13 | ```
14 | 
15 | 
16 | 
17 | Running
18 | ---
19 | 
20 | 1. Run `node server.js`
21 | 2. Open [http://localhost:8080](http://localhost:8080)
22 | 
23 | Changes to your Javascript will automatically rebuild webpack and reload the browser.
24 | 
25 | Note that HTML changes will require a manual reload.
26 | 
27 | 
28 | 
29 | Notes
30 | ---
31 | 
32 | CSS Modules take all the classes out of your `.css` file and turn them into JavaScript variables.
33 | 
34 | If you are used to SCSS, this can be a little weird.
35 | 
36 | You can't really use nested classes in the same way that you would in SCSS.
37 | 
38 | In fact, you can't specify ANY class names as strings.
39 | 
40 | ```
41 | className="meow" // this will NEVER WORK
42 | ```
43 | 


--------------------------------------------------------------------------------
/css-modules-by-example/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "cssmodules-project",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "ISC",
12 |   "dependencies": {
13 |     "babel": "^6.5.2",
14 |     "babel-core": "^6.7.4",
15 |     "babel-loader": "^6.2.4",
16 |     "babel-preset-es2015": "^6.6.0",
17 |     "babel-preset-react": "^6.5.0",
18 |     "classnames": "^2.2.3",
19 |     "css-loader": "^0.23.1",
20 |     "extract-text-webpack-plugin": "^1.0.1",
21 |     "node-sass": "^3.4.2",
22 |     "react": "^0.14.7",
23 |     "react-dom": "^0.14.7",
24 |     "sass-loader": "^3.2.0",
25 |     "style-loader": "^0.13.1",
26 |     "webpack": "1.12.12",
27 |     "webpack-dev-server": "1.14.1"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/css-modules-by-example/server.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable no-var, no-console */
 2 | /**
 3 |  * This file runs a webpack-dev-server, using the API.
 4 |  *
 5 |  * For more information on the options passed to WebpackDevServer,
 6 |  * see the webpack-dev-server API docs:
 7 |  * https://github.com/webpack/docs/wiki/webpack-dev-server#api
 8 |  */
 9 | var WebpackDevServer = require('webpack-dev-server');
10 | var webpack = require('webpack');
11 | var config = require('./webpack.config.js');
12 | 
13 | var compiler = webpack(config);
14 | var server = new WebpackDevServer(compiler, {
15 |   contentBase: 'www',
16 |   hot: true,
17 |   filename: 'bundle.js',
18 |   publicPath: '/',
19 |   stats: {
20 |     colors: true,
21 |   },
22 | });
23 | server.listen(8080, 'localhost', () => {
24 |   console.log('Server started, webpack is compiling...');
25 | });
26 | 


--------------------------------------------------------------------------------
/css-modules-by-example/src/0_Cat/Cat.css:
--------------------------------------------------------------------------------
1 | .meow {
2 |   color: orange;
3 | }
4 | 


--------------------------------------------------------------------------------
/css-modules-by-example/src/0_Cat/Cat.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import styles from './Cat.css';
 3 | 
 4 | class Cat extends React.Component {
 5 |   render() {
 6 |     return (
 7 |       <div className={styles.meow}>
 8 |         Orange Cat
 9 |       </div>
10 |     );
11 |   }
12 | }
13 | export default Cat;
14 | 


--------------------------------------------------------------------------------
/css-modules-by-example/src/0_Cat/README.md:
--------------------------------------------------------------------------------
1 | Simple cat example.
2 | 


--------------------------------------------------------------------------------
/css-modules-by-example/src/1_Single_Class_Name/README.md:
--------------------------------------------------------------------------------
1 | This is the simplest possible example of CSS Modules. There is only a single class name in the CSS file.
2 | 


--------------------------------------------------------------------------------
/css-modules-by-example/src/1_Single_Class_Name/Widget1.css:
--------------------------------------------------------------------------------
1 | .button {
2 |   border-radius: 4px;
3 |   background-color: #94D0F9;
4 | }
5 | 


--------------------------------------------------------------------------------
/css-modules-by-example/src/1_Single_Class_Name/Widget1.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import styles from './Widget1.css';
 3 | 
 4 | console.log('Widget1 styles:', styles);
 5 | 
 6 | class Widget1 extends React.Component {
 7 |   render() {
 8 |     return (
 9 |       <button className={styles.button}>
10 |         Click Me
11 |       </button>
12 |     );
13 |   }
14 | }
15 | export default Widget1;
16 | 


--------------------------------------------------------------------------------
/css-modules-by-example/src/2_Multiple_Class_Names/README.md:
--------------------------------------------------------------------------------
1 | In this example the CSS file has 3 different class names. They all become accessible to the component in the `styles` object.
2 | 


--------------------------------------------------------------------------------
/css-modules-by-example/src/2_Multiple_Class_Names/Widget2.css:
--------------------------------------------------------------------------------
 1 | .title {
 2 |   font-weight: bold;
 3 |   font-size: 16px;
 4 | }
 5 | 
 6 | .email {
 7 |   padding: .5rem;
 8 | }
 9 | 
10 | .submitButton {
11 |   padding: .5rem;
12 |   margin-top: .5rem;
13 |   border: 1px solid #2F79AD;
14 |   border-radius: 4px;
15 |   background-color: #6DB9EE;
16 | }
17 | 
18 | .submitButton:hover {
19 |   background-color: #2F79AD;
20 | }
21 | 


--------------------------------------------------------------------------------
/css-modules-by-example/src/2_Multiple_Class_Names/Widget2.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import styles from './Widget2.css';
 3 | 
 4 | console.log('Widget2 styles:', styles);
 5 | 
 6 | class Widget2 extends React.Component {
 7 |   render() {
 8 |     return (
 9 |       <div>
10 |         <h2 className={styles.title}>Email Signup</h2>
11 |         <input
12 |           className={styles.email}
13 |           placeholder="Email Please"
14 |           />
15 |         <br/>
16 |         <button className={styles.submitButton}>Submit</button>
17 |       </div>
18 |     );
19 |   }
20 | }
21 | export default Widget2;
22 | 


--------------------------------------------------------------------------------
/css-modules-by-example/src/3_Combination_Class_Names/README.md:
--------------------------------------------------------------------------------
1 | In this example there are style rules that only apply to elements that contain two class names: 'button' and 'disabled'.
2 | 
3 | You can see that both classnames are returned separately. In your component, you must add both class names in order for the styles to take effect.
4 | 
5 | NOTE: CSS Modules will NOT combine `.button.disabled` into a single rule. It will return class names for both `button` and `disabled`.
6 | 
7 | NOTE: We are using the [classnames](https://github.com/JedWatson/classnames) package here to combine classnames. In this situation it just adds a space between the two classnames.
8 | 


--------------------------------------------------------------------------------
/css-modules-by-example/src/3_Combination_Class_Names/Widget3.css:
--------------------------------------------------------------------------------
 1 | .button {
 2 |   padding: .5rem;
 3 |   margin-top: .5rem;
 4 |   border: 1px solid #2F79AD;
 5 |   border-radius: 4px;
 6 |   background-color: #6DB9EE;
 7 | }
 8 | 
 9 | .button.disabled {
10 |   background-color: #aaa;
11 |   border-color: #999;
12 | }
13 | 


--------------------------------------------------------------------------------
/css-modules-by-example/src/3_Combination_Class_Names/Widget3.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import styles from './Widget3.css';
 3 | import cx from 'classnames';
 4 | 
 5 | console.log('Widget3 styles:', styles);
 6 | 
 7 | class Widget3 extends React.Component {
 8 |   render() {
 9 |     return (
10 |       <div>
11 |         <button
12 |           className={styles.button}>
13 |           Click Me!
14 |         </button>
15 |         <br/>
16 |         <button
17 |           className={cx(styles.button, styles.disabled)}>
18 |           Do Not Click Me
19 |         </button>
20 |       </div>
21 |     );
22 |   }
23 | }
24 | export default Widget3;
25 | 


--------------------------------------------------------------------------------
/css-modules-by-example/src/4_Nested_Class_Names/README.md:
--------------------------------------------------------------------------------
1 | In this example there are style rules that only apply to elements with a particular class name that are also nested within another element with a particular class name.
2 | 
3 | You can see that both classnames are returned separately. In your component, you must add both class names in order for the styles to take effect.
4 | 


--------------------------------------------------------------------------------
/css-modules-by-example/src/4_Nested_Class_Names/Widget4.css:
--------------------------------------------------------------------------------
 1 | .button {
 2 |   padding: .5rem;
 3 |   margin-top: .5rem;
 4 |   border: 1px solid #2F79AD;
 5 |   border-radius: 4px;
 6 |   background-color: #6DB9EE;
 7 | }
 8 | 
 9 | .fun .button {
10 |   font-weight: bold;
11 |   background: linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #ff00ff, #ff0000);
12 | }
13 | 


--------------------------------------------------------------------------------
/css-modules-by-example/src/4_Nested_Class_Names/Widget4.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import styles from './Widget4.css';
 3 | 
 4 | console.log('Widget4 styles:', styles);
 5 | 
 6 | class Widget4 extends React.Component {
 7 |   render() {
 8 |     return (
 9 |       <div>
10 |         <button className={styles.button}>Regular Button</button>
11 |         <br/>
12 |         <div className={styles.fun}>
13 |           <button className={styles.button}>FUN BUTTON</button>
14 |         </div>
15 |       </div>
16 |     );
17 |   }
18 | }
19 | export default Widget4;
20 | 


--------------------------------------------------------------------------------
/css-modules-by-example/src/5_Composition/README.md:
--------------------------------------------------------------------------------
1 | Obviously you are going to want to share some styles between components.
2 | 
3 | With CSS Modules, what is shared is explicit.
4 | 


--------------------------------------------------------------------------------
/css-modules-by-example/src/5_Composition/Widget5.css:
--------------------------------------------------------------------------------
1 | .button {
2 |   composes: grape from './util.css';
3 |   padding: .5rem;
4 |   margin-top: .5rem;
5 | }
6 | 


--------------------------------------------------------------------------------
/css-modules-by-example/src/5_Composition/Widget5.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import styles from './Widget5.css';
 3 | 
 4 | console.log('Widget5 styles:', styles);
 5 | 
 6 | class Widget5 extends React.Component {
 7 |   render() {
 8 |     return (
 9 |       <button className={styles.button}>Button</button>
10 |     );
11 |   }
12 | }
13 | export default Widget5;
14 | 


--------------------------------------------------------------------------------
/css-modules-by-example/src/5_Composition/util.css:
--------------------------------------------------------------------------------
 1 | /* grapes are round and purple */
 2 | .grape {
 3 |   border: 2px solid #ff00ff;
 4 |   border-radius: 10px;
 5 |   background-color: purple;
 6 |   color: white;
 7 | }
 8 | 
 9 | .grape:hover {
10 |   background-color: #ff00ff;
11 | }
12 | 


--------------------------------------------------------------------------------
/css-modules-by-example/src/6_Tag_Names/README.md:
--------------------------------------------------------------------------------
1 | CSS Modules rewrite class names, but they don't touch tag names.
2 | 
3 | Selectors like `input`, `div`, or `h1` will be left alone.
4 | 
5 | In a selector like `.signup input`, the `signup` class will be renamed, but the `input` portion of the selector will be left alone and you get something like this: `.filename_signup_123 input`.
6 | 
7 | May I strongly suggest: Never use a selector that is JUST a tag name. Always specify a class name also.
8 | 


--------------------------------------------------------------------------------
/css-modules-by-example/src/6_Tag_Names/Widget6.css:
--------------------------------------------------------------------------------
 1 | input.large {
 2 |   font-size: 20px;
 3 | }
 4 | 
 5 | .medium input {
 6 |   font-size: 14px;
 7 | }
 8 | 
 9 | .tiny * {
10 |   font-size: 9px;
11 | }
12 | 
13 | /* Don't do this!
14 |    This style will be global. */
15 | input {
16 |   padding: 0.5rem;
17 | }
18 | 


--------------------------------------------------------------------------------
/css-modules-by-example/src/6_Tag_Names/Widget6.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import styles from './Widget6.css';
 3 | 
 4 | console.log('Widget6 styles:', styles);
 5 | 
 6 | class Widget6 extends React.Component {
 7 |   render() {
 8 |     return (
 9 |       <div>
10 |         <input
11 |           className={styles.large}
12 |           placeholder="I am large" />
13 |         <div className={styles.medium}>
14 |           <input placeholder="I am medium" />
15 |         </div>
16 |         <div className={styles.tiny}>
17 |           <input placeholder="I am so tiny" />
18 |         </div>
19 |       </div>
20 |     );
21 |   }
22 | }
23 | export default Widget6;
24 | 


--------------------------------------------------------------------------------
/css-modules-by-example/src/7_Media_Queries/README.md:
--------------------------------------------------------------------------------
1 | Since all CSS Modules do is rewrite your classnames, all the features you are used to in CSS still work as-is.
2 | 
3 | Here's an example that uses media queries. Resize your browser window to the media queries in action.
4 | 


--------------------------------------------------------------------------------
/css-modules-by-example/src/7_Media_Queries/Widget7.css:
--------------------------------------------------------------------------------
 1 | .small {
 2 |   opacity: 0.2;
 3 | }
 4 | .large {
 5 |   opacity: 1.0;
 6 | }
 7 | 
 8 | @media (max-width: 600px) {
 9 |   .small {
10 |     opacity: 1.0;
11 |   }
12 |   .large {
13 |     opacity: 0.2;
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/css-modules-by-example/src/7_Media_Queries/Widget7.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import styles from './Widget7.css';
 3 | 
 4 | console.log('Widget7 styles:', styles);
 5 | 
 6 | class Widget7 extends React.Component {
 7 |   render() {
 8 |     return (
 9 |       <div>
10 |         <div className={styles.small}>
11 |           The Window is Small
12 |         </div>
13 |         <div className={styles.large}>
14 |           The Window is Big
15 |         </div>
16 |       </div>
17 |     );
18 |   }
19 | }
20 | export default Widget7;
21 | 


--------------------------------------------------------------------------------
/css-modules-by-example/src/index.js:
--------------------------------------------------------------------------------
 1 | import Cat from './0_Cat/Cat';
 2 | import Widget1 from './1_Single_Class_Name/Widget1';
 3 | import Widget2 from './2_Multiple_Class_Names/Widget2';
 4 | import Widget3 from './3_Combination_Class_Names/Widget3';
 5 | import Widget4 from './4_Nested_Class_Names/Widget4';
 6 | import Widget5 from './5_Composition/Widget5';
 7 | import Widget6 from './6_Tag_Names/Widget6';
 8 | import Widget7 from './7_Media_Queries/Widget7';
 9 | import React from 'react';
10 | import ReactDOM from 'react-dom';
11 | 
12 | ReactDOM.render(<div>
13 |   <Cat />
14 |   <hr/>
15 |   <Widget1 />
16 |   <hr/>
17 |   <Widget2 />
18 |   <hr/>
19 |   <Widget3 />
20 |   <hr/>
21 |   <Widget4 />
22 |   <hr/>
23 |   <Widget5 />
24 |   <hr/>
25 |   <Widget6 />
26 |   <hr/>
27 |   <Widget7 />
28 | </div>, document.getElementById('mount'));
29 | 


--------------------------------------------------------------------------------
/css-modules-by-example/webpack.config.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable no-var */
 2 | var path = require('path');
 3 | var webpack = require('webpack');
 4 | 
 5 | var projectRoot = __dirname;
 6 | 
 7 | var config = {
 8 |   // Must be an absolute path or watching feature will fail
 9 |   context: path.join(projectRoot, 'src'),
10 |   entry: [
11 |     './index.js',
12 |     'webpack/hot/dev-server',
13 |     'webpack-dev-server/client?http://localhost:8080/',
14 |   ],
15 |   output: {
16 |     path: path.join(projectRoot, 'www'),
17 |     filename: 'bundle.js',
18 |     publicPath: '/',
19 |   },
20 |   module: {
21 |     loaders: [
22 |       { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
23 |       {
24 |         test: /\.css$/,
25 |         loaders:[
26 |           'style-loader',
27 |           'css-loader?modules&importLoaders=1&localIdentName=[name]_[local]_[hash:base64:5]',
28 |           'sass-loader',
29 |         ],
30 |       },
31 |     ],
32 |   },
33 |   resolveLoader: {
34 |     root: [
35 |       path.join(projectRoot, 'node_modules'),
36 |     ],
37 |   },
38 |   resolve: {
39 |     root: [
40 |       path.join(projectRoot, 'node_modules'),
41 |     ],
42 |   },
43 |   plugins: [
44 |     new webpack.HotModuleReplacementPlugin(),
45 |   ],
46 | };
47 | module.exports = config;
48 | 


--------------------------------------------------------------------------------
/css-modules-by-example/www/index.html:
--------------------------------------------------------------------------------
1 | <html>
2 | <body>
3 |   <div id='mount'>
4 |   </div>
5 |   <script src='bundle.js' ></script>
6 | </body>
7 | </html>
8 | 


--------------------------------------------------------------------------------
/install.rb:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/ruby
 2 | 
 3 | packages = [
 4 |   'autoprefixer-sandbox',
 5 |   'context-callback',
 6 |   'css-modules-by-example',
 7 |   'twemoji-sandbox',
 8 |   'yargs-sandbox',
 9 | ];
10 | puts 'Which package would you like to install?'
11 | puts ''
12 | packages.each_with_index do |p, i|
13 |   puts "#{i + 1}. #{p}"
14 | end
15 | input = STDIN.gets.strip
16 | package = nil
17 | begin
18 |   num = Integer(input)
19 |   package = packages[num - 1]
20 |   if !package
21 |     throw RuntimeError('Number outside range')
22 |   end
23 | rescue Exception
24 |   puts "Only a number 1-#{packages.length} is accepted."
25 |   exit
26 | end
27 | 
28 | puts "Downloading #{package}..."
29 | 
30 | def download_command(package)
31 |   tmpDir = "tmp#{rand.to_s.sub('0.', '')}"
32 |   return `
33 |   mkdir #{tmpDir}
34 |   cd #{tmpDir}
35 |   git init
36 |   git remote add -f origin https://github.com/ahfarmer/react-samples.git
37 |   git config core.sparseCheckout true
38 |   echo #{package} >> .git/info/sparse-checkout
39 |   git pull origin master
40 |   mv #{package} ..
41 |   cd ..
42 |   rm -rf #{tmpDir}
43 |   `
44 | end
45 | 
46 | download_command(package)
47 | 
48 | puts ""
49 | puts "Created #{package} within the current working directory"
50 | 


--------------------------------------------------------------------------------
/twemoji-sandbox/README.md:
--------------------------------------------------------------------------------
 1 | twemoji sandbox
 2 | ---
 3 | https://github.com/twitter/twemoji
 4 | 
 5 | Tested out twemoji, Twitter's npm package for converting emoji strings into Twitter emoji.
 6 | 
 7 | The `parse()` method takes a string and converts it to HTML, with `<img>` tags for all the emoji images.
 8 | 
 9 | I can use this for the emoji on my blog, and all my readers will get the same emoji images regardless of platform.
10 | 


--------------------------------------------------------------------------------
/twemoji-sandbox/experiment.js:
--------------------------------------------------------------------------------
 1 | var twemoji = require('twemoji');
 2 | 
 3 | console.log('turtle:');
 4 | console.log(twemoji.parse('🐢'));
 5 | 
 6 | console.log('rabbit:');
 7 | console.log(twemoji.parse('🐇'));
 8 | 
 9 | console.log('multiple:');
10 | console.log(twemoji.parse('👍🍰🐭🍵👆'));
11 | 
12 | console.log('multiple with text:');
13 | console.log(twemoji.parse('thumbs up 👍 thumbs down 👎'));
14 | 


--------------------------------------------------------------------------------
/twemoji-sandbox/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "twemoji-sandbox",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "ISC",
12 |   "dependencies": {
13 |     "twemoji": "^2.0.5"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/yargs-sandbox/README.md:
--------------------------------------------------------------------------------
 1 | Yargs Test
 2 | ---
 3 | https://github.com/yargs/yargs
 4 | 
 5 | Want to test how '--blah-blah' boolean args work. The docs don't mention using a dash within an arg, so I'm not sure if it is supported.
 6 | 
 7 | 
 8 | 
 9 | Usage
10 | ---
11 | 
12 | ```
13 | node experiment.js --meow-mix
14 | node experiment.js --no-meow-mix
15 | ```
16 | 
17 | 
18 | 
19 | Results
20 | ---
21 | 
22 | Works great! `yargs` will convert your `blah-blah` arguments into camelcase: `blahBlah`.
23 | 


--------------------------------------------------------------------------------
/yargs-sandbox/experiment.js:
--------------------------------------------------------------------------------
1 | var yargs = require('yargs');
2 | 
3 | var argv = yargs.boolean('meow-mix').argv;
4 | console.log(argv.meowMix);
5 | console.log('---');
6 | console.log(argv);
7 | 


--------------------------------------------------------------------------------
/yargs-sandbox/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "yargs-sandbox",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "ISC",
12 |   "dependencies": {
13 |     "yargs": "^4.3.2"
14 |   }
15 | }
16 | 


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