├── .gitignore
├── CODE_OF_CONDUCT.md
├── CONTRIBUTIONS.md
├── LICENSE
├── README.md
├── code
    ├── README.md
    ├── chapter-10
    │   ├── .gitignore
    │   ├── .storybook
    │   │   └── config.js
    │   ├── config
    │   │   ├── env.js
    │   │   ├── jest
    │   │   │   ├── cssTransform.js
    │   │   │   └── fileTransform.js
    │   │   ├── paths.js
    │   │   ├── polyfills.js
    │   │   ├── webpack.config.dev.js
    │   │   ├── webpack.config.prod.js
    │   │   └── webpackDevServer.config.js
    │   ├── package.json
    │   ├── public
    │   │   ├── favicon.ico
    │   │   ├── index.html
    │   │   └── manifest.json
    │   ├── scripts
    │   │   ├── build.js
    │   │   ├── start.js
    │   │   └── test.js
    │   ├── src
    │   │   ├── components
    │   │   │   ├── App
    │   │   │   │   ├── App.js
    │   │   │   │   ├── App.spec.js
    │   │   │   │   └── App.styles.js
    │   │   │   ├── TodosList
    │   │   │   │   ├── TodosList.js
    │   │   │   │   ├── TodosList.spec.js
    │   │   │   │   ├── TodosList.story.js
    │   │   │   │   └── TodosList.styles.js
    │   │   │   ├── TodosListInfo
    │   │   │   │   ├── TodosListInfo.js
    │   │   │   │   ├── TodosListInfo.spec.js
    │   │   │   │   ├── TodosListInfo.story.js
    │   │   │   │   └── TodosListInfo.styles.js
    │   │   │   └── TodosListItem
    │   │   │   │   ├── TodosListItem.js
    │   │   │   │   ├── TodosListItem.spec.js
    │   │   │   │   ├── TodosListItem.story.js
    │   │   │   │   └── TodosListItem.styles.js
    │   │   ├── index.js
    │   │   └── styles
    │   │   │   ├── globals.styles.js
    │   │   │   ├── mixins.js
    │   │   │   └── theme.js
    │   ├── stories
    │   │   ├── Button.js
    │   │   ├── Welcome.js
    │   │   └── index.js
    │   └── yarn.lock
    ├── chapter-3
    │   ├── .gitignore
    │   ├── config
    │   │   ├── env.js
    │   │   ├── jest
    │   │   │   ├── cssTransform.js
    │   │   │   └── fileTransform.js
    │   │   ├── paths.js
    │   │   ├── polyfills.js
    │   │   ├── webpack.config.dev.js
    │   │   ├── webpack.config.prod.js
    │   │   └── webpackDevServer.config.js
    │   ├── package.json
    │   ├── public
    │   │   ├── favicon.ico
    │   │   ├── index.html
    │   │   └── manifest.json
    │   ├── scripts
    │   │   ├── build.js
    │   │   ├── start.js
    │   │   └── test.js
    │   ├── src
    │   │   └── index.js
    │   └── yarn.lock
    ├── chapter-4
    │   ├── .gitignore
    │   ├── config
    │   │   ├── env.js
    │   │   ├── jest
    │   │   │   ├── cssTransform.js
    │   │   │   └── fileTransform.js
    │   │   ├── paths.js
    │   │   ├── polyfills.js
    │   │   ├── webpack.config.dev.js
    │   │   ├── webpack.config.prod.js
    │   │   └── webpackDevServer.config.js
    │   ├── package.json
    │   ├── public
    │   │   ├── favicon.ico
    │   │   ├── index.html
    │   │   └── manifest.json
    │   ├── scripts
    │   │   ├── build.js
    │   │   ├── start.js
    │   │   └── test.js
    │   ├── src
    │   │   ├── index.js
    │   │   └── styles.css
    │   └── yarn.lock
    ├── chapter-5
    │   ├── .gitignore
    │   ├── config
    │   │   ├── env.js
    │   │   ├── jest
    │   │   │   ├── cssTransform.js
    │   │   │   └── fileTransform.js
    │   │   ├── paths.js
    │   │   ├── polyfills.js
    │   │   ├── webpack.config.dev.js
    │   │   ├── webpack.config.prod.js
    │   │   └── webpackDevServer.config.js
    │   ├── package.json
    │   ├── public
    │   │   ├── favicon.ico
    │   │   ├── index.html
    │   │   └── manifest.json
    │   ├── scripts
    │   │   ├── build.js
    │   │   ├── start.js
    │   │   └── test.js
    │   ├── src
    │   │   ├── components
    │   │   │   ├── App
    │   │   │   │   ├── App.css
    │   │   │   │   ├── App.js
    │   │   │   │   └── App.spec.js
    │   │   │   ├── TodosList
    │   │   │   │   ├── TodosList.css
    │   │   │   │   ├── TodosList.js
    │   │   │   │   └── TodosList.spec.js
    │   │   │   └── TodosListItem
    │   │   │   │   ├── TodosListItem.css
    │   │   │   │   ├── TodosListItem.js
    │   │   │   │   └── TodosListItem.spec.js
    │   │   ├── index.js
    │   │   └── styles.css
    │   └── yarn.lock
    ├── chapter-6
    │   ├── .gitignore
    │   ├── config
    │   │   ├── env.js
    │   │   ├── jest
    │   │   │   ├── cssTransform.js
    │   │   │   └── fileTransform.js
    │   │   ├── paths.js
    │   │   ├── polyfills.js
    │   │   ├── webpack.config.dev.js
    │   │   ├── webpack.config.prod.js
    │   │   └── webpackDevServer.config.js
    │   ├── package.json
    │   ├── public
    │   │   ├── favicon.ico
    │   │   ├── index.html
    │   │   └── manifest.json
    │   ├── scripts
    │   │   ├── build.js
    │   │   ├── start.js
    │   │   └── test.js
    │   ├── src
    │   │   ├── components
    │   │   │   ├── App
    │   │   │   │   ├── App.js
    │   │   │   │   ├── App.scss
    │   │   │   │   └── App.spec.js
    │   │   │   ├── TodosList
    │   │   │   │   ├── TodosList.js
    │   │   │   │   ├── TodosList.scss
    │   │   │   │   └── TodosList.spec.js
    │   │   │   ├── TodosListInfo
    │   │   │   │   ├── TodosListInfo.js
    │   │   │   │   ├── TodosListInfo.scss
    │   │   │   │   └── TodosListInfo.spec.js
    │   │   │   └── TodosListItem
    │   │   │   │   ├── TodosListItem.js
    │   │   │   │   ├── TodosListItem.scss
    │   │   │   │   └── TodosListItem.spec.js
    │   │   ├── index.js
    │   │   └── styles
    │   │   │   ├── globals.scss
    │   │   │   ├── main.scss
    │   │   │   └── theme.scss
    │   └── yarn.lock
    ├── chapter-7
    │   ├── .gitignore
    │   ├── config
    │   │   ├── env.js
    │   │   ├── jest
    │   │   │   ├── cssTransform.js
    │   │   │   └── fileTransform.js
    │   │   ├── paths.js
    │   │   ├── polyfills.js
    │   │   ├── webpack.config.dev.js
    │   │   ├── webpack.config.prod.js
    │   │   └── webpackDevServer.config.js
    │   ├── package.json
    │   ├── public
    │   │   ├── favicon.ico
    │   │   ├── index.html
    │   │   └── manifest.json
    │   ├── scripts
    │   │   ├── build.js
    │   │   ├── start.js
    │   │   └── test.js
    │   ├── src
    │   │   ├── components
    │   │   │   ├── App
    │   │   │   │   ├── App.js
    │   │   │   │   ├── App.scss
    │   │   │   │   └── App.spec.js
    │   │   │   ├── TodosList
    │   │   │   │   ├── TodosList.js
    │   │   │   │   ├── TodosList.scss
    │   │   │   │   └── TodosList.spec.js
    │   │   │   ├── TodosListInfo
    │   │   │   │   ├── TodosListInfo.js
    │   │   │   │   ├── TodosListInfo.scss
    │   │   │   │   └── TodosListInfo.spec.js
    │   │   │   └── TodosListItem
    │   │   │   │   ├── TodosListItem.js
    │   │   │   │   ├── TodosListItem.scss
    │   │   │   │   └── TodosListItem.spec.js
    │   │   ├── index.js
    │   │   └── styles
    │   │   │   ├── globals.scss
    │   │   │   ├── main.scss
    │   │   │   └── theme.scss
    │   └── yarn.lock
    ├── chapter-8
    │   ├── .gitignore
    │   ├── config
    │   │   ├── env.js
    │   │   ├── jest
    │   │   │   ├── cssTransform.js
    │   │   │   └── fileTransform.js
    │   │   ├── paths.js
    │   │   ├── polyfills.js
    │   │   ├── webpack.config.dev.js
    │   │   ├── webpack.config.prod.js
    │   │   └── webpackDevServer.config.js
    │   ├── package.json
    │   ├── public
    │   │   ├── favicon.ico
    │   │   ├── index.html
    │   │   └── manifest.json
    │   ├── scripts
    │   │   ├── build.js
    │   │   ├── start.js
    │   │   └── test.js
    │   ├── src
    │   │   ├── components
    │   │   │   ├── App
    │   │   │   │   ├── App.js
    │   │   │   │   ├── App.spec.js
    │   │   │   │   └── App.styles.js
    │   │   │   ├── TodosList
    │   │   │   │   ├── TodosList.js
    │   │   │   │   ├── TodosList.spec.js
    │   │   │   │   └── TodosList.styles.js
    │   │   │   ├── TodosListInfo
    │   │   │   │   ├── TodosListInfo.js
    │   │   │   │   ├── TodosListInfo.spec.js
    │   │   │   │   └── TodosListInfo.styles.js
    │   │   │   └── TodosListItem
    │   │   │   │   ├── TodosListItem.js
    │   │   │   │   ├── TodosListItem.spec.js
    │   │   │   │   └── TodosListItem.styles.js
    │   │   ├── index.js
    │   │   └── styles
    │   │   │   ├── globals.styles.js
    │   │   │   └── theme.js
    │   └── yarn.lock
    └── chapter-9
    │   ├── .gitignore
    │   ├── config
    │       ├── env.js
    │       ├── jest
    │       │   ├── cssTransform.js
    │       │   └── fileTransform.js
    │       ├── paths.js
    │       ├── polyfills.js
    │       ├── webpack.config.dev.js
    │       ├── webpack.config.prod.js
    │       └── webpackDevServer.config.js
    │   ├── package.json
    │   ├── public
    │       ├── favicon.ico
    │       ├── index.html
    │       └── manifest.json
    │   ├── scripts
    │       ├── build.js
    │       ├── start.js
    │       └── test.js
    │   ├── src
    │       ├── components
    │       │   ├── App
    │       │   │   ├── App.js
    │       │   │   ├── App.spec.js
    │       │   │   └── App.styles.js
    │       │   ├── TodosList
    │       │   │   ├── TodosList.js
    │       │   │   ├── TodosList.spec.js
    │       │   │   └── TodosList.styles.js
    │       │   ├── TodosListInfo
    │       │   │   ├── TodosListInfo.js
    │       │   │   ├── TodosListInfo.spec.js
    │       │   │   └── TodosListInfo.styles.js
    │       │   └── TodosListItem
    │       │   │   ├── TodosListItem.js
    │       │   │   ├── TodosListItem.spec.js
    │       │   │   └── TodosListItem.styles.js
    │       ├── index.js
    │       └── styles
    │       │   ├── globals.styles.js
    │       │   ├── mixins.js
    │       │   └── theme.js
    │   └── yarn.lock
└── manuscript
    ├── Book.txt
    ├── chapter1.md
    ├── chapter10.md
    ├── chapter11.md
    ├── chapter2.md
    ├── chapter3.md
    ├── chapter4.md
    ├── chapter5.md
    ├── chapter6.md
    ├── chapter7.md
    ├── chapter8.md
    ├── chapter9.md
    ├── images
        ├── app-layout.jpg
        ├── app-layout2.jpg
        ├── babel.png
        ├── batman-important-css.jpeg
        ├── book-cover-long.jpg
        ├── book-cover-preview.jpg
        ├── book-cover.jpg
        ├── chedeau-commandments.jpeg
        ├── eslint.png
        ├── hello-world.png
        ├── jsx.png
        ├── starter.png
        ├── storybook.png
        ├── tasks-1.png
        ├── tasks-2.png
        ├── tasks-3.png
        ├── tasks-4.png
        ├── tasks-5.png
        ├── tasks-6.png
        ├── tasks-7.png
        ├── unidirectional-styles.jpg
        └── webpack.png
    ├── preface.md
    └── profile.md


/.gitignore:
--------------------------------------------------------------------------------
 1 | # dependencies
 2 | /node_modules
 3 | 
 4 | # testing
 5 | /coverage
 6 | 
 7 | # production
 8 | /build
 9 | /preview
10 | /export
11 | /published
12 | 
13 | # misc
14 | .DS_Store
15 | .env
16 | npm-debug.log*
17 | yarn-debug.log*
18 | yarn-error.log*
19 | .idea
20 | .dropbox


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Contributor Covenant Code of Conduct
 2 | 
 3 | ## Our Pledge
 4 | 
 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
 6 | 
 7 | ## Our Standards
 8 | 
 9 | Examples of behavior that contributes to creating a positive environment include:
10 | 
11 | * Using welcoming and inclusive language
12 | * Being respectful of differing viewpoints and experiences
13 | * Gracefully accepting constructive criticism
14 | * Focusing on what is best for the community
15 | * Showing empathy towards other community members
16 | 
17 | Examples of unacceptable behavior by participants include:
18 | 
19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances
20 | * Trolling, insulting/derogatory comments, and personal or political attacks
21 | * Public or private harassment
22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission
23 | * Other conduct which could reasonably be considered inappropriate in a professional setting
24 | 
25 | ## Our Responsibilities
26 | 
27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
28 | 
29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
30 | 
31 | ## Scope
32 | 
33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
34 | 
35 | ## Enforcement
36 | 
37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at me@farhadg.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
38 | 
39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
40 | 
41 | ## Attribution
42 | 
43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
44 | 
45 | [homepage]: http://contributor-covenant.org
46 | [version]: http://contributor-covenant.org/version/1/4/
47 | 


--------------------------------------------------------------------------------
/CONTRIBUTIONS.md:
--------------------------------------------------------------------------------
 1 | # Guidelines
 2 | Thank you for your interest in contributing to this book.
 3 | 
 4 | If you have any improvements, please fork this repository, make the necessary changes and open a [pull request](https://github.com/FarhadG/ui-react/pulls). Do keep in mind that all contributions are considered donations under [LICENSE](LICENSE) agreements.
 5 | 
 6 | If you have any questions, feel free to contact me. Thank you!
 7 | 
 8 | ## Contributors
 9 | - [@farhadg](https://github.com/FarhadG)
10 | - [@jenscales](https://github.com/jenscales)
11 | - [@alexanderGugel](https://github.com/alexanderGugel)
12 | - [@innovmon](https://github.com/innovmon)
13 | - @averroes
14 | 


--------------------------------------------------------------------------------
/code/chapter-10/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # production
10 | /build
11 | 
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 | 
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | 


--------------------------------------------------------------------------------
/code/chapter-10/.storybook/config.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import React from 'react';
 3 | import normalize from 'radium-normalize';
 4 | import { Style, StyleRoot } from 'radium';
 5 | import infoAddon from '@storybook/addon-info';
 6 | import { ThemeWrapProvider } from 'theme-wrap';
 7 | import { addDecorator, configure, setAddon } from '@kadira/storybook';
 8 | 
 9 | // local dependencies
10 | import mixins from '../src/styles/mixins';
11 | import theme from '../src/styles/theme';
12 | import globalStyles from '../src/styles/globals.styles';
13 | 
14 | const Root = story => (
15 |   <StyleRoot>
16 |     <Style rules={normalize} />
17 |     <Style rules={globalStyles} />
18 |     <ThemeWrapProvider theme={theme}
19 |                        mixins={mixins}>
20 |       {story()}
21 |     </ThemeWrapProvider>
22 |   </StyleRoot>
23 | );
24 | 
25 | // attach our decorator
26 | addDecorator(Root);
27 | 
28 | // enable component info
29 | setAddon(infoAddon);
30 | 
31 | configure(() => {
32 |   require('../src/components/TodosList/TodosList.story');
33 |   require('../src/components/TodosListInfo/TodosListInfo.story');
34 |   require('../src/components/TodosListItem/TodosListItem.story');
35 | }, module);


--------------------------------------------------------------------------------
/code/chapter-10/config/env.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | 
 7 | // Make sure that including paths.js after env.js will read .env variables.
 8 | delete require.cache[require.resolve('./paths')];
 9 | 
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 |   throw new Error(
13 |     'The NODE_ENV environment variable is required but was not specified.'
14 |   );
15 | }
16 | 
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | var dotenvFiles = [
19 |   `${paths.dotenv}.${NODE_ENV}.local`,
20 |   `${paths.dotenv}.${NODE_ENV}`,
21 |   // Don't include `.env.local` for `test` environment
22 |   // since normally you expect tests to produce the same
23 |   // results for everyone
24 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 |   paths.dotenv,
26 | ].filter(Boolean);
27 | 
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set.
31 | // https://github.com/motdotla/dotenv
32 | dotenvFiles.forEach(dotenvFile => {
33 |   if (fs.existsSync(dotenvFile)) {
34 |     require('dotenv').config({
35 |       path: dotenvFile,
36 |     });
37 |   }
38 | });
39 | 
40 | // We support resolving modules according to `NODE_PATH`.
41 | // This lets you use absolute paths in imports inside large monorepos:
42 | // https://github.com/facebookincubator/create-react-app/issues/253.
43 | // It works similar to `NODE_PATH` in Node itself:
44 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
45 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
46 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
47 | // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
48 | // We also resolve them to make sure all tools using them work consistently.
49 | const appDirectory = fs.realpathSync(process.cwd());
50 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
51 |   .split(path.delimiter)
52 |   .filter(folder => folder && !path.isAbsolute(folder))
53 |   .map(folder => path.resolve(appDirectory, folder))
54 |   .join(path.delimiter);
55 | 
56 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
57 | // injected into the application via DefinePlugin in Webpack configuration.
58 | const REACT_APP = /^REACT_APP_/i;
59 | 
60 | function getClientEnvironment(publicUrl) {
61 |   const raw = Object.keys(process.env)
62 |     .filter(key => REACT_APP.test(key))
63 |     .reduce(
64 |       (env, key) => {
65 |         env[key] = process.env[key];
66 |         return env;
67 |       },
68 |       {
69 |         // Useful for determining whether we’re running in production mode.
70 |         // Most importantly, it switches React into the correct mode.
71 |         NODE_ENV: process.env.NODE_ENV || 'development',
72 |         // Useful for resolving the correct path to static assets in `public`.
73 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
74 |         // This should only be used as an escape hatch. Normally you would put
75 |         // images into the `src` and `import` them in code to get their paths.
76 |         PUBLIC_URL: publicUrl,
77 |       }
78 |     );
79 |   // Stringify all values so we can feed into Webpack DefinePlugin
80 |   const stringified = {
81 |     'process.env': Object.keys(raw).reduce((env, key) => {
82 |       env[key] = JSON.stringify(raw[key]);
83 |       return env;
84 |     }, {}),
85 |   };
86 | 
87 |   return { raw, stringified };
88 | }
89 | 
90 | module.exports = getClientEnvironment;
91 | 


--------------------------------------------------------------------------------
/code/chapter-10/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/code/chapter-10/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | 
 5 | // This is a custom Jest transformer turning file imports into filenames.
 6 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 7 | 
 8 | module.exports = {
 9 |   process(src, filename) {
10 |     return `module.exports = ${JSON.stringify(path.basename(filename))};`;
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/code/chapter-10/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const fs = require('fs');
 5 | const url = require('url');
 6 | 
 7 | // Make sure any symlinks in the project folder are resolved:
 8 | // https://github.com/facebookincubator/create-react-app/issues/637
 9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 | 
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 | 
14 | function ensureSlash(path, needsSlash) {
15 |   const hasSlash = path.endsWith('/');
16 |   if (hasSlash && !needsSlash) {
17 |     return path.substr(path, path.length - 1);
18 |   } else if (!hasSlash && needsSlash) {
19 |     return `${path}/`;
20 |   } else {
21 |     return path;
22 |   }
23 | }
24 | 
25 | const getPublicUrl = appPackageJson =>
26 |   envPublicUrl || require(appPackageJson).homepage;
27 | 
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
31 | // single-page apps that may serve index.html for nested URLs like /todos/42.
32 | // We can't use a relative path in HTML because we don't want to load something
33 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
34 | function getServedPath(appPackageJson) {
35 |   const publicUrl = getPublicUrl(appPackageJson);
36 |   const servedUrl =
37 |     envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
38 |   return ensureSlash(servedUrl, true);
39 | }
40 | 
41 | // config after eject: we're in ./config/
42 | module.exports = {
43 |   dotenv: resolveApp('.env'),
44 |   appBuild: resolveApp('build'),
45 |   appPublic: resolveApp('public'),
46 |   appHtml: resolveApp('public/index.html'),
47 |   appIndexJs: resolveApp('src/index.js'),
48 |   appPackageJson: resolveApp('package.json'),
49 |   appSrc: resolveApp('src'),
50 |   yarnLockFile: resolveApp('yarn.lock'),
51 |   testsSetup: resolveApp('src/setupTests.js'),
52 |   appNodeModules: resolveApp('node_modules'),
53 |   publicUrl: getPublicUrl(resolveApp('package.json')),
54 |   servedPath: getServedPath(resolveApp('package.json')),
55 | };
56 | 


--------------------------------------------------------------------------------
/code/chapter-10/config/polyfills.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | if (typeof Promise === 'undefined') {
 4 |   // Rejection tracking prevents a common issue where React gets into an
 5 |   // inconsistent state due to an error, but it gets swallowed by a Promise,
 6 |   // and the user has no idea what causes React's erratic future behavior.
 7 |   require('promise/lib/rejection-tracking').enable();
 8 |   window.Promise = require('promise/lib/es6-extensions.js');
 9 | }
10 | 
11 | // fetch() polyfill for making API calls.
12 | require('whatwg-fetch');
13 | 
14 | // Object.assign() is commonly used with React.
15 | // It will use the native implementation if it's present and isn't buggy.
16 | Object.assign = require('object-assign');
17 | 


--------------------------------------------------------------------------------
/code/chapter-10/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "ui-react",
  3 |   "version": "0.1.0",
  4 |   "private": true,
  5 |   "dependencies": {
  6 |     "autoprefixer": "7.1.1",
  7 |     "babel-core": "6.25.0",
  8 |     "babel-eslint": "7.2.3",
  9 |     "babel-jest": "20.0.3",
 10 |     "babel-loader": "7.0.0",
 11 |     "babel-preset-react-app": "^3.0.1",
 12 |     "babel-runtime": "6.23.0",
 13 |     "case-sensitive-paths-webpack-plugin": "2.1.1",
 14 |     "chalk": "1.1.3",
 15 |     "classnames": "^2.2.5",
 16 |     "css-loader": "0.28.4",
 17 |     "dotenv": "4.0.0",
 18 |     "eslint": "3.19.0",
 19 |     "eslint-config-react-app": "^1.0.5",
 20 |     "eslint-loader": "1.7.1",
 21 |     "eslint-plugin-flowtype": "2.34.0",
 22 |     "eslint-plugin-import": "2.2.0",
 23 |     "eslint-plugin-jsx-a11y": "5.0.3",
 24 |     "eslint-plugin-react": "7.1.0",
 25 |     "extract-text-webpack-plugin": "2.1.2",
 26 |     "file-loader": "0.11.2",
 27 |     "fs-extra": "3.0.1",
 28 |     "html-webpack-plugin": "2.29.0",
 29 |     "jest": "20.0.4",
 30 |     "object-assign": "4.1.1",
 31 |     "postcss-flexbugs-fixes": "3.0.0",
 32 |     "postcss-loader": "2.0.6",
 33 |     "promise": "7.1.1",
 34 |     "radium": "^0.19.4",
 35 |     "radium-normalize": "^2.0.5",
 36 |     "react": "^15.6.1",
 37 |     "react-dev-utils": "^3.0.2",
 38 |     "react-dom": "^15.6.1",
 39 |     "react-error-overlay": "^1.0.9",
 40 |     "style-loader": "0.18.2",
 41 |     "sw-precache-webpack-plugin": "0.11.3",
 42 |     "theme-wrap": "^1.0.3",
 43 |     "url-loader": "0.5.9",
 44 |     "webpack": "2.6.1",
 45 |     "webpack-dev-server": "2.5.0",
 46 |     "webpack-manifest-plugin": "1.1.0",
 47 |     "whatwg-fetch": "2.0.3"
 48 |   },
 49 |   "scripts": {
 50 |     "start": "node scripts/start.js",
 51 |     "build": "node scripts/build.js",
 52 |     "test": "node scripts/test.js --env=jsdom",
 53 |     "storybook": "NODE_ENV=development start-storybook -p 6006",
 54 |     "build-storybook": "build-storybook"
 55 |   },
 56 |   "jest": {
 57 |     "collectCoverageFrom": [
 58 |       "src/**/*.{js,jsx}"
 59 |     ],
 60 |     "setupFiles": [
 61 |       "<rootDir>/config/polyfills.js"
 62 |     ],
 63 |     "testMatch": [
 64 |       "<rootDir>/src/**/__tests__/**/*.js?(x)",
 65 |       "<rootDir>/src/**/?(*.)(spec|test).js?(x)"
 66 |     ],
 67 |     "testEnvironment": "node",
 68 |     "testURL": "http://localhost",
 69 |     "transform": {
 70 |       "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
 71 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
 72 |       "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
 73 |     },
 74 |     "transformIgnorePatterns": [
 75 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
 76 |     ],
 77 |     "moduleNameMapper": {
 78 |       "^react-native$": "react-native-web"
 79 |     },
 80 |     "moduleFileExtensions": [
 81 |       "web.js",
 82 |       "js",
 83 |       "json",
 84 |       "web.jsx",
 85 |       "jsx"
 86 |     ]
 87 |   },
 88 |   "babel": {
 89 |     "presets": [
 90 |       "react-app"
 91 |     ]
 92 |   },
 93 |   "eslintConfig": {
 94 |     "extends": "react-app"
 95 |   },
 96 |   "devDependencies": {
 97 |     "@kadira/storybook": "^2.21.0",
 98 |     "@storybook/addon-info": "^3.1.9",
 99 |     "node-sass": "^4.5.3",
100 |     "sass-loader": "^6.0.6"
101 |   }
102 | }
103 | 


--------------------------------------------------------------------------------
/code/chapter-10/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/code/chapter-10/public/favicon.ico


--------------------------------------------------------------------------------
/code/chapter-10/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <meta name="theme-color" content="#000000">
 7 |     <!--
 8 |       manifest.json provides metadata used when your web app is added to the
 9 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10 |     -->
11 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13 |     <!--
14 |       Notice the use of %PUBLIC_URL% in the tags above.
15 |       It will be replaced with the URL of the `public` folder during the build.
16 |       Only files inside the `public` folder can be referenced from the HTML.
17 | 
18 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19 |       work correctly both with client-side routing and a non-root public URL.
20 |       Learn how to configure a non-root public URL by running `npm run build`.
21 |     -->
22 |     <title>U&I with React</title>
23 |   </head>
24 |   <body>
25 |     <noscript>
26 |       You need to enable JavaScript to run this app.
27 |     </noscript>
28 |     <div id="todos-app"></div>
29 |     <!--
30 |       This HTML file is a template.
31 |       If you open it directly in the browser, you will see an empty page.
32 | 
33 |       You can add webfonts, meta tags, or analytics to this file.
34 |       The build step will place the bundled scripts into the <body> tag.
35 | 
36 |       To begin the development, run `npm start` or `yarn start`.
37 |       To create a production bundle, use `npm run build` or `yarn build`.
38 |     -->
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/code/chapter-10/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "192x192",
 8 |       "type": "image/png"
 9 |     }
10 |   ],
11 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/code/chapter-10/scripts/start.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'development';
 5 | process.env.NODE_ENV = 'development';
 6 | 
 7 | // Makes the script crash on unhandled rejections instead of silently
 8 | // ignoring them. In the future, promise rejections that are not handled will
 9 | // terminate the Node.js process with a non-zero exit code.
10 | process.on('unhandledRejection', err => {
11 |   throw err;
12 | });
13 | 
14 | // Ensure environment variables are read.
15 | require('../config/env');
16 | 
17 | const fs = require('fs');
18 | const chalk = require('chalk');
19 | const webpack = require('webpack');
20 | const WebpackDevServer = require('webpack-dev-server');
21 | const clearConsole = require('react-dev-utils/clearConsole');
22 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
23 | const {
24 |   choosePort,
25 |   createCompiler,
26 |   prepareProxy,
27 |   prepareUrls,
28 | } = require('react-dev-utils/WebpackDevServerUtils');
29 | const openBrowser = require('react-dev-utils/openBrowser');
30 | const paths = require('../config/paths');
31 | const config = require('../config/webpack.config.dev');
32 | const createDevServerConfig = require('../config/webpackDevServer.config');
33 | 
34 | const useYarn = fs.existsSync(paths.yarnLockFile);
35 | const isInteractive = process.stdout.isTTY;
36 | 
37 | // Warn and crash if required files are missing
38 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
39 |   process.exit(1);
40 | }
41 | 
42 | // Tools like Cloud9 rely on this.
43 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
44 | const HOST = process.env.HOST || '0.0.0.0';
45 | 
46 | // We attempt to use the default port but if it is busy, we offer the user to
47 | // run on a different port. `detect()` Promise resolves to the next free port.
48 | choosePort(HOST, DEFAULT_PORT)
49 |   .then(port => {
50 |     if (port == null) {
51 |       // We have not found a port.
52 |       return;
53 |     }
54 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
55 |     const appName = require(paths.appPackageJson).name;
56 |     const urls = prepareUrls(protocol, HOST, port);
57 |     // Create a webpack compiler that is configured with custom messages.
58 |     const compiler = createCompiler(webpack, config, appName, urls, useYarn);
59 |     // Load proxy config
60 |     const proxySetting = require(paths.appPackageJson).proxy;
61 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
62 |     // Serve webpack assets generated by the compiler over a web sever.
63 |     const serverConfig = createDevServerConfig(
64 |       proxyConfig,
65 |       urls.lanUrlForConfig
66 |     );
67 |     const devServer = new WebpackDevServer(compiler, serverConfig);
68 |     // Launch WebpackDevServer.
69 |     devServer.listen(port, HOST, err => {
70 |       if (err) {
71 |         return console.log(err);
72 |       }
73 |       if (isInteractive) {
74 |         clearConsole();
75 |       }
76 |       console.log(chalk.cyan('Starting the development server...\n'));
77 |       openBrowser(urls.localUrlForBrowser);
78 |     });
79 | 
80 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
81 |       process.on(sig, function() {
82 |         devServer.close();
83 |         process.exit();
84 |       });
85 |     });
86 |   })
87 |   .catch(err => {
88 |     if (err && err.message) {
89 |       console.log(err.message);
90 |     }
91 |     process.exit(1);
92 |   });
93 | 


--------------------------------------------------------------------------------
/code/chapter-10/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'test';
 5 | process.env.NODE_ENV = 'test';
 6 | process.env.PUBLIC_URL = '';
 7 | 
 8 | // Makes the script crash on unhandled rejections instead of silently
 9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 |   throw err;
13 | });
14 | 
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 | 
18 | const jest = require('jest');
19 | const argv = process.argv.slice(2);
20 | 
21 | // Watch unless on CI or in coverage mode
22 | if (!process.env.CI && argv.indexOf('--coverage') < 0) {
23 |   argv.push('--watch');
24 | }
25 | 
26 | 
27 | jest.run(argv);
28 | 


--------------------------------------------------------------------------------
/code/chapter-10/src/components/App/App.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import _ from 'lodash';
 3 | import React, { Component } from 'react';
 4 | import { Style, StyleRoot } from 'radium';
 5 | import normalize from 'radium-normalize';
 6 | import { ThemeWrapProvider } from 'theme-wrap';
 7 | 
 8 | // local dependencies
 9 | import TodosList from '../TodosList/TodosList';
10 | import TodosListItem from '../TodosListItem/TodosListItem';
11 | import TodosListInfo from '../TodosListInfo/TodosListInfo';
12 | import globalStyles from '../../styles/globals.styles';
13 | import styles from './App.styles';
14 | import theme from '../../styles/theme';
15 | import mixins from '../../styles/mixins';
16 | 
17 | class App extends Component {
18 | 
19 |   constructor(...args) {
20 |     super(...args);
21 |     this.state = {
22 |       todos: {},
23 |       dynamicTheme: theme
24 |     };
25 |   }
26 | 
27 |   componentDidMount() {
28 |     this.setState({
29 |       todos: {
30 |         1: { id: 1, completed: false, description: 'task 1' },
31 |         // set to true
32 |         2: { id: 2, completed: true, description: 'task 2' },
33 |         3: { id: 3, completed: false, description: 'task 3' },
34 |         4: { id: 4, completed: false, description: 'task 4' }
35 |       }
36 |     });
37 |   }
38 | 
39 |   randomizeTheme = () => {
40 |     const colorPalette = ['red', 'green', 'blue', 'yellow', 'orange', 'purple', 'cyan'];
41 |     const dynamicTheme = {
42 |       ...this.state.dynamicTheme,
43 |       $primaryColor: _.sample(colorPalette),
44 |       $secondaryColor: _.sample(colorPalette),
45 |       $tertiaryColor: _.sample(colorPalette)
46 |     };
47 |     this.setState({ dynamicTheme });
48 |   };
49 | 
50 |   toggleTodo = (id) => (e) => {
51 |     e.preventDefault();
52 |     const todos = _.clone(this.state.todos);
53 |     todos[id].completed = !todos[id].completed;
54 |     this.setState({ todos });
55 |     this.randomizeTheme();
56 |   };
57 | 
58 |   generateTodosListItem = (todo, id) => (
59 |     <TodosListItem key={id}
60 |                    todo={todo}
61 |                    pStyles={styles}
62 |                    handleClick={this.toggleTodo} />
63 |   );
64 | 
65 |   render() {
66 |     const { dynamicTheme, todos } = this.state;
67 |     return (
68 |       <StyleRoot>
69 |         <Style rules={normalize} />
70 |         <Style rules={globalStyles} />
71 |         <ThemeWrapProvider theme={dynamicTheme}
72 |                            mixins={mixins}>
73 |           <div style={styles.app}>
74 |             <TodosList pStyles={styles}>
75 |               {_.map(todos, this.generateTodosListItem)}
76 |               <TodosListInfo todos={todos} />
77 |             </TodosList>
78 |           </div>
79 |         </ThemeWrapProvider>
80 |       </StyleRoot>
81 |     );
82 |   }
83 | }
84 | 
85 | export default App;


--------------------------------------------------------------------------------
/code/chapter-10/src/components/App/App.spec.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/code/chapter-10/src/components/App/App.spec.js


--------------------------------------------------------------------------------
/code/chapter-10/src/components/App/App.styles.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   app: {},
 3 |   todosList: {
 4 |     margin: '50px auto',
 5 |     maxWidth: 800
 6 |   },
 7 |   todosListItem: {
 8 |     margin: '10px 0'
 9 |   }
10 | }


--------------------------------------------------------------------------------
/code/chapter-10/src/components/TodosList/TodosList.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import _ from 'lodash';
 3 | import React from 'react';
 4 | import PropTypes from 'prop-types';
 5 | import Radium from 'radium';
 6 | import { applyThemeWrap } from 'theme-wrap';
 7 | 
 8 | // local dependencies
 9 | import styles from './TodosList.styles';
10 | 
11 | export const TodosList = ({ children, pStyles, twStyles }) => (
12 |   <ul style={[twStyles.todosList, pStyles.todosList]}>
13 |     {children}
14 |   </ul>
15 | );
16 | 
17 | TodosList.defaultProps = {
18 |   children: [],
19 |   pStyles: {
20 |     todosList: {}
21 |   }
22 | };
23 | 
24 | TodosList.propTypes = {
25 |   children: PropTypes.oneOfType([
26 |     PropTypes.array,
27 |     PropTypes.element
28 |   ]),
29 |   pStyles: PropTypes.shape({
30 |     todosList: PropTypes.object
31 |   })
32 | };
33 | 
34 | export default _.flow(
35 |   Radium,
36 |   applyThemeWrap(styles)
37 | )(TodosList);


--------------------------------------------------------------------------------
/code/chapter-10/src/components/TodosList/TodosList.spec.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/code/chapter-10/src/components/TodosList/TodosList.spec.js


--------------------------------------------------------------------------------
/code/chapter-10/src/components/TodosList/TodosList.story.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import _ from 'lodash';
 3 | import React from 'react';
 4 | import { storiesOf } from '@kadira/storybook';
 5 | 
 6 | // local dependencies
 7 | import TodosList from './TodosList';
 8 | 
 9 | // helper function that generates a set of children
10 | const generateChildren = (num = 5) => _(num)
11 | .range()
12 | .map((i) => <li key={i}>Item #{i}</li>)
13 | .value();
14 | 
15 | export default storiesOf('TodosList', module)
16 | .addWithInfo('default view', () => (
17 |   <TodosList>
18 |     <li>Default</li>
19 |   </TodosList>
20 | ))
21 | 
22 | .addWithInfo('renders children', () => (
23 |   <TodosList>
24 |     {generateChildren(5)}
25 |   </TodosList>
26 | ))
27 | 
28 | .addWithInfo('accepts custom styles', () => {
29 |   const customStyles = {
30 |     todosList: {
31 |       background: 'orange',
32 |       border: '10px solid purple',
33 |       color: 'purple',
34 |       fontSize: 40
35 |     }
36 |   };
37 |   return (
38 |     <TodosList pStyles={customStyles}>
39 |       {generateChildren(10)}
40 |     </TodosList>
41 |   );
42 | });


--------------------------------------------------------------------------------
/code/chapter-10/src/components/TodosList/TodosList.styles.js:
--------------------------------------------------------------------------------
1 | export default (theme, mixins) => ({
2 |   todosList: {
3 |     ...mixins.get('list'),
4 |     border: `10px solid ${theme.$secondaryColor}`,
5 |     background: theme.$primaryColor,
6 |     transition: 'all 0.5s ease',
7 |   }
8 | });
9 | 


--------------------------------------------------------------------------------
/code/chapter-10/src/components/TodosListInfo/TodosListInfo.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import _ from 'lodash';
 3 | import PropTypes from 'prop-types';
 4 | import React from 'react';
 5 | import Radium from 'radium';
 6 | import { applyThemeWrap } from 'theme-wrap';
 7 | 
 8 | // local dependencies
 9 | import { TodosListItem } from '../TodosListItem/TodosListItem';
10 | import styles from './TodosListInfo.styles';
11 | 
12 | export const TodosListInfo = ({ todos, twStyles }) => {
13 |   const todosCount = _.size(todos);
14 |   const completedTodosCount = _(todos).filter('completed').size();
15 |   return (
16 |     <li style={twStyles.todosListInfo}>
17 |       {completedTodosCount}/{todosCount} completed
18 |     </li>
19 |   );
20 | };
21 | 
22 | TodosListInfo.defaultProps = {
23 |   todos: []
24 | };
25 | 
26 | TodosListInfo.propTypes = {
27 |   todos: PropTypes.objectOf(TodosListItem.propTypes.todo)
28 | };
29 | 
30 | export default _.flow(
31 |   Radium,
32 |   applyThemeWrap(styles)
33 | )(TodosListInfo);


--------------------------------------------------------------------------------
/code/chapter-10/src/components/TodosListInfo/TodosListInfo.spec.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/code/chapter-10/src/components/TodosListInfo/TodosListInfo.spec.js


--------------------------------------------------------------------------------
/code/chapter-10/src/components/TodosListInfo/TodosListInfo.story.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import _ from 'lodash';
 3 | import React from 'react';
 4 | import { storiesOf } from '@kadira/storybook';
 5 | 
 6 | // local dependencies
 7 | import TodosListInfo from './TodosListInfo';
 8 | 
 9 | const generateTodos = (num = 5) => {
10 |   const todos = {};
11 |   _.times(num, id => {
12 |     todos[id] = {
13 |       id,
14 |       completed: Math.random() > 0.5,
15 |       description: `Task #${id}`
16 |     };
17 |   });
18 |   return todos;
19 | };
20 | 
21 | export default storiesOf('TodosListInfo', module)
22 | .addWithInfo('default view', () => (
23 |   <TodosListInfo todos={generateTodos()} />
24 | ));


--------------------------------------------------------------------------------
/code/chapter-10/src/components/TodosListInfo/TodosListInfo.styles.js:
--------------------------------------------------------------------------------
1 | export default (theme) => ({
2 |   todosListInfo: {
3 |     color: theme.$secondaryColor,
4 |     fontSize: 14,
5 |     textAlign: 'right'
6 |   }
7 | });


--------------------------------------------------------------------------------
/code/chapter-10/src/components/TodosListItem/TodosListItem.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import _ from 'lodash';
 3 | import PropTypes from 'prop-types';
 4 | import React from 'react';
 5 | import Radium from 'radium';
 6 | import { applyThemeWrap } from 'theme-wrap';
 7 | 
 8 | // local dependencies
 9 | import styles from './TodosListItem.styles';
10 | 
11 | export const TodosListItem = ({ pStyles, todo, twStyles, handleClick }) => (
12 |   <li
13 |     style={[
14 |       twStyles.todosListItem,
15 |       pStyles.todosListItem,
16 |       todo.completed && twStyles.completedTodosListItem,
17 |       todo.completed && pStyles.completedTodosListItem
18 |     ]}
19 |     onClick={handleClick(todo.id)}>
20 |     {todo.description}
21 |   </li>
22 | );
23 | 
24 | TodosListItem.defaultProps = {
25 |   todo: {},
26 |   handleClick: _.noop,
27 |   pStyles: {
28 |     todosListItem: {},
29 |     completedTodosListItem: {}
30 |   }
31 | };
32 | 
33 | TodosListItem.propTypes = {
34 |   handleClick: PropTypes.func,
35 |   todo: PropTypes.shape({
36 |     completed: PropTypes.boolean,
37 |     description: PropTypes.string,
38 |     id: PropTypes.number
39 |   }),
40 |   pStyles: PropTypes.shape({
41 |     todosListItem: PropTypes.object,
42 |     completedTodosListItem: PropTypes.object
43 |   })
44 | };
45 | 
46 | export default _.flow(
47 |   Radium,
48 |   applyThemeWrap(styles)
49 | )(TodosListItem);


--------------------------------------------------------------------------------
/code/chapter-10/src/components/TodosListItem/TodosListItem.spec.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/code/chapter-10/src/components/TodosListItem/TodosListItem.spec.js


--------------------------------------------------------------------------------
/code/chapter-10/src/components/TodosListItem/TodosListItem.story.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import React from 'react';
 3 | import { action, storiesOf } from '@kadira/storybook';
 4 | 
 5 | // local dependencies
 6 | import TodosListItem from './TodosListItem';
 7 | 
 8 | const sampleTodo = {
 9 |   id: 1,
10 |   completed: false,
11 |   description: 'Sample Todo'
12 | };
13 | 
14 | const sampleCompletedTodo = {
15 |   id: 2,
16 |   completed: true,
17 |   description: 'Sample Completed Todo'
18 | };
19 | 
20 | export default storiesOf('TodosListItem', module)
21 | .addWithInfo('default view', () => (
22 |   <TodosListItem />
23 | ))
24 | 
25 | .addWithInfo('accepts todo via props', () => (
26 |   <TodosListItem todo={sampleTodo} />
27 | ))
28 | 
29 | .addWithInfo('accepts completed todo via props', () => (
30 |   <TodosListItem todo={sampleCompletedTodo} />
31 | ))
32 | 
33 | .addWithInfo('accepts custom styles via props', () => {
34 |   const customStyles = {
35 |     todosListItem: {
36 |       border: '20px dashed orange',
37 |       color: 'orange',
38 |       fontSize: 40,
39 |       margin: '0 auto',
40 |       padding: 10,
41 |       width: 500
42 |     }
43 |   };
44 |   return (
45 |     <TodosListItem todo={sampleTodo}
46 |                    pStyles={customStyles} />
47 |   );
48 | })
49 | 
50 | .addWithInfo('accepts custom completed styles via props', () => {
51 |   const customStyles = {
52 |     completed: {
53 |       backgroundColor: 'black',
54 |       color: 'orange'
55 |     }
56 |   };
57 |   return (
58 |     <TodosListItem todo={sampleCompletedTodo}
59 |                    pStyles={customStyles} />
60 |   );
61 | })
62 | 
63 | .addWithInfo('accepts toggleTodo callback via props', () => (
64 |   <TodosListItem todo={sampleTodo}
65 |                  handleClick={(id) => (e) => action('toggle todo')(id)} />
66 | ));


--------------------------------------------------------------------------------
/code/chapter-10/src/components/TodosListItem/TodosListItem.styles.js:
--------------------------------------------------------------------------------
 1 | export default (theme, mixins) => ({
 2 |   todosListItem: {
 3 |     ...mixins.get('listItem'),
 4 |     border: `5px solid ${theme.$tertiaryColor}`,
 5 |   },
 6 | 
 7 |   completedTodosListItem: {
 8 |     ...mixins.get('listItem'),
 9 |     background: theme.$primaryColor,
10 |     border: `5px solid ${theme.$secondaryColor}`,
11 |     boxShadow: 'inset 0 1px 2px 0 rgba(0, 0, 0, 0.3)',
12 |     color: '#AAAAAA',
13 |     textDecoration: 'line-through',
14 |     top: 3
15 |   }
16 | });


--------------------------------------------------------------------------------
/code/chapter-10/src/index.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import React from 'react';
 3 | import { render } from 'react-dom';
 4 | 
 5 | // local dependencies
 6 | import App from './components/App/App';
 7 | 
 8 | render(
 9 |   <App />,
10 |   document.getElementById('todos-app')
11 | );


--------------------------------------------------------------------------------
/code/chapter-10/src/styles/globals.styles.js:
--------------------------------------------------------------------------------
 1 | import theme from './theme';
 2 | 
 3 | export default {
 4 |   '*, *:before, *:after': {
 5 |     boxSizing: 'inherit'
 6 |   },
 7 |   html: {
 8 |     boxSizing: 'border-box'
 9 |   },
10 |   body: {
11 |     background: theme.$mainBackgroundColor,
12 |     fontSize: 10,
13 |     fontFamily: theme.$mainFontFamily,
14 |     margin: 0,
15 |     padding: 0
16 |   }
17 | }


--------------------------------------------------------------------------------
/code/chapter-10/src/styles/mixins.js:
--------------------------------------------------------------------------------
 1 | import { ThemeWrapMixin } from 'theme-wrap';
 2 | 
 3 | export default new ThemeWrapMixin()
 4 | .set('list', (theme) => ({
 5 |   listStyle: 'none',
 6 |   padding: '10px 15px',
 7 |   transition: 'all 0.5s ease',
 8 |   borderRadius: 5
 9 | }))
10 | 
11 | .set('listItem', (theme) => ({
12 |   background: theme.$lightGray,
13 |   borderRadius: 5,
14 |   boxShadow: '0 2px 1px 0 rgba(0, 0, 0, 0.2)',
15 |   color: theme.$darkGray,
16 |   cursor: 'pointer',
17 |   fontSize: '2rem',
18 |   padding: '15px 20px',
19 |   position: 'relative',
20 |   transition: 'all 0.2s ease',
21 |   ':hover': {
22 |     opacity: 0.8
23 |   }
24 | }))


--------------------------------------------------------------------------------
/code/chapter-10/src/styles/theme.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   $APP: 'todos-app',
 3 | 
 4 |   $mainBackgroundColor: '#F1F1F1',
 5 |   $mainFontFamily: 'Helvetica Neue, Arial, sans-serif',
 6 | 
 7 |   $lightGray: '#FAFAFA',
 8 |   $darkGray: '#888888',
 9 | 
10 |   $primaryColor: 'red',
11 |   $secondaryColor: 'green',
12 |   $tertiaryColor: 'blue',
13 | };


--------------------------------------------------------------------------------
/code/chapter-10/stories/Button.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const buttonStyles = {
 4 |   border: '1px solid #eee',
 5 |   borderRadius: 3,
 6 |   backgroundColor: '#FFFFFF',
 7 |   cursor: 'pointer',
 8 |   fontSize: 15,
 9 |   padding: '3px 10px',
10 |   margin: 10,
11 | };
12 | 
13 | const Button = ({ children, onClick }) => (
14 |   <button
15 |     style={buttonStyles}
16 |     onClick={onClick}
17 |   >
18 |     {children}
19 |   </button>
20 | );
21 | 
22 | Button.propTypes = {
23 |   children: React.PropTypes.string.isRequired,
24 |   onClick: React.PropTypes.func,
25 | };
26 | 
27 | export default Button;
28 | 


--------------------------------------------------------------------------------
/code/chapter-10/stories/Welcome.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const styles = {
 4 |   main: {
 5 |     margin: 15,
 6 |     maxWidth: 600,
 7 |     lineHeight: 1.4,
 8 |     fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
 9 |   },
10 | 
11 |   logo: {
12 |     width: 200,
13 |   },
14 | 
15 |   link: {
16 |     color: '#1474f3',
17 |     textDecoration: 'none',
18 |     borderBottom: '1px solid #1474f3',
19 |     paddingBottom: 2,
20 |   },
21 | 
22 |   code: {
23 |     fontSize: 15,
24 |     fontWeight: 600,
25 |     padding: "2px 5px",
26 |     border: "1px solid #eae9e9",
27 |     borderRadius: 4,
28 |     backgroundColor: '#f3f2f2',
29 |     color: '#3a3a3a',
30 |   },
31 | };
32 | 
33 | export default class Welcome extends React.Component {
34 |   showApp(e) {
35 |     e.preventDefault();
36 |     if(this.props.showApp) this.props.showApp();
37 |   }
38 | 
39 |   render() {
40 |     return (
41 |       <div style={styles.main}>
42 |         <h1>Welcome to STORYBOOK</h1>
43 |         <p>
44 |           This is a UI component dev environment for your app.
45 |         </p>
46 |         <p>
47 |           We've added some basic stories inside the <code style={styles.code}>src/stories</code> directory.
48 |           <br/>
49 |           A story is a single state of one or more UI components. You can have as many stories as you want.
50 |           <br/>
51 |           (Basically a story is like a visual test case.)
52 |         </p>
53 |         <p>
54 |           See these sample <a style={styles.link} href='#' onClick={this.showApp.bind(this)}>stories</a> for a component called <code style={styles.code}>Button</code>.
55 |         </p>
56 |         <p>
57 |           Just like that, you can add your own components as stories.
58 |           <br />
59 |           You can also edit those components and see changes right away.
60 |           <br />
61 |           (Try editing the <code style={styles.code}>Button</code> component
62 |           located at <code style={styles.code}>src/stories/Button.js</code>.)
63 |         </p>
64 |         <p>
65 |           This is just one thing you can do with Storybook.
66 |           <br/>
67 |           Have a look at the <a style={styles.link} href="https://github.com/kadirahq/react-storybook" target="_blank">React Storybook</a> repo for more information.
68 |         </p>
69 |       </div>
70 |     );
71 |   }
72 | }
73 | 


--------------------------------------------------------------------------------
/code/chapter-10/stories/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { storiesOf, action, linkTo } from '@kadira/storybook';
 3 | import Button from './Button';
 4 | import Welcome from './Welcome';
 5 | 
 6 | storiesOf('Welcome', module)
 7 |   .add('to Storybook', () => (
 8 |     <Welcome showApp={linkTo('Button')}/>
 9 |   ));
10 | 
11 | storiesOf('Button', module)
12 |   .add('with text', () => (
13 |     <Button onClick={action('clicked')}>Hello Button</Button>
14 |   ))
15 |   .add('with some emoji', () => (
16 |     <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
17 |   ));
18 | 


--------------------------------------------------------------------------------
/code/chapter-3/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # production
10 | /build
11 | 
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 | 
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | 


--------------------------------------------------------------------------------
/code/chapter-3/config/env.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | 
 7 | // Make sure that including paths.js after env.js will read .env variables.
 8 | delete require.cache[require.resolve('./paths')];
 9 | 
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 |   throw new Error(
13 |     'The NODE_ENV environment variable is required but was not specified.'
14 |   );
15 | }
16 | 
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | var dotenvFiles = [
19 |   `${paths.dotenv}.${NODE_ENV}.local`,
20 |   `${paths.dotenv}.${NODE_ENV}`,
21 |   // Don't include `.env.local` for `test` environment
22 |   // since normally you expect tests to produce the same
23 |   // results for everyone
24 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 |   paths.dotenv,
26 | ].filter(Boolean);
27 | 
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set.
31 | // https://github.com/motdotla/dotenv
32 | dotenvFiles.forEach(dotenvFile => {
33 |   if (fs.existsSync(dotenvFile)) {
34 |     require('dotenv').config({
35 |       path: dotenvFile,
36 |     });
37 |   }
38 | });
39 | 
40 | // We support resolving modules according to `NODE_PATH`.
41 | // This lets you use absolute paths in imports inside large monorepos:
42 | // https://github.com/facebookincubator/create-react-app/issues/253.
43 | // It works similar to `NODE_PATH` in Node itself:
44 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
45 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
46 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
47 | // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
48 | // We also resolve them to make sure all tools using them work consistently.
49 | const appDirectory = fs.realpathSync(process.cwd());
50 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
51 |   .split(path.delimiter)
52 |   .filter(folder => folder && !path.isAbsolute(folder))
53 |   .map(folder => path.resolve(appDirectory, folder))
54 |   .join(path.delimiter);
55 | 
56 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
57 | // injected into the application via DefinePlugin in Webpack configuration.
58 | const REACT_APP = /^REACT_APP_/i;
59 | 
60 | function getClientEnvironment(publicUrl) {
61 |   const raw = Object.keys(process.env)
62 |     .filter(key => REACT_APP.test(key))
63 |     .reduce(
64 |       (env, key) => {
65 |         env[key] = process.env[key];
66 |         return env;
67 |       },
68 |       {
69 |         // Useful for determining whether we’re running in production mode.
70 |         // Most importantly, it switches React into the correct mode.
71 |         NODE_ENV: process.env.NODE_ENV || 'development',
72 |         // Useful for resolving the correct path to static assets in `public`.
73 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
74 |         // This should only be used as an escape hatch. Normally you would put
75 |         // images into the `src` and `import` them in code to get their paths.
76 |         PUBLIC_URL: publicUrl,
77 |       }
78 |     );
79 |   // Stringify all values so we can feed into Webpack DefinePlugin
80 |   const stringified = {
81 |     'process.env': Object.keys(raw).reduce((env, key) => {
82 |       env[key] = JSON.stringify(raw[key]);
83 |       return env;
84 |     }, {}),
85 |   };
86 | 
87 |   return { raw, stringified };
88 | }
89 | 
90 | module.exports = getClientEnvironment;
91 | 


--------------------------------------------------------------------------------
/code/chapter-3/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/code/chapter-3/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | 
 5 | // This is a custom Jest transformer turning file imports into filenames.
 6 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 7 | 
 8 | module.exports = {
 9 |   process(src, filename) {
10 |     return `module.exports = ${JSON.stringify(path.basename(filename))};`;
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/code/chapter-3/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const fs = require('fs');
 5 | const url = require('url');
 6 | 
 7 | // Make sure any symlinks in the project folder are resolved:
 8 | // https://github.com/facebookincubator/create-react-app/issues/637
 9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 | 
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 | 
14 | function ensureSlash(path, needsSlash) {
15 |   const hasSlash = path.endsWith('/');
16 |   if (hasSlash && !needsSlash) {
17 |     return path.substr(path, path.length - 1);
18 |   } else if (!hasSlash && needsSlash) {
19 |     return `${path}/`;
20 |   } else {
21 |     return path;
22 |   }
23 | }
24 | 
25 | const getPublicUrl = appPackageJson =>
26 |   envPublicUrl || require(appPackageJson).homepage;
27 | 
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
31 | // single-page apps that may serve index.html for nested URLs like /todos/42.
32 | // We can't use a relative path in HTML because we don't want to load something
33 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
34 | function getServedPath(appPackageJson) {
35 |   const publicUrl = getPublicUrl(appPackageJson);
36 |   const servedUrl =
37 |     envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
38 |   return ensureSlash(servedUrl, true);
39 | }
40 | 
41 | // config after eject: we're in ./config/
42 | module.exports = {
43 |   dotenv: resolveApp('.env'),
44 |   appBuild: resolveApp('build'),
45 |   appPublic: resolveApp('public'),
46 |   appHtml: resolveApp('public/index.html'),
47 |   appIndexJs: resolveApp('src/index.js'),
48 |   appPackageJson: resolveApp('package.json'),
49 |   appSrc: resolveApp('src'),
50 |   yarnLockFile: resolveApp('yarn.lock'),
51 |   testsSetup: resolveApp('src/setupTests.js'),
52 |   appNodeModules: resolveApp('node_modules'),
53 |   publicUrl: getPublicUrl(resolveApp('package.json')),
54 |   servedPath: getServedPath(resolveApp('package.json')),
55 | };
56 | 


--------------------------------------------------------------------------------
/code/chapter-3/config/polyfills.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | if (typeof Promise === 'undefined') {
 4 |   // Rejection tracking prevents a common issue where React gets into an
 5 |   // inconsistent state due to an error, but it gets swallowed by a Promise,
 6 |   // and the user has no idea what causes React's erratic future behavior.
 7 |   require('promise/lib/rejection-tracking').enable();
 8 |   window.Promise = require('promise/lib/es6-extensions.js');
 9 | }
10 | 
11 | // fetch() polyfill for making API calls.
12 | require('whatwg-fetch');
13 | 
14 | // Object.assign() is commonly used with React.
15 | // It will use the native implementation if it's present and isn't buggy.
16 | Object.assign = require('object-assign');
17 | 


--------------------------------------------------------------------------------
/code/chapter-3/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ui-react",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "autoprefixer": "7.1.1",
 7 |     "babel-core": "6.25.0",
 8 |     "babel-eslint": "7.2.3",
 9 |     "babel-jest": "20.0.3",
10 |     "babel-loader": "7.0.0",
11 |     "babel-preset-react-app": "^3.0.1",
12 |     "babel-runtime": "6.23.0",
13 |     "case-sensitive-paths-webpack-plugin": "2.1.1",
14 |     "chalk": "1.1.3",
15 |     "css-loader": "0.28.4",
16 |     "dotenv": "4.0.0",
17 |     "eslint": "3.19.0",
18 |     "eslint-config-react-app": "^1.0.5",
19 |     "eslint-loader": "1.7.1",
20 |     "eslint-plugin-flowtype": "2.34.0",
21 |     "eslint-plugin-import": "2.2.0",
22 |     "eslint-plugin-jsx-a11y": "5.0.3",
23 |     "eslint-plugin-react": "7.1.0",
24 |     "extract-text-webpack-plugin": "2.1.2",
25 |     "file-loader": "0.11.2",
26 |     "fs-extra": "3.0.1",
27 |     "html-webpack-plugin": "2.29.0",
28 |     "jest": "20.0.4",
29 |     "object-assign": "4.1.1",
30 |     "postcss-flexbugs-fixes": "3.0.0",
31 |     "postcss-loader": "2.0.6",
32 |     "promise": "7.1.1",
33 |     "react": "^15.6.1",
34 |     "react-dev-utils": "^3.0.2",
35 |     "react-dom": "^15.6.1",
36 |     "react-error-overlay": "^1.0.9",
37 |     "style-loader": "0.18.2",
38 |     "sw-precache-webpack-plugin": "0.11.3",
39 |     "url-loader": "0.5.9",
40 |     "webpack": "2.6.1",
41 |     "webpack-dev-server": "2.5.0",
42 |     "webpack-manifest-plugin": "1.1.0",
43 |     "whatwg-fetch": "2.0.3"
44 |   },
45 |   "scripts": {
46 |     "start": "node scripts/start.js",
47 |     "build": "node scripts/build.js",
48 |     "test": "node scripts/test.js --env=jsdom"
49 |   },
50 |   "jest": {
51 |     "collectCoverageFrom": [
52 |       "src/**/*.{js,jsx}"
53 |     ],
54 |     "setupFiles": [
55 |       "<rootDir>/config/polyfills.js"
56 |     ],
57 |     "testMatch": [
58 |       "<rootDir>/src/**/__tests__/**/*.js?(x)",
59 |       "<rootDir>/src/**/?(*.)(spec|test).js?(x)"
60 |     ],
61 |     "testEnvironment": "node",
62 |     "testURL": "http://localhost",
63 |     "transform": {
64 |       "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
65 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
66 |       "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
67 |     },
68 |     "transformIgnorePatterns": [
69 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
70 |     ],
71 |     "moduleNameMapper": {
72 |       "^react-native$": "react-native-web"
73 |     },
74 |     "moduleFileExtensions": [
75 |       "web.js",
76 |       "js",
77 |       "json",
78 |       "web.jsx",
79 |       "jsx"
80 |     ]
81 |   },
82 |   "babel": {
83 |     "presets": [
84 |       "react-app"
85 |     ]
86 |   },
87 |   "eslintConfig": {
88 |     "extends": "react-app"
89 |   }
90 | }
91 | 


--------------------------------------------------------------------------------
/code/chapter-3/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/code/chapter-3/public/favicon.ico


--------------------------------------------------------------------------------
/code/chapter-3/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <meta name="theme-color" content="#000000">
 7 |     <!--
 8 |       manifest.json provides metadata used when your web app is added to the
 9 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10 |     -->
11 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13 |     <!--
14 |       Notice the use of %PUBLIC_URL% in the tags above.
15 |       It will be replaced with the URL of the `public` folder during the build.
16 |       Only files inside the `public` folder can be referenced from the HTML.
17 | 
18 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19 |       work correctly both with client-side routing and a non-root public URL.
20 |       Learn how to configure a non-root public URL by running `npm run build`.
21 |     -->
22 |     <title>U&I with React</title>
23 |   </head>
24 |   <body>
25 |     <noscript>
26 |       You need to enable JavaScript to run this app.
27 |     </noscript>
28 |     <div id="root"></div>
29 |     <!--
30 |       This HTML file is a template.
31 |       If you open it directly in the browser, you will see an empty page.
32 | 
33 |       You can add webfonts, meta tags, or analytics to this file.
34 |       The build step will place the bundled scripts into the <body> tag.
35 | 
36 |       To begin the development, run `npm start` or `yarn start`.
37 |       To create a production bundle, use `npm run build` or `yarn build`.
38 |     -->
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/code/chapter-3/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "192x192",
 8 |       "type": "image/png"
 9 |     }
10 |   ],
11 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/code/chapter-3/scripts/start.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'development';
 5 | process.env.NODE_ENV = 'development';
 6 | 
 7 | // Makes the script crash on unhandled rejections instead of silently
 8 | // ignoring them. In the future, promise rejections that are not handled will
 9 | // terminate the Node.js process with a non-zero exit code.
10 | process.on('unhandledRejection', err => {
11 |   throw err;
12 | });
13 | 
14 | // Ensure environment variables are read.
15 | require('../config/env');
16 | 
17 | const fs = require('fs');
18 | const chalk = require('chalk');
19 | const webpack = require('webpack');
20 | const WebpackDevServer = require('webpack-dev-server');
21 | const clearConsole = require('react-dev-utils/clearConsole');
22 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
23 | const {
24 |   choosePort,
25 |   createCompiler,
26 |   prepareProxy,
27 |   prepareUrls,
28 | } = require('react-dev-utils/WebpackDevServerUtils');
29 | const openBrowser = require('react-dev-utils/openBrowser');
30 | const paths = require('../config/paths');
31 | const config = require('../config/webpack.config.dev');
32 | const createDevServerConfig = require('../config/webpackDevServer.config');
33 | 
34 | const useYarn = fs.existsSync(paths.yarnLockFile);
35 | const isInteractive = process.stdout.isTTY;
36 | 
37 | // Warn and crash if required files are missing
38 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
39 |   process.exit(1);
40 | }
41 | 
42 | // Tools like Cloud9 rely on this.
43 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
44 | const HOST = process.env.HOST || '0.0.0.0';
45 | 
46 | // We attempt to use the default port but if it is busy, we offer the user to
47 | // run on a different port. `detect()` Promise resolves to the next free port.
48 | choosePort(HOST, DEFAULT_PORT)
49 |   .then(port => {
50 |     if (port == null) {
51 |       // We have not found a port.
52 |       return;
53 |     }
54 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
55 |     const appName = require(paths.appPackageJson).name;
56 |     const urls = prepareUrls(protocol, HOST, port);
57 |     // Create a webpack compiler that is configured with custom messages.
58 |     const compiler = createCompiler(webpack, config, appName, urls, useYarn);
59 |     // Load proxy config
60 |     const proxySetting = require(paths.appPackageJson).proxy;
61 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
62 |     // Serve webpack assets generated by the compiler over a web sever.
63 |     const serverConfig = createDevServerConfig(
64 |       proxyConfig,
65 |       urls.lanUrlForConfig
66 |     );
67 |     const devServer = new WebpackDevServer(compiler, serverConfig);
68 |     // Launch WebpackDevServer.
69 |     devServer.listen(port, HOST, err => {
70 |       if (err) {
71 |         return console.log(err);
72 |       }
73 |       if (isInteractive) {
74 |         clearConsole();
75 |       }
76 |       console.log(chalk.cyan('Starting the development server...\n'));
77 |       openBrowser(urls.localUrlForBrowser);
78 |     });
79 | 
80 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
81 |       process.on(sig, function() {
82 |         devServer.close();
83 |         process.exit();
84 |       });
85 |     });
86 |   })
87 |   .catch(err => {
88 |     if (err && err.message) {
89 |       console.log(err.message);
90 |     }
91 |     process.exit(1);
92 |   });
93 | 


--------------------------------------------------------------------------------
/code/chapter-3/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'test';
 5 | process.env.NODE_ENV = 'test';
 6 | process.env.PUBLIC_URL = '';
 7 | 
 8 | // Makes the script crash on unhandled rejections instead of silently
 9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 |   throw err;
13 | });
14 | 
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 | 
18 | const jest = require('jest');
19 | const argv = process.argv.slice(2);
20 | 
21 | // Watch unless on CI or in coverage mode
22 | if (!process.env.CI && argv.indexOf('--coverage') < 0) {
23 |   argv.push('--watch');
24 | }
25 | 
26 | 
27 | jest.run(argv);
28 | 


--------------------------------------------------------------------------------
/code/chapter-3/src/index.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import React from 'react';
 3 | import { render } from 'react-dom';
 4 | 
 5 | const App = () => (
 6 |   <div>
 7 |     <h1>Hello, World!</h1>
 8 |   </div>
 9 | );
10 | 
11 | render(
12 |   <App />,
13 |   document.getElementById('root')
14 | );


--------------------------------------------------------------------------------
/code/chapter-4/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # production
10 | /build
11 | 
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 | 
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | 


--------------------------------------------------------------------------------
/code/chapter-4/config/env.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | 
 7 | // Make sure that including paths.js after env.js will read .env variables.
 8 | delete require.cache[require.resolve('./paths')];
 9 | 
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 |   throw new Error(
13 |     'The NODE_ENV environment variable is required but was not specified.'
14 |   );
15 | }
16 | 
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | var dotenvFiles = [
19 |   `${paths.dotenv}.${NODE_ENV}.local`,
20 |   `${paths.dotenv}.${NODE_ENV}`,
21 |   // Don't include `.env.local` for `test` environment
22 |   // since normally you expect tests to produce the same
23 |   // results for everyone
24 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 |   paths.dotenv,
26 | ].filter(Boolean);
27 | 
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set.
31 | // https://github.com/motdotla/dotenv
32 | dotenvFiles.forEach(dotenvFile => {
33 |   if (fs.existsSync(dotenvFile)) {
34 |     require('dotenv').config({
35 |       path: dotenvFile,
36 |     });
37 |   }
38 | });
39 | 
40 | // We support resolving modules according to `NODE_PATH`.
41 | // This lets you use absolute paths in imports inside large monorepos:
42 | // https://github.com/facebookincubator/create-react-app/issues/253.
43 | // It works similar to `NODE_PATH` in Node itself:
44 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
45 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
46 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
47 | // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
48 | // We also resolve them to make sure all tools using them work consistently.
49 | const appDirectory = fs.realpathSync(process.cwd());
50 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
51 |   .split(path.delimiter)
52 |   .filter(folder => folder && !path.isAbsolute(folder))
53 |   .map(folder => path.resolve(appDirectory, folder))
54 |   .join(path.delimiter);
55 | 
56 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
57 | // injected into the application via DefinePlugin in Webpack configuration.
58 | const REACT_APP = /^REACT_APP_/i;
59 | 
60 | function getClientEnvironment(publicUrl) {
61 |   const raw = Object.keys(process.env)
62 |     .filter(key => REACT_APP.test(key))
63 |     .reduce(
64 |       (env, key) => {
65 |         env[key] = process.env[key];
66 |         return env;
67 |       },
68 |       {
69 |         // Useful for determining whether we’re running in production mode.
70 |         // Most importantly, it switches React into the correct mode.
71 |         NODE_ENV: process.env.NODE_ENV || 'development',
72 |         // Useful for resolving the correct path to static assets in `public`.
73 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
74 |         // This should only be used as an escape hatch. Normally you would put
75 |         // images into the `src` and `import` them in code to get their paths.
76 |         PUBLIC_URL: publicUrl,
77 |       }
78 |     );
79 |   // Stringify all values so we can feed into Webpack DefinePlugin
80 |   const stringified = {
81 |     'process.env': Object.keys(raw).reduce((env, key) => {
82 |       env[key] = JSON.stringify(raw[key]);
83 |       return env;
84 |     }, {}),
85 |   };
86 | 
87 |   return { raw, stringified };
88 | }
89 | 
90 | module.exports = getClientEnvironment;
91 | 


--------------------------------------------------------------------------------
/code/chapter-4/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/code/chapter-4/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | 
 5 | // This is a custom Jest transformer turning file imports into filenames.
 6 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 7 | 
 8 | module.exports = {
 9 |   process(src, filename) {
10 |     return `module.exports = ${JSON.stringify(path.basename(filename))};`;
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/code/chapter-4/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const fs = require('fs');
 5 | const url = require('url');
 6 | 
 7 | // Make sure any symlinks in the project folder are resolved:
 8 | // https://github.com/facebookincubator/create-react-app/issues/637
 9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 | 
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 | 
14 | function ensureSlash(path, needsSlash) {
15 |   const hasSlash = path.endsWith('/');
16 |   if (hasSlash && !needsSlash) {
17 |     return path.substr(path, path.length - 1);
18 |   } else if (!hasSlash && needsSlash) {
19 |     return `${path}/`;
20 |   } else {
21 |     return path;
22 |   }
23 | }
24 | 
25 | const getPublicUrl = appPackageJson =>
26 |   envPublicUrl || require(appPackageJson).homepage;
27 | 
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
31 | // single-page apps that may serve index.html for nested URLs like /todos/42.
32 | // We can't use a relative path in HTML because we don't want to load something
33 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
34 | function getServedPath(appPackageJson) {
35 |   const publicUrl = getPublicUrl(appPackageJson);
36 |   const servedUrl =
37 |     envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
38 |   return ensureSlash(servedUrl, true);
39 | }
40 | 
41 | // config after eject: we're in ./config/
42 | module.exports = {
43 |   dotenv: resolveApp('.env'),
44 |   appBuild: resolveApp('build'),
45 |   appPublic: resolveApp('public'),
46 |   appHtml: resolveApp('public/index.html'),
47 |   appIndexJs: resolveApp('src/index.js'),
48 |   appPackageJson: resolveApp('package.json'),
49 |   appSrc: resolveApp('src'),
50 |   yarnLockFile: resolveApp('yarn.lock'),
51 |   testsSetup: resolveApp('src/setupTests.js'),
52 |   appNodeModules: resolveApp('node_modules'),
53 |   publicUrl: getPublicUrl(resolveApp('package.json')),
54 |   servedPath: getServedPath(resolveApp('package.json')),
55 | };
56 | 


--------------------------------------------------------------------------------
/code/chapter-4/config/polyfills.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | if (typeof Promise === 'undefined') {
 4 |   // Rejection tracking prevents a common issue where React gets into an
 5 |   // inconsistent state due to an error, but it gets swallowed by a Promise,
 6 |   // and the user has no idea what causes React's erratic future behavior.
 7 |   require('promise/lib/rejection-tracking').enable();
 8 |   window.Promise = require('promise/lib/es6-extensions.js');
 9 | }
10 | 
11 | // fetch() polyfill for making API calls.
12 | require('whatwg-fetch');
13 | 
14 | // Object.assign() is commonly used with React.
15 | // It will use the native implementation if it's present and isn't buggy.
16 | Object.assign = require('object-assign');
17 | 


--------------------------------------------------------------------------------
/code/chapter-4/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ui-react",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "autoprefixer": "7.1.1",
 7 |     "babel-core": "6.25.0",
 8 |     "babel-eslint": "7.2.3",
 9 |     "babel-jest": "20.0.3",
10 |     "babel-loader": "7.0.0",
11 |     "babel-preset-react-app": "^3.0.1",
12 |     "babel-runtime": "6.23.0",
13 |     "case-sensitive-paths-webpack-plugin": "2.1.1",
14 |     "chalk": "1.1.3",
15 |     "css-loader": "0.28.4",
16 |     "dotenv": "4.0.0",
17 |     "eslint": "3.19.0",
18 |     "eslint-config-react-app": "^1.0.5",
19 |     "eslint-loader": "1.7.1",
20 |     "eslint-plugin-flowtype": "2.34.0",
21 |     "eslint-plugin-import": "2.2.0",
22 |     "eslint-plugin-jsx-a11y": "5.0.3",
23 |     "eslint-plugin-react": "7.1.0",
24 |     "extract-text-webpack-plugin": "2.1.2",
25 |     "file-loader": "0.11.2",
26 |     "fs-extra": "3.0.1",
27 |     "html-webpack-plugin": "2.29.0",
28 |     "jest": "20.0.4",
29 |     "object-assign": "4.1.1",
30 |     "postcss-flexbugs-fixes": "3.0.0",
31 |     "postcss-loader": "2.0.6",
32 |     "promise": "7.1.1",
33 |     "react": "^15.6.1",
34 |     "react-dev-utils": "^3.0.2",
35 |     "react-dom": "^15.6.1",
36 |     "react-error-overlay": "^1.0.9",
37 |     "style-loader": "0.18.2",
38 |     "sw-precache-webpack-plugin": "0.11.3",
39 |     "url-loader": "0.5.9",
40 |     "webpack": "2.6.1",
41 |     "webpack-dev-server": "2.5.0",
42 |     "webpack-manifest-plugin": "1.1.0",
43 |     "whatwg-fetch": "2.0.3"
44 |   },
45 |   "scripts": {
46 |     "start": "node scripts/start.js",
47 |     "build": "node scripts/build.js",
48 |     "test": "node scripts/test.js --env=jsdom"
49 |   },
50 |   "jest": {
51 |     "collectCoverageFrom": [
52 |       "src/**/*.{js,jsx}"
53 |     ],
54 |     "setupFiles": [
55 |       "<rootDir>/config/polyfills.js"
56 |     ],
57 |     "testMatch": [
58 |       "<rootDir>/src/**/__tests__/**/*.js?(x)",
59 |       "<rootDir>/src/**/?(*.)(spec|test).js?(x)"
60 |     ],
61 |     "testEnvironment": "node",
62 |     "testURL": "http://localhost",
63 |     "transform": {
64 |       "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
65 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
66 |       "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
67 |     },
68 |     "transformIgnorePatterns": [
69 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
70 |     ],
71 |     "moduleNameMapper": {
72 |       "^react-native$": "react-native-web"
73 |     },
74 |     "moduleFileExtensions": [
75 |       "web.js",
76 |       "js",
77 |       "json",
78 |       "web.jsx",
79 |       "jsx"
80 |     ]
81 |   },
82 |   "babel": {
83 |     "presets": [
84 |       "react-app"
85 |     ]
86 |   },
87 |   "eslintConfig": {
88 |     "extends": "react-app"
89 |   }
90 | }
91 | 


--------------------------------------------------------------------------------
/code/chapter-4/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/code/chapter-4/public/favicon.ico


--------------------------------------------------------------------------------
/code/chapter-4/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <meta name="theme-color" content="#000000">
 7 |     <!--
 8 |       manifest.json provides metadata used when your web app is added to the
 9 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10 |     -->
11 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13 |     <!--
14 |       Notice the use of %PUBLIC_URL% in the tags above.
15 |       It will be replaced with the URL of the `public` folder during the build.
16 |       Only files inside the `public` folder can be referenced from the HTML.
17 | 
18 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19 |       work correctly both with client-side routing and a non-root public URL.
20 |       Learn how to configure a non-root public URL by running `npm run build`.
21 |     -->
22 |     <title>U&I with React</title>
23 |   </head>
24 |   <body>
25 |     <noscript>
26 |       You need to enable JavaScript to run this app.
27 |     </noscript>
28 |     <div id="todo"></div>
29 |     <!--
30 |       This HTML file is a template.
31 |       If you open it directly in the browser, you will see an empty page.
32 | 
33 |       You can add webfonts, meta tags, or analytics to this file.
34 |       The build step will place the bundled scripts into the <body> tag.
35 | 
36 |       To begin the development, run `npm start` or `yarn start`.
37 |       To create a production bundle, use `npm run build` or `yarn build`.
38 |     -->
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/code/chapter-4/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "192x192",
 8 |       "type": "image/png"
 9 |     }
10 |   ],
11 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/code/chapter-4/scripts/start.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'development';
 5 | process.env.NODE_ENV = 'development';
 6 | 
 7 | // Makes the script crash on unhandled rejections instead of silently
 8 | // ignoring them. In the future, promise rejections that are not handled will
 9 | // terminate the Node.js process with a non-zero exit code.
10 | process.on('unhandledRejection', err => {
11 |   throw err;
12 | });
13 | 
14 | // Ensure environment variables are read.
15 | require('../config/env');
16 | 
17 | const fs = require('fs');
18 | const chalk = require('chalk');
19 | const webpack = require('webpack');
20 | const WebpackDevServer = require('webpack-dev-server');
21 | const clearConsole = require('react-dev-utils/clearConsole');
22 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
23 | const {
24 |   choosePort,
25 |   createCompiler,
26 |   prepareProxy,
27 |   prepareUrls,
28 | } = require('react-dev-utils/WebpackDevServerUtils');
29 | const openBrowser = require('react-dev-utils/openBrowser');
30 | const paths = require('../config/paths');
31 | const config = require('../config/webpack.config.dev');
32 | const createDevServerConfig = require('../config/webpackDevServer.config');
33 | 
34 | const useYarn = fs.existsSync(paths.yarnLockFile);
35 | const isInteractive = process.stdout.isTTY;
36 | 
37 | // Warn and crash if required files are missing
38 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
39 |   process.exit(1);
40 | }
41 | 
42 | // Tools like Cloud9 rely on this.
43 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
44 | const HOST = process.env.HOST || '0.0.0.0';
45 | 
46 | // We attempt to use the default port but if it is busy, we offer the user to
47 | // run on a different port. `detect()` Promise resolves to the next free port.
48 | choosePort(HOST, DEFAULT_PORT)
49 |   .then(port => {
50 |     if (port == null) {
51 |       // We have not found a port.
52 |       return;
53 |     }
54 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
55 |     const appName = require(paths.appPackageJson).name;
56 |     const urls = prepareUrls(protocol, HOST, port);
57 |     // Create a webpack compiler that is configured with custom messages.
58 |     const compiler = createCompiler(webpack, config, appName, urls, useYarn);
59 |     // Load proxy config
60 |     const proxySetting = require(paths.appPackageJson).proxy;
61 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
62 |     // Serve webpack assets generated by the compiler over a web sever.
63 |     const serverConfig = createDevServerConfig(
64 |       proxyConfig,
65 |       urls.lanUrlForConfig
66 |     );
67 |     const devServer = new WebpackDevServer(compiler, serverConfig);
68 |     // Launch WebpackDevServer.
69 |     devServer.listen(port, HOST, err => {
70 |       if (err) {
71 |         return console.log(err);
72 |       }
73 |       if (isInteractive) {
74 |         clearConsole();
75 |       }
76 |       console.log(chalk.cyan('Starting the development server...\n'));
77 |       openBrowser(urls.localUrlForBrowser);
78 |     });
79 | 
80 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
81 |       process.on(sig, function() {
82 |         devServer.close();
83 |         process.exit();
84 |       });
85 |     });
86 |   })
87 |   .catch(err => {
88 |     if (err && err.message) {
89 |       console.log(err.message);
90 |     }
91 |     process.exit(1);
92 |   });
93 | 


--------------------------------------------------------------------------------
/code/chapter-4/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'test';
 5 | process.env.NODE_ENV = 'test';
 6 | process.env.PUBLIC_URL = '';
 7 | 
 8 | // Makes the script crash on unhandled rejections instead of silently
 9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 |   throw err;
13 | });
14 | 
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 | 
18 | const jest = require('jest');
19 | const argv = process.argv.slice(2);
20 | 
21 | // Watch unless on CI or in coverage mode
22 | if (!process.env.CI && argv.indexOf('--coverage') < 0) {
23 |   argv.push('--watch');
24 | }
25 | 
26 | 
27 | jest.run(argv);
28 | 


--------------------------------------------------------------------------------
/code/chapter-4/src/index.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import _ from 'lodash';
 3 | import React, { Component } from 'react';
 4 | import { render } from 'react-dom';
 5 | 
 6 | // local dependencies
 7 | import './styles.css'
 8 | 
 9 | class App extends Component {
10 | 
11 |   constructor(...args) {
12 |     super(...args);
13 |     this.state = {
14 |       todos: {}
15 |     };
16 |   }
17 | 
18 |   componentDidMount() {
19 |     this.setState({
20 |       todos: {
21 |         1: { id: 1, completed: false, description: 'task 1' },
22 |         // set to true
23 |         2: { id: 2, completed: true, description: 'task 2' },
24 |         3: { id: 3, completed: false, description: 'task 3' },
25 |         4: { id: 4, completed: false, description: 'task 4' }
26 |       }
27 |     });
28 |   }
29 | 
30 |   toggleTodo(id, e) {
31 |     e.preventDefault();
32 |     const todos = _.clone(this.state.todos);
33 |     todos[id].completed = !todos[id].completed;
34 |     this.setState({ todos });
35 |   }
36 | 
37 |   render() {
38 |     const { todos } = this.state;
39 |     return (
40 |       <ul>
41 |         {_.map(todos, (todo, id) =>
42 |           <li key={id}
43 |               className={todo.completed ? 'completed' : ''}
44 |               onClick={(e) => this.toggleTodo(id, e)}>
45 |             {todo.description}
46 |           </li>
47 |         )}
48 |       </ul>
49 |     );
50 |   }
51 | }
52 | 
53 | render(
54 |   <App />,
55 |   document.getElementById('root')
56 | );


--------------------------------------------------------------------------------
/code/chapter-4/src/styles.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | *, *:before, *:after {
 6 |   box-sizing: inherit;
 7 | }
 8 | 
 9 | body {
10 |   background: #F1F1F1;
11 |   font-size: 10px;
12 |   font-family: "Helvetica Neue", "Arial", "sans-serif";
13 |   margin: 0;
14 |   padding: 0;
15 | }
16 | 
17 | ul {
18 |   list-style: none;
19 |   margin: 50px auto;
20 |   max-width: 800px;
21 |   padding: 10px 15px;
22 | }
23 | 
24 | li {
25 |   background: #FAFAFA;
26 |   border-radius: 5px;
27 |   border: 1px solid #E1E1E1;
28 |   box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
29 |   color: #888888;
30 |   cursor: pointer;
31 |   font-size: 2rem;
32 |   margin: 10px 0;
33 |   padding: 15px 20px;
34 |   position: relative;
35 |   transition: all 0.2s ease;
36 | }
37 | 
38 | li:hover {
39 |   opacity: 0.8;
40 | }
41 | 
42 | .completed {
43 |   background: #E4E4E4;
44 |   box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.3);
45 |   color: #AAAAAA;
46 |   text-decoration: line-through;
47 |   top: 3px;
48 | }


--------------------------------------------------------------------------------
/code/chapter-5/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # production
10 | /build
11 | 
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 | 
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | 


--------------------------------------------------------------------------------
/code/chapter-5/config/env.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | 
 7 | // Make sure that including paths.js after env.js will read .env variables.
 8 | delete require.cache[require.resolve('./paths')];
 9 | 
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 |   throw new Error(
13 |     'The NODE_ENV environment variable is required but was not specified.'
14 |   );
15 | }
16 | 
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | var dotenvFiles = [
19 |   `${paths.dotenv}.${NODE_ENV}.local`,
20 |   `${paths.dotenv}.${NODE_ENV}`,
21 |   // Don't include `.env.local` for `test` environment
22 |   // since normally you expect tests to produce the same
23 |   // results for everyone
24 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 |   paths.dotenv,
26 | ].filter(Boolean);
27 | 
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set.
31 | // https://github.com/motdotla/dotenv
32 | dotenvFiles.forEach(dotenvFile => {
33 |   if (fs.existsSync(dotenvFile)) {
34 |     require('dotenv').config({
35 |       path: dotenvFile,
36 |     });
37 |   }
38 | });
39 | 
40 | // We support resolving modules according to `NODE_PATH`.
41 | // This lets you use absolute paths in imports inside large monorepos:
42 | // https://github.com/facebookincubator/create-react-app/issues/253.
43 | // It works similar to `NODE_PATH` in Node itself:
44 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
45 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
46 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
47 | // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
48 | // We also resolve them to make sure all tools using them work consistently.
49 | const appDirectory = fs.realpathSync(process.cwd());
50 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
51 |   .split(path.delimiter)
52 |   .filter(folder => folder && !path.isAbsolute(folder))
53 |   .map(folder => path.resolve(appDirectory, folder))
54 |   .join(path.delimiter);
55 | 
56 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
57 | // injected into the application via DefinePlugin in Webpack configuration.
58 | const REACT_APP = /^REACT_APP_/i;
59 | 
60 | function getClientEnvironment(publicUrl) {
61 |   const raw = Object.keys(process.env)
62 |     .filter(key => REACT_APP.test(key))
63 |     .reduce(
64 |       (env, key) => {
65 |         env[key] = process.env[key];
66 |         return env;
67 |       },
68 |       {
69 |         // Useful for determining whether we’re running in production mode.
70 |         // Most importantly, it switches React into the correct mode.
71 |         NODE_ENV: process.env.NODE_ENV || 'development',
72 |         // Useful for resolving the correct path to static assets in `public`.
73 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
74 |         // This should only be used as an escape hatch. Normally you would put
75 |         // images into the `src` and `import` them in code to get their paths.
76 |         PUBLIC_URL: publicUrl,
77 |       }
78 |     );
79 |   // Stringify all values so we can feed into Webpack DefinePlugin
80 |   const stringified = {
81 |     'process.env': Object.keys(raw).reduce((env, key) => {
82 |       env[key] = JSON.stringify(raw[key]);
83 |       return env;
84 |     }, {}),
85 |   };
86 | 
87 |   return { raw, stringified };
88 | }
89 | 
90 | module.exports = getClientEnvironment;
91 | 


--------------------------------------------------------------------------------
/code/chapter-5/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/code/chapter-5/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | 
 5 | // This is a custom Jest transformer turning file imports into filenames.
 6 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 7 | 
 8 | module.exports = {
 9 |   process(src, filename) {
10 |     return `module.exports = ${JSON.stringify(path.basename(filename))};`;
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/code/chapter-5/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const fs = require('fs');
 5 | const url = require('url');
 6 | 
 7 | // Make sure any symlinks in the project folder are resolved:
 8 | // https://github.com/facebookincubator/create-react-app/issues/637
 9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 | 
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 | 
14 | function ensureSlash(path, needsSlash) {
15 |   const hasSlash = path.endsWith('/');
16 |   if (hasSlash && !needsSlash) {
17 |     return path.substr(path, path.length - 1);
18 |   } else if (!hasSlash && needsSlash) {
19 |     return `${path}/`;
20 |   } else {
21 |     return path;
22 |   }
23 | }
24 | 
25 | const getPublicUrl = appPackageJson =>
26 |   envPublicUrl || require(appPackageJson).homepage;
27 | 
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
31 | // single-page apps that may serve index.html for nested URLs like /todos/42.
32 | // We can't use a relative path in HTML because we don't want to load something
33 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
34 | function getServedPath(appPackageJson) {
35 |   const publicUrl = getPublicUrl(appPackageJson);
36 |   const servedUrl =
37 |     envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
38 |   return ensureSlash(servedUrl, true);
39 | }
40 | 
41 | // config after eject: we're in ./config/
42 | module.exports = {
43 |   dotenv: resolveApp('.env'),
44 |   appBuild: resolveApp('build'),
45 |   appPublic: resolveApp('public'),
46 |   appHtml: resolveApp('public/index.html'),
47 |   appIndexJs: resolveApp('src/index.js'),
48 |   appPackageJson: resolveApp('package.json'),
49 |   appSrc: resolveApp('src'),
50 |   yarnLockFile: resolveApp('yarn.lock'),
51 |   testsSetup: resolveApp('src/setupTests.js'),
52 |   appNodeModules: resolveApp('node_modules'),
53 |   publicUrl: getPublicUrl(resolveApp('package.json')),
54 |   servedPath: getServedPath(resolveApp('package.json')),
55 | };
56 | 


--------------------------------------------------------------------------------
/code/chapter-5/config/polyfills.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | if (typeof Promise === 'undefined') {
 4 |   // Rejection tracking prevents a common issue where React gets into an
 5 |   // inconsistent state due to an error, but it gets swallowed by a Promise,
 6 |   // and the user has no idea what causes React's erratic future behavior.
 7 |   require('promise/lib/rejection-tracking').enable();
 8 |   window.Promise = require('promise/lib/es6-extensions.js');
 9 | }
10 | 
11 | // fetch() polyfill for making API calls.
12 | require('whatwg-fetch');
13 | 
14 | // Object.assign() is commonly used with React.
15 | // It will use the native implementation if it's present and isn't buggy.
16 | Object.assign = require('object-assign');
17 | 


--------------------------------------------------------------------------------
/code/chapter-5/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ui-react",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "autoprefixer": "7.1.1",
 7 |     "babel-core": "6.25.0",
 8 |     "babel-eslint": "7.2.3",
 9 |     "babel-jest": "20.0.3",
10 |     "babel-loader": "7.0.0",
11 |     "babel-preset-react-app": "^3.0.1",
12 |     "babel-runtime": "6.23.0",
13 |     "case-sensitive-paths-webpack-plugin": "2.1.1",
14 |     "chalk": "1.1.3",
15 |     "classnames": "^2.2.5",
16 |     "css-loader": "0.28.4",
17 |     "dotenv": "4.0.0",
18 |     "eslint": "3.19.0",
19 |     "eslint-config-react-app": "^1.0.5",
20 |     "eslint-loader": "1.7.1",
21 |     "eslint-plugin-flowtype": "2.34.0",
22 |     "eslint-plugin-import": "2.2.0",
23 |     "eslint-plugin-jsx-a11y": "5.0.3",
24 |     "eslint-plugin-react": "7.1.0",
25 |     "extract-text-webpack-plugin": "2.1.2",
26 |     "file-loader": "0.11.2",
27 |     "fs-extra": "3.0.1",
28 |     "html-webpack-plugin": "2.29.0",
29 |     "jest": "20.0.4",
30 |     "object-assign": "4.1.1",
31 |     "postcss-flexbugs-fixes": "3.0.0",
32 |     "postcss-loader": "2.0.6",
33 |     "promise": "7.1.1",
34 |     "react": "^15.6.1",
35 |     "react-dev-utils": "^3.0.2",
36 |     "react-dom": "^15.6.1",
37 |     "react-error-overlay": "^1.0.9",
38 |     "style-loader": "0.18.2",
39 |     "sw-precache-webpack-plugin": "0.11.3",
40 |     "url-loader": "0.5.9",
41 |     "webpack": "2.6.1",
42 |     "webpack-dev-server": "2.5.0",
43 |     "webpack-manifest-plugin": "1.1.0",
44 |     "whatwg-fetch": "2.0.3"
45 |   },
46 |   "scripts": {
47 |     "start": "node scripts/start.js",
48 |     "build": "node scripts/build.js",
49 |     "test": "node scripts/test.js --env=jsdom"
50 |   },
51 |   "jest": {
52 |     "collectCoverageFrom": [
53 |       "src/**/*.{js,jsx}"
54 |     ],
55 |     "setupFiles": [
56 |       "<rootDir>/config/polyfills.js"
57 |     ],
58 |     "testMatch": [
59 |       "<rootDir>/src/**/__tests__/**/*.js?(x)",
60 |       "<rootDir>/src/**/?(*.)(spec|test).js?(x)"
61 |     ],
62 |     "testEnvironment": "node",
63 |     "testURL": "http://localhost",
64 |     "transform": {
65 |       "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
66 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
67 |       "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
68 |     },
69 |     "transformIgnorePatterns": [
70 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
71 |     ],
72 |     "moduleNameMapper": {
73 |       "^react-native$": "react-native-web"
74 |     },
75 |     "moduleFileExtensions": [
76 |       "web.js",
77 |       "js",
78 |       "json",
79 |       "web.jsx",
80 |       "jsx"
81 |     ]
82 |   },
83 |   "babel": {
84 |     "presets": [
85 |       "react-app"
86 |     ]
87 |   },
88 |   "eslintConfig": {
89 |     "extends": "react-app"
90 |   }
91 | }
92 | 


--------------------------------------------------------------------------------
/code/chapter-5/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/code/chapter-5/public/favicon.ico


--------------------------------------------------------------------------------
/code/chapter-5/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <meta name="theme-color" content="#000000">
 7 |     <!--
 8 |       manifest.json provides metadata used when your web app is added to the
 9 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10 |     -->
11 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13 |     <!--
14 |       Notice the use of %PUBLIC_URL% in the tags above.
15 |       It will be replaced with the URL of the `public` folder during the build.
16 |       Only files inside the `public` folder can be referenced from the HTML.
17 | 
18 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19 |       work correctly both with client-side routing and a non-root public URL.
20 |       Learn how to configure a non-root public URL by running `npm run build`.
21 |     -->
22 |     <title>U&I with React</title>
23 |   </head>
24 |   <body>
25 |     <noscript>
26 |       You need to enable JavaScript to run this app.
27 |     </noscript>
28 |     <div id="todos-app"></div>
29 |     <!--
30 |       This HTML file is a template.
31 |       If you open it directly in the browser, you will see an empty page.
32 | 
33 |       You can add webfonts, meta tags, or analytics to this file.
34 |       The build step will place the bundled scripts into the <body> tag.
35 | 
36 |       To begin the development, run `npm start` or `yarn start`.
37 |       To create a production bundle, use `npm run build` or `yarn build`.
38 |     -->
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/code/chapter-5/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "192x192",
 8 |       "type": "image/png"
 9 |     }
10 |   ],
11 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/code/chapter-5/scripts/start.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'development';
 5 | process.env.NODE_ENV = 'development';
 6 | 
 7 | // Makes the script crash on unhandled rejections instead of silently
 8 | // ignoring them. In the future, promise rejections that are not handled will
 9 | // terminate the Node.js process with a non-zero exit code.
10 | process.on('unhandledRejection', err => {
11 |   throw err;
12 | });
13 | 
14 | // Ensure environment variables are read.
15 | require('../config/env');
16 | 
17 | const fs = require('fs');
18 | const chalk = require('chalk');
19 | const webpack = require('webpack');
20 | const WebpackDevServer = require('webpack-dev-server');
21 | const clearConsole = require('react-dev-utils/clearConsole');
22 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
23 | const {
24 |   choosePort,
25 |   createCompiler,
26 |   prepareProxy,
27 |   prepareUrls,
28 | } = require('react-dev-utils/WebpackDevServerUtils');
29 | const openBrowser = require('react-dev-utils/openBrowser');
30 | const paths = require('../config/paths');
31 | const config = require('../config/webpack.config.dev');
32 | const createDevServerConfig = require('../config/webpackDevServer.config');
33 | 
34 | const useYarn = fs.existsSync(paths.yarnLockFile);
35 | const isInteractive = process.stdout.isTTY;
36 | 
37 | // Warn and crash if required files are missing
38 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
39 |   process.exit(1);
40 | }
41 | 
42 | // Tools like Cloud9 rely on this.
43 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
44 | const HOST = process.env.HOST || '0.0.0.0';
45 | 
46 | // We attempt to use the default port but if it is busy, we offer the user to
47 | // run on a different port. `detect()` Promise resolves to the next free port.
48 | choosePort(HOST, DEFAULT_PORT)
49 |   .then(port => {
50 |     if (port == null) {
51 |       // We have not found a port.
52 |       return;
53 |     }
54 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
55 |     const appName = require(paths.appPackageJson).name;
56 |     const urls = prepareUrls(protocol, HOST, port);
57 |     // Create a webpack compiler that is configured with custom messages.
58 |     const compiler = createCompiler(webpack, config, appName, urls, useYarn);
59 |     // Load proxy config
60 |     const proxySetting = require(paths.appPackageJson).proxy;
61 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
62 |     // Serve webpack assets generated by the compiler over a web sever.
63 |     const serverConfig = createDevServerConfig(
64 |       proxyConfig,
65 |       urls.lanUrlForConfig
66 |     );
67 |     const devServer = new WebpackDevServer(compiler, serverConfig);
68 |     // Launch WebpackDevServer.
69 |     devServer.listen(port, HOST, err => {
70 |       if (err) {
71 |         return console.log(err);
72 |       }
73 |       if (isInteractive) {
74 |         clearConsole();
75 |       }
76 |       console.log(chalk.cyan('Starting the development server...\n'));
77 |       openBrowser(urls.localUrlForBrowser);
78 |     });
79 | 
80 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
81 |       process.on(sig, function() {
82 |         devServer.close();
83 |         process.exit();
84 |       });
85 |     });
86 |   })
87 |   .catch(err => {
88 |     if (err && err.message) {
89 |       console.log(err.message);
90 |     }
91 |     process.exit(1);
92 |   });
93 | 


--------------------------------------------------------------------------------
/code/chapter-5/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'test';
 5 | process.env.NODE_ENV = 'test';
 6 | process.env.PUBLIC_URL = '';
 7 | 
 8 | // Makes the script crash on unhandled rejections instead of silently
 9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 |   throw err;
13 | });
14 | 
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 | 
18 | const jest = require('jest');
19 | const argv = process.argv.slice(2);
20 | 
21 | // Watch unless on CI or in coverage mode
22 | if (!process.env.CI && argv.indexOf('--coverage') < 0) {
23 |   argv.push('--watch');
24 | }
25 | 
26 | 
27 | jest.run(argv);
28 | 


--------------------------------------------------------------------------------
/code/chapter-5/src/components/App/App.css:
--------------------------------------------------------------------------------
1 | #todos-app .app {
2 | 
3 | }
4 | 
5 | #todos-app .app .todos-list {
6 |   margin: 50px auto;
7 |   max-width: 800px;
8 | }


--------------------------------------------------------------------------------
/code/chapter-5/src/components/App/App.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import _ from 'lodash';
 3 | import React, { Component } from 'react';
 4 | 
 5 | // local dependencies
 6 | import TodosList from '../TodosList/TodosList';
 7 | import TodosListItem from '../TodosListItem/TodosListItem';
 8 | import './App.css';
 9 | 
10 | class App extends Component {
11 | 
12 |   constructor(...args) {
13 |     super(...args);
14 |     this.state = {
15 |       todos: {}
16 |     };
17 |   }
18 | 
19 |   componentDidMount() {
20 |     this.setState({
21 |       todos: {
22 |         1: { id: 1, completed: false, description: 'task 1' },
23 |         // set to true
24 |         2: { id: 2, completed: true, description: 'task 2' },
25 |         3: { id: 3, completed: false, description: 'task 3' },
26 |         4: { id: 4, completed: false, description: 'task 4' }
27 |       }
28 |     });
29 |   }
30 | 
31 |   toggleTodo = (id) => (e) => {
32 |     e.preventDefault();
33 |     const todos = _.clone(this.state.todos);
34 |     todos[id].completed = !todos[id].completed;
35 |     this.setState({ todos });
36 |   };
37 | 
38 |   generateTodosListItem = (todo, id) => (
39 |     <TodosListItem key={id}
40 |                    todo={todo}
41 |                    handleClick={this.toggleTodo} />
42 |   );
43 | 
44 |   render() {
45 |     const { todos } = this.state;
46 |     return (
47 |       <div className="app">
48 |         <TodosList>
49 |           {_.map(todos, this.generateTodosListItem)}
50 |         </TodosList>
51 |       </div>
52 |     );
53 |   }
54 | }
55 | 
56 | export default App;


--------------------------------------------------------------------------------
/code/chapter-5/src/components/App/App.spec.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/code/chapter-5/src/components/App/App.spec.js


--------------------------------------------------------------------------------
/code/chapter-5/src/components/TodosList/TodosList.css:
--------------------------------------------------------------------------------
1 | #todos-app .todos-list {
2 |   list-style: none;
3 |   padding: 10px 15px;
4 | }
5 | 
6 | #todos-app .todos-list .todos-list-item {
7 |   margin: 10px 0;
8 | }
9 | 


--------------------------------------------------------------------------------
/code/chapter-5/src/components/TodosList/TodosList.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import React, { PropTypes } from 'react';
 3 | 
 4 | // local dependencies
 5 | import './TodosList.css';
 6 | 
 7 | const TodosList = ({ children }) => (
 8 |   <ul className="todos-list">
 9 |     {children}
10 |   </ul>
11 | );
12 | 
13 | TodosList.propTypes = {
14 |   children: PropTypes.oneOfType([
15 |     PropTypes.array,
16 |     PropTypes.element
17 |   ])
18 | };
19 | 
20 | export default TodosList;


--------------------------------------------------------------------------------
/code/chapter-5/src/components/TodosList/TodosList.spec.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/code/chapter-5/src/components/TodosList/TodosList.spec.js


--------------------------------------------------------------------------------
/code/chapter-5/src/components/TodosListItem/TodosListItem.css:
--------------------------------------------------------------------------------
 1 | #todos-app .todos-list-item {
 2 |   background: #FAFAFA;
 3 |   border-radius: 5px;
 4 |   border: 1px solid #E1E1E1;
 5 |   box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
 6 |   color: #888888;
 7 |   cursor: pointer;
 8 |   font-size: 2rem;
 9 |   padding: 15px 20px;
10 |   position: relative;
11 |   transition: all 0.2s ease;
12 | }
13 | 
14 | #todos-app .todos-list-item:hover {
15 |   opacity: 0.8;
16 | }
17 | 
18 | #todos-app .todos-list-item.completed {
19 |   background: #E4E4E4;
20 |   box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.3);
21 |   color: #AAAAAA;
22 |   text-decoration: line-through;
23 |   top: 3px;
24 | }


--------------------------------------------------------------------------------
/code/chapter-5/src/components/TodosListItem/TodosListItem.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import _ from 'lodash';
 3 | import classNames from 'classnames';
 4 | import PropTypes from 'prop-types';
 5 | import React from 'react';
 6 | 
 7 | // local dependencies
 8 | import './TodosListItem.css';
 9 | 
10 | const TodosListItem = ({ todo, handleClick }) => (
11 |   <li className={classNames('todos-list-item', { completed: todo.completed })}
12 |       onClick={handleClick(todo.id)}>
13 |     {todo.description}
14 |   </li>
15 | );
16 | 
17 | TodosListItem.defaultProps = {
18 |   todo: {},
19 |   toggleTodo: _.noop
20 | };
21 | 
22 | TodosListItem.propTypes = {
23 |   todo: PropTypes.shape({
24 |     completed: PropTypes.boolean,
25 |     description: PropTypes.string,
26 |     id: PropTypes.number
27 |   }),
28 |   handleClick: PropTypes.func
29 | };
30 | 
31 | export default TodosListItem;


--------------------------------------------------------------------------------
/code/chapter-5/src/components/TodosListItem/TodosListItem.spec.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/code/chapter-5/src/components/TodosListItem/TodosListItem.spec.js


--------------------------------------------------------------------------------
/code/chapter-5/src/index.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import React from 'react';
 3 | import { render } from 'react-dom';
 4 | 
 5 | // local dependencies
 6 | import App from './components/App/App';
 7 | import './styles.css';
 8 | 
 9 | render(
10 |   <App />,
11 |   document.getElementById('todos-app')
12 | );


--------------------------------------------------------------------------------
/code/chapter-5/src/styles.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | *, *:before, *:after {
 6 |   box-sizing: inherit;
 7 | }
 8 | 
 9 | body {
10 |   background: #F1F1F1;
11 |   font-size: 10px;
12 |   font-family: "Helvetica Neue", "Arial", "sans-serif";
13 |   margin: 0;
14 |   padding: 0;
15 | }


--------------------------------------------------------------------------------
/code/chapter-6/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # production
10 | /build
11 | 
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 | 
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | 


--------------------------------------------------------------------------------
/code/chapter-6/config/env.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | 
 7 | // Make sure that including paths.js after env.js will read .env variables.
 8 | delete require.cache[require.resolve('./paths')];
 9 | 
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 |   throw new Error(
13 |     'The NODE_ENV environment variable is required but was not specified.'
14 |   );
15 | }
16 | 
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | var dotenvFiles = [
19 |   `${paths.dotenv}.${NODE_ENV}.local`,
20 |   `${paths.dotenv}.${NODE_ENV}`,
21 |   // Don't include `.env.local` for `test` environment
22 |   // since normally you expect tests to produce the same
23 |   // results for everyone
24 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 |   paths.dotenv,
26 | ].filter(Boolean);
27 | 
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set.
31 | // https://github.com/motdotla/dotenv
32 | dotenvFiles.forEach(dotenvFile => {
33 |   if (fs.existsSync(dotenvFile)) {
34 |     require('dotenv').config({
35 |       path: dotenvFile,
36 |     });
37 |   }
38 | });
39 | 
40 | // We support resolving modules according to `NODE_PATH`.
41 | // This lets you use absolute paths in imports inside large monorepos:
42 | // https://github.com/facebookincubator/create-react-app/issues/253.
43 | // It works similar to `NODE_PATH` in Node itself:
44 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
45 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
46 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
47 | // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
48 | // We also resolve them to make sure all tools using them work consistently.
49 | const appDirectory = fs.realpathSync(process.cwd());
50 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
51 |   .split(path.delimiter)
52 |   .filter(folder => folder && !path.isAbsolute(folder))
53 |   .map(folder => path.resolve(appDirectory, folder))
54 |   .join(path.delimiter);
55 | 
56 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
57 | // injected into the application via DefinePlugin in Webpack configuration.
58 | const REACT_APP = /^REACT_APP_/i;
59 | 
60 | function getClientEnvironment(publicUrl) {
61 |   const raw = Object.keys(process.env)
62 |     .filter(key => REACT_APP.test(key))
63 |     .reduce(
64 |       (env, key) => {
65 |         env[key] = process.env[key];
66 |         return env;
67 |       },
68 |       {
69 |         // Useful for determining whether we’re running in production mode.
70 |         // Most importantly, it switches React into the correct mode.
71 |         NODE_ENV: process.env.NODE_ENV || 'development',
72 |         // Useful for resolving the correct path to static assets in `public`.
73 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
74 |         // This should only be used as an escape hatch. Normally you would put
75 |         // images into the `src` and `import` them in code to get their paths.
76 |         PUBLIC_URL: publicUrl,
77 |       }
78 |     );
79 |   // Stringify all values so we can feed into Webpack DefinePlugin
80 |   const stringified = {
81 |     'process.env': Object.keys(raw).reduce((env, key) => {
82 |       env[key] = JSON.stringify(raw[key]);
83 |       return env;
84 |     }, {}),
85 |   };
86 | 
87 |   return { raw, stringified };
88 | }
89 | 
90 | module.exports = getClientEnvironment;
91 | 


--------------------------------------------------------------------------------
/code/chapter-6/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/code/chapter-6/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | 
 5 | // This is a custom Jest transformer turning file imports into filenames.
 6 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 7 | 
 8 | module.exports = {
 9 |   process(src, filename) {
10 |     return `module.exports = ${JSON.stringify(path.basename(filename))};`;
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/code/chapter-6/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const fs = require('fs');
 5 | const url = require('url');
 6 | 
 7 | // Make sure any symlinks in the project folder are resolved:
 8 | // https://github.com/facebookincubator/create-react-app/issues/637
 9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 | 
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 | 
14 | function ensureSlash(path, needsSlash) {
15 |   const hasSlash = path.endsWith('/');
16 |   if (hasSlash && !needsSlash) {
17 |     return path.substr(path, path.length - 1);
18 |   } else if (!hasSlash && needsSlash) {
19 |     return `${path}/`;
20 |   } else {
21 |     return path;
22 |   }
23 | }
24 | 
25 | const getPublicUrl = appPackageJson =>
26 |   envPublicUrl || require(appPackageJson).homepage;
27 | 
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
31 | // single-page apps that may serve index.html for nested URLs like /todos/42.
32 | // We can't use a relative path in HTML because we don't want to load something
33 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
34 | function getServedPath(appPackageJson) {
35 |   const publicUrl = getPublicUrl(appPackageJson);
36 |   const servedUrl =
37 |     envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
38 |   return ensureSlash(servedUrl, true);
39 | }
40 | 
41 | // config after eject: we're in ./config/
42 | module.exports = {
43 |   dotenv: resolveApp('.env'),
44 |   appBuild: resolveApp('build'),
45 |   appPublic: resolveApp('public'),
46 |   appHtml: resolveApp('public/index.html'),
47 |   appIndexJs: resolveApp('src/index.js'),
48 |   appPackageJson: resolveApp('package.json'),
49 |   appSrc: resolveApp('src'),
50 |   yarnLockFile: resolveApp('yarn.lock'),
51 |   testsSetup: resolveApp('src/setupTests.js'),
52 |   appNodeModules: resolveApp('node_modules'),
53 |   publicUrl: getPublicUrl(resolveApp('package.json')),
54 |   servedPath: getServedPath(resolveApp('package.json')),
55 | };
56 | 


--------------------------------------------------------------------------------
/code/chapter-6/config/polyfills.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | if (typeof Promise === 'undefined') {
 4 |   // Rejection tracking prevents a common issue where React gets into an
 5 |   // inconsistent state due to an error, but it gets swallowed by a Promise,
 6 |   // and the user has no idea what causes React's erratic future behavior.
 7 |   require('promise/lib/rejection-tracking').enable();
 8 |   window.Promise = require('promise/lib/es6-extensions.js');
 9 | }
10 | 
11 | // fetch() polyfill for making API calls.
12 | require('whatwg-fetch');
13 | 
14 | // Object.assign() is commonly used with React.
15 | // It will use the native implementation if it's present and isn't buggy.
16 | Object.assign = require('object-assign');
17 | 


--------------------------------------------------------------------------------
/code/chapter-6/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ui-react",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "autoprefixer": "7.1.1",
 7 |     "babel-core": "6.25.0",
 8 |     "babel-eslint": "7.2.3",
 9 |     "babel-jest": "20.0.3",
10 |     "babel-loader": "7.0.0",
11 |     "babel-preset-react-app": "^3.0.1",
12 |     "babel-runtime": "6.23.0",
13 |     "case-sensitive-paths-webpack-plugin": "2.1.1",
14 |     "chalk": "1.1.3",
15 |     "classnames": "^2.2.5",
16 |     "css-loader": "0.28.4",
17 |     "dotenv": "4.0.0",
18 |     "eslint": "3.19.0",
19 |     "eslint-config-react-app": "^1.0.5",
20 |     "eslint-loader": "1.7.1",
21 |     "eslint-plugin-flowtype": "2.34.0",
22 |     "eslint-plugin-import": "2.2.0",
23 |     "eslint-plugin-jsx-a11y": "5.0.3",
24 |     "eslint-plugin-react": "7.1.0",
25 |     "extract-text-webpack-plugin": "2.1.2",
26 |     "file-loader": "0.11.2",
27 |     "fs-extra": "3.0.1",
28 |     "html-webpack-plugin": "2.29.0",
29 |     "jest": "20.0.4",
30 |     "object-assign": "4.1.1",
31 |     "postcss-flexbugs-fixes": "3.0.0",
32 |     "postcss-loader": "2.0.6",
33 |     "promise": "7.1.1",
34 |     "react": "^15.6.1",
35 |     "react-dev-utils": "^3.0.2",
36 |     "react-dom": "^15.6.1",
37 |     "react-error-overlay": "^1.0.9",
38 |     "style-loader": "0.18.2",
39 |     "sw-precache-webpack-plugin": "0.11.3",
40 |     "url-loader": "0.5.9",
41 |     "webpack": "2.6.1",
42 |     "webpack-dev-server": "2.5.0",
43 |     "webpack-manifest-plugin": "1.1.0",
44 |     "whatwg-fetch": "2.0.3"
45 |   },
46 |   "scripts": {
47 |     "start": "node scripts/start.js",
48 |     "build": "node scripts/build.js",
49 |     "test": "node scripts/test.js --env=jsdom"
50 |   },
51 |   "jest": {
52 |     "collectCoverageFrom": [
53 |       "src/**/*.{js,jsx}"
54 |     ],
55 |     "setupFiles": [
56 |       "<rootDir>/config/polyfills.js"
57 |     ],
58 |     "testMatch": [
59 |       "<rootDir>/src/**/__tests__/**/*.js?(x)",
60 |       "<rootDir>/src/**/?(*.)(spec|test).js?(x)"
61 |     ],
62 |     "testEnvironment": "node",
63 |     "testURL": "http://localhost",
64 |     "transform": {
65 |       "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
66 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
67 |       "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
68 |     },
69 |     "transformIgnorePatterns": [
70 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
71 |     ],
72 |     "moduleNameMapper": {
73 |       "^react-native$": "react-native-web"
74 |     },
75 |     "moduleFileExtensions": [
76 |       "web.js",
77 |       "js",
78 |       "json",
79 |       "web.jsx",
80 |       "jsx"
81 |     ]
82 |   },
83 |   "babel": {
84 |     "presets": [
85 |       "react-app"
86 |     ]
87 |   },
88 |   "eslintConfig": {
89 |     "extends": "react-app"
90 |   },
91 |   "devDependencies": {
92 |     "node-sass": "^4.5.3",
93 |     "sass-loader": "^6.0.6"
94 |   }
95 | }
96 | 


--------------------------------------------------------------------------------
/code/chapter-6/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/code/chapter-6/public/favicon.ico


--------------------------------------------------------------------------------
/code/chapter-6/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <meta name="theme-color" content="#000000">
 7 |     <!--
 8 |       manifest.json provides metadata used when your web app is added to the
 9 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10 |     -->
11 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13 |     <!--
14 |       Notice the use of %PUBLIC_URL% in the tags above.
15 |       It will be replaced with the URL of the `public` folder during the build.
16 |       Only files inside the `public` folder can be referenced from the HTML.
17 | 
18 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19 |       work correctly both with client-side routing and a non-root public URL.
20 |       Learn how to configure a non-root public URL by running `npm run build`.
21 |     -->
22 |     <title>U&I with React</title>
23 |   </head>
24 |   <body>
25 |     <noscript>
26 |       You need to enable JavaScript to run this app.
27 |     </noscript>
28 |     <div id="todos-app"></div>
29 |     <!--
30 |       This HTML file is a template.
31 |       If you open it directly in the browser, you will see an empty page.
32 | 
33 |       You can add webfonts, meta tags, or analytics to this file.
34 |       The build step will place the bundled scripts into the <body> tag.
35 | 
36 |       To begin the development, run `npm start` or `yarn start`.
37 |       To create a production bundle, use `npm run build` or `yarn build`.
38 |     -->
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/code/chapter-6/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "192x192",
 8 |       "type": "image/png"
 9 |     }
10 |   ],
11 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/code/chapter-6/scripts/start.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'development';
 5 | process.env.NODE_ENV = 'development';
 6 | 
 7 | // Makes the script crash on unhandled rejections instead of silently
 8 | // ignoring them. In the future, promise rejections that are not handled will
 9 | // terminate the Node.js process with a non-zero exit code.
10 | process.on('unhandledRejection', err => {
11 |   throw err;
12 | });
13 | 
14 | // Ensure environment variables are read.
15 | require('../config/env');
16 | 
17 | const fs = require('fs');
18 | const chalk = require('chalk');
19 | const webpack = require('webpack');
20 | const WebpackDevServer = require('webpack-dev-server');
21 | const clearConsole = require('react-dev-utils/clearConsole');
22 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
23 | const {
24 |   choosePort,
25 |   createCompiler,
26 |   prepareProxy,
27 |   prepareUrls,
28 | } = require('react-dev-utils/WebpackDevServerUtils');
29 | const openBrowser = require('react-dev-utils/openBrowser');
30 | const paths = require('../config/paths');
31 | const config = require('../config/webpack.config.dev');
32 | const createDevServerConfig = require('../config/webpackDevServer.config');
33 | 
34 | const useYarn = fs.existsSync(paths.yarnLockFile);
35 | const isInteractive = process.stdout.isTTY;
36 | 
37 | // Warn and crash if required files are missing
38 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
39 |   process.exit(1);
40 | }
41 | 
42 | // Tools like Cloud9 rely on this.
43 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
44 | const HOST = process.env.HOST || '0.0.0.0';
45 | 
46 | // We attempt to use the default port but if it is busy, we offer the user to
47 | // run on a different port. `detect()` Promise resolves to the next free port.
48 | choosePort(HOST, DEFAULT_PORT)
49 |   .then(port => {
50 |     if (port == null) {
51 |       // We have not found a port.
52 |       return;
53 |     }
54 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
55 |     const appName = require(paths.appPackageJson).name;
56 |     const urls = prepareUrls(protocol, HOST, port);
57 |     // Create a webpack compiler that is configured with custom messages.
58 |     const compiler = createCompiler(webpack, config, appName, urls, useYarn);
59 |     // Load proxy config
60 |     const proxySetting = require(paths.appPackageJson).proxy;
61 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
62 |     // Serve webpack assets generated by the compiler over a web sever.
63 |     const serverConfig = createDevServerConfig(
64 |       proxyConfig,
65 |       urls.lanUrlForConfig
66 |     );
67 |     const devServer = new WebpackDevServer(compiler, serverConfig);
68 |     // Launch WebpackDevServer.
69 |     devServer.listen(port, HOST, err => {
70 |       if (err) {
71 |         return console.log(err);
72 |       }
73 |       if (isInteractive) {
74 |         clearConsole();
75 |       }
76 |       console.log(chalk.cyan('Starting the development server...\n'));
77 |       openBrowser(urls.localUrlForBrowser);
78 |     });
79 | 
80 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
81 |       process.on(sig, function() {
82 |         devServer.close();
83 |         process.exit();
84 |       });
85 |     });
86 |   })
87 |   .catch(err => {
88 |     if (err && err.message) {
89 |       console.log(err.message);
90 |     }
91 |     process.exit(1);
92 |   });
93 | 


--------------------------------------------------------------------------------
/code/chapter-6/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'test';
 5 | process.env.NODE_ENV = 'test';
 6 | process.env.PUBLIC_URL = '';
 7 | 
 8 | // Makes the script crash on unhandled rejections instead of silently
 9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 |   throw err;
13 | });
14 | 
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 | 
18 | const jest = require('jest');
19 | const argv = process.argv.slice(2);
20 | 
21 | // Watch unless on CI or in coverage mode
22 | if (!process.env.CI && argv.indexOf('--coverage') < 0) {
23 |   argv.push('--watch');
24 | }
25 | 
26 | 
27 | jest.run(argv);
28 | 


--------------------------------------------------------------------------------
/code/chapter-6/src/components/App/App.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import _ from 'lodash';
 3 | import React, { Component } from 'react';
 4 | 
 5 | // local dependencies
 6 | import TodosList from '../TodosList/TodosList';
 7 | import TodosListItem from '../TodosListItem/TodosListItem';
 8 | import TodosListInfo from '../TodosListInfo/TodosListInfo';
 9 | import './App.scss';
10 | 
11 | class App extends Component {
12 | 
13 |   constructor(...args) {
14 |     super(...args);
15 |     this.state = {
16 |       todos: {}
17 |     };
18 |   }
19 | 
20 |   componentDidMount() {
21 |     this.setState({
22 |       todos: {
23 |         1: { id: 1, completed: false, description: 'task 1' },
24 |         // set to true
25 |         2: { id: 2, completed: true, description: 'task 2' },
26 |         3: { id: 3, completed: false, description: 'task 3' },
27 |         4: { id: 4, completed: false, description: 'task 4' }
28 |       }
29 |     });
30 |   }
31 | 
32 |   toggleTodo = (id) => (e) => {
33 |     e.preventDefault();
34 |     const todos = _.clone(this.state.todos);
35 |     todos[id].completed = !todos[id].completed;
36 |     this.setState({ todos });
37 |   };
38 | 
39 |   generateTodosListItem = (todo, id) => (
40 |     <TodosListItem key={id}
41 |                    todo={todo}
42 |                    handleClick={this.toggleTodo} />
43 |   );
44 | 
45 |   render() {
46 |     const { todos } = this.state;
47 |     return (
48 |       <div className="app">
49 |         <TodosList>
50 |           {_.map(todos, this.generateTodosListItem)}
51 |           <TodosListInfo todos={todos} />
52 |         </TodosList>
53 |       </div>
54 |     );
55 |   }
56 | }
57 | 
58 | export default App;


--------------------------------------------------------------------------------
/code/chapter-6/src/components/App/App.scss:
--------------------------------------------------------------------------------
 1 | @import '../../styles/theme';
 2 | 
 3 | ##{$APP} .app {
 4 | 
 5 |   .todos-list {
 6 |     margin: 50px auto;
 7 |     max-width: 800px;
 8 |   }
 9 | 
10 | }


--------------------------------------------------------------------------------
/code/chapter-6/src/components/App/App.spec.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/code/chapter-6/src/components/App/App.spec.js


--------------------------------------------------------------------------------
/code/chapter-6/src/components/TodosList/TodosList.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import React, { PropTypes } from 'react';
 3 | 
 4 | // local dependencies
 5 | import './TodosList.scss';
 6 | 
 7 | const TodosList = ({ children }) => (
 8 |   <ul className="todos-list">
 9 |     {children}
10 |   </ul>
11 | );
12 | 
13 | TodosList.propTypes = {
14 |   children: PropTypes.oneOfType([
15 |     PropTypes.array,
16 |     PropTypes.element
17 |   ])
18 | };
19 | 
20 | export default TodosList;


--------------------------------------------------------------------------------
/code/chapter-6/src/components/TodosList/TodosList.scss:
--------------------------------------------------------------------------------
 1 | @import '../../styles/theme';
 2 | 
 3 | ##{$APP} .todos-list {
 4 |   list-style: none;
 5 |   padding: 10px 15px;
 6 | 
 7 |   &-item {
 8 |     margin: 10px 0;
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/code/chapter-6/src/components/TodosList/TodosList.spec.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/code/chapter-6/src/components/TodosList/TodosList.spec.js


--------------------------------------------------------------------------------
/code/chapter-6/src/components/TodosListInfo/TodosListInfo.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import _ from 'lodash';
 3 | import React, { PropTypes } from 'react';
 4 | 
 5 | // local dependencies
 6 | import TodosListItem from '../TodosListItem/TodosListItem';
 7 | import './TodosListInfo.scss';
 8 | 
 9 | const TodosListInfo = ({ todos }) => {
10 |   const todosCount = _.size(todos);
11 |   const completedTodosCount = _(todos).filter('completed').size();
12 |   return (
13 |     <li className="todos-list-info">
14 |       {completedTodosCount}/{todosCount} completed
15 |     </li>
16 |   );
17 | };
18 | 
19 | TodosListInfo.defaultProps = {
20 |   todos: []
21 | };
22 | 
23 | TodosListInfo.propTypes = {
24 |   todos: PropTypes.objectOf(TodosListItem.propTypes.todo)
25 | };
26 | 
27 | export default TodosListInfo;


--------------------------------------------------------------------------------
/code/chapter-6/src/components/TodosListInfo/TodosListInfo.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/theme';
2 | 
3 | ##{$APP} .todos-list-info {
4 |   color: $dark-gray;
5 |   font-size: 14px;
6 |   text-align: right;
7 | }


--------------------------------------------------------------------------------
/code/chapter-6/src/components/TodosListInfo/TodosListInfo.spec.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/code/chapter-6/src/components/TodosListInfo/TodosListInfo.spec.js


--------------------------------------------------------------------------------
/code/chapter-6/src/components/TodosListItem/TodosListItem.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import _ from 'lodash';
 3 | import classNames from 'classnames';
 4 | import PropTypes from 'prop-types';
 5 | import React from 'react';
 6 | 
 7 | // local dependencies
 8 | import './TodosListItem.scss';
 9 | 
10 | const TodosListItem = ({ todo, handleClick }) => (
11 |   <li className={classNames('todos-list-item', { completed: todo.completed })}
12 |       onClick={handleClick(todo.id)}>
13 |     {todo.description}
14 |   </li>
15 | );
16 | 
17 | TodosListItem.defaultProps = {
18 |   todo: {},
19 |   toggleTodo: _.noop
20 | };
21 | 
22 | TodosListItem.propTypes = {
23 |   todo: PropTypes.shape({
24 |     completed: PropTypes.boolean,
25 |     description: PropTypes.string,
26 |     id: PropTypes.number
27 |   }),
28 |   handleClick: PropTypes.func
29 | };
30 | 
31 | export default TodosListItem;


--------------------------------------------------------------------------------
/code/chapter-6/src/components/TodosListItem/TodosListItem.scss:
--------------------------------------------------------------------------------
 1 | @import '../../styles/theme';
 2 | 
 3 | ##{$APP} .todos-list-item {
 4 |   background: $light-gray;
 5 |   border-radius: 5px;
 6 |   border: 1px solid #E1E1E1;
 7 |   box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
 8 |   color: $dark-gray;
 9 |   cursor: pointer;
10 |   font-size: 2rem;
11 |   padding: 15px 20px;
12 |   position: relative;
13 |   transition: all 0.2s ease;
14 | 
15 |   &:hover {
16 |     opacity: 0.8;
17 |   }
18 | 
19 |   &.completed {
20 |     background: darken($light-gray, 10);
21 |     box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.3);
22 |     color: #AAAAAA;
23 |     text-decoration: line-through;
24 |     top: 3px;
25 |   }
26 | }


--------------------------------------------------------------------------------
/code/chapter-6/src/components/TodosListItem/TodosListItem.spec.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/code/chapter-6/src/components/TodosListItem/TodosListItem.spec.js


--------------------------------------------------------------------------------
/code/chapter-6/src/index.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import React from 'react';
 3 | import { render } from 'react-dom';
 4 | 
 5 | // local dependencies
 6 | import App from './components/App/App';
 7 | import './styles/main.scss';
 8 | 
 9 | render(
10 |   <App />,
11 |   document.getElementById('todos-app')
12 | );


--------------------------------------------------------------------------------
/code/chapter-6/src/styles/globals.scss:
--------------------------------------------------------------------------------
 1 | html {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | *, *:before, *:after {
 6 |   box-sizing: inherit;
 7 | }
 8 | 
 9 | body {
10 |   background: $main-background-color;
11 |   font-size: 10px;
12 |   font-family: $main-font-family;
13 |   margin: 0;
14 |   padding: 0;
15 | }


--------------------------------------------------------------------------------
/code/chapter-6/src/styles/main.scss:
--------------------------------------------------------------------------------
1 | @import "theme.scss";
2 | @import "globals.scss";


--------------------------------------------------------------------------------
/code/chapter-6/src/styles/theme.scss:
--------------------------------------------------------------------------------
1 | $APP: 'todos-app';
2 | 
3 | $main-background-color: #F1F1F1;
4 | $main-font-family: "Helvetica Neue", "Arial", "sans-serif";
5 | 
6 | $light-gray: #FAFAFA;
7 | $dark-gray: #888888;


--------------------------------------------------------------------------------
/code/chapter-7/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # production
10 | /build
11 | 
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 | 
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | 


--------------------------------------------------------------------------------
/code/chapter-7/config/env.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | 
 7 | // Make sure that including paths.js after env.js will read .env variables.
 8 | delete require.cache[require.resolve('./paths')];
 9 | 
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 |   throw new Error(
13 |     'The NODE_ENV environment variable is required but was not specified.'
14 |   );
15 | }
16 | 
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | var dotenvFiles = [
19 |   `${paths.dotenv}.${NODE_ENV}.local`,
20 |   `${paths.dotenv}.${NODE_ENV}`,
21 |   // Don't include `.env.local` for `test` environment
22 |   // since normally you expect tests to produce the same
23 |   // results for everyone
24 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 |   paths.dotenv,
26 | ].filter(Boolean);
27 | 
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set.
31 | // https://github.com/motdotla/dotenv
32 | dotenvFiles.forEach(dotenvFile => {
33 |   if (fs.existsSync(dotenvFile)) {
34 |     require('dotenv').config({
35 |       path: dotenvFile,
36 |     });
37 |   }
38 | });
39 | 
40 | // We support resolving modules according to `NODE_PATH`.
41 | // This lets you use absolute paths in imports inside large monorepos:
42 | // https://github.com/facebookincubator/create-react-app/issues/253.
43 | // It works similar to `NODE_PATH` in Node itself:
44 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
45 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
46 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
47 | // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
48 | // We also resolve them to make sure all tools using them work consistently.
49 | const appDirectory = fs.realpathSync(process.cwd());
50 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
51 |   .split(path.delimiter)
52 |   .filter(folder => folder && !path.isAbsolute(folder))
53 |   .map(folder => path.resolve(appDirectory, folder))
54 |   .join(path.delimiter);
55 | 
56 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
57 | // injected into the application via DefinePlugin in Webpack configuration.
58 | const REACT_APP = /^REACT_APP_/i;
59 | 
60 | function getClientEnvironment(publicUrl) {
61 |   const raw = Object.keys(process.env)
62 |     .filter(key => REACT_APP.test(key))
63 |     .reduce(
64 |       (env, key) => {
65 |         env[key] = process.env[key];
66 |         return env;
67 |       },
68 |       {
69 |         // Useful for determining whether we’re running in production mode.
70 |         // Most importantly, it switches React into the correct mode.
71 |         NODE_ENV: process.env.NODE_ENV || 'development',
72 |         // Useful for resolving the correct path to static assets in `public`.
73 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
74 |         // This should only be used as an escape hatch. Normally you would put
75 |         // images into the `src` and `import` them in code to get their paths.
76 |         PUBLIC_URL: publicUrl,
77 |       }
78 |     );
79 |   // Stringify all values so we can feed into Webpack DefinePlugin
80 |   const stringified = {
81 |     'process.env': Object.keys(raw).reduce((env, key) => {
82 |       env[key] = JSON.stringify(raw[key]);
83 |       return env;
84 |     }, {}),
85 |   };
86 | 
87 |   return { raw, stringified };
88 | }
89 | 
90 | module.exports = getClientEnvironment;
91 | 


--------------------------------------------------------------------------------
/code/chapter-7/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/code/chapter-7/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | 
 5 | // This is a custom Jest transformer turning file imports into filenames.
 6 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 7 | 
 8 | module.exports = {
 9 |   process(src, filename) {
10 |     return `module.exports = ${JSON.stringify(path.basename(filename))};`;
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/code/chapter-7/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const fs = require('fs');
 5 | const url = require('url');
 6 | 
 7 | // Make sure any symlinks in the project folder are resolved:
 8 | // https://github.com/facebookincubator/create-react-app/issues/637
 9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 | 
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 | 
14 | function ensureSlash(path, needsSlash) {
15 |   const hasSlash = path.endsWith('/');
16 |   if (hasSlash && !needsSlash) {
17 |     return path.substr(path, path.length - 1);
18 |   } else if (!hasSlash && needsSlash) {
19 |     return `${path}/`;
20 |   } else {
21 |     return path;
22 |   }
23 | }
24 | 
25 | const getPublicUrl = appPackageJson =>
26 |   envPublicUrl || require(appPackageJson).homepage;
27 | 
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
31 | // single-page apps that may serve index.html for nested URLs like /todos/42.
32 | // We can't use a relative path in HTML because we don't want to load something
33 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
34 | function getServedPath(appPackageJson) {
35 |   const publicUrl = getPublicUrl(appPackageJson);
36 |   const servedUrl =
37 |     envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
38 |   return ensureSlash(servedUrl, true);
39 | }
40 | 
41 | // config after eject: we're in ./config/
42 | module.exports = {
43 |   dotenv: resolveApp('.env'),
44 |   appBuild: resolveApp('build'),
45 |   appPublic: resolveApp('public'),
46 |   appHtml: resolveApp('public/index.html'),
47 |   appIndexJs: resolveApp('src/index.js'),
48 |   appPackageJson: resolveApp('package.json'),
49 |   appSrc: resolveApp('src'),
50 |   yarnLockFile: resolveApp('yarn.lock'),
51 |   testsSetup: resolveApp('src/setupTests.js'),
52 |   appNodeModules: resolveApp('node_modules'),
53 |   publicUrl: getPublicUrl(resolveApp('package.json')),
54 |   servedPath: getServedPath(resolveApp('package.json')),
55 | };
56 | 


--------------------------------------------------------------------------------
/code/chapter-7/config/polyfills.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | if (typeof Promise === 'undefined') {
 4 |   // Rejection tracking prevents a common issue where React gets into an
 5 |   // inconsistent state due to an error, but it gets swallowed by a Promise,
 6 |   // and the user has no idea what causes React's erratic future behavior.
 7 |   require('promise/lib/rejection-tracking').enable();
 8 |   window.Promise = require('promise/lib/es6-extensions.js');
 9 | }
10 | 
11 | // fetch() polyfill for making API calls.
12 | require('whatwg-fetch');
13 | 
14 | // Object.assign() is commonly used with React.
15 | // It will use the native implementation if it's present and isn't buggy.
16 | Object.assign = require('object-assign');
17 | 


--------------------------------------------------------------------------------
/code/chapter-7/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ui-react",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "autoprefixer": "7.1.1",
 7 |     "babel-core": "6.25.0",
 8 |     "babel-eslint": "7.2.3",
 9 |     "babel-jest": "20.0.3",
10 |     "babel-loader": "7.0.0",
11 |     "babel-preset-react-app": "^3.0.1",
12 |     "babel-runtime": "6.23.0",
13 |     "case-sensitive-paths-webpack-plugin": "2.1.1",
14 |     "chalk": "1.1.3",
15 |     "classnames": "^2.2.5",
16 |     "css-loader": "0.28.4",
17 |     "dotenv": "4.0.0",
18 |     "eslint": "3.19.0",
19 |     "eslint-config-react-app": "^1.0.5",
20 |     "eslint-loader": "1.7.1",
21 |     "eslint-plugin-flowtype": "2.34.0",
22 |     "eslint-plugin-import": "2.2.0",
23 |     "eslint-plugin-jsx-a11y": "5.0.3",
24 |     "eslint-plugin-react": "7.1.0",
25 |     "extract-text-webpack-plugin": "2.1.2",
26 |     "file-loader": "0.11.2",
27 |     "fs-extra": "3.0.1",
28 |     "html-webpack-plugin": "2.29.0",
29 |     "jest": "20.0.4",
30 |     "object-assign": "4.1.1",
31 |     "postcss-flexbugs-fixes": "3.0.0",
32 |     "postcss-loader": "2.0.6",
33 |     "promise": "7.1.1",
34 |     "react": "^15.6.1",
35 |     "react-dev-utils": "^3.0.2",
36 |     "react-dom": "^15.6.1",
37 |     "react-error-overlay": "^1.0.9",
38 |     "style-loader": "0.18.2",
39 |     "sw-precache-webpack-plugin": "0.11.3",
40 |     "url-loader": "0.5.9",
41 |     "webpack": "2.6.1",
42 |     "webpack-dev-server": "2.5.0",
43 |     "webpack-manifest-plugin": "1.1.0",
44 |     "whatwg-fetch": "2.0.3"
45 |   },
46 |   "scripts": {
47 |     "start": "node scripts/start.js",
48 |     "build": "node scripts/build.js",
49 |     "test": "node scripts/test.js --env=jsdom"
50 |   },
51 |   "jest": {
52 |     "collectCoverageFrom": [
53 |       "src/**/*.{js,jsx}"
54 |     ],
55 |     "setupFiles": [
56 |       "<rootDir>/config/polyfills.js"
57 |     ],
58 |     "testMatch": [
59 |       "<rootDir>/src/**/__tests__/**/*.js?(x)",
60 |       "<rootDir>/src/**/?(*.)(spec|test).js?(x)"
61 |     ],
62 |     "testEnvironment": "node",
63 |     "testURL": "http://localhost",
64 |     "transform": {
65 |       "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
66 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
67 |       "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
68 |     },
69 |     "transformIgnorePatterns": [
70 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
71 |     ],
72 |     "moduleNameMapper": {
73 |       "^react-native$": "react-native-web"
74 |     },
75 |     "moduleFileExtensions": [
76 |       "web.js",
77 |       "js",
78 |       "json",
79 |       "web.jsx",
80 |       "jsx"
81 |     ]
82 |   },
83 |   "babel": {
84 |     "presets": [
85 |       "react-app"
86 |     ]
87 |   },
88 |   "eslintConfig": {
89 |     "extends": "react-app"
90 |   },
91 |   "devDependencies": {
92 |     "node-sass": "^4.5.3",
93 |     "sass-loader": "^6.0.6"
94 |   }
95 | }
96 | 


--------------------------------------------------------------------------------
/code/chapter-7/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/code/chapter-7/public/favicon.ico


--------------------------------------------------------------------------------
/code/chapter-7/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <meta name="theme-color" content="#000000">
 7 |     <!--
 8 |       manifest.json provides metadata used when your web app is added to the
 9 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10 |     -->
11 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13 |     <!--
14 |       Notice the use of %PUBLIC_URL% in the tags above.
15 |       It will be replaced with the URL of the `public` folder during the build.
16 |       Only files inside the `public` folder can be referenced from the HTML.
17 | 
18 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19 |       work correctly both with client-side routing and a non-root public URL.
20 |       Learn how to configure a non-root public URL by running `npm run build`.
21 |     -->
22 |     <title>U&I with React</title>
23 |   </head>
24 |   <body>
25 |     <noscript>
26 |       You need to enable JavaScript to run this app.
27 |     </noscript>
28 |     <div id="todos-app"></div>
29 |     <!--
30 |       This HTML file is a template.
31 |       If you open it directly in the browser, you will see an empty page.
32 | 
33 |       You can add webfonts, meta tags, or analytics to this file.
34 |       The build step will place the bundled scripts into the <body> tag.
35 | 
36 |       To begin the development, run `npm start` or `yarn start`.
37 |       To create a production bundle, use `npm run build` or `yarn build`.
38 |     -->
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/code/chapter-7/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "192x192",
 8 |       "type": "image/png"
 9 |     }
10 |   ],
11 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/code/chapter-7/scripts/start.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'development';
 5 | process.env.NODE_ENV = 'development';
 6 | 
 7 | // Makes the script crash on unhandled rejections instead of silently
 8 | // ignoring them. In the future, promise rejections that are not handled will
 9 | // terminate the Node.js process with a non-zero exit code.
10 | process.on('unhandledRejection', err => {
11 |   throw err;
12 | });
13 | 
14 | // Ensure environment variables are read.
15 | require('../config/env');
16 | 
17 | const fs = require('fs');
18 | const chalk = require('chalk');
19 | const webpack = require('webpack');
20 | const WebpackDevServer = require('webpack-dev-server');
21 | const clearConsole = require('react-dev-utils/clearConsole');
22 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
23 | const {
24 |   choosePort,
25 |   createCompiler,
26 |   prepareProxy,
27 |   prepareUrls,
28 | } = require('react-dev-utils/WebpackDevServerUtils');
29 | const openBrowser = require('react-dev-utils/openBrowser');
30 | const paths = require('../config/paths');
31 | const config = require('../config/webpack.config.dev');
32 | const createDevServerConfig = require('../config/webpackDevServer.config');
33 | 
34 | const useYarn = fs.existsSync(paths.yarnLockFile);
35 | const isInteractive = process.stdout.isTTY;
36 | 
37 | // Warn and crash if required files are missing
38 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
39 |   process.exit(1);
40 | }
41 | 
42 | // Tools like Cloud9 rely on this.
43 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
44 | const HOST = process.env.HOST || '0.0.0.0';
45 | 
46 | // We attempt to use the default port but if it is busy, we offer the user to
47 | // run on a different port. `detect()` Promise resolves to the next free port.
48 | choosePort(HOST, DEFAULT_PORT)
49 |   .then(port => {
50 |     if (port == null) {
51 |       // We have not found a port.
52 |       return;
53 |     }
54 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
55 |     const appName = require(paths.appPackageJson).name;
56 |     const urls = prepareUrls(protocol, HOST, port);
57 |     // Create a webpack compiler that is configured with custom messages.
58 |     const compiler = createCompiler(webpack, config, appName, urls, useYarn);
59 |     // Load proxy config
60 |     const proxySetting = require(paths.appPackageJson).proxy;
61 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
62 |     // Serve webpack assets generated by the compiler over a web sever.
63 |     const serverConfig = createDevServerConfig(
64 |       proxyConfig,
65 |       urls.lanUrlForConfig
66 |     );
67 |     const devServer = new WebpackDevServer(compiler, serverConfig);
68 |     // Launch WebpackDevServer.
69 |     devServer.listen(port, HOST, err => {
70 |       if (err) {
71 |         return console.log(err);
72 |       }
73 |       if (isInteractive) {
74 |         clearConsole();
75 |       }
76 |       console.log(chalk.cyan('Starting the development server...\n'));
77 |       openBrowser(urls.localUrlForBrowser);
78 |     });
79 | 
80 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
81 |       process.on(sig, function() {
82 |         devServer.close();
83 |         process.exit();
84 |       });
85 |     });
86 |   })
87 |   .catch(err => {
88 |     if (err && err.message) {
89 |       console.log(err.message);
90 |     }
91 |     process.exit(1);
92 |   });
93 | 


--------------------------------------------------------------------------------
/code/chapter-7/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'test';
 5 | process.env.NODE_ENV = 'test';
 6 | process.env.PUBLIC_URL = '';
 7 | 
 8 | // Makes the script crash on unhandled rejections instead of silently
 9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 |   throw err;
13 | });
14 | 
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 | 
18 | const jest = require('jest');
19 | const argv = process.argv.slice(2);
20 | 
21 | // Watch unless on CI or in coverage mode
22 | if (!process.env.CI && argv.indexOf('--coverage') < 0) {
23 |   argv.push('--watch');
24 | }
25 | 
26 | 
27 | jest.run(argv);
28 | 


--------------------------------------------------------------------------------
/code/chapter-7/src/components/App/App.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import _ from 'lodash';
 3 | import React, { Component } from 'react';
 4 | 
 5 | // local dependencies
 6 | import TodosList from '../TodosList/TodosList';
 7 | import TodosListItem from '../TodosListItem/TodosListItem';
 8 | import TodosListInfo from '../TodosListInfo/TodosListInfo';
 9 | import styles from './App.scss';
10 | 
11 | class App extends Component {
12 | 
13 |   constructor(...args) {
14 |     super(...args);
15 |     this.state = {
16 |       todos: {}
17 |     };
18 |   }
19 | 
20 |   componentDidMount() {
21 |     this.setState({
22 |       todos: {
23 |         1: { id: 1, completed: false, description: 'task 1' },
24 |         // set to true
25 |         2: { id: 2, completed: true, description: 'task 2' },
26 |         3: { id: 3, completed: false, description: 'task 3' },
27 |         4: { id: 4, completed: false, description: 'task 4' }
28 |       }
29 |     });
30 |   }
31 | 
32 |   toggleTodo = (id) => (e) => {
33 |     e.preventDefault();
34 |     const todos = _.clone(this.state.todos);
35 |     todos[id].completed = !todos[id].completed;
36 |     this.setState({ todos });
37 |   };
38 | 
39 |   generateTodosListItem = (todo, id) => (
40 |     <TodosListItem key={id}
41 |                    todo={todo}
42 |                    pStyles={styles}
43 |                    handleClick={this.toggleTodo} />
44 |   );
45 | 
46 |   render() {
47 |     const { todos } = this.state;
48 |     return (
49 |       <div className={styles.app}>
50 |         <TodosList pStyles={styles}>
51 |           {_.map(todos, this.generateTodosListItem)}
52 |           <TodosListInfo todos={todos} />
53 |         </TodosList>
54 |       </div>
55 |     );
56 |   }
57 | }
58 | 
59 | export default App;


--------------------------------------------------------------------------------
/code/chapter-7/src/components/App/App.scss:
--------------------------------------------------------------------------------
 1 | @import '../../styles/theme';
 2 | 
 3 | .app {}
 4 | 
 5 | .todosList {
 6 |   margin: 50px auto;
 7 |   max-width: 800px;
 8 | }
 9 | 
10 | .todosListItem {
11 |   margin: 10px 0;
12 | }
13 | 


--------------------------------------------------------------------------------
/code/chapter-7/src/components/App/App.spec.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/code/chapter-7/src/components/App/App.spec.js


--------------------------------------------------------------------------------
/code/chapter-7/src/components/TodosList/TodosList.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import classNames from 'classnames';
 3 | import React from 'react';
 4 | import PropTypes from 'prop-types';
 5 | 
 6 | // local dependencies
 7 | import styles from './TodosList.scss';
 8 | 
 9 | const TodosList = ({ children, pStyles }) => (
10 |   <ul className={classNames(
11 |     styles.todosList,
12 |     pStyles.todosList
13 |   )}>
14 |     {children}
15 |   </ul>
16 | );
17 | 
18 | TodosList.defaultProps = {
19 |   children: [],
20 |   pStyles: {
21 |     todosList: ''
22 |   }
23 | };
24 | 
25 | TodosList.propTypes = {
26 |   children: PropTypes.oneOfType([
27 |     PropTypes.array,
28 |     PropTypes.element
29 |   ]),
30 |   pStyles: PropTypes.shape({
31 |     todosList: PropTypes.string
32 |   })
33 | };
34 | 
35 | export default TodosList;


--------------------------------------------------------------------------------
/code/chapter-7/src/components/TodosList/TodosList.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/theme';
2 | 
3 | .todosList {
4 |   list-style: none;
5 |   padding: 10px 15px;
6 | }
7 | 


--------------------------------------------------------------------------------
/code/chapter-7/src/components/TodosList/TodosList.spec.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/code/chapter-7/src/components/TodosList/TodosList.spec.js


--------------------------------------------------------------------------------
/code/chapter-7/src/components/TodosListInfo/TodosListInfo.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import _ from 'lodash';
 3 | import PropTypes from 'prop-types';
 4 | import React from 'react';
 5 | 
 6 | // local dependencies
 7 | import TodosListItem from '../TodosListItem/TodosListItem';
 8 | import styles from './TodosListInfo.scss';
 9 | 
10 | const TodosListInfo = ({ todos }) => {
11 |   const todosCount = _.size(todos);
12 |   const completedTodosCount = _(todos).filter('completed').size();
13 |   return (
14 |     <li className={styles.todosListInfo}>
15 |       {completedTodosCount}/{todosCount} completed
16 |     </li>
17 |   );
18 | };
19 | 
20 | TodosListInfo.defaultProps = {
21 |   todos: []
22 | };
23 | 
24 | TodosListInfo.propTypes = {
25 |   todos: PropTypes.objectOf(TodosListItem.propTypes.todo)
26 | };
27 | 
28 | export default TodosListInfo;


--------------------------------------------------------------------------------
/code/chapter-7/src/components/TodosListInfo/TodosListInfo.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/theme';
2 | 
3 | .todosListInfo {
4 |   color: $dark-gray;
5 |   font-size: 14px;
6 |   text-align: right;
7 | }


--------------------------------------------------------------------------------
/code/chapter-7/src/components/TodosListInfo/TodosListInfo.spec.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/code/chapter-7/src/components/TodosListInfo/TodosListInfo.spec.js


--------------------------------------------------------------------------------
/code/chapter-7/src/components/TodosListItem/TodosListItem.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import _ from 'lodash';
 3 | import classNames from 'classnames';
 4 | import PropTypes from 'prop-types';
 5 | import React from 'react';
 6 | 
 7 | // local dependencies
 8 | import styles from './TodosListItem.scss';
 9 | 
10 | const TodosListItem = ({ pStyles, todo, handleClick }) => (
11 |   <li
12 |     className={classNames(
13 |       styles.todosListItem,
14 |       pStyles.todosListItem,
15 |       {
16 |         [styles.completedTodosListItem]: todo.completed,
17 |         [pStyles.completedTodosListItem]: todo.completed
18 |       }
19 |     )}
20 |     onClick={handleClick(todo.id)}>
21 |     {todo.description}
22 |   </li>
23 | );
24 | 
25 | TodosListItem.defaultProps = {
26 |   todo: {},
27 |   toggleTodo: _.noop,
28 |   pStyles: {
29 |     todosListItem: '',
30 |     completedTodosListItem: ''
31 |   }
32 | };
33 | 
34 | TodosListItem.propTypes = {
35 |   handleClick: PropTypes.func,
36 |   todo: PropTypes.shape({
37 |     completed: PropTypes.boolean,
38 |     description: PropTypes.string,
39 |     id: PropTypes.number
40 |   }),
41 |   pStyles: PropTypes.shape({
42 |     todosListItem: PropTypes.string,
43 |     completedTodosListItem: PropTypes.string
44 |   })
45 | };
46 | 
47 | export default TodosListItem;


--------------------------------------------------------------------------------
/code/chapter-7/src/components/TodosListItem/TodosListItem.scss:
--------------------------------------------------------------------------------
 1 | @import '../../styles/theme';
 2 | 
 3 | .todosListItem {
 4 |   background: $light-gray;
 5 |   border-radius: 5px;
 6 |   border: 1px solid #E1E1E1;
 7 |   box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
 8 |   color: $dark-gray;
 9 |   cursor: pointer;
10 |   font-size: 2rem;
11 |   padding: 15px 20px;
12 |   position: relative;
13 |   transition: all 0.2s ease;
14 | 
15 |   &:hover {
16 |     opacity: 0.8;
17 |   }
18 | }
19 | 
20 | .completedTodosListItem {
21 |   background: darken($light-gray, 10);
22 |   box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.3);
23 |   color: #AAAAAA;
24 |   text-decoration: line-through;
25 |   top: 3px;
26 | }


--------------------------------------------------------------------------------
/code/chapter-7/src/components/TodosListItem/TodosListItem.spec.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/code/chapter-7/src/components/TodosListItem/TodosListItem.spec.js


--------------------------------------------------------------------------------
/code/chapter-7/src/index.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import React from 'react';
 3 | import { render } from 'react-dom';
 4 | 
 5 | // local dependencies
 6 | import App from './components/App/App';
 7 | import './styles/main.scss';
 8 | 
 9 | render(
10 |   <App />,
11 |   document.getElementById('todos-app')
12 | );


--------------------------------------------------------------------------------
/code/chapter-7/src/styles/globals.scss:
--------------------------------------------------------------------------------
 1 | html {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | *, *:before, *:after {
 6 |   box-sizing: inherit;
 7 | }
 8 | 
 9 | body {
10 |   background: $main-background-color;
11 |   font-size: 10px;
12 |   font-family: $main-font-family;
13 |   margin: 0;
14 |   padding: 0;
15 | }


--------------------------------------------------------------------------------
/code/chapter-7/src/styles/main.scss:
--------------------------------------------------------------------------------
1 | @import "theme.scss";
2 | @import "globals.scss";


--------------------------------------------------------------------------------
/code/chapter-7/src/styles/theme.scss:
--------------------------------------------------------------------------------
1 | $APP: 'todos-app';
2 | 
3 | $main-background-color: #F1F1F1;
4 | $main-font-family: "Helvetica Neue", "Arial", "sans-serif";
5 | 
6 | $light-gray: #FAFAFA;
7 | $dark-gray: #888888;


--------------------------------------------------------------------------------
/code/chapter-8/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # production
10 | /build
11 | 
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 | 
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | 


--------------------------------------------------------------------------------
/code/chapter-8/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/code/chapter-8/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | 
 5 | // This is a custom Jest transformer turning file imports into filenames.
 6 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 7 | 
 8 | module.exports = {
 9 |   process(src, filename) {
10 |     return `module.exports = ${JSON.stringify(path.basename(filename))};`;
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/code/chapter-8/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const fs = require('fs');
 5 | const url = require('url');
 6 | 
 7 | // Make sure any symlinks in the project folder are resolved:
 8 | // https://github.com/facebookincubator/create-react-app/issues/637
 9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 | 
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 | 
14 | function ensureSlash(path, needsSlash) {
15 |   const hasSlash = path.endsWith('/');
16 |   if (hasSlash && !needsSlash) {
17 |     return path.substr(path, path.length - 1);
18 |   } else if (!hasSlash && needsSlash) {
19 |     return `${path}/`;
20 |   } else {
21 |     return path;
22 |   }
23 | }
24 | 
25 | const getPublicUrl = appPackageJson =>
26 |   envPublicUrl || require(appPackageJson).homepage;
27 | 
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
31 | // single-page apps that may serve index.html for nested URLs like /todos/42.
32 | // We can't use a relative path in HTML because we don't want to load something
33 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
34 | function getServedPath(appPackageJson) {
35 |   const publicUrl = getPublicUrl(appPackageJson);
36 |   const servedUrl =
37 |     envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
38 |   return ensureSlash(servedUrl, true);
39 | }
40 | 
41 | // config after eject: we're in ./config/
42 | module.exports = {
43 |   dotenv: resolveApp('.env'),
44 |   appBuild: resolveApp('build'),
45 |   appPublic: resolveApp('public'),
46 |   appHtml: resolveApp('public/index.html'),
47 |   appIndexJs: resolveApp('src/index.js'),
48 |   appPackageJson: resolveApp('package.json'),
49 |   appSrc: resolveApp('src'),
50 |   yarnLockFile: resolveApp('yarn.lock'),
51 |   testsSetup: resolveApp('src/setupTests.js'),
52 |   appNodeModules: resolveApp('node_modules'),
53 |   publicUrl: getPublicUrl(resolveApp('package.json')),
54 |   servedPath: getServedPath(resolveApp('package.json')),
55 | };
56 | 


--------------------------------------------------------------------------------
/code/chapter-8/config/polyfills.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | if (typeof Promise === 'undefined') {
 4 |   // Rejection tracking prevents a common issue where React gets into an
 5 |   // inconsistent state due to an error, but it gets swallowed by a Promise,
 6 |   // and the user has no idea what causes React's erratic future behavior.
 7 |   require('promise/lib/rejection-tracking').enable();
 8 |   window.Promise = require('promise/lib/es6-extensions.js');
 9 | }
10 | 
11 | // fetch() polyfill for making API calls.
12 | require('whatwg-fetch');
13 | 
14 | // Object.assign() is commonly used with React.
15 | // It will use the native implementation if it's present and isn't buggy.
16 | Object.assign = require('object-assign');
17 | 


--------------------------------------------------------------------------------
/code/chapter-8/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ui-react",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "autoprefixer": "7.1.1",
 7 |     "babel-core": "6.25.0",
 8 |     "babel-eslint": "7.2.3",
 9 |     "babel-jest": "20.0.3",
10 |     "babel-loader": "7.0.0",
11 |     "babel-preset-react-app": "^3.0.1",
12 |     "babel-runtime": "6.23.0",
13 |     "case-sensitive-paths-webpack-plugin": "2.1.1",
14 |     "chalk": "1.1.3",
15 |     "classnames": "^2.2.5",
16 |     "css-loader": "0.28.4",
17 |     "dotenv": "4.0.0",
18 |     "eslint": "3.19.0",
19 |     "eslint-config-react-app": "^1.0.5",
20 |     "eslint-loader": "1.7.1",
21 |     "eslint-plugin-flowtype": "2.34.0",
22 |     "eslint-plugin-import": "2.2.0",
23 |     "eslint-plugin-jsx-a11y": "5.0.3",
24 |     "eslint-plugin-react": "7.1.0",
25 |     "extract-text-webpack-plugin": "2.1.2",
26 |     "file-loader": "0.11.2",
27 |     "fs-extra": "3.0.1",
28 |     "html-webpack-plugin": "2.29.0",
29 |     "jest": "20.0.4",
30 |     "object-assign": "4.1.1",
31 |     "postcss-flexbugs-fixes": "3.0.0",
32 |     "postcss-loader": "2.0.6",
33 |     "promise": "7.1.1",
34 |     "radium": "^0.19.4",
35 |     "radium-normalize": "^2.0.5",
36 |     "react": "^15.6.1",
37 |     "react-dev-utils": "^3.0.2",
38 |     "react-dom": "^15.6.1",
39 |     "react-error-overlay": "^1.0.9",
40 |     "style-loader": "0.18.2",
41 |     "sw-precache-webpack-plugin": "0.11.3",
42 |     "url-loader": "0.5.9",
43 |     "webpack": "2.6.1",
44 |     "webpack-dev-server": "2.5.0",
45 |     "webpack-manifest-plugin": "1.1.0",
46 |     "whatwg-fetch": "2.0.3"
47 |   },
48 |   "scripts": {
49 |     "start": "node scripts/start.js",
50 |     "build": "node scripts/build.js",
51 |     "test": "node scripts/test.js --env=jsdom"
52 |   },
53 |   "jest": {
54 |     "collectCoverageFrom": [
55 |       "src/**/*.{js,jsx}"
56 |     ],
57 |     "setupFiles": [
58 |       "<rootDir>/config/polyfills.js"
59 |     ],
60 |     "testMatch": [
61 |       "<rootDir>/src/**/__tests__/**/*.js?(x)",
62 |       "<rootDir>/src/**/?(*.)(spec|test).js?(x)"
63 |     ],
64 |     "testEnvironment": "node",
65 |     "testURL": "http://localhost",
66 |     "transform": {
67 |       "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
68 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
69 |       "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
70 |     },
71 |     "transformIgnorePatterns": [
72 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
73 |     ],
74 |     "moduleNameMapper": {
75 |       "^react-native$": "react-native-web"
76 |     },
77 |     "moduleFileExtensions": [
78 |       "web.js",
79 |       "js",
80 |       "json",
81 |       "web.jsx",
82 |       "jsx"
83 |     ]
84 |   },
85 |   "babel": {
86 |     "presets": [
87 |       "react-app"
88 |     ]
89 |   },
90 |   "eslintConfig": {
91 |     "extends": "react-app"
92 |   },
93 |   "devDependencies": {
94 |     "node-sass": "^4.5.3",
95 |     "sass-loader": "^6.0.6"
96 |   }
97 | }
98 | 


--------------------------------------------------------------------------------
/code/chapter-8/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/code/chapter-8/public/favicon.ico


--------------------------------------------------------------------------------
/code/chapter-8/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <meta name="theme-color" content="#000000">
 7 |     <!--
 8 |       manifest.json provides metadata used when your web app is added to the
 9 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10 |     -->
11 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13 |     <!--
14 |       Notice the use of %PUBLIC_URL% in the tags above.
15 |       It will be replaced with the URL of the `public` folder during the build.
16 |       Only files inside the `public` folder can be referenced from the HTML.
17 | 
18 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19 |       work correctly both with client-side routing and a non-root public URL.
20 |       Learn how to configure a non-root public URL by running `npm run build`.
21 |     -->
22 |     <title>U&I with React</title>
23 |   </head>
24 |   <body>
25 |     <noscript>
26 |       You need to enable JavaScript to run this app.
27 |     </noscript>
28 |     <div id="todos-app"></div>
29 |     <!--
30 |       This HTML file is a template.
31 |       If you open it directly in the browser, you will see an empty page.
32 | 
33 |       You can add webfonts, meta tags, or analytics to this file.
34 |       The build step will place the bundled scripts into the <body> tag.
35 | 
36 |       To begin the development, run `npm start` or `yarn start`.
37 |       To create a production bundle, use `npm run build` or `yarn build`.
38 |     -->
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/code/chapter-8/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "192x192",
 8 |       "type": "image/png"
 9 |     }
10 |   ],
11 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/code/chapter-8/scripts/start.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'development';
 5 | process.env.NODE_ENV = 'development';
 6 | 
 7 | // Makes the script crash on unhandled rejections instead of silently
 8 | // ignoring them. In the future, promise rejections that are not handled will
 9 | // terminate the Node.js process with a non-zero exit code.
10 | process.on('unhandledRejection', err => {
11 |   throw err;
12 | });
13 | 
14 | // Ensure environment variables are read.
15 | require('../config/env');
16 | 
17 | const fs = require('fs');
18 | const chalk = require('chalk');
19 | const webpack = require('webpack');
20 | const WebpackDevServer = require('webpack-dev-server');
21 | const clearConsole = require('react-dev-utils/clearConsole');
22 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
23 | const {
24 |   choosePort,
25 |   createCompiler,
26 |   prepareProxy,
27 |   prepareUrls,
28 | } = require('react-dev-utils/WebpackDevServerUtils');
29 | const openBrowser = require('react-dev-utils/openBrowser');
30 | const paths = require('../config/paths');
31 | const config = require('../config/webpack.config.dev');
32 | const createDevServerConfig = require('../config/webpackDevServer.config');
33 | 
34 | const useYarn = fs.existsSync(paths.yarnLockFile);
35 | const isInteractive = process.stdout.isTTY;
36 | 
37 | // Warn and crash if required files are missing
38 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
39 |   process.exit(1);
40 | }
41 | 
42 | // Tools like Cloud9 rely on this.
43 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
44 | const HOST = process.env.HOST || '0.0.0.0';
45 | 
46 | // We attempt to use the default port but if it is busy, we offer the user to
47 | // run on a different port. `detect()` Promise resolves to the next free port.
48 | choosePort(HOST, DEFAULT_PORT)
49 |   .then(port => {
50 |     if (port == null) {
51 |       // We have not found a port.
52 |       return;
53 |     }
54 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
55 |     const appName = require(paths.appPackageJson).name;
56 |     const urls = prepareUrls(protocol, HOST, port);
57 |     // Create a webpack compiler that is configured with custom messages.
58 |     const compiler = createCompiler(webpack, config, appName, urls, useYarn);
59 |     // Load proxy config
60 |     const proxySetting = require(paths.appPackageJson).proxy;
61 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
62 |     // Serve webpack assets generated by the compiler over a web sever.
63 |     const serverConfig = createDevServerConfig(
64 |       proxyConfig,
65 |       urls.lanUrlForConfig
66 |     );
67 |     const devServer = new WebpackDevServer(compiler, serverConfig);
68 |     // Launch WebpackDevServer.
69 |     devServer.listen(port, HOST, err => {
70 |       if (err) {
71 |         return console.log(err);
72 |       }
73 |       if (isInteractive) {
74 |         clearConsole();
75 |       }
76 |       console.log(chalk.cyan('Starting the development server...\n'));
77 |       openBrowser(urls.localUrlForBrowser);
78 |     });
79 | 
80 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
81 |       process.on(sig, function() {
82 |         devServer.close();
83 |         process.exit();
84 |       });
85 |     });
86 |   })
87 |   .catch(err => {
88 |     if (err && err.message) {
89 |       console.log(err.message);
90 |     }
91 |     process.exit(1);
92 |   });
93 | 


--------------------------------------------------------------------------------
/code/chapter-8/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'test';
 5 | process.env.NODE_ENV = 'test';
 6 | process.env.PUBLIC_URL = '';
 7 | 
 8 | // Makes the script crash on unhandled rejections instead of silently
 9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 |   throw err;
13 | });
14 | 
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 | 
18 | const jest = require('jest');
19 | const argv = process.argv.slice(2);
20 | 
21 | // Watch unless on CI or in coverage mode
22 | if (!process.env.CI && argv.indexOf('--coverage') < 0) {
23 |   argv.push('--watch');
24 | }
25 | 
26 | 
27 | jest.run(argv);
28 | 


--------------------------------------------------------------------------------
/code/chapter-8/src/components/App/App.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import _ from 'lodash';
 3 | import React, { Component } from 'react';
 4 | import { Style, StyleRoot } from 'radium';
 5 | import normalize from 'radium-normalize';
 6 | 
 7 | // local dependencies
 8 | import TodosList from '../TodosList/TodosList';
 9 | import TodosListItem from '../TodosListItem/TodosListItem';
10 | import TodosListInfo from '../TodosListInfo/TodosListInfo';
11 | import globalStyles from '../../styles/globals.styles';
12 | import styles from './App.styles';
13 | 
14 | class App extends Component {
15 | 
16 |   constructor(...args) {
17 |     super(...args);
18 |     this.state = {
19 |       todos: {}
20 |     };
21 |   }
22 | 
23 |   componentDidMount() {
24 |     this.setState({
25 |       todos: {
26 |         1: { id: 1, completed: false, description: 'task 1' },
27 |         // set to true
28 |         2: { id: 2, completed: true, description: 'task 2' },
29 |         3: { id: 3, completed: false, description: 'task 3' },
30 |         4: { id: 4, completed: false, description: 'task 4' }
31 |       }
32 |     });
33 |   }
34 | 
35 |   toggleTodo = (id) => (e) => {
36 |     e.preventDefault();
37 |     const todos = _.clone(this.state.todos);
38 |     todos[id].completed = !todos[id].completed;
39 |     this.setState({ todos });
40 |   };
41 | 
42 |   generateTodosListItem = (todo, id) => (
43 |     <TodosListItem key={id}
44 |                    todo={todo}
45 |                    pStyles={styles}
46 |                    handleClick={this.toggleTodo} />
47 |   );
48 | 
49 |   render() {
50 |     const { todos } = this.state;
51 |     return (
52 |       <StyleRoot>
53 |         <Style rules={normalize} />
54 |         <Style rules={globalStyles} />
55 |         <div style={styles.app}>
56 |           <TodosList pStyles={styles}>
57 |             {_.map(todos, this.generateTodosListItem)}
58 |             <TodosListInfo todos={todos} />
59 |           </TodosList>
60 |         </div>
61 |       </StyleRoot>
62 |     );
63 |   }
64 | }
65 | 
66 | export default App;


--------------------------------------------------------------------------------
/code/chapter-8/src/components/App/App.spec.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/code/chapter-8/src/components/App/App.spec.js


--------------------------------------------------------------------------------
/code/chapter-8/src/components/App/App.styles.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   app: {},
 3 |   todosList: {
 4 |     margin: '50px auto',
 5 |     maxWidth: 800
 6 |   },
 7 |   todosListItem: {
 8 |     margin: '10px 0'
 9 |   }
10 | }


--------------------------------------------------------------------------------
/code/chapter-8/src/components/TodosList/TodosList.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import React from 'react';
 3 | import PropTypes from 'prop-types';
 4 | import Radium from 'radium';
 5 | 
 6 | // local dependencies
 7 | import styles from './TodosList.styles';
 8 | 
 9 | const TodosList = ({ children, pStyles }) => (
10 |   <ul style={[styles.todosList, pStyles.todosList]}>
11 |     {children}
12 |   </ul>
13 | );
14 | 
15 | TodosList.defaultProps = {
16 |   children: [],
17 |   pStyles: {
18 |     todosList: {}
19 |   }
20 | };
21 | 
22 | TodosList.propTypes = {
23 |   children: PropTypes.oneOfType([
24 |     PropTypes.array,
25 |     PropTypes.element
26 |   ]),
27 |   pStyles: PropTypes.shape({
28 |     todosList: PropTypes.object
29 |   })
30 | };
31 | 
32 | export default Radium(TodosList);


--------------------------------------------------------------------------------
/code/chapter-8/src/components/TodosList/TodosList.spec.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/code/chapter-8/src/components/TodosList/TodosList.spec.js


--------------------------------------------------------------------------------
/code/chapter-8/src/components/TodosList/TodosList.styles.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   todosList: {
3 |     listStyle: 'none',
4 |     padding: '10px 15px'
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/code/chapter-8/src/components/TodosListInfo/TodosListInfo.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import _ from 'lodash';
 3 | import PropTypes from 'prop-types';
 4 | import React from 'react';
 5 | import Radium from 'radium';
 6 | 
 7 | // local dependencies
 8 | import TodosListItem from '../TodosListItem/TodosListItem';
 9 | import styles from './TodosListInfo.styles';
10 | 
11 | const TodosListInfo = ({ todos }) => {
12 |   const todosCount = _.size(todos);
13 |   const completedTodosCount = _(todos).filter('completed').size();
14 |   return (
15 |     <li style={styles.todosListInfo}>
16 |       {completedTodosCount}/{todosCount} completed
17 |     </li>
18 |   );
19 | };
20 | 
21 | TodosListInfo.defaultProps = {
22 |   todos: []
23 | };
24 | 
25 | TodosListInfo.propTypes = {
26 |   todos: PropTypes.objectOf(TodosListItem.propTypes.todo)
27 | };
28 | 
29 | export default Radium(TodosListInfo);


--------------------------------------------------------------------------------
/code/chapter-8/src/components/TodosListInfo/TodosListInfo.spec.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/code/chapter-8/src/components/TodosListInfo/TodosListInfo.spec.js


--------------------------------------------------------------------------------
/code/chapter-8/src/components/TodosListInfo/TodosListInfo.styles.js:
--------------------------------------------------------------------------------
1 | import theme from '../../styles/theme';
2 | 
3 | export default {
4 |   todosListInfo: {
5 |     color: theme.$darkGray,
6 |     fontSize: 14,
7 |     textAlign: 'right'
8 |   }
9 | }


--------------------------------------------------------------------------------
/code/chapter-8/src/components/TodosListItem/TodosListItem.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import _ from 'lodash';
 3 | import PropTypes from 'prop-types';
 4 | import React from 'react';
 5 | import Radium from 'radium';
 6 | 
 7 | // local dependencies
 8 | import styles from './TodosListItem.styles';
 9 | 
10 | const TodosListItem = ({ pStyles, todo, handleClick }) => (
11 |   <li
12 |     style={[
13 |       styles.todosListItem,
14 |       pStyles.todosListItem,
15 |       todo.completed && styles.completedTodosListItem,
16 |       todo.completed && pStyles.completedTodosListItem
17 |     ]}
18 |     onClick={handleClick(todo.id)}>
19 |     {todo.description}
20 |   </li>
21 | );
22 | 
23 | TodosListItem.defaultProps = {
24 |   todo: {},
25 |   toggleTodo: _.noop,
26 |   pStyles: {
27 |     todosListItem: {},
28 |     completedTodosListItem: {}
29 |   }
30 | };
31 | 
32 | TodosListItem.propTypes = {
33 |   handleClick: PropTypes.func,
34 |   todo: PropTypes.shape({
35 |     completed: PropTypes.boolean,
36 |     description: PropTypes.string,
37 |     id: PropTypes.number
38 |   }),
39 |   pStyles: PropTypes.shape({
40 |     todosListItem: PropTypes.object,
41 |     completedTodosListItem: PropTypes.object
42 |   })
43 | };
44 | 
45 | export default Radium(TodosListItem);


--------------------------------------------------------------------------------
/code/chapter-8/src/components/TodosListItem/TodosListItem.spec.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/code/chapter-8/src/components/TodosListItem/TodosListItem.spec.js


--------------------------------------------------------------------------------
/code/chapter-8/src/components/TodosListItem/TodosListItem.styles.js:
--------------------------------------------------------------------------------
 1 | import theme from '../../styles/theme';
 2 | 
 3 | export default {
 4 |   todosListItem: {
 5 |     background: theme.$lightGray,
 6 |     borderRadius: 5,
 7 |     border: '1px solid #E1E1E1',
 8 |     boxShadow: '0 2px 1px 0 rgba(0, 0, 0, 0.2)',
 9 |     color: theme.$darkGray,
10 |     cursor: 'pointer',
11 |     fontSize: '2rem',
12 |     padding: '15px 20px',
13 |     position: 'relative',
14 |     transition: 'all 0.2s ease',
15 |     ':hover': {
16 |       opacity: 0.8
17 |     }
18 |   },
19 | 
20 |   completedTodosListItem: {
21 |     background: theme.$lightGray,
22 |     boxShadow: 'inset 0 1px 2px 0 rgba(0, 0, 0, 0.3)',
23 |     color: '#AAAAAA',
24 |     textDecoration: 'line-through',
25 |     top: 3
26 |   }
27 | }


--------------------------------------------------------------------------------
/code/chapter-8/src/index.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import React from 'react';
 3 | import { render } from 'react-dom';
 4 | 
 5 | // local dependencies
 6 | import App from './components/App/App';
 7 | 
 8 | render(
 9 |   <App />,
10 |   document.getElementById('todos-app')
11 | );


--------------------------------------------------------------------------------
/code/chapter-8/src/styles/globals.styles.js:
--------------------------------------------------------------------------------
 1 | import theme from './theme';
 2 | 
 3 | export default {
 4 |   '*, *:before, *:after': {
 5 |     boxSizing: 'inherit'
 6 |   },
 7 |   html: {
 8 |     boxSizing: 'border-box'
 9 |   },
10 |   body: {
11 |     background: theme.$mainBackgroundColor,
12 |     fontSize: 10,
13 |     fontFamily: theme.$mainFontFamily,
14 |     margin: 0,
15 |     padding: 0
16 |   }
17 | }


--------------------------------------------------------------------------------
/code/chapter-8/src/styles/theme.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   $APP: 'todos-app',
3 | 
4 |   $mainBackgroundColor: '#F1F1F1',
5 |   $mainFontFamily: 'Helvetica Neue, Arial, sans-serif',
6 | 
7 |   $lightGray: '#FAFAFA',
8 |   $darkGray: '#888888'
9 | }


--------------------------------------------------------------------------------
/code/chapter-9/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # production
10 | /build
11 | 
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 | 
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | 


--------------------------------------------------------------------------------
/code/chapter-9/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/code/chapter-9/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | 
 5 | // This is a custom Jest transformer turning file imports into filenames.
 6 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 7 | 
 8 | module.exports = {
 9 |   process(src, filename) {
10 |     return `module.exports = ${JSON.stringify(path.basename(filename))};`;
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/code/chapter-9/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const fs = require('fs');
 5 | const url = require('url');
 6 | 
 7 | // Make sure any symlinks in the project folder are resolved:
 8 | // https://github.com/facebookincubator/create-react-app/issues/637
 9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 | 
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 | 
14 | function ensureSlash(path, needsSlash) {
15 |   const hasSlash = path.endsWith('/');
16 |   if (hasSlash && !needsSlash) {
17 |     return path.substr(path, path.length - 1);
18 |   } else if (!hasSlash && needsSlash) {
19 |     return `${path}/`;
20 |   } else {
21 |     return path;
22 |   }
23 | }
24 | 
25 | const getPublicUrl = appPackageJson =>
26 |   envPublicUrl || require(appPackageJson).homepage;
27 | 
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
31 | // single-page apps that may serve index.html for nested URLs like /todos/42.
32 | // We can't use a relative path in HTML because we don't want to load something
33 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
34 | function getServedPath(appPackageJson) {
35 |   const publicUrl = getPublicUrl(appPackageJson);
36 |   const servedUrl =
37 |     envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
38 |   return ensureSlash(servedUrl, true);
39 | }
40 | 
41 | // config after eject: we're in ./config/
42 | module.exports = {
43 |   dotenv: resolveApp('.env'),
44 |   appBuild: resolveApp('build'),
45 |   appPublic: resolveApp('public'),
46 |   appHtml: resolveApp('public/index.html'),
47 |   appIndexJs: resolveApp('src/index.js'),
48 |   appPackageJson: resolveApp('package.json'),
49 |   appSrc: resolveApp('src'),
50 |   yarnLockFile: resolveApp('yarn.lock'),
51 |   testsSetup: resolveApp('src/setupTests.js'),
52 |   appNodeModules: resolveApp('node_modules'),
53 |   publicUrl: getPublicUrl(resolveApp('package.json')),
54 |   servedPath: getServedPath(resolveApp('package.json')),
55 | };
56 | 


--------------------------------------------------------------------------------
/code/chapter-9/config/polyfills.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | if (typeof Promise === 'undefined') {
 4 |   // Rejection tracking prevents a common issue where React gets into an
 5 |   // inconsistent state due to an error, but it gets swallowed by a Promise,
 6 |   // and the user has no idea what causes React's erratic future behavior.
 7 |   require('promise/lib/rejection-tracking').enable();
 8 |   window.Promise = require('promise/lib/es6-extensions.js');
 9 | }
10 | 
11 | // fetch() polyfill for making API calls.
12 | require('whatwg-fetch');
13 | 
14 | // Object.assign() is commonly used with React.
15 | // It will use the native implementation if it's present and isn't buggy.
16 | Object.assign = require('object-assign');
17 | 


--------------------------------------------------------------------------------
/code/chapter-9/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ui-react",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "autoprefixer": "7.1.1",
 7 |     "babel-core": "6.25.0",
 8 |     "babel-eslint": "7.2.3",
 9 |     "babel-jest": "20.0.3",
10 |     "babel-loader": "7.0.0",
11 |     "babel-preset-react-app": "^3.0.1",
12 |     "babel-runtime": "6.23.0",
13 |     "case-sensitive-paths-webpack-plugin": "2.1.1",
14 |     "chalk": "1.1.3",
15 |     "classnames": "^2.2.5",
16 |     "css-loader": "0.28.4",
17 |     "dotenv": "4.0.0",
18 |     "eslint": "3.19.0",
19 |     "eslint-config-react-app": "^1.0.5",
20 |     "eslint-loader": "1.7.1",
21 |     "eslint-plugin-flowtype": "2.34.0",
22 |     "eslint-plugin-import": "2.2.0",
23 |     "eslint-plugin-jsx-a11y": "5.0.3",
24 |     "eslint-plugin-react": "7.1.0",
25 |     "extract-text-webpack-plugin": "2.1.2",
26 |     "file-loader": "0.11.2",
27 |     "fs-extra": "3.0.1",
28 |     "html-webpack-plugin": "2.29.0",
29 |     "jest": "20.0.4",
30 |     "object-assign": "4.1.1",
31 |     "postcss-flexbugs-fixes": "3.0.0",
32 |     "postcss-loader": "2.0.6",
33 |     "promise": "7.1.1",
34 |     "radium": "^0.19.4",
35 |     "radium-normalize": "^2.0.5",
36 |     "react": "^15.6.1",
37 |     "react-dev-utils": "^3.0.2",
38 |     "react-dom": "^15.6.1",
39 |     "react-error-overlay": "^1.0.9",
40 |     "style-loader": "0.18.2",
41 |     "sw-precache-webpack-plugin": "0.11.3",
42 |     "theme-wrap": "^1.0.3",
43 |     "url-loader": "0.5.9",
44 |     "webpack": "2.6.1",
45 |     "webpack-dev-server": "2.5.0",
46 |     "webpack-manifest-plugin": "1.1.0",
47 |     "whatwg-fetch": "2.0.3"
48 |   },
49 |   "scripts": {
50 |     "start": "node scripts/start.js",
51 |     "build": "node scripts/build.js",
52 |     "test": "node scripts/test.js --env=jsdom"
53 |   },
54 |   "jest": {
55 |     "collectCoverageFrom": [
56 |       "src/**/*.{js,jsx}"
57 |     ],
58 |     "setupFiles": [
59 |       "<rootDir>/config/polyfills.js"
60 |     ],
61 |     "testMatch": [
62 |       "<rootDir>/src/**/__tests__/**/*.js?(x)",
63 |       "<rootDir>/src/**/?(*.)(spec|test).js?(x)"
64 |     ],
65 |     "testEnvironment": "node",
66 |     "testURL": "http://localhost",
67 |     "transform": {
68 |       "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
69 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
70 |       "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
71 |     },
72 |     "transformIgnorePatterns": [
73 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
74 |     ],
75 |     "moduleNameMapper": {
76 |       "^react-native$": "react-native-web"
77 |     },
78 |     "moduleFileExtensions": [
79 |       "web.js",
80 |       "js",
81 |       "json",
82 |       "web.jsx",
83 |       "jsx"
84 |     ]
85 |   },
86 |   "babel": {
87 |     "presets": [
88 |       "react-app"
89 |     ]
90 |   },
91 |   "eslintConfig": {
92 |     "extends": "react-app"
93 |   },
94 |   "devDependencies": {
95 |     "node-sass": "^4.5.3",
96 |     "sass-loader": "^6.0.6"
97 |   }
98 | }
99 | 


--------------------------------------------------------------------------------
/code/chapter-9/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/code/chapter-9/public/favicon.ico


--------------------------------------------------------------------------------
/code/chapter-9/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <meta name="theme-color" content="#000000">
 7 |     <!--
 8 |       manifest.json provides metadata used when your web app is added to the
 9 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10 |     -->
11 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13 |     <!--
14 |       Notice the use of %PUBLIC_URL% in the tags above.
15 |       It will be replaced with the URL of the `public` folder during the build.
16 |       Only files inside the `public` folder can be referenced from the HTML.
17 | 
18 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19 |       work correctly both with client-side routing and a non-root public URL.
20 |       Learn how to configure a non-root public URL by running `npm run build`.
21 |     -->
22 |     <title>U&I with React</title>
23 |   </head>
24 |   <body>
25 |     <noscript>
26 |       You need to enable JavaScript to run this app.
27 |     </noscript>
28 |     <div id="todos-app"></div>
29 |     <!--
30 |       This HTML file is a template.
31 |       If you open it directly in the browser, you will see an empty page.
32 | 
33 |       You can add webfonts, meta tags, or analytics to this file.
34 |       The build step will place the bundled scripts into the <body> tag.
35 | 
36 |       To begin the development, run `npm start` or `yarn start`.
37 |       To create a production bundle, use `npm run build` or `yarn build`.
38 |     -->
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/code/chapter-9/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "192x192",
 8 |       "type": "image/png"
 9 |     }
10 |   ],
11 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/code/chapter-9/scripts/start.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'development';
 5 | process.env.NODE_ENV = 'development';
 6 | 
 7 | // Makes the script crash on unhandled rejections instead of silently
 8 | // ignoring them. In the future, promise rejections that are not handled will
 9 | // terminate the Node.js process with a non-zero exit code.
10 | process.on('unhandledRejection', err => {
11 |   throw err;
12 | });
13 | 
14 | // Ensure environment variables are read.
15 | require('../config/env');
16 | 
17 | const fs = require('fs');
18 | const chalk = require('chalk');
19 | const webpack = require('webpack');
20 | const WebpackDevServer = require('webpack-dev-server');
21 | const clearConsole = require('react-dev-utils/clearConsole');
22 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
23 | const {
24 |   choosePort,
25 |   createCompiler,
26 |   prepareProxy,
27 |   prepareUrls,
28 | } = require('react-dev-utils/WebpackDevServerUtils');
29 | const openBrowser = require('react-dev-utils/openBrowser');
30 | const paths = require('../config/paths');
31 | const config = require('../config/webpack.config.dev');
32 | const createDevServerConfig = require('../config/webpackDevServer.config');
33 | 
34 | const useYarn = fs.existsSync(paths.yarnLockFile);
35 | const isInteractive = process.stdout.isTTY;
36 | 
37 | // Warn and crash if required files are missing
38 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
39 |   process.exit(1);
40 | }
41 | 
42 | // Tools like Cloud9 rely on this.
43 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
44 | const HOST = process.env.HOST || '0.0.0.0';
45 | 
46 | // We attempt to use the default port but if it is busy, we offer the user to
47 | // run on a different port. `detect()` Promise resolves to the next free port.
48 | choosePort(HOST, DEFAULT_PORT)
49 |   .then(port => {
50 |     if (port == null) {
51 |       // We have not found a port.
52 |       return;
53 |     }
54 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
55 |     const appName = require(paths.appPackageJson).name;
56 |     const urls = prepareUrls(protocol, HOST, port);
57 |     // Create a webpack compiler that is configured with custom messages.
58 |     const compiler = createCompiler(webpack, config, appName, urls, useYarn);
59 |     // Load proxy config
60 |     const proxySetting = require(paths.appPackageJson).proxy;
61 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
62 |     // Serve webpack assets generated by the compiler over a web sever.
63 |     const serverConfig = createDevServerConfig(
64 |       proxyConfig,
65 |       urls.lanUrlForConfig
66 |     );
67 |     const devServer = new WebpackDevServer(compiler, serverConfig);
68 |     // Launch WebpackDevServer.
69 |     devServer.listen(port, HOST, err => {
70 |       if (err) {
71 |         return console.log(err);
72 |       }
73 |       if (isInteractive) {
74 |         clearConsole();
75 |       }
76 |       console.log(chalk.cyan('Starting the development server...\n'));
77 |       openBrowser(urls.localUrlForBrowser);
78 |     });
79 | 
80 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
81 |       process.on(sig, function() {
82 |         devServer.close();
83 |         process.exit();
84 |       });
85 |     });
86 |   })
87 |   .catch(err => {
88 |     if (err && err.message) {
89 |       console.log(err.message);
90 |     }
91 |     process.exit(1);
92 |   });
93 | 


--------------------------------------------------------------------------------
/code/chapter-9/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'test';
 5 | process.env.NODE_ENV = 'test';
 6 | process.env.PUBLIC_URL = '';
 7 | 
 8 | // Makes the script crash on unhandled rejections instead of silently
 9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 |   throw err;
13 | });
14 | 
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 | 
18 | const jest = require('jest');
19 | const argv = process.argv.slice(2);
20 | 
21 | // Watch unless on CI or in coverage mode
22 | if (!process.env.CI && argv.indexOf('--coverage') < 0) {
23 |   argv.push('--watch');
24 | }
25 | 
26 | 
27 | jest.run(argv);
28 | 


--------------------------------------------------------------------------------
/code/chapter-9/src/components/App/App.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import _ from 'lodash';
 3 | import React, { Component } from 'react';
 4 | import { Style, StyleRoot } from 'radium';
 5 | import normalize from 'radium-normalize';
 6 | import { ThemeWrapProvider } from 'theme-wrap';
 7 | 
 8 | // local dependencies
 9 | import TodosList from '../TodosList/TodosList';
10 | import TodosListItem from '../TodosListItem/TodosListItem';
11 | import TodosListInfo from '../TodosListInfo/TodosListInfo';
12 | import globalStyles from '../../styles/globals.styles';
13 | import styles from './App.styles';
14 | import theme from '../../styles/theme';
15 | import mixins from '../../styles/mixins';
16 | 
17 | class App extends Component {
18 | 
19 |   constructor(...args) {
20 |     super(...args);
21 |     this.state = {
22 |       todos: {},
23 |       dynamicTheme: theme
24 |     };
25 |   }
26 | 
27 |   componentDidMount() {
28 |     this.setState({
29 |       todos: {
30 |         1: { id: 1, completed: false, description: 'task 1' },
31 |         // set to true
32 |         2: { id: 2, completed: true, description: 'task 2' },
33 |         3: { id: 3, completed: false, description: 'task 3' },
34 |         4: { id: 4, completed: false, description: 'task 4' }
35 |       }
36 |     });
37 |   }
38 | 
39 |   randomizeTheme = () => {
40 |     const colorPalette = ['red', 'green', 'blue', 'yellow', 'orange', 'purple', 'cyan'];
41 |     const dynamicTheme = {
42 |       ...this.state.dynamicTheme,
43 |       $primaryColor: _.sample(colorPalette),
44 |       $secondaryColor: _.sample(colorPalette),
45 |       $tertiaryColor: _.sample(colorPalette)
46 |     };
47 |     this.setState({ dynamicTheme });
48 |   };
49 | 
50 |   toggleTodo = (id) => (e) => {
51 |     e.preventDefault();
52 |     const todos = _.clone(this.state.todos);
53 |     todos[id].completed = !todos[id].completed;
54 |     this.setState({ todos });
55 |     this.randomizeTheme();
56 |   };
57 | 
58 |   generateTodosListItem = (todo, id) => (
59 |     <TodosListItem key={id}
60 |                    todo={todo}
61 |                    pStyles={styles}
62 |                    handleClick={this.toggleTodo} />
63 |   );
64 | 
65 |   render() {
66 |     const { dynamicTheme, todos } = this.state;
67 |     return (
68 |       <StyleRoot>
69 |         <Style rules={normalize} />
70 |         <Style rules={globalStyles} />
71 |         <ThemeWrapProvider theme={dynamicTheme}
72 |                            mixins={mixins}>
73 |           <div style={styles.app}>
74 |             <TodosList pStyles={styles}>
75 |               {_.map(todos, this.generateTodosListItem)}
76 |               <TodosListInfo todos={todos} />
77 |             </TodosList>
78 |           </div>
79 |         </ThemeWrapProvider>
80 |       </StyleRoot>
81 |     );
82 |   }
83 | }
84 | 
85 | export default App;


--------------------------------------------------------------------------------
/code/chapter-9/src/components/App/App.spec.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/code/chapter-9/src/components/App/App.spec.js


--------------------------------------------------------------------------------
/code/chapter-9/src/components/App/App.styles.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   app: {},
 3 |   todosList: {
 4 |     margin: '50px auto',
 5 |     maxWidth: 800
 6 |   },
 7 |   todosListItem: {
 8 |     margin: '10px 0'
 9 |   }
10 | }


--------------------------------------------------------------------------------
/code/chapter-9/src/components/TodosList/TodosList.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import _ from 'lodash';
 3 | import React from 'react';
 4 | import PropTypes from 'prop-types';
 5 | import Radium from 'radium';
 6 | import { applyThemeWrap } from 'theme-wrap';
 7 | 
 8 | // local dependencies
 9 | import styles from './TodosList.styles';
10 | 
11 | export const TodosList = ({ children, pStyles, twStyles }) => (
12 |   <ul style={[twStyles.todosList, pStyles.todosList]}>
13 |     {children}
14 |   </ul>
15 | );
16 | 
17 | TodosList.defaultProps = {
18 |   children: [],
19 |   pStyles: {
20 |     todosList: {}
21 |   }
22 | };
23 | 
24 | TodosList.propTypes = {
25 |   children: PropTypes.oneOfType([
26 |     PropTypes.array,
27 |     PropTypes.element
28 |   ]),
29 |   pStyles: PropTypes.shape({
30 |     todosList: PropTypes.object
31 |   })
32 | };
33 | 
34 | export default _.flow(
35 |   Radium,
36 |   applyThemeWrap(styles)
37 | )(TodosList);


--------------------------------------------------------------------------------
/code/chapter-9/src/components/TodosList/TodosList.spec.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/code/chapter-9/src/components/TodosList/TodosList.spec.js


--------------------------------------------------------------------------------
/code/chapter-9/src/components/TodosList/TodosList.styles.js:
--------------------------------------------------------------------------------
1 | export default (theme, mixins) => ({
2 |   todosList: {
3 |     ...mixins.get('list'),
4 |     border: `10px solid ${theme.$secondaryColor}`,
5 |     background: theme.$primaryColor,
6 |     transition: 'all 0.5s ease',
7 |   }
8 | });
9 | 


--------------------------------------------------------------------------------
/code/chapter-9/src/components/TodosListInfo/TodosListInfo.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import _ from 'lodash';
 3 | import PropTypes from 'prop-types';
 4 | import React from 'react';
 5 | import Radium from 'radium';
 6 | import { applyThemeWrap } from 'theme-wrap';
 7 | 
 8 | // local dependencies
 9 | import { TodosListItem } from '../TodosListItem/TodosListItem';
10 | import styles from './TodosListInfo.styles';
11 | 
12 | export const TodosListInfo = ({ todos, twStyles }) => {
13 |   const todosCount = _.size(todos);
14 |   const completedTodosCount = _(todos).filter('completed').size();
15 |   return (
16 |     <li style={twStyles.todosListInfo}>
17 |       {completedTodosCount}/{todosCount} completed
18 |     </li>
19 |   );
20 | };
21 | 
22 | TodosListInfo.defaultProps = {
23 |   todos: []
24 | };
25 | 
26 | TodosListInfo.propTypes = {
27 |   todos: PropTypes.objectOf(TodosListItem.propTypes.todo)
28 | };
29 | 
30 | export default _.flow(
31 |   Radium,
32 |   applyThemeWrap(styles)
33 | )(TodosListInfo);


--------------------------------------------------------------------------------
/code/chapter-9/src/components/TodosListInfo/TodosListInfo.spec.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/code/chapter-9/src/components/TodosListInfo/TodosListInfo.spec.js


--------------------------------------------------------------------------------
/code/chapter-9/src/components/TodosListInfo/TodosListInfo.styles.js:
--------------------------------------------------------------------------------
1 | export default (theme) => ({
2 |   todosListInfo: {
3 |     color: theme.$secondaryColor,
4 |     fontSize: 14,
5 |     textAlign: 'right'
6 |   }
7 | });


--------------------------------------------------------------------------------
/code/chapter-9/src/components/TodosListItem/TodosListItem.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import _ from 'lodash';
 3 | import PropTypes from 'prop-types';
 4 | import React from 'react';
 5 | import Radium from 'radium';
 6 | import { applyThemeWrap } from 'theme-wrap';
 7 | 
 8 | // local dependencies
 9 | import styles from './TodosListItem.styles';
10 | 
11 | export const TodosListItem = ({ pStyles, todo, twStyles, handleClick }) => (
12 |   <li
13 |     style={[
14 |       twStyles.todosListItem,
15 |       pStyles.todosListItem,
16 |       todo.completed && twStyles.completedTodosListItem,
17 |       todo.completed && pStyles.completedTodosListItem
18 |     ]}
19 |     onClick={handleClick(todo.id)}>
20 |     {todo.description}
21 |   </li>
22 | );
23 | 
24 | TodosListItem.defaultProps = {
25 |   todo: {},
26 |   toggleTodo: _.noop,
27 |   pStyles: {
28 |     todosListItem: {},
29 |     completedTodosListItem: {}
30 |   }
31 | };
32 | 
33 | TodosListItem.propTypes = {
34 |   handleClick: PropTypes.func,
35 |   todo: PropTypes.shape({
36 |     completed: PropTypes.boolean,
37 |     description: PropTypes.string,
38 |     id: PropTypes.number
39 |   }),
40 |   pStyles: PropTypes.shape({
41 |     todosListItem: PropTypes.object,
42 |     completedTodosListItem: PropTypes.object
43 |   })
44 | };
45 | 
46 | export default _.flow(
47 |   Radium,
48 |   applyThemeWrap(styles)
49 | )(TodosListItem);


--------------------------------------------------------------------------------
/code/chapter-9/src/components/TodosListItem/TodosListItem.spec.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/code/chapter-9/src/components/TodosListItem/TodosListItem.spec.js


--------------------------------------------------------------------------------
/code/chapter-9/src/components/TodosListItem/TodosListItem.styles.js:
--------------------------------------------------------------------------------
 1 | export default (theme, mixins) => ({
 2 |   todosListItem: {
 3 |     ...mixins.get('listItem'),
 4 |     border: `5px solid ${theme.$tertiaryColor}`,
 5 |   },
 6 | 
 7 |   completedTodosListItem: {
 8 |     ...mixins.get('listItem'),
 9 |     background: theme.$primaryColor,
10 |     border: `5px solid ${theme.$secondaryColor}`,
11 |     boxShadow: 'inset 0 1px 2px 0 rgba(0, 0, 0, 0.3)',
12 |     color: '#AAAAAA',
13 |     textDecoration: 'line-through',
14 |     top: 3
15 |   }
16 | });


--------------------------------------------------------------------------------
/code/chapter-9/src/index.js:
--------------------------------------------------------------------------------
 1 | // dependencies
 2 | import React from 'react';
 3 | import { render } from 'react-dom';
 4 | 
 5 | // local dependencies
 6 | import App from './components/App/App';
 7 | 
 8 | render(
 9 |   <App />,
10 |   document.getElementById('todos-app')
11 | );


--------------------------------------------------------------------------------
/code/chapter-9/src/styles/globals.styles.js:
--------------------------------------------------------------------------------
 1 | import theme from './theme';
 2 | 
 3 | export default {
 4 |   '*, *:before, *:after': {
 5 |     boxSizing: 'inherit'
 6 |   },
 7 |   html: {
 8 |     boxSizing: 'border-box'
 9 |   },
10 |   body: {
11 |     background: theme.$mainBackgroundColor,
12 |     fontSize: 10,
13 |     fontFamily: theme.$mainFontFamily,
14 |     margin: 0,
15 |     padding: 0
16 |   }
17 | }


--------------------------------------------------------------------------------
/code/chapter-9/src/styles/mixins.js:
--------------------------------------------------------------------------------
 1 | import { ThemeWrapMixin } from 'theme-wrap';
 2 | 
 3 | export default new ThemeWrapMixin()
 4 | .set('list', (theme) => ({
 5 |   listStyle: 'none',
 6 |   padding: '10px 15px',
 7 |   transition: 'all 0.5s ease',
 8 |   borderRadius: 5
 9 | }))
10 | 
11 | .set('listItem', (theme) => ({
12 |   background: theme.$lightGray,
13 |   borderRadius: 5,
14 |   boxShadow: '0 2px 1px 0 rgba(0, 0, 0, 0.2)',
15 |   color: theme.$darkGray,
16 |   cursor: 'pointer',
17 |   fontSize: '2rem',
18 |   padding: '15px 20px',
19 |   position: 'relative',
20 |   transition: 'all 0.2s ease',
21 |   ':hover': {
22 |     opacity: 0.8
23 |   }
24 | }))


--------------------------------------------------------------------------------
/code/chapter-9/src/styles/theme.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   $APP: 'todos-app',
 3 | 
 4 |   $mainBackgroundColor: '#F1F1F1',
 5 |   $mainFontFamily: 'Helvetica Neue, Arial, sans-serif',
 6 | 
 7 |   $lightGray: '#FAFAFA',
 8 |   $darkGray: '#888888',
 9 | 
10 |   $primaryColor: 'red',
11 |   $secondaryColor: 'green',
12 |   $tertiaryColor: 'blue',
13 | };


--------------------------------------------------------------------------------
/manuscript/Book.txt:
--------------------------------------------------------------------------------
 1 | profile.md
 2 | preface.md
 3 | chapter1.md
 4 | chapter2.md
 5 | chapter3.md
 6 | chapter4.md
 7 | chapter5.md
 8 | chapter6.md
 9 | chapter7.md
10 | chapter8.md
11 | chapter9.md
12 | chapter10.md
13 | chapter11.md


--------------------------------------------------------------------------------
/manuscript/chapter11.md:
--------------------------------------------------------------------------------
 1 | # Chapter 11: Looking Ahead {#Chapter-11}
 2 | 
 3 | Throughout this book, we covered several powerful U&I strategies. Are there other strategies not covered in this book? What does the current landscape look like?
 4 | 
 5 | There are many, many more! 
 6 | 
 7 | 
 8 | 
 9 | ## Explorations
10 | 
11 | We've covered many different strategies throughout this book, but the ecosystem for building scalable UI is new and continues to evolve quickly. Here are a few technologies to explore:
12 | 
13 | 
14 | 
15 | ### CSS Next
16 | 
17 | [CSS Next](http://cssnext.io/) allows for you to write "tomorrow's CSS syntax, today." CSS Next offers many of the same features  of a traditional CSS preprocessors, along with a few additional powerful capabilities. For example, variables, in CSS Next, can be changed via JavaScript? ***WHAAaaaAATT?*** That's right! We can change our CSS variables in JavaScript. This [example](https://codepen.io/wesbos/pen/adQjoY), by [Wes Bos](https://twitter.com/wesbos), does a great job showcasing this feature.
18 | 
19 | This is an exciting feature, because we can share constants between JavaScript and CSS. I look forward to CSS Next becoming widely supported so that I can deprecate `theme-wrap` :)
20 | 
21 | 
22 | 
23 | ### CSS in JS
24 | 
25 | Writing your CSS in JavaScript seems to be the most promising strategy and it continues to be one of the quickest evolving amongst styling strategies. Instead of outlining all the various CSS in JS implementations, I recommend investigating them in this informative [repo](https://github.com/MicheleBertoli/css-in-js).
26 | 
27 | 
28 | 
29 | ### Hardware Accelerated UI
30 | 
31 | Lastly, we don't necessarily need to tie all of our components to DOM. We could leverage `canvas` and, better yet, leverage the GPU with WebGL. If you're looking to build a highly interactive and immersive interface, you may want to look at these libraries: [A-Frame](https://aframe.io/), [React Three Renderer](https://github.com/toxicFork/react-three-renderer), etc.
32 | 
33 | 
34 | 
35 | 
36 | ## Conclusion
37 | 
38 | Thank you for taking the time to go through this book. I hope that it has been both informative and useful for the next time that you decide to build an application. Lastly, we've covered many strategies in this book, but haven't had the chance to step back and determine their practical applications. As a rule of thumb, when I approach UI projects, I ask the following set of questions:
39 | 
40 | - Are the other front end developers on the team mostly comfortable with CSS or a CSS preprocessor?
41 | - How large is the web application?
42 | - Is SEO important? If so, does squeezing every bit of improvement necessary?
43 | - Does the application need to be highly interactive and customizable?
44 | - Do we serve up different applications for different interfaces or are we relying on a single responsive application?
45 | 
46 | Whatever strategy you decide to use, whether it's Sass, BEM, CSS Modules, Inline Styles, CSS in JS, etc.,  there is no substitute for a well defined architecture.
47 | 
48 | If you have any questions or feedback, please refer to the [repository](https://github.com/FarhadG/ui-react) or contact me [directly](#Profile).
49 | 
50 | Thank you!


--------------------------------------------------------------------------------
/manuscript/images/app-layout.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/manuscript/images/app-layout.jpg


--------------------------------------------------------------------------------
/manuscript/images/app-layout2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/manuscript/images/app-layout2.jpg


--------------------------------------------------------------------------------
/manuscript/images/babel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/manuscript/images/babel.png


--------------------------------------------------------------------------------
/manuscript/images/batman-important-css.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/manuscript/images/batman-important-css.jpeg


--------------------------------------------------------------------------------
/manuscript/images/book-cover-long.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/manuscript/images/book-cover-long.jpg


--------------------------------------------------------------------------------
/manuscript/images/book-cover-preview.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/manuscript/images/book-cover-preview.jpg


--------------------------------------------------------------------------------
/manuscript/images/book-cover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/manuscript/images/book-cover.jpg


--------------------------------------------------------------------------------
/manuscript/images/chedeau-commandments.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/manuscript/images/chedeau-commandments.jpeg


--------------------------------------------------------------------------------
/manuscript/images/eslint.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/manuscript/images/eslint.png


--------------------------------------------------------------------------------
/manuscript/images/hello-world.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/manuscript/images/hello-world.png


--------------------------------------------------------------------------------
/manuscript/images/jsx.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/manuscript/images/jsx.png


--------------------------------------------------------------------------------
/manuscript/images/starter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/manuscript/images/starter.png


--------------------------------------------------------------------------------
/manuscript/images/storybook.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/manuscript/images/storybook.png


--------------------------------------------------------------------------------
/manuscript/images/tasks-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/manuscript/images/tasks-1.png


--------------------------------------------------------------------------------
/manuscript/images/tasks-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/manuscript/images/tasks-2.png


--------------------------------------------------------------------------------
/manuscript/images/tasks-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/manuscript/images/tasks-3.png


--------------------------------------------------------------------------------
/manuscript/images/tasks-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/manuscript/images/tasks-4.png


--------------------------------------------------------------------------------
/manuscript/images/tasks-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/manuscript/images/tasks-5.png


--------------------------------------------------------------------------------
/manuscript/images/tasks-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/manuscript/images/tasks-6.png


--------------------------------------------------------------------------------
/manuscript/images/tasks-7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/manuscript/images/tasks-7.png


--------------------------------------------------------------------------------
/manuscript/images/unidirectional-styles.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/manuscript/images/unidirectional-styles.jpg


--------------------------------------------------------------------------------
/manuscript/images/webpack.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FarhadG/ui-react/04483f3a0501f99bec330febffe628f0da349651/manuscript/images/webpack.png


--------------------------------------------------------------------------------
/manuscript/profile.md:
--------------------------------------------------------------------------------
 1 | # Profile {#Profile}
 2 | 
 3 | **Author:** Farhad Ghayour
 4 | 
 5 | 
 6 | 
 7 | 
 8 | ## About the Author
 9 | 
10 | Farhad Ghayour is a technology consultant based out of San Francisco, CA, where he helps transform Fortune 500 companies worldwide. Previously, he was a platform engineer at Famo.us building a 3D WebGL rendering engine and a lead software engineer at various innovative startups around the world. He is passionate about all things philosophy, math, code and design --- and every so often you can find him in the high horsepower auto scene.
11 | 
12 | 
13 | 
14 | ## Contact Details
15 | 
16 | - Email: [me@farhadg.com](mailto:me@farhadg.com)
17 | - Twitter: [@farhadg_com](http://www.twitter.com/farhadg_com)
18 | - GitHub: [github.com/farhadg](http://www.github.com/farhadg)
19 | - LinkedIn: [linkedin.com/in/farhadg](https://www.linkedin.com/in/farhadg)
20 | - Website: [farhadg.com](http://www.farhadg.com)
21 | 
22 | 


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