breaking: Switch to Nuxt UI v3 alpha (#259)

HugoRCD · Nov 1, 2024 · ee2ad40 · ee2ad40
1 parent c80356b
commit ee2ad40
Show file tree

Hide file tree

Showing 67 changed files with 677 additions and 686 deletions.
diff --git a/.github/workflows/continuous-release.yml b/.github/workflows/continuous-release.yml
@@ -0,0 +1,26 @@
+name: Publish Any Commit
+on: [push, pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - name: 📦 Install dependencies
+        run: bun install
+
+      - name: 🚀 Prepare
+        run: bun run dev:prepare
+
+      - name: 🛠️ Build
+        run: bun run build
+
+      - name: 🚀 Continuous Release
+        run: bunx pkg-pr-new publish './packages/cli'
diff --git a/.npmrc b/.npmrc
@@ -1,2 +1,3 @@
 shamefully-hoist=true
-strict-peer-dependencies=false
+auto-install-peers=true
+ignore-workspace-root-check=true
diff --git a/apps/shelve/.npmrc b/apps/shelve/.npmrc
@@ -1,2 +1,3 @@
 shamefully-hoist=true
-strict-peer-dependencies=false
+auto-install-peers=true
+ignore-workspace-root-check=true
diff --git a/apps/shelve/app/app.config.ts b/apps/shelve/app/app.config.ts
@@ -1,23 +1,23 @@
 export default defineAppConfig({
   ui: {
-    primary: 'accent',
-    gray: 'neutral',
+    colors: {
+      primary: 'blue',
+      neutral: 'neutral',
+    },
     button: {
-      default: {
-        size: 'xs',
-        loadingIcon: 'lucide:loader',
+      slots: {
+        base: 'cursor-pointer'
       }
     },
+    icons: {
+      loading: 'lucide:loader',
+    },
     card: {
-      body: {
-        padding: 'p-3 sm:p-3',
-      },
-      header: {
-        padding: 'p-3 sm:p-3',
-      },
-      footer: {
-        padding: 'p-3 sm:p-3',
-      },
+      slots: {
+        header: 'p-4 sm:p-4',
+        footer: 'p-4 sm:p-4',
+        body: 'p-4 sm:p-4',
+      }
     }
   },
   title: 'Shelve',

diff --git a/apps/shelve/app/app.vue b/apps/shelve/app/app.vue
@@ -49,14 +49,15 @@ if (import.meta.client) setPrefersReducedMotion(reduceMotion.value)
 <template>
   <Html lang="en">
     <Body class="selection:bg-primary font-geist relative overflow-x-hidden bg-white text-black selection:text-inverted dark:bg-neutral-950 dark:text-white">
-      <NuxtLayout>
-        <NuxtPage />
-      </NuxtLayout>
-      <UModals />
-      <Toaster
-        close-button
-        position="top-center"
-      />
+      <UApp :tooltip="{ delayDuration: 0 }">
+        <NuxtLayout>
+          <NuxtPage />
+        </NuxtLayout>
+        <Toaster
+          close-button
+          position="top-center"
+        />
+      </UApp>
     </Body>
   </Html>
 </template>
diff --git a/apps/shelve/app/assets/style/main.css b/apps/shelve/app/assets/style/main.css
@@ -1,4 +1,6 @@
-@import "animations.css";
+@import "tailwindcss";
+@import "@nuxt/ui";
+@import "./animations.css";
 
 /* Global styles, css resets, etc. */
 html, body, #__nuxt, #__layout {
@@ -13,10 +15,17 @@ html, body, #__nuxt, #__layout {
 }
 
 ::-webkit-scrollbar-thumb {
-    background: var(--inverted-color);
+    background: var(--ui-bg-inverted);
     border-radius: 5px;
 }
 
+@theme {
+  --font-family-newsreader: 'Newsreader', serif;
+  --font-family-inter: 'Inter', sans-serif;
+  --font-family-geist: 'Geist', sans-serif;
+  --font-family-geist-mono: 'GeistMono', sans-serif;
+}
+
 .font-geist-mono {
     font-family: 'GeistMono', sans-serif;
 }
@@ -32,47 +41,3 @@ html, body, #__nuxt, #__layout {
 .main-gradient {
   @apply font-geist-mono bg-gradient-to-r from-neutral-50 to-neutral-600 to-50% bg-clip-text text-transparent;
 }
-
-html.light {
-    --primary-color: rgb(255, 255, 255);
-    --primary-hover-color: rgb(255, 255, 255, 0.9);
-
-    --secondary-color: rgb(245, 245, 245);
-    --secondary-hover-color: rgb(245, 245, 245, 0.9);
-
-    --inverted-color: rgb(2,2,2);
-    --inverted-hover-color: rgb(2,2,2,0.9);
-
-    --accent-color: rgb(40, 83, 255);
-    --accent-light-color: rgb(40, 83, 255, 0.1);
-    --accent-hover-color: rgb(40, 83, 255, 0.9);
-
-    --text-primary: rgb(2,2,2);
-    --text-secondary: rgb(61, 61, 61);
-    --text-tertiary: rgb(96, 96, 96);
-    --text-inverted: rgb(255,255,255);
-
-    --border-color: rgba(0,0,0,0.1);
-}
-
-html.dark {
-    --primary-color: rgb(2,2,2);
-    --primary-hover-color: rgb(2,2,2,0.9);
-
-    --secondary-color: rgb(19, 19, 19);
-    --secondary-hover-color: rgb(19, 19, 19, 0.9);
-
-    --inverted-color: rgb(255, 255, 255);
-    --inverted-hover-color: rgb(255, 255, 255, 0.9);
-
-    --accent-color: rgb(7, 78, 255);
-    --accent-light-color: rgb(7, 78, 255, 0.1);
-    --accent-hover-color: rgb(7, 78, 255, 0.9);
-
-    --text-primary: rgb(248,243,238);
-    --text-secondary: rgb(200,200,200);
-    --text-tertiary: rgb(150,150,150);
-    --text-inverted: rgb(255,255,255);
-
-    --border-color: rgba(255,255,255,0.1);
-}
diff --git a/apps/shelve/app/components/ConfirmModal.vue b/apps/shelve/app/components/ConfirmModal.vue
@@ -21,27 +21,17 @@ function onCancel() {
 </script>
 
 <template>
-  <UModal>
-    <UCard>
-      <template #header>
-        <h3 class="text-lg font-semibold">
-          {{ title }}
-        </h3>
-      </template>
-      <div class="text-gray-300">
-        {{ description }}
+  <UModal :title :description>
+    <template #footer>
+      <div class="flex w-full justify-end gap-2">
+        <UButton variant="ghost" color="neutral" @click="onCancel">
+          Cancel
+        </UButton>
+        <UButton :color="danger ? 'error' : 'primary'" @click="onSuccess">
+          Confirm
+        </UButton>
       </div>
-      <template #footer>
-        <div class="flex justify-end gap-2">
-          <UButton variant="ghost" color="gray" @click="onCancel">
-            Cancel
-          </UButton>
-          <UButton :color="danger ? 'red' : 'primary'" @click="onSuccess">
-            Confirm
-          </UButton>
-        </div>
-      </template>
-    </UCard>
+    </template>
   </UModal>
 </template>
 
diff --git a/apps/shelve/app/components/CrossedDiv.vue b/apps/shelve/app/components/CrossedDiv.vue
@@ -7,12 +7,12 @@ const { encryptedText } = defineProps<CrossedDivProps>()
 </script>
 
 <template>
-  <div class="relative -mb-px -ml-px h-40 border border-gray-500/15 border-b-transparent lg:border-t-transparent">
+  <div class="relative -mb-px -ml-px h-40 border border-neutral-500/15 border-b-transparent lg:border-t-transparent">
     <span class="bottom absolute -bottom-px -left-px size-px" />
     <span class="bottom absolute -bottom-px -right-px size-px" />
     <span class="bottom absolute -left-px -top-px size-px" />
     <span class="bottom absolute -right-px -top-px size-px" />
-    <div v-if="encryptedText" class="encryption absolute left-0 top-0 size-full overflow-hidden break-words font-mono text-xs leading-5 text-gray-400">
+    <div v-if="encryptedText" class="encryption absolute left-0 top-0 size-full overflow-hidden break-words font-mono text-xs leading-5 text-neutral-400">
       GIHXTrTBRIPocF8gMJPAM5dyuwCO7DIqMlrx45EFKa8Ky06RHwDafK1CpxdOLAI6mM8YX4iHsZ188j00gNkbgDYEtrq1S5vaOIxHhALKib3EKVD5tuYf3Ej2QA0R363viNI0tP8RVD4GlLzNPHpBkePL76KLzZrXa6x88wsJN8sslwiKTxEeepv1760YPcdyrfnqv4W4RRv2Fw9f6rBIgzOaBF5Jet4rjo2eIuKCUDkM9t8ZnfvGCzguyoFkTlmLtQuzQKPZLVuPtpbbBOdrUG795uSVFCnFjnJKgHGAiAeGZmu0n1lnfNgOB9t7cLc7Gk7jUfW3aHK3es56mORlQyACrHBDVQjPiBaIbfBBAreNiZAo8NzadXQ28HOHTvdL90GYoqJC9fqitNn0R1CWVJyEqCCKlTZSU2UFhgUNCI7Zzozl7QlZceSE5SrXNjtBnAi0sMiIeJb43o2x2vHQehvUmTaejG3UqETeRxzvg4qhD1qFDkk8y3mwuq31NWDlaszIhhVNnu6NTapPGT9XKXDCMee8QOGnQuBsPEQHCNs3eX3jsZLitOCTTVljHuY8A3AEAiWudJduue5X5PTFSc1UfFt8U1Yhj4qiVQaip3XkfesyBnk7wVaAWUKrKMToGVSyeoD23U1CNibAimwV7TKRpWWGSvXdFclFM6XuigtHlZzSLOE40wY3eEw4rAPeZF30jJMZytpXVc9AsprMpCfoKMbKSPUnDuXCq1nhggY2MTkCdcGkABxsbolIuyYUZMu2Lqt18aNIN1ZudI08ZVJHCX8q2XcPv43nDtjeHE8djSxcxoXb2b0vw4Wc4AuO2Uph0K6fYSXt54nRHit19TkgCi8dhY2PZAfyiULAvmQy6CQYc5Xw8yfSVMtHnNs2kuC1e376penaAMQ1jUozKWJneHjF21aleJWjN2NJ8bMNyfTNIL1ijpGwz6urHGrSyYR94ghvxNxBwZgRJZbx5IVqjwqDxnzAacMBvViVG4UHluE4UaoLPCHkHBrYj6m32mAIjkso2tC3kBu5XmGnAVdz8UzkPzxgtORxHPEisInmi7fgLGywdQ8Zz3Zdh9912kMR9b6MQ3xRFrlZo5gOQYhSSgyH1gIyGAjjcO3O3EptA7CcRsIeaNR5O3NG4iABwLfN1ebEBC6fLMzIDLlSYs8zQwHYsdSZMbb5yoYxvfB7G4rmEQA9FJ2o1kLzk1OTAk4vUKIEt8gfSDxzgROhMjqDoIeLiWgbXLefVRNVDf0mldlPY7oinEnos1JuxfpukoDhQL5aP2e8pqvhnctNHEGyNDtL3nea1JtDOlBic0OriZlTvIRCADyDFWE7otCHnFipuCFMViCR30HM0pzuCAeQdtvChyIe3mXBxIQnbAqgbLQXhhOD79Nyf8wlyT3fWvufGlgJO4jKD0iwerKMeXGQ0lIClU2fsEGfYAno4b2xeDD1mUO78hXABPREdtj38GoIZCNpxN69TLnCqLDG0pIkXxyYDaMmU9C5YnUr81n1xOgVyeH4iJvMF7CQkuYgWAsvwSwcNtIDtU2vjzXORp4VDlRjXDu4SqGbCDvijjn4wCJLJE1mLvv9R5mMOjHDBVdEOjoJuMp7YpVqSIWenC3oLGsJPJl5KarsVxaMnSWTHRw8wDVHNOcXXO9ZGGQGdi31ikeIfZABoUBKmeyBbgepVlCkDy3aytzYiwmX7fosxj1vk6qbji9GbVNEhimXHZR2rFuKBpov1nahPbopBpfaGKY15UoN2pQOtV5oG1MngCxTTqNBu8khxbYDbRDilYYwbiWk
     </div>
     <div class="relative z-10 ml-4 flex h-full flex-col justify-center">

diff --git a/apps/shelve/app/components/DropdownMenu.vue b/apps/shelve/app/components/DropdownMenu.vue
@@ -23,8 +23,7 @@ const items = [
     {
       label: 'Sign out',
       icon: 'heroicons:arrow-left-on-rectangle',
-      iconClass: 'text-red-500 dark:text-red-500',
-      click: () => {
+      onSelect: () => {
         navigateTo('/')
         clear()
       }
@@ -35,34 +34,25 @@ const items = [
 
 <template>
   <div class="flex items-center justify-center">
-    <UDropdown
+    <UDropdownMenu
       v-if="loggedIn"
       :items
-      :ui="{
-        background: 'backdrop-blur-3xl border dark:bg-gray-950/95 dark:border-gray-400/10 bg-white',
-        ring: 'ring-1 ring-neutral-100 dark:ring-neutral-800',
-        divide: 'divide-y divide-neutral-100 dark:divide-neutral-800',
-        item: {
-          active: 'bg-neutral-100 dark:bg-neutral-800',
-          disabled: 'cursor-text select-text'
-        }
-      }"
       :popper="{ placement: 'bottom-start' }"
     >
-      <UAvatar :src="user.avatar" :alt="user.username" />
+      <UAvatar :src="user.avatar" :alt="user.username" class="cursor-pointer" />
 
       <template #account="{ item }">
         <div class="text-left">
           <p>
             Signed in as
           </p>
-          <p class="truncate font-medium text-gray-900 dark:text-white">
+          <p class="truncate font-medium text-neutral-900 dark:text-white">
             {{ item.label }}
           </p>
         </div>
       </template>
-    </UDropdown>
-    <UButton v-else to="/login" label="Login" color="gray" />
+    </UDropdownMenu>
+    <UButton v-else to="/login" label="Login" color="neutral" variant="soft" />
   </div>
 </template>
 

diff --git a/apps/shelve/app/components/OTP.vue b/apps/shelve/app/components/OTP.vue
@@ -86,7 +86,7 @@ const handleKeyDown = function(event: KeyboardEvent, index: number) {
 <style scoped>
 .digit-box {
   @apply size-12 rounded-md text-center text-2xl text-black dark:text-white outline-none;
-  @apply bg-white dark:bg-neutral-800 ring-2 ring-transparent focus:ring-primary placeholder-gray-600/30;
+  @apply bg-white dark:bg-neutral-800 ring-2 ring-transparent focus:ring-primary placeholder-neutral-600/30;
   @apply border-[1px] dark:border-white/5 border-black/10;
 }
 </style>
diff --git a/apps/shelve/app/components/Release.vue b/apps/shelve/app/components/Release.vue
@@ -13,7 +13,7 @@ defineProps({
 <template>
   <article :id="content.title" class="flex flex-col justify-between gap-4 sm:flex-row sm:gap-8">
     <div class="flex flex-col gap-2">
-      <span class="text-nowrap text-gray-300">
+      <span class="text-nowrap text-neutral-300">
         {{ new Date(content.date).toLocaleDateString("en-US", {
           month: "short",
           day: "numeric",
@@ -32,7 +32,7 @@ defineProps({
       >
       <ContentRenderer
         :value="content"
-        class="prose prose-h2:text-gray-200"
+        class="prose prose-h2:text-neutral-200"
       />
     </div>
   </article>

diff --git a/apps/shelve/app/components/Status.vue b/apps/shelve/app/components/Status.vue
@@ -17,16 +17,16 @@ defineProps({
 
 <template>
   <div>
-    <UTooltip v-if="active" :text="activeText" :popper="{ placement: 'top' }">
+    <UTooltip v-if="active" :text="activeText" :content="{ side: 'top' }">
       <span class="relative flex size-3">
         <span class="absolute inline-flex size-full animate-ping rounded-full bg-green-500/80 opacity-75" />
         <span class="relative inline-flex size-3 scale-90 rounded-full bg-green-500" />
       </span>
     </UTooltip>
-    <UTooltip v-else :text="inactiveText" :popper="{ placement: 'top' }">
+    <UTooltip v-else :text="inactiveText" :content="{ side: 'top' }">
       <span class="relative flex size-3">
-        <span class="absolute inline-flex size-full rounded-full bg-gray-500/80 opacity-75" />
-        <span class="relative inline-flex size-3 scale-90 rounded-full bg-gray-500" />
+        <span class="absolute inline-flex size-full rounded-full bg-neutral-500/80 opacity-75" />
+        <span class="relative inline-flex size-3 scale-90 rounded-full bg-neutral-500" />
       </span>
     </UTooltip>
   </div>

diff --git a/apps/shelve/app/components/UDivider.vue b/apps/shelve/app/components/UDivider.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+type DividerProps = {
+  orientation?: 'horizontal' | 'vertical'
+}
+
+const { orientation = 'horizontal' } = defineProps<DividerProps>()
+</script>
+
+<template>
+  <div v-if="orientation === 'horizontal'" class="flex-1 border-b border-neutral-200 dark:border-neutral-800" />
+  <div v-else class="flex-1 border-r border-neutral-200 dark:border-neutral-800" />
+</template>
diff --git a/apps/shelve/app/components/form/Group.vue b/apps/shelve/app/components/form/Group.vue
@@ -14,6 +14,10 @@ defineProps({
     type: String as PropType<'text' | 'email' | 'password' | 'textarea'>,
     default: 'text',
   },
+  autofocus: {
+    type: Boolean,
+    default: false,
+  },
   placeholder: {
     type: String,
     required: false
@@ -32,18 +36,28 @@ const model = defineModel({ type: String, required: true })
 </script>
 
 <template>
-  <UFormGroup :label>
+  <UFormField class="w-full" :label>
     <UTextarea
       v-if="type === 'textarea'"
       v-model="model"
       autoresize
+      :autofocus
       :placeholder
       :disabled
       :type
       :rows
+      class="w-full"
+    />
+    <UInput
+      v-else
+      v-model="model"
+      class="w-full"
+      :placeholder
+      :autofocus
+      :disabled
+      :type
     />
-    <UInput v-else v-model="model" :placeholder :disabled :type />
-  </UFormGroup>
+  </UFormField>
 </template>
 
 <style scoped>

diff --git a/apps/shelve/app/components/landing/Faq.vue b/apps/shelve/app/components/landing/Faq.vue
@@ -35,13 +35,13 @@ const items = [
       <h3 class="main-gradient text-2xl">
         <LandingScrambleText label="FAQ" />
       </h3>
-      <p class="max-w-lg text-center text-sm text-gray-500 sm:text-base">
+      <p class="max-w-lg text-center text-sm text-neutral-500 sm:text-base">
         Frequently asked questions about Shelve.
       </p>
     </div>
     <div class="mx-auto max-w-3xl">
       <UAccordion
-        color="gray"
+        color="neutral"
         variant="ghost"
         size="sm"
         :items