Merge pull request #16 from lukemadden/tutorial

Tutorial Pull Request

Author: aw2934

app/src/context/themeContext 2.ts

@@ -0,0 +1,8 @@
+import React from "react";
+
+const ThemeContext = React.createContext({
+    theme: "light",
+    setTheme: () => {},
+})
+
+export default ThemeContext;

app/src/helperFunctions/generateCode.ts

@@ -282,13 +282,11 @@ const formatCode = (code: string) => {
       jsxBracketSameLine: true,
       parser: 'babel'
     });
-
   } else if (process.env.NODE_ENV === 'production') {
     return window.api.formatCode(code);
   } else {
    return code;
   }
-
 };
 
 // generate code based on component hierarchy and then return the rendered code

app/src/tutorial/Canvas.tsx

@@ -19,7 +19,7 @@ const Canvas: React.FC<{
       <hr/>
       <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.<br/>
-      This functionality can be located on the entire left container of the application.<br/>
+      This functionality can be located in the left container of the application for elements, and the right container for components.<br/>
       Select a given <span className={classes.notLink} onClick={() => setPage('HTML_Elements')} >HTML Element</span>, custom <span className={classes.notLink} onClick={() => setPage('HTML_Elements')} >HTML Element</span>, or <span className={classes.notLink} onClick={() => setPage('Reusable_Components')} >reusable component</span>, click and hold to drag on to a reusable components or page.
       </p>
       <div className={classes.imgWrapper}>

app/src/tutorial/CodePreview.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import codePreview from '../../../resources/code_preview_images/CodePreview.png';
 
 const CodePreview: React.FC<{
   classes: any;
@@ -9,10 +10,13 @@ const CodePreview: React.FC<{
       <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.<br/>
-        In the preview, the code will load functional components.<br/>
+        In the preview, the code will generate for functional components.<br/>
         This preview will populate and generate in real-time as you use the drag-n-drop functionality with the <span className={classes.notLink} onClick={() => setPage('Canvas')} >Canvas</span>.<br/>
         To learn more about the canvas, click <span className={classes.notLink} onClick={() => setPage('Canvas')} >"here"</span></p>
       </div>
+      <div className={classes.imgWrapper} >
+        <img className={classes.smallImg} src={codePreview} />
+      </div>
     </div>
   );
 };

app/src/tutorial/Customization.tsx

@@ -44,14 +44,14 @@ const Customization: React.FC<{
           element
         </span>{' '}
         into the canvas, select the one that needs customizing simply by
-        clicking on it. Then, to give it a display feature of either a block,
-        inline-block, or flex styling, select from the drop down box.
+        clicking on it. Then, to give it block,
+        inline-block, or flex styling, select from the drop down box in the right container.
       </p>
       <div className={classes.imgWrapper}>
         <img src={flex} />
       </div>
       <p className={classes.text}>
-        If the display option 'flex' is chosen, few more sub-options are
+        If the display option 'flex' is chosen, a few more sub-options are
         displayed under the display option.
       </p>
       <hr />
@@ -119,7 +119,7 @@ const Customization: React.FC<{
       </div>
       <p className={classes.text}>
         Select an element, type in the color you wish to change the background
-        color to, and click save!
+        color to, and click save. The code preview will be updated to include your custom styling!
       </p>
       <hr />
     </div>

app/src/tutorial/HtmlElements.tsx

@@ -23,18 +23,18 @@ const HtmlElements: React.FC<{
       <p className={classes.text}>You can create new custom elements to better suit your needs.<br/>
       Click <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element" target="_blank">here</a> for a link to more HTML tags that you can add.<br/>
       "Tag" should be the HTML tag you are creating and "Tag Name" should be something that makes it easy to remember what this tag is/does.<br/>
-      You can also create your own custom elements besides the standard HTML Elements in the document above. For example you can create an element &lt;hello&gt;&lt;hello&gt; and it will work! You can add functionality to these elements once you export your project. Just be sure to import them into the files that you are using them! For more information on how to create custom tags check out these resources from <a href="https://www.html5rocks.com/en/tutorials/webcomponents/customelements/" target="_blank">HTML5Rocks</a> and <a href="https://www.smashingmagazine.com/2014/03/introduction-to-custom-elements/" target="_blank">smashing magazine</a>.
+      You can also create your own custom elements besides the standard HTML Elements. For example you can create an element &lt;hello&gt;&lt;hello&gt; and it will work! You can add functionality to these elements once you export your project. Just be sure to import them into the files where you are using them! For more information on how to create custom tags check out these resources from <a href="https://www.html5rocks.com/en/tutorials/webcomponents/customelements/" target="_blank">HTML5Rocks</a> and <a href="https://www.smashingmagazine.com/2014/03/introduction-to-custom-elements/" target="_blank">smashing magazine</a>.
       </p>
       <div className={classes.imgWrapper} >
         <img className={classes.smallImg} src={createNew} />
       </div>
       <hr/>
-      <h2>Delete Buttons</h2>
+      {/* <h2>Delete Buttons</h2>
       <p className={classes.text}>Delete buttons that you don't need.</p>
       <div className={classes.imgWrapper} >
         <img className={classes.smallImg} src={newTag} />
       </div>
-      <hr/>
+      <hr/> */}
       <h2>Persisting Elements</h2>
       <p className={classes.text}>Saving the project (available only to users) will allow you to save custom elements that you created. However, when opening a new project, only the tags saved for each specific project will show up again.<br/>
       In order to save custom tags across multiple projects, we recommend creating custom tags first, then saving multiple projects with the custom tags. This will allow access to custom tags across multiple projects.</p>

app/src/tutorial/Pages.tsx

@@ -12,37 +12,39 @@ const Pages: React.FC<{
     <div className={classes.wrapper}>
       <h1 className={classes.title}>Pages</h1>
       <hr />
-      <div className={classes.imgWrapper}>
-        <img src={pages} />
-      </div>
       <p className={classes.text}>
         Start off by giving your page a name. Make sure to check the page box
-        next to the textbox. Then, simply click the add button and it'll show in
+        next to the Name input. Then, simply click the add button and it will show in
         the pages section below.
       </p>
       <div className={classes.imgWrapper}>
-        <img src={toggle} />
+        <img src={pages} />
       </div>
-      <hr />
+      
       <div className={classes.imgWrapper}>
-        <img src={addElements} className={classes.img} />
+        <img src={toggle} />
       </div>
+      <hr />
       <p className={classes.text}>
         Switch between pages by selecting the page and customize it by dragging
         the elements you want into the{' '}
         <span className={classes.notLink} onClick={() => setPage('Canvas')}>
           canvas
         </span>{' '}
-        of the page you're on. (Note the green dot next to the page name shows
-        you which page you are currently on).
+        of the page you're on. (Note the gray dot next to the page name signals
+        which page you are currently on).
       </p>
-      <hr />
       <div className={classes.imgWrapper}>
-        <img src={deletePage} />
+        <img src={addElements} className={classes.img} />
       </div>
+      
+      <hr />
       <p className={classes.text}>
-        Delete the page by simply clicking the button.
+        Delete the page by simply clicking the delete button below the style attribute dropdowns.
       </p>
+      <div className={classes.imgWrapper}>
+        <img src={deletePage} />
+      </div>
       <hr />
     </div>
   );

app/src/tutorial/ReusableComponents.tsx

@@ -12,23 +12,23 @@ const ReusableComponents: React.FC<{
     <div className={classes.wrapper}>
       <h1 className={classes.title}>Reusable Components</h1>
       <hr/>
-      <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>
+      <p className={classes.text}>To add a Reusable Component, use the top right input form to name a Component. Leave the Root/Page checkbox unchecked. Then select add to create a new Reusable Component.</p>
       <div className={classes.imgWrapper}>
         <img className={classes.img} src={reusableComponents1} />
       </div>
       <hr/>
-      <p className={classes.text}>The Components you create will populate the left container under the section called 'Reusable Components'.</p>
+      <p className={classes.text}>The Components you create will populate the right container under the section 'Reusable Components'.</p>
       <div className={classes.imgWrapper}>
         <img className={classes.img} src={reusableComponents2} />
       </div>
       <hr/>
-      <p className={classes.text}>After creating the desired Component, you can now use the components with the drag-n-drop functionality.
+      <p className={classes.text}>After creating the desired Component, you can now drag-n-drop to the Canvas.
         If you'd like to know about about the drag-n-drop functionality, please locate the <span className={classes.notLink} onClick={() => setPage('Canvas')} >Canvas Tutorial</span> for more information on how it works.
       </p>
       <div className={classes.imgWrapper}>
         <img className={classes.img} src={reusableComponents3} />
       </div>
-      <p className={classes.text}>You can place a reusable component inside <span className={classes.notLink} onClick={() => setPage('Pages')} >Pages</span> and populate the component itself with the <span className={classes.notLink} onClick={() => setPage('HTML_Elements')} >HTML Element</span>.</p>
+      <p className={classes.text}>You can place a reusable component inside <span className={classes.notLink} onClick={() => setPage('Pages')} >Pages</span> and populate the component itself with the <span className={classes.notLink} onClick={() => setPage('HTML_Elements')} >HTML Elements</span>.</p>
       <hr/>
     </div>
   );

app/src/tutorial/RouteLinks.tsx

@@ -14,7 +14,7 @@ const RouteLinks: React.FC<{
     <div className={classes.wrapper}>
       <h1 className={classes.title}>Next.js Route Links</h1>
       <hr/>
-      <h2>Route Links are only available for Next.js projects.</h2>
+      <h2>Route Links are only available for Next.js and Gatsby.js projects.</h2>
       <p className={classes.text}>Users are able to drag-and-drop 'Link' components onto the canvas which allow navigation to different <span className={classes.notLink} onClick={() => setPage('Pages')} >pages</span>.</p>
       <div className={classes.imgWrapper}>
         <img className={classes.img} src={linksCanvas}></img>
@@ -36,7 +36,7 @@ const RouteLinks: React.FC<{
         <img className={classes.smallImg} src={links6}></img>
       </div>
       <hr/>
-      <p className={classes.text}>For more information on 'Link' for Next.js, please <a href="https://nextjs.org/docs/api-reference/next/link" target="_blank">visit the official documentation on nextjs.org.</a></p>
+      <p className={classes.text}>For more information on 'Link' for Next.js, please <a href="https://nextjs.org/docs/api-reference/next/link" target="_blank">visit the official documentation section at nextjs.org.</a> For more information on 'Link' for Gatsby.js, please <a href="https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-link/" target="_blank">visit the official documentation section at www.gatsbyjs.com.</a></p>
       <hr/>
     </div>
   );

app/src/tutorial/Styling.tsx

@@ -13,23 +13,23 @@ const Styling: React.FC<{
     <div className={classes.wrapper}>
       <h1 className={classes.title}>Styling Features</h1>
       <hr />
-      <h2>Code Preview Theme Changer</h2>
+      {/* <h2>Code Preview Theme Changer</h2>
       <div className={classes.imgWrapper}>
         <img src={theme} />
       </div>
       <p className={classes.text}>
         Select your favorite theme from the drop down menu to personalize your
         view of the <span className={classes.notLink} onClick={() => setPage('Code_Preview')} >code preview</span>!
       </p>
-      <hr />
-      <h2>Lighting Mode</h2>
+      <hr /> */}
+      <h2>Dark Mode</h2>
       <div className={classes.imgWrapper}>
         <img src={lighting} />
       </div>
       <p className={classes.text}>
-        Spice up the app by toggling between different lighting modes! The
-        lighting mode will change the background color of the app as well as the
-        background color of the <span className={classes.notLink} onClick={() => setPage('Component_Tree')} >component tree</span>.
+        Spice up the app by switching to DARK MODE! DARK
+        MODE will change the background and text colors of the app.
+        {/* background color of the <span className={classes.notLink} onClick={() => setPage('Component_Tree')} >component tree</span>. */}
       </p>
       <hr />
       <h2>Resize Code Preview & Component Tree</h2>
@@ -46,7 +46,7 @@ const Styling: React.FC<{
         <img className={classes.img} src={codeChange} />
       </div>
       <p className={classes.text}>
-        Change your code before exporting and see the changes in your exported
+        Manually change your code before exporting and see the changes in your exported
         file!
       </p>
       <hr />