Update readme'

Author: imranhsayed

README.md

@@ -1,4 +1,4 @@
-# React App Boilerplate
+# React WordPress Theme 🎨
 [![Project Status: Active – The project has reached a stable, usable state and is being actively developed.](https://www.repostatus.org/badges/latest/active.svg)](https://www.repostatus.org/#active) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 
 A React theme for WordPress, using Decoupled Architecture.
@@ -14,6 +14,34 @@ Backend in WordPress.
 |--------------------------------------------------------|-----------------|
 | [Imran Sayed](mailto:[email protected])       |  @imranhsayed   |
 
+## Usage
+
+1. Clone the WordPress plugin [REST API endpoints](https://github.com/imranhsayed/rest-api-endpoints) in your WordPress
+plugin directory and activate it.
+
+2. The REST API endpoints, registers custom endpoints and also registers two menus. So please create two menus
+`Header Menu` and `Footer Menu` and select their respective menu location as `Travel Header Menu` and `Travel Footer Menu`
+as shown in the picture.
+
+- Set Header menu as `Travel Header Menu`
+
+![](demos/header-menu.png)
+
+- Set Footer menu as `Travel Footer Menu`
+![](demos/footer-menu.png)
+
+3. Set the siteLogo in `client-config.js`
+
+```javascript
+const config = {
+	siteURL: 'https://wordpressSite.com',
+	headerMenuLocation: 'travel-menu-header', // Change this menu location name to another, if you would like a different menu to be used for header. 
+	footerMenuLocation: 'travel-menu-footer', // Change this menu location name to another, if you would like a different menu to be used for footer.
+	siteTitle: 'React WordPress Theme', // Will be used if we don't set site title from WordPress customizer.
+	siteDescription: 'Awesome theme', // Will be used if we don't set site description from WordPress customizer.
+};
+```
+
 ## Development
 
 **Install**
@@ -64,6 +92,18 @@ Format code with prettier
 npm run format-js
 ```
 
+Run test
+
+```bash
+npm run test
+```
+
+Update test
+
+```bash
+npm run test:update
+```
+
 **precommit**
 
 You should run precommit to check for any eslint, stylint errors/warnings and to ensure all tests are passing before making a PR ready for review.

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'i-am-a-stubbed-file';

__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

client-config.js

@@ -1,9 +1,9 @@
 const config = {
-	siteURL: 'http://localhost:8888/newsletter',
+	siteURL: 'https://codeytek.com/woo-next',
 	headerMenuLocation: 'travel-menu-header',
 	footerMenuLocation: 'travel-menu-footer',
 	siteTitle: 'React WordPress Theme', // Will be used if we don't set site title from WordPress customizer.
-	siteDescription: 'Awesome theme' // Will be used if we don't set site description from WordPress customizer.
+	siteDescription: 'Awesome theme', // Will be used if we don't set site description from WordPress customizer.
 };
 
 export default config;

demos/footer-menu.png

@@ -8,8 +8,8 @@
     "prod": "webpack --mode=production",
     "eslint": "eslint ./src/*.js ./src/**/**/**/*.js ./src/**/**/**/**/*.js",
     "eslint:fix": "eslint --fix ./src/*.js ./src/**/**/**/*.js ./src/**/**/**/**/*.js",
-    "stylelint": "stylelint ./src/*.scss",
-    "stylelint:fix": "stylelint ./src/*.scss --fix",
+    "stylelint": "stylelint ./src/*.scss ./src/**/*.scss ./src/**/**/*.scss",
+    "stylelint:fix": "stylelint ./src/*.scss ./src/**/*.scss ./src/**/**/*.scss --fix",
     "format-js": "prettier .prettierrc.js --write ./src/*.js ./src/**/**/**/*.js ./src/**/**/**/**/*.js",
     "precommit": "npm run format-js && npm run eslint:fix && npm run stylelint:fix && npm run test",
     "test": "jest --verbose",
@@ -74,20 +74,14 @@
   "jest": {
     "testMatch": [
       "**/test/**/*.[jt]s?(x)",
-      "**/test/**/**/*.[jt]s?(x)"
+      "**/**/test/**/*.[jt]s?(x)"
     ],
     "testPathIgnorePatterns": [
       "<rootDir>/node_modules/"
     ],
-    "moduleNameMapper": {
-      "^image![a-zA-Z0-9$_-]+$": "GlobalImageStub",
-      "^[./a-zA-Z0-9$_-]+\\.png$": "<rootDir>/RelativeImageStub.js",
-      "module_name_(.*)": "<rootDir>/substituted_module_$1.js",
-      "assets/(.*)": [
-        "<rootDir>/images/$1",
-        "<rootDir>/photos/$1",
-        "<rootDir>/recipes/$1"
-      ]
-    }
+	"moduleNameMapper": {
+	  "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
+	  "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js"
+	}
   }
 }

demos/header-menu.png

@@ -16,7 +16,6 @@ import Header from '../index';
 
 describe( 'Test Header Component', () => {
 	it( 'Should match Header snapshot and render correctly', () => {
-
 		const headerData = {
 			data: {
 				header: {
@@ -29,9 +28,11 @@ describe( 'Test Header Component', () => {
 			},
 			loading: false,
 			errorMsg: '',
-		}
+		};
 
-		const component = renderer.create( <Header headerData={ headerData }/> );
+		const component = renderer.create(
+			<Header headerData={ headerData } />
+		);
 
 		const tree = component.toJSON();
 

package.json

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test Layout Component Should match Layout snapshot and render correctly 1`] = `
+<div>
+  
+  
+</div>
+`;

src/components/header/test/index.js

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test Home Component Should match Home snapshot and render correctly 1`] = `
+<div>
+  
+  Content
+  
+</div>
+`;

src/components/layout/test/__snapshots__/index.js.snap

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test Page Component Should match Page snapshot and render correctly 1`] = `
+<div>
+  
+  
+</div>
+`;

src/components/pages/home/test/__snapshots__/index.js.snap

@@ -34,13 +34,20 @@ input::-moz-focus-inner {
 	margin: 0;
 }
 
-ul, ol, dd {
+ul,
+ol,
+dd {
 	margin: 0;
 	padding: 0;
 	list-style: none;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
 	margin: 0;
 	font-size: inherit;
 	font-weight: inherit;

src/components/pages/page/test/__snapshots__/index.js.snap

@@ -1,5 +1,5 @@
-body{
-	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+body {
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 16px;
 	font-weight: 400;
 	line-height: 1.3;

src/sass/base/_reset.scss

@@ -0,0 +1 @@
+/* Buttons style to be added*/

src/sass/base/_typography.scss

@@ -7,7 +7,7 @@
 	right: -100vw;
 	transition: 0.3s all;
 	background-color: $white;
-	height: calc( 100vh - 80px );
+	height: calc(100vh - 80px);
 	border-top: 1px solid $color__border;
 	width: 100vw;
 	z-index: 1;
@@ -16,7 +16,6 @@
 		right: 0;
 	}
 
-
 	@media only screen and ( min-width: $desktop ) {
 		align-items: center;
 		justify-content: flex-end;
@@ -90,7 +89,7 @@
 			}
 		}
 
-		&:hover .header-nav__submenu{
+		&:hover .header-nav__submenu {
 			display: block;
 		}
 

src/sass/components/_buttons.scss

@@ -7,5 +7,5 @@
 	position: absolute;
 	left: 50%;
 	top: 50%;
-	transform: translate(-50%,-50%);
+	transform: translate(-50%, -50%);
 }

src/sass/components/_nav.scss

@@ -0,0 +1 @@
+/* Buttons style to be added*/

src/sass/general/_general.scss

@@ -0,0 +1 @@
+/* Buttons style to be added*/