@mongoosejs/studio 0.0.94 → 0.0.96

package/frontend/src/navbar/navbar.css

@@ -1,16 +1,7 @@
-.navbar {
-  width: 100%;
-  background-color: #eee;
-}
-
 .active {
   text-decoration: underline;
 }
 
-.spacing {
-  margin-right: 10px;
-}
-
 .navbar .nav-left {
   float: left;
   line-height: 54px;
@@ -22,18 +13,6 @@
   color: #232323;
 }
 
-.navbar {
-  border-bottom: 1px solid #ddd;
-  height: 55px;
-}
-
-.navbar .nav-left img {
-  height: 32px;
-  vertical-align: middle;
-  margin-right: 0.5em;
-  margin-top: 8px;
-}
-
 .navbar .nav-right {
   float: right;
   display: flex;

package/frontend/src/navbar/navbar.html

@@ -1,13 +1,13 @@
-<div class="navbar">
-  <div class="nav-left flex items-center gap-4 h-full">
+<div class="navbar w-full bg-gray-50 flex justify-between border-b border-gray-200 !h-[55px]">
+  <div class="flex items-center gap-4 h-full pl-4">
     <router-link :to="{ name: defaultRoute }">
-      <img src="images/logo.svg" alt="Mongoose Studio Logo" />
+      <img src="images/logo.svg" class="h-[32px] mr-1" alt="Mongoose Studio Logo" />
     </router-link>
     <div v-if="!!state.nodeEnv" class="inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-gray-900" :class="warnEnv ? 'bg-red-300' : 'bg-yellow-300'">
       {{state.nodeEnv}}
     </div>
   </div>
-  <div class="nav-right h-full">
+  <div class="h-full pr-4 hidden md:block">
     <div class="sm:ml-6 sm:flex sm:space-x-8 h-full">
       <a v-if="hasAccess(roles, 'root')"
         href="#/"
@@ -47,5 +47,62 @@
 
     </div>
   </div>
-  <div style="clear: both"></div>
+  <div class="md:hidden flex items-center">
+    <!-- Mobile menu toggle, controls the 'mobileMenuOpen' state. -->
+    <button type="button" id="open-mobile-menu" class="-ml-2 rounded-md p-2 pr-4 text-gray-400">
+      <span class="sr-only">Open menu</span>
+      <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+      </svg>
+    </button>
+  </div>
+
+  <!-- Mobile menu mask -->
+  <div id="mobile-menu-mask" class="fixed inset-0 bg-black bg-opacity-40 z-40 hidden"></div>
+  <!-- Mobile menu drawer -->
+  <div id="mobile-menu" class="fixed inset-0 bg-white shadow-lg z-50 transform translate-x-full transition-transform duration-200 ease-in-out flex flex-col">
+    <div class="flex items-center justify-between px-4 !h-[55px] border-b border-gray-200">
+      <router-link :to="{ name: defaultRoute }">
+        <img src="images/logo.svg" class="h-[32px]" alt="Mongoose Studio Logo" />
+      </router-link>
+      <button type="button" id="close-mobile-menu" class="text-gray-400 p-2 rounded-md">
+        <span class="sr-only">Close menu</span>
+        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+    </div>
+    <nav class="flex-1 px-4 py-4 space-y-2">
+      <a v-if="hasAccess(roles, 'root')"
+        href="#/"
+        class="block px-3 py-2 rounded-md text-base font-medium"
+        :class="documentView ? 'text-ultramarine-700 bg-ultramarine-100' : 'text-gray-700 hover:bg-gray-100'">Documents</a>
+      <a v-if="hasAccess(roles, 'dashboards')"
+        href="#/dashboards"
+        class="block px-3 py-2 rounded-md text-base font-medium"
+        :class="dashboardView ? 'text-ultramarine-700 bg-ultramarine-100' : 'text-gray-700 hover:bg-gray-100'">Dashboards</a>
+      <a v-if="hasAccess(roles, 'chat')"
+        href="#/chat"
+        class="block px-3 py-2 rounded-md text-base font-medium"
+        :class="chatView ? 'text-ultramarine-700 bg-ultramarine-100' : 'text-gray-700 hover:bg-gray-100'">Chat</a>
+      <div v-if="!user && hasAPIKey" class="mt-4">
+        <button
+          type="button"
+          @click="loginWithGithub"
+          class="w-full rounded bg-ultramarine-600 px-3 py-2 text-base font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600">
+            Login
+        </button>
+      </div>
+      <div v-if="user && hasAPIKey" class="mt-4">
+        <div class="flex items-center gap-3 px-3 py-2 bg-gray-50 rounded-md">
+          <img class="size-8 rounded-full" :src="user.picture" alt="">
+          <span class="text-gray-900 font-medium">{{ user.name }}</span>
+        </div>
+        <div class="mt-2 space-y-1">
+          <router-link to="/team" v-if="hasAccess(roles, 'team')" class="block px-3 py-2 rounded-md text-base text-gray-700 hover:bg-ultramarine-100">Team</router-link>
+          <span @click="logout" class="block px-3 py-2 rounded-md text-base text-gray-700 hover:bg-ultramarine-100 cursor-pointer">Sign out</span>
+        </div>
+      </div>
+    </nav>
+  </div>
 </div>

package/frontend/src/navbar/navbar.js

@@ -3,7 +3,7 @@
 const api = require('../api');
 const mothership = require('../mothership');
 const template = require('./navbar.html');
-const  { routes, hasAccess } = require('../routes');
+const { routes, hasAccess } = require('../routes');
 
 const appendCSS = require('../appendCSS');
 
@@ -22,10 +22,26 @@ module.exports = app => app.component('navbar', {
         this.$router.push({ name: firstAllowedRoute.name });
       }
     }
+
+    const mobileMenuMask = document.querySelector('#mobile-menu-mask');
+    const mobileMenu = document.querySelector('#mobile-menu');
+
+    document.querySelector('#open-mobile-menu').addEventListener('click', (event) => {
+      event.stopPropagation();
+      mobileMenuMask.style.display = 'block';
+      mobileMenu.classList.remove('translate-x-full');
+      mobileMenu.classList.add('translate-x-0');
+    });
+
+    document.querySelector('body').addEventListener('click', () => {
+      mobileMenuMask.style.display = 'none';
+      mobileMenu.classList.remove('translate-x-0');
+      mobileMenu.classList.add('translate-x-full');
+    });
   },
   computed: {
     dashboardView() {
-      return routes.filter(x => x.name.startsWith('dashboard')).map(x => x.name).includes(this.$route.name)
+      return routes.filter(x => x.name.startsWith('dashboard')).map(x => x.name).includes(this.$route.name);
     },
     documentView() {
       return ['root', 'model', 'document'].includes(this.$route.name);
@@ -66,7 +82,7 @@ module.exports = app => app.component('navbar', {
     logout() {
       window.localStorage.setItem('_mongooseStudioAccessToken', '');
       window.location.reload();
-    },
+    }
   },
   directives: {
     clickOutside: {

package/frontend/src/update-document/update-document.js

@@ -5,7 +5,7 @@ const api = require('../api');
 const { BSON, EJSON } = require('bson');
 
 const ObjectId = new Proxy(BSON.ObjectId, {
-  apply (target, thisArg, argumentsList) {
+  apply(target, thisArg, argumentsList) {
     return new target(...argumentsList);
   }
 });
@@ -14,7 +14,7 @@ const appendCSS = require('../appendCSS');
 
 appendCSS(require('./update-document.css'));
 
-const template = require('./update-document.html')
+const template = require('./update-document.html');
 
 module.exports = app => app.component('update-document', {
   props: ['currentModel', 'document', 'multiple'],
@@ -23,7 +23,7 @@ module.exports = app => app.component('update-document', {
     return {
       editor: null,
       errors: []
-    }
+    };
   },
   methods: {
     async updateDocument() {
@@ -31,40 +31,40 @@ module.exports = app => app.component('update-document', {
       if (this.multiple) {
         const ids = this.document.map(x => x._id);
         await api.Model.updateDocuments({ model: this.currentModel, _id: ids, update: data }).catch(err => {
-            if (err.response?.data?.message) {
-              console.log(err.response.data);
-              const message = err.response.data.message.split(": ").slice(1).join(": ");
-              this.errors = message.split(',').map(error => {
-                return error.split(': ').slice(1).join(': ').trim();
-              })
-              throw new Error(err.response?.data?.message);
-            }
-            throw err;
+          if (err.response?.data?.message) {
+            console.log(err.response.data);
+            const message = err.response.data.message.split(': ').slice(1).join(': ');
+            this.errors = message.split(',').map(error => {
+              return error.split(': ').slice(1).join(': ').trim();
+            });
+            throw new Error(err.response?.data?.message);
+          }
+          throw err;
         });
       } else {
         await api.Model.updateDocument({ model: this.currentModel, _id: this.document._id, update: data }).catch(err => {
-            if (err.response?.data?.message) {
-              console.log(err.response.data);
-              const message = err.response.data.message.split(": ").slice(1).join(": ");
-              this.errors = message.split(',').map(error => {
-                return error.split(': ').slice(1).join(': ').trim();
-              })
-              throw new Error(err.response?.data?.message);
-            }
-            throw err;
+          if (err.response?.data?.message) {
+            console.log(err.response.data);
+            const message = err.response.data.message.split(': ').slice(1).join(': ');
+            this.errors = message.split(',').map(error => {
+              return error.split(': ').slice(1).join(': ').trim();
+            });
+            throw new Error(err.response?.data?.message);
+          }
+          throw err;
         });
       }
       this.errors.length = 0;
       this.$emit('update');
       this.$emit('close');
-    },
+    }
   },
   mounted: function() {
-    this.$refs.codeEditor.value = `{\n    \n}`
+    this.$refs.codeEditor.value = '{\n    \n}';
     this.editor = CodeMirror.fromTextArea(this.$refs.codeEditor, {
       mode: 'javascript',
       lineNumbers: true,
       smartIndent: false
     });
-  },
-})
+  }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.94",
+  "version": "0.0.96",
   "description": "A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.",
   "homepage": "https://studio.mongoosejs.io/",
   "repository": {
@@ -25,12 +25,15 @@
     "mongoose": "7.x || 8.x"
   },
   "devDependencies": {
+    "@masteringjs/eslint-config": "0.1.1",
     "axios": "1.2.2",
+    "eslint": "9.30.0",
     "express": "4.x",
     "mocha": "10.2.0",
     "mongoose": "8.x"
   },
   "scripts": {
+    "lint": "eslint .",
     "tailwind": "tailwindcss -o ./frontend/public/tw.css",
     "tailwind:watch": "tailwindcss -o ./frontend/public/tw.css --watch"
   }