@davidbirchall/core 1.0.6 → 1.0.8

package/src/components/Modal/Modal.test.ts

@@ -0,0 +1,99 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Modal from './Modal.vue'
+
+describe('Modal', () => {
+  beforeEach(() => {
+    // Create a div with id 'app' for Teleport target
+    const app = document.createElement('div')
+    app.id = 'app'
+    document.body.appendChild(app)
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('renders when modelValue is true', () => {
+    mount(Modal, {
+      props: {
+        modelValue: true,
+        title: 'Test Modal'
+      },
+      attachTo: document.body
+    })
+    expect(document.querySelector('.modal-overlay')).toBeTruthy()
+  })
+
+  it('does not render when modelValue is false', () => {
+    mount(Modal, {
+      props: {
+        modelValue: false
+      },
+      attachTo: document.body
+    })
+    expect(document.querySelector('.modal-overlay')).toBeFalsy()
+  })
+
+  it('displays title', () => {
+    mount(Modal, {
+      props: {
+        modelValue: true,
+        title: 'My Modal Title'
+      },
+      attachTo: document.body
+    })
+    expect(document.querySelector('.modal-title')?.textContent).toBe('My Modal Title')
+  })
+
+  it('renders slot content', () => {
+    mount(Modal, {
+      props: {
+        modelValue: true
+      },
+      slots: {
+        default: '<p>Modal content</p>'
+      },
+      attachTo: document.body
+    })
+    expect(document.querySelector('.modal-body')?.textContent).toContain('Modal content')
+  })
+
+  it('emits close event when close button is clicked', async () => {
+    const wrapper = mount(Modal, {
+      props: {
+        modelValue: true
+      },
+      attachTo: document.body
+    })
+
+    const closeButton = document.querySelector('.modal-close') as HTMLElement
+    closeButton.click()
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
+    expect(wrapper.emitted('close')).toBeTruthy()
+  })
+
+  it('applies size class correctly', () => {
+    mount(Modal, {
+      props: {
+        modelValue: true,
+        size: 'large'
+      },
+      attachTo: document.body
+    })
+    expect(document.querySelector('.modal-content--large')).toBeTruthy()
+  })
+
+  it('hides close button when closable is false', () => {
+    mount(Modal, {
+      props: {
+        modelValue: true,
+        closable: false
+      },
+      attachTo: document.body
+    })
+    expect(document.querySelector('.modal-close')).toBeFalsy()
+  })
+})

package/src/components/Modal/Modal.vue

@@ -0,0 +1,278 @@
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div
+        v-if="modelValue"
+        ref="overlayRef"
+        class="modal-overlay"
+        @pointerdown.self="handleOverlayPointerDown"
+      >
+        <div
+          class="modal-content"
+          :class="[`modal-content--${size}`]"
+          @click.stop
+          @pointerdown.stop="handleContentPointerDown"
+          @pointerup.stop
+        >
+          <div class="modal-header">
+            <slot name="header">
+              <h3 class="modal-title">{{ title }}</h3>
+            </slot>
+            <button
+              v-if="closable"
+              @click="close"
+              class="modal-close"
+              aria-label="Close modal"
+            >
+              ×
+            </button>
+          </div>
+
+          <div class="modal-body">
+            <slot />
+          </div>
+
+          <div v-if="$slots.footer" class="modal-footer">
+            <slot name="footer" />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, ref, watch } from 'vue'
+
+interface Props {
+  modelValue: boolean
+  title?: string
+  size?: 'small' | 'medium' | 'large'
+  closable?: boolean
+  closeOnOverlay?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+  size: 'medium',
+  closable: true,
+  closeOnOverlay: true
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  close: []
+}>()
+
+const close = () => {
+  emit('update:modelValue', false)
+  emit('close')
+}
+
+const overlayRef = ref<HTMLElement | null>(null)
+const pointerDownOnOverlay = ref(false)
+const draggedOnOverlay = ref(false)
+const startX = ref(0)
+const startY = ref(0)
+const activePointerId = ref<number | null>(null)
+const lastPointerDownTarget = ref<'overlay' | 'content' | null>(null)
+
+const handleWindowPointerMove = (event: PointerEvent) => {
+  if (!pointerDownOnOverlay.value) return
+  const deltaX = Math.abs(event.clientX - startX.value)
+  const deltaY = Math.abs(event.clientY - startY.value)
+  if (deltaX > 5 || deltaY > 5) {
+    draggedOnOverlay.value = true
+  }
+}
+
+const handleWindowPointerUp = (event: PointerEvent) => {
+  window.removeEventListener('pointermove', handleWindowPointerMove)
+  window.removeEventListener('pointerup', handleWindowPointerUp)
+
+  if (!pointerDownOnOverlay.value || lastPointerDownTarget.value !== 'overlay') {
+    pointerDownOnOverlay.value = false
+    draggedOnOverlay.value = false
+    lastPointerDownTarget.value = null
+    return
+  }
+  const overlayEl = overlayRef.value
+  const isOverlayTarget = overlayEl && event.target === overlayEl
+
+  if (props.closeOnOverlay && isOverlayTarget && !draggedOnOverlay.value) {
+    close()
+  }
+
+  if (overlayEl && activePointerId.value !== null && overlayEl.hasPointerCapture(activePointerId.value)) {
+    overlayEl.releasePointerCapture(activePointerId.value)
+  }
+  activePointerId.value = null
+
+  pointerDownOnOverlay.value = false
+  draggedOnOverlay.value = false
+  lastPointerDownTarget.value = null
+}
+
+const handleOverlayPointerDown = (event: PointerEvent) => {
+  if (!props.closeOnOverlay) return
+  if (event.target !== event.currentTarget) return
+
+  pointerDownOnOverlay.value = true
+  draggedOnOverlay.value = false
+  lastPointerDownTarget.value = 'overlay'
+  startX.value = event.clientX
+  startY.value = event.clientY
+
+  const overlayEl = overlayRef.value
+  if (overlayEl) {
+    activePointerId.value = event.pointerId
+    overlayEl.setPointerCapture(event.pointerId)
+  }
+
+  window.addEventListener('pointermove', handleWindowPointerMove)
+  window.addEventListener('pointerup', handleWindowPointerUp)
+}
+
+const handleContentPointerDown = () => {
+  lastPointerDownTarget.value = 'content'
+}
+
+onBeforeUnmount(() => {
+  window.removeEventListener('pointermove', handleWindowPointerMove)
+  window.removeEventListener('pointerup', handleWindowPointerUp)
+})
+
+// Lock body scroll when modal is open
+watch(() => props.modelValue, (isOpen) => {
+  if (isOpen) {
+    document.body.style.overflow = 'hidden'
+  } else {
+    document.body.style.overflow = ''
+  }
+})
+</script>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 1rem;
+  overflow-y: auto;
+}
+
+.modal-content {
+  background: white;
+  border-radius: 1rem;
+  width: 100%;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
+    0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+.modal-content--small {
+  max-width: 400px;
+}
+
+.modal-content--medium {
+  max-width: 600px;
+}
+
+.modal-content--large {
+  max-width: 900px;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem;
+  border-bottom: 2px solid #e5e7eb;
+  flex-shrink: 0;
+}
+
+.modal-title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.modal-close {
+  width: 2rem;
+  height: 2rem;
+  border: none;
+  background: #f3f4f6;
+  border-radius: 0.5rem;
+  font-size: 1.5rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  color: #6b7280;
+  transition: all 0.2s;
+  flex-shrink: 0;
+}
+
+.modal-close:hover {
+  background: #e5e7eb;
+  color: #374151;
+}
+
+.modal-body {
+  padding: 1.5rem;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.modal-footer {
+  padding: 1.5rem;
+  border-top: 2px solid #e5e7eb;
+  display: flex;
+  gap: 1rem;
+  justify-content: flex-end;
+  flex-shrink: 0;
+}
+
+/* Transitions */
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.modal-enter-active .modal-content,
+.modal-leave-active .modal-content {
+  transition: transform 0.3s ease;
+}
+
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-enter-from .modal-content,
+.modal-leave-to .modal-content {
+  transform: scale(0.95);
+}
+
+@media (max-width: 640px) {
+  .modal-content {
+    max-height: 100vh;
+    border-radius: 0;
+  }
+
+  .modal-overlay {
+    padding: 0;
+  }
+}
+</style>

package/src/components/ProgressBar/ProgressBar.stories.ts

@@ -0,0 +1,313 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref, onMounted } from 'vue'
+import ProgressBar from './ProgressBar.vue'
+
+const meta = {
+  title: 'Components/ProgressBar',
+  component: ProgressBar,
+  tags: ['autodocs'],
+  argTypes: {
+    percentage: {
+      control: { type: 'range', min: 0, max: 100, step: 1 },
+      description: 'Progress percentage (0-100)'
+    },
+    // label: {
+    //   control: 'text',
+    //   description: 'Progress bar label'
+    // },
+    showLabel: {
+      control: 'boolean',
+      description: 'Show label and percentage'
+    },
+    showPercentageInBar: {
+      control: 'boolean',
+      description: 'Show percentage inside the bar'
+    },
+    height: {
+      control: { type: 'range', min: 4, max: 40, step: 2 },
+      description: 'Progress bar height in pixels'
+    },
+    variant: {
+      control: 'select',
+      options: ['primary', 'success', 'warning', 'danger'],
+      description: 'Color variant'
+    },
+    animated: {
+      control: 'boolean',
+      description: 'Animated transition'
+    }
+  },
+  args: {
+    percentage: 50,
+    showLabel: true,
+    showPercentageInBar: false,
+    height: 12,
+    variant: 'primary',
+    animated: true
+  }
+} satisfies Meta<typeof ProgressBar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    percentage: 65,
+    label: 'Progress'
+  }
+}
+
+export const Success: Story = {
+  args: {
+    percentage: 100,
+    label: 'Completed',
+    variant: 'success'
+  }
+}
+
+export const Warning: Story = {
+  args: {
+    percentage: 45,
+    label: 'Warning',
+    variant: 'warning'
+  }
+}
+
+export const Danger: Story = {
+  args: {
+    percentage: 20,
+    label: 'Critical',
+    variant: 'danger'
+  }
+}
+
+export const WithPercentageInBar: Story = {
+  args: {
+    percentage: 75,
+    label: 'Upload Progress',
+    showPercentageInBar: true,
+    height: 24
+  }
+}
+
+export const Thin: Story = {
+  args: {
+    percentage: 60,
+    label: 'Thin Progress Bar',
+    height: 4
+  }
+}
+
+export const Thick: Story = {
+  args: {
+    percentage: 80,
+    label: 'Thick Progress Bar',
+    height: 32,
+    showPercentageInBar: true
+  }
+}
+
+export const NoLabel: Story = {
+  args: {
+    percentage: 55,
+    showLabel: false
+  }
+}
+
+export const NotAnimated: Story = {
+  args: {
+    percentage: 70,
+    label: 'Static Progress',
+    animated: false
+  }
+}
+
+export const Animated: Story = {
+  render: () => ({
+    components: { ProgressBar },
+    setup() {
+      const progress = ref(0)
+      
+      onMounted(() => {
+        const interval = setInterval(() => {
+          if (progress.value >= 100) {
+            progress.value = 0
+          } else {
+            progress.value += 1
+          }
+        }, 50)
+        
+        return () => clearInterval(interval)
+      })
+
+      return { progress }
+    },
+    template: `
+      <ProgressBar 
+        :percentage="progress" 
+        label="Loading..."
+        variant="primary"
+      />
+    `
+  })
+}
+
+export const MultipleSteps: Story = {
+  render: () => ({
+    components: { ProgressBar },
+    setup() {
+      const steps = [
+        { label: 'Step 1: Information', percentage: 100, variant: 'success' },
+        { label: 'Step 2: Verification', percentage: 100, variant: 'success' },
+        { label: 'Step 3: Payment', percentage: 60, variant: 'primary' },
+        { label: 'Step 4: Confirmation', percentage: 0, variant: 'primary' }
+      ]
+      
+      return { steps }
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 1.5rem;">
+        <ProgressBar 
+          v-for="(step, index) in steps"
+          :key="index"
+          :label="step.label"
+          :percentage="step.percentage"
+          :variant="step.variant"
+        />
+      </div>
+    `
+  })
+}
+
+export const FileUpload: Story = {
+  render: () => ({
+    components: { ProgressBar },
+    setup() {
+      const uploads = ref([
+        { name: 'document.pdf', progress: 100, variant: 'success' },
+        { name: 'presentation.pptx', progress: 75, variant: 'primary' },
+        { name: 'spreadsheet.xlsx', progress: 45, variant: 'primary' },
+        { name: 'image.png', progress: 15, variant: 'warning' }
+      ])
+      
+      return { uploads }
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 1rem;">
+        <ProgressBar 
+          v-for="(file, index) in uploads"
+          :key="index"
+          :label="file.name"
+          :percentage="file.progress"
+          :variant="file.variant"
+          height="8"
+        />
+      </div>
+    `
+  })
+}
+
+export const AllVariants: Story = {
+  render: () => ({
+    components: { ProgressBar },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 1.5rem;">
+        <ProgressBar 
+          label="Primary" 
+          :percentage="75"
+          variant="primary"
+        />
+        <ProgressBar 
+          label="Success" 
+          :percentage="100"
+          variant="success"
+        />
+        <ProgressBar 
+          label="Warning" 
+          :percentage="50"
+          variant="warning"
+        />
+        <ProgressBar 
+          label="Danger" 
+          :percentage="25"
+          variant="danger"
+        />
+      </div>
+    `
+  })
+}
+
+export const AllSizes: Story = {
+  render: () => ({
+    components: { ProgressBar },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 1.5rem;">
+        <ProgressBar 
+          label="Thin (4px)" 
+          :percentage="70"
+          :height="4"
+        />
+        <ProgressBar 
+          label="Small (8px)" 
+          :percentage="70"
+          :height="8"
+        />
+        <ProgressBar 
+          label="Medium (12px)" 
+          :percentage="70"
+          :height="12"
+        />
+        <ProgressBar 
+          label="Large (20px)" 
+          :percentage="70"
+          :height="20"
+          show-percentage-in-bar
+        />
+        <ProgressBar 
+          label="Extra Large (32px)" 
+          :percentage="70"
+          :height="32"
+          show-percentage-in-bar
+        />
+      </div>
+    `
+  })
+}
+
+export const TaskCompletion: Story = {
+  render: () => ({
+    components: { ProgressBar },
+    setup() {
+      const completedTasks = ref(7)
+      const totalTasks = ref(10)
+      const percentage = ref((completedTasks.value / totalTasks.value) * 100)
+      
+      return { completedTasks, totalTasks, percentage }
+    },
+    template: `
+      <div>
+        <h3 style="margin-bottom: 1rem;">Task Completion</h3>
+        <ProgressBar 
+          :label="\`Tasks Completed: \${completedTasks}/\${totalTasks}\`"
+          :percentage="percentage"
+          variant="success"
+          height="16"
+        />
+        <div style="margin-top: 1rem; display: flex; gap: 0.5rem;">
+          <button 
+            @click="completedTasks = Math.min(completedTasks + 1, totalTasks); percentage = (completedTasks / totalTasks) * 100"
+            style="padding: 0.5rem 1rem; background: #10b981; color: white; border: none; border-radius: 0.375rem; cursor: pointer;"
+          >
+            Complete Task
+          </button>
+          <button 
+            @click="completedTasks = Math.max(completedTasks - 1, 0); percentage = (completedTasks / totalTasks) * 100"
+            style="padding: 0.5rem 1rem; background: #6b7280; color: white; border: none; border-radius: 0.375rem; cursor: pointer;"
+          >
+            Undo
+          </button>
+        </div>
+      </div>
+    `
+  })
+}