Merge pull request #6 from crumblepie/rain/code-editor

Rain/code editor

Author: BryannaDeJesus

package-lock.json

@@ -10,7 +10,8 @@
     "dev": "NODE_ENV=development webpack server --open & nodemon server/server.js",
     "edev": "NODE_ENV=development webpack server & electron .",
     "dev-all": "concurrently \"cross-env NODE_ENV=development webpack server\"  \"BROWSER=none npm start\" \"wait-on http://localhost:3000 && electron .\"",
-    "start-app": "webpack serve --hot --mode development"
+    "start-app": "webpack serve --hot --mode development",
+    "start-dev": "cross-env NODE_ENV=development webpack serve --hot --host 0.0.0.0 --config=./webpack.dev.config.js --mode development"
   },
   "keywords": [],
   "author": "",
@@ -19,10 +20,12 @@
     "@babel/core": "^7.16.7",
     "@babel/preset-env": "^7.16.8",
     "@babel/preset-react": "^7.16.7",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@hot-loader/react-dom": "^17.0.2",
     "@monaco-editor/react": "^4.3.1",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
+    "autoprefixer": "^10.4.2",
     "babel-jest": "^27.4.6",
     "babel-loader": "^8.2.3",
     "concurrently": "^7.0.0",
@@ -32,15 +35,18 @@
     "electron-reloader": "^1.2.1",
     "eslint": "^8.7.0",
     "eslint-plugin-react": "^7.28.0",
+    "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.0",
     "jest": "^27.4.7",
     "monaco-editor": "^0.31.1",
     "nodemon": "^2.0.15",
+    "postcss": "^8.4.5",
     "prettier": "^2.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-spinners": "^0.11.0",
     "style-loader": "^3.3.1",
+    "tailwindcss": "^3.0.15",
     "ts-loader": "^9.2.6",
     "typescript": "^4.5.4",
     "wait-on": "^6.0.0",
@@ -50,6 +56,7 @@
     "xterm": "^4.16.0"
   },
   "dependencies": {
+    "@themesberg/flowbite": "^1.3.0",
     "@uiw/react-monacoeditor": "^3.4.7",
     "ace-builds": "^1.4.13",
     "monaco-editor-webpack-plugin": "^7.0.1",

package.json

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

postcss.config.js

@@ -3,7 +3,9 @@ import * as ReactDOM from 'react-dom';
 import Header from './components/Header';
 import Body from './components/Body';
 import './stylesheets/App.css'
+import './stylesheets/index.css';
 // import { hot } from 'react-hot-loader/root';
+import '@themesberg/flowbite';
 
 const App = () => {
 

src/App.js

@@ -1,34 +1,15 @@
 import * as React from "react";
 import '../stylesheets/Canvas.css';
+import CanvasItem from './CanvasItem';
 
 const Canvas = () => {
   return (
     <div className="canvas">
-      {/* Canvas
-      <p>Canvas</p>
-      <br/>
-      <br/>
+    <p id='canvas-instruction'>Drag & Drop <br/> HTML elements here</p>
 
-      <br/>
-      <button id='purple-electric-violet'>VIOLET</button>
-      <button id='purple-900'>900</button>
-      <button id='purple-700'>700</button>
-      <button id='purple-600'>600</button>
-      <button id='purple-500'>500</button>
-      <button id='purple-400'>400</button>
-      <button id='purple-300'>300</button>
-      <button id='purple-200'>200</button>
-      <button id='button-error'>ERROR</button>
-
-      <br/>
-      <div className='green-palette-container'>
-        <button id='green-500'>500</button>
-        <button id='green-400'>400</button>
-        <button id='green-300'>300</button>
-        <button id='green-200'>200</button>
-        <button id='green-100'>100</button>
-      </div> */}
-    </div>
+    <CanvasItem />
+    </div> 
+    
   )
 }
 

src/components/Canvas.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import DeleteCanvasItem from './DeleteCanvasItem';
+
+const CanvasItem = ({ canvasItem, deleteCanvasItem }) => {
+  
+  return (
+      <div className="container mx-auto px-2 md:px-4 mb-8 md:mb-4">
+        <div className="flex items-center justify-around p-2 md:p-4 shadow-md rounded-lg relative">
+          <div className="w-1/3 text-center">
+            {/* <h3>{canvasItem.name}</h3> */}
+          </div>
+
+          <div
+            className="absolute top-0 right-0 col-span-1"
+            
+            // onClick={(e) => {
+            //   e.preventDefault();
+            //   deleteCoin(canvasItem.id);
+            // }}
+          >
+            <DeleteCanvasItem />
+          </div>
+        </div>
+      </div>
+ 
+  );
+};
+
+export default CanvasItem;

src/components/CanvasItem.jsx

@@ -3,7 +3,6 @@ import ReactDOM from "react-dom";
 import '../stylesheets/CodePreview.css';
 //import MonacoEditor from 'react-monaco-editor';
 import Editor from "@monaco-editor/react";
-// import { ClockLoader as Loader } from "react-spinners";
 import AceEditor from 'react-ace';
 import "ace-builds/src-noconflict/mode-javascript";
 import "ace-builds/src-noconflict/theme-monokai";
@@ -12,16 +11,14 @@ import "ace-builds/src-noconflict/theme-github";
 
 const CodePreview = () => {
 
+  const [theme, setTheme] = useState("dark");
   const [tabState, setTabState] = useState(1);
 
   const toggleTab = (tabNum) => {
     setTabState(tabNum);
   }
 
- 
-  const [theme, setTheme] = useState("dark");
-
-  function toggleTheme() {
+  const toggleTheme = () => {
     // if (theme === 'dark') setTheme('monokai');
     // setTheme('github');
     setTheme(theme === "dark" ? "monokai" : "github");
@@ -41,8 +38,27 @@ const CodePreview = () => {
 
 
   return (
-
+  
     <div className="codePreviewContainer">
+
+<div class="mb-4 border-b border-gray-200 dark:border-gray-700">
+      <ul class="flex flex-wrap -mb-px" id="myTab" data-tabs-toggle="#myTabContent" role="tablist">
+
+        <li class="mr-2" role="presentation">
+        <button class="inline-block py-4 px-4 text-sm font-medium text-center text-gray-500 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300" id="code-editor-tab" data-tabs-target="#code-editor" type="button" role="tab" aria-controls="code-editor" aria-selected="false">Code Preview</button>
+        </li>
+
+        <li class="mr-2" role="presentation">
+        <button class="inline-block py-4 px-4 text-sm font-medium text-center text-gray-500 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 active" id="dashboard-tab" data-tabs-target="#dashboard" type="button" role="tab" aria-controls="dashboard" aria-selected="true">Terminal</button>
+        </li>
+
+        <li class="mr-2" role="presentation">
+        <button class="inline-block py-4 px-4 text-sm font-medium text-center text-gray-500 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300" id="settings-tab" data-tabs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">CSS Editor</button>
+        </li>
+
+      </ul>
+    </div>
+
       <div className="tabContainer">
         <button 
         className={tabState === 1 ? "tabs active-tabs" : "tabs"}
@@ -56,6 +72,9 @@ const CodePreview = () => {
       </div>
       <div className="contentContainer">
       <div className={tabState === 1 ? "content  active-content" : "content"}><div className="codeEditorContainer">
+
+
+
         {/* <Editor
         height="80vh"
         defaultLanguage="javascript"
@@ -109,7 +128,9 @@ const CodePreview = () => {
         </div>
         </div>
         <div className={tabState === 2 ? "content  active-content" : "content"}>
-        </div>
+      </div>
+        
+        
         <div className={tabState === 3 ? "content  active-content" : "content"}><div className="codeEditorContainer">
         <Editor
         height="80vh"
@@ -125,6 +146,7 @@ const CodePreview = () => {
                     wordWrap: "on",
                   }}
           />
+          
         </div></div>
       </div>
     {/* <div className='code-compiler'>

src/components/CodePreview.jsx

@@ -4,7 +4,7 @@ import '../stylesheets/CompCreator.css';
 const CompCreator = () => {
   return (
     <div id='comp-create-box'>
-      <p id='create-react-component-header'>Add a React Component</p>
+      <p id='create-react-component-header'>React Component</p>
       <form>
         <div id='inputs'>
           <input id='text-field' placeholder='Component Name...'></input>
@@ -13,10 +13,19 @@ const CompCreator = () => {
             <input type='checkbox' name="check"></input>
           </span>
         </div>
-        <button id='add-react-component-button' type='submit'>Add</button>
+
+        {/* <button id='add-react-component-button' type='submit'>Add</button> */}
+        <button class="block text-white bg-indigo-700 hover:bg-indigo-800 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800" type="button" data-modal-toggle="popup-modal">
+          ADD
+        </button>
+
       </form>
     </div>
   )
 }
 
-export default CompCreator;
+export default CompCreator;
+
+{/* <button class="block text-white bg-indigo-700 hover:bg-indigo-800 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800" type="button" data-modal-toggle="popup-modal">
+Clear Canvas
+</button> */}

src/components/CompCreator.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+const DeleteCanvasItem = () => {
+  return (
+    <svg
+      className="fill-current text-gray-500 hover:text-indigo-600 inline-block h-4 w-4 cursor-pointer"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+    >
+      <path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zM11.4 10l2.83-2.83-1.41-1.41L10 8.59 7.17 5.76 5.76 7.17 8.59 10l-2.83 2.83 1.41 1.41L10 11.41l2.83 2.83 1.41-1.41L11.41 10z" />
+    </svg>
+  );
+};
+
+export default DeleteCanvasItem;

src/components/DeleteCanvasItem.jsx

@@ -7,9 +7,9 @@ import DragList from './DragList';
 const DnD = () => {
   return (
     <div className="dndContainer">
-      <button id='explorer'>File Explorer</button>
+      {/* <button id='explorer'>File Explorer</button> */}
       <div id="dndBody">
-        Drag & Drop
+      <p style={{ fontSize: '20px', marginBottom: '30px', fontWeight: '700' }}>App Name</p>
         <CompCreator />
         <TagCreator />
         <DragList />

src/components/DnD.jsx

@@ -6,14 +6,46 @@ const Header = () => {
 
   return (
     <div className='headerContainer'>
-    <span id='app-name'>APP NAME</span>
+    {/* <span id='app-name'>APP NAME</span> */}
 
       <input type="checkbox" className="checkbox" id="checkbox" onChange={()=> themeToggle()}/>
-      <label for="checkbox" className="label">
-        <i className="fas fa-moon"></i>
-        <i className='fas fa-sun'></i>
+      <label for="checkbox" className="label"> 
+        {/* <i className="fas fa-moon"></i>
+        <i className='fas fa-sun'></i> */}
         <div className='ball'></div>
       </label>
+
+      {/* <!-- Modal toggle --> */}
+      <button class="block text-white bg-indigo-700 hover:bg-indigo-800 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800" type="button" data-modal-toggle="popup-modal">
+        Clear Canvas
+      </button>
+
+        {/* <!-- Delete HTML or React Component Modal --> */}
+        <div class="hidden overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-4 z-50 justify-center items-center md:inset-0 h-modal sm:h-full" id="popup-modal">
+          <div class="relative px-4 w-full max-w-md h-full md:h-auto">
+          
+          {/* <!-- Modal content --> */}
+          <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+          
+          {/* <!-- Modal header --> */}
+          <div class="flex justify-end p-2">
+              <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white" data-modal-toggle="popup-modal">
+                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>  
+              </button>
+          </div>
+          
+          {/* <!-- Modal body --> */}
+          <div class="p-6 pt-0 text-center">
+              <svg class="mx-auto mb-4 w-14 h-14 text-gray-400 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+              <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">Are you sure you want to delete this item?</h3>
+              <button data-modal-toggle="popup-modal" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2">
+              Yes, I'm sure
+              </button>
+                        <button data-modal-toggle="popup-modal" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:ring-gray-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600">No, cancel</button>
+                    </div>
+                </div>
+            </div>
+        </div>
 
     </div>
 

src/components/Header.jsx

@@ -4,21 +4,24 @@ import '../stylesheets/TagCreator.css';
 const TagCreator = () => {
   return (
     <div>
-      <label id="header">Add Custom HTML Element</label>
+      <label id="header">Custom HTML Element</label>
       <div id="tag-create-box">
         <div className='tag-duo'>
-          <label className="tag-label">Tag:</label>
+          <label className="tag-label">Tag</label>
           <input className="tag-input"></input>
         </div>
         <div className='tag-duo' >
-          <label className="tag-label">Class:</label>
+          <label className="tag-label">Class</label>
           <input className="tag-input"></input>
         </div>
         <div className='tag-duo'>
-          <label className="tag-label">Id:</label>
+          <label className="tag-label">Id</label>
           <input className="tag-input"></input>
         </div>
-        <button id="add-element-btn">Add</button>
+        {/* <button id="add-element-btn">Add</button> */}
+        <button class="block text-white bg-indigo-700 hover:bg-indigo-800 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800" type="button" data-modal-toggle="popup-modal">
+          ADD
+        </button>
       </div>
     </div>
   )