Merge pull request #33 from MadinventorZero/tutorialupdate

Portion of the Tutorial Updates. Added comments. Fixed side scroll of…

Author: jonocr

README.md

@@ -5,12 +5,12 @@
 
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/team-reactype/ReacType/pulls)
 ![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)
-![Version 6.0](https://img.shields.io/badge/Release-6.0-lightgrey.svg)
+![Version 7.0.0](https://img.shields.io/badge/Release-7.0.0-lightgrey.svg)
 
-**ReacType** is a visual prototyping tool for developers employing **React** component architecture alongside the comprehensive type-checking of **TypeScript**.
+**ReacType** is a rapid prototyping tool for developers employing **React** component architecture alongside the comprehensive type-checking of **TypeScript**.
 In other words, **you can draw prototypes and export React / TypeScript code!**
 
-**ReacType** allows users to _visualize_ their application architecture dynamically, employing a _drag-and-drop canvas display_ and a _real-time component code preview_. Users can create components and drag _instances_ of these components, as well as HTML elements, onto the canvas. This architecture can then be _exported_ as TypeScript application files to be used as a starter template for any repository.
+**ReacType** allows users to _visualize_ their application architecture dynamically, employing a _drag-and-drop canvas display_ , a _real-time demo render_ , a _real-time component code preview_. Users can create components and drag _instances_ of these components, as well as HTML elements, onto the canvas. This architecture can then be _exported_ as TypeScript application files to be used as a starter template for any repository.
 
 Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windows](https://github.com/team-reactype/ReacType/releases/), [Linux](https://github.com/team-reactype/ReacType/releases/).
 
@@ -48,6 +48,13 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
 
 ### Features
 
+
+- **Live Render Demo**: Live render demo in React using Electron's sandbox environment. Updates in realtime to reflect canvas structure and customization options.
+- **Annotations**: Provide design notes directly on the canvas and have these persist while sharing designs with other engineers.
+- **CSS Editor**: Copy and paste custom css styles and classes into the editor and save to use personal or company designs in an instant.
+- **State & Props Creator**: Create custom state hooks with real-time updates in the code preview.
+- **Application Style Update**: Complete redesign of the entire application for enhanced user experience to maintain a single view application
+
 - **Dashboard**: Click the 'Dashboard' button to view the Public Dashboard and User Dashboard.
 - **Like**: Like other people's templates by clicking on the thumbs up icon.
 - **Comment**: Comment on other templates by typing in the input field and clicking the comment icon.

app/src/components/bottom/CreationPanel.tsx

@@ -3,6 +3,8 @@ import ComponentPanel from '../right/ComponentPanel'
 import StatePropsPanel from '../right/StatePropsPanel'
 import HTMLPanel from '../left/HTMLPanel'
 
+// Creation panel holds all of the creation functionality of the application. ComponentPanel, HTMLPanel, and StatePropsPanel are all hanged here.
+// This allows users to create all aspects of this application in one place.
 const CreationPanel = (props): JSX.Element => {
   return (
     <div className="creation-panel" >

app/src/components/left/DragDropPanel.tsx

@@ -5,7 +5,7 @@ import HTMLItem from './HTMLItem';
 import { makeStyles } from '@material-ui/core/styles';
 
 /*
-DESCRIPTION: This is the bottom half of the left panel, starting from the 'HTML
+DESCRIPTION: This is the top half of the left panel, starting from the 'HTML
   Elements' header. The boxes containing each HTML element are rendered in
   HTMLItem, which itself is rendered by this component.
 
@@ -16,7 +16,7 @@ Central state contains all available HTML elements (stored in the HTMLTypes prop
 Hook state:
   -tag: 
 */
-
+// Extracted the drag and drop functionality from HTMLPanel to make a modular component that can hang wherever the future designers may choose.
 const DragDropPanel = (props): JSX.Element => {
   // const classes = useStyles();
   const [state, dispatch] = useContext(StateContext);

app/src/components/main/DemoRender.tsx

@@ -7,6 +7,8 @@ import Box from '@material-ui/core/Box';
 import StateContext from '../../context/context';
 import cssRefresher from '../../helperFunctions/cssRefresh';
 
+// DemoRender is the full sandbox demo of our user's custom built React components. DemoRender references the design specifications stored in state to construct
+// real react components that utilize hot module reloading to depict the user's prototype application.
 const DemoRender = (props): JSX.Element => {
   const [components, setComponents] = useState([]);
   const [state, dispatch] = useContext(StateContext);
@@ -16,7 +18,9 @@ const DemoRender = (props): JSX.Element => {
     border: '2px Solid grey',
   };
 
-  const componentBuilder = (array, key = 0) => {
+  // This function is the heart of DemoRender it will take the array of components stored in state and dynamically construct the desired React component for the live demo
+  // Material UI is utilized to incorporate the apporpriate tags with specific configuration designs as necessitated by HTML standards.
+  const componentBuilder = (array: object, key: number = 0) => {
     const componentsToRender = [];
     for (const element of array) {
       if (element.name !== 'separator') {

app/src/components/right/ComponentPanel.tsx

@@ -124,10 +124,6 @@ const ComponentPanel = ({isThemeLight}): JSX.Element => {
     }
   }, []);
 
-  const isFocus = (targetId: Number) => {
-    return state.canvasFocus.componentId === targetId ? true : false;
-  };
-
   return (
     <div className={classes.panelWrapper}>
       {/* Add a new component*/}

app/src/components/right/ComponentPanelItem.tsx

@@ -4,6 +4,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import StateContext from '../../context/context';
 import { useDrag } from 'react-dnd';
 import { ItemTypes } from '../../constants/ItemTypes';
+import { wrap } from 'module';
 
 /*
 DESCRIPTION: This component is each box beneath the 'root components' and
@@ -71,17 +72,19 @@ const ComponentPanelItem: React.FC<{
       ref={drag}
       xs={8}
       style={{
+        display: 'grid',
         color: '#262626',
         backgroundColor: 'transparent',
         border: root
           ? '2px dotted #186BB4'
           : '2px solid #186BB4',
         borderRadius: '4px',
         borderColor: '#000000',
+        margin: '5px 0px'
       }}
     >
+      {isFocus && <div className={classes.focusMark}></div>}  
       <div className="compPanelItem" onClick={handleClick}>
-        {isFocus && <div className={classes.focusMark}></div>}
         <h3 >{name}</h3>
       </div>
     </Grid>
@@ -93,13 +96,11 @@ const useStyles = makeStyles({
     backgroundColor: 'rgba(1,212,109,0.3)'
   },
   focusMark: {
-    backgroundColor: '#808080',
-    position: 'absolute',
+    backgroundColor: 'red',
+    justifySelf: 'left',
     width: '12px',
     height: '12px',
-    borderRadius: '12px',
-    left: '-35px',
-    top: '30px'
+    borderRadius: '25px',
   }
 });
 

app/src/containers/CustomizationPanel.tsx

@@ -29,7 +29,7 @@ import ProjectManager from '../components/right/ProjectManager';
 import StateContext from '../context/context';
 import FormSelector from '../components/form/Selector';
 import { config } from 'ace-builds';
-
+// Previously named rightContainer, Renamed to Customizationpanel this now hangs on BottomTabs
 // need to pass in props to use the useHistory feature of react router
 const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
   const classes = useStyles(isThemeLight);

app/src/helperFunctions/componentNestValidation.ts

@@ -1,3 +1,8 @@
+
+
+// This function is used in both DirectChildHTMLNestable and SeparatorChild to ensure that user created components do not nest within themselves.
+// To allow such nesting would be a certain paradox and locks the application.
+// This check is done right after the drag functionality resolves and releases. Nothing is done if a component is found trying to nest within itself.
 const componentNest = (children: any, nestId: Number) => {
   let notNested = true;
   for (const element of children) {

app/src/helperFunctions/generateCode.ts

@@ -95,18 +95,20 @@ const generateUnformattedCode = (
     return customizationDetails;
   };
 
-  // function to dynamically generate a complete html (& also other library type) elements
+  // function to fix the spacing of the ace editor for new lines of added content. This was breaking on nested components, leaving everything right justified.
   const tabSpacer = (level: number) => {
     let tabs = ''
     for (let i = 0; i < level; i++) tabs += '  ';
     return tabs;
   }
-
+  
+  // function to dynamically generate the appropriate levels for the code preview
   const levelSpacer = (level: number, spaces: number) => {
     if (level === 2 ) return `\n${tabSpacer(spaces)}`;
     else return ''
   }
-
+  
+  // function to dynamically generate a complete html (& also other library type) elements
   const elementGenerator = (childElement: object, level: number = 2) => {
     let innerText = '';
     let activeLink = '';
@@ -160,7 +162,8 @@ const generateUnformattedCode = (
               .join('')
             }`;
   };
-    
+  
+  // function to properly incorporate the user created state that is stored in the application state
   const writeStateProps = (stateArray: any) => {
     let stateToRender = '';
     for (const element of stateArray) {
@@ -205,6 +208,7 @@ const generateUnformattedCode = (
         ? `class ${currentComponent.name} extends Component {`
         : `const ${currentComponent.name} = (props): JSX.Element => {`
     }
+
     ${
       stateful && !classBased
         ? `const [value, setValue] = useState<any | undefined>("INITIAL VALUE")${writeStateProps(currentComponent.useStateCodes)};

app/src/public/styles/style.css

@@ -130,7 +130,9 @@ LEFT COLUMN
 }
 
 #CompBottomHalf{
+  flex-grow: 1;
   overflow-y: auto;
+  margin-bottom: 50%;
 }
 
 .HTMLElements {
@@ -372,10 +374,9 @@ RIGHT COLUMN
 
 .compPanelItem {
   height: 100%;
-  position: center;
+  display: flex;
   justify-content: center;
   align-content: center;
-  display: flex;
   word-wrap: break-word;
 }
 

app/src/tutorial/ReusableComponents.tsx

@@ -12,12 +12,12 @@ 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 right input form to name a Component. Leave the Root/Page checkbox unchecked. Then select add to create a new Reusable Component.</p>
+      <p className={classes.text}>To add a Reusable Component, use the New Component input form in the Creation Panel to name a Component. Leave the Root/Page checkbox unchecked. Then click Create to add 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 right container under the section 'Reusable Components'.</p>
+      <p className={classes.text}>The Components you create will populate on the left panel under the section 'Reusable Components'.</p>
       <div className={classes.imgWrapper}>
         <img className={classes.img} src={reusableComponents2} />
       </div>
@@ -28,7 +28,7 @@ const ReusableComponents: React.FC<{
       <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 Elements</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 other <span className={classes.notLink} onClick={() => setPage('HTML_Elements')} >HTML Elements</span>.</p>
       <hr/>
     </div>
   );