add docs for button

Author: hayanisaid

packages/app/src/Sidebar.js

@@ -73,7 +73,7 @@ class Sidebar extends Component {
         <FocusableItem focusKey="sidebar-item-3" text="Stockholm" idx={200} />
         <View style={styles.buttonContainer}>
         <Button
-        color="blue'"
+        color="#2196F3''"
          title="Navigate"
          onClick = {()=>{}}
         />

packages/docs/components-button.md

@@ -0,0 +1,29 @@
+---
+id: components-button
+title: Button
+sidebar_label: Button
+---
+
+
+A component for creating a Button.
+
+The following example shows how to render a Button.
+```JS
+import React from "react";
+import { Button, View, render } from "react-ape";
+
+class ImageExample extends React.Component {
+  render() {
+    return (
+      <View>
+        <Button
+         title="Click Me"
+         color="#2196F3'"
+         onClick ={()=>{}}
+        />
+      </View>
+    );
+  }
+}
+```
+<iframe src="https://codesandbox.io/embed/24zmzm07my?hidenavigation=1" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

packages/react-ape/renderer/elements/Button.js

@@ -7,6 +7,7 @@
 
 import {ButtonDefaults} from '../constants';
 import {trackMousePosition,isMouseInside} from '../utils'
+import type {CanvasComponentContext} from '../types'
 //TODO adjust Opacity when focus, Blur
 type PressEvent = {||};
 type ButtonProps = {|
@@ -65,8 +66,8 @@ type ButtonProps = {|
   testID?: ?string,
 |};
 
-function renderButton(props: ButtonProps, apeContext, parentLayout) {
-  const {spatialGeometry = {x: 0, y: 0}} = parentLayout;
+function renderButton(props: ButtonProps, apeContext:CanvasComponentContext, parentLayout) {
+  const {spatialGeometry } = parentLayout;
   const {ctx} = apeContext;
 
   // If is relative and x and y haven't be processed, don't render
@@ -160,11 +161,22 @@ function renderButton(props: ButtonProps, apeContext, parentLayout) {
 
 
 
+
+// TODO:  
+/**
+ * We need to remove addEventListeners from the renderButton 
+ * function because this function runs for each state/prop update.
+ *  It will keep creating/refreshing listeners for every render.
+
+We can keep this way, if we run this addEventListener 
+once by checking if the listener already exist. 
+Note onClick will need to share scope with this function to work properly.
+ */
   ctx.canvas.addEventListener('click', onClick, false);
   ctx.canvas.addEventListener('focus', redrawButton);
   ctx.canvas.addEventListener('blur', redrawButton);
 
-  // events
+ 
 }
 
 export default function createButtonInstance(props: ButtonProps): mixed {

packages/react-ape/renderer/reactApeRenderer.js

@@ -116,7 +116,7 @@ const ReactApeFiber = reconciler({
 
       if (diff) {
         const parentLayout = element.parentLayout || element.getParentLayout();
-        if (type === 'Text') {
+        if (type === 'Text' ) {
           parentLayout.resetLayout(); // View needs to be reset on text updates
         }
 

packages/react-ape/renderer/utils.js

@@ -16,7 +16,7 @@ export function trackMousePosition(canvas, event):MouseEventType {
     y: event.clientY - canvas.offsetTop,
   };
 }
-export const isMouseInside = (pos, rect):Boolean => {
+export const isMouseInside = (pos, rect):boolean => {
   return (
     pos.x > rect.x &&
     pos.x < rect.x + rect.width &&

packages/website/sidebars.json

@@ -16,8 +16,10 @@
     "Components": [
       "components-image",
       "components-text",
-      "components-view"
+      "components-view",
+      "components-button"
     ],
+    
     "APIs": [
       "apis-dimensions",
       "apis-platform",