Merge branch 'main' into refactor/improve-accent-color-id-typing

Author: maxchang3

app/components/Alert.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+interface Props {
+  variant: 'warning' | 'error'
+  title?: string
+}
+
+defineProps<Props>()
+
+const WRAPPER_CLASSES: Record<Props['variant'], string> = {
+  warning: 'border-amber-400/20 bg-amber-500/8',
+  error: 'border-red-400/20 bg-red-500/8',
+}
+
+const TITLE_CLASSES: Record<Props['variant'], string> = {
+  warning: 'text-amber-800 dark:text-amber-300',
+  error: 'text-red-800 dark:text-red-300',
+}
+
+const BODY_CLASSES: Record<Props['variant'], string> = {
+  warning: 'text-amber-700 dark:text-amber-400',
+  error: 'text-red-700 dark:text-red-400',
+}
+
+const ROLES: Record<Props['variant'], 'status' | 'alert'> = {
+  warning: 'status',
+  error: 'alert',
+}
+</script>
+
+<template>
+  <div
+    :role="ROLES[variant]"
+    class="border rounded-md px-3 py-2.5"
+    :class="WRAPPER_CLASSES[variant]"
+  >
+    <p v-if="title" class="font-semibold mb-1" :class="TITLE_CLASSES[variant]">{{ title }}</p>
+    <div class="text-xs" :class="BODY_CLASSES[variant]">
+      <slot />
+    </div>
+  </div>
+</template>

app/components/Compare/FacetBarChart.vue

@@ -1,11 +1,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { VueUiHorizontalBar } from 'vue-data-ui/vue-ui-horizontal-bar'
-import type {
-  VueUiHorizontalBarConfig,
-  VueUiHorizontalBarDatapoint,
-  VueUiHorizontalBarDatasetItem,
-} from 'vue-data-ui'
+import type { VueUiHorizontalBarConfig, VueUiHorizontalBarDatasetItem } from 'vue-data-ui'
 import { getFrameworkColor, isListedFramework } from '~/utils/frameworks'
 import { drawSmallNpmxLogoAndTaglineWatermark } from '~/composables/useChartWatermark'
 import {
@@ -230,7 +226,7 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
                   ${name}
                 </span>
                 <span class="text-base text-[var(--fg)] font-mono tabular-nums text-end">
-                  ${(datapoint as VueUiHorizontalBarDatapoint).formattedValue ?? 0}
+                  ${datapoint?.formattedValue ?? 0}
                 </span>
               </div>
             </div>

app/components/Package/ClaimPackageModal.vue

@@ -199,28 +199,26 @@ const previewPackageJson = computed(() => {
       </div>
 
       <!-- Validation errors -->
-      <div
+      <Alert
         v-if="checkResult.validationErrors?.length"
-        class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
-        role="alert"
+        variant="error"
+        :title="$t('claim.modal.invalid_name')"
       >
-        <p class="font-medium mb-1">{{ $t('claim.modal.invalid_name') }}</p>
         <ul class="list-disc list-inside space-y-1">
           <li v-for="err in checkResult.validationErrors" :key="err">{{ err }}</li>
         </ul>
-      </div>
+      </Alert>
 
       <!-- Validation warnings -->
-      <div
+      <Alert
         v-if="checkResult.validationWarnings?.length"
-        class="p-3 text-sm text-yellow-400 bg-yellow-500/10 border border-yellow-500/20 rounded-md"
-        role="alert"
+        variant="warning"
+        :title="$t('common.warnings')"
       >
-        <p class="font-medium mb-1">{{ $t('common.warnings') }}</p>
         <ul class="list-disc list-inside space-y-1">
           <li v-for="warn in checkResult.validationWarnings" :key="warn">{{ warn }}</li>
         </ul>
-      </div>
+      </Alert>
 
       <!-- Availability status -->
       <template v-if="checkResult.valid">
@@ -305,39 +303,23 @@ const previewPackageJson = computed(() => {
       </template>
 
       <!-- Error message -->
-      <div
-        v-if="mergedError"
-        role="alert"
-        class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
-      >
-        {{ mergedError }}
-      </div>
+      <Alert v-if="mergedError" variant="error">{{ mergedError }}</Alert>
 
       <!-- Actions -->
       <div v-if="checkResult.available && checkResult.valid" class="space-y-3">
         <!-- Warning for unscoped packages -->
-        <div
-          v-if="!isScoped"
-          class="p-3 text-sm text-yellow-400 bg-yellow-500/10 border border-yellow-500/20 rounded-md"
-        >
-          <p class="font-medium mb-1">{{ $t('claim.modal.scope_warning_title') }}</p>
-          <p class="text-xs text-yellow-400/80">
-            {{
-              $t('claim.modal.scope_warning_text', {
-                username: npmUser || 'username',
-                name: packageName,
-              })
-            }}
-          </p>
-        </div>
+        <Alert v-if="!isScoped" variant="warning" :title="$t('claim.modal.scope_warning_title')">
+          {{
+            $t('claim.modal.scope_warning_text', {
+              username: npmUser || 'username',
+              name: packageName,
+            })
+          }}
+        </Alert>
 
         <!-- Not connected warning -->
         <div v-if="!isConnected" class="space-y-3">
-          <div
-            class="p-3 text-sm text-yellow-400 bg-yellow-500/10 border border-yellow-500/20 rounded-md"
-          >
-            <p>{{ $t('claim.modal.connect_required') }}</p>
-          </div>
+          <Alert variant="warning">{{ $t('claim.modal.connect_required') }}</Alert>
           <button
             type="button"
             class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-accent/70"
@@ -389,12 +371,7 @@ const previewPackageJson = computed(() => {
 
     <!-- Error state -->
     <div v-else-if="mergedError" class="space-y-4">
-      <div
-        role="alert"
-        class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
-      >
-        {{ mergedError }}
-      </div>
+      <Alert variant="error">{{ mergedError }}</Alert>
       <button
         type="button"
         class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-accent/70"