@sabrenski/spire-ui 0.0.1

package/src/components/Sidebar/Sidebar.test.ts

@@ -0,0 +1,301 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { h, nextTick } from 'vue'
+import SidebarLayout from './SidebarLayout.vue'
+import SidebarRoot from './SidebarRoot.vue'
+import SidebarItem from './SidebarItem.vue'
+import SidebarGroup from './SidebarGroup.vue'
+
+function createSidebar(props: Record<string, unknown> = {}) {
+  return mount(SidebarRoot, {
+    props,
+    slots: {
+      default: () => [
+        h(SidebarGroup, { label: 'Navigation' }, {
+          default: () => [
+            h(SidebarItem, { label: 'Home', active: true }),
+            h(SidebarItem, { label: 'Dashboard' }),
+            h(SidebarItem, { label: 'Settings', disabled: true })
+          ]
+        }),
+        h(SidebarGroup, { label: 'Other' }, {
+          default: () => [
+            h(SidebarItem, { label: 'Help' })
+          ]
+        })
+      ],
+      header: () => h('div', { class: 'logo' }, 'Logo'),
+      footer: () => h('div', { class: 'user' }, 'User')
+    }
+  })
+}
+
+function createSidebarItem(props: Record<string, unknown> = {}) {
+  return mount(SidebarRoot, {
+    props: {},
+    slots: {
+      default: () => h(SidebarItem, { label: 'Test Item', ...props })
+    }
+  })
+}
+
+describe('Sidebar', () => {
+  describe('SidebarRoot', () => {
+    describe('Rendering', () => {
+      it('renders sidebar root element', () => {
+        const wrapper = createSidebar()
+        expect(wrapper.find('.ui-sidebar').exists()).toBe(true)
+      })
+
+      it('renders header slot', () => {
+        const wrapper = createSidebar()
+        expect(wrapper.find('.ui-sidebar__header').exists()).toBe(true)
+        expect(wrapper.find('.logo').exists()).toBe(true)
+      })
+
+      it('renders footer slot', () => {
+        const wrapper = createSidebar()
+        expect(wrapper.find('.ui-sidebar__footer').exists()).toBe(true)
+        expect(wrapper.find('.user').exists()).toBe(true)
+      })
+
+      it('renders navigation area', () => {
+        const wrapper = createSidebar()
+        expect(wrapper.find('.ui-sidebar__nav').exists()).toBe(true)
+      })
+    })
+
+    describe('Collapsed state', () => {
+      it('starts expanded by default', () => {
+        const wrapper = createSidebar()
+        expect(wrapper.find('.ui-sidebar--collapsed').exists()).toBe(false)
+      })
+
+      it('applies collapsed class when modelValue is true', () => {
+        const wrapper = createSidebar({ modelValue: true })
+        expect(wrapper.find('.ui-sidebar--collapsed').exists()).toBe(true)
+      })
+
+      it('sets CSS variable for width', () => {
+        const wrapper = createSidebar({ expandedWidth: '280px' })
+        const style = wrapper.find('.ui-sidebar').attributes('style')
+        expect(style).toContain('--sidebar-current-width: 280px')
+      })
+
+      it('uses collapsed width when collapsed', () => {
+        const wrapper = createSidebar({ modelValue: true, collapsedWidth: '72px' })
+        const style = wrapper.find('.ui-sidebar').attributes('style')
+        expect(style).toContain('--sidebar-current-width: 72px')
+      })
+
+      it('emits update:modelValue on toggle', async () => {
+        const wrapper = createSidebar({ modelValue: false })
+        const vm = wrapper.vm as { toggle: () => void }
+        vm.toggle()
+        await nextTick()
+        expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([true])
+      })
+    })
+
+    describe('Accessibility', () => {
+      it('has role="navigation"', () => {
+        const wrapper = createSidebar()
+        expect(wrapper.find('.ui-sidebar').attributes('role')).toBe('navigation')
+      })
+
+      it('uses aside element', () => {
+        const wrapper = createSidebar()
+        expect(wrapper.find('.ui-sidebar').element.tagName).toBe('ASIDE')
+      })
+    })
+  })
+
+  describe('SidebarItem', () => {
+    describe('Rendering', () => {
+      it('renders item with label', () => {
+        const wrapper = createSidebarItem()
+        expect(wrapper.find('.ui-sidebar-item__label').text()).toBe('Test Item')
+      })
+
+      it('renders as button by default', () => {
+        const wrapper = createSidebarItem()
+        expect(wrapper.find('.ui-sidebar-item').element.tagName).toBe('BUTTON')
+      })
+
+      it('renders as anchor when href is provided', () => {
+        const wrapper = createSidebarItem({ as: 'a', href: '/test' })
+        const item = wrapper.find('.ui-sidebar-item')
+        expect(item.element.tagName).toBe('A')
+        expect(item.attributes('href')).toBe('/test')
+      })
+    })
+
+    describe('States', () => {
+      it('applies active class', () => {
+        const wrapper = createSidebarItem({ active: true })
+        expect(wrapper.find('.ui-sidebar-item--active').exists()).toBe(true)
+      })
+
+      it('applies disabled class', () => {
+        const wrapper = createSidebarItem({ disabled: true })
+        expect(wrapper.find('.ui-sidebar-item--disabled').exists()).toBe(true)
+      })
+    })
+
+    describe('Collapsed behavior', () => {
+      it('applies collapsed class when sidebar is collapsed', () => {
+        const wrapper = mount(SidebarRoot, {
+          props: { modelValue: true },
+          slots: {
+            default: () => h(SidebarItem, { label: 'Test' })
+          }
+        })
+        expect(wrapper.find('.ui-sidebar-item--collapsed').exists()).toBe(true)
+      })
+
+      it('has aria-label when collapsed', () => {
+        const wrapper = mount(SidebarRoot, {
+          props: { modelValue: true },
+          slots: {
+            default: () => h(SidebarItem, { label: 'Test Label' })
+          }
+        })
+        expect(wrapper.find('.ui-sidebar-item').attributes('aria-label')).toBe('Test Label')
+      })
+    })
+
+    describe('Accessibility', () => {
+      it('has aria-current="page" when active', () => {
+        const wrapper = createSidebarItem({ active: true })
+        expect(wrapper.find('.ui-sidebar-item').attributes('aria-current')).toBe('page')
+      })
+
+      it('does not have aria-current when not active', () => {
+        const wrapper = createSidebarItem({ active: false })
+        expect(wrapper.find('.ui-sidebar-item').attributes('aria-current')).toBeUndefined()
+      })
+    })
+  })
+
+  describe('SidebarGroup', () => {
+    describe('Rendering', () => {
+      it('renders group label', () => {
+        const wrapper = createSidebar()
+        expect(wrapper.find('.ui-sidebar-group__label').text()).toBe('Navigation')
+      })
+
+      it('renders items inside group', () => {
+        const wrapper = createSidebar()
+        const group = wrapper.find('.ui-sidebar-group')
+        expect(group.findAll('.ui-sidebar-item')).toHaveLength(3)
+      })
+    })
+
+    describe('Collapsed behavior', () => {
+      it('applies collapsed class when sidebar is collapsed', () => {
+        const wrapper = createSidebar({ modelValue: true })
+        expect(wrapper.find('.ui-sidebar-group--collapsed').exists()).toBe(true)
+      })
+
+      it('shows separator when collapsed', () => {
+        const wrapper = createSidebar({ modelValue: true })
+        const groups = wrapper.findAll('.ui-sidebar-group')
+        expect(groups[1].classes()).toContain('ui-sidebar-group--separator')
+      })
+    })
+
+    describe('Accessibility', () => {
+      it('group content has role="group"', () => {
+        const wrapper = createSidebar()
+        expect(wrapper.find('.ui-sidebar-group__content').attributes('role')).toBe('group')
+      })
+
+      it('group content has aria-labelledby when label exists', () => {
+        const wrapper = createSidebar()
+        const label = wrapper.find('.ui-sidebar-group__label')
+        const content = wrapper.find('.ui-sidebar-group__content')
+        expect(content.attributes('aria-labelledby')).toBe(label.attributes('id'))
+      })
+    })
+  })
+
+  describe('Error handling', () => {
+    it('throws error when SidebarItem is used outside SidebarRoot', () => {
+      expect(() => {
+        mount(SidebarItem, { props: { label: 'Test' } })
+      }).toThrow('SidebarItem must be used within SidebarRoot')
+    })
+
+    it('throws error when SidebarGroup is used outside SidebarRoot', () => {
+      expect(() => {
+        mount(SidebarGroup, { props: { label: 'Test' } })
+      }).toThrow('SidebarGroup must be used within SidebarRoot')
+    })
+  })
+
+  describe('SidebarLayout', () => {
+    describe('Rendering', () => {
+      it('renders layout container', () => {
+        const wrapper = mount(SidebarLayout)
+        expect(wrapper.find('.ui-sidebar-layout').exists()).toBe(true)
+      })
+
+      it('renders main content area', () => {
+        const wrapper = mount(SidebarLayout, {
+          slots: {
+            default: () => h('div', { class: 'content' }, 'Main content')
+          }
+        })
+        expect(wrapper.find('.ui-sidebar-layout__main').exists()).toBe(true)
+        expect(wrapper.find('.content').exists()).toBe(true)
+      })
+
+      it('renders sidebar slot', () => {
+        const wrapper = mount(SidebarLayout, {
+          slots: {
+            sidebar: () => h('div', { class: 'sidebar' }, 'Sidebar')
+          }
+        })
+        expect(wrapper.find('.sidebar').exists()).toBe(true)
+      })
+
+      it('renders both sidebar and main content', () => {
+        const wrapper = mount(SidebarLayout, {
+          slots: {
+            sidebar: () => h('div', { class: 'sidebar' }, 'Sidebar'),
+            default: () => h('div', { class: 'content' }, 'Content')
+          }
+        })
+        expect(wrapper.find('.sidebar').exists()).toBe(true)
+        expect(wrapper.find('.content').exists()).toBe(true)
+      })
+    })
+
+    describe('Position', () => {
+      it('defaults to left position', () => {
+        const wrapper = mount(SidebarLayout)
+        expect(wrapper.find('.ui-sidebar-layout--left').exists()).toBe(true)
+      })
+
+      it('applies right position class', () => {
+        const wrapper = mount(SidebarLayout, {
+          props: { sidebarPosition: 'right' }
+        })
+        expect(wrapper.find('.ui-sidebar-layout--right').exists()).toBe(true)
+      })
+    })
+
+    describe('Layout structure', () => {
+      it('uses flexbox layout', () => {
+        const wrapper = mount(SidebarLayout)
+        const layout = wrapper.find('.ui-sidebar-layout')
+        expect(layout.element.tagName).toBe('DIV')
+      })
+
+      it('main content uses main element', () => {
+        const wrapper = mount(SidebarLayout)
+        expect(wrapper.find('.ui-sidebar-layout__main').element.tagName).toBe('MAIN')
+      })
+    })
+  })
+})

package/src/components/Sidebar/SidebarGroup.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { computed, inject, provide } from 'vue'
+import { useId } from '../../composables'
+import { SidebarKey, SidebarGroupKey } from './keys'
+
+export interface SidebarGroupProps {
+  /** Group label displayed when expanded */
+  label?: string
+  /** Show separator line when collapsed */
+  showSeparator?: boolean
+}
+
+const props = withDefaults(defineProps<SidebarGroupProps>(), {
+  showSeparator: true
+})
+
+const sidebar = inject(SidebarKey)
+
+if (!sidebar) {
+  throw new Error('SidebarGroup must be used within SidebarRoot')
+}
+
+const groupId = useId('sidebar-group')
+const isCollapsed = computed(() => sidebar.collapsed.value)
+
+provide(SidebarGroupKey, { groupId })
+
+const groupClasses = computed(() => [
+  'ui-sidebar-group',
+  {
+    'ui-sidebar-group--collapsed': isCollapsed.value,
+    'ui-sidebar-group--separator': props.showSeparator && isCollapsed.value
+  }
+])
+</script>
+
+<template>
+  <div :class="groupClasses">
+    <div
+      v-if="label"
+      class="ui-sidebar-group__label"
+      :id="groupId"
+    >
+      {{ label }}
+    </div>
+    <div
+      class="ui-sidebar-group__content"
+      :aria-labelledby="label ? groupId : undefined"
+      role="group"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ui-sidebar-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.ui-sidebar-group + .ui-sidebar-group {
+  margin-top: var(--space-2);
+}
+
+.ui-sidebar-group__label {
+  padding: var(--space-2) var(--space-3);
+  font-family: var(--font-sans);
+  font-size: var(--text-xs);
+  font-weight: var(--font-semibold);
+  color: var(--sidebar-group-label, var(--text-tertiary));
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  transition:
+    opacity var(--duration-fast) var(--ease-default),
+    height var(--duration-fast) var(--ease-default);
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.ui-sidebar-group--collapsed .ui-sidebar-group__label {
+  opacity: 0;
+  height: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.ui-sidebar-group__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.ui-sidebar-group--separator {
+  padding-top: var(--space-2);
+  border-top: 1px solid var(--sidebar-border, var(--border-default));
+}
+
+.ui-sidebar-group--separator:first-child {
+  border-top: none;
+  padding-top: 0;
+}
+</style>

package/src/components/Sidebar/SidebarItem.vue

@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import { computed, inject, type Component } from 'vue'
+import { SidebarKey } from './keys'
+import Icon from '../Icon/Icon.vue'
+import Tooltip from '../Tooltip/Tooltip.vue'
+
+type HugeIconData = [string, Record<string, unknown>][]
+type IconInput = Component | HugeIconData
+
+export interface SidebarItemProps {
+  /** Text label for the item */
+  label: string
+  /** Icon component or HugeIcons data */
+  icon?: IconInput
+  /** Whether this item is currently active */
+  active?: boolean
+  /** Disable this item */
+  disabled?: boolean
+  /** Render as a different element (button, a, RouterLink) */
+  as?: string | Component
+  /** href for anchor elements */
+  href?: string
+  /** Target for anchor elements */
+  target?: string
+  /** Route object for router-link */
+  to?: string | Record<string, unknown>
+}
+
+const props = withDefaults(defineProps<SidebarItemProps>(), {
+  active: false,
+  disabled: false,
+  as: 'button'
+})
+
+const sidebar = inject(SidebarKey)
+
+if (!sidebar) {
+  throw new Error('SidebarItem must be used within SidebarRoot')
+}
+
+const isCollapsed = computed(() => sidebar.collapsed.value)
+
+const itemClasses = computed(() => [
+  'ui-sidebar-item',
+  {
+    'ui-sidebar-item--active': props.active,
+    'ui-sidebar-item--disabled': props.disabled,
+    'ui-sidebar-item--collapsed': isCollapsed.value
+  }
+])
+
+const componentProps = computed(() => {
+  const base: Record<string, unknown> = {
+    class: itemClasses.value,
+    disabled: props.disabled || undefined,
+    'aria-current': props.active ? 'page' : undefined,
+    'aria-label': isCollapsed.value ? props.label : undefined
+  }
+
+  if (props.href) {
+    base.href = props.disabled ? undefined : props.href
+    base.target = props.target
+  }
+
+  if (props.to) {
+    base.to = props.disabled ? undefined : props.to
+  }
+
+  return base
+})
+</script>
+
+<template>
+  <Tooltip
+    :text="label"
+    :disabled="!isCollapsed"
+    placement="right"
+  >
+    <component
+      :is="as"
+      v-bind="componentProps"
+    >
+      <span v-if="icon" class="ui-sidebar-item__icon" aria-hidden="true">
+        <Icon :icon="icon" size="md" />
+      </span>
+      <span class="ui-sidebar-item__label">
+        {{ label }}
+      </span>
+      <span v-if="$slots.badge" class="ui-sidebar-item__badge">
+        <slot name="badge" />
+      </span>
+    </component>
+  </Tooltip>
+</template>
+
+<style scoped>
+.ui-sidebar-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  width: 100%;
+  padding: var(--space-2) var(--space-3);
+  border: none;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--sidebar-item-text, var(--text-secondary));
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  line-height: var(--leading-normal);
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    background-color var(--duration-fast) var(--ease-default),
+    color var(--duration-fast) var(--ease-default);
+}
+
+.ui-sidebar-item:hover:not(.ui-sidebar-item--disabled) {
+  background: var(--sidebar-item-bg-hover, var(--action-secondary));
+  color: var(--sidebar-item-text-hover, var(--text-primary));
+}
+
+.ui-sidebar-item:active:not(.ui-sidebar-item--disabled) {
+  background: var(--sidebar-item-bg-active, var(--action-secondary-hover));
+}
+
+.ui-sidebar-item:focus-visible {
+  outline: 2px solid var(--ring-color);
+  outline-offset: -2px;
+}
+
+.ui-sidebar-item--active {
+  background: var(--sidebar-item-bg-active, var(--action-secondary));
+  color: var(--sidebar-item-text-active, var(--action-primary));
+}
+
+.ui-sidebar-item--active:hover:not(.ui-sidebar-item--disabled) {
+  background: var(--sidebar-item-bg-active-hover, var(--action-secondary-hover));
+}
+
+.ui-sidebar-item--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ui-sidebar-item__icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ui-sidebar-item__label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: opacity var(--duration-fast) var(--ease-default);
+}
+
+.ui-sidebar-item--collapsed .ui-sidebar-item__label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.ui-sidebar-item__badge {
+  flex-shrink: 0;
+  transition: opacity var(--duration-fast) var(--ease-default);
+}
+
+.ui-sidebar-item--collapsed .ui-sidebar-item__badge {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.ui-sidebar-item--collapsed {
+  justify-content: center;
+  padding: var(--space-2);
+  gap: 0;
+}
+</style>

package/src/components/Sidebar/SidebarLayout.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+export interface SidebarLayoutProps {
+  /** Position of the sidebar */
+  sidebarPosition?: 'left' | 'right'
+}
+
+const props = withDefaults(defineProps<SidebarLayoutProps>(), {
+  sidebarPosition: 'left'
+})
+</script>
+
+<template>
+  <div
+    class="ui-sidebar-layout"
+    :class="[`ui-sidebar-layout--${sidebarPosition}`]"
+  >
+    <slot name="sidebar" />
+    <main class="ui-sidebar-layout__main">
+      <slot />
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.ui-sidebar-layout {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.ui-sidebar-layout--right {
+  flex-direction: row-reverse;
+}
+
+.ui-sidebar-layout__main {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+</style>