Adds new starter example

Author: a7ul

.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

@@ -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": {

package.json

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

src/app.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/mytext.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/components/stepone.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();
   });
 }