@davidbirchall/core 1.0.8 → 1.0.9

package/src/components/Input/Input.test.ts

@@ -1,213 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { render, screen } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import Input from './Input.vue'
-
-describe('Input', () => {
-  describe('rendering', () => {
-    it('renders with label', () => {
-      render(Input, {
-        props: {
-          label: 'Email'
-        }
-      })
-
-      expect(screen.getByText('Email')).toBeInTheDocument()
-    })
-
-    it('renders without label', () => {
-      const { container } = render(Input)
-      
-      expect(container.querySelector('.input-label')).not.toBeInTheDocument()
-    })
-
-    it('renders placeholder', () => {
-      render(Input, {
-        props: {
-          placeholder: 'Enter text'
-        }
-      })
-
-      expect(screen.getByPlaceholderText('Enter text')).toBeInTheDocument()
-    })
-
-    it('renders error message', () => {
-      render(Input, {
-        props: {
-          error: 'This field is required'
-        }
-      })
-
-      expect(screen.getByText('This field is required')).toBeInTheDocument()
-    })
-
-    it('renders hint text', () => {
-      render(Input, {
-        props: {
-          hint: 'Must be at least 8 characters'
-        }
-      })
-
-      expect(screen.getByText('Must be at least 8 characters')).toBeInTheDocument()
-    })
-
-    it('does not show hint when error is present', () => {
-      render(Input, {
-        props: {
-          hint: 'Helper text',
-          error: 'Error message'
-        }
-      })
-
-      expect(screen.queryByText('Helper text')).not.toBeInTheDocument()
-      expect(screen.getByText('Error message')).toBeInTheDocument()
-    })
-
-    it('shows required asterisk when required', () => {
-      render(Input, {
-        props: {
-          label: 'Name',
-          required: true
-        }
-      })
-
-      expect(screen.getByText('*')).toBeInTheDocument()
-    })
-
-    it('applies error class when error prop is set', () => {
-      render(Input, {
-        props: {
-          error: 'Error'
-        }
-      })
-
-      const input = screen.getByRole('textbox')
-      expect(input).toHaveClass('input-field--error')
-    })
-  })
-
-  describe('input types', () => {
-    it('renders as text input by default', () => {
-      render(Input)
-
-      const input = screen.getByRole('textbox')
-      expect(input).toHaveAttribute('type', 'text')
-    })
-
-    it('renders as email input', () => {
-      render(Input, {
-        props: {
-          type: 'email'
-        }
-      })
-
-      const input = screen.getByRole('textbox')
-      expect(input).toHaveAttribute('type', 'email')
-    })
-
-    it('renders as password input', () => {
-      render(Input, {
-        props: {
-          type: 'password'
-        }
-      })
-
-      const input = document.querySelector('input[type="password"]')
-      expect(input).toBeInTheDocument()
-    })
-
-    it('renders as number input', () => {
-      render(Input, {
-        props: {
-          type: 'number'
-        }
-      })
-
-      const input = screen.getByRole('spinbutton')
-      expect(input).toHaveAttribute('type', 'number')
-    })
-  })
-
-  describe('v-model', () => {
-    it('displays initial value', () => {
-      render(Input, {
-        props: {
-          modelValue: 'Initial value'
-        }
-      })
-
-      const input = screen.getByRole('textbox') as HTMLInputElement
-      expect(input.value).toBe('Initial value')
-    })
-
-    it('emits update:modelValue on input', async () => {
-      const user = userEvent.setup()
-      const { emitted } = render(Input)
-
-      const input = screen.getByRole('textbox')
-      await user.type(input, 'test')
-
-      expect(emitted()['update:modelValue']).toBeTruthy()
-      expect(emitted()['update:modelValue'].length).toBeGreaterThan(0)
-    })
-  })
-
-  describe('disabled state', () => {
-    it('disables the input when disabled prop is true', () => {
-      render(Input, {
-        props: {
-          disabled: true
-        }
-      })
-
-      const input = screen.getByRole('textbox')
-      expect(input).toBeDisabled()
-    })
-
-    it('applies disabled class', () => {
-      render(Input, {
-        props: {
-          disabled: true
-        }
-      })
-
-      const input = screen.getByRole('textbox')
-      expect(input).toHaveClass('input-field--disabled')
-    })
-  })
-
-  describe('required attribute', () => {
-    it('sets required attribute when required prop is true', () => {
-      render(Input, {
-        props: {
-          required: true
-        }
-      })
-
-      const input = screen.getByRole('textbox')
-      expect(input).toBeRequired()
-    })
-
-    it('does not set required attribute by default', () => {
-      render(Input)
-
-      const input = screen.getByRole('textbox')
-      expect(input).not.toBeRequired()
-    })
-  })
-
-  describe('accessibility', () => {
-    it('associates label with input using htmlFor', () => {
-      render(Input, {
-        props: {
-          label: 'Username'
-        }
-      })
-
-      const label = screen.getByText('Username') as HTMLLabelElement
-      const input = screen.getByRole('textbox')
-      
-      expect(label.htmlFor).toBe(input.id)
-    })
-  })
-})

package/src/components/Input/Input.vue

@@ -1,121 +0,0 @@
-<template>
-  <div class="input-wrapper">
-    <label v-if="label" :for="inputId" class="input-label">
-      {{ label }}
-    </label>
-    <input
-      :id="inputId"
-      :type="type"
-      :value="modelValue"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :required="required"
-      :class="['input-field', { 'input-field--error': error, 'input-field--disabled': disabled }]"
-      @input="handleInput"
-    />
-    <span v-if="error" class="input-error">{{ error }}</span>
-    <span v-if="hint && !error" class="input-hint">{{ hint }}</span>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-let componentIdCounter = 0
-
-export interface InputProps {
-  modelValue?: string | number
-  id?: string
-  label?: string
-  type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'time'
-  placeholder?: string
-  disabled?: boolean
-  required?: boolean
-  error?: string
-  hint?: string
-}
-
-const props = withDefaults(defineProps<InputProps>(), {
-  type: 'text',
-  disabled: false,
-  required: false
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string]
-}>()
-
-const generatedId = `input-${++componentIdCounter}`
-const inputId = computed(() => props.id || generatedId)
-
-const handleInput = (event: Event) => {
-  const target = event.target as HTMLInputElement
-  emit('update:modelValue', target.value)
-}
-</script>
-
-<style scoped>
-.input-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-}
-
-.input-label {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: #374151;
-}
-
-
-.input-field {
-  padding: 0.75rem 0.875rem;
-  font-size: 1rem;
-  line-height: 1.5;
-  height: 48px;
-  border: 1px solid #d1d5db;
-  border-radius: 0.375rem;
-  outline: none;
-  transition: all 0.2s ease-in-out;
-  background: white;
-  color: #1f2937;
-  box-sizing: border-box;
-}
-
-.input-field::placeholder {
-  color: #9ca3af;
-}
-
-.input-field:focus {
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.input-field--error {
-  border-color: #fca5a5;
-  border-bottom: 2px solid #dc2626;
-  background: #fef2f2;
-}
-
-.input-field--error:focus {
-  border-color: #fca5a5;
-  border-bottom: 2px solid #dc2626;
-  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
-}
-
-.input-field--disabled {
-  background: #f3f4f6;
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.input-error {
-  font-size: 0.75rem;
-  color: #ef4444;
-}
-
-.input-hint {
-  font-size: 0.75rem;
-  color: #6b7280;
-}
-</style>

package/src/components/Input/types.ts

@@ -1,11 +0,0 @@
-export interface InputProps {
-  modelValue?: string | number
-  id?: string
-  label?: string
-  type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'time'
-  placeholder?: string
-  disabled?: boolean
-  required?: boolean
-  error?: string
-  hint?: string
-}

package/src/components/Modal/Modal.stories.ts

@@ -1,341 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import { ref } from 'vue'
-import Modal from './Modal.vue'
-
-const meta = {
-  title: 'Components/Modal',
-  component: Modal,
-  tags: ['autodocs'],
-  argTypes: {
-    modelValue: {
-      control: 'boolean',
-      description: 'Modal visibility state'
-    },
-    title: {
-      control: 'text',
-      description: 'Modal title'
-    },
-    size: {
-      control: 'select',
-      options: ['small', 'medium', 'large'],
-      description: 'Modal size'
-    },
-    closable: {
-      control: 'boolean',
-      description: 'Show close button'
-    },
-    closeOnOverlay: {
-      control: 'boolean',
-      description: 'Close when clicking overlay'
-    }
-  },
-  args: {
-    title: 'Modal Title',
-    size: 'medium',
-    closable: true,
-    closeOnOverlay: true
-  }
-} satisfies Meta<typeof Modal>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render: (args: any) => ({
-    components: { Modal },
-    setup() {
-      const isOpen = ref(false)
-      return { isOpen, args }
-    },
-    template: `
-      <div>
-        <button 
-          @click="isOpen = true"
-          style="padding: 0.625rem 1.25rem; background: #667eea; color: white; border: none; border-radius: 0.375rem; cursor: pointer; font-weight: 600;"
-        >
-          Open Modal
-        </button>
-        <Modal v-model="isOpen" v-bind="args">
-          <p>This is the modal content. You can put any content here.</p>
-        </Modal>
-      </div>
-    `
-  })
-}
-
-export const WithFooter: Story = {
-  render: (args: any) => ({
-    components: { Modal },
-    setup() {
-      const isOpen = ref(false)
-      return { isOpen, args }
-    },
-    template: `
-      <div>
-        <button 
-          @click="isOpen = true"
-          style="padding: 0.625rem 1.25rem; background: #667eea; color: white; border: none; border-radius: 0.375rem; cursor: pointer; font-weight: 600;"
-        >
-          Open Modal
-        </button>
-        <Modal v-model="isOpen" title="Confirm Action" v-bind="args">
-          <p>Are you sure you want to continue with this action?</p>
-          <template #footer>
-            <div style="display: flex; gap: 0.75rem; justify-content: flex-end;">
-              <button 
-                @click="isOpen = false"
-                style="padding: 0.5rem 1rem; background: #e5e7eb; color: #374151; border: none; border-radius: 0.375rem; cursor: pointer; font-weight: 500;"
-              >
-                Cancel
-              </button>
-              <button 
-                @click="isOpen = false"
-                style="padding: 0.5rem 1rem; background: #667eea; color: white; border: none; border-radius: 0.375rem; cursor: pointer; font-weight: 500;"
-              >
-                Confirm
-              </button>
-            </div>
-          </template>
-        </Modal>
-      </div>
-    `
-  })
-}
-
-export const Small: Story = {
-  args: {
-    size: 'small',
-    title: 'Small Modal'
-  },
-  render: (args: any) => ({
-    components: { Modal },
-    setup() {
-      const isOpen = ref(false)
-      return { isOpen, args }
-    },
-    template: `
-      <div>
-        <button 
-          @click="isOpen = true"
-          style="padding: 0.625rem 1.25rem; background: #667eea; color: white; border: none; border-radius: 0.375rem; cursor: pointer; font-weight: 600;"
-        >
-          Open Small Modal
-        </button>
-        <Modal v-model="isOpen" v-bind="args">
-          <p>This is a small modal with limited content.</p>
-        </Modal>
-      </div>
-    `
-  })
-}
-
-export const Large: Story = {
-  args: {
-    size: 'large',
-    title: 'Large Modal'
-  },
-  render: (args: any) => ({
-    components: { Modal },
-    setup() {
-      const isOpen = ref(false)
-      return { isOpen, args }
-    },
-    template: `
-      <div>
-        <button 
-          @click="isOpen = true"
-          style="padding: 0.625rem 1.25rem; background: #667eea; color: white; border: none; border-radius: 0.375rem; cursor: pointer; font-weight: 600;"
-        >
-          Open Large Modal
-        </button>
-        <Modal v-model="isOpen" v-bind="args">
-          <div style="min-height: 400px;">
-            <h3>Large Content Area</h3>
-            <p>This modal has more space for content.</p>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-          </div>
-        </Modal>
-      </div>
-    `
-  })
-}
-
-export const NoClose: Story = {
-  args: {
-    closable: false,
-    closeOnOverlay: false,
-    title: 'Important Message'
-  },
-  render: (args: any) => ({
-    components: { Modal },
-    setup() {
-      const isOpen = ref(false)
-      return { isOpen, args }
-    },
-    template: `
-      <div>
-        <button 
-          @click="isOpen = true"
-          style="padding: 0.625rem 1.25rem; background: #667eea; color: white; border: none; border-radius: 0.375rem; cursor: pointer; font-weight: 600;"
-        >
-          Open Modal (No Close)
-        </button>
-        <Modal v-model="isOpen" v-bind="args">
-          <p>This modal cannot be closed by clicking outside or using the X button.</p>
-          <template #footer>
-            <button 
-              @click="isOpen = false"
-              style="padding: 0.5rem 1rem; background: #667eea; color: white; border: none; border-radius: 0.375rem; cursor: pointer; font-weight: 500;"
-            >
-              I Understand
-            </button>
-          </template>
-        </Modal>
-      </div>
-    `
-  })
-}
-
-export const CustomHeader: Story = {
-  render: (args: any) => ({
-    components: { Modal },
-    setup() {
-      const isOpen = ref(false)
-      return { isOpen, args }
-    },
-    template: `
-      <div>
-        <button 
-          @click="isOpen = true"
-          style="padding: 0.625rem 1.25rem; background: #667eea; color: white; border: none; border-radius: 0.375rem; cursor: pointer; font-weight: 600;"
-        >
-          Open Modal
-        </button>
-        <Modal v-model="isOpen">
-          <template #header>
-            <div style="display: flex; align-items: center; gap: 0.75rem;">
-              <span style="font-size: 1.5rem;">✨</span>
-              <h3 style="margin: 0; font-size: 1.25rem; color: #667eea;">Custom Header</h3>
-            </div>
-          </template>
-          <p>This modal has a custom header with an icon and styled text.</p>
-        </Modal>
-      </div>
-    `
-  })
-}
-
-export const FormModal: Story = {
-  render: () => ({
-    components: { Modal },
-    setup() {
-      const isOpen = ref(false)
-      const formData = ref({ name: '', email: '' })
-      
-      const handleSubmit = () => {
-        console.log('Form submitted:', formData.value)
-        isOpen.value = false
-      }
-
-      return { isOpen, formData, handleSubmit }
-    },
-    template: `
-      <div>
-        <button 
-          @click="isOpen = true"
-          style="padding: 0.625rem 1.25rem; background: #667eea; color: white; border: none; border-radius: 0.375rem; cursor: pointer; font-weight: 600;"
-        >
-          Add User
-        </button>
-        <Modal v-model="isOpen" title="Add New User">
-          <form @submit.prevent="handleSubmit">
-            <div style="margin-bottom: 1rem;">
-              <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Name</label>
-              <input 
-                v-model="formData.name"
-                type="text" 
-                placeholder="Enter name"
-                required
-                style="width: 100%; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem;"
-              />
-            </div>
-            <div style="margin-bottom: 1rem;">
-              <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Email</label>
-              <input 
-                v-model="formData.email"
-                type="email" 
-                placeholder="Enter email"
-                required
-                style="width: 100%; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem;"
-              />
-            </div>
-          </form>
-          <template #footer>
-            <div style="display: flex; gap: 0.75rem; justify-content: flex-end;">
-              <button 
-                @click="isOpen = false"
-                type="button"
-                style="padding: 0.5rem 1rem; background: #e5e7eb; color: #374151; border: none; border-radius: 0.375rem; cursor: pointer; font-weight: 500;"
-              >
-                Cancel
-              </button>
-              <button 
-                @click="handleSubmit"
-                type="submit"
-                style="padding: 0.5rem 1rem; background: #667eea; color: white; border: none; border-radius: 0.375rem; cursor: pointer; font-weight: 500;"
-              >
-                Add User
-              </button>
-            </div>
-          </template>
-        </Modal>
-      </div>
-    `
-  })
-}
-
-export const ConfirmDialog: Story = {
-  render: () => ({
-    components: { Modal },
-    setup() {
-      const isOpen = ref(false)
-      
-      const handleDelete = () => {
-        console.log('Item deleted')
-        isOpen.value = false
-      }
-
-      return { isOpen, handleDelete }
-    },
-    template: `
-      <div>
-        <button 
-          @click="isOpen = true"
-          style="padding: 0.625rem 1.25rem; background: #dc2626; color: white; border: none; border-radius: 0.375rem; cursor: pointer; font-weight: 600;"
-        >
-          Delete Item
-        </button>
-        <Modal v-model="isOpen" title="Confirm Deletion" size="small">
-          <p style="margin: 0;">Are you sure you want to delete this item? This action cannot be undone.</p>
-          <template #footer>
-            <div style="display: flex; gap: 0.75rem; justify-content: flex-end;">
-              <button 
-                @click="isOpen = false"
-                style="padding: 0.5rem 1rem; background: #e5e7eb; color: #374151; border: none; border-radius: 0.375rem; cursor: pointer; font-weight: 500;"
-              >
-                Cancel
-              </button>
-              <button 
-                @click="handleDelete"
-                style="padding: 0.5rem 1rem; background: #dc2626; color: white; border: none; border-radius: 0.375rem; cursor: pointer; font-weight: 500;"
-              >
-                Delete
-              </button>
-            </div>
-          </template>
-        </Modal>
-      </div>
-    `
-  })
-}