chore: migrate from tailwind-vue and naive-ui to nuxt-ui v4 with script setup conversion

app.config.ts

@@ -1,28 +1,12 @@
-import theme from '#tailwind-config/theme.mjs'
-
 export default defineAppConfig({
-  naiveui: {
-    themeConfig: {
-      shared: {
-        common: {
-          fontFamily: theme.fontFamily.sans.join(', '),
-          lineHeight: theme.lineHeight.normal,
-        },
-      },
-      light: {
-        common: {
-          primaryColor: theme.colors.primary[500],
-          primaryColorHover: theme.colors.primary[600],
-          primaryColorPressed: theme.colors.primary[700],
-          primaryColorSuppl: theme.colors.primary[600],
-        },
-      },
-      dark: {
-        common: {
-          primaryColor: theme.colors.primary[500],
-          primaryColorHover: theme.colors.primary[400],
-          primaryColorPressed: theme.colors.primary[600],
-        },
+  ui: {
+    colors: {
+      primary: 'blue',
+      neutral: 'zinc',
+    },
+    select: {
+      variants: {
+        variant: {},
       },
     },
   },

app.vue

@@ -1,12 +1,3 @@
 <template>
-  <NaiveConfig>
-    <NuxtPage />
-  </NaiveConfig>
+  <NuxtPage />
 </template>
-
-<style lang="css">
-/* Workaround for https://github.com/becem-gharbi/nuxt-naiveui/issues/8 */
-.n-button {
-  background-color: var(--n-color) !important;
-}
-</style>

assets/css/main.css

@@ -0,0 +1,38 @@
+@import "@nuxt/ui";
+
+@theme {
+  --font-sans: 'Public Sans', sans-serif;
+
+  --spacing: (
+    16: 4rem,
+    20: 5rem,
+    24: 6rem,
+    28: 7rem,
+    32: 8rem,
+    36: 9rem,
+    40: 10rem,
+    44: 11rem,
+    48: 12rem,
+    52: 13rem,
+    56: 14rem,
+    60: 15rem,
+    64: 16rem,
+    72: 18rem,
+    80: 20rem,
+    96: 24rem
+  );
+
+  --breakpoint-3xl: 1920px;
+
+  --color-green-50: #EFFDF5;
+  --color-green-100: #D9FBE8;
+  --color-green-200: #B3F5D1;
+  --color-green-300: #75EDAE;
+  --color-green-400: #00DC82;
+  --color-green-500: #00C16A;
+  --color-green-600: #00A155;
+  --color-green-700: #007F45;
+  --color-green-800: #016538;
+  --color-green-900: #0A5331;
+  --color-green-950: #052E16;
+}

components/DetailPane.vue

@@ -16,13 +16,14 @@
         <div
           class="absolute top-10 -left-3.5 w-7 h-7 rounded-full bg-white border border-gray-300 md:shadow-sm flex items-center justify-center active:border-gray-300 transform text-gray-400 hover:scale-110 hover:border-gray-400 hover:text-gray-500"
         >
-          <n-button
-            quaternary
-            circle
+          <UButton
+            variant="ghost"
+            size="sm"
+            square
             @click="closePane"
           >
             <Icon name="ri:close-fill" />
-          </n-button>
+          </UButton>
         </div>
         <slot>
           <document-editor
@@ -34,17 +35,13 @@
     </transition>
   </div>
 </template>
-<script lang="ts">
+
+<script setup lang="ts">
 import { useUiStore } from './../store'
 
-export default defineComponent({
-  setup() {
-    const ui = useUiStore()
-    return {
-      selectedDocumentId: computed(() => ui.selectedDocumentId),
-      isDetailsOpen: computed(() => ui.isDetailsOpen),
-      closePane: () => (ui.isDetailsOpen = false),
-    }
-  },
-})
+const ui = useUiStore()
+
+const selectedDocumentId = computed(() => ui.selectedDocumentId)
+const isDetailsOpen = computed(() => ui.isDetailsOpen)
+const closePane = () => (ui.isDetailsOpen = false)
 </script>

components/DocumentEditor.vue

@@ -1,20 +1,14 @@
 <template>
   <div class="flex flex-col overflow-y-auto pr-3">
     <div>
-      <t-select
-        :options="{
-          Article: 'Journal Article',
-          PhDThesis: 'PhD Thesis',
-        }"
+      <USelect
+        :options="[
+          { label: 'Journal Article', value: 'Article' },
+          { label: 'PhD Thesis', value: 'PhDThesis' }
+        ]"
         variant="plaincaps"
-      >
-        <template #arrow="{ className }">
-          <Icon
-            name="ri:arrow-drop-down-line"
-            :class="className"
-          />
-        </template>
-      </t-select>
+        trailing-icon="ri:arrow-drop-down-line"
+      />
     </div>
     <div class="z-10 grid -mt-2">
       <!-- Auto-grow textarea, taken from https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/ -->
@@ -23,7 +17,7 @@
       >
         {{ title + ' ' }}
       </div>
-      <t-textarea
+      <UTextarea
         v-model="title"
         variant="plain"
         class="text-xl resize-none overflow-hidden row-span-1 col-span-1 col-start-1 row-start-1"
@@ -63,7 +57,7 @@
         heading="Abstract"
         class="mt-4 -mb-1"
       />
-      <t-textarea
+      <UTextarea
         v-model="abstract"
         variant="plain"
         rows="5"
@@ -100,8 +94,8 @@
         heading="External"
         class="mt-4 mb-1"
       />
-      <t-table
-        :data="externalLinks"
+      <UTable
+        :rows="externalLinks"
         variant="plain"
         class="text-sm"
       />
@@ -235,7 +229,7 @@ const keywords = computed({
 })
 const keywordSuggestions = [{ value: 'Differential Geometry' }]
 
-const groups = [{ value: 'Chocolate Making' }, { value: 'Consumption' }]
+const groups = ref([{ value: 'Chocolate Making' }, { value: 'Consumption' }])
 const groupSuggestions = [{ value: 'Grinding' }]
 
 const externalLinks = computed(() => [

components/DocumentEditorHeader.vue

@@ -3,8 +3,9 @@
     {{ heading }}
   </p>
 </template>
-<script lang="ts">
-export default defineComponent({
-  props: { heading: { type: String, default: '' } },
-})
+
+<script setup lang="ts">
+defineProps<{
+  heading: string
+}>()
 </script>

components/DocumentEditorInput.vue

@@ -1,11 +1,11 @@
 <template>
   <!-- Auto-grow text-input, idea taken from https://css-tricks.com/auto-growing-inputs-textareas/ -->
   <span class="inline-block relative">
-    <t-input
-      :value="value"
+    <UInput
+      :model-value="value"
       variant="plain"
       class="absolute w-full left-0 py-1"
-      @input="update"
+      @update:model-value="update"
     />
     <span
       class="inline-block px-3 py-1 text-base invisible border"
@@ -15,18 +15,16 @@
   </span>
 </template>
 
-<script lang="ts">
-export default defineComponent({
-  props: {
-    value: {
-      type: String,
-      default: '',
-    },
-  },
-  methods: {
-    update(newValue: string) {
-      this.$emit('input', newValue)
-    },
-  },
-})
+<script setup lang="ts">
+defineProps<{
+  value: string
+}>()
+
+const emit = defineEmits<{
+  input: [value: string]
+}>()
+
+function update(newValue: string) {
+  emit('input', newValue)
+}
 </script>

components/DocumentView.vue

@@ -63,15 +63,15 @@
       v-if="document.keywords.length > 0"
       class="flex flex-row space-x-2 text-sm"
     >
-      <t-tag
+      <UBadge
         v-for="keyword in document.keywords"
         :key="keyword"
-        variant="badge"
+        variant="outline"
         class="border border-gray-400"
       >
         <!-- TODO: Add icon of group <Icon name="dragon" class="mr-2" /> -->
         {{ keyword }}
-      </t-tag>
+      </UBadge>
       <!-- TODO: Add overflow
       <n-button variant="linkplain" class="text-sm my-auto">
         <span>View More (8+)</span>
@@ -86,8 +86,9 @@
       >
         {{ document.abstract }}
       </span>
-      <n-button
-        text
+      <UButton
+        variant="ghost"
+        size="sm"
         class="text-sm my-auto"
         @click="viewFullAbstract = !viewFullAbstract"
       >
@@ -99,7 +100,7 @@
           <span>View full abstract</span>
           <Icon name="ri:arrow-down-s-line" />
         </template>
-      </n-button>
+      </UButton>
     </div>
   </div>
 </template>

components/DownloadButton.vue

@@ -1,21 +1,23 @@
 <template>
-  <n-button
-    type="primary"
-    size="large"
-    style="height: 3.2em"
+  <UButton
+    variant="solid"
+    size="xl"
+    class="h-14"
   >
-    <template #icon>
-      <n-icon v-if="showIcon">
-        <Icon name="material-symbols:download" />
-      </n-icon>
+    <template #leading>
+      <Icon 
+        v-if="showIcon"
+        name="material-symbols:download" 
+      />
     </template>
     <a
       class="text-2xl"
       :href
       >{{ text }}</a
     >
-  </n-button>
+  </UButton>
 </template>
+
 <script setup lang="ts">
 defineProps({
   text: {

components/JabRefLogo.stories.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import JabRefLogo from './JabrefLogo.vue'
+
+const meta: Meta<typeof JabRefLogo> = {
+  title: 'Components/JabRef Logo',
+  component: JabRefLogo,
+  parameters: {
+    docs: {
+      description: {
+        component: 'The official JabRef logo component.',
+      },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Standard: Story = {
+  render: (args) => ({
+    components: { JabRefLogo },
+    setup() {
+      return { args }
+    },
+    template: '<JabRefLogo v-bind="args" />',
+  }),
+  args: {},
+}