ditch primevue

frontend/package.json

@@ -13,16 +13,17 @@
     "@guolao/vue-monaco-editor": "^0.0.5",
     "@mdi/font": "^7.0.96",
     "dayjs": "^1.11.6",
-    "primeflex": "^3.2.1",
-    "primeicons": "^6.0.1",
-    "primevue": "^3.18.1",
+    "notiwind": "^2.0.0",
     "splitpanes": "^3.1.1",
     "vue": "^3.2.37"
   },
   "devDependencies": {
-    "@types/node": "^18.11.18",
     "@babel/types": "^7.18.10",
+    "@types/node": "^18.11.18",
     "@vitejs/plugin-vue": "^3.0.3",
+    "autoprefixer": "^10.4.13",
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.2.4",
     "typescript": "^4.6.4",
     "vite": "^3.0.7",
     "vue-tsc": "^0.39.5"

frontend/package.json.md5

@@ -1 +1 @@
-c2400366737b24b88ff15be9b2118889
+80ae7a68a57048e95f31690f554538e7

frontend/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/src/App.vue

@@ -9,13 +9,10 @@ import JsonFormatter from '@/components/pages/JsonFormatter.vue'
 import Beam from '@/components/pages/Beam.vue'
 import Tinker from '@/components/pages/Tinker.vue'
 import ProjectSettings from '@/components/pages/ProjectSettings.vue'
-import Toast from 'primevue/toast'
-import Toolbar from 'primevue/toolbar'
-import Tag from 'primevue/tag'
-import 'primevue/resources/themes/saga-blue/theme.css'
-import 'primevue/resources/primevue.min.css'
-import 'primeflex/primeflex.css'
-import 'primeicons/primeicons.css'
+import AppHeader from '@/components/AppHeader.vue'
+import AppTab from '@/components/AppTab.vue'
+import AppTabBar from '@/components/AppTabBar.vue'
+import NotificationContainer from '@/components/NotificationContainer.vue'
 import './style.css'
 
 dayjs.extend(utc)
@@ -31,8 +28,13 @@ const tabs = [
 
 const activeTab = ref(tabs[0].id)
 
+const enum Section {
+  App = 'app',
+  ProjectManager = 'project-manager',
+}
+
 const data = reactive({
-  currentSection: "app", // app / projectSettings
+  currentSection: Section.App,
   tabs: tabs,
   value: tabs[0].title,
   messages: [] as Array<BeamMessage>,
@@ -60,11 +62,11 @@ const currentProject = computed<Project>(function () {
     : {} as Project
 })
 
-const currentColor = computed<string>(function() {
-  return getTagColor(currentProject.value?.Tag)
+const currentBadgeColor = computed<string>(function() {
+  return getBadgeColor(currentProject.value?.Tag)
 })
 
-const getTagColor = (tag: string): string => {
+const getBadgeColor = (tag: string): string => {
   const foundTag = data.appConfig.Tags?.find(function(tagConfig) {
     if (tag === tagConfig.Label) {
       return tagConfig.Color
@@ -75,7 +77,7 @@ const getTagColor = (tag: string): string => {
 }
 
 const openProjectManager = () => {
-  data.currentSection = data.currentSection === 'projectSettings' ? 'app' : 'projectSettings'
+  data.currentSection = data.currentSection === Section.ProjectManager ? Section.App : Section.ProjectManager
 }
 
 const refreshAppConfig = () => {
@@ -89,95 +91,41 @@ onMounted(() => refreshAppConfig())
 
 <template>
   <div class="h-full">
-    <Toast />
-
-    <div class="main-stack h-full flex flex-column">
-      <Toolbar class="toolbar">
-        <template #start>
-          <div class="app-title">Renfield <div class="triangle"></div></div>
-          <div class="project-name" @click="openProjectManager">
-            {{ currentProject?.Name }}
-            <Tag class="project-tag mx-2" :style="{backgroundColor: currentColor}" :value="currentProject?.Tag"></Tag>
-          </div>
-        </template>
-        <template #end>
-          <!-- <i class="pi pi-cog text-3xl"></i> -->
-        </template>
-      </Toolbar>
-
-      <div class="flex pl-2 border-gray-300 bg-gray-100" style="border-bottom: solid 2px;">
-        <div v-for="tab in tabs"
-          :style="[activeTab == tab.id ? 'border-bottom: solid 2px' : '', 'position: relative; top: 2px;']"
-          :class="[activeTab == tab.id ? 'text-blue-500' : '', 'px-3 py-3 font-medium cursor-pointer']"
+    <NotificationContainer />
+
+    <div class="h-full w-full flex flex-col overflow-hidden">
+      <AppHeader 
+        :current-project="currentProject" 
+        :open-project-manager="openProjectManager" 
+        :badge-color="currentBadgeColor"
+        />
+
+      <AppTabBar v-if="data.currentSection !== Section.ProjectManager">
+        <AppTab v-for="tab in tabs" 
+          :active="activeTab == tab.id" 
           @click="activeTab = tab.id"
         >
           {{ tab.title }}
-        </div>
-      </div>
-      <div v-if="data.currentSection === 'app'" class="component-wrapper h-full p-4">
-        <Beam v-if="activeTab === 'beam'" :messages="data.messages" class="component" @clear-beam-messages="clearMessages" />
-        <Tinker v-else-if="activeTab === 'tinker'" class="component" />
-        <JsonFormatter v-else-if="activeTab === 'jsonformatter'" class="component" />
+        </AppTab>
+      </AppTabBar>
+
+      <div v-if="data.currentSection === Section.App" 
+        class="grow p-4 h-full"
+      >
+        <Beam v-if="activeTab === 'beam'" :messages="data.messages" @clear-beam-messages="clearMessages" />
+        <Tinker v-else-if="activeTab === 'tinker'" />
+        <JsonFormatter v-else-if="activeTab === 'jsonformatter'" />
       </div>
 
-      <div v-else-if="data.currentSection === 'projectSettings'" class="component-wrapper pb-5 h-full m-3">
+      <div v-else-if="data.currentSection === Section.ProjectManager" 
+        class="pb-5 h-full m-3"
+      >
         <ProjectSettings
           :app-config="data.appConfig"
           :current-project="currentProject"
-          @close="data.currentSection = 'app'"
+          @close="data.currentSection = Section.App"
           />
       </div>
     </div>
   </div>
 </template>
-
-<style scoped>
-.toolbar {
-  padding: 0rem 1rem 0rem 0;
-  box-shadow: 0 0 3px 0 black;
-  z-index: 10;
-}
-
-.app-title {
-  font-size: 1.3rem;
-  background: rgb(37, 37, 37);
-  color: #eb5f5a;
-  padding: 1rem 1rem .6rem 1.5rem;
-  position: relative;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  cursor: default;
-}
-
-.app-title::after {
-  content: "";
-  position: absolute;
-  display: block;
-  right: -20px;
-  top: 0;
-  border-top: 50px solid rgb(37, 37, 37);
-  border-right: 20px solid transparent;
-  z-index: 100;
-}
-
-.project-name {
-  font-size: 1.3rem;
-  margin: -.5rem 1rem -.5rem 0rem;
-  padding: 1rem 1.5rem .6rem 2.5rem;
-  cursor: pointer;
-  position: relative;
-}
-
-.project-name:hover {
-  background: #eee;
-}
-
-.project-name .project-tag {
-  top: -3px;
-  position: relative;
-}
-</style>

frontend/src/components/AppHeader.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import Badge from '@/components/Badge.vue'
+
+defineProps<{
+  currentProject?: Project,
+  openProjectManager: () => void,
+  badgeColor?: string,
+}>()
+
+</script>
+<template>
+  <div class="flex w-full border-b border-stone-300 select-none">
+    <div class="app-title | text-xl pl-6 pr-4 py-3 relative text-brand-red bg-brand-black cursor-default select-none">
+      Renfield
+    </div>
+    <div class="pl-10 pr-5 rounded-r-full flex items-center cursor-pointer relative h-auto hover:bg-white"
+      @click="openProjectManager"
+    >
+      <span class="text-2xl mr-4">{{ currentProject?.Name }}</span>
+      <Badge class="text-white" :style="{ backgroundColor: badgeColor }">{{ currentProject?.Tag }}</Badge>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.app-title::after {
+  content: "";
+  position: absolute;
+  display: block;
+  right: -20px;
+  top: 0;
+  border-top: 50px solid var(--brand-black);
+  border-right: 20px solid transparent;
+  z-index: 100;
+}
+</style>

frontend/src/components/AppTab.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+defineProps<{
+  active: boolean,
+}>();
+</script>
+<template>
+  <div
+    :class="[active 
+      ? 'text-blue-600 border-b-2' 
+      : '', 
+      'px-3 py-3 font-medium cursor-pointer relative top-[3px] border-blue-400 hover:border-b-2'
+    ]"
+  >
+    <slot />
+  </div>
+</template>

frontend/src/components/AppTabBar.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="flex pl-2 border-b-2 border-gray-300 bg-gray-200">
+    <slot />
+  </div>
+</template>

frontend/src/components/Badge.vue

@@ -0,0 +1,5 @@
+<template>
+  <span class="px-3 py-1 text-sm rounded-full">
+    <slot />
+  </span>
+</template>

frontend/src/components/Button.vue

@@ -0,0 +1,12 @@
+<template>
+  <button type="button"
+    class="inline-flex items-center rounded-md border border-transparent 
+      bg-blue-500 px-3 py-2 text-sm font-medium leading-4 
+      text-white shadow-sm hover:bg-blue-700 focus:outline-none 
+      focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
+      "
+  >
+    <slot />
+  </button>
+</template>
+

frontend/src/components/Card.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="bg-white p-2 shadow-sm">
+    <slot />
+  </div>  
+</template>

frontend/src/components/Editor.vue

@@ -12,12 +12,13 @@ withDefaults(defineProps<{
 
 <template>
   <Editor
+      height="100%"
       :value="value"
       theme='vs-dark'
       :defaultLanguage="language"
       :options="{
         lineNumbers: 'off',
-        wordWrap: 'on',
+        wordWrap: 'off',
         minimap: {
           enabled: false,
         },

frontend/src/components/Input.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import InputLabel from '@/components/InputLabel.vue'
+
+defineProps<{
+  label: string
+  modelValue: string | number
+}>()
+
+defineEmits(['update:modelValue'])
+</script>
+
+<template>
+  <InputLabel :label="label">
+    <div class="mt-1">
+      <input v-bind="$attrs" :value="modelValue" 
+        @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+        class="block w-full rounded-md 
+          border border-gray-300 shadow-sm sm:text-sm p-2
+          focus:border-indigo-500 focus:ring-indigo-500" 
+      />
+    </div>  
+  </InputLabel>  
+</template>

frontend/src/components/InputLabel.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+defineProps<{
+  label: string
+}>();
+</script>
+
+<template>
+  <label class="block text-sm font-medium text-gray-700">
+    {{ label }}
+    <slot />
+  </label>  
+</template>