Skip to content

Commit da785d2

Browse files
virtualvivekvirtualvivek
committed
updated boilerplate -v4.1.0
1 parent c2065d4 commit da785d2

File tree

8 files changed

+21554
-245
lines changed

8 files changed

+21554
-245
lines changed

‎.eslintcache‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +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":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"]
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":390,"mtime":1658599904441,"results":"6","hashOfConfig":"7"},{"size":2332,"mtime":1658601666626,"results":"8","hashOfConfig":"7"},{"size":383,"mtime":1658599830011,"results":"9","hashOfConfig":"7"},{"size":766,"mtime":1658599841931,"results":"10","hashOfConfig":"7"},{"size":1166,"mtime":1658599814984,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"2rqzpi",{"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"]

‎package-lock.json‎

Lines changed: 21457 additions & 124 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-windows-ui-boilerplate",
3-
"version": "1.0.0",
3+
"version": "1.0.1",
44
"private": true,
55
"description": "Build full featured Windows fluent UI apps using ReactJS.",
66
"keywords": [
@@ -19,12 +19,12 @@
1919
"email": "author@email.com"
2020
},
2121
"dependencies": {
22-
"react": "^17.0.1",
23-
"react-dom": "^17.0.1",
24-
"react-router-dom": "^5.2.0",
22+
"react": "^18.2.0",
23+
"react-dom": "^18.2.0",
24+
"react-router-dom": "^6.3.0",
2525
"react-scripts": "4.0.1",
26-
"react-windows-ui": "^4.0.8",
27-
"web-vitals": "^0.2.4"
26+
"react-windows-ui": "^4.1.0",
27+
"web-vitals": "^2.1.4"
2828
},
2929
"repository": {
3030
"type": "git",

‎src/App.js‎

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import React, { useState, useEffect } from 'react'
2-
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
3-
import { AppTheme, SplashScreen, NavBar, NavBarLink, NavSearchSuggestion } from 'react-windows-ui'
4-
import Page0 from './pages/page0'
5-
import Page1 from './pages/page1'
6-
import Page2 from './pages/page2'
7-
import Img from './assets/mountain.jpg'
1+
import React, { useState, useEffect } from "react";
2+
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
3+
import { AppTheme, SplashScreen, NavBar, NavBarLink, NavSearchSuggestion, NavThemeSwitcher } from "react-windows-ui";
4+
import Page0 from "./pages/page0";
5+
import Page1 from "./pages/page1";
6+
import Page2 from "./pages/page2";
7+
import Img from "./assets/mountain.jpg";
88

99
const App = () => {
1010

@@ -18,22 +18,26 @@ const App = () => {
1818
<Router basename="react-windows-ui">
1919

2020
<SplashScreen
21-
//duration={1000} // adjust how long it takes after render
21+
//duration={1000} /* Add additional delay before page loads */
2222
isVisible={splash}
23-
title={"react-windows-ui-boilerplate"}
23+
title={"react-windows-ui"}
2424
/>
2525

26-
<AppTheme //added AppTheme to make app reactive with theme
27-
scheme="system" // available props - 'light', 'dark' or 'system'
26+
<AppTheme // To make app reactive with theme
27+
scheme="system" // Available props - 'light', 'dark' or 'system'
2828
/>
2929

3030
<NavBar
31-
title="App Boilderplate"
32-
//mobileHasIcons={true}
33-
shadowOnScroll={true}>
31+
title="App Name"
32+
shadowOnScroll={true}
33+
titleBarMobile={
34+
<div style={{display: "flex", justifyContent: "space-between", width: "calc(100% - 60px)"}}>
35+
<span className="app-navbar-name">React-windows-ui</span>
36+
<span className="app-navbar-name">Subtitle</span>
37+
</div>}
38+
>
3439

3540
{/* Optional component - emphasizes navbar Search funtionality */}
36-
3741
<NavSearchSuggestion
3842
placeholder="Search Your Pages.."
3943
tooltip="Search Tooltip"
@@ -43,6 +47,7 @@ const App = () => {
4347
{label: 'Page 2', link: '/page2'}
4448
]}
4549
/>
50+
<NavThemeSwitcher/>
4651

4752
<h1>Pages</h1>
4853
<div className="app-hr"></div>
@@ -51,7 +56,7 @@ const App = () => {
5156
to="/"
5257
exact={true}
5358
text="Home"
54-
img={Img}
59+
imgSrc={Img}
5560
/>
5661

5762
<NavBarLink
@@ -68,11 +73,11 @@ const App = () => {
6873

6974
</NavBar>
7075

71-
<Switch>
72-
<Route path="/" component={Page0} exact />
73-
<Route path="/page1" component={Page1} />
74-
<Route path="/page2" component={Page2} />
75-
</Switch>
76+
<Routes>
77+
<Route path="/" element={<Page0/>} exact />
78+
<Route path="/page1" element={<Page1/>} />
79+
<Route path="/page2" element={<Page2/>} />
80+
</Routes>
7681

7782
</Router>
7883
)

‎src/index.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import React from 'react'
2-
import ReactDOM from 'react-dom'
3-
import 'react-windows-ui/config/app-config.css'
4-
import 'react-windows-ui/dist/react-windows-ui.min.css'
5-
import 'react-windows-ui/icons/fonts/fonts.min.css'
6-
import App from './App'
1+
import React from "react";
2+
import ReactDOM from "react-dom/client";
3+
import "react-windows-ui/config/app-config.css";
4+
import "react-windows-ui/dist/react-windows-ui.min.css";
5+
import "react-windows-ui/icons/fonts/fonts.min.css";
6+
import App from "./App";
77

8-
ReactDOM.render(
8+
const root = ReactDOM.createRoot(document.getElementById("root"));
9+
root.render(
910
<React.StrictMode>
1011
<App />
11-
</React.StrictMode>,
12-
document.getElementById('root')
12+
</React.StrictMode>
1313
);

‎src/pages/page0/index.js‎

Lines changed: 25 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,33 @@
1-
import React from 'react'
2-
import { NavPageContainer } from 'react-windows-ui'
1+
import React from "react";
2+
import { NavPageContainer } from "react-windows-ui";
33

4-
class Page0 extends React.Component {
5-
6-
constructor(props) {
7-
super(props);
8-
this.state = {
9-
10-
}
11-
}
12-
13-
14-
render() {
15-
return (
4+
const Page0 = () => {
5+
return (
166
<NavPageContainer
177
animateTransition={true}>
18-
<div
19-
style={{backgroundColor: '#282C34', height: '100%', textAlign: 'center'}}
20-
className="app-align-center">
21-
<br/><br/>
22-
<i className="icons10-windows app-align-center"
23-
style={{fontSize: 140,color: '#67DBF9'}}></i>
24-
<div style={{color: '#fff'}}>
25-
<h1 className="m-0">Welcome to react-windows-ui</h1>
26-
<br/><br/><br/><br/><br/><br/><br/>
27-
<h2>Edit App.js and save to see changes.</h2>
28-
<br/>
29-
<h2>
30-
<a href="https://virtualvivek.github.io/react-windows-ui/" rel="noreferrer" target="_blank" style={{color:'#67DBF9',background:'transparent'}}>See Documentation </a>
31-
|
32-
<a href="https://github.com/virtualvivek/react-windows-ui" rel="noreferrer" target="_blank" style={{color:'#67DBF9',background:'transparent'}}> Repository</a>
33-
</h2>
34-
</div>
8+
9+
<div
10+
style={{backgroundColor: '#282C34', height: '100%', textAlign: 'center'}}
11+
className="app-align-center">
12+
<br/><br/>
13+
<i className="icons10-windows app-align-center"
14+
style={{fontSize: 120,color: '#67DBF9'}}></i>
15+
<div style={{color: '#fff'}}>
16+
<h1 className="m-0">Welcome to react-windows-ui</h1>
17+
<h4>-v4.1.0</h4>
18+
<br/><br/><br/><br/>
19+
<h2>Edit App.js and save to see changes.</h2>
20+
<br/>
21+
<h2>
22+
<a href="https://virtualvivek.github.io/react-windows-ui/" rel="noreferrer" target="_blank" style={{color:'#67DBF9',background:'transparent'}}>See Documentation </a>
23+
|
24+
<a href="https://github.com/virtualvivek/react-windows-ui" rel="noreferrer" target="_blank" style={{color:'#67DBF9',background:'transparent'}}> Repository</a>
25+
</h2>
3526
</div>
36-
27+
</div>
28+
3729
</NavPageContainer>
3830
);
39-
}
4031
}
4132

42-
export default Page0
33+
export default Page0;

‎src/pages/page1/index.js‎

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,18 @@
1-
import React from 'react'
2-
import { NavPageContainer,Link } from 'react-windows-ui'
1+
import React from "react";
2+
import { NavPageContainer, Link } from "react-windows-ui";
33

4-
class Page1 extends React.Component {
5-
6-
constructor(props) {
7-
super(props);
8-
this.state = {
9-
}
10-
}
11-
12-
13-
render() {
14-
return (
4+
const Page1 = () => {
5+
return (
156
<NavPageContainer
167
hasPadding={true}
178
animateTransition={true}>
189

1910
<h1>Page 1</h1>
2011
<p>Start adding your fantastic ui here.</p>
2112
<Link>Components here</Link>
22-
13+
2314
</NavPageContainer>
2415
);
2516
}
26-
}
2717

28-
export default Page1
18+
export default Page1;

‎src/pages/page2/index.js‎

Lines changed: 24 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,29 @@
1-
import React from 'react'
2-
import { NavPageContainer,NavPageContainerInner,NavPageContainerRight,Link } from 'react-windows-ui'
3-
4-
class Page2 extends React.Component {
5-
6-
constructor(props) {
7-
super(props);
8-
this.state = {
9-
}
10-
}
11-
12-
13-
render() {
14-
return (
15-
<NavPageContainer
16-
hasPadding={false}
17-
animateTransition={true}>
18-
19-
<NavPageContainerInner>
20-
<h1>Page2</h1>
21-
<p>Page with split containers : center | right</p>
22-
<Link>Components here</Link>
23-
</NavPageContainerInner>
24-
25-
26-
<NavPageContainerRight>
27-
<h4 className="m-0">Right Section Container</h4>
28-
<p>Your Right container contents</p>
29-
<Link>Components here</Link>
30-
<br/>
31-
<Link>More Components here</Link>
32-
</NavPageContainerRight>
1+
import React from "react";
2+
import { NavPageContainer, NavPageContainerInner, NavPageContainerRight, Link } from "react-windows-ui";
3+
4+
const Page2 = () => {
5+
return (
6+
<NavPageContainer
7+
hasPadding={false}
8+
animateTransition={true}>
9+
10+
<NavPageContainerInner>
11+
<h1>Page2</h1>
12+
<p>Page with split containers : center + right</p>
13+
<Link>Components here</Link>
14+
</NavPageContainerInner>
15+
16+
17+
<NavPageContainerRight>
18+
<h4 className="m-0">Right Section Container</h4>
19+
<p>Your Right container contents</p>
20+
<Link>Components here</Link>
21+
<br/>
22+
<Link>More Components here</Link>
23+
</NavPageContainerRight>
3324

3425
</NavPageContainer>
3526
);
3627
}
37-
}
3828

39-
export default Page2
29+
export default Page2;

0 commit comments

Comments
 (0)