add new folders in assets

package.json

@@ -1,24 +1,33 @@
 {
   "name": "Interface",
-  "private": true,
   "version": "0.0.0",
-  "type": "module",
+  "private": true,
   "scripts": {
-    "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
+    "dev": "vite",
     "preview": "vite preview",
+    "styleguide": "vue-cli-service styleguidist --config styleguide.config.cjs",
+    "styleguide:build": "vue-cli-service styleguidist:build",
     "tauri": "tauri"
   },
   "dependencies": {
-    "vue": "^3.2.45",
-    "@tauri-apps/api": "^1.4.0"
+    "@tauri-apps/api": "^1.4.0",
+    "vue": "^3.2.45"
   },
   "devDependencies": {
+    "@tauri-apps/cli": "^1.4.0",
     "@types/node": "^18.7.10",
     "@vitejs/plugin-vue": "^4.0.0",
     "typescript": "^4.9.5",
     "vite": "^4.2.1",
-    "vue-tsc": "^1.0.11",
-    "@tauri-apps/cli": "^1.4.0"
-  }
+    "vue-cli-plugin-styleguidist": "~4.72.4",
+    "vue-styleguidist": "^4.72.4",
+    "webpack": "^5.90.1"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not op_mini all"
+  ],
+  "type": "module"
 }

src-tauri/tauri.conf.json

@@ -21,7 +21,7 @@
     "bundle": {
       "active": true,
       "targets": "all",
-      "identifier": "com.tauri.build",
+      "identifier": "com.gcs-user-interface.app",
       "icon": [
         "icons/32x32.png",
         "icons/128x128.png",

src/App.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
-import Greet from "./components/Greet.vue";
+// import Greet from "./components/Greet.vue";
 </script>
 
 <template>
   <div class="container">
     <h1>Welcome to Tauri!</h1>
-
     <div class="row">
       <a href="https://vitejs.dev" target="_blank">
         <img src="/vite.svg" class="logo vite" alt="Vite logo" />
@@ -37,7 +36,6 @@ import Greet from "./components/Greet.vue";
       >
     </p>
 
-    <Greet />
   </div>
 </template>
 

src/components/Greet.vue

@@ -10,12 +10,3 @@ async function greet() {
   greetMsg.value = await invoke("greet", { name: name.value });
 }
 </script>
-
-<template>
-  <form class="row" @submit.prevent="greet">
-    <input id="greet-input" v-model="name" placeholder="Enter a name..." />
-    <button type="submit">Greet</button>
-  </form>
-
-  <p>{{ greetMsg }}</p>
-</template>

styleguide.config.cjs

@@ -0,0 +1,17 @@
+module.exports = {
+	// set your styleguidist configuration here
+	title: 'Default Style Guide',
+	serverPort: 6061,
+	// components: 'src/components/**/[A-Z]*.vue',
+	// defaultExample: true,
+	// sections: [
+	//   {
+	//     name: 'First Section',
+	//     components: 'src/components/**/[A-Z]*.vue'
+	//   }
+	// ],
+	// webpackConfig: {
+	//   // custom config goes here
+	// },
+	exampleMode: 'expand'
+}