Adds new starter example

master
Atul R 5 years ago
parent 0b214b3019
commit 817690deb3
  1. 2
      .babelrc
  2. 51
      package-lock.json
  3. 2
      package.json
  4. 77
      src/app.tsx
  5. 6
      src/components/mytext.tsx
  6. 29
      src/components/stepone.tsx
  7. 48
      src/components/steptwo.tsx
  8. 3
      src/index.tsx

@ -1,6 +1,6 @@
{ {
"presets": [ "presets": [
["@babel/preset-env", { "targets": { "node": "current" } }], ["@babel/preset-env", { "targets": { "node": "12" } }],
"@babel/preset-typescript", "@babel/preset-typescript",
"@babel/preset-react" "@babel/preset-react"
], ],

51
package-lock.json generated

@ -1007,8 +1007,7 @@
"@types/node": { "@types/node": {
"version": "12.7.1", "version": "12.7.1",
"resolved": "https://registry.npmjs.org/@types/node/-/node-12.7.1.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-12.7.1.tgz",
"integrity": "sha512-aK9jxMypeSrhiYofWWBf/T7O+KwaiAHzM4sveCdWPn71lzUSMimRnKzhXDKfKwV1kWoBo2P1aGgaIYGLf9/ljw==", "integrity": "sha512-aK9jxMypeSrhiYofWWBf/T7O+KwaiAHzM4sveCdWPn71lzUSMimRnKzhXDKfKwV1kWoBo2P1aGgaIYGLf9/ljw=="
"dev": true
}, },
"@types/prop-types": { "@types/prop-types": {
"version": "15.7.1", "version": "15.7.1",
@ -1905,6 +1904,25 @@
"resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.2.tgz", "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.2.tgz",
"integrity": "sha512-GkfeAQh+QNy3wquu9oIZr6SS5x7wGdSgNQvD10X3r+AZr1Oys22HW8kAmDMvNg2+Dm0TeGaEuO8gFwdBXxwO8A==" "integrity": "sha512-GkfeAQh+QNy3wquu9oIZr6SS5x7wGdSgNQvD10X3r+AZr1Oys22HW8kAmDMvNg2+Dm0TeGaEuO8gFwdBXxwO8A=="
}, },
"chrome-launcher": {
"version": "0.12.0",
"resolved": "https://registry.npmjs.org/chrome-launcher/-/chrome-launcher-0.12.0.tgz",
"integrity": "sha512-rBUP4tvWToiileDi3UR0SbWKoUoDCYTRmVND2sdoBL1xANBgVz8V9h1yQluj3MEQaBJg0fRw7hW82uOPrJus7A==",
"requires": {
"@types/node": "*",
"is-wsl": "^2.1.0",
"lighthouse-logger": "^1.0.0",
"mkdirp": "0.5.1",
"rimraf": "^2.6.1"
},
"dependencies": {
"is-wsl": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.1.1.tgz",
"integrity": "sha512-umZHcSrwlDHo2TGMXv0DZ8dIUGunZ2Iv68YZnrmCiBPkZ4aaOhtv7pXJKeki9k3qJ3RJr0cDyitcl5wEH3AYog=="
}
}
},
"chrome-trace-event": { "chrome-trace-event": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz", "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz",
@ -4298,6 +4316,15 @@
"invert-kv": "^2.0.0" "invert-kv": "^2.0.0"
} }
}, },
"lighthouse-logger": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/lighthouse-logger/-/lighthouse-logger-1.2.0.tgz",
"integrity": "sha512-wzUvdIeJZhRsG6gpZfmSCfysaxNEr43i+QT+Hie94wvHDKFLi4n7C2GqZ4sTC+PH5b5iktmXJvU87rWvhP3lHw==",
"requires": {
"debug": "^2.6.8",
"marky": "^1.2.0"
}
},
"listenercount": { "listenercount": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/listenercount/-/listenercount-1.0.1.tgz", "resolved": "https://registry.npmjs.org/listenercount/-/listenercount-1.0.1.tgz",
@ -4393,6 +4420,11 @@
"object-visit": "^1.0.0" "object-visit": "^1.0.0"
} }
}, },
"marky": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/marky/-/marky-1.2.1.tgz",
"integrity": "sha512-md9k+Gxa3qLH6sUKpeC2CNkJK/Ld+bEz5X96nYwloqphQE0CKCVEKco/6jxEZixinqNdz5RFi/KaCyfbMDMAXQ=="
},
"md5.js": { "md5.js": {
"version": "1.3.5", "version": "1.3.5",
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz", "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@ -4850,6 +4882,21 @@
"wrappy": "1" "wrappy": "1"
} }
}, },
"open": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/open/-/open-7.0.0.tgz",
"integrity": "sha512-K6EKzYqnwQzk+/dzJAQSBORub3xlBTxMz+ntpZpH/LyCa1o6KjXhuN+2npAaI9jaSmU3R1Q8NWf4KUWcyytGsQ==",
"requires": {
"is-wsl": "^2.1.0"
},
"dependencies": {
"is-wsl": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.1.1.tgz",
"integrity": "sha512-umZHcSrwlDHo2TGMXv0DZ8dIUGunZ2Iv68YZnrmCiBPkZ4aaOhtv7pXJKeki9k3qJ3RJr0cDyitcl5wEH3AYog=="
}
}
},
"os-browserify": { "os-browserify": {
"version": "0.3.0", "version": "0.3.0",
"resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz", "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",

@ -13,6 +13,8 @@
"dependencies": { "dependencies": {
"@nodegui/nodegui": "^0.3.1", "@nodegui/nodegui": "^0.3.1",
"@nodegui/react-nodegui": "^0.1.9", "@nodegui/react-nodegui": "^0.1.9",
"chrome-launcher": "^0.12.0",
"open": "^7.0.0",
"react": "^16.9.0" "react": "^16.9.0"
}, },
"devDependencies": { "devDependencies": {

@ -1,65 +1,42 @@
import { import { Text, Window, hot, View } from "@nodegui/react-nodegui";
View,
Text,
Window,
Image,
ScrollArea,
hot
} from "@nodegui/react-nodegui";
import path from "path";
import React from "react"; import React from "react";
import { AspectRatioMode } from "@nodegui/nodegui"; import { StepOne } from "./components/stepone";
import { MyText } from "./components/mytext"; import { StepTwo } from "./components/steptwo";
import imageUrl from "../assets/nodegui.jpg";
const distImgUrl = path.resolve(__dirname, imageUrl); const minSize = { width: 500, height: 500 };
const minSize = { width: 500, height: 400 };
class App extends React.Component { class App extends React.Component {
render() { render() {
return ( return (
<> <Window windowTitle="Hello 👋🏽" minSize={minSize} styleSheet={styleSheet}>
<Window minSize={minSize} styleSheet={styleSheet}> <View style={containerStyle}>
<Text>Yo!!</Text> <Text id="welcome-text">Welcome to NodeGui 🐕</Text>
</Window> <Text id="step-1">1. Play around</Text>
<Window minSize={minSize} styleSheet={styleSheet}> <StepOne />
<ScrollArea style={`height: '100%';width: '100%';`}> <Text id="step-2">2. Debug</Text>
<View id="container"> <StepTwo />
<Text style="font-size: 15px; font-weight: bold; margin-bottom: 20px;"> </View>
Testing </Window>
</Text>
<MyText />
<Image
style={imageStyle}
src={distImgUrl}
aspectRatioMode={AspectRatioMode.KeepAspectRatio}
/>
</View>
</ScrollArea>
</Window>
</>
); );
} }
} }
const imageStyle = ` const containerStyle = `
height: "700px"; flex: 1;
width: "700px"; `;
qproperty-alignment: 'AlignHCenter';
`;
const styleSheet = ` const styleSheet = `
#container { #welcome-text {
flex: 1; font-size: 24px;
min-height: 0; padding-top: 20px;
min-width: 0; qproperty-alignment: 'AlignHCenter';
width: '900'; }
height: '900';
flex-direction: column; #step-1, #step-2 {
align-items: 'center'; font-size: 18px;
justify-content: 'center'; padding-top: 10px;
background-color: 'grey'; padding-horizontal: 20px;
} }
`; `;
export default hot(App); export default hot(App);

@ -1,6 +0,0 @@
import { Text } from "@nodegui/react-nodegui";
import React from "react";
export const MyText = () => {
return <Text>{`Yolo`}</Text>;
};

@ -0,0 +1,29 @@
import { Text, View } from "@nodegui/react-nodegui";
import React from "react";
export function StepOne() {
return (
<View style={containerStyle}>
<Text wordWrap={true}>
Edit App.tsx to make changes to this screen. Then come back to see your
changes. Changes should reflect live thanks to Hot Reloading. 🔥
</Text>
<Text>
{`
<p style="color: #6200ee;">
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
You can even use <i><strong>Rich Html</strong></i> text like this if you want 😎.
</p>
<hr />
`}
</Text>
</View>
);
}
const containerStyle = `
margin-horizontal: 20px;
padding-horizontal: 10px;
`;

@ -0,0 +1,48 @@
import { Text, View, Button } from "@nodegui/react-nodegui";
import { QPushButtonEvents } from "@nodegui/nodegui";
import React from "react";
import open from "open";
const buttonEventHandler = {
[QPushButtonEvents.clicked]: () => {
open("https://react.nodegui.org").catch(console.log);
}
};
export function StepTwo() {
return (
<View>
<Text style={textStyle} wordWrap={true}>
{`
<ol>
<li>
Open chrome and navigate to <code>chrome://inspect</code>. You should see a target below with your app.
</li>
<br/>
<li>
Next click on "<code>Open dedicated DevTools for Node</code>"
</li>
<br/>
<li>
On the dedicated devtools. Click on <code> Source > Node > "Your node process" </code>
</li>
</ol>
`}
</Text>
<Button
style={btnStyle}
on={buttonEventHandler}
text={`Open React NodeGui docs`}
></Button>
</View>
);
}
const textStyle = `
padding-right: 20px;
`;
const btnStyle = `
margin-horizontal: 20px;
height: 40px;
`;

@ -2,10 +2,11 @@ import { Renderer } from "@nodegui/react-nodegui";
import React from "react"; import React from "react";
import App from "./app"; import App from "./app";
process.title = "My NodeGui App";
Renderer.render(<App />); Renderer.render(<App />);
// This is for hot reloading (this will be stripped off in production by webpack) // This is for hot reloading (this will be stripped off in production by webpack)
if (module.hot) { if (module.hot) {
module.hot.accept(["./app"], () => { module.hot.accept(["./app"], function() {
Renderer.forceUpdate(); Renderer.forceUpdate();
}); });
} }

Loading…
Cancel
Save