Adds new starter example

.babelrc

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

package-lock.json

@@ -1007,8 +1007,7 @@
     "@types/node": {
       "version": "12.7.1",
       "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": {
       "version": "15.7.1",
@@ -1905,6 +1904,25 @@
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.2.tgz",
       "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": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz",
@@ -4298,6 +4316,15 @@
         "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": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/listenercount/-/listenercount-1.0.1.tgz",
@@ -4393,6 +4420,11 @@
         "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": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -4850,6 +4882,21 @@
         "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": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",

package.json

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

src/app.tsx

@@ -1,64 +1,41 @@
-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 { 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 {
   render() {
     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;">
-                Testing
-              </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 = `
-    #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;
   }
 `;
 

src/components/mytext.tsx

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

src/components/stepone.tsx

@@ -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;
+`;

src/components/steptwo.tsx

@@ -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;
+`;

src/index.tsx

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