@davidbirchall/core 1.0.8 → 1.0.9

package/src/components/Card/Card.test.ts

@@ -1,173 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { render, screen } from '@testing-library/vue'
-import Card from './Card.vue'
-
-describe('Card', () => {
-  describe('rendering', () => {
-    it('renders default slot content', () => {
-      render(Card, {
-        slots: {
-          default: '<p>Card content</p>'
-        }
-      })
-
-      expect(screen.getByText('Card content')).toBeInTheDocument()
-    })
-
-    it('renders header slot when provided', () => {
-      const { container } = render(Card, {
-        slots: {
-          header: 'Card Header',
-          default: 'Card content'
-        }
-      })
-
-      const header = container.querySelector('.card__header')
-      expect(header).toBeInTheDocument()
-      expect(header).toHaveTextContent('Card Header')
-    })
-
-    it('does not render header section when slot is not provided', () => {
-      const { container } = render(Card, {
-        slots: {
-          default: 'Card content'
-        }
-      })
-
-      const header = container.querySelector('.card__header')
-      expect(header).not.toBeInTheDocument()
-    })
-
-    it('renders footer slot when provided', () => {
-      const { container } = render(Card, {
-        slots: {
-          default: 'Card content',
-          footer: 'Card Footer'
-        }
-      })
-
-      const footer = container.querySelector('.card__footer')
-      expect(footer).toBeInTheDocument()
-      expect(footer).toHaveTextContent('Card Footer')
-    })
-
-    it('does not render footer section when slot is not provided', () => {
-      const { container } = render(Card, {
-        slots: {
-          default: 'Card content'
-        }
-      })
-
-      const footer = container.querySelector('.card__footer')
-      expect(footer).not.toBeInTheDocument()
-    })
-
-    it('renders all slots together', () => {
-      const { container } = render(Card, {
-        slots: {
-          header: 'Header',
-          default: 'Body',
-          footer: 'Footer'
-        }
-      })
-
-      expect(container.querySelector('.card__header')).toBeInTheDocument()
-      expect(container.querySelector('.card__body')).toBeInTheDocument()
-      expect(container.querySelector('.card__footer')).toBeInTheDocument()
-    })
-  })
-
-  describe('hoverable prop', () => {
-    it('does not apply hoverable class by default', () => {
-      const { container } = render(Card, {
-        slots: {
-          default: 'Content'
-        }
-      })
-
-      const card = container.querySelector('.card')
-      expect(card).not.toHaveClass('card--hoverable')
-    })
-
-    it('applies hoverable class when prop is true', () => {
-      const { container } = render(Card, {
-        props: {
-          hoverable: true
-        },
-        slots: {
-          default: 'Content'
-        }
-      })
-
-      const card = container.querySelector('.card')
-      expect(card).toHaveClass('card--hoverable')
-    })
-
-    it('does not apply hoverable class when prop is false', () => {
-      const { container } = render(Card, {
-        props: {
-          hoverable: false
-        },
-        slots: {
-          default: 'Content'
-        }
-      })
-
-      const card = container.querySelector('.card')
-      expect(card).not.toHaveClass('card--hoverable')
-    })
-  })
-
-  describe('styling', () => {
-    it('always applies base card class', () => {
-      const { container } = render(Card, {
-        slots: {
-          default: 'Content'
-        }
-      })
-
-      const card = container.querySelector('.card')
-      expect(card).toHaveClass('card')
-    })
-
-    it('maintains card structure with body wrapper', () => {
-      const { container } = render(Card, {
-        slots: {
-          default: 'Test content'
-        }
-      })
-
-      const body = container.querySelector('.card__body')
-      expect(body).toBeInTheDocument()
-      expect(body).toHaveTextContent('Test content')
-    })
-  })
-
-  describe('complex content', () => {
-    it('handles complex HTML in slots', () => {
-      const { container } = render(Card, {
-        slots: {
-          header: '<h2>Title</h2>',
-          default: '<div><p>Paragraph 1</p><p>Paragraph 2</p></div>',
-          footer: '<button>Action</button>'
-        }
-      })
-
-      expect(container.querySelector('.card__header h2')).toBeInTheDocument()
-      expect(container.querySelectorAll('.card__body p')).toHaveLength(2)
-      expect(screen.getByRole('button', { name: 'Action' })).toBeInTheDocument()
-    })
-
-    it('handles nested components in slots', () => {
-      const { container } = render(Card, {
-        slots: {
-          default: '<div class="custom-content">Nested</div>'
-        }
-      })
-
-      const customContent = container.querySelector('.custom-content')
-      expect(customContent).toBeInTheDocument()
-      expect(customContent).toHaveTextContent('Nested')
-    })
-  })
-})

package/src/components/Card/Card.vue

@@ -1,59 +0,0 @@
-<template>
-  <div :class="['card', { 'card--hoverable': hoverable }]">
-    <div v-if="$slots.header" class="card__header">
-      <slot name="header" />
-    </div>
-    <div class="card__body">
-      <slot />
-    </div>
-    <div v-if="$slots.footer" class="card__footer">
-      <slot name="footer" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-export interface CardProps {
-  hoverable?: boolean
-}
-
-withDefaults(defineProps<CardProps>(), {
-  hoverable: false
-})
-</script>
-
-<style scoped>
-.card {
-  background: white;
-  border: 1px solid #e5e7eb;
-  border-radius: 0.5rem;
-  overflow: hidden;
-}
-
-.card--hoverable {
-  transition: all 0.2s ease-in-out;
-  cursor: pointer;
-}
-
-.card--hoverable:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  transform: translateY(-2px);
-}
-
-.card__header {
-  padding: 1rem 1.5rem;
-  border-bottom: 1px solid #e5e7eb;
-  font-weight: 600;
-  font-size: 1.125rem;
-}
-
-.card__body {
-  padding: 1.5rem;
-}
-
-.card__footer {
-  padding: 1rem 1.5rem;
-  border-top: 1px solid #e5e7eb;
-  background-color: #f9fafb;
-}
-</style>

package/src/components/Checkbox/Checkbox.stories.ts

@@ -1,126 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import { ref } from 'vue'
-import Checkbox from './Checkbox.vue'
-
-const meta = {
-  title: 'Form Fields/Checkbox',
-  component: Checkbox,
-  tags: ['autodocs'],
-  argTypes: {
-    modelValue: {
-      control: 'boolean',
-      description: 'Checked state'
-    },
-    label: {
-      control: 'text',
-      description: 'Label text'
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Disabled state'
-    },
-    required: {
-      control: 'boolean',
-      description: 'Required field'
-    },
-    error: {
-      control: 'text',
-      description: 'Error message'
-    }
-  },
-  args: {
-    modelValue: false,
-    disabled: false,
-    required: false
-  }
-} satisfies Meta<typeof Checkbox>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    label: 'Accept terms and conditions'
-  },
-  render: (args: any) => ({
-    components: { Checkbox },
-    setup() {
-      const checked = ref(args.modelValue ?? false)
-      return { args, checked }
-    },
-    template: '<Checkbox v-bind="args" v-model="checked" />'
-  })
-}
-
-export const Checked: Story = {
-  args: {
-    label: 'Subscribe to newsletter',
-    modelValue: true
-  },
-  render: (args: any) => ({
-    components: { Checkbox },
-    setup() {
-      const checked = ref(args.modelValue ?? false)
-      return { args, checked }
-    },
-    template: '<Checkbox v-bind="args" v-model="checked" />'
-  })
-}
-
-export const Disabled: Story = {
-  args: {
-    label: 'Disabled option',
-    disabled: true
-  },
-  render: (args: any) => ({
-    components: { Checkbox },
-    setup() {
-      const checked = ref(false)
-      return { args, checked }
-    },
-    template: '<Checkbox v-bind="args" v-model="checked" />'
-  })
-}
-
-export const DisabledChecked: Story = {
-  args: {
-    label: 'Disabled checked option',
-    disabled: true,
-    modelValue: true
-  },
-  render: (args: any) => ({
-    components: { Checkbox },
-    setup() {
-      const checked = ref(args.modelValue ?? false)
-      return { args, checked }
-    },
-    template: '<Checkbox v-bind="args" v-model="checked" />'
-  })
-}
-
-export const WithError: Story = {
-  args: {
-    label: 'I agree to the terms',
-    error: 'You must accept the terms to continue'
-  },
-  render: (args: any) => ({
-    components: { Checkbox },
-    setup() {
-      const checked = ref(false)
-      return { args, checked }
-    },
-    template: '<Checkbox v-bind="args" v-model="checked" />'
-  })
-}
-
-export const WithoutLabel: Story = {
-  args: {},
-  render: (args: any) => ({
-    components: { Checkbox },
-    setup() {
-      const checked = ref(false)
-      return { args, checked }
-    },
-    template: '<Checkbox v-bind="args" v-model="checked" />'
-  })
-}

package/src/components/Checkbox/Checkbox.test.ts

@@ -1,155 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { render, screen } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import Checkbox from './Checkbox.vue'
-
-describe('Checkbox', () => {
-  describe('rendering', () => {
-    it('renders with label', () => {
-      render(Checkbox, {
-        props: {
-          label: 'Accept terms'
-        }
-      })
-
-      expect(screen.getByText('Accept terms')).toBeInTheDocument()
-    })
-
-    it('renders without label', () => {
-      const { container } = render(Checkbox)
-      
-      expect(container.querySelector('.checkbox-text')).not.toBeInTheDocument()
-    })
-
-    it('renders error message', () => {
-      render(Checkbox, {
-        props: {
-          error: 'This field is required'
-        }
-      })
-
-      expect(screen.getByText('This field is required')).toBeInTheDocument()
-    })
-
-    it('applies disabled class when disabled', () => {
-      render(Checkbox, {
-        props: {
-          label: 'Disabled',
-          disabled: true
-        }
-      })
-
-      const label = screen.getByText('Disabled').closest('.checkbox-label')
-      expect(label).toHaveClass('checkbox-label--disabled')
-    })
-  })
-
-  describe('checked state', () => {
-    it('is unchecked by default', () => {
-      render(Checkbox, {
-        props: {
-          label: 'Checkbox'
-        }
-      })
-
-      const checkbox = screen.getByRole('checkbox')
-      expect(checkbox).not.toBeChecked()
-    })
-
-    it('renders as checked when modelValue is true', () => {
-      render(Checkbox, {
-        props: {
-          label: 'Checkbox',
-          modelValue: true
-        }
-      })
-
-      const checkbox = screen.getByRole('checkbox')
-      expect(checkbox).toBeChecked()
-    })
-
-    it('can be toggled', async () => {
-      const user = userEvent.setup()
-      const { emitted } = render(Checkbox, {
-        props: {
-          label: 'Toggle me'
-        }
-      })
-
-      const checkbox = screen.getByRole('checkbox')
-      await user.click(checkbox)
-
-      expect(emitted()['update:modelValue']).toBeTruthy()
-      expect(emitted()['update:modelValue'][0]).toEqual([true])
-    })
-  })
-
-  describe('disabled state', () => {
-    it('disables the checkbox when disabled prop is true', () => {
-      render(Checkbox, {
-        props: {
-          label: 'Disabled',
-          disabled: true
-        }
-      })
-
-      const checkbox = screen.getByRole('checkbox')
-      expect(checkbox).toBeDisabled()
-    })
-
-    it('does not emit events when disabled', async () => {
-      const user = userEvent.setup()
-      const { emitted } = render(Checkbox, {
-        props: {
-          label: 'Disabled',
-          disabled: true
-        }
-      })
-
-      const checkbox = screen.getByRole('checkbox')
-      await user.click(checkbox)
-
-      expect(emitted()['update:modelValue']).toBeFalsy()
-    })
-  })
-
-  describe('required attribute', () => {
-    it('sets required attribute when required prop is true', () => {
-      render(Checkbox, {
-        props: {
-          label: 'Required',
-          required: true
-        }
-      })
-
-      const checkbox = screen.getByRole('checkbox')
-      expect(checkbox).toBeRequired()
-    })
-
-    it('does not set required attribute by default', () => {
-      render(Checkbox, {
-        props: {
-          label: 'Optional'
-        }
-      })
-
-      const checkbox = screen.getByRole('checkbox')
-      expect(checkbox).not.toBeRequired()
-    })
-  })
-
-  describe('accessibility', () => {
-    it('associates label with checkbox', () => {
-      render(Checkbox, {
-        props: {
-          label: 'Accept terms'
-        }
-      })
-
-      const checkbox = screen.getByRole('checkbox')
-      const label = screen.getByText('Accept terms')
-      
-      expect(checkbox.closest('label')).toContainElement(label)
-    })
-  })
-})

package/src/components/Checkbox/Checkbox.vue

@@ -1,121 +0,0 @@
-<template>
-  <div class="checkbox-wrapper">
-    <label :class="['checkbox-label', { 'checkbox-label--disabled': disabled }]">
-      <input
-        type="checkbox"
-        class="checkbox-input"
-        :checked="modelValue"
-        :disabled="disabled"
-        :required="required"
-        @change="handleChange"
-      />
-      <span class="checkbox-box"></span>
-      <span v-if="label" class="checkbox-text">{{ label }}</span>
-    </label>
-    <span v-if="error" class="checkbox-error">{{ error }}</span>
-  </div>
-</template>
-
-<script setup lang="ts">
-
-export interface CheckboxProps {
-  modelValue?: boolean
-  label?: string
-  disabled?: boolean
-  required?: boolean
-  error?: string
-}
-
-withDefaults(defineProps<CheckboxProps>(), {
-  modelValue: false,
-  disabled: false,
-  required: false
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
-}>()
-
-const handleChange = (event: Event) => {
-  const target = event.target as HTMLInputElement
-  emit('update:modelValue', target.checked)
-}
-</script>
-
-<style scoped>
-.checkbox-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.checkbox-label {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-  position: relative;
-}
-
-.checkbox-label--disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.checkbox-input {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.checkbox-box {
-  width: 1.25rem;
-  height: 1.25rem;
-  border: 2px solid #d1d5db;
-  border-radius: 0.25rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease-in-out;
-  background: white;
-  flex-shrink: 0;
-}
-
-.checkbox-input:checked + .checkbox-box {
-  background: #3b82f6;
-  border-color: #3b82f6;
-}
-
-.checkbox-input:checked + .checkbox-box::after {
-  content: '';
-  width: 0.375rem;
-  height: 0.75rem;
-  border: solid white;
-  border-width: 0 2px 2px 0;
-  transform: rotate(45deg);
-  margin-bottom: 0.125rem;
-}
-
-.checkbox-input:focus + .checkbox-box {
-  outline: 2px solid #3b82f6;
-  outline-offset: 2px;
-}
-
-.checkbox-input:disabled + .checkbox-box {
-  background: #f3f4f6;
-  cursor: not-allowed;
-}
-
-.checkbox-text {
-  font-size: 0.875rem;
-  color: #374151;
-  user-select: none;
-}
-
-.checkbox-error {
-  font-size: 0.75rem;
-  color: #ef4444;
-  margin-left: 1.75rem;
-}
-</style>

package/src/components/Checkbox/types.ts

@@ -1,7 +0,0 @@
-export interface CheckboxProps {
-  modelValue?: boolean
-  label?: string
-  disabled?: boolean
-  required?: boolean
-  error?: string
-}