updated boilerplate for -v4.0.8

Author: virtualvivek

.eslintcache

@@ -1 +1 @@
-[{"E:\\Github\\react-windows-ui-boilerplate\\src\\index.js":"1","E:\\Github\\react-windows-ui-boilerplate\\src\\App.js":"2","E:\\Github\\react-windows-ui-boilerplate\\src\\pages\\page1\\index.js":"3","E:\\Github\\react-windows-ui-boilerplate\\src\\pages\\page2\\index.js":"4","E:\\Github\\react-windows-ui-boilerplate\\src\\pages\\page0\\index.js":"5"},{"size":349,"mtime":1625935656044,"results":"6","hashOfConfig":"7"},{"size":1585,"mtime":1638010648155,"results":"8","hashOfConfig":"7"},{"size":529,"mtime":1632415535091,"results":"9","hashOfConfig":"7"},{"size":958,"mtime":1632415560234,"results":"10","hashOfConfig":"7"},{"size":1298,"mtime":1632415045483,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"171caqg",{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"E:\\Github\\react-windows-ui-boilerplate\\src\\index.js",[],["23","24"],"E:\\Github\\react-windows-ui-boilerplate\\src\\App.js",[],"E:\\Github\\react-windows-ui-boilerplate\\src\\pages\\page1\\index.js",[],"E:\\Github\\react-windows-ui-boilerplate\\src\\pages\\page2\\index.js",[],"E:\\Github\\react-windows-ui-boilerplate\\src\\pages\\page0\\index.js",[],{"ruleId":"25","replacedBy":"26"},{"ruleId":"27","replacedBy":"28"},"no-native-reassign",["29"],"no-negated-in-lhs",["30"],"no-global-assign","no-unsafe-negation"]
+[{"E:\\Github\\react-windows-ui-boilerplate\\src\\index.js":"1","E:\\Github\\react-windows-ui-boilerplate\\src\\App.js":"2","E:\\Github\\react-windows-ui-boilerplate\\src\\pages\\page1\\index.js":"3","E:\\Github\\react-windows-ui-boilerplate\\src\\pages\\page2\\index.js":"4","E:\\Github\\react-windows-ui-boilerplate\\src\\pages\\page0\\index.js":"5"},{"size":349,"mtime":1625935656044,"results":"6","hashOfConfig":"7"},{"size":2050,"mtime":1638122885465,"results":"8","hashOfConfig":"7"},{"size":494,"mtime":1638122965504,"results":"9","hashOfConfig":"7"},{"size":906,"mtime":1638122771673,"results":"10","hashOfConfig":"7"},{"size":1314,"mtime":1638122848946,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"171caqg",{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"E:\\Github\\react-windows-ui-boilerplate\\src\\index.js",[],["23","24"],"E:\\Github\\react-windows-ui-boilerplate\\src\\App.js",[],"E:\\Github\\react-windows-ui-boilerplate\\src\\pages\\page1\\index.js",[],"E:\\Github\\react-windows-ui-boilerplate\\src\\pages\\page2\\index.js",[],"E:\\Github\\react-windows-ui-boilerplate\\src\\pages\\page0\\index.js",[],{"ruleId":"25","replacedBy":"26"},{"ruleId":"27","replacedBy":"28"},"no-native-reassign",["29"],"no-negated-in-lhs",["30"],"no-global-assign","no-unsafe-negation"]

package-lock.json

@@ -23,7 +23,7 @@
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
-    "react-windows-ui": "^4.0.4",
+    "react-windows-ui": "^4.0.8",
     "web-vitals": "^0.2.4"
   },
   "repository": {

package.json

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
-import { AppTheme, SplashScreen, NavBar, NavBarLink, TransitionToLeft } from 'react-windows-ui'
+import { AppTheme, SplashScreen, NavBar, NavBarLink, NavSearchSuggestion } from 'react-windows-ui'
 import Page0 from './pages/page0'
 import Page1 from './pages/page1'
 import Page2 from './pages/page2'
@@ -18,23 +18,32 @@ const App = () => {
     <Router basename="react-windows-ui">
 
       <SplashScreen
-        //duration={1000}
+        //duration={1000} // adjust how long it takes after render 
         isVisible={splash}
         title={"react-windows-ui-boilerplate"}
       />
 
-      <AppTheme
-        scheme="system"
+      <AppTheme //added AppTheme to make app reactive with theme
+        scheme="system" // available props - 'light', 'dark' or 'system'
       />
 
-      <TransitionToLeft />
-      {/*for registering right page transition*/}
-
       <NavBar 
         title="App Boilderplate"
       //mobileHasIcons={true}
         shadowOnScroll={true}>
 
+        {/* Optional component - emphasizes navbar Search funtionality */}
+
+        <NavSearchSuggestion
+          placeholder="Search Your Pages.."
+          tooltip="Search Tooltip"
+          data={[
+            {label: 'home', link: '/', icon: <i className="icons10-home"></i>},
+            {label: 'Page 1', link: '/page1'},
+            {label: 'Page 2', link: '/page2'}
+          ]}
+        />
+
         <h1>Pages</h1>
         <div className="app-hr"></div>
 

src/App.js

@@ -14,14 +14,14 @@ class Page0 extends React.Component {
   render() {
     return (
     <NavPageContainer
-      animateTransition>
+      animateTransition={true}>
         <div
-          style={{backgroundColor:'#282C34',height:'100%',textAlign:'center'}}
+          style={{backgroundColor: '#282C34', height: '100%', textAlign: 'center'}}
           className="app-align-center">
             <br/><br/>
           <i className="icons10-windows app-align-center"
-            style={{fontSize:140,color:'#67DBF9'}}></i>
-          <div style={{color:'#fff'}}>
+            style={{fontSize: 140,color: '#67DBF9'}}></i>
+          <div style={{color: '#fff'}}>
             <h1 className="m-0">Welcome to react-windows-ui</h1>
             <br/><br/><br/><br/><br/><br/><br/>
             <h2>Edit App.js and save to see changes.</h2>
@@ -36,7 +36,7 @@ class Page0 extends React.Component {
 
     </NavPageContainer>
   );
-}
+ }
 }
 
 export default Page0

src/pages/page0/index.js

@@ -13,14 +13,12 @@ class Page1 extends React.Component {
   render() {
     return (
     <NavPageContainer
-      hasPadding
-      animateTransition>
+      hasPadding={true}
+      animateTransition={true}>
 
       <h1>Page 1</h1>
       <p>Start adding your fantastic ui here.</p>
       <Link>Components here</Link>
-      <br/>
-      <Link>Components here</Link>
 
     </NavPageContainer>
   );

src/pages/page1/index.js

@@ -20,8 +20,6 @@ class Page2 extends React.Component {
           <h1>Page2</h1>
           <p>Page with split containers : center | right</p>
           <Link>Components here</Link>
-          <br/>
-          <Link>Components here</Link>
         </NavPageContainerInner>
 
 
@@ -30,7 +28,7 @@ class Page2 extends React.Component {
           <p>Your Right container contents</p>
           <Link>Components here</Link>
           <br/>
-          <Link>Components here</Link>
+          <Link>More Components here</Link>
         </NavPageContainerRight>
 
     </NavPageContainer>