├── .eslintrc
├── .gitignore
├── README.md
├── config
    ├── env.js
    ├── jest
    │   ├── cssTransform.js
    │   └── fileTransform.js
    ├── paths.js
    ├── polyfills.js
    ├── webpack.config.dev.js
    └── webpack.config.generate.js
├── example
    └── invoice.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── scripts
    ├── build.js
    ├── start.js
    └── test.js
├── server
    ├── createPDF.js
    └── template.html
└── src
    ├── Invoice.css
    ├── Invoice.js
    ├── elements
        ├── Address
        │   ├── Address.css
        │   ├── Address.js
        │   └── Block.js
        ├── Header
        │   ├── Header.css
        │   ├── Header.js
        │   └── logo.png
        └── List
        │   ├── List.css
        │   └── List.js
    ├── global.css
    ├── index.js
    └── vendor
        └── normalize.css


/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |  "extends": "react-app"
3 | }
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 | # generated output
10 | /build
11 | 
12 | # compiled files
13 | /lib
14 | 
15 | # ignore the yarn lockfile as this is a demo repository
16 | yarn.lock
17 | 
18 | # misc
19 | .DS_Store
20 | .env
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 
25 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # This project is no longer being maintained
 2 | 
 3 | 
 4 | ---
 5 | # Generating PDFs with React
 6 | This is an example project you can use to generate PDFs with React. Start by checking the related talk slides [here](http://bit.ly/react-emails-pdf).
 7 | 
 8 | >  If you want to generate emails using React, check the [react-emails](https://github.com/lang-ai/react-emails) repo.
 9 | 
10 | ### Example
11 | 
12 | To provide an example as starting point, this project generates a demo invoice.
13 | 
14 | To generate the example:
15 | 
16 | ```
17 | $ npm install
18 | $ npm run build
19 | $ node example/invoice.js
20 | ```
21 | 
22 | The result PDF will be saved in the `/build/` directory. Here is how it looks like:
23 | 
24 | ![PDF Preview](https://s3-eu-west-1.amazonaws.com/langai-public/github/invoice.png)
25 | 
26 | 
27 | ### Development
28 | 
29 | This project was bootstrapped with [Create React App][react-create-app].
30 |  See the development guide [here][react-create-app-guide].
31 | 
32 | 
33 | ### Creating the PDF
34 | 
35 | To create the PDF, simply import the function (you may want to use it as a module) and call it with the
36 | data. It returns a promise that resolves when the generated PDF path.
37 | 
38 | ```js
39 | // In case you use it as a module
40 | // const createPDF = require('react-pdfs-example');
41 | 
42 | const createPDF = require('../server/createPDF');
43 | 
44 | const data = { 
45 |   date: new Date().toISOString(),
46 |   number: 32149,
47 |     recipient: {
48 |     displayName: 'John White',
49 |     addressLine: 'CEO at Carddesign.con\nLondon, United Kingdom',
50 |   },
51 |   // more data...
52 | };
53 | 
54 | createPDF(data)
55 |   .then((path) => {
56 |     // PDF has been generated with the config from the function
57 |     // generatePDF() inside server/createPDF.js.
58 |     // Returns the generated PDF path.
59 |   });
60 | ```
61 | 
62 | - - - - - - - - - -
63 | 
64 | [![LangAI](https://s3-eu-west-1.amazonaws.com/langai-public/github/logo-small.png)][langai]
65 | 
66 | **Built with ❤️ by Lang.ai**
67 | 
68 |  [langai]: https://building.lang.ai/
69 |  [react-create-app]: https://github.com/facebookincubator/create-react-app
70 |  [react-create-app-guide]: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md
71 | 
72 | 


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
 4 | // injected into the application via DefinePlugin in Webpack configuration.
 5 | 
 6 | var REACT_APP = /^REACT_APP_/i;
 7 | 
 8 | function getClientEnvironment(publicUrl) {
 9 |   var raw = Object
10 |     .keys(process.env)
11 |     .filter(key => REACT_APP.test(key))
12 |     .reduce((env, key) => {
13 |       env[key] = process.env[key];
14 |       return env;
15 |     }, {
16 |       // Useful for determining whether we’re running in production mode.
17 |       // Most importantly, it switches React into the correct mode.
18 |       'NODE_ENV': process.env.NODE_ENV || 'development',
19 |       // Useful for resolving the correct path to static assets in `public`.
20 |       // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
21 |       // This should only be used as an escape hatch. Normally you would put
22 |       // images into the `src` and `import` them in code to get their paths.
23 |       'PUBLIC_URL': publicUrl
24 |     });
25 |   // Stringify all values so we can feed into Webpack DefinePlugin
26 |   var stringified = {
27 |     'process.env': Object
28 |       .keys(raw)
29 |       .reduce((env, key) => {
30 |         env[key] = JSON.stringify(raw[key]);
31 |         return env;
32 |       }, {})
33 |   };
34 | 
35 |   return { raw, stringified };
36 | }
37 | 
38 | module.exports = getClientEnvironment;
39 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var path = require('path');
 4 | var fs = require('fs');
 5 | var 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 | var appDirectory = fs.realpathSync(process.cwd());
10 | function resolveApp(relativePath) {
11 |   return path.resolve(appDirectory, relativePath);
12 | }
13 | 
14 | // We support resolving modules according to `NODE_PATH`.
15 | // This lets you use absolute paths in imports inside large monorepos:
16 | // https://github.com/facebookincubator/create-react-app/issues/253.
17 | 
18 | // It works similar to `NODE_PATH` in Node itself:
19 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
20 | 
21 | // We will export `nodePaths` as an array of absolute paths.
22 | // It will then be used by Webpack configs.
23 | // Jest doesn’t need this because it already handles `NODE_PATH` out of the box.
24 | 
25 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
26 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
27 | // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
28 | 
29 | var nodePaths = (process.env.NODE_PATH || '')
30 |   .split(process.platform === 'win32' ? ';' : ':')
31 |   .filter(Boolean)
32 |   .filter(folder => !path.isAbsolute(folder))
33 |   .map(resolveApp);
34 | 
35 | var envPublicUrl = process.env.PUBLIC_URL;
36 | 
37 | function ensureSlash(path, needsSlash) {
38 |   var hasSlash = path.endsWith('/');
39 |   if (hasSlash && !needsSlash) {
40 |     return path.substr(path, path.length - 1);
41 |   } else if (!hasSlash && needsSlash) {
42 |     return path + '/';
43 |   } else {
44 |     return path;
45 |   }
46 | }
47 | 
48 | function getPublicUrl(appPackageJson) {
49 |   return envPublicUrl || require(appPackageJson).homepage;
50 | }
51 | 
52 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
53 | // "public path" at which the app is served.
54 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
55 | // single-page apps that may serve index.html for nested URLs like /todos/42.
56 | // We can't use a relative path in HTML because we don't want to load something
57 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
58 | function getServedPath(appPackageJson) {
59 |   var publicUrl = getPublicUrl(appPackageJson);
60 |   var servedUrl = envPublicUrl || (
61 |     publicUrl ? url.parse(publicUrl).pathname : '/'
62 |   );
63 |   return ensureSlash(servedUrl, true);
64 | }
65 | 
66 | // config after eject: we're in ./config/
67 | module.exports = {
68 |   appBuild: resolveApp('lib'),
69 |   appPublic: resolveApp('public'),
70 |   appHtml: resolveApp('public/index.html'),
71 |   appIndexJs: resolveApp('src/index.js'),
72 |   appMainJs: resolveApp('src/Invoice.js'),
73 |   appPackageJson: resolveApp('package.json'),
74 |   appSrc: resolveApp('src'),
75 |   yarnLockFile: resolveApp('yarn.lock'),
76 |   testsSetup: resolveApp('src/setupTests.js'),
77 |   appNodeModules: resolveApp('node_modules'),
78 |   nodePaths: nodePaths,
79 |   publicUrl: getPublicUrl(resolveApp('package.json')),
80 |   servedPath: getServedPath(resolveApp('package.json'))
81 | };
82 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/config/webpack.config.dev.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | var autoprefixer = require('autoprefixer');
  4 | var webpack = require('webpack');
  5 | var HtmlWebpackPlugin = require('html-webpack-plugin');
  6 | var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
  7 | var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
  8 | var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
  9 | var getClientEnvironment = require('./env');
 10 | var paths = require('./paths');
 11 | 
 12 | 
 13 | 
 14 | // Webpack uses `publicPath` to determine where the app is being served from.
 15 | // In development, we always serve from the root. This makes config easier.
 16 | var publicPath = '/';
 17 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 18 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 19 | // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
 20 | var publicUrl = '';
 21 | // Get environment variables to inject into our app.
 22 | var env = getClientEnvironment(publicUrl);
 23 | 
 24 | // This is the development configuration.
 25 | // It is focused on developer experience and fast rebuilds.
 26 | // The production configuration is different and lives in a separate file.
 27 | module.exports = {
 28 |   // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
 29 |   // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
 30 |   devtool: 'cheap-module-source-map',
 31 |   // These are the "entry points" to our application.
 32 |   // This means they will be the "root" imports that are included in JS bundle.
 33 |   // The first two entry points enable "hot" CSS and auto-refreshes for JS.
 34 |   entry: [
 35 |     // Include an alternative client for WebpackDevServer. A client's job is to
 36 |     // connect to WebpackDevServer by a socket and get notified about changes.
 37 |     // When you save a file, the client will either apply hot updates (in case
 38 |     // of CSS changes), or refresh the page (in case of JS changes). When you
 39 |     // make a syntax error, this client will display a syntax error overlay.
 40 |     // Note: instead of the default WebpackDevServer client, we use a custom one
 41 |     // to bring better experience for Create React App users. You can replace
 42 |     // the line below with these two lines if you prefer the stock client:
 43 |     // require.resolve('webpack-dev-server/client') + '?/',
 44 |     // require.resolve('webpack/hot/dev-server'),
 45 |     require.resolve('react-dev-utils/webpackHotDevClient'),
 46 |     // We ship a few polyfills by default:
 47 |     require.resolve('./polyfills'),
 48 |     // Finally, this is your app's code:
 49 |     paths.appIndexJs
 50 |     // We include the app code last so that if there is a runtime error during
 51 |     // initialization, it doesn't blow up the WebpackDevServer client, and
 52 |     // changing JS code would still trigger a refresh.
 53 |   ],
 54 |   output: {
 55 |     // Next line is not used in dev but WebpackDevServer crashes without it:
 56 |     path: paths.appBuild,
 57 |     // Add /* filename */ comments to generated require()s in the output.
 58 |     pathinfo: true,
 59 |     // This does not produce a real file. It's just the virtual path that is
 60 |     // served by WebpackDevServer in development. This is the JS bundle
 61 |     // containing code from all our entry points, and the Webpack runtime.
 62 |     filename: 'static/js/bundle.js',
 63 |     // This is the URL that app is served from. We use "/" in development.
 64 |     publicPath: publicPath
 65 |   },
 66 |   resolve: {
 67 |     // This allows you to set a fallback for where Webpack should look for modules.
 68 |     // We read `NODE_PATH` environment variable in `paths.js` and pass paths here.
 69 |     // We use `fallback` instead of `root` because we want `node_modules` to "win"
 70 |     // if there any conflicts. This matches Node resolution mechanism.
 71 |     // https://github.com/facebookincubator/create-react-app/issues/253
 72 |     fallback: paths.nodePaths,
 73 |     // These are the reasonable defaults supported by the Node ecosystem.
 74 |     // We also include JSX as a common component filename extension to support
 75 |     // some tools, although we do not recommend using it, see:
 76 |     // https://github.com/facebookincubator/create-react-app/issues/290
 77 |     extensions: ['.js', '.json', '.jsx', ''],
 78 |     alias: {
 79 |       // Support React Native Web
 80 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 81 |       'react-native': 'react-native-web'
 82 |     }
 83 |   },
 84 | 
 85 |   module: {
 86 |     // First, run the linter.
 87 |     // It's important to do this before Babel processes the JS.
 88 |     preLoaders: [
 89 |       {
 90 |         test: /\.(js|jsx)$/,
 91 |         loader: 'eslint',
 92 |         include: paths.appSrc,
 93 |       }
 94 |     ],
 95 |     loaders: [
 96 |       // ** ADDING/UPDATING LOADERS **
 97 |       // The "url" loader handles all assets unless explicitly excluded.
 98 |       // The `exclude` list *must* be updated with every change to loader extensions.
 99 |       // When adding a new loader, you must add its `test`
100 |       // as a new entry in the `exclude` list for "url" loader.
101 | 
102 |       // "url" loader embeds assets smaller than specified size as data URLs to avoid requests.
103 |       // Otherwise, it acts like the "file" loader.
104 |       {
105 |         exclude: [
106 |           /\.html$/,
107 |           // We have to write /\.(js|jsx)(\?.*)?$/ rather than just /\.(js|jsx)$/
108 |           // because you might change the hot reloading server from the custom one
109 |           // to Webpack's built-in webpack-dev-server/client?/, which would not
110 |           // get properly excluded by /\.(js|jsx)$/ because of the query string.
111 |           // Webpack 2 fixes this, but for now we include this hack.
112 |           // https://github.com/facebookincubator/create-react-app/issues/1713
113 |           /\.(js|jsx)(\?.*)?$/,
114 |           /\.css$/,
115 |           /\.json$/,
116 |           /\.svg$/
117 |         ],
118 |         loader: 'url',
119 |         query: {
120 |           limit: 10000,
121 |           name: 'static/media/[name].[hash:8].[ext]'
122 |         }
123 |       },
124 |       // Process JS with Babel.
125 |       {
126 |         test: /\.(js|jsx)$/,
127 |         include: paths.appSrc,
128 |         loader: 'babel',
129 |         query: {
130 | 
131 |           // This is a feature of `babel-loader` for webpack (not Babel itself).
132 |           // It enables caching results in ./node_modules/.cache/babel-loader/
133 |           // directory for faster rebuilds.
134 |           cacheDirectory: true
135 |         }
136 |       },
137 |       // "postcss" loader applies autoprefixer to our CSS.
138 |       // "css" loader resolves paths in CSS and adds assets as dependencies.
139 |       // "style" loader turns CSS into JS modules that inject <style> tags.
140 |       // In production, we use a plugin to extract that CSS to a file, but
141 |       // in development "style" loader enables hot editing of CSS.
142 |       {
143 |         test: /\.css$/,
144 |         loader: 'style!css?importLoaders=1!postcss'
145 |       },
146 |       // JSON is not enabled by default in Webpack but both Node and Browserify
147 |       // allow it implicitly so we also enable it.
148 |       {
149 |         test: /\.json$/,
150 |         loader: 'json'
151 |       },
152 |       // "file" loader for svg
153 |       {
154 |         test: /\.svg$/,
155 |         loader: 'file',
156 |         query: {
157 |           name: 'static/media/[name].[hash:8].[ext]'
158 |         }
159 |       }
160 |       // ** STOP ** Are you adding a new loader?
161 |       // Remember to add the new extension(s) to the "url" loader exclusion list.
162 |     ]
163 |   },
164 | 
165 |   // We use PostCSS for autoprefixing only.
166 |   postcss: function() {
167 |     return [
168 |       autoprefixer({
169 |         browsers: [
170 |           '>1%',
171 |           'last 4 versions',
172 |           'Firefox ESR',
173 |           'not ie < 9', // React doesn't support IE8 anyway
174 |         ]
175 |       }),
176 |     ];
177 |   },
178 |   plugins: [
179 |     // Makes some environment variables available in index.html.
180 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
181 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
182 |     // In development, this will be an empty string.
183 |     new InterpolateHtmlPlugin(env.raw),
184 |     // Generates an `index.html` file with the <script> injected.
185 |     new HtmlWebpackPlugin({
186 |       inject: true,
187 |       template: paths.appHtml,
188 |     }),
189 |     // Makes some environment variables available to the JS code, for example:
190 |     // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
191 |     new webpack.DefinePlugin(env.stringified),
192 |     // This is necessary to emit hot updates (currently CSS only):
193 |     new webpack.HotModuleReplacementPlugin(),
194 |     // Watcher doesn't work well if you mistype casing in a path so we use
195 |     // a plugin that prints an error when you attempt to do this.
196 |     // See https://github.com/facebookincubator/create-react-app/issues/240
197 |     new CaseSensitivePathsPlugin(),
198 |     // If you require a missing module and then `npm install` it, you still have
199 |     // to restart the development server for Webpack to discover it. This plugin
200 |     // makes the discovery automatic so you don't have to restart.
201 |     // See https://github.com/facebookincubator/create-react-app/issues/186
202 |     new WatchMissingNodeModulesPlugin(paths.appNodeModules)
203 |   ],
204 |   // Some libraries import Node modules but don't use them in the browser.
205 |   // Tell Webpack to provide empty mocks for them so importing them works.
206 |   node: {
207 |     fs: 'empty',
208 |     net: 'empty',
209 |     tls: 'empty'
210 |   }
211 | };
212 | 


--------------------------------------------------------------------------------
/config/webpack.config.generate.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | var autoprefixer = require('autoprefixer');
  4 | var webpack = require('webpack');
  5 | var HtmlWebpackPlugin = require('html-webpack-plugin');
  6 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
  7 | var ManifestPlugin = require('webpack-manifest-plugin');
  8 | var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
  9 | var paths = require('./paths');
 10 | var getClientEnvironment = require('./env');
 11 | 
 12 | 
 13 | 
 14 | // Webpack uses `publicPath` to determine where the app is being served from.
 15 | // It requires a trailing slash, or the file assets will get an incorrect path.
 16 | var publicPath = paths.servedPath;
 17 | // Some apps do not use client-side routing with pushState.
 18 | // For these, "homepage" can be set to "." to enable relative asset paths.
 19 | var shouldUseRelativeAssetPaths = publicPath === './';
 20 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 21 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 22 | // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 23 | var publicUrl = publicPath.slice(0, -1);
 24 | // Get environment variables to inject into our app.
 25 | var env = getClientEnvironment(publicUrl);
 26 | 
 27 | // Assert this just to be safe.
 28 | // Development builds of React are slow and not intended for production.
 29 | if (env.stringified['process.env'].NODE_ENV !== '"production"') {
 30 |   throw new Error('Production builds must have NODE_ENV=production.');
 31 | }
 32 | 
 33 | // Note: defined here because it will be used more than once.
 34 | const cssFilename = 'static/css/[name].[contenthash:8].css';
 35 | 
 36 | // ExtractTextPlugin expects the build output to be flat.
 37 | // (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
 38 | // However, our output is structured with css, js and media folders.
 39 | // To have this structure working with relative paths, we have to use custom options.
 40 | const extractTextPluginOptions = shouldUseRelativeAssetPaths
 41 |   // Making sure that the publicPath goes back to to build folder.
 42 |   ? { publicPath: Array(cssFilename.split('/').length).join('../') }
 43 |   : undefined;
 44 | 
 45 | // This is the production configuration.
 46 | // It compiles slowly and is focused on producing a fast and minimal bundle.
 47 | // The development configuration is different and lives in a separate file.
 48 | module.exports = {
 49 |   // Don't attempt to continue if there are any errors.
 50 |   bail: true,
 51 |   // We generate sourcemaps in production. This is slow but gives good results.
 52 |   // You can exclude the *.map files from the build during deployment.
 53 |   devtool: 'source-map',
 54 |   // In production, we only want to load the polyfills and the app code.
 55 |   entry: [
 56 |     require.resolve('./polyfills'),
 57 |     paths.appMainJs
 58 |   ],
 59 |   output: {
 60 |     // The build folder.
 61 |     path: paths.appBuild,
 62 |     // Generated JS file names (with nested folders).
 63 |     // There will be one main bundle, and one file per asynchronous chunk.
 64 |     // We don't currently advertise code splitting but Webpack supports it.
 65 |     filename: 'static/js/[name].[chunkhash:8].js',
 66 |     chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
 67 |     // We inferred the "public path" (such as / or /my-project) from homepage.
 68 |     publicPath: publicPath,
 69 |     // We build the file as a library
 70 |     library: 'reactApp',
 71 |     libraryTarget: 'commonjs2',
 72 |   },
 73 |   resolve: {
 74 |     // This allows you to set a fallback for where Webpack should look for modules.
 75 |     // We read `NODE_PATH` environment variable in `paths.js` and pass paths here.
 76 |     // We use `fallback` instead of `root` because we want `node_modules` to "win"
 77 |     // if there any conflicts. This matches Node resolution mechanism.
 78 |     // https://github.com/facebookincubator/create-react-app/issues/253
 79 |     fallback: paths.nodePaths,
 80 |     // These are the reasonable defaults supported by the Node ecosystem.
 81 |     // We also include JSX as a common component filename extension to support
 82 |     // some tools, although we do not recommend using it, see:
 83 |     // https://github.com/facebookincubator/create-react-app/issues/290
 84 |     extensions: ['.js', '.json', '.jsx', ''],
 85 |     alias: {
 86 |       // Support React Native Web
 87 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 88 |       'react-native': 'react-native-web'
 89 |     }
 90 |   },
 91 | 
 92 |   module: {
 93 |     // First, run the linter.
 94 |     // It's important to do this before Babel processes the JS.
 95 |     preLoaders: [
 96 |       {
 97 |         test: /\.(js|jsx)$/,
 98 |         loader: 'eslint',
 99 |         include: paths.appSrc
100 |       }
101 |     ],
102 |     loaders: [
103 |       // ** ADDING/UPDATING LOADERS **
104 |       // The "url" loader handles all assets unless explicitly excluded.
105 |       // The `exclude` list *must* be updated with every change to loader extensions.
106 |       // When adding a new loader, you must add its `test`
107 |       // as a new entry in the `exclude` list in the "url" loader.
108 | 
109 |       // "url" loader embeds assets smaller than specified size as data URLs to avoid requests.
110 |       // Otherwise, it acts like the "file" loader.
111 |       {
112 |         exclude: [
113 |           /\.html$/,
114 |           /\.(js|jsx)$/,
115 |           /\.css$/,
116 |           /\.json$/,
117 |           /\.svg$/
118 |         ],
119 |         loader: 'url',
120 |       },
121 |       // Process JS with Babel.
122 |       {
123 |         test: /\.(js|jsx)$/,
124 |         include: paths.appSrc,
125 |         loader: 'babel',
126 | 
127 |       },
128 |       // The notation here is somewhat confusing.
129 |       // "postcss" loader applies autoprefixer to our CSS.
130 |       // "css" loader resolves paths in CSS and adds assets as dependencies.
131 |       // "style" loader normally turns CSS into JS modules injecting <style>,
132 |       // but unlike in development configuration, we do something different.
133 |       // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
134 |       // (second argument), then grabs the result CSS and puts it into a
135 |       // separate file in our build process. This way we actually ship
136 |       // a single CSS file in production instead of JS code injecting <style>
137 |       // tags. If you use code splitting, however, any async bundles will still
138 |       // use the "style" loader inside the async code so CSS from them won't be
139 |       // in the main CSS file.
140 |       {
141 |         test: /\.css$/,
142 |         loader: ExtractTextPlugin.extract(
143 |           'style',
144 |           'css?importLoaders=1!postcss',
145 |           extractTextPluginOptions
146 |         )
147 |         // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
148 |       },
149 |       // JSON is not enabled by default in Webpack but both Node and Browserify
150 |       // allow it implicitly so we also enable it.
151 |       {
152 |         test: /\.json$/,
153 |         loader: 'json'
154 |       },
155 |       // "file" loader for svg
156 |       {
157 |         test: /\.svg$/,
158 |         loader: 'file',
159 |         query: {
160 |           name: 'static/media/[name].[hash:8].[ext]'
161 |         }
162 |       }
163 |       // ** STOP ** Are you adding a new loader?
164 |       // Remember to add the new extension(s) to the "url" loader exclusion list.
165 |     ]
166 |   },
167 | 
168 |   // We use PostCSS for autoprefixing only.
169 |   postcss: function() {
170 |     return [
171 |       autoprefixer({
172 |         browsers: [
173 |           '>1%',
174 |           'last 4 versions',
175 |           'Firefox ESR',
176 |           'not ie < 9', // React doesn't support IE8 anyway
177 |         ]
178 |       }),
179 |     ];
180 |   },
181 |   plugins: [
182 |     // Makes some environment variables available to the JS code, for example:
183 |     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
184 |     // It is absolutely essential that NODE_ENV was set to production here.
185 |     // Otherwise React will be compiled in the very slow development mode.
186 |     new webpack.DefinePlugin(env.stringified),
187 |     // This helps ensure the builds are consistent if source hasn't changed:
188 |     new webpack.optimize.OccurrenceOrderPlugin(),
189 |     // Try to dedupe duplicated modules, if any:
190 |     new webpack.optimize.DedupePlugin(),
191 |     // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
192 |     new ExtractTextPlugin(cssFilename),
193 |     // Generate a manifest file which contains a mapping of all asset filenames
194 |     // to their corresponding output file so that tools can pick it up without
195 |     // having to parse `index.html`.
196 |     new ManifestPlugin({
197 |       fileName: 'asset-manifest.json'
198 |     })
199 |   ],
200 | };
201 | 


--------------------------------------------------------------------------------
/example/invoice.js:
--------------------------------------------------------------------------------
 1 | const createPDF = require('../server/createPDF');
 2 | 
 3 | createPDF({
 4 |   date: new Date().toISOString(),
 5 |   number: 32149,
 6 |   recipient: {
 7 |     displayName: 'John White',
 8 |     addressLine: 'CEO at Carddesign.con\nLondon, United Kingdom',
 9 |   },
10 |   emitter: {
11 |     displayName: 'Awesome & Co',
12 |     addressLine: 'Weather forecasting\nLondon, United Kingdom',
13 |   },
14 |   list: [
15 |     {
16 |       name: 'Daily weather report',
17 |       quantity: 34,
18 |       unitPrice: 320,
19 |     },
20 |     {
21 |       name: 'Email delivery service',
22 |       quantity: 34,
23 |       unitPrice: 15,
24 |     },
25 |     {
26 |       name: 'Weather report custom design setup',
27 |       quantity: 1,
28 |       unitPrice: 98000,
29 |     },
30 |   ],
31 |   tax: 0.23,
32 | })
33 |   .then(out => console.log(out))
34 |   .catch((err) => {
35 |     console.error(err);
36 |     process.exit(1);
37 |   });
38 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-pdf-example",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "devDependencies": {
 6 |     "autoprefixer": "6.7.2",
 7 |     "babel-cli": "^6.24.1",
 8 |     "babel-core": "6.22.1",
 9 |     "babel-eslint": "7.1.1",
10 |     "babel-jest": "18.0.0",
11 |     "babel-loader": "6.2.10",
12 |     "babel-preset-react-app": "^2.2.0",
13 |     "babel-runtime": "^6.20.0",
14 |     "case-sensitive-paths-webpack-plugin": "1.1.4",
15 |     "chalk": "1.1.3",
16 |     "connect-history-api-fallback": "1.3.0",
17 |     "cross-spawn": "4.0.2",
18 |     "css-loader": "0.26.1",
19 |     "detect-port": "1.1.0",
20 |     "dotenv": "2.0.0",
21 |     "eslint": "4.18.2",
22 |     "eslint-config-react-app": "^0.6.2",
23 |     "eslint-loader": "1.6.0",
24 |     "eslint-plugin-flowtype": "2.21.0",
25 |     "eslint-plugin-import": "2.0.1",
26 |     "eslint-plugin-jsx-a11y": "4.0.0",
27 |     "eslint-plugin-react": "6.4.1",
28 |     "extract-text-webpack-plugin": "1.0.1",
29 |     "file-loader": "0.10.0",
30 |     "fs-extra": "0.30.0",
31 |     "html-webpack-plugin": "2.24.0",
32 |     "http-proxy-middleware": "0.17.3",
33 |     "jest": "^22.0.4",
34 |     "json-loader": "0.5.4",
35 |     "object-assign": "4.1.1",
36 |     "postcss-loader": "1.2.2",
37 |     "promise": "7.1.1",
38 |     "react-dev-utils": "^0.5.2",
39 |     "style-loader": "0.13.1",
40 |     "url-loader": "0.5.7",
41 |     "webpack": "1.14.0",
42 |     "webpack-dev-server": "1.16.2",
43 |     "webpack-manifest-plugin": "1.1.0",
44 |     "whatwg-fetch": "2.0.2"
45 |   },
46 |   "dependencies": {
47 |     "date-fns": "^1.28.4",
48 |     "react": "^16.2.0",
49 |     "react-dom": "^16.2.0"
50 |   },
51 |   "scripts": {
52 |     "start": "node scripts/start.js",
53 |     "build": "node scripts/build.js",
54 |     "install": "node scripts/build.js",
55 |     "test": "node scripts/test.js --env=jsdom"
56 |   },
57 |   "jest": {
58 |     "collectCoverageFrom": [
59 |       "src/**/*.{js,jsx}"
60 |     ],
61 |     "setupFiles": [
62 |       "<rootDir>/config/polyfills.js"
63 |     ],
64 |     "testPathIgnorePatterns": [
65 |       "<rootDir>[/\\\\](build|docs|node_modules|scripts)[/\\\\]"
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 |   },
81 |   "babel": {
82 |     "presets": [
83 |       "react-app"
84 |     ]
85 |   },
86 |   "eslintConfig": {
87 |     "extends": "react-app"
88 |   }
89 | }
90 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lang-ai/react-pdfs/c2d8a60b075bb410e5386d2a9f5a5dade418f383/public/favicon.ico


--------------------------------------------------------------------------------
/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">
 6 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
 7 |     <!--
 8 |       Notice the use of %PUBLIC_URL% in the tag above.
 9 |       It will be replaced with the URL of the `public` folder during the build.
10 |       Only files inside the `public` folder can be referenced from the HTML.
11 | 
12 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
13 |       work correctly both with client-side routing and a non-root public URL.
14 |       Learn how to configure a non-root public URL by running `npm run build`.
15 |     -->
16 |     <title>React App</title>
17 |   </head>
18 |   <body>
19 |     <div id="root"></div>
20 |     <!--
21 |       This HTML file is a template.
22 |       If you open it directly in the browser, you will see an empty page.
23 | 
24 |       You can add webfonts, meta tags, or analytics to this file.
25 |       The build step will place the bundled scripts into the <body> tag.
26 | 
27 |       To begin the development, run `npm start`.
28 |       To create a production bundle, use `npm run build`.
29 |     -->
30 |   </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/scripts/build.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.NODE_ENV = 'production';
 5 | 
 6 | // Load environment variables from .env file. Suppress warnings using silent
 7 | // if this file is missing. dotenv will never modify any environment variables
 8 | // that have already been set.
 9 | // https://github.com/motdotla/dotenv
10 | require('dotenv').config({silent: true});
11 | 
12 | var chalk = require('chalk');
13 | var fs = require('fs-extra');
14 | var webpack = require('webpack');
15 | var config = require('../config/webpack.config.generate');
16 | var paths = require('../config/paths');
17 | var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
18 | var FileSizeReporter = require('react-dev-utils/FileSizeReporter');
19 | var measureFileSizesBeforeBuild = FileSizeReporter.measureFileSizesBeforeBuild;
20 | 
21 | // Warn and crash if required files are missing
22 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
23 |   process.exit(1);
24 | }
25 | 
26 | // First, read the current file sizes in build directory.
27 | // This lets us display how much they changed later.
28 | measureFileSizesBeforeBuild(paths.appBuild).then(previousFileSizes => {
29 |   // Remove all content but keep the directory so that
30 |   // if you're in it, you don't end up in Trash
31 |   fs.emptyDirSync(paths.appBuild);
32 | 
33 |   // Start the webpack build
34 |   build(previousFileSizes);
35 | 
36 |   // Merge with the public folder
37 |   copyPublicFolder();
38 | });
39 | 
40 | // Print out errors
41 | function printErrors(summary, errors) {
42 |   console.log(chalk.red(summary));
43 |   console.log();
44 |   errors.forEach(err => {
45 |     console.log(err.message || err);
46 |     console.log();
47 |   });
48 | }
49 | 
50 | // Create the production build and print the deployment instructions.
51 | function build(previousFileSizes) {
52 |   console.log('Compiling the libraries files with Webpack...');
53 |   webpack(config).run((err, stats) => {
54 |     if (err) {
55 |       printErrors('Failed to compile.', [err]);
56 |       process.exit(1);
57 |     }
58 | 
59 |     if (stats.compilation.errors.length) {
60 |       printErrors('Failed to compile.', stats.compilation.errors);
61 |       process.exit(1);
62 |     }
63 | 
64 |     if (process.env.CI && stats.compilation.warnings.length) {
65 |      printErrors('Failed to compile. When process.env.CI = true, warnings are treated as failures. Most CI servers set this automatically.', stats.compilation.warnings);
66 |      process.exit(1);
67 |    }
68 | 
69 |     console.log(chalk.green('Compiled successfully.'));
70 |     console.log();
71 | 
72 |     console.log('The ' + chalk.cyan('./lib') + ' folder is compiled and ready.');
73 |     console.log('You can now run the "createPDF" function to generate the final PDF.');
74 |     console.log('Generate the example by running ' + chalk.green('node example/invoice.js'));
75 |     console.log();
76 |   });
77 | }
78 | 
79 | function copyPublicFolder() {
80 |   fs.copySync(paths.appPublic, paths.appBuild, {
81 |     dereference: true,
82 |     filter: file => file !== paths.appHtml
83 |   });
84 | }
85 | 


--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | process.env.NODE_ENV = 'development';
  4 | 
  5 | // Load environment variables from .env file. Suppress warnings using silent
  6 | // if this file is missing. dotenv will never modify any environment variables
  7 | // that have already been set.
  8 | // https://github.com/motdotla/dotenv
  9 | require('dotenv').config({silent: true});
 10 | 
 11 | var chalk = require('chalk');
 12 | var webpack = require('webpack');
 13 | var WebpackDevServer = require('webpack-dev-server');
 14 | var historyApiFallback = require('connect-history-api-fallback');
 15 | var httpProxyMiddleware = require('http-proxy-middleware');
 16 | var detect = require('detect-port');
 17 | var clearConsole = require('react-dev-utils/clearConsole');
 18 | var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 19 | var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 20 | var getProcessForPort = require('react-dev-utils/getProcessForPort');
 21 | var openBrowser = require('react-dev-utils/openBrowser');
 22 | var prompt = require('react-dev-utils/prompt');
 23 | var fs = require('fs');
 24 | var config = require('../config/webpack.config.dev');
 25 | var paths = require('../config/paths');
 26 | 
 27 | var useYarn = fs.existsSync(paths.yarnLockFile);
 28 | var cli = useYarn ? 'yarn' : 'npm';
 29 | var isInteractive = process.stdout.isTTY;
 30 | 
 31 | // Warn and crash if required files are missing
 32 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 33 |   process.exit(1);
 34 | }
 35 | 
 36 | // Tools like Cloud9 rely on this.
 37 | var DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
 38 | var compiler;
 39 | var handleCompile;
 40 | 
 41 | // You can safely remove this after ejecting.
 42 | // We only use this block for testing of Create React App itself:
 43 | var isSmokeTest = process.argv.some(arg => arg.indexOf('--smoke-test') > -1);
 44 | if (isSmokeTest) {
 45 |   handleCompile = function (err, stats) {
 46 |     if (err || stats.hasErrors() || stats.hasWarnings()) {
 47 |       process.exit(1);
 48 |     } else {
 49 |       process.exit(0);
 50 |     }
 51 |   };
 52 | }
 53 | 
 54 | function setupCompiler(host, port, protocol) {
 55 |   // "Compiler" is a low-level interface to Webpack.
 56 |   // It lets us listen to some events and provide our own custom messages.
 57 |   compiler = webpack(config, handleCompile);
 58 | 
 59 |   // "invalid" event fires when you have changed a file, and Webpack is
 60 |   // recompiling a bundle. WebpackDevServer takes care to pause serving the
 61 |   // bundle, so if you refresh, it'll wait instead of serving the old one.
 62 |   // "invalid" is short for "bundle invalidated", it doesn't imply any errors.
 63 |   compiler.plugin('invalid', function() {
 64 |     if (isInteractive) {
 65 |       clearConsole();
 66 |     }
 67 |     console.log('Compiling...');
 68 |   });
 69 | 
 70 |   var isFirstCompile = true;
 71 | 
 72 |   // "done" event fires when Webpack has finished recompiling the bundle.
 73 |   // Whether or not you have warnings or errors, you will get this event.
 74 |   compiler.plugin('done', function(stats) {
 75 |     if (isInteractive) {
 76 |       clearConsole();
 77 |     }
 78 | 
 79 |     // We have switched off the default Webpack output in WebpackDevServer
 80 |     // options so we are going to "massage" the warnings and errors and present
 81 |     // them in a readable focused way.
 82 |     var messages = formatWebpackMessages(stats.toJson({}, true));
 83 |     var isSuccessful = !messages.errors.length && !messages.warnings.length;
 84 |     var showInstructions = isSuccessful && (isInteractive || isFirstCompile);
 85 | 
 86 |     if (isSuccessful) {
 87 |       console.log(chalk.green('Compiled successfully!'));
 88 |     }
 89 | 
 90 |     if (showInstructions) {
 91 |       console.log();
 92 |       console.log('The app is running at:');
 93 |       console.log();
 94 |       console.log('  ' + chalk.cyan(protocol + '://' + host + ':' + port + '/'));
 95 |       console.log();
 96 |       console.log('Note that the development build is not optimized.');
 97 |       console.log('To create a production build, use ' + chalk.cyan(cli + ' run build') + '.');
 98 |       console.log();
 99 |       isFirstCompile = false;
100 |     }
101 | 
102 |     // If errors exist, only show errors.
103 |     if (messages.errors.length) {
104 |       console.log(chalk.red('Failed to compile.'));
105 |       console.log();
106 |       messages.errors.forEach(message => {
107 |         console.log(message);
108 |         console.log();
109 |       });
110 |       return;
111 |     }
112 | 
113 |     // Show warnings if no errors were found.
114 |     if (messages.warnings.length) {
115 |       console.log(chalk.yellow('Compiled with warnings.'));
116 |       console.log();
117 |       messages.warnings.forEach(message => {
118 |         console.log(message);
119 |         console.log();
120 |       });
121 |       // Teach some ESLint tricks.
122 |       console.log('You may use special comments to disable some warnings.');
123 |       console.log('Use ' + chalk.yellow('// eslint-disable-next-line') + ' to ignore the next line.');
124 |       console.log('Use ' + chalk.yellow('/* eslint-disable */') + ' to ignore all warnings in a file.');
125 |     }
126 |   });
127 | }
128 | 
129 | // We need to provide a custom onError function for httpProxyMiddleware.
130 | // It allows us to log custom error messages on the console.
131 | function onProxyError(proxy) {
132 |   return function(err, req, res){
133 |     var host = req.headers && req.headers.host;
134 |     console.log(
135 |       chalk.red('Proxy error:') + ' Could not proxy request ' + chalk.cyan(req.url) +
136 |       ' from ' + chalk.cyan(host) + ' to ' + chalk.cyan(proxy) + '.'
137 |     );
138 |     console.log(
139 |       'See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (' +
140 |       chalk.cyan(err.code) + ').'
141 |     );
142 |     console.log();
143 | 
144 |     // And immediately send the proper error response to the client.
145 |     // Otherwise, the request will eventually timeout with ERR_EMPTY_RESPONSE on the client side.
146 |     if (res.writeHead && !res.headersSent) {
147 |         res.writeHead(500);
148 |     }
149 |     res.end('Proxy error: Could not proxy request ' + req.url + ' from ' +
150 |       host + ' to ' + proxy + ' (' + err.code + ').'
151 |     );
152 |   }
153 | }
154 | 
155 | function addMiddleware(devServer) {
156 |   // `proxy` lets you to specify a fallback server during development.
157 |   // Every unrecognized request will be forwarded to it.
158 |   var proxy = require(paths.appPackageJson).proxy;
159 |   devServer.use(historyApiFallback({
160 |     // Paths with dots should still use the history fallback.
161 |     // See https://github.com/facebookincubator/create-react-app/issues/387.
162 |     disableDotRule: true,
163 |     // For single page apps, we generally want to fallback to /index.html.
164 |     // However we also want to respect `proxy` for API calls.
165 |     // So if `proxy` is specified, we need to decide which fallback to use.
166 |     // We use a heuristic: if request `accept`s text/html, we pick /index.html.
167 |     // Modern browsers include text/html into `accept` header when navigating.
168 |     // However API calls like `fetch()` won’t generally accept text/html.
169 |     // If this heuristic doesn’t work well for you, don’t use `proxy`.
170 |     htmlAcceptHeaders: proxy ?
171 |       ['text/html'] :
172 |       ['text/html', '*/*']
173 |   }));
174 |   if (proxy) {
175 |     if (typeof proxy !== 'string') {
176 |       console.log(chalk.red('When specified, "proxy" in package.json must be a string.'));
177 |       console.log(chalk.red('Instead, the type of "proxy" was "' + typeof proxy + '".'));
178 |       console.log(chalk.red('Either remove "proxy" from package.json, or make it a string.'));
179 |       process.exit(1);
180 |     }
181 | 
182 |     // Otherwise, if proxy is specified, we will let it handle any request.
183 |     // There are a few exceptions which we won't send to the proxy:
184 |     // - /index.html (served as HTML5 history API fallback)
185 |     // - /*.hot-update.json (WebpackDevServer uses this too for hot reloading)
186 |     // - /sockjs-node/* (WebpackDevServer uses this for hot reloading)
187 |     // Tip: use https://jex.im/regulex/ to visualize the regex
188 |     var mayProxy = /^(?!\/(index\.html$|.*\.hot-update\.json$|sockjs-node\/)).*$/;
189 | 
190 |     // Pass the scope regex both to Express and to the middleware for proxying
191 |     // of both HTTP and WebSockets to work without false positives.
192 |     var hpm = httpProxyMiddleware(pathname => mayProxy.test(pathname), {
193 |       target: proxy,
194 |       logLevel: 'silent',
195 |       onProxyReq: function(proxyReq) {
196 |         // Browers may send Origin headers even with same-origin
197 |         // requests. To prevent CORS issues, we have to change
198 |         // the Origin to match the target URL.
199 |         if (proxyReq.getHeader('origin')) {
200 |           proxyReq.setHeader('origin', proxy);
201 |         }
202 |       },
203 |       onError: onProxyError(proxy),
204 |       secure: false,
205 |       changeOrigin: true,
206 |       ws: true,
207 |       xfwd: true
208 |     });
209 |     devServer.use(mayProxy, hpm);
210 | 
211 |     // Listen for the websocket 'upgrade' event and upgrade the connection.
212 |     // If this is not done, httpProxyMiddleware will not try to upgrade until
213 |     // an initial plain HTTP request is made.
214 |     devServer.listeningApp.on('upgrade', hpm.upgrade);
215 |   }
216 | 
217 |   // Finally, by now we have certainly resolved the URL.
218 |   // It may be /index.html, so let the dev server try serving it again.
219 |   devServer.use(devServer.middleware);
220 | }
221 | 
222 | function runDevServer(host, port, protocol) {
223 |   var devServer = new WebpackDevServer(compiler, {
224 |     // Enable gzip compression of generated files.
225 |     compress: true,
226 |     // Silence WebpackDevServer's own logs since they're generally not useful.
227 |     // It will still show compile warnings and errors with this setting.
228 |     clientLogLevel: 'none',
229 |     // By default WebpackDevServer serves physical files from current directory
230 |     // in addition to all the virtual build products that it serves from memory.
231 |     // This is confusing because those files won’t automatically be available in
232 |     // production build folder unless we copy them. However, copying the whole
233 |     // project directory is dangerous because we may expose sensitive files.
234 |     // Instead, we establish a convention that only files in `public` directory
235 |     // get served. Our build script will copy `public` into the `build` folder.
236 |     // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
237 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
238 |     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
239 |     // Note that we only recommend to use `public` folder as an escape hatch
240 |     // for files like `favicon.ico`, `manifest.json`, and libraries that are
241 |     // for some reason broken when imported through Webpack. If you just want to
242 |     // use an image, put it in `src` and `import` it from JavaScript instead.
243 |     contentBase: paths.appPublic,
244 |     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
245 |     // for the WebpackDevServer client so it can learn when the files were
246 |     // updated. The WebpackDevServer client is included as an entry point
247 |     // in the Webpack development configuration. Note that only changes
248 |     // to CSS are currently hot reloaded. JS changes will refresh the browser.
249 |     hot: true,
250 |     // It is important to tell WebpackDevServer to use the same "root" path
251 |     // as we specified in the config. In development, we always serve from /.
252 |     publicPath: config.output.publicPath,
253 |     // WebpackDevServer is noisy by default so we emit custom message instead
254 |     // by listening to the compiler events with `compiler.plugin` calls above.
255 |     quiet: true,
256 |     // Reportedly, this avoids CPU overload on some systems.
257 |     // https://github.com/facebookincubator/create-react-app/issues/293
258 |     watchOptions: {
259 |       ignored: /node_modules/
260 |     },
261 |     // Enable HTTPS if the HTTPS environment variable is set to 'true'
262 |     https: protocol === "https",
263 |     host: host
264 |   });
265 | 
266 |   // Our custom middleware proxies requests to /index.html or a remote API.
267 |   addMiddleware(devServer);
268 | 
269 |   // Launch WebpackDevServer.
270 |   devServer.listen(port, err => {
271 |     if (err) {
272 |       return console.log(err);
273 |     }
274 | 
275 |     if (isInteractive) {
276 |       clearConsole();
277 |     }
278 |     console.log(chalk.cyan('Starting the development server...'));
279 |     console.log();
280 | 
281 |     openBrowser(protocol + '://' + host + ':' + port + '/');
282 |   });
283 | }
284 | 
285 | function run(port) {
286 |   var protocol = process.env.HTTPS === 'true' ? "https" : "http";
287 |   var host = process.env.HOST || 'localhost';
288 |   setupCompiler(host, port, protocol);
289 |   runDevServer(host, port, protocol);
290 | }
291 | 
292 | // We attempt to use the default port but if it is busy, we offer the user to
293 | // run on a different port. `detect()` Promise resolves to the next free port.
294 | detect(DEFAULT_PORT).then(port => {
295 |   if (port === DEFAULT_PORT) {
296 |     run(port);
297 |     return;
298 |   }
299 | 
300 |   if (isInteractive) {
301 |     clearConsole();
302 |     var existingProcess = getProcessForPort(DEFAULT_PORT);
303 |     var question =
304 |       chalk.yellow('Something is already running on port ' + DEFAULT_PORT + '.' +
305 |         ((existingProcess) ? ' Probably:\n  ' + existingProcess : '')) +
306 |         '\n\nWould you like to run the app on another port instead?';
307 | 
308 |     prompt(question, true).then(shouldChangePort => {
309 |       if (shouldChangePort) {
310 |         run(port);
311 |       }
312 |     });
313 |   } else {
314 |     console.log(chalk.red('Something is already running on port ' + DEFAULT_PORT + '.'));
315 |   }
316 | });
317 | 


--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | process.env.NODE_ENV = 'test';
 4 | process.env.PUBLIC_URL = '';
 5 | 
 6 | // Load environment variables from .env file. Suppress warnings using silent
 7 | // if this file is missing. dotenv will never modify any environment variables
 8 | // that have already been set.
 9 | // https://github.com/motdotla/dotenv
10 | require('dotenv').config({silent: true});
11 | 
12 | const jest = require('jest');
13 | const argv = process.argv.slice(2);
14 | 
15 | // Watch unless on CI or in coverage mode
16 | if (!process.env.CI && argv.indexOf('--coverage') < 0) {
17 |   argv.push('--watch');
18 | }
19 | 
20 | 
21 | jest.run(argv);
22 | 


--------------------------------------------------------------------------------
/server/createPDF.js:
--------------------------------------------------------------------------------
 1 | const fs = require('fs');
 2 | const Path = require('path');
 3 | const exec = require('child_process').exec;
 4 | 
 5 | const React = require('react');
 6 | const ReactDOMServer = require('react-dom/server');
 7 | 
 8 | const assets = require('../lib/asset-manifest.json');
 9 | 
10 | /**
11 |  * Import the main component file from the assets manifest
12 |  */
13 | const mainJsPath = Path.join(__dirname, `../lib/${assets['main.js']}`);
14 | const Main = require(mainJsPath).default;
15 | 
16 | const STYLES_TAG = '%STYLES%';
17 | const CONTENT_TAG = '%CONTENT%';
18 | 
19 | /**
20 |  * Get the file from a relative path
21 |  * @param {String} relativePath
22 |  * @return {Promise.<string>}
23 |  */
24 | function getFile(relativePath) {
25 |   return new Promise((resolve, reject) => {
26 |     const path = Path.join(__dirname, relativePath);
27 | 
28 |     return fs.readFile(path, { encoding: 'utf8' }, (err, file) => {
29 |       if (err) return reject(err);
30 |       return resolve(file);
31 |     })
32 |   });
33 | }
34 | 
35 | /**
36 |  * Writes the HTML to disk
37 |  * @param {string} html
38 |  * @return {Promise.<string>} Filepath
39 |  */
40 | function writeFile(content) {
41 |   return new Promise((resolve, reject) => {
42 |     const path = Path.join(__dirname, '../build/invoice.html');
43 | 
44 |     return fs.writeFile(path, content, (err) => {
45 |       if (err) return reject(err);
46 |       return resolve(path);
47 |     });
48 |   });
49 | }
50 | 
51 | /**
52 |  * Generates the PDF using the HTML at the passed path
53 |  * @param {String} htmlPath
54 |  * @return {Promise.<string>} Resolves to the path of the generated PDF
55 |  */
56 | function generatePDF(htmlPath) {
57 |   return new Promise((resolve, reject) => {
58 |     const outputPath = Path.join(__dirname, '../build/invoice.pdf');
59 | 
60 |     exec(`wkhtmltopdf -B 0 -T 0 -L 0 -R 0 ${htmlPath} ${outputPath}`, (err, stdout, stderr) => {
61 |       if (err) return reject(err);
62 |       if (stderr) return reject(stderr);
63 |       resolve(outputPath);
64 |     });
65 |   });
66 | }
67 | 
68 | /**
69 |  * Renders the React app and generates the PDF with the passed data.
70 |  * @param {Object} data
71 |  * @return {Promise.<string>} Promise resolves to the path to the generated PDF
72 |  */
73 | function createPDF(data) {
74 |   return Promise.all([
75 |     getFile(`../lib/${assets['main.css']}`),
76 |     getFile('./template.html'),
77 |   ])
78 |     .then(([css, template]) => {
79 |       // Render the app
80 |       const element = React.createElement(Main, { data });
81 |       const content = ReactDOMServer.renderToStaticMarkup(element);
82 | 
83 |       // Prepare the HTML
84 |       let html = template;
85 |       html = html.replace(CONTENT_TAG, content);
86 |       html = html.replace(STYLES_TAG, css);
87 | 
88 |       // Write the HTML to disk
89 |       return writeFile(html);
90 |     })
91 |     .then(path => generatePDF(path));
92 | }
93 | 
94 | module.exports = createPDF;
95 | 


--------------------------------------------------------------------------------
/server/template.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <style>
 5 |       %STYLES%
 6 |     </style>
 7 |   </head>
 8 |   <body>
 9 |     %CONTENT%
10 |   </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/src/Invoice.css:
--------------------------------------------------------------------------------
1 | .Invoice {
2 |   width: 794px;
3 |   height: 1123px;
4 |   overflow: hidden;
5 | }
6 | 
7 | 


--------------------------------------------------------------------------------
/src/Invoice.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import Header from './elements/Header/Header';
 4 | import Address from './elements/Address/Address';
 5 | import List from './elements/List/List';
 6 | 
 7 | import './vendor/normalize.css';
 8 | import './global.css';
 9 | import './Invoice.css';
10 | 
11 | function Invoice({ data }) {
12 |   return (
13 |     <div className="Invoice">
14 |       <Header date={data.date} number={data.number} />
15 |       <Address recipient={data.recipient} emitter={data.emitter} />
16 |       <List list={data.list} tax={data.tax} />
17 |     </div>
18 |   );
19 | }
20 | 
21 | export default Invoice;
22 | 
23 | 


--------------------------------------------------------------------------------
/src/elements/Address/Address.css:
--------------------------------------------------------------------------------
 1 | .Address {
 2 |   padding: 40px 50px;
 3 |   margin-top: 50px;
 4 |   background-color: #f3f3f3;
 5 | }
 6 | 
 7 | .Address-Block {
 8 |   float: right;
 9 |   text-align: right;
10 | }
11 | 
12 | .Address-Block.is-recipient {
13 |   float: left;
14 |   text-align: left;
15 | }
16 | 
17 | .Address-Block-name {
18 |   margin: 0;
19 |   line-height: 1.7;
20 |   font-size: 18px;
21 |   font-weight: bold;
22 |   color: #333;
23 | }
24 | 
25 | .Address-Block-address {
26 |   color: #607d8b;
27 |   margin: 0;
28 |   font-size: 14px;
29 | }
30 | 
31 | .Address-Block-address p {
32 |   margin: 0;
33 |   line-height: 1.5;
34 | }
35 | 
36 | 


--------------------------------------------------------------------------------
/src/elements/Address/Address.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import Block from './Block';
 4 | 
 5 | import './Address.css';
 6 | 
 7 | function Address({ emitter, recipient }) {
 8 |   return (
 9 |     <div className="Address clearfix">
10 |       <Block recipient {...recipient} />
11 |       <Block {...emitter} />
12 |     </div>
13 |   );
14 | }
15 | 
16 | export default Address;
17 | 
18 | 


--------------------------------------------------------------------------------
/src/elements/Address/Block.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | function Block({ displayName, addressLine, recipient }) {
 4 |   const className = `Address-Block${recipient ? ' is-recipient' : ''}`;
 5 | 
 6 |   const $address = addressLine.split('\n').reduce((acc, line, i) => {
 7 |     return [
 8 |       ...acc,
 9 |       <p key={i}>{line}</p>,
10 |     ];
11 |   }, []);
12 | 
13 |   return (
14 |     <div className={className}>
15 |       <p className="Address-Block-name">
16 |         {displayName}
17 |       </p>
18 |       <div className="Address-Block-address">
19 |         {$address}
20 |       </div>
21 |     </div>
22 |   );
23 | }
24 | 
25 | export default Block;
26 | 
27 | 


--------------------------------------------------------------------------------
/src/elements/Header/Header.css:
--------------------------------------------------------------------------------
 1 | .Header {
 2 |   padding-top: 80px;
 3 |   padding-bottom: 50px;
 4 | }
 5 | 
 6 | .Header-logo {
 7 |   padding-left: 40px;
 8 |   float: left;
 9 | }
10 | 
11 | .Header-logo img {
12 |   width: 250px;
13 | }
14 | 
15 | .Header-right {
16 |   float: right;
17 |   padding-right: 40px;
18 | }
19 | 
20 | .Header-title {
21 |   float: right;
22 |   font-size: 18px;
23 |   color: #333;
24 |   line-height: 1.5;
25 | }
26 | 
27 | .Header-date {
28 |   float: right;
29 |   clear: right;
30 |   font-size: 14px;
31 |   color: #607d8b;
32 | }
33 | 


--------------------------------------------------------------------------------
/src/elements/Header/Header.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import format from 'date-fns/format';
 3 | 
 4 | import logoSrc from './logo.png';
 5 | import './Header.css';
 6 | 
 7 | function Header({ date, number }) {
 8 |   return (
 9 |     <div className="Header clearfix">
10 |       <div className="Header-logo">
11 |         <img src={logoSrc} alt="Logo" />
12 |       </div>
13 | 
14 |       <div className="Header-right clearfix">
15 |         <div className="Header-title">
16 |           Invoice #{number}
17 |         </div>
18 |         <div className="Header-date">
19 |           {format(new Date(date), 'MMMM D, YYYY')}
20 |         </div>
21 |       </div>
22 |     </div>
23 |   );
24 | }
25 | 
26 | export default Header;
27 | 
28 | 


--------------------------------------------------------------------------------
/src/elements/Header/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lang-ai/react-pdfs/c2d8a60b075bb410e5386d2a9f5a5dade418f383/src/elements/Header/logo.png


--------------------------------------------------------------------------------
/src/elements/List/List.css:
--------------------------------------------------------------------------------
 1 | .List {
 2 |   width: calc(100% - 80px);
 3 |   padding: 0 40px;
 4 |   color: #333;
 5 |   margin-top: 80px;
 6 | }
 7 | 
 8 | .List-content {
 9 |   width: 100%;
10 |   border-collapse: collapse;
11 | }
12 | 
13 | .List-content th {
14 |   text-align: left;
15 |   padding: 0 10px 5px 10px;
16 |   font-size: 12px;
17 |   text-transform: uppercase;
18 |   color: #333;
19 | }
20 | 
21 | .List-content td {
22 |   padding: 10px;
23 |   font-size: 14px;
24 |   line-height: 1.5;
25 | }
26 | 
27 | .List-content tbody tr {
28 |   border-bottom: 1px solid #b7b7b7;
29 | }
30 | 
31 | .List-content th.List-number {
32 |   text-align: right;
33 | }
34 | 
35 | .List-number {
36 |   text-align: right;
37 | }
38 | 
39 | .List-totals {
40 |   float: right;
41 |   width: 220px;
42 |   border-collapse: collapse;
43 |   margin-top: 15px;
44 | }
45 | 
46 | .List-totals tr {
47 |   border-bottom: 1px solid #b7b7b7;
48 | }
49 | 
50 | .List-totals td {
51 |   padding: 10px;
52 |   line-height: 1.5;
53 |   font-size: 14px;
54 | }
55 | 
56 | .List-totals td:first-child {
57 |   font-size: 14px;
58 |   font-weight: bold;
59 |   text-align: right;
60 | }
61 | 


--------------------------------------------------------------------------------
/src/elements/List/List.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import './List.css';
 4 | 
 5 | function formatPrice(n) {
 6 |   return n.toLocaleString('en', {
 7 |     minimumFractionDigits: 2,
 8 |     maximumFractionDigits: 2,
 9 |   }) + ' $';
10 | }
11 | 
12 | function List({ list, tax }) {
13 |   const subtotal = list.reduce((acc, item) => (
14 |     acc + (item.quantity * item.unitPrice)
15 |   ), 0);
16 |   const taxes = subtotal * tax;
17 | 
18 |   return (
19 |     <div className="List">
20 |       <table className="List-content">
21 |         <thead>
22 |           <tr>
23 |             <th>Description</th>
24 |             <th className="List-number">Quantity</th>
25 |             <th className="List-number">Unit price</th>
26 |             <th className="List-number">Line total</th>
27 |           </tr>
28 |         </thead>
29 |         <tbody>
30 |           {list.map(item => (
31 |             <tr>
32 |               <td>{item.name}</td>
33 |               <td className="List-number">{item.quantity}</td>
34 |               <td className="List-number">{formatPrice(item.unitPrice / 100)}</td>
35 |               <td className="List-number">
36 |                 {formatPrice((item.unitPrice * item.quantity) / 100)}
37 |               </td>
38 |             </tr>
39 |           ))}
40 |         </tbody>
41 |       </table>
42 |       <table className="List-totals">
43 |         <tbody>
44 |           <tr>
45 |             <td>Subtotal</td>
46 |             <td className="List-number">
47 |               {formatPrice(subtotal / 100)}
48 |             </td>
49 |           </tr>
50 |           <tr>
51 |             <td>Tax ({tax * 100}%)</td>
52 |             <td className="List-number">
53 |               {formatPrice(taxes / 100)}
54 |             </td>
55 |           </tr>
56 |           <tr>
57 |             <td>Total</td>
58 |             <td className="List-number">
59 |               {formatPrice((subtotal + taxes) / 100)}
60 |             </td>
61 |           </tr>
62 |         </tbody>
63 |       </table>
64 |     </div>
65 |   );
66 | }
67 | 
68 | export default List;
69 | 
70 | 


--------------------------------------------------------------------------------
/src/global.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   font-family: sans-serif;
 5 | }
 6 | 
 7 | .clearfix:after {
 8 |   content: "";
 9 |   display: table;
10 |   clear: both;
11 | }
12 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | 
 4 | import Invoice from './Invoice';
 5 | 
 6 | const data = {
 7 |   date: new Date().toISOString(),
 8 |   number: 3853,
 9 |   recipient: {
10 |     displayName: 'John White',
11 |     addressLine: 'CEO at Carddesign.con\nLondon, United Kingdom',
12 |   },
13 |   emitter: {
14 |     displayName: 'Awesome & Co',
15 |     addressLine: 'Weather forecasting\nLondon, United Kingdom',
16 |   },
17 |   list: [
18 |     {
19 |       name: 'Daily weather report',
20 |       quantity: 34,
21 |       unitPrice: 320,
22 |     },
23 |     {
24 |       name: 'Email delivery service',
25 |       quantity: 34,
26 |       unitPrice: 15,
27 |     },
28 |     {
29 |       name: 'Weather report custom design setup',
30 |       quantity: 1,
31 |       unitPrice: 98000,
32 |     },
33 |   ],
34 |   tax: 0.23,
35 | };
36 | 
37 | ReactDOM.render(
38 |   <Invoice data={data} />,
39 |   document.getElementById('root')
40 | );
41 | 


--------------------------------------------------------------------------------
/src/vendor/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /* Document
  4 |    ========================================================================== */
  5 | 
  6 | /**
  7 |  * 1. Correct the line height in all browsers.
  8 |  * 2. Prevent adjustments of font size after orientation changes in
  9 |  *    IE on Windows Phone and in iOS.
 10 |  */
 11 | 
 12 | html {
 13 |   line-height: 1.15; /* 1 */
 14 |   -ms-text-size-adjust: 100%; /* 2 */
 15 |   -webkit-text-size-adjust: 100%; /* 2 */
 16 | }
 17 | 
 18 | /* Sections
 19 |    ========================================================================== */
 20 | 
 21 | /**
 22 |  * Add the correct display in IE 9-.
 23 |  */
 24 | 
 25 | article,
 26 | aside,
 27 | footer,
 28 | header,
 29 | nav,
 30 | section {
 31 |   display: block;
 32 | }
 33 | 
 34 | /**
 35 |  * Correct the font size and margin on `h1` elements within `section` and
 36 |  * `article` contexts in Chrome, Firefox, and Safari.
 37 |  */
 38 | 
 39 | h1 {
 40 |   font-size: 2em;
 41 |   margin: 0.67em 0;
 42 | }
 43 | 
 44 | /* Grouping content
 45 |    ========================================================================== */
 46 | 
 47 | /**
 48 |  * Add the correct display in IE 9-.
 49 |  * 1. Add the correct display in IE.
 50 |  */
 51 | 
 52 | figcaption,
 53 | figure,
 54 | main { /* 1 */
 55 |   display: block;
 56 | }
 57 | 
 58 | /**
 59 |  * Add the correct margin in IE 8.
 60 |  */
 61 | 
 62 | figure {
 63 |   margin: 1em 40px;
 64 | }
 65 | 
 66 | /**
 67 |  * 1. Add the correct box sizing in Firefox.
 68 |  * 2. Show the overflow in Edge and IE.
 69 |  */
 70 | 
 71 | hr {
 72 |   box-sizing: content-box; /* 1 */
 73 |   height: 0; /* 1 */
 74 |   overflow: visible; /* 2 */
 75 | }
 76 | 
 77 | /**
 78 |  * 1. Correct the inheritance and scaling of font size in all browsers.
 79 |  * 2. Correct the odd `em` font sizing in all browsers.
 80 |  */
 81 | 
 82 | pre {
 83 |   font-family: monospace, monospace; /* 1 */
 84 |   font-size: 1em; /* 2 */
 85 | }
 86 | 
 87 | /* Text-level semantics
 88 |    ========================================================================== */
 89 | 
 90 | /**
 91 |  * 1. Remove the gray background on active links in IE 10.
 92 |  * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 93 |  */
 94 | 
 95 | a {
 96 |   background-color: transparent; /* 1 */
 97 |   -webkit-text-decoration-skip: objects; /* 2 */
 98 | }
 99 | 
100 | /**
101 |  * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
102 |  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
103 |  */
104 | 
105 | abbr[title] {
106 |   border-bottom: none; /* 1 */
107 |   text-decoration: underline; /* 2 */
108 |   text-decoration: underline dotted; /* 2 */
109 | }
110 | 
111 | /**
112 |  * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
113 |  */
114 | 
115 | b,
116 | strong {
117 |   font-weight: inherit;
118 | }
119 | 
120 | /**
121 |  * Add the correct font weight in Chrome, Edge, and Safari.
122 |  */
123 | 
124 | b,
125 | strong {
126 |   font-weight: bolder;
127 | }
128 | 
129 | /**
130 |  * 1. Correct the inheritance and scaling of font size in all browsers.
131 |  * 2. Correct the odd `em` font sizing in all browsers.
132 |  */
133 | 
134 | code,
135 | kbd,
136 | samp {
137 |   font-family: monospace, monospace; /* 1 */
138 |   font-size: 1em; /* 2 */
139 | }
140 | 
141 | /**
142 |  * Add the correct font style in Android 4.3-.
143 |  */
144 | 
145 | dfn {
146 |   font-style: italic;
147 | }
148 | 
149 | /**
150 |  * Add the correct background and color in IE 9-.
151 |  */
152 | 
153 | mark {
154 |   background-color: #ff0;
155 |   color: #000;
156 | }
157 | 
158 | /**
159 |  * Add the correct font size in all browsers.
160 |  */
161 | 
162 | small {
163 |   font-size: 80%;
164 | }
165 | 
166 | /**
167 |  * Prevent `sub` and `sup` elements from affecting the line height in
168 |  * all browsers.
169 |  */
170 | 
171 | sub,
172 | sup {
173 |   font-size: 75%;
174 |   line-height: 0;
175 |   position: relative;
176 |   vertical-align: baseline;
177 | }
178 | 
179 | sub {
180 |   bottom: -0.25em;
181 | }
182 | 
183 | sup {
184 |   top: -0.5em;
185 | }
186 | 
187 | /* Embedded content
188 |    ========================================================================== */
189 | 
190 | /**
191 |  * Add the correct display in IE 9-.
192 |  */
193 | 
194 | audio,
195 | video {
196 |   display: inline-block;
197 | }
198 | 
199 | /**
200 |  * Add the correct display in iOS 4-7.
201 |  */
202 | 
203 | audio:not([controls]) {
204 |   display: none;
205 |   height: 0;
206 | }
207 | 
208 | /**
209 |  * Remove the border on images inside links in IE 10-.
210 |  */
211 | 
212 | img {
213 |   border-style: none;
214 | }
215 | 
216 | /**
217 |  * Hide the overflow in IE.
218 |  */
219 | 
220 | svg:not(:root) {
221 |   overflow: hidden;
222 | }
223 | 
224 | /* Forms
225 |    ========================================================================== */
226 | 
227 | /**
228 |  * Remove the margin in Firefox and Safari.
229 |  */
230 | 
231 | button,
232 | input,
233 | optgroup,
234 | select,
235 | textarea {
236 |   margin: 0;
237 | }
238 | 
239 | /**
240 |  * Show the overflow in IE.
241 |  * 1. Show the overflow in Edge.
242 |  */
243 | 
244 | button,
245 | input { /* 1 */
246 |   overflow: visible;
247 | }
248 | 
249 | /**
250 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
251 |  * 1. Remove the inheritance of text transform in Firefox.
252 |  */
253 | 
254 | button,
255 | select { /* 1 */
256 |   text-transform: none;
257 | }
258 | 
259 | /**
260 |  * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
261 |  *    controls in Android 4.
262 |  * 2. Correct the inability to style clickable types in iOS and Safari.
263 |  */
264 | 
265 | button,
266 | html [type="button"], /* 1 */
267 | [type="reset"],
268 | [type="submit"] {
269 |   -webkit-appearance: button; /* 2 */
270 | }
271 | 
272 | /**
273 |  * Remove the inner border and padding in Firefox.
274 |  */
275 | 
276 | button::-moz-focus-inner,
277 | [type="button"]::-moz-focus-inner,
278 | [type="reset"]::-moz-focus-inner,
279 | [type="submit"]::-moz-focus-inner {
280 |   border-style: none;
281 |   padding: 0;
282 | }
283 | 
284 | /**
285 |  * Restore the focus styles unset by the previous rule.
286 |  */
287 | 
288 | button:-moz-focusring,
289 | [type="button"]:-moz-focusring,
290 | [type="reset"]:-moz-focusring,
291 | [type="submit"]:-moz-focusring {
292 |   outline: 1px dotted ButtonText;
293 | }
294 | 
295 | /**
296 |  * 1. Correct the text wrapping in Edge and IE.
297 |  * 2. Correct the color inheritance from `fieldset` elements in IE.
298 |  * 3. Remove the padding so developers are not caught out when they zero out
299 |  *    `fieldset` elements in all browsers.
300 |  */
301 | 
302 | legend {
303 |   box-sizing: border-box; /* 1 */
304 |   color: inherit; /* 2 */
305 |   display: table; /* 1 */
306 |   max-width: 100%; /* 1 */
307 |   padding: 0; /* 3 */
308 |   white-space: normal; /* 1 */
309 | }
310 | 
311 | /**
312 |  * 1. Add the correct display in IE 9-.
313 |  * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
314 |  */
315 | 
316 | progress {
317 |   display: inline-block; /* 1 */
318 |   vertical-align: baseline; /* 2 */
319 | }
320 | 
321 | /**
322 |  * Remove the default vertical scrollbar in IE.
323 |  */
324 | 
325 | textarea {
326 |   overflow: auto;
327 | }
328 | 
329 | /**
330 |  * 1. Add the correct box sizing in IE 10-.
331 |  * 2. Remove the padding in IE 10-.
332 |  */
333 | 
334 | [type="checkbox"],
335 | [type="radio"] {
336 |   box-sizing: border-box; /* 1 */
337 |   padding: 0; /* 2 */
338 | }
339 | 
340 | /**
341 |  * Correct the cursor style of increment and decrement buttons in Chrome.
342 |  */
343 | 
344 | [type="number"]::-webkit-inner-spin-button,
345 | [type="number"]::-webkit-outer-spin-button {
346 |   height: auto;
347 | }
348 | 
349 | /**
350 |  * 1. Correct the odd appearance in Chrome and Safari.
351 |  * 2. Correct the outline style in Safari.
352 |  */
353 | 
354 | [type="search"] {
355 |   -webkit-appearance: textfield; /* 1 */
356 |   outline-offset: -2px; /* 2 */
357 | }
358 | 
359 | /**
360 |  * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
361 |  */
362 | 
363 | [type="search"]::-webkit-search-cancel-button,
364 | [type="search"]::-webkit-search-decoration {
365 |   -webkit-appearance: none;
366 | }
367 | 
368 | /**
369 |  * 1. Correct the inability to style clickable types in iOS and Safari.
370 |  * 2. Change font properties to `inherit` in Safari.
371 |  */
372 | 
373 | ::-webkit-file-upload-button {
374 |   -webkit-appearance: button; /* 1 */
375 |   font: inherit; /* 2 */
376 | }
377 | 
378 | /* Interactive
379 |    ========================================================================== */
380 | 
381 | /*
382 |  * Add the correct display in IE 9-.
383 |  * 1. Add the correct display in Edge, IE, and Firefox.
384 |  */
385 | 
386 | details, /* 1 */
387 | menu {
388 |   display: block;
389 | }
390 | 
391 | /*
392 |  * Add the correct display in all browsers.
393 |  */
394 | 
395 | summary {
396 |   display: list-item;
397 | }
398 | 
399 | /* Scripting
400 |    ========================================================================== */
401 | 
402 | /**
403 |  * Add the correct display in IE 9-.
404 |  */
405 | 
406 | canvas {
407 |   display: inline-block;
408 | }
409 | 
410 | /**
411 |  * Add the correct display in IE.
412 |  */
413 | 
414 | template {
415 |   display: none;
416 | }
417 | 
418 | /* Hidden
419 |    ========================================================================== */
420 | 
421 | /**
422 |  * Add the correct display in IE 10-.
423 |  */
424 | 
425 | [hidden] {
426 |   display: none;
427 | }
428 | 


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