Added Structural Documentation

- Also renamed some directories for consistency
- Moved all components into corresponding subdirectories
- Minor Text Changes

client/README.md

@@ -1,18 +1,25 @@
-# Vue 3 + TypeScript + Vite
+# nfSense Web Client
+This folder contains the standard client for the nfSense firewall.
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+## Goals and Priorities
+The nfSense web client should be...
+- As reliable as possible
+- Pleasing to the eye and intuitive to new users
+- Fast, and not get in your way.
 
-## Recommended IDE Setup
+## Technology
+### General Structure
+The nfSense web client is a monolithic Single-Page Web-Application.
 
-- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+### Critical Dependencies
+We encourage any potential contributor to familiarize themselves with these tools and libraries before making changes, as they lie at the heart of the project.
+- Vue 3: Frontend Framework
+- Vite: Dev and Build Tool
+- Typescript: Adds Type Information to JS
+- Vue Macros: Replacement for the deprecated experimental Reactivity Transform feature of Vue 3
 
-## Type Support For `.vue` Imports in TS
+### Important Dependencies
-
+These libraries aren't mandatory to be able to work on the nfSense web client, this listing is merely meant to pre-empt redundancies.
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+- ESLint: The standard JS linter, which we also use to enforce some code style choices.
-
+- Iconify: Icons (Could be replaced with custom ones)
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+- Markdown-It: We prefer markdown for informational texts, and use this to render it on the frontend.
-
-1. Disable the built-in TypeScript Extension
-   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.

client/src/components/display/README.md

@@ -0,0 +1,2 @@
+# Display Components
+This folder contains components whose primary purpose it is to visually represent data that's passed in.

client/src/components/input/README.md

@@ -0,0 +1,3 @@
+# Input Components
+This folder contains components whose primary purpose it is to accept user input, and usually provide the selection to their parent as data through their v-model.
+Convention has it that any component that can be described as an input for a specific data type should be named via the format "TypeInput", where "Type" is replaced with the types name.

client/src/components/layout/README.md

@@ -0,0 +1,3 @@
+# Layout Components
+This folder contains components whose primary purpose it is to aid in laying out the GUI. The content presented by these components is generally speaking rather static.
+Unlike most other components in this project, layout components may render fragments instead of root nodes. When they do their name should be pluralized.

client/src/components/meta/README.md

@@ -0,0 +1,11 @@
+# Metacomponents
+This folder contains components which don't represent specific visual elements, but rather annotate other components to add specific functionality.
+Due to their more confusing nature, their function and implementation is described here.
+
+## Portal
+This component wraps Vues standard `Teleport` component, providing semantic meaning to a `Teleport` target and not just the source.
+
+It also fixes an issue where one could not update the `Teleport` source by tracking tracking active targets and not rendering the source when there is no active target for that key.
+
+## PageHeader
+This component uses the above `Portal` imlpementation to allow updating the Page Header elsewhere in the layout, whilst also setting the title and providing a basic consistent layout.

client/src/definitions.ts

@@ -1,6 +1,6 @@
 import { toFormValidator } from '@vee-validate/zod';
 import * as zod from 'zod';
-import { SearchProvider, Options } from '~/components/inputs/DropdownInput.vue';
+import { SearchProvider, Options } from '~/components/input/DropdownInput.vue';
 import { apiCall } from './api';
 
 const GetHardwareInterfaces: SearchProvider = async (o) => {

client/src/global-styles/README.md

@@ -0,0 +1,17 @@
+# Global Styles
+This folder contains stylesheets which contain rules that apply to everything in the project.
+
+## atomic.css: Atomic Styles
+Utility classes which set only one or a few generic attributes.
+
+## colors.css: Color System
+Contains the definition of Base Colors, Color Palettes and Color Contexts.
+
+## components.css: Pure Style Components
+These components are meant to style DOM elements regardless of which Vue component renders them, promoting reuse.
+
+## mlfe.css: CSS Reset
+MLFE is a minimal but aggressive CSS reset that helps us with designing predictable layout.
+
+## transitions.css: Generi Transitions
+Contains transition classes for use with Vues `Transition` components.

client/src/global-styles/mlfe.css

@@ -1,4 +1,4 @@
-/* MLFE: Marginless FlexEverything (A CSS Reset for creating Layouts) */
+/* MLFE: Marginless FlexEverything (A CSS Reset for Layout) */
 :root {
   font-family: sans-serif;
   line-height: 1;

client/src/global-styles/transitions.css

@@ -1,3 +1,4 @@
+/* Classes for Vue Transitions */
 .fade-enter-active, .fade-leave-active { 
   transition: all 0.2s ease-out !important;
 }

client/src/main.ts

@@ -5,15 +5,15 @@ import './global-styles/mlfe.css';
 import './global-styles/transitions.css';
 import 'vue-toast-notification/dist/theme-default.css';
 
-import NicerForm from './components/inputs/NicerForm.vue';
+import NicerForm from './components/input/NicerForm.vue';
-import PillBar from './components/inputs/PillBar.vue';
+import PillBar from './components/input/PillBar.vue';
-import TextBox from './components/inputs/TextBox.vue';
+import TextBox from './components/input/TextBox.vue';
-import EnumInput from './components/inputs/EnumInput.vue';
+import EnumInput from './components/input/EnumInput.vue';
-import NumberBox from './components/inputs/NumberBox.vue';
+import NumberBox from './components/input/NumberBox.vue';
-import MultilineTextBox from './components/inputs/MultilineTextBox.vue';
+import MultilineTextBox from './components/input/MultilineTextBox.vue';
-import CheckBox from './components/inputs/CheckBox.vue';
+import CheckBox from './components/input/CheckBox.vue';
-import SingleSelect from './components/inputs/SingleSelect.vue';
+import SingleSelect from './components/input/SingleSelect.vue';
-import MultiSelect from './components/inputs/MultiSelect.vue';
+import MultiSelect from './components/input/MultiSelect.vue';
 import Heading from './components/display/Heading.vue';
 
 import { Form, Field, ErrorMessage  } from 'vee-validate';

client/src/pages/test.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SearchProvider, Options } from '../components/inputs/DropdownInput.vue';
+import { SearchProvider, Options } from '../components/input/DropdownInput.vue';
 
 const testValues: Options = {
   1: { display: 'Option 1' },

client/vite.config.ts

@@ -61,8 +61,8 @@ export default defineConfig({
       },
     }),
     Components({
-      extensions: ['vue', 'md'],
+      extensions: ['vue'],
-      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
+      include: [/\.vue$/, /\.vue\?vue/],
       dts: 'src/generated/components.d.ts',
       resolvers: [
         IconsResolver(),