@davidbirchall/core 1.0.6 → 1.0.8

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

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

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

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

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