@davidbirchall/core 1.0.8 → 1.0.9

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

@@ -1,99 +0,0 @@
-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

@@ -1,278 +0,0 @@
-<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

@@ -1,313 +0,0 @@
-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>
-    `
-  })
-}