make vuetify as framework.

63b94613 · Mohamed Anis Koubaa · 57e3f86f · 63b94613 · 63b94613 · 63b94613
Commit 63b94613 authored 1 month ago by Mohamed Anis Koubaa
--- a/services/.idea/.gitignore
+++ b/services/.idea/.gitignore
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
--- a/services/frontend/.eslintrc-auto-import.json
+++ b/services/frontend/.eslintrc-auto-import.json
+{
+  "globals": {
+    "Component": true,
+    "ComponentPublicInstance": true,
+    "ComputedRef": true,
+    "DirectiveBinding": true,
+    "EffectScope": true,
+    "ExtractDefaultPropTypes": true,
+    "ExtractPropTypes": true,
+    "ExtractPublicPropTypes": true,
+    "InjectionKey": true,
+    "MaybeRef": true,
+    "MaybeRefOrGetter": true,
+    "PropType": true,
+    "Ref": true,
+    "VNode": true,
+    "WritableComputedRef": true,
+    "computed": true,
+    "createApp": true,
+    "customRef": true,
+    "defineAsyncComponent": true,
+    "defineComponent": true,
+    "effectScope": true,
+    "getCurrentInstance": true,
+    "getCurrentScope": true,
+    "h": true,
+    "inject": true,
+    "isProxy": true,
+    "isReactive": true,
+    "isReadonly": true,
+    "isRef": true,
+    "markRaw": true,
+    "nextTick": true,
+    "onActivated": true,
+    "onBeforeMount": true,
+    "onBeforeRouteLeave": true,
+    "onBeforeRouteUpdate": true,
+    "onBeforeUnmount": true,
+    "onBeforeUpdate": true,
+    "onDeactivated": true,
+    "onErrorCaptured": true,
+    "onMounted": true,
+    "onRenderTracked": true,
+    "onRenderTriggered": true,
+    "onScopeDispose": true,
+    "onServerPrefetch": true,
+    "onUnmounted": true,
+    "onUpdated": true,
+    "onWatcherCleanup": true,
+    "provide": true,
+    "reactive": true,
+    "readonly": true,
+    "ref": true,
+    "resolveComponent": true,
+    "shallowReactive": true,
+    "shallowReadonly": true,
+    "shallowRef": true,
+    "toRaw": true,
+    "toRef": true,
+    "toRefs": true,
+    "toValue": true,
+    "triggerRef": true,
+    "unref": true,
+    "useAttrs": true,
+    "useCssModule": true,
+    "useCssVars": true,
+    "useId": true,
+    "useLink": true,
+    "useModel": true,
+    "useRoute": true,
+    "useRouter": true,
+    "useSlots": true,
+    "useTemplateRef": true,
+    "watch": true,
+    "watchEffect": true,
+    "watchPostEffect": true,
+    "watchSyncEffect": true
+  }
+}
--- a/services/frontend/README.md
+++ b/services/frontend/README.md
@@ -7,7 +7,7 @@ npm install
 ### Compiles and hot-reloads for development
 ```
-npm run serve
+npm run dev
 ```
 ### Compiles and minifies for production

--- a/services/frontend/eslint.config.js
+++ b/services/frontend/eslint.config.js
+import js from '@eslint/js'
+import pluginVue from 'eslint-plugin-vue'
+export default [
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{js,mjs,jsx,vue}'],
+  },
+  {
+    name: 'app/files-to-ignore',
+    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
+  },
+  js.configs.recommended,
+  ...pluginVue.configs['flat/recommended'],
+  {
+    rules: {
+      'vue/multi-word-component-names': 'off',
+    },
+  }
+]
--- a/services/frontend/index.html
+++ b/services/frontend/index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Welcome to Vuetify 3</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/services/frontend/jsconfig.json
+++ b/services/frontend/jsconfig.json
 {
  "compilerOptions": {
+    "allowJs": true,
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
    "paths": {
      "@/*": [
        "src/*"

--- a/services/frontend/package.json
+++ b/services/frontend/package.json
 {
-  "name": "frontend",
+  "name": "regimo",
-  "version": "0.1.0",
  "private": true,
+  "type": "module",
+  "version": "0.0.0",
  "scripts": {
-    "serve": "vue-cli-service serve",
+    "dev": "vite",
-    "build": "vue-cli-service build",
+    "build": "vite build",
-    "lint": "vue-cli-service lint"
+    "preview": "vite preview",
+    "lint": "eslint . --fix"
  },
  "dependencies": {
-    "axios": "^1.2.1",
+    "@mdi/font": "7.4.47",
-    "bootstrap": "^5.3.3",
+    "roboto-fontface": "*",
-    "bootstrap-vue": "^2.23.1",
+    "vue": "^3.4.31",
-    "core-js": "^3.8.3",
+    "vuetify": "^3.6.14"
-    "vue": "^3.4.27",
-    "vue-router": "^4.0.3",
-    "vuex": "^4.1.0"
  },
  "devDependencies": {
-    "@babel/core": "^7.12.16",
+    "@eslint/js": "^9.14.0",
-    "@babel/eslint-parser": "^7.12.16",
+    "@vitejs/plugin-vue": "^5.0.5",
-    "@vue/cli-plugin-babel": "~5.0.0",
+    "eslint": "^9.14.0",
-    "@vue/cli-plugin-eslint": "~5.0.0",
+    "eslint-plugin-import": "^2.29.1",
-    "@vue/cli-plugin-router": "~5.0.0",
+    "eslint-plugin-n": "^16.6.2",
-    "@vue/cli-service": "~5.0.0",
+    "eslint-plugin-node": "^11.1.0",
-    "eslint": "^7.32.0",
+    "eslint-plugin-promise": "^6.4.0",
-    "eslint-plugin-vue": "^8.0.3"
+    "eslint-plugin-vue": "^9.30.0",
-  },
+    "eslint-visitor-keys": "^4.2.0",
-  "eslintConfig": {
+    "pinia": "^2.1.7",
-    "root": true,
+    "sass": "1.77.8",
-    "env": {
+    "sass-embedded": "^1.77.8",
-      "node": true
+    "unplugin-auto-import": "^0.17.6",
-    },
+    "unplugin-fonts": "^1.1.1",
-    "extends": [
+    "unplugin-vue-components": "^0.27.2",
-      "plugin:vue/vue3-essential",
+    "unplugin-vue-router": "^0.10.0",
-      "eslint:recommended"
+    "vite": "^6.1.1",
-    ],
+    "vite-plugin-vue-layouts": "^0.11.0",
-    "parserOptions": {
+    "vite-plugin-vuetify": "^2.0.3",
-      "parser": "@babel/eslint-parser"
+    "vue-router": "^4.4.0"
-    },
+  }
-    "rules": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead",
-    "not ie 11"
-  ]
 }
--- a/services/frontend/src/App.vue
+++ b/services/frontend/src/App.vue
 <template>
-  <div id="app">
+  <v-app>
-    <router-view/>
+    <router-view />
-  </div>
+  </v-app>
 </template>
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-</style>
\ No newline at end of file
--- a/services/frontend/src/assets/logo.svg
+++ b/services/frontend/src/assets/logo.svg
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M261.126 140.65L164.624 307.732L256.001 466L377.028 256.5L498.001 47H315.192L261.126 140.65Z" fill="#1697F6"/>
+<path d="M135.027 256.5L141.365 267.518L231.64 111.178L268.731 47H256H14L135.027 256.5Z" fill="#AEDDFF"/>
+<path d="M315.191 47C360.935 197.446 256 466 256 466L164.624 307.732L315.191 47Z" fill="#1867C0"/>
+<path d="M268.731 47C76.0026 47 141.366 267.518 141.366 267.518L268.731 47Z" fill="#7BC6FF"/>
+</svg>
--- a/services/frontend/src/components/AppFooter.vue
+++ b/services/frontend/src/components/AppFooter.vue
+<template>
+  <v-footer 
+    height="40" 
+    app
+  >
+    <a 
+      v-for="item in items"
+      :key="item.title"
+      :href="item.href"
+      :title="item.title"
+      class="d-inline-block mx-2 social-link"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <v-icon
+        :icon="item.icon"
+        :size="item.icon === '$vuetify' ? 24 : 16"
+      />
+    </a>
+    <div
+      class="text-caption text-disabled"
+      style="position: absolute; right: 16px;"
+    >
+      &copy; 2016-{{ (new Date()).getFullYear() }} <span class="d-none d-sm-inline-block">Vuetify, LLC</span>
+      —
+      <a
+        class="text-decoration-none on-surface"
+        href="https://vuetifyjs.com/about/licensing/"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        MIT License
+      </a>
+    </div>
+  </v-footer>
+</template>
+<script setup>
+const items = [
+  {
+    title: 'Vuetify Documentation',
+    icon: `$vuetify`,
+    href: 'https://vuetifyjs.com/',
+  },
+  {
+    title: 'Vuetify Support',
+    icon: 'mdi-shield-star-outline',
+    href: 'https://support.vuetifyjs.com/',
+  },
+  {
+    title: 'Vuetify X',
+    icon: ['M2.04875 3.00002L9.77052 13.3248L1.99998 21.7192H3.74882L10.5519 14.3697L16.0486 21.7192H22L13.8437 10.8137L21.0765 3.00002H19.3277L13.0624 9.76874L8.0001 3.00002H2.04875ZM4.62054 4.28821H7.35461L19.4278 20.4308H16.6937L4.62054 4.28821Z'],
+    href: 'https://x.com/vuetifyjs',
+  },
+  {
+    title: 'Vuetify GitHub',
+    icon: `mdi-github`,
+    href: 'https://github.com/vuetifyjs/vuetify',
+  },
+  {
+    title: 'Vuetify Discord',
+    icon: ['M22,24L16.75,19L17.38,21H4.5A2.5,2.5 0 0,1 2,18.5V3.5A2.5,2.5 0 0,1 4.5,1H19.5A2.5,2.5 0 0,1 22,3.5V24M12,6.8C9.32,6.8 7.44,7.95 7.44,7.95C8.47,7.03 10.27,6.5 10.27,6.5L10.1,6.33C8.41,6.36 6.88,7.53 6.88,7.53C5.16,11.12 5.27,14.22 5.27,14.22C6.67,16.03 8.75,15.9 8.75,15.9L9.46,15C8.21,14.73 7.42,13.62 7.42,13.62C7.42,13.62 9.3,14.9 12,14.9C14.7,14.9 16.58,13.62 16.58,13.62C16.58,13.62 15.79,14.73 14.54,15L15.25,15.9C15.25,15.9 17.33,16.03 18.73,14.22C18.73,14.22 18.84,11.12 17.12,7.53C17.12,7.53 15.59,6.36 13.9,6.33L13.73,6.5C13.73,6.5 15.53,7.03 16.56,7.95C16.56,7.95 14.68,6.8 12,6.8M9.93,10.59C10.58,10.59 11.11,11.16 11.1,11.86C11.1,12.55 10.58,13.13 9.93,13.13C9.29,13.13 8.77,12.55 8.77,11.86C8.77,11.16 9.28,10.59 9.93,10.59M14.1,10.59C14.75,10.59 15.27,11.16 15.27,11.86C15.27,12.55 14.75,13.13 14.1,13.13C13.46,13.13 12.94,12.55 12.94,11.86C12.94,11.16 13.45,10.59 14.1,10.59Z'],
+    href: 'https://community.vuetifyjs.com/',
+  },
+  {
+    title: 'Vuetify Reddit',
+    icon: `mdi-reddit`,
+    href: 'https://reddit.com/r/vuetifyjs',
+  },
+]
+</script>
+<style scoped lang="sass">
+.social-link :deep(.v-icon)
+  color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity))
+  text-decoration: none
+  transition: .2s ease-in-out
+  &:hover
+    color: rgba(25, 118, 210, 1)
+</style>
--- a/services/frontend/src/components/HelloWorld.vue
+++ b/services/frontend/src/components/HelloWorld.vue
+<template>
+  <v-container class="fill-height">
+    <v-responsive
+      class="align-centerfill-height mx-auto"
+      max-width="900"
+    >
+      <v-img
+        class="mb-4"
+        height="150"
+        src="@/assets/logo.png"
+      />
+      <div class="text-center">
+        <div class="text-body-2 font-weight-light mb-n1">
+          Welcome to
+        </div>
+        <h1 class="text-h2 font-weight-bold">
+          Vuetify
+        </h1>
+      </div>
+      <div class="py-4" />
+      <v-row>
+        <v-col cols="12">
+          <v-card
+            class="py-4"
+            color="surface-variant"
+            image="https://cdn.vuetifyjs.com/docs/images/one/create/feature.png"
+            prepend-icon="mdi-rocket-launch-outline"
+            rounded="lg"
+            variant="outlined"
+          >
+            <template #image>
+              <v-img position="top right" />
+            </template>
+            <template #title>
+              <h2 class="text-h5 font-weight-bold">
+                Get started
+              </h2>
+            </template>
+            <template #subtitle>
+              <div class="text-subtitle-1">
+                Replace this page by removing <v-kbd>{{`<HelloWorld></HelloWorld>`}}</v-kbd> in <v-kbd>pages/index.vue</v-kbd>.
+              </div>
+            </template>
+            <v-overlay
+              opacity=".12"
+              scrim="primary"
+              contained
+              model-value
+              persistent
+            />
+          </v-card>
+        </v-col>
+        <v-col cols="6">
+          <v-card
+            append-icon="mdi-open-in-new"
+            class="py-4"
+            color="surface-variant"
+            href="https://vuetifyjs.com/"
+            prepend-icon="mdi-text-box-outline"
+            rel="noopener noreferrer"
+            rounded="lg"
+            subtitle="Learn about all things Vuetify in our documentation."
+            target="_blank"
+            title="Documentation"
+            variant="text"
+          >
+            <v-overlay
+              opacity=".06"
+              scrim="primary"
+              contained
+              model-value
+              persistent
+            />
+          </v-card>
+        </v-col>
+        <v-col cols="6">
+          <v-card
+            append-icon="mdi-open-in-new"
+            class="py-4"
+            color="surface-variant"
+            href="https://vuetifyjs.com/introduction/why-vuetify/#feature-guides"
+            prepend-icon="mdi-star-circle-outline"
+            rel="noopener noreferrer"
+            rounded="lg"
+            subtitle="Explore available framework Features."
+            target="_blank"
+            title="Features"
+            variant="text"
+          >
+            <v-overlay
+              opacity=".06"
+              scrim="primary"
+              contained
+              model-value
+              persistent
+            />
+          </v-card>
+        </v-col>
+        <v-col cols="6">
+          <v-card
+            append-icon="mdi-open-in-new"
+            class="py-4"
+            color="surface-variant"
+            href="https://vuetifyjs.com/components/all"
+            prepend-icon="mdi-widgets-outline"
+            rel="noopener noreferrer"
+            rounded="lg"
+            subtitle="Discover components in the API Explorer."
+            target="_blank"
+            title="Components"
+            variant="text"
+          >
+            <v-overlay
+              opacity=".06"
+              scrim="primary"
+              contained
+              model-value
+              persistent
+            />
+          </v-card>
+        </v-col>
+        <v-col cols="6">
+          <v-card
+            append-icon="mdi-open-in-new"
+            class="py-4"
+            color="surface-variant"
+            href="https://discord.vuetifyjs.com"
+            prepend-icon="mdi-account-group-outline"
+            rel="noopener noreferrer"
+            rounded="lg"
+            subtitle="Connect with Vuetify developers."
+            target="_blank"
+            title="Community"
+            variant="text"
+          >
+            <v-overlay
+              opacity=".06"
+              scrim="primary"
+              contained
+              model-value
+              persistent
+            />
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-responsive>
+  </v-container>
+</template>
+<script setup>
+//
+</script>
--- a/services/frontend/src/components/README.md
+++ b/services/frontend/src/components/README.md
+# Components
+Vue template files in this folder are automatically imported.
+## 🚀 Usage
+Importing is handled by [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components). This plugin automatically imports `.vue` files created in the `src/components` directory, and registers them as global components. This means that you can use any component in your application without having to manually import it.
+The following example assumes a component located at `src/components/MyComponent.vue`:
+```vue
+<template>
+  <div>
+    <MyComponent />
+  </div>
+</template>
+<script lang="ts" setup>
+  //
+</script>
+```
+When your template is rendered, the component's import will automatically be inlined, which renders to this:
+```vue
+<template>
+  <div>
+    <MyComponent />
+  </div>
+</template>
+<script lang="ts" setup>
+  import HelloWorld from 'HelloWorld.vue'
+</script>
+```
--- a/services/frontend/src/layouts/README.md
+++ b/services/frontend/src/layouts/README.md
+# Layouts
+Layouts are reusable components that wrap around pages. They are used to provide a consistent look and feel across multiple pages.
+Full documentation for this feature can be found in the Official [vite-plugin-vue-layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts) repository.
--- a/services/frontend/src/layouts/default.vue
+++ b/services/frontend/src/layouts/default.vue
+<template>
+  <v-main>
+    <router-view />
+  </v-main>
+  <AppFooter />
+</template>
+<script setup>
+  //
+import AppFooter from "@/components/AppFooter.vue";
+</script>
--- a/services/frontend/src/main.js
+++ b/services/frontend/src/main.js
-import 'bootstrap/dist/css/bootstrap.css';
+/**
-import { createApp } from "vue";
+ * main.js
-import axios from 'axios';
+ *
+ * Bootstraps Vuetify and other plugins then mounts the App`
+ */
-import App from './App.vue';
+// Plugins
-import router from './router';
+import { registerPlugins } from '@/plugins'
-const app = createApp(App);
+// Components
+import App from './App.vue'
-axios.defaults.withCredentials = true;
+// Composable
-axios.defaults.baseURL = 'http://localhost:8000/';  // the FastAPI backend
+import { createApp } from 'vue'
-app.use(router);
+const app = createApp(App)
-app.mount("#app");
+registerPlugins(app)
+app.mount('#app')
--- a/services/frontend/src/pages/README.md
+++ b/services/frontend/src/pages/README.md
+# Pages
+Vue components created in this folder will automatically be converted to navigatable routes.
+Full documentation for this feature can be found in the Official [unplugin-vue-router](https://github.com/posva/unplugin-vue-router) repository.
--- a/services/frontend/src/pages/index.vue
+++ b/services/frontend/src/pages/index.vue
+<template>
+  <v-layout class="rounded rounded-md">
+    <v-app-bar title="Application bar" />
+    <v-navigation-drawer>
+      <v-list>
+        <v-list-item title="Navigation drawer" />
+      </v-list>
+    </v-navigation-drawer>
+    <v-main
+      class="d-flex align-center justify-center"
+      style="min-height: 300px;"
+    >
+      Main Content
+    </v-main>
+  </v-layout>
+</template>
\ No newline at end of file
--- a/services/frontend/src/plugins/README.md
+++ b/services/frontend/src/plugins/README.md
+# Plugins
+Plugins are a way to extend the functionality of your Vue application. Use this folder for registering plugins that you want to use globally.
--- a/services/frontend/src/plugins/index.js
+++ b/services/frontend/src/plugins/index.js
+/**
+ * plugins/index.js
+ *
+ * Automatically included in `./src/main.js`
+ */
+// Plugins
+import vuetify from './vuetify'
+import pinia from '@/stores'
+import router from '@/router'
+export function registerPlugins (app) {
+  app
+    .use(vuetify)
+    .use(router)
+    .use(pinia)
+}
--- a/services/frontend/src/plugins/vuetify.js
+++ b/services/frontend/src/plugins/vuetify.js
+/**
+ * plugins/vuetify.js
+ *
+ * Framework documentation: https://vuetifyjs.com`
+ */
+// Styles
+import '@mdi/font/css/materialdesignicons.css'
+import 'vuetify/styles'
+// Composables
+import { createVuetify } from 'vuetify'
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+export default createVuetify({
+  theme: {
+    defaultTheme: 'dark',
+  },
+})