@sabrenski/spire-ui 0.0.1

package/src/components/Sidebar/SidebarRoot.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { computed, provide, toRef, ref, watch } from 'vue'
+import { SidebarKey } from './keys'
+
+export interface SidebarRootProps {
+  /** Whether the sidebar is collapsed */
+  modelValue?: boolean
+  /** Width when expanded */
+  expandedWidth?: string
+  /** Width when collapsed */
+  collapsedWidth?: string
+}
+
+const props = withDefaults(defineProps<SidebarRootProps>(), {
+  modelValue: false,
+  expandedWidth: '240px',
+  collapsedWidth: '64px'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+const internalCollapsed = ref(props.modelValue)
+
+watch(() => props.modelValue, (newValue) => {
+  internalCollapsed.value = newValue
+})
+
+const isControlled = computed(() => props.modelValue !== undefined)
+
+const collapsed = computed(() =>
+  isControlled.value ? props.modelValue : internalCollapsed.value
+)
+
+const currentWidth = computed(() =>
+  collapsed.value ? props.collapsedWidth : props.expandedWidth
+)
+
+function toggle() {
+  const newValue = !collapsed.value
+  internalCollapsed.value = newValue
+  emit('update:modelValue', newValue)
+}
+
+provide(SidebarKey, {
+  collapsed,
+  expandedWidth: toRef(props, 'expandedWidth'),
+  collapsedWidth: toRef(props, 'collapsedWidth')
+})
+
+defineExpose({ toggle, collapsed })
+</script>
+
+<template>
+  <aside
+    class="ui-sidebar"
+    :class="{ 'ui-sidebar--collapsed': collapsed }"
+    :style="{ '--sidebar-current-width': currentWidth }"
+    role="navigation"
+  >
+    <div v-if="$slots.header" class="ui-sidebar__header">
+      <slot name="header" />
+    </div>
+
+    <nav class="ui-sidebar__nav">
+      <slot />
+    </nav>
+
+    <div v-if="$slots.footer" class="ui-sidebar__footer">
+      <slot name="footer" />
+    </div>
+  </aside>
+</template>
+
+<style scoped>
+.ui-sidebar {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  width: var(--sidebar-current-width);
+  height: 100%;
+  background: var(--sidebar-bg, var(--bg-primary));
+  border-right: 1px solid var(--sidebar-border, var(--border-default));
+  transition: width var(--duration-normal) var(--ease-out-expo);
+  overflow: hidden;
+}
+
+.ui-sidebar__header {
+  flex-shrink: 0;
+  padding: var(--space-4);
+  border-bottom: 1px solid var(--sidebar-border, var(--border-default));
+}
+
+.ui-sidebar__nav {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: var(--space-2);
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-default) transparent;
+}
+
+.ui-sidebar__nav::-webkit-scrollbar {
+  width: 4px;
+}
+
+.ui-sidebar__nav::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.ui-sidebar__nav::-webkit-scrollbar-thumb {
+  background: var(--border-default);
+  border-radius: var(--radius-full);
+}
+
+.ui-sidebar__footer {
+  flex-shrink: 0;
+  padding: var(--space-4);
+  border-top: 1px solid var(--sidebar-border, var(--border-default));
+}
+</style>

package/src/components/Sidebar/index.ts

@@ -0,0 +1,11 @@
+export { default as SidebarLayout } from './SidebarLayout.vue'
+export { default as SidebarRoot } from './SidebarRoot.vue'
+export { default as SidebarItem } from './SidebarItem.vue'
+export { default as SidebarGroup } from './SidebarGroup.vue'
+
+export type { SidebarLayoutProps } from './SidebarLayout.vue'
+export type { SidebarRootProps } from './SidebarRoot.vue'
+export type { SidebarItemProps } from './SidebarItem.vue'
+export type { SidebarGroupProps } from './SidebarGroup.vue'
+export type { SidebarContext, SidebarGroupContext } from './keys'
+export { SidebarKey, SidebarGroupKey } from './keys'

package/src/components/Sidebar/keys.ts

@@ -0,0 +1,14 @@
+import type { InjectionKey, Ref, ComputedRef } from 'vue'
+
+export interface SidebarContext {
+  collapsed: ComputedRef<boolean>
+  expandedWidth: Ref<string>
+  collapsedWidth: Ref<string>
+}
+
+export interface SidebarGroupContext {
+  groupId: string
+}
+
+export const SidebarKey: InjectionKey<SidebarContext> = Symbol('sidebar')
+export const SidebarGroupKey: InjectionKey<SidebarGroupContext> = Symbol('sidebar-group')

package/src/components/Skeleton/Skeleton.test.ts

@@ -0,0 +1,130 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Skeleton from './Skeleton.vue'
+
+describe('Skeleton', () => {
+  describe('Rendering', () => {
+    it('renders with default props', () => {
+      const wrapper = mount(Skeleton)
+      expect(wrapper.find('.ui-skeleton').exists()).toBe(true)
+      expect(wrapper.find('.ui-skeleton--text').exists()).toBe(true)
+      expect(wrapper.find('.ui-skeleton--shimmer').exists()).toBe(true)
+    })
+
+    it('has aria-hidden attribute for accessibility', () => {
+      const wrapper = mount(Skeleton)
+      expect(wrapper.attributes('aria-hidden')).toBe('true')
+    })
+
+    it('renders as span element', () => {
+      const wrapper = mount(Skeleton)
+      expect(wrapper.element.tagName.toLowerCase()).toBe('span')
+    })
+  })
+
+  describe('Variants', () => {
+    it('applies text variant by default', () => {
+      const wrapper = mount(Skeleton)
+      expect(wrapper.find('.ui-skeleton--text').exists()).toBe(true)
+    })
+
+    it('applies circle variant', () => {
+      const wrapper = mount(Skeleton, {
+        props: { variant: 'circle' }
+      })
+      expect(wrapper.find('.ui-skeleton--circle').exists()).toBe(true)
+    })
+
+    it('applies rect variant', () => {
+      const wrapper = mount(Skeleton, {
+        props: { variant: 'rect' }
+      })
+      expect(wrapper.find('.ui-skeleton--rect').exists()).toBe(true)
+    })
+  })
+
+  describe('Animation', () => {
+    it('applies shimmer animation by default', () => {
+      const wrapper = mount(Skeleton)
+      expect(wrapper.find('.ui-skeleton--shimmer').exists()).toBe(true)
+    })
+
+    it('applies pulse animation', () => {
+      const wrapper = mount(Skeleton, {
+        props: { animation: 'pulse' }
+      })
+      expect(wrapper.find('.ui-skeleton--pulse').exists()).toBe(true)
+    })
+
+    it('applies no animation when set to none', () => {
+      const wrapper = mount(Skeleton, {
+        props: { animation: 'none' }
+      })
+      expect(wrapper.find('.ui-skeleton--none').exists()).toBe(true)
+    })
+  })
+
+  describe('Dimensions', () => {
+    it('applies numeric width as pixels', () => {
+      const wrapper = mount(Skeleton, {
+        props: { width: 100 }
+      })
+      expect(wrapper.attributes('style')).toContain('width: 100px')
+    })
+
+    it('applies string width directly', () => {
+      const wrapper = mount(Skeleton, {
+        props: { width: '50%' }
+      })
+      expect(wrapper.attributes('style')).toContain('width: 50%')
+    })
+
+    it('applies numeric height as pixels', () => {
+      const wrapper = mount(Skeleton, {
+        props: { height: 20 }
+      })
+      expect(wrapper.attributes('style')).toContain('height: 20px')
+    })
+
+    it('applies string height directly', () => {
+      const wrapper = mount(Skeleton, {
+        props: { height: '2rem' }
+      })
+      expect(wrapper.attributes('style')).toContain('height: 2rem')
+    })
+
+    it('applies both width and height', () => {
+      const wrapper = mount(Skeleton, {
+        props: { width: 200, height: 50 }
+      })
+      const style = wrapper.attributes('style')
+      expect(style).toContain('width: 200px')
+      expect(style).toContain('height: 50px')
+    })
+
+    it('does not apply undefined dimensions', () => {
+      const wrapper = mount(Skeleton)
+      const style = wrapper.attributes('style') || ''
+      expect(style).not.toContain('width')
+      expect(style).not.toContain('height')
+    })
+  })
+
+  describe('Combined Props', () => {
+    it('applies all props correctly', () => {
+      const wrapper = mount(Skeleton, {
+        props: {
+          variant: 'circle',
+          animation: 'pulse',
+          width: 48,
+          height: 48
+        }
+      })
+
+      expect(wrapper.find('.ui-skeleton--circle').exists()).toBe(true)
+      expect(wrapper.find('.ui-skeleton--pulse').exists()).toBe(true)
+      expect(wrapper.attributes('style')).toContain('width: 48px')
+      expect(wrapper.attributes('style')).toContain('height: 48px')
+    })
+  })
+})

package/src/components/Skeleton/Skeleton.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+export type SkeletonVariant = 'text' | 'circle' | 'rect'
+
+export interface SkeletonProps {
+  /** Shape variant */
+  variant?: SkeletonVariant
+  /** Width (px, %, or CSS value) */
+  width?: string | number
+  /** Height (px or CSS value) */
+  height?: string | number
+  /** Animation style */
+  animation?: 'shimmer' | 'pulse' | 'none'
+}
+
+const props = withDefaults(defineProps<SkeletonProps>(), {
+  variant: 'text',
+  animation: 'shimmer'
+})
+
+const normalizeSize = (value: string | number | undefined): string | undefined => {
+  if (value === undefined) return undefined
+  if (typeof value === 'number') return `${value}px`
+  if (/^\d+(\.\d+)?$/.test(value)) return `${value}px`
+  return value
+}
+
+const style = computed(() => ({
+  width: normalizeSize(props.width),
+  height: normalizeSize(props.height)
+}))
+</script>
+
+<template>
+  <span
+    class="ui-skeleton"
+    :class="[
+      `ui-skeleton--${variant}`,
+      `ui-skeleton--${animation}`
+    ]"
+    :style="style"
+    aria-hidden="true"
+  />
+</template>
+
+<style scoped>
+.ui-skeleton {
+  display: block;
+  background-color: var(--skeleton-base);
+  border-radius: var(--radius-sm);
+}
+
+.ui-skeleton--text {
+  height: 1em;
+  border-radius: var(--radius-sm);
+}
+
+.ui-skeleton--circle {
+  border-radius: 50%;
+  aspect-ratio: 1;
+}
+
+.ui-skeleton--rect {
+  border-radius: var(--radius-md);
+}
+
+.ui-skeleton--shimmer {
+  background: linear-gradient(
+    90deg,
+    var(--skeleton-base) 0%,
+    var(--skeleton-highlight) 50%,
+    var(--skeleton-base) 100%
+  );
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.5s ease-in-out infinite;
+}
+
+.ui-skeleton--pulse {
+  animation: skeleton-pulse 1.5s ease-in-out infinite;
+}
+
+.ui-skeleton--none {
+  animation: none;
+}
+
+@keyframes skeleton-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@keyframes skeleton-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+</style>

package/src/components/Skeleton/index.ts

@@ -0,0 +1,2 @@
+export { default as Skeleton } from './Skeleton.vue'
+export type { SkeletonProps, SkeletonVariant } from './Skeleton.vue'