feat(hub-ui): adopt @antfu/design components and devframe branding (#176)

Co-authored-by: Anthony Fu <github@antfu.me>

Author: antfubot

examples/next-devframe-hub/src/client/next-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
+import "./.next/dev/types/root-params.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

packages/hub-ui/package.json

@@ -44,6 +44,7 @@
     "devframe": "workspace:*"
   },
   "devDependencies": {
+    "@antfu/design": "catalog:frontend",
     "@devframes/hub": "workspace:*",
     "@iconify-json/ph": "catalog:frontend",
     "@json-render/core": "catalog:deps",

packages/hub-ui/scripts/build-css.ts

@@ -28,10 +28,22 @@ export async function buildCSS(): Promise<void> {
     ignore: IGNORE,
   })
 
+  // The dock reuses `@antfu/design`'s Vue components (buttons, badges, …)
+  // directly. UnoCSS ignores `node_modules` by default, so their semantic
+  // shortcut classes (`btn-primary`, `btn-action`, `badge-*`, …) would be
+  // absent from the shadow-root stylesheet — scan the design package's
+  // component sources too so those classes ship in the injected CSS.
+  const designComponentsDir = join(require.resolve('@antfu/design/package.json'), '..', 'components')
+  const designFiles = await glob('**/*.vue', {
+    cwd: designComponentsDir,
+    absolute: true,
+    ignore: IGNORE,
+  })
+
   const generator = await createGenerator(config)
 
   const tokens = new Set<string>()
-  for (const file of files) {
+  for (const file of [...files, ...designFiles]) {
     const content = await fs.readFile(file, 'utf-8')
     await generator.applyExtractors(content, file, tokens)
   }

packages/hub-ui/src/client/.generated/css.ts

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { DevframeCommandEntry, DevframeCommandKeybinding } from '@devframes/hub'
+import DisplayKbd from '@antfu/design/components/Display/DisplayKbd.vue'
 import DockIcon from '../dock/DockIcon.vue'
-import KeybindingBadge from './KeybindingBadge.vue'
 
 defineProps<{
   entry: DevframeCommandEntry
@@ -53,10 +53,10 @@ defineEmits<{
       </div>
       <div class="flex items-center gap-1.5 flex-none">
         <!-- Keybinding badges -->
-        <KeybindingBadge
+        <DisplayKbd
           v-for="(kb, ki) in keybindings"
           :key="ki"
-          :key-string="kb.key"
+          :keys="kb.key"
         />
         <!-- Loading indicator -->
         <span v-if="loading" class="i-ph-spinner-gap-duotone w-3.5 h-3.5 animate-spin op50" />

packages/hub-ui/src/client/components/command-palette/CommandPaletteItem.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
+import ActionButton from '@antfu/design/components/Action/ActionButton.vue'
 import { useTemplateRef, watchPostEffect } from 'vue'
 import { ConfirmPromise } from '../../state/confirm'
-import Button from './Button.vue'
 
-const confirmButton = useTemplateRef<InstanceType<typeof Button>>('confirmButton')
+const confirmButton = useTemplateRef<InstanceType<typeof ActionButton>>('confirmButton')
 
 watchPostEffect(() => {
-  confirmButton.value?.focus({ preventScroll: true })
+  (confirmButton.value?.$el as HTMLElement | undefined)?.focus({ preventScroll: true })
 })
 
 function resolveConfirm(resolve: (value: boolean) => void, value: boolean) {
@@ -43,12 +43,12 @@ function resolveConfirm(resolve: (value: boolean) => void, value: boolean) {
         </p>
 
         <div class="flex items-center justify-end gap-2 mt-6">
-          <Button variant="ghost" size="sm" @click="resolveConfirm(resolve, false)">
+          <ActionButton variant="text" size="sm" @click="resolveConfirm(resolve, false)">
             {{ options.cancelText ?? 'Cancel' }}
-          </Button>
-          <Button ref="confirmButton" variant="soft" size="sm" @click="resolveConfirm(resolve, true)">
+          </ActionButton>
+          <ActionButton ref="confirmButton" variant="primary" size="sm" @click="resolveConfirm(resolve, true)">
             {{ options.confirmText ?? 'OK' }}
-          </Button>
+          </ActionButton>
         </div>
       </div>
     </div>