Added a Boillerplate for ReactJS
This commit is contained in:
parent
dd4b9c1660
commit
64f3d93a34
|
|
@ -1,17 +0,0 @@
|
|||
{
|
||||
"presets": ["@babel/env", "@babel/react"],
|
||||
"plugins": [
|
||||
"@babel/plugin-proposal-class-properties",
|
||||
"@babel/plugin-proposal-object-rest-spread",
|
||||
"@babel/plugin-transform-runtime"
|
||||
],
|
||||
"env": {
|
||||
"production": {
|
||||
"plugins": [
|
||||
["transform-react-remove-prop-types", {
|
||||
"removeImport": true
|
||||
}]
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
node_modules
|
||||
coverage
|
||||
dist
|
||||
docs
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
// Default config: https://github.com/dzervoudakes/dztools/blob/master/packages/formatting/eslint-config-react/index.js
|
||||
const OFF = 0;
|
||||
const ERROR = 2;
|
||||
|
||||
module.exports = {
|
||||
extends: ['@dztools/eslint-config-react'],
|
||||
overrides: [
|
||||
{
|
||||
files: ['scripts/*.js'],
|
||||
rules: {
|
||||
'no-console': OFF,
|
||||
'jest/no-jest-import': OFF
|
||||
}
|
||||
}
|
||||
],
|
||||
rules: {
|
||||
'import/no-extraneous-dependencies': [
|
||||
ERROR,
|
||||
{
|
||||
devDependencies: [
|
||||
'webpack.config.js',
|
||||
'build/**',
|
||||
'jest/**',
|
||||
'scripts/**',
|
||||
'**/*.test.*',
|
||||
'**/*.spec.*'
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
settings: {
|
||||
'import/resolver': {
|
||||
webpack: {
|
||||
config: 'build/webpack.base.js'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -1,6 +1,23 @@
|
|||
.vscode
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
node_modules
|
||||
coverage
|
||||
dist
|
||||
docs
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
module.exports = {
|
||||
'*.{js,jsx,mjs}': ['eslint --fix'],
|
||||
'*.scss': ['stylelint --fix']
|
||||
};
|
||||
|
|
@ -1 +0,0 @@
|
|||
save-exact=true
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
const postcssPresetEnv = require('postcss-preset-env');
|
||||
|
||||
module.exports = {
|
||||
plugins: [
|
||||
postcssPresetEnv()
|
||||
]
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
node_modules
|
||||
coverage
|
||||
dist
|
||||
docs
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
// Default config: https://github.com/dzervoudakes/dztools/blob/master/packages/formatting/prettier-config/index.js
|
||||
const config = require('@dztools/prettier-config');
|
||||
|
||||
module.exports = config;
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
node_modules
|
||||
coverage
|
||||
dist
|
||||
docs
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
// Default config: https://github.com/dzervoudakes/dztools/blob/master/packages/formatting/stylelint-config/index.js
|
||||
module.exports = {
|
||||
extends: ['@dztools/stylelint-config']
|
||||
};
|
||||
|
|
@ -1,83 +1,68 @@
|
|||
# JavaScript React Template
|
||||
> Welcome to your new React app.
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||
|
||||
[](https://prettier.io/)
|
||||
## Available Scripts
|
||||
|
||||
## Build Scripts
|
||||
In the project directory, you can run:
|
||||
|
||||
### Install Dependencies
|
||||
```
|
||||
yarn
|
||||
```
|
||||
### `yarn start`
|
||||
|
||||
### Start Local Server on Port 8080
|
||||
```
|
||||
yarn start
|
||||
```
|
||||
Runs the app in the development mode.<br />
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
|
||||
|
||||
### Run Linting
|
||||
```
|
||||
yarn lint
|
||||
```
|
||||
The page will reload if you make edits.<br />
|
||||
You will also see any lint errors in the console.
|
||||
|
||||
### Run Linting with Fix
|
||||
```
|
||||
yarn lint:fix
|
||||
```
|
||||
### `yarn test`
|
||||
|
||||
### Run Style Linting
|
||||
```
|
||||
yarn stylelint
|
||||
```
|
||||
Launches the test runner in the interactive watch mode.<br />
|
||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||
|
||||
### Run Style Linting with Fix
|
||||
```
|
||||
yarn stylelint:fix
|
||||
```
|
||||
### `yarn build`
|
||||
|
||||
### Run Unit Tests
|
||||
```
|
||||
yarn test
|
||||
```
|
||||
Builds the app for production to the `build` folder.<br />
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
|
||||
### Run Unit Tests with Coverage Report
|
||||
```
|
||||
yarn test:coverage
|
||||
```
|
||||
The build is minified and the filenames include the hashes.<br />
|
||||
Your app is ready to be deployed!
|
||||
|
||||
### Run Unit Tests with Verbose Results
|
||||
```
|
||||
yarn test:verbose
|
||||
```
|
||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||
|
||||
### Run Unit Tests and Watch for Changes
|
||||
```
|
||||
yarn test:watch
|
||||
```
|
||||
### `yarn eject`
|
||||
|
||||
### Build for Production
|
||||
```
|
||||
yarn build
|
||||
```
|
||||
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
|
||||
|
||||
### Build for Production with Bundle Analyzer Report
|
||||
```
|
||||
yarn build:report
|
||||
```
|
||||
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||
|
||||
### Generate Documentation
|
||||
```
|
||||
yarn docs
|
||||
```
|
||||
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
|
||||
|
||||
### Remove All Build Directories
|
||||
```
|
||||
yarn clean
|
||||
```
|
||||
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
|
||||
|
||||
## Technical Requirements
|
||||
> The runtime environment for this application requires `node >= 14.6.0` and `yarn >= 1.22.4`.
|
||||
## Learn More
|
||||
|
||||
## Configuration
|
||||
> This application makes use of `ESLint`, `Stylelint` and `EditorConfig`. Each of these features requires
|
||||
> an extension be installed in order to work properly with IDEs and text editors such as VSCode.
|
||||
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||
|
||||
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||
|
||||
### Code Splitting
|
||||
|
||||
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
|
||||
|
||||
### Analyzing the Bundle Size
|
||||
|
||||
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
|
||||
|
||||
### Making a Progressive Web App
|
||||
|
||||
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
|
||||
|
||||
### Advanced Configuration
|
||||
|
||||
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
|
||||
|
||||
### Deployment
|
||||
|
||||
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
|
||||
|
||||
### `yarn build` fails to minify
|
||||
|
||||
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
/**
|
||||
* @fileoverview Base Webpack configuration, shared between development and production builds.
|
||||
* - Default config: https://github.com/dzervoudakes/dztools/blob/master/packages/bundlers/webpack-config-react/config/webpack.base.js
|
||||
* - Notes on customizing/extending: https://github.com/dzervoudakes/dztools/tree/master/packages/bundlers/webpack-config-react#readme
|
||||
*/
|
||||
const { webpackBaseConfig } = require('@dztools/webpack-config-react');
|
||||
|
||||
module.exports = webpackBaseConfig;
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
/**
|
||||
* @fileoverview Webpack development configuration.
|
||||
* - Default config: https://github.com/dzervoudakes/dztools/blob/master/packages/bundlers/webpack-config-react/config/webpack.dev.js
|
||||
* - Notes on customizing/extending: https://github.com/dzervoudakes/dztools/tree/master/packages/bundlers/webpack-config-react#readme
|
||||
*/
|
||||
const { webpackDevConfig } = require('@dztools/webpack-config-react');
|
||||
|
||||
module.exports = webpackDevConfig;
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
/**
|
||||
* @fileoverview Webpack production configuration.
|
||||
* - Default config: https://github.com/dzervoudakes/dztools/blob/master/packages/bundlers/webpack-config-react/config/webpack.prod.js
|
||||
* - Notes on customizing/extending: https://github.com/dzervoudakes/dztools/tree/master/packages/bundlers/webpack-config-react#readme
|
||||
*/
|
||||
const { webpackProdConfig } = require('@dztools/webpack-config-react');
|
||||
|
||||
module.exports = webpackProdConfig;
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
// Default config: https://github.com/dzervoudakes/dztools/blob/master/packages/testing/jest-config-react/jest-preset.js
|
||||
module.exports = {
|
||||
preset: '@dztools/jest-config-react'
|
||||
};
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
/**
|
||||
* @fileoverview Define configuration for documentation output.
|
||||
*/
|
||||
module.exports = {
|
||||
opts: {
|
||||
destination: './docs',
|
||||
encoding: 'utf8',
|
||||
template: './node_modules/docdash'
|
||||
},
|
||||
source: {
|
||||
include: ['./README.md', './build', './scripts', './src']
|
||||
}
|
||||
};
|
||||
|
|
@ -1,87 +1,34 @@
|
|||
{
|
||||
"name": "frontend",
|
||||
"name": "online-doctor-appointment-system",
|
||||
"version": "0.1.0",
|
||||
"description": "frontend application, built with React.",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"build": "cross-env NODE_ENV=production node scripts/build",
|
||||
"build:report": "yarn build --report",
|
||||
"clean": "rimraf coverage dist docs",
|
||||
"docs": "jsdoc -c ./jsdoc.config.js -r",
|
||||
"lint": "node scripts/eslint",
|
||||
"lint:fix": "yarn lint --fix",
|
||||
"start": "cross-env NODE_ENV=development webpack-dev-server",
|
||||
"stylelint": "node scripts/stylelint",
|
||||
"stylelint:fix": "yarn stylelint --fix",
|
||||
"test": "node scripts/test",
|
||||
"test:coverage": "yarn test --coverage",
|
||||
"test:verbose": "yarn test --verbose",
|
||||
"test:watch": "yarn test --watchAll"
|
||||
},
|
||||
"repository": {},
|
||||
"author": "",
|
||||
"license": "UNLICENSED",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"core-js": "3.6.5",
|
||||
"prop-types": "15.7.2",
|
||||
"react": "16.13.1",
|
||||
"react-dom": "16.13.1",
|
||||
"react-router-dom": "5.2.0",
|
||||
"regenerator-runtime": "0.13.7"
|
||||
"@testing-library/jest-dom": "^4.2.4",
|
||||
"@testing-library/react": "^9.3.2",
|
||||
"@testing-library/user-event": "^7.1.2",
|
||||
"react": "^16.14.0",
|
||||
"react-dom": "^16.14.0",
|
||||
"react-scripts": "3.4.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.11.4",
|
||||
"@babel/plugin-proposal-class-properties": "7.10.4",
|
||||
"@babel/plugin-proposal-object-rest-spread": "7.11.0",
|
||||
"@babel/plugin-transform-runtime": "7.11.0",
|
||||
"@babel/preset-env": "7.11.0",
|
||||
"@babel/preset-react": "7.10.4",
|
||||
"@dztools/eslint-config-react": "1.0.2",
|
||||
"@dztools/jest-config-react": "1.0.2",
|
||||
"@dztools/prettier-config": "1.0.2",
|
||||
"@dztools/stylelint-config": "1.1.1",
|
||||
"@dztools/webpack-config-react": "1.3.0",
|
||||
"@testing-library/react": "10.4.9",
|
||||
"babel-eslint": "10.1.0",
|
||||
"babel-plugin-transform-react-remove-prop-types": "0.4.24",
|
||||
"chalk": "4.1.0",
|
||||
"cross-env": "7.0.2",
|
||||
"docdash": "1.2.0",
|
||||
"eslint": "7.7.0",
|
||||
"eslint-config-airbnb": "18.2.0",
|
||||
"eslint-config-prettier": "6.11.0",
|
||||
"eslint-import-resolver-webpack": "0.12.2",
|
||||
"eslint-plugin-import": "2.22.0",
|
||||
"eslint-plugin-jest": "23.20.0",
|
||||
"eslint-plugin-jsx-a11y": "6.3.1",
|
||||
"eslint-plugin-prettier": "3.1.4",
|
||||
"eslint-plugin-react": "7.20.6",
|
||||
"eslint-plugin-react-hooks": "4.1.0",
|
||||
"husky": "4.2.5",
|
||||
"jest": "26.4.2",
|
||||
"jsdoc": "3.6.5",
|
||||
"lint-staged": "10.2.11",
|
||||
"ora": "5.0.0",
|
||||
"postcss-preset-env": "6.7.0",
|
||||
"prettier": "2.0.5",
|
||||
"rimraf": "3.0.2",
|
||||
"stylelint": "13.6.1",
|
||||
"webpack": "4.44.1",
|
||||
"webpack-cli": "3.3.12",
|
||||
"webpack-dev-server": "3.11.0",
|
||||
"webpack-merge": "5.1.2"
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
}
|
||||
"eslintConfig": {
|
||||
"extends": "react-app"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 14.6.0",
|
||||
"yarn": ">= 1.22.4"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions"
|
||||
]
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.1 KiB |
|
|
@ -1,15 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>frontend</title>
|
||||
<base href="/">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
|
||||
<meta name="description" content="Another application built with React.">
|
||||
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:400,700">
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You must enable JavaScript to use this application.</noscript>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
/**
|
||||
* @fileoverview Build script that compiles the application for production.
|
||||
*/
|
||||
const webpack = require('webpack');
|
||||
const chalk = require('chalk');
|
||||
const ora = require('ora');
|
||||
const webpackConfig = require('../webpack.config');
|
||||
|
||||
const spinner = ora('Building for production...');
|
||||
spinner.start();
|
||||
|
||||
process.env.BABEL_ENV = 'production';
|
||||
|
||||
webpack(webpackConfig, (err, stats) => {
|
||||
spinner.stop();
|
||||
if (err) {
|
||||
throw err;
|
||||
}
|
||||
|
||||
process.stdout.write(
|
||||
`${stats.toString({
|
||||
colors: true,
|
||||
modules: false,
|
||||
children: false,
|
||||
chunks: false,
|
||||
chunkModules: false
|
||||
})}\n\n`
|
||||
);
|
||||
|
||||
if (stats.hasErrors()) {
|
||||
console.log(chalk.red('Build failed with errors.\n'));
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
console.log(
|
||||
chalk.cyan(
|
||||
'The application has been bundled successfully and is ready for distribution.\n'
|
||||
)
|
||||
);
|
||||
});
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
/**
|
||||
* @fileoverview Build script that runs eslint against all application script files.
|
||||
*/
|
||||
const { CLIEngine } = require('eslint');
|
||||
const chalk = require('chalk');
|
||||
const ora = require('ora');
|
||||
|
||||
process.on('unhandledRejection', (err) => {
|
||||
throw err;
|
||||
});
|
||||
|
||||
const spinner = ora('Linting all scripts...');
|
||||
spinner.start();
|
||||
|
||||
const fix = process.argv.indexOf('--fix') !== -1;
|
||||
const cli = new CLIEngine({ fix });
|
||||
|
||||
const report = cli.executeOnFiles(['**/*.js', '**/*.jsx']);
|
||||
const formatter = cli.getFormatter();
|
||||
|
||||
if (fix) {
|
||||
CLIEngine.outputFixes(report);
|
||||
}
|
||||
|
||||
spinner.stop();
|
||||
console.log(formatter(report.results));
|
||||
|
||||
const { errorCount, warningCount } = report;
|
||||
|
||||
if (errorCount === 0) {
|
||||
if (warningCount === 0) {
|
||||
console.log(chalk.green('Linting complete: no warnings or errors found.\n'));
|
||||
} else {
|
||||
console.log(chalk.yellow('Linting complete: warnings found.\n'));
|
||||
}
|
||||
} else {
|
||||
throw new Error('Lint errors found.\n');
|
||||
}
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
/**
|
||||
* @fileoverview Build script that runs stylelint against all application style files.
|
||||
*/
|
||||
const stylelint = require('stylelint');
|
||||
const chalk = require('chalk');
|
||||
const ora = require('ora');
|
||||
|
||||
process.on('unhandledRejection', (err) => {
|
||||
throw err;
|
||||
});
|
||||
|
||||
const spinner = ora('Linting all styles...');
|
||||
spinner.start();
|
||||
|
||||
const fix = process.argv.indexOf('--fix') !== -1;
|
||||
const opts = { files: '**/*.scss', fix, formatter: 'string' };
|
||||
|
||||
stylelint
|
||||
.lint(opts)
|
||||
.then((result) => {
|
||||
spinner.stop();
|
||||
console.log(result.output);
|
||||
|
||||
if (!result.errored) {
|
||||
console.log(chalk.green('Style linting complete: no warnings or errors found.\n'));
|
||||
} else {
|
||||
throw new Error('Stylelint errors found.\n');
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error.stack);
|
||||
});
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
/**
|
||||
* @fileoverview Build script that runs unit tests with Jest.
|
||||
*/
|
||||
const jest = require('jest');
|
||||
|
||||
process.env.BABEL_ENV = 'test';
|
||||
process.env.NODE_ENV = 'test';
|
||||
|
||||
process.on('unhandledRejection', (err) => {
|
||||
throw err;
|
||||
});
|
||||
|
||||
const argv = process.argv.slice(2);
|
||||
|
||||
jest.run(argv);
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import React from 'react';
|
||||
import logo from './logo.svg';
|
||||
import './App.css';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<img src={logo} className="App-logo" alt="logo" />
|
||||
<p>
|
||||
Edit <code>src/App.js</code> and save to reload.
|
||||
</p>
|
||||
<a
|
||||
className="App-link"
|
||||
href="https://reactjs.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn React
|
||||
</a>
|
||||
</header>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import React from 'react';
|
||||
import { render } from '@testing-library/react';
|
||||
import App from './App';
|
||||
|
||||
test('renders learn react link', () => {
|
||||
const { getByText } = render(<App />);
|
||||
const linkElement = getByText(/learn react/i);
|
||||
expect(linkElement).toBeInTheDocument();
|
||||
});
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import React from 'react';
|
||||
import Routes from '@src/components/Routes';
|
||||
import Header from '@src/components/Header';
|
||||
import Footer from '@src/components/Footer';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<Header />
|
||||
<Routes />
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
import React from 'react';
|
||||
import { BrowserRouter as Router } from 'react-router-dom';
|
||||
import { render } from '@testing-library/react';
|
||||
import App from '..';
|
||||
|
||||
describe('App', () => {
|
||||
it('renders the header page title and footer github link', () => {
|
||||
const { getByText } = render(
|
||||
<Router basename="/">
|
||||
<App />
|
||||
</Router>
|
||||
);
|
||||
|
||||
expect(getByText('Oh, hello...')).toBeInTheDocument();
|
||||
expect(getByText('Welcome to your new React App!')).toBeInTheDocument();
|
||||
expect(getByText('GitHub')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { default } from './App';
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import React from 'react';
|
||||
import './Footer.scss';
|
||||
|
||||
const Footer = () => (
|
||||
<footer className="footer">
|
||||
<p className="t-link">
|
||||
View the generator on{' '}
|
||||
<a href="https://github.com/dzervoudakes/react-scaffolder">GitHub</a>
|
||||
</p>
|
||||
</footer>
|
||||
);
|
||||
|
||||
export default Footer;
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
@import '~@src/scss/_constants';
|
||||
|
||||
.footer {
|
||||
background: $color-dark-gray;
|
||||
margin-top: -3.6rem;
|
||||
padding: 1.25rem 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 100%;
|
||||
width: 100%;
|
||||
|
||||
.t-link {
|
||||
color: $color-white;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import React from 'react';
|
||||
import { render } from '@testing-library/react';
|
||||
import Footer from '..';
|
||||
|
||||
describe('Footer', () => {
|
||||
it('renders', () => {
|
||||
const { getByText } = render(<Footer />);
|
||||
|
||||
expect(getByText('GitHub')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { default } from './Footer';
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import React from 'react';
|
||||
import './Header.scss';
|
||||
|
||||
const Header = () => (
|
||||
<header className="header">
|
||||
<h1 className="page-title">Oh, hello...</h1>
|
||||
</header>
|
||||
);
|
||||
|
||||
export default Header;
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
@import '~@src/scss/_constants';
|
||||
|
||||
.header {
|
||||
align-items: center;
|
||||
background: $color-dark-gray;
|
||||
color: $color-white;
|
||||
display: flex;
|
||||
height: 3.125rem;
|
||||
|
||||
.page-title {
|
||||
font-weight: 400;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import React from 'react';
|
||||
import { render } from '@testing-library/react';
|
||||
import Header from '..';
|
||||
|
||||
describe('Header', () => {
|
||||
it('renders', () => {
|
||||
const { getByText } = render(<Header />);
|
||||
|
||||
expect(getByText('Oh, hello...')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { default } from './Header';
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import React from 'react';
|
||||
import Layout from '@shared/Layout';
|
||||
import SectionHeader from '@shared/SectionHeader';
|
||||
|
||||
const Home = () => (
|
||||
<Layout>
|
||||
<SectionHeader title="Welcome to your new React App!" description="Made with ❤️" />
|
||||
<p>
|
||||
Reference <code>README.md</code> for build instructions.
|
||||
</p>
|
||||
</Layout>
|
||||
);
|
||||
|
||||
export default Home;
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import React from 'react';
|
||||
import { BrowserRouter as Router, Switch } from 'react-router-dom';
|
||||
import { render } from '@testing-library/react';
|
||||
import Home from '..';
|
||||
|
||||
describe('Home', () => {
|
||||
it('renders the title and description', () => {
|
||||
const { getByText } = render(
|
||||
<Router basename="/">
|
||||
<Switch>
|
||||
<Home />
|
||||
</Switch>
|
||||
</Router>
|
||||
);
|
||||
|
||||
expect(getByText('Welcome to your new React App!')).toBeInTheDocument();
|
||||
expect(getByText('Made with ❤️')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { default } from './Home';
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import Layout from '@shared/Layout';
|
||||
import SectionHeader from '@shared/SectionHeader';
|
||||
|
||||
const Missing = () => (
|
||||
<Layout>
|
||||
<SectionHeader title="That's a 404" description="You must be lost..." />
|
||||
<p>
|
||||
<Link to="/" className="link-purple">
|
||||
Click here
|
||||
</Link>{' '}
|
||||
to return to the main application.
|
||||
</p>
|
||||
</Layout>
|
||||
);
|
||||
|
||||
export default Missing;
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import React from 'react';
|
||||
import { BrowserRouter as Router, Switch } from 'react-router-dom';
|
||||
import { render } from '@testing-library/react';
|
||||
import Missing from '..';
|
||||
|
||||
describe('Missing', () => {
|
||||
it('renders the title and description', () => {
|
||||
const { getByText } = render(
|
||||
<Router basename="/">
|
||||
<Switch>
|
||||
<Missing />
|
||||
</Switch>
|
||||
</Router>
|
||||
);
|
||||
|
||||
expect(getByText("That's a 404")).toBeInTheDocument();
|
||||
expect(getByText('You must be lost...')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { default } from './Missing';
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import React from 'react';
|
||||
import { Route, Switch } from 'react-router-dom';
|
||||
import Home from '@src/components/Home';
|
||||
import Missing from '@src/components/Missing';
|
||||
|
||||
const Routes = () => (
|
||||
<Switch>
|
||||
<Route exact path="/" component={Home} />
|
||||
<Route component={Missing} />
|
||||
</Switch>
|
||||
);
|
||||
|
||||
export default Routes;
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import React from 'react';
|
||||
import { render } from '@testing-library/react';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import Routes from '..';
|
||||
|
||||
describe('Routes', () => {
|
||||
it('renders home page', () => {
|
||||
const { getByText } = render(
|
||||
<MemoryRouter initialEntries={['/']}>
|
||||
<Routes />
|
||||
</MemoryRouter>
|
||||
);
|
||||
|
||||
expect(getByText('Welcome to your new React App!')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders the 404 page', () => {
|
||||
const { getByText } = render(
|
||||
<MemoryRouter initialEntries={['/missing']}>
|
||||
<Routes />
|
||||
</MemoryRouter>
|
||||
);
|
||||
|
||||
expect(getByText("That's a 404")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { default } from './Routes';
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './Layout.scss';
|
||||
|
||||
const propTypes = {
|
||||
children: PropTypes.node.isRequired
|
||||
};
|
||||
|
||||
const Layout = ({ children }) => <main className="layout">{children}</main>;
|
||||
|
||||
Layout.propTypes = propTypes;
|
||||
|
||||
export default Layout;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
.layout {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import React from 'react';
|
||||
import { render } from '@testing-library/react';
|
||||
import Layout from '..';
|
||||
|
||||
describe('Layout', () => {
|
||||
it('renders the child component', () => {
|
||||
const { getByText } = render(
|
||||
<Layout>
|
||||
<div>Child component</div>
|
||||
</Layout>
|
||||
);
|
||||
|
||||
expect(getByText('Child component')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { default } from './Layout';
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './SectionHeader.scss';
|
||||
|
||||
const propTypes = {
|
||||
title: PropTypes.string.isRequired,
|
||||
description: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
const SectionHeader = ({ title, description }) => (
|
||||
<div className="section-header">
|
||||
<h2>{title}</h2>
|
||||
<p className="t-heavy">{description}</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
SectionHeader.propTypes = propTypes;
|
||||
|
||||
export default SectionHeader;
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
@import '~@src/scss/_constants';
|
||||
|
||||
.section-header {
|
||||
border-bottom: $border-light-gray-dotted;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import React from 'react';
|
||||
import { render } from '@testing-library/react';
|
||||
import SectionHeader from '..';
|
||||
|
||||
describe('SectionHeader', () => {
|
||||
const props = {
|
||||
title: 'Foo',
|
||||
description: 'Bar'
|
||||
};
|
||||
|
||||
it('renders the title and description', () => {
|
||||
const { getByText } = render(<SectionHeader {...props} />);
|
||||
|
||||
expect(getByText('Foo')).toBeInTheDocument();
|
||||
expect(getByText('Bar')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { default } from './SectionHeader';
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import * as serviceWorker from './serviceWorker';
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
document.getElementById('root')
|
||||
);
|
||||
|
||||
// If you want your app to work offline and load faster, you can change
|
||||
// unregister() to register() below. Note this comes with some pitfalls.
|
||||
// Learn more about service workers: https://bit.ly/CRA-PWA
|
||||
serviceWorker.unregister();
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import React from 'react';
|
||||
import { BrowserRouter as Router } from 'react-router-dom';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './components/App';
|
||||
import './scss/style.scss';
|
||||
|
||||
const Main = () => (
|
||||
<Router basename="/">
|
||||
<App />
|
||||
</Router>
|
||||
);
|
||||
|
||||
ReactDOM.render(<Main />, document.getElementById('root'));
|
||||
|
||||
if (module.hot) {
|
||||
module.hot.accept();
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
|
||||
<g fill="#61DAFB">
|
||||
<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
|
||||
<circle cx="420.9" cy="296.5" r="45.7"/>
|
||||
<path d="M520.5 78.1z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
|
|
@ -1,5 +0,0 @@
|
|||
/**
|
||||
* @fileoverview Import polyfills for Webpack config entry point.
|
||||
*/
|
||||
import 'core-js/stable';
|
||||
import 'regenerator-runtime/runtime';
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
// fonts
|
||||
$font-primary: 'Source Sans Pro', sans-serif;
|
||||
|
||||
// colors
|
||||
$color-cyan: #0ff;
|
||||
$color-dark-gray: #343a40;
|
||||
$color-gray: #777;
|
||||
$color-off-white: #f1f1f1;
|
||||
$color-light-gray: #e2e2e2;
|
||||
$color-purple: #800080;
|
||||
$color-super-light-gray: #e1e1e1;
|
||||
$color-white: #fff;
|
||||
|
||||
// borders
|
||||
$border-light-gray-dotted: 0.0625rem dotted $color-super-light-gray;
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
background: $color-off-white;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#root {
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
li,
|
||||
th,
|
||||
td {
|
||||
font-family: $font-primary;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: $color-dark-gray;
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 0.9375rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: $color-dark-gray;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
p,
|
||||
li {
|
||||
color: $color-gray;
|
||||
margin-bottom: 0.625rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-cyan;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&.link-purple {
|
||||
color: $color-purple;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
color: $color-purple;
|
||||
}
|
||||
|
||||
.t-heavy {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
@import '_constants';
|
||||
@import '_default';
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
// This optional code is used to register a service worker.
|
||||
// register() is not called by default.
|
||||
|
||||
// This lets the app load faster on subsequent visits in production, and gives
|
||||
// it offline capabilities. However, it also means that developers (and users)
|
||||
// will only see deployed updates on subsequent visits to a page, after all the
|
||||
// existing tabs open on the page have been closed, since previously cached
|
||||
// resources are updated in the background.
|
||||
|
||||
// To learn more about the benefits of this model and instructions on how to
|
||||
// opt-in, read https://bit.ly/CRA-PWA
|
||||
|
||||
const isLocalhost = Boolean(
|
||||
window.location.hostname === 'localhost' ||
|
||||
// [::1] is the IPv6 localhost address.
|
||||
window.location.hostname === '[::1]' ||
|
||||
// 127.0.0.0/8 are considered localhost for IPv4.
|
||||
window.location.hostname.match(
|
||||
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
|
||||
)
|
||||
);
|
||||
|
||||
export function register(config) {
|
||||
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
||||
// The URL constructor is available in all browsers that support SW.
|
||||
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
|
||||
if (publicUrl.origin !== window.location.origin) {
|
||||
// Our service worker won't work if PUBLIC_URL is on a different origin
|
||||
// from what our page is served on. This might happen if a CDN is used to
|
||||
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
|
||||
return;
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
|
||||
|
||||
if (isLocalhost) {
|
||||
// This is running on localhost. Let's check if a service worker still exists or not.
|
||||
checkValidServiceWorker(swUrl, config);
|
||||
|
||||
// Add some additional logging to localhost, pointing developers to the
|
||||
// service worker/PWA documentation.
|
||||
navigator.serviceWorker.ready.then(() => {
|
||||
console.log(
|
||||
'This web app is being served cache-first by a service ' +
|
||||
'worker. To learn more, visit https://bit.ly/CRA-PWA'
|
||||
);
|
||||
});
|
||||
} else {
|
||||
// Is not localhost. Just register service worker
|
||||
registerValidSW(swUrl, config);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function registerValidSW(swUrl, config) {
|
||||
navigator.serviceWorker
|
||||
.register(swUrl)
|
||||
.then(registration => {
|
||||
registration.onupdatefound = () => {
|
||||
const installingWorker = registration.installing;
|
||||
if (installingWorker == null) {
|
||||
return;
|
||||
}
|
||||
installingWorker.onstatechange = () => {
|
||||
if (installingWorker.state === 'installed') {
|
||||
if (navigator.serviceWorker.controller) {
|
||||
// At this point, the updated precached content has been fetched,
|
||||
// but the previous service worker will still serve the older
|
||||
// content until all client tabs are closed.
|
||||
console.log(
|
||||
'New content is available and will be used when all ' +
|
||||
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
|
||||
);
|
||||
|
||||
// Execute callback
|
||||
if (config && config.onUpdate) {
|
||||
config.onUpdate(registration);
|
||||
}
|
||||
} else {
|
||||
// At this point, everything has been precached.
|
||||
// It's the perfect time to display a
|
||||
// "Content is cached for offline use." message.
|
||||
console.log('Content is cached for offline use.');
|
||||
|
||||
// Execute callback
|
||||
if (config && config.onSuccess) {
|
||||
config.onSuccess(registration);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error during service worker registration:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function checkValidServiceWorker(swUrl, config) {
|
||||
// Check if the service worker can be found. If it can't reload the page.
|
||||
fetch(swUrl, {
|
||||
headers: { 'Service-Worker': 'script' },
|
||||
})
|
||||
.then(response => {
|
||||
// Ensure service worker exists, and that we really are getting a JS file.
|
||||
const contentType = response.headers.get('content-type');
|
||||
if (
|
||||
response.status === 404 ||
|
||||
(contentType != null && contentType.indexOf('javascript') === -1)
|
||||
) {
|
||||
// No service worker found. Probably a different app. Reload the page.
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister().then(() => {
|
||||
window.location.reload();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// Service worker found. Proceed as normal.
|
||||
registerValidSW(swUrl, config);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
console.log(
|
||||
'No internet connection found. App is running in offline mode.'
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export function unregister() {
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.ready
|
||||
.then(registration => {
|
||||
registration.unregister();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error.message);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
||||
// allows you to do things like:
|
||||
// expect(element).toHaveTextContent(/react/i)
|
||||
// learn more: https://github.com/testing-library/jest-dom
|
||||
import '@testing-library/jest-dom/extend-expect';
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
/**
|
||||
* @fileoverview Configuration file for Webpack development and production builds.
|
||||
*/
|
||||
const { merge } = require('webpack-merge');
|
||||
const baseConfig = require('./build/webpack.base');
|
||||
|
||||
const envs = {
|
||||
development: 'dev',
|
||||
production: 'prod'
|
||||
};
|
||||
|
||||
const env = envs[process.env.NODE_ENV || 'development'];
|
||||
const envConfig = require(`./build/webpack.${env}.js`);
|
||||
|
||||
module.exports = merge(baseConfig, envConfig);
|
||||
8018
frontend/yarn.lock
8018
frontend/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue