Move to @caido/tailwindcss integration

caido-community · Oct 12, 2024 · 6f11d1a · 6f11d1a
1 parent 4da3c8b
commit 6f11d1a
Show file tree

Hide file tree

Showing 20 changed files with 267 additions and 425 deletions.
diff --git a/packages/frontend/index.html b/packages/frontend/index.html
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -6,27 +6,28 @@
   "license": "CC0-1.0",
   "type": "module",
   "scripts": {
-    "dev": "vite --config ./vite.config.dev.ts",
     "typecheck": "vue-tsc --noEmit",
     "build": "vite build"
   },
   "dependencies": {
+    "@caido/primevue": "0.1.1",
     "@caido/sdk-frontend": "0.41.0",
     "@fortawesome/fontawesome-free": "6.6.0",
     "@vueuse/core": "10.11.1",
     "pinia": "2.2.1",
-    "primevue": "4.0.5",
-    "@caido/primevue": "0.0.3",
+    "primevue": "4.1.0",
     "shared": "workspace:*",
     "vue": "3.4.37"
   },
   "devDependencies": {
-    "@codemirror/view": "6.28.1",
     "@caido/sdk-backend": "0.41.0",
+    "@caido/tailwindcss": "0.0.1",
+    "@codemirror/view": "6.28.1",
     "@vitejs/plugin-vue": "5.1.2",
     "backend": "workspace:*",
     "postcss-prefixwrap": "1.51.0",
-    "tailwindcss": "3.4.9",
+    "tailwindcss": "3.4.13",
+    "tailwindcss-primeui": "0.3.4",
     "vue-tsc": "2.0.29"
   }
 }
diff --git a/packages/frontend/postcss.config.js b/packages/frontend/postcss.config.js
@@ -0,0 +1,9 @@
+import tailwindcss from "tailwindcss";
+import prefixwrap from "postcss-prefixwrap";
+
+export default {
+  plugins: [
+    tailwindcss(),
+    prefixwrap("#plugin--authmatrix"),
+  ],
+}
diff --git a/packages/frontend/src/app.ts b/packages/frontend/src/app.ts
@@ -1,4 +1,4 @@
-import { ClassicTheme, ClassicThemePassthrough } from "@caido/primevue";
+import { Classic } from "@caido/primevue";
 import PrimeVue from "primevue/config";
 import Tooltip from "primevue/tooltip";
 import { createApp } from "vue";
@@ -21,19 +21,8 @@ export const defineApp = (sdk: CaidoSDK) => {
   app.use(pinia);
 
   app.use(PrimeVue, {
-    theme: {
-      preset: ClassicTheme,
-      options: {
-        /**
-         * The selector to use to determine if the user has selected dark mode.
-         * This selector is present in the HTML of the core Caido app, not the plugin.
-         */
-        darkModeSelector: "[data-mode=dark]",
-      },
-    },
-    pt: {
-      ...ClassicThemePassthrough,
-    },
+    unstyled: true,
+    pt: Classic,
   });
 
   app.directive("tooltip", Tooltip);

diff --git a/packages/frontend/src/components/dashboard/TemplateTable/Container.vue b/packages/frontend/src/components/dashboard/TemplateTable/Container.vue
@@ -121,7 +121,7 @@ const onTemplateUpdate = (
       :pt="{ body: { class: 'flex-1 min-h-0' }, content: { class: 'h-full' } }">
 
       <template #header>
-        <div class="px-4 pt-4 flex justify-between gap-8">
+        <div class="p-4 flex justify-between gap-8">
           <div class="flex flex-col">
             <h2 class="text-lg font-semibold">Templates</h2>
             <p class="text-sm text-gray-400">Add template requests to the queue for analysis.</p>
@@ -209,14 +209,16 @@ const onTemplateUpdate = (
             </template>
           </Column>
 
-          <Column>
+          <Column header="">
             <template #body="{ data }">
               <div class="flex justify-end">
                 <Button icon="fas fa-trash" text severity="danger" size="small" @click="() => deleteTemplate(data)" />
               </div>
             </template>
           </Column>
+
         </DataTable>
+
       </template>
     </Card>
   </div>

diff --git a/packages/frontend/src/components/users-roles/RoleList/Container.vue b/packages/frontend/src/components/users-roles/RoleList/Container.vue
@@ -18,14 +18,14 @@ const onAddRole = () => {
 <template>
   <Card class="h-full" :pt="{ body: { class: 'h-full' }, content: { class: 'flex-1 min-h-0' } } ">
     <template #title>
-      <div class="flex justify-between">
+      <div class="flex justify-between p-4 items-center">
         <div class="flex flex-col">
           <h1>Roles</h1>
           <p class="text-sm text-gray-400">Manage roles and their descriptions</p>
         </div>
 
         <div class="min-w-max">
-          <Button label="+ Add role" @click="onAddRole" />
+          <Button label="+ Add role" size="small" @click="onAddRole" />
         </div>
       </div>
     </template>

diff --git a/packages/frontend/src/components/users-roles/RoleList/RoleTable.vue b/packages/frontend/src/components/users-roles/RoleList/RoleTable.vue
@@ -58,7 +58,7 @@ const onRoleUpdate = (role: RoleDTO, field: keyof RoleDTO, value: string) => {
       </template>
     </Column>
 
-    <Column>
+    <Column header="">
       <template #body="{ data }">
         <div class="flex justify-end">
           <Button icon="fas fa-trash"  size="small" text severity="danger" @click="onDeleteRole(data)" />

diff --git a/packages/frontend/src/components/users-roles/UserList/Container.vue b/packages/frontend/src/components/users-roles/UserList/Container.vue
@@ -26,13 +26,13 @@ const onAddUser = () => {
 <template>
   <Card class="h-full" :pt="{ body: { class: 'h-full' }, content: { class: 'flex-1 min-h-0' } } ">
     <template #title>
-      <div class="flex justify-between">
+      <div class="flex justify-between p-4 items-center">
         <div class="flex flex-col w-full">
           <h1>Users</h1>
           <p class="text-sm text-gray-400">Manage users and their access to the system</p>
         </div>
         <div class="min-w-max">
-          <Button label="+ Add User" @click="onAddUser" />
+          <Button label="+ Add User" size="small" @click="onAddUser" />
         </div>
       </div>
     </template>

diff --git a/packages/frontend/src/components/users-roles/UserList/UserTable.vue b/packages/frontend/src/components/users-roles/UserList/UserTable.vue
@@ -70,7 +70,7 @@ const onDeleteUser = (user: UserDTO) => {
       </template>
     </Column>
 
-    <Column>
+    <Column header="">
       <template #body="{ data }">
         <div class="flex justify-end">
           <Button icon="fas fa-trash" text severity="danger" size="small" @click="() => onDeleteUser(data)" />

diff --git a/packages/frontend/src/components/users-roles/UserShow/AttributeTable.vue b/packages/frontend/src/components/users-roles/UserShow/AttributeTable.vue
@@ -62,7 +62,7 @@ const onAttributeUpdate = (
 
 <template>
   <div class="flex-1 flex flex-col gap-2 min-h-0">
-    <div class="flex justify-between items-center">
+    <div class="flex justify-between items-center p-4">
       <h1 class="font-bold">Attributes</h1>
       <div>
         <Button label="+ Add attribute" size="small" @click="onAddAttribute" />
@@ -96,7 +96,7 @@ const onAttributeUpdate = (
           </template>
         </Column>
 
-        <Column>
+        <Column header="">
           <template #body="{ data }">
             <div class="flex justify-end">
               <Button severity="danger" text size="small" icon="fas fa-trash" @click="() => onRemoveAttribute(data)" />

diff --git a/packages/frontend/src/components/users-roles/UserShow/Container.vue b/packages/frontend/src/components/users-roles/UserShow/Container.vue
@@ -28,14 +28,14 @@ watch(user, () => {
 <template>
   <Card class="h-full" :pt="{ body: { class: 'h-full' }, content: { class: 'flex-1 min-h-0' } } ">
     <template #title>
-      <div class="flex justify-between items-center">
+      <div class="flex justify-between items-center p-4">
         <h1 class="font-bold">{{ user.name }}</h1>
       </div>
     </template>
 
     <template #content>
       <div class="flex flex-col h-full gap-8 min-h-0">
-        <div class="flex flex-col gap-2">
+        <div class="flex flex-col gap-2 p-4">
           <label for="name" class="text-sm">Name</label>
           <InputText id="name" label="Name" v-model="cloned.name" autocomplete="off" @focusout="onFocusOut"/>
         </div>