feat: migrate header, sidebar, maincontent inset to shadcn components (#180)

Author: DaxServer

frontend/.biomelintrc-auto-import.json

@@ -5,6 +5,13 @@
       "ApiClient",
       "ApiKey",
       "ApiPlugin",
+      "Breadcrumb",
+      "BreadcrumbEllipsis",
+      "BreadcrumbItem",
+      "BreadcrumbLink",
+      "BreadcrumbList",
+      "BreadcrumbPage",
+      "BreadcrumbSeparator",
       "Button",
       "ButtonVariants",
       "ColumnInfo",
@@ -24,6 +31,21 @@
       "DropTargetType",
       "DropValidation",
       "DropZoneConfig",
+      "DropdownMenu",
+      "DropdownMenuCheckboxItem",
+      "DropdownMenuContent",
+      "DropdownMenuGroup",
+      "DropdownMenuItem",
+      "DropdownMenuLabel",
+      "DropdownMenuPortal",
+      "DropdownMenuRadioGroup",
+      "DropdownMenuRadioItem",
+      "DropdownMenuSeparator",
+      "DropdownMenuShortcut",
+      "DropdownMenuSub",
+      "DropdownMenuSubContent",
+      "DropdownMenuSubTrigger",
+      "DropdownMenuTrigger",
       "EffectScope",
       "ExtendedError",
       "ExtendedErrorCode",
@@ -35,6 +57,7 @@
       "FileUploadUploaderEvent",
       "FrontendErrorCode",
       "InjectionKey",
+      "Input",
       "ItemSchema",
       "Label",
       "MaybeRef",
@@ -51,10 +74,52 @@
       "Ref",
       "ReferenceSchemaMapping",
       "RequiredFieldHighlight",
+      "SIDEBAR_COOKIE_MAX_AGE",
+      "SIDEBAR_COOKIE_NAME",
+      "SIDEBAR_KEYBOARD_SHORTCUT",
+      "SIDEBAR_WIDTH",
+      "SIDEBAR_WIDTH_ICON",
+      "SIDEBAR_WIDTH_MOBILE",
       "SchemaCompletenessResult",
       "SchemaDragDropContext",
       "SchemaRequest",
+      "Separator",
       "ShallowRef",
+      "Sheet",
+      "SheetClose",
+      "SheetContent",
+      "SheetDescription",
+      "SheetFooter",
+      "SheetHeader",
+      "SheetTitle",
+      "SheetTrigger",
+      "Sidebar",
+      "SidebarContent",
+      "SidebarFooter",
+      "SidebarGroup",
+      "SidebarGroupAction",
+      "SidebarGroupContent",
+      "SidebarGroupLabel",
+      "SidebarHeader",
+      "SidebarInput",
+      "SidebarInset",
+      "SidebarMenu",
+      "SidebarMenuAction",
+      "SidebarMenuBadge",
+      "SidebarMenuButton",
+      "SidebarMenuButtonProps",
+      "SidebarMenuButtonVariants",
+      "SidebarMenuItem",
+      "SidebarMenuSkeleton",
+      "SidebarMenuSub",
+      "SidebarMenuSubButton",
+      "SidebarMenuSubItem",
+      "SidebarProps",
+      "SidebarProvider",
+      "SidebarRail",
+      "SidebarSeparator",
+      "SidebarTrigger",
+      "Skeleton",
       "Slot",
       "Slots",
       "StatementRank",
@@ -63,6 +128,10 @@
       "StatementSchemaMapping",
       "TermsSchemaMapping",
       "TieredMenu",
+      "Tooltip",
+      "TooltipContent",
+      "TooltipProvider",
+      "TooltipTrigger",
       "TransformationFunction",
       "TransformationParameter",
       "TransformationRule",
@@ -160,6 +229,7 @@
       "pausableWatch",
       "provide",
       "provideLocal",
+      "provideSidebarContext",
       "reactify",
       "reactifyObject",
       "reactive",
@@ -182,6 +252,7 @@
       "shallowReactive",
       "shallowReadonly",
       "shallowRef",
+      "sidebarMenuButtonVariants",
       "storeToRefs",
       "syncRef",
       "syncRefs",
@@ -351,6 +422,7 @@
       "useScrollLock",
       "useSessionStorage",
       "useShare",
+      "useSidebar",
       "useSlots",
       "useSorted",
       "useSpeechRecognition",

frontend/auto-imports.d.ts

@@ -10,6 +10,13 @@ declare module 'vue' {
   export interface GlobalComponents {
     AutoComplete: typeof import('primevue/autocomplete')['default']
     BasePropertyValueEditor: typeof import('./src/features/wikibase-schema/components/BasePropertyValueEditor.vue')['default']
+    Breadcrumb: typeof import('./src/components/ui/breadcrumb/Breadcrumb.vue')['default']
+    BreadcrumbEllipsis: typeof import('./src/components/ui/breadcrumb/BreadcrumbEllipsis.vue')['default']
+    BreadcrumbItem: typeof import('./src/components/ui/breadcrumb/BreadcrumbItem.vue')['default']
+    BreadcrumbLink: typeof import('./src/components/ui/breadcrumb/BreadcrumbLink.vue')['default']
+    BreadcrumbList: typeof import('./src/components/ui/breadcrumb/BreadcrumbList.vue')['default']
+    BreadcrumbPage: typeof import('./src/components/ui/breadcrumb/BreadcrumbPage.vue')['default']
+    BreadcrumbSeparator: typeof import('./src/components/ui/breadcrumb/BreadcrumbSeparator.vue')['default']
     Button: typeof import('./src/components/ui/button/Button.vue')['default']
     Card: typeof import('primevue/card')['default']
     Checkbox: typeof import('primevue/checkbox')['default']
@@ -25,9 +32,27 @@ declare module 'vue' {
     DataTabPanel: typeof import('./src/features/data-processing/components/DataTabPanel.vue')['default']
     DefaultLayout: typeof import('./src/core/layouts/DefaultLayout.vue')['default']
     Dialog: typeof import('primevue/dialog')['default']
+    Divider: typeof import('primevue/divider')['default']
+    DropdownMenu: typeof import('./src/components/ui/dropdown-menu/DropdownMenu.vue')['default']
+    DropdownMenuCheckboxItem: typeof import('./src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue')['default']
+    DropdownMenuContent: typeof import('./src/components/ui/dropdown-menu/DropdownMenuContent.vue')['default']
+    DropdownMenuGroup: typeof import('./src/components/ui/dropdown-menu/DropdownMenuGroup.vue')['default']
+    DropdownMenuItem: typeof import('./src/components/ui/dropdown-menu/DropdownMenuItem.vue')['default']
+    DropdownMenuLabel: typeof import('./src/components/ui/dropdown-menu/DropdownMenuLabel.vue')['default']
+    DropdownMenuRadioGroup: typeof import('./src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue')['default']
+    DropdownMenuRadioItem: typeof import('./src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue')['default']
+    DropdownMenuSeparator: typeof import('./src/components/ui/dropdown-menu/DropdownMenuSeparator.vue')['default']
+    DropdownMenuShortcut: typeof import('./src/components/ui/dropdown-menu/DropdownMenuShortcut.vue')['default']
+    DropdownMenuSub: typeof import('./src/components/ui/dropdown-menu/DropdownMenuSub.vue')['default']
+    DropdownMenuSubContent: typeof import('./src/components/ui/dropdown-menu/DropdownMenuSubContent.vue')['default']
+    DropdownMenuSubTrigger: typeof import('./src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue')['default']
+    DropdownMenuTrigger: typeof import('./src/components/ui/dropdown-menu/DropdownMenuTrigger.vue')['default']
     DropZone: typeof import('./src/features/wikibase-schema/components/DropZone.vue')['default']
+    FileUpload: typeof import('primevue/fileupload')['default']
     Header: typeof import('./src/shared/components/Header.vue')['default']
+    Input: typeof import('./src/components/ui/input/Input.vue')['default']
     InputText: typeof import('primevue/inputtext')['default']
+    Label: typeof import('./src/components/ui/label/Label.vue')['default']
     MainContent: typeof import('./src/shared/components/MainContent.vue')['default']
     OpenProject: typeof import('./src/features/project-management/pages/OpenProject.vue')['default']
     Paginator: typeof import('primevue/paginator')['default']
@@ -46,7 +71,41 @@ declare module 'vue' {
     SchemaSelector: typeof import('./src/features/wikibase-schema/components/SchemaSelector.vue')['default']
     SchemaTabPanel: typeof import('./src/features/wikibase-schema/components/SchemaTabPanel.vue')['default']
     Select: typeof import('primevue/select')['default']
-    Sidebar: typeof import('./src/shared/components/Sidebar.vue')['default']
+    Separator: typeof import('./src/components/ui/separator/Separator.vue')['default']
+    Sheet: typeof import('./src/components/ui/sheet/Sheet.vue')['default']
+    SheetClose: typeof import('./src/components/ui/sheet/SheetClose.vue')['default']
+    SheetContent: typeof import('./src/components/ui/sheet/SheetContent.vue')['default']
+    SheetDescription: typeof import('./src/components/ui/sheet/SheetDescription.vue')['default']
+    SheetFooter: typeof import('./src/components/ui/sheet/SheetFooter.vue')['default']
+    SheetHeader: typeof import('./src/components/ui/sheet/SheetHeader.vue')['default']
+    SheetOverlay: typeof import('./src/components/ui/sheet/SheetOverlay.vue')['default']
+    SheetTitle: typeof import('./src/components/ui/sheet/SheetTitle.vue')['default']
+    SheetTrigger: typeof import('./src/components/ui/sheet/SheetTrigger.vue')['default']
+    Sidebar: typeof import('./src/components/ui/sidebar/Sidebar.vue')['default']
+    SidebarContent: typeof import('./src/components/ui/sidebar/SidebarContent.vue')['default']
+    SidebarFooter: typeof import('./src/components/ui/sidebar/SidebarFooter.vue')['default']
+    SidebarGroup: typeof import('./src/components/ui/sidebar/SidebarGroup.vue')['default']
+    SidebarGroupAction: typeof import('./src/components/ui/sidebar/SidebarGroupAction.vue')['default']
+    SidebarGroupContent: typeof import('./src/components/ui/sidebar/SidebarGroupContent.vue')['default']
+    SidebarGroupLabel: typeof import('./src/components/ui/sidebar/SidebarGroupLabel.vue')['default']
+    SidebarHeader: typeof import('./src/components/ui/sidebar/SidebarHeader.vue')['default']
+    SidebarInput: typeof import('./src/components/ui/sidebar/SidebarInput.vue')['default']
+    SidebarInset: typeof import('./src/components/ui/sidebar/SidebarInset.vue')['default']
+    SidebarMenu: typeof import('./src/components/ui/sidebar/SidebarMenu.vue')['default']
+    SidebarMenuAction: typeof import('./src/components/ui/sidebar/SidebarMenuAction.vue')['default']
+    SidebarMenuBadge: typeof import('./src/components/ui/sidebar/SidebarMenuBadge.vue')['default']
+    SidebarMenuButton: typeof import('./src/components/ui/sidebar/SidebarMenuButton.vue')['default']
+    SidebarMenuButtonChild: typeof import('./src/components/ui/sidebar/SidebarMenuButtonChild.vue')['default']
+    SidebarMenuItem: typeof import('./src/components/ui/sidebar/SidebarMenuItem.vue')['default']
+    SidebarMenuSkeleton: typeof import('./src/components/ui/sidebar/SidebarMenuSkeleton.vue')['default']
+    SidebarMenuSub: typeof import('./src/components/ui/sidebar/SidebarMenuSub.vue')['default']
+    SidebarMenuSubButton: typeof import('./src/components/ui/sidebar/SidebarMenuSubButton.vue')['default']
+    SidebarMenuSubItem: typeof import('./src/components/ui/sidebar/SidebarMenuSubItem.vue')['default']
+    SidebarProvider: typeof import('./src/components/ui/sidebar/SidebarProvider.vue')['default']
+    SidebarRail: typeof import('./src/components/ui/sidebar/SidebarRail.vue')['default']
+    SidebarSeparator: typeof import('./src/components/ui/sidebar/SidebarSeparator.vue')['default']
+    SidebarTrigger: typeof import('./src/components/ui/sidebar/SidebarTrigger.vue')['default']
+    Skeleton: typeof import('./src/components/ui/skeleton/Skeleton.vue')['default']
     StatementEditor: typeof import('./src/features/wikibase-schema/components/StatementEditor.vue')['default']
     StatementManager: typeof import('./src/features/wikibase-schema/components/StatementManager.vue')['default']
     Tab: typeof import('primevue/tab')['default']
@@ -60,6 +119,10 @@ declare module 'vue' {
     TieredMenu: typeof import('primevue/tieredmenu')['default']
     Toast: typeof import('primevue/toast')['default']
     ToggleSwitch: typeof import('primevue/toggleswitch')['default']
+    Tooltip: typeof import('./src/components/ui/tooltip/Tooltip.vue')['default']
+    TooltipContent: typeof import('./src/components/ui/tooltip/TooltipContent.vue')['default']
+    TooltipProvider: typeof import('./src/components/ui/tooltip/TooltipProvider.vue')['default']
+    TooltipTrigger: typeof import('./src/components/ui/tooltip/TooltipTrigger.vue')['default']
     ValidationDisplay: typeof import('./src/features/wikibase-schema/components/ValidationDisplay.vue')['default']
     ValueMappingEditor: typeof import('./src/features/wikibase-schema/components/ValueMappingEditor.vue')['default']
     WikibaseSchemaEditor: typeof import('./src/features/wikibase-schema/components/WikibaseSchemaEditor.vue')['default']

frontend/components.d.ts

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <nav
+    aria-label="breadcrumb"
+    data-slot="breadcrumb"
+    :class="props.class"
+  >
+    <slot />
+  </nav>
+</template>

frontend/src/components/ui/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { cn } from '@frontend/lib/utils'
+import { MoreHorizontal } from 'lucide-vue-next'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span
+    data-slot="breadcrumb-ellipsis"
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('flex size-9 items-center justify-center', props.class)"
+  >
+    <slot>
+      <MoreHorizontal class="size-4" />
+    </slot>
+    <span class="sr-only">More</span>
+  </span>
+</template>

frontend/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { cn } from '@frontend/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <li
+    data-slot="breadcrumb-item"
+    :class="cn('inline-flex items-center gap-1.5', props.class)"
+  >
+    <slot />
+  </li>
+</template>

frontend/src/components/ui/breadcrumb/BreadcrumbItem.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { cn } from '@frontend/lib/utils'
+import type { PrimitiveProps } from 'reka-ui'
+import { Primitive } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
+  as: 'a',
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="breadcrumb-link"
+    :as="as"
+    :as-child="asChild"
+    :class="cn('hover:text-foreground transition-colors', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

frontend/src/components/ui/breadcrumb/BreadcrumbLink.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { cn } from '@frontend/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <ol
+    data-slot="breadcrumb-list"
+    :class="cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', props.class)"
+  >
+    <slot />
+  </ol>
+</template>

frontend/src/components/ui/breadcrumb/BreadcrumbList.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import { cn } from '@frontend/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span
+    data-slot="breadcrumb-page"
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    :class="cn('text-foreground font-normal', props.class)"
+  >
+    <slot />
+  </span>
+</template>

frontend/src/components/ui/breadcrumb/BreadcrumbPage.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { cn } from '@frontend/lib/utils'
+import { ChevronRight } from 'lucide-vue-next'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <li
+    data-slot="breadcrumb-separator"
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('[&>svg]:size-3.5', props.class)"
+  >
+    <slot>
+      <ChevronRight />
+    </slot>
+  </li>
+</template>