Merge pull request #13 from Open-STEM/kq-vite

Kq vite

Author: kcq888

XRP Software Architecture.pdf

@@ -14,7 +14,7 @@ To export the Markdown file, these are the tools need to be installed on your sy
 - [plantuml](https://plantuml.com/)
 
 ```
-pandoc docs/XRP\ Software\ Architecture.md -t pdf -F pandoc-plantuml -o "XRP Software Architecture".pdf
+pandoc docs/XRP\ Software\ Architecture.md --pdf-engine=xelatex -V "mainfont:DejaVu Sans" -V "monofont:DejaVu Sans Mono" -t pdf -F pandoc-plantuml -o "XRP Software Architecture".pdf
 ```
 
 ## References

docs/README.md

@@ -282,13 +282,13 @@ The application components manages the core functionality of the following featu
 @startuml
     class AppMgr
     class ConnectionMgr
-    class FilesysMgr
+    class CommandToXRPMgr
     class EditorMgr
     class StreamWorker
 
     StreamWorker *-- ConnectionMgr
+    CommandToXRPMgr *-- ConnectionMgr
     ConnectionMgr *-- AppMgr
-    FilesysMgr *-- AppMgr
     EditorMgr *-- AppMgr
 
 @enduml
@@ -383,6 +383,128 @@ The XRP Web Development application is developed and meet the following quality
 
 XRP Web Development application is hosted in a server farm at WPI. Https secured protocol is used. A valid server HTTP server certificate is configured for the XRPCode subdomain.
 
+## Coding Standards
+
+Every organization has its own software development standard. The following is some of the recommend best practices.
+
+### Naming Convention
+
+The goal of of having a standard naming convention in the code base is to provide the following attributes of software engineering principles.
+
+- Readability
+- Maintainability
+- Organization
+- Communication
+
+These attributes help create a cohesive and structure codebase that is easier to work with and to help reduce errors and to promote collaboration among developers. Readability and Maintainability attributes contribute the overal software development styles and consistency in the codebase. The last two attributes create a collaborative environment and froster transparency and improve healthy organization interactions.
+
+The following list some popular naming conventions.
+
+- PascalCase
+- camelCase
+- kebab-case
+- SCREAMING_SNAKE_CASE
+
+#### Pascal Case
+
+Pascal Case refers to the convention of writing compound words in which the first letter of each word is capitalized. There is no space or punctuation between words. The typical use case is class name or component name. See the below example.
+
+```
+// React Component
+const NewFile = () => {
+    // ...
+}
+
+// Enumeration
+export enum ConnectionType {
+    USB,
+    BLUETOOTH
+}
+
+// types
+export type ListItem {
+    label: string,
+    image: string
+}
+```
+
+#### camelCase
+
+Camel Case refers to the convention of writing compound words or phrases where each word begin with a capital letter except the first word. This convention always starts with a lower case letter of the first word.
+
+```
+// Variable Name
+const [filename, setFileName] = useState('')
+
+// Function Name
+const getFilename = () {
+    return this.filename;
+}
+
+// Object properties
+const userOptions: ListItem[] = [
+    {
+        label: 'Kevin',
+        image: blocklyIcon,
+    },
+    {
+        label: 'Frank',
+        image: pythonIcon,
+    },
+    {
+        label: 'Kathy',
+        image: pythonIcon,
+    },
+];
+
+// Custom Hooks
+const useFile = () => {
+    // ...
+}
+```
+
+#### Kebab Case
+
+Kebab case refers to the convention of writing compound words in lowercase name with a hyphens ("-") between the words. Kebab case is popular for using in CSS class names. Since this architecture specified Tailwind CSS as the CSS utility framework, all of the Tailwind CSS styling are specified inline with CSS utility classes. Kebab case is used sparingly.
+However, this convention can be used in naming source files.
+
+### Folder Structure
+
+A clear and organized folder structure provides easy navigation of the source tree and grouping of all related components in the subtree. A well-designed folder structure is essential for code maintainance and for codebase scalability. An example of the folder structure is shown below.
+
+```
+src/                     // Root folder for the source code
+├── features/            // Grouping features of the application
+│   └── ...              // Other feature folders (e.g., authentication, dashboard)
+├── components/          // Reusable components
+│   ├── ...              // Component folders (e.g., Button, Header)
+├── utils/               // Utility functions
+│   ├── ...              // Helper functions or services (e.g., dateUtils, apiUtils)
+├── assets/              // Storing static assets
+│   ├── images/          // Storing image files (e.g., logos, icons)
+│   ├── fonts/           // Storing font files (e.g., custom fonts)
+│   └── ...              // Other asset types (e.g., videos, audio)
+├── styles/              // Global styles
+│   └── ...              // Style files (e.g., global.css, themes)
+├── App.tsx              // Entry point of the application
+└── ...                  // Other necessary files and folders (e.g., index.tsx, routes.tsx)
+```
+
+## Development Environment
+
+This software architecture is based on all open-source software and tools. It leverages existing React components publish via npm. Visual Studio Code (VSCode) is the recommended developer integrated development environment (IDE). This IDE provides many helpful extensions to ease software development. Github repository is used to maintain the codebase.
+
+### Recommended VSCode plug-ins
+
+- ESLint
+- React Extension Pack
+- Tailwind CSS Intellisense
+- Vitest
+- Git Graph
+- PlantUML
+- Prettier
+- Github Copilot Chat
+
 ## Ricks
 
 The following list a potential list of risks.

docs/XRP Software Architecture.md

@@ -3,7 +3,7 @@
     <head>
         <meta charset="UTF-8" />
         <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-        <link id="flexlayout-stylesheet" rel="stylesheet" href="./node_modules/flexlayout-react/style/light.css" />
+        <link vite-ignore id="flexlayout-stylesheet" rel="stylesheet" href="./node_modules/flexlayout-react/style/light.css" />
         <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
         <title>XRP Web App</title>
     </head>

index.html

@@ -31,4 +31,4 @@
       ["os-path", "latest"]
     ],
     "version": "1.0.3"
-  }
+}

lib/package.json

@@ -1,13 +1,16 @@
 {
-  "name": "vite-monaco",
+  "name": "xrpweb",
+  "description": "XRP Web Development Environment",
+  "homepage": "https://experientialrobotics.org/",
+  "license": "GPL-2.0-only",
   "private": true,
-  "version": "0.0.0",
+  "version": "2.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview",
+    "preview": "vite preview --base=./ --open",
     "test": "vitest"
   },
   "dependencies": {
@@ -20,29 +23,33 @@
     "@codingame/monaco-vscode-textmate-service-override": "^11.1.2",
     "@codingame/monaco-vscode-theme-defaults-default-extension": "^11.1.2",
     "@codingame/monaco-vscode-theme-service-override": "^11.1.2",
-    "@ramonak/react-progress-bar": "^5.3.0",
     "@typefox/pyright-browser": "^1.1.299",
     "@xterm/addon-attach": "^0.11.0",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/xterm": "^5.5.0",
+    "file-saver": "^2.0.5",
     "flexlayout-react": "^0.8.1",
     "i18next": "^24.2.1",
     "jszip": "^3.10.1",
     "mitt": "^3.0.1",
+    "moment": "^2.30.1",
     "monaco-editor": "npm:@codingame/monaco-vscode-editor-api@^11.1.2",
     "monaco-languageclient": "^9.1.0",
     "pino": "^9.6.0",
     "pino-pretty": "^13.0.0",
-    "radix-ui": "^1.1.2",
     "react": "^18.3.1",
     "react-arborist": "^3.4.0",
     "react-blockly": "^9.0.0",
+    "react-customizable-progressbar": "^2.0.1",
     "react-dom": "^18.3.1",
+    "react-hotkeys-hook": "^4.6.1",
     "react-i18next": "^15.4.0",
     "react-icons": "^5.4.0",
     "react-xtermjs": "^1.0.9",
     "use-file-picker": "^2.1.2",
     "use-resize-observer": "^9.1.0",
+    "usehooks-ts": "^3.1.1",
+    "uuid": "^11.0.5",
     "vscode": "npm:@codingame/monaco-vscode-api@^11.1.2",
     "vscode-ws-jsonrpc": "^3.4.0"
   },
@@ -52,6 +59,8 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
+    "@types/file-saver": "^2.0.7",
+    "@types/moment": "^2.11.29",
     "@types/node": "^22.10.7",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
@@ -68,12 +77,13 @@
     "postcss": "^8.5.1",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.11",
+    "rollup-plugin-visualizer": "^5.14.0",
     "tailwindcss": "^3.4.17",
     "tailwindcss-debug-screens": "^2.2.1",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.18.2",
     "vite": "^6.0.5",
-    "vite-bundle-visualizer": "^1.2.1",
+    "vite-plugin-static-copy": "^2.3.0",
     "vitest": "^3.0.0"
   }
 }