Add files via upload

DSoftofficial · Mar 19, 2024 · e3cdc6a · e3cdc6a
1 parent e219bcc
commit e3cdc6a
Show file tree

Hide file tree

Showing 26 changed files with 1,591 additions and 0 deletions.
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.jsx b/src/App.jsx
diff --git a/src/assets/Tilder_icon.png b/src/assets/Tilder_icon.png
diff --git a/src/assets/react.svg b/src/assets/react.svg
diff --git a/src/components/DefaultPage/DefaultPage.jsx b/src/components/DefaultPage/DefaultPage.jsx
@@ -0,0 +1,31 @@
+import React from 'react'
+
+export default function DefaultPage(props) {
+    return (
+        <>
+            <div id="defaultPage" className={`d-${props.DefaultPageDisplay}`} style={props.dimensionsDefaultPage}>
+                <div className="defaultPageSection">
+                    <img src="/Tilder_icon.png" alt="" />
+                </div>
+                <div className="defaultPageSection">
+                    <div className="shortcutkeys">
+                        <div className="shortcutkeysSection">
+                            <span className="shortcutkeys">New File</span>
+                            <span className="shortcutkeys">New Folder</span>
+                            <span className="shortcutkeys">Open File</span>
+                            <span className="shortcutkeys">Open Folder</span>
+                            <span className="shortcutkeys">Toggle Primary SideBar</span>
+                        </div>
+                        <div className="shortcutkeysSection">
+                            <span className="shortcutkeys"><kbd>Ctrl</kbd> + <kbd>N</kbd></span>
+                            <span className="shortcutkeys"><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>N</kbd></span>
+                            <span className="shortcutkeys"><kbd>Ctrl</kbd> + <kbd>O</kbd></span>
+                            <span className="shortcutkeys"><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>O</kbd></span>
+                            <span className="shortcutkeys"><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
diff --git a/src/components/Editor/MonacoEditor.jsx b/src/components/Editor/MonacoEditor.jsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { Editor } from '@monaco-editor/react';
+
+function MonacoEditor(props) {
+    // console.log(props.code) // ** test purposes **
+    let options = {
+        selectOnLineNumbers: true,
+        roundedSelection: false,
+        readOnly: false,
+        cursorStyle: 'line',
+        automaticLayout: true,
+        minimap: {enabled: true},
+        wordWrapColumn: 82 
+    };
+    return (
+        <>
+            <div id="editor-wrapper" style={props.monacoEditorStyle} className={`d-${props.MonacoEditorDisplay}`}>
+                <Editor
+                    theme='vs-dark'
+                    defaultLanguage='python'
+                    options={options}
+                    path='fileName'
+                    language={props.language}
+                    value={props.code}
+                />
+            </div>
+        </>
+    )
+}
+
+export default MonacoEditor;
diff --git a/src/components/Info/Info.jsx b/src/components/Info/Info.jsx
@@ -0,0 +1,26 @@
+import moment from 'moment'
+import React from 'react'
+
+export default function Info(props) {
+    // console.log(import.meta.env.VITE_REACT_APP_VERSION) // **test purposes**
+    return (
+        <>
+            <div id="infowrpr" className={`d-${props.InfoDisplay}`} onClick={props.triggerInfoClose}>
+                <div id='info'>
+                    <div id="infoClose" className="infoSection" onClick={props.triggerInfoClose}>
+                        <i className="fa-solid fa-xmark fa-lg"></i>
+                    </div>
+                    <div id="infoContent" className="infoSection" align="center">
+                        <h5>Info</h5>
+                        <hr className="dropdowncontent-hr"/>
+                        <p>Version: <b> {import.meta.env.VITE_REACT_APP_VERSION}</b></p>
+                        <p>Date: <b>{moment().format('MMMM Do YYYY')}</b></p>
+                        <p>Licensed under <b>MIT</b> license</p>
+                        <p>Copyright &copy; {moment().format('YYYY')} DSoft</p>
+                        <button className="btn-normal">Send Feedback</button>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
diff --git a/src/components/MenuBar/MenuBar.jsx b/src/components/MenuBar/MenuBar.jsx
@@ -0,0 +1,217 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+
+function MenuBar(props) {
+  function quit() {
+    window.close();
+  }
+
+  return (
+    <>
+      <header>
+        <nav>
+          <div id="sidebarControls">
+            <div id="header_icon">
+              <img
+                src="/Tilder_icon.png"
+                alt="tilder_icon_header"
+                aria-label="Tilder"
+              />
+            </div>
+            <div className="navigation">
+              <div className="dropdown">
+                <span className="dropdown-trigger-btn">{props.file}</span>
+                <div className="dropdown-content">
+                  <ul>
+                    <li aria-label="New File (Ctrl + N)">New File</li>
+                    <li aria-label="">New Folder</li>
+                    <li aria-label="">New Window</li>
+                    <li aria-label="">New Tab</li>
+                    <hr className="dropdowncontent-hr" />
+                    <p className="form">
+                      <label className="add-photo-btn">Open File<input type="file" id="myfile" name="myfile" onChange={props.handleFileChange} />
+                      </label>
+                    </p>
+                    <li aria-label="">Open Folder</li>
+                    <div className="subdropdown">
+                      <li>Open Recent</li>
+                      <div className="subdropdown-content expandable">
+                        <ul>
+                          <li>
+                            Recent
+                            <i className="fa-solid fa-chevron-right"></i>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+                    <hr className="dropdowncontent-hr" />
+                    <li aria-label="">Edit</li>
+                    <li aria-label="">Edit recent file</li>
+                    <li aria-label="">Edit file temporarily</li>
+                    <hr className="dropdowncontent-hr" />
+                    <li aria-label="">Save</li>
+                    <li aria-label="">Save as</li>
+                    <li aria-label="">Change Save's root directory</li>
+                    <hr className="dropdowncontent-hr" />
+                    <li onClick={quit} aria-label="">
+                      Quit Editor
+                    </li>
+                  </ul>
+                </div>
+              </div>
+              <div className="dropdown">
+                <span className="dropdown-trigger-btn">{props.edit}</span>
+                <div className="dropdown-content">
+                  <li>Cut</li>
+                  <li>Copy</li>
+                  <li>Paste</li>
+                  <li>Paste as</li>
+                  <hr className="dropdowncontent-hr" />
+                  <li>Undo</li>
+                  <li>Redo</li>
+                  <hr className="dropdowncontent-hr" />
+                  <li>Find</li>
+                  <li>Replace</li>
+                  <li>Find in Files</li>
+                  <li>Replace in Files</li>
+                  <hr className="dropdowncontent-hr" />
+                  <li>Toggle Line Comment</li>
+                  <li>Toggle Block Comment</li>
+                  <hr className="dropdowncontent-hr" />
+                  <li>Lligence: Expand Abbreviation</li>
+                </div>
+              </div>
+              <div className="dropdown">
+                <span className="dropdown-trigger-btn">{props.view}</span>
+                <div className="dropdown-content">
+                  <li>Command Palette</li>
+                  <li>Open View</li>
+                  <hr className="dropdowncontent-hr" />
+                  <li>Appearance</li>
+                  <li>Editor Layout</li>
+                  <hr className="dropdowncontent-hr" />
+                  <li>Explorer</li>
+                  <li>Search</li>
+                  <li>Source Control</li>
+                  <li>Run</li>
+                  <li>Extensions</li>
+                  <li>Testing</li>
+                  <hr className="dropdowncontent-hr" />
+                  <li>Problems</li>
+                  <li>Output</li>
+                  <li>Debug Console</li>
+                  <li>Terminal</li>
+                  <hr className="dropdowncontent-hr" />
+                  <li>Word Wrap</li>
+                </div>
+              </div>
+              <div className="dropdown">
+                <span className="dropdown-trigger-btn">{props.go}</span>
+                <div className="dropdown-content">
+                  <li>Switch Editor</li>
+                  <li>Switch Group</li>
+                  <hr className="dropdowncontent-hr" />
+                  <li>Go to File</li>
+                  <li>Go to Symbol in Workspace</li>
+                  <hr className="dropdowncontent-hr" />
+                  <li>Go to Symbol in Editor</li>
+                  <li>Go to Definition</li>
+                  <li>Go to Declaration</li>
+                  <li>Go to Type Definition</li>
+                  <li>Go to Implementations</li>
+                  <li>Go to References</li>
+                  <hr className="dropdowncontent-hr" />
+                  <li>Go to Line/Column</li>
+                  <li>Go to Bracket</li>
+                  <hr className="dropdowncontent-hr" />
+                  <li>Next Problem</li>
+                  <li>Previous Problem</li>
+                </div>
+              </div>
+              <div className="dropdown">
+                <span className="dropdown-trigger-btn">{props.run_debug}</span>
+                <div className="dropdown-content">
+                  <li>Start Debugging</li>
+                  <li>Run Without Debugging</li>
+                  <li>Stop Debugging</li>
+                  <li>Restart Debugging</li>
+                  <hr className="dropdowncontent-hr" />
+                  <li>Open Configuration</li>
+                  <li>Add Configuration</li>
+                  <hr className="dropdowncontent-hr" />
+                  <li>Step Over</li>
+                  <li>Step Into</li>
+                  <li>Step Out</li>
+                  <li>Continue</li>
+                  <hr className="dropdowncontent-hr" />
+                  <li>Toggle Breakpoint</li>
+                  <li>New Breakpoint</li>
+                  <li>Enable All Breakpoints</li>
+                  <li>Disable All Breakpoints</li>
+                  <li>Remove All Breakpoints</li>
+                </div>
+              </div>
+
+              <div className="dropdown">
+                <span className="dropdown-trigger-btn">{props.print}</span>
+                <div className="dropdown-content">
+                  <li>Print Current file</li>
+                  <li>Choose File...</li>
+                  <hr className="dropdowncontent-hr" />
+                  <li>Print Selected Lines</li>
+                </div>
+              </div>
+              <div className="dropdown">
+                <span className="dropdown-trigger-btn">{props.shell}</span>
+                <div className="dropdown-content">
+                  <li>New Shell</li>
+                </div>
+              </div>
+
+              <div className="dropdown">
+                <span className="dropdown-trigger-btn">{props.help}</span>
+              </div>
+            </div>
+          </div>
+          <div id="sidebarSettings">
+            <span className="dropdown-trigger-btn" onClick={props.toggleInfoDisplay}>
+              <i className="fa-solid fa-circle-info"></i>
+            </span>
+            <span className="dropdown-trigger-btn">
+              <i className="fa-solid fa-sliders"></i>
+            </span>
+            <span className="dropdown-trigger-btn">
+              <i className="fa-regular fa-user"></i>
+            </span>
+          </div>
+        </nav>
+      </header>
+    </>
+  );
+}
+
+export default MenuBar;
+
+MenuBar.defaultProps = {
+  file: "File",
+  edit: "Edit",
+  view: "View",
+  go: "Go",
+  run_debug: "Run & Debug",
+  print: "Print",
+  shell: "Shell",
+  keys: "Keys",
+  help: "Help",
+};
+
+MenuBar.propTypes = {
+  file: PropTypes.string.isRequired,
+  edit: PropTypes.string.isRequired,
+  view: PropTypes.string.isRequired,
+  go: PropTypes.string.isRequired,
+  run_debug: PropTypes.string.isRequired,
+  print: PropTypes.string.isRequired,
+  shell: PropTypes.string.isRequired,
+  keys: PropTypes.string.isRequired,
+  help: PropTypes.string.isRequired,
+};
diff --git a/src/components/NewFile/NewFile.jsx b/src/components/NewFile/NewFile.jsx
@@ -0,0 +1,14 @@
+import React from 'react'
+
+export default function NewFile(props) {
+    return (
+        <>
+            <div id="newfilewrapper">
+                <div className={`d-${props.NewFileVisibility}`} id='newFile'>
+                    <h5>New File</h5>
+
+                </div>
+            </div>
+        </>
+    )
+}
diff --git a/src/components/ReviewBar/ReviewBar.jsx b/src/components/ReviewBar/ReviewBar.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+function ReviewBar() {
+  return (
+    <div className="reviewbarwrapper">
+
+    </div>
+  )
+}
+
+export default ReviewBar
diff --git a/src/components/SideBar/Main Components/Code Blocks/CodeBlocks.jsx b/src/components/SideBar/Main Components/Code Blocks/CodeBlocks.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const CodeBlocks = (props) => {
+  return (
+    <div id="codeblocksarea" className={`sidebarscontent d-${props.ariaExpandedisplaycodeblocks}`}>
+      <h6>Code Blocks</h6>
+    </div>
+  )
+}
+
+export default CodeBlocks
diff --git a/src/components/SideBar/Main Components/Debug/Debug.jsx b/src/components/SideBar/Main Components/Debug/Debug.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Debug = (props) => {
+  return (
+    <div id="debugarea" className={`sidebarscontent d-${props.ariaExpandedisplaydebug}`}>
+      <h6>Debug</h6>
+    </div>
+  )
+}
+
+export default Debug
diff --git a/src/components/SideBar/Main Components/Explorer/Explorer.js b/src/components/SideBar/Main Components/Explorer/Explorer.js
@@ -0,0 +1,11 @@
+// const file_pioneer_btn = document.querySelector(".fileexplorer")
+// const filepioneer = document.querySelector("explorerwrapper")
+// file_pioneer_btn.addEventListener('click', ()=> {
+//     if (filepioneer.style.display == 'flex'){
+//         filepioneer.style.display == 'none'
+//     }
+
+//     else{
+//         filepioneer.style.display == 'flex'
+//     }
+// })
diff --git a/src/components/SideBar/Main Components/Explorer/Explorer.jsx b/src/components/SideBar/Main Components/Explorer/Explorer.jsx
@@ -0,0 +1,11 @@
+import React, {useState} from 'react'
+
+export default function Explorer(props) {
+    const [filepioneerbtn, FilePioneerVisibility] = useState()
+    return (
+        <div id="filepioneer" className='sidebarscontent'>
+            <h6>File Pioneer</h6>
+        </div>
+    )
+}
+
diff --git a/src/components/SideBar/Main Components/Extensions/Extensions.jsx b/src/components/SideBar/Main Components/Extensions/Extensions.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Extensions = (props) => {
+  return (
+    <div id="extensionsarea" className={`sidebarscontent d-${props.ariaExpandedisplayextensions}`}>
+      <h6>Extensions</h6>
+    </div>
+  )
+}
+
+export default Extensions