Merge pull request #28 from stormikph/tutorial

Tutorial

Author: diegovazquezny

app/src/components/bottom/BottomPanel.tsx

@@ -1,8 +1,9 @@
 import React, { useContext } from 'react';
-// import { StateContext } from '../../context/context';
+import { StateContext } from '../../context/context';
 import BottomTabs from './BottomTabs';
 import { Resizable } from 're-resizable';
 
+
 // const IPC = require('electron').ipcRenderer;
 
 const BottomPanel = () => {

app/src/components/bottom/BottomTabs.tsx

@@ -83,7 +83,7 @@ const useStyles = makeStyles(theme => ({
     backgroundColor: '#333333',
     height: '100%',
     color: '#fff',
-    boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)'
+    boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',
   },
   bottomHeader: {
     flex: 1,
@@ -92,7 +92,8 @@ const useStyles = makeStyles(theme => ({
     Width: '200px'
   },
   tabsRoot: {
-    borderBottom: '0.5px solid #424242'
+    borderBottom: '0.5px solid #424242',
+    minHeight: '50%'
   },
   tabsIndicator: {
     backgroundColor: '#1de9b6'
@@ -129,10 +130,10 @@ const useStyles = makeStyles(theme => ({
   },
   tabSelected: {},
   typography: {
-    padding: theme.spacing(3) // JZ: updated syntax as per deprecation warning
+    padding: theme.spacing(3)
   },
   padding: {
-    padding: `0 ${theme.spacing(2)}px` // JZ: updated syntax as per deprecation warning
+    padding: `0 ${theme.spacing(2)}px` 
   },
   switch: {
     marginRight: '10px',

app/src/public/styles/style.css

@@ -248,13 +248,10 @@ RIGHT COLUMN
   transition: width 250ms ease-in-out;
   width: 100%;
   height: 100%;
-  min-height: 500px;
-  /* display: flex;
-  flex-direction: row; */
+  min-height: 100%;
+  /* display: flex; */
+  /* flex-direction: row; */
   background-color: #fcfcfc;
-  /* box-shadow: 0 -5px 7px 2px rgb(255, 0, 0); */
-  /* margin-right: 100px;
-  padding-right: 10px; */
 }
 
 .htmlattr {

app/src/tutorial/Canvas.tsx

@@ -2,19 +2,40 @@ import React from 'react';
 import { Link, RouteComponentProps } from 'react-router-dom';
 
 // import Grid from '@material-ui/core/Grid';
+import { makeStyles } from '@material-ui/core/styles';
 
-// import ComponentPanel from '../components/left/ComponentPanel';
-// import HTMLPanel from '../components/left/HTMLPanel';
-
-// Left-hand portion of the app, where component options are displayed
+//images
+import canvas1 from '../../../resources/canvas_tutorial_images/canvas1.png';
+import drag1 from '../../../resources/canvas_tutorial_images/drag1.png';
 
 const Canvas: React.FC<{
   classes: any;
   setPage: Function;
 }> = ({ classes, setPage }) => {
   return (
-    <div>
-      Canvas
+    <div className={classes.wrapper}>
+      <h1 className={classes.title}>Canvas Tutorial</h1>
+
+      <div className={classes.wrapper}>
+          <h1 className={classes.title}>Canvas</h1>
+          <p className={classes.text}>The canvas is located at the center of the page. </p>
+          
+          <div className={classes.imgWrapper}>
+            <img className={classes.img} src={canvas1}/>
+          </div>
+
+          <h1 className={classes.title}>Drag-n-Drop</h1>
+          <p className={classes.text}>The drag-n-drop functionality is implemented for the canvas to be populated.</p>
+          <p className={classes.text}>This functionality can be located on the entire left container of the application.</p>
+          <p className={classes.text}>Select a given HTML tag or a custom HTML tag, click and hold to drag on to a reusable components or page.</p>
+
+          <div className={classes.imgWrapper}>
+            <img className={classes.img} src={drag1}/>
+          </div>
+
+          <p className={classes.text}>Select a reusable component, click and hold to drag on to a page.</p>
+          <p className={classes.text}>Drag the selected item on to the center canvas.</p>
+      </div>
     </div>
   );
 };

app/src/tutorial/CodePreview.tsx

@@ -2,19 +2,21 @@ import React from 'react';
 import { Link, RouteComponentProps } from 'react-router-dom';
 
 // import Grid from '@material-ui/core/Grid';
-
-// import ComponentPanel from '../components/left/ComponentPanel';
-// import HTMLPanel from '../components/left/HTMLPanel';
-
-// Left-hand portion of the app, where component options are displayed
+import { makeStyles } from '@material-ui/core/styles';
 
 const CodePreview: React.FC<{
   classes: any;
   setPage: Function;
 }> = ({ classes, setPage }) => {
   return (
-    <div>
-      CodePreview
+    <div className={classes.wrapper}>
+      <h1 className={classes.title}>Code Preview</h1>
+      <div className={classes.wrapper}>
+        <p className={classes.text}>The code preview is located at the bottom center of the page on the first tab.</p>
+        <p className={classes.text}>In the preview, the code will load functional components.</p>
+        <p className={classes.text}>This preview will populate and generate in real-time as you use the drag-n-drop functionality with the canvas.</p>
+        <p className={classes.text}>To learn more about the canvas, find the tutorial labeled "Canvas".</p>
+      </div>
     </div>
   );
 };

app/src/tutorial/ReusableComponents.tsx

@@ -2,19 +2,45 @@ import React from 'react';
 import { Link, RouteComponentProps } from 'react-router-dom';
 
 // import Grid from '@material-ui/core/Grid';
+import { makeStyles } from '@material-ui/core/styles';
 
-// import ComponentPanel from '../components/left/ComponentPanel';
-// import HTMLPanel from '../components/left/HTMLPanel';
-
-// Left-hand portion of the app, where component options are displayed
+//images
+import reusablecomponents1 from '../../../resources/reusable_components_tutorial_images/reusablecomponents1.png';
+import reusablecomponents2 from '../../../resources/reusable_components_tutorial_images/reusablecomponents2.png';
+import reusablecomponents3 from '../../../resources/reusable_components_tutorial_images/reusablecomponents3.png';
 
 const ReusableComponents: React.FC<{
   classes: any;
   setPage: Function;
 }> = ({ classes, setPage }) => {
   return (
-    <div>
-      ReusableComponents
+    <div className={classes.wrapper}>
+      <h1 className={classes.title}>Reusable Components Tutorial</h1>
+
+      <div className={classes.wrapper}>
+        <h1 className={classes.title}>Reusable Components</h1>
+        <p className={classes.text}>To add a Reusable Component, use the top left input form to name a Component. Then select add to create a new Component.</p>
+        
+        <div className={classes.imgWrapper}>
+          <img src={reusablecomponents1} />
+        </div>
+        <p className={classes.text}>The Components you create will populate the left container under the section called 'Reusable Components'.</p>
+
+        <div className={classes.imgWrapper}>
+          <img src={reusablecomponents2} />
+        </div>
+
+        <p className={classes.text}>After creating the desired Component, you can now use the components with the drag-n-drop functionality. 
+          If you'd like to know about about the drag-n-drop functionality, please locate the tag Canvas Tutorial for more information on how it works.
+        </p>
+
+        <div className={classes.imgWrapper}>
+          <img src={reusablecomponents3} />
+        </div>
+
+        <p className={classes.text}>You can place a reusable component inside Pages and populate the component itself with the HTML Elements.</p>
+        
+      </div>
     </div>
   );
 };

package.json

@@ -6,27 +6,27 @@
   "main": "app/electron/main.js",
   "author": "OS Labs",
   "contributors": [
+    "Aaron Bumanglag",
     "Adam Singer",
+    "Andrew Cho",
+    "Brian Han",
     "Charles Finocchiaro",
     "Chelsey Fewer",
     "Christian Padilla",
+    "Diego Vazquez",
     "Eliot Nguyen",
+    "Fredo Chen",
     "Jesse Zuniga",
+    "Jin Soo Lim",
     "Mitchel Severe",
     "Natalie Vick",
     "Sean Sadykoff",
     "Shlomo Porges",
+    "Stormi Hashimoto",
     "Sophia Huttner",
     "Tolga Mizrakci",
     "Tony Ito-Cole",
-    "Tyler Sullberg",
-    "Fredo Chen",
-    "Aaron Bumanglag",
-    "Andrew Cho",
-    "Brian Han",
-    "Diego Vazquez",
-    "Jin Soo Lim",
-    "Stormi Hashimoto"
+    "Tyler Sullberg"
   ],
   "scripts": {
     "postinstall": "ELECTRON_BUILDER_ALLOW_UNRESOLVED_DEPENDENCIES=true electron-builder install-app-deps",