@davidbirchall/core 1.0.8 → 1.0.9

package/src/components/Tag/Tag.stories.ts

@@ -1,78 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import Tag from './Tag.vue'
-
-const meta = {
-  title: 'Components/Tag',
-  component: Tag,
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['default', 'primary', 'success', 'warning', 'danger', 'info']
-    },
-    size: {
-      control: 'select',
-      options: ['small', 'medium', 'large']
-    }
-  },
-  args: {
-    variant: 'default',
-    size: 'medium'
-  }
-} satisfies Meta<typeof Tag>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render: (args: any) => ({
-    components: { Tag },
-    setup() {
-      return { args }
-    },
-    template: '<Tag v-bind="args">Default Tag</Tag>'
-  })
-}
-
-export const Variants: Story = {
-  render: () => ({
-    components: { Tag },
-    template: `
-      <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
-        <Tag variant="default">Default</Tag>
-        <Tag variant="primary">Primary</Tag>
-        <Tag variant="success">Success</Tag>
-        <Tag variant="warning">Warning</Tag>
-        <Tag variant="danger">Danger</Tag>
-        <Tag variant="info">Info</Tag>
-      </div>
-    `
-  })
-}
-
-export const Sizes: Story = {
-  render: () => ({
-    components: { Tag },
-    template: `
-      <div style="display: flex; gap: 1rem; align-items: center;">
-        <Tag size="small" variant="primary">Small</Tag>
-        <Tag size="medium" variant="primary">Medium</Tag>
-        <Tag size="large" variant="primary">Large</Tag>
-      </div>
-    `
-  })
-}
-
-export const SkillTags: Story = {
-  render: () => ({
-    components: { Tag },
-    template: `
-      <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
-        <Tag variant="primary" size="small">Unity</Tag>
-        <Tag variant="success" size="small">C#</Tag>
-        <Tag variant="info" size="small">Game Design</Tag>
-        <Tag variant="warning" size="small">Blender</Tag>
-      </div>
-    `
-  })
-}

package/src/components/Tag/Tag.test.ts

@@ -1,50 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import Tag from './Tag.vue'
-
-describe('Tag', () => {
-  it('renders slot content', () => {
-    const wrapper = mount(Tag, {
-      slots: {
-        default: 'Test Tag'
-      }
-    })
-    expect(wrapper.text()).toBe('Test Tag')
-  })
-
-  it('applies default variant class', () => {
-    const wrapper = mount(Tag)
-    expect(wrapper.classes()).toContain('tag--default')
-  })
-
-  it('applies custom variant class', () => {
-    const wrapper = mount(Tag, {
-      props: { variant: 'primary' }
-    })
-    expect(wrapper.classes()).toContain('tag--primary')
-  })
-
-  it('applies default size class', () => {
-    const wrapper = mount(Tag)
-    expect(wrapper.classes()).toContain('tag--medium')
-  })
-
-  it('applies custom size class', () => {
-    const wrapper = mount(Tag, {
-      props: { size: 'small' }
-    })
-    expect(wrapper.classes()).toContain('tag--small')
-  })
-
-  it('applies multiple classes correctly', () => {
-    const wrapper = mount(Tag, {
-      props: { 
-        variant: 'success',
-        size: 'large'
-      }
-    })
-    expect(wrapper.classes()).toContain('tag')
-    expect(wrapper.classes()).toContain('tag--success')
-    expect(wrapper.classes()).toContain('tag--large')
-  })
-})

package/src/components/Tag/Tag.vue

@@ -1,71 +0,0 @@
-<template>
-  <span :class="['tag', `tag--${variant}`, `tag--${size}`]">
-    <slot />
-  </span>
-</template>
-
-<script setup lang="ts">
-import type { TagProps } from './types'
-
-withDefaults(defineProps<TagProps>(), {
-  variant: 'default',
-  size: 'medium'
-})
-</script>
-
-<style scoped>
-.tag {
-  display: inline-flex;
-  align-items: center;
-  font-weight: 600;
-  border-radius: 0.375rem;
-  transition: all 0.2s ease-in-out;
-}
-
-/* Sizes */
-.tag--small {
-  padding: 0.25rem 0.5rem;
-  font-size: 0.75rem;
-}
-
-.tag--medium {
-  padding: 0.375rem 0.75rem;
-  font-size: 0.875rem;
-}
-
-.tag--large {
-  padding: 0.5rem 1rem;
-  font-size: 1rem;
-}
-
-/* Variants */
-.tag--default {
-  background-color: #f3f4f6;
-  color: #374151;
-}
-
-.tag--primary {
-  background-color: #dbeafe;
-  color: #1e40af;
-}
-
-.tag--success {
-  background-color: #d1fae5;
-  color: #065f46;
-}
-
-.tag--warning {
-  background-color: #fef3c7;
-  color: #92400e;
-}
-
-.tag--danger {
-  background-color: #fee2e2;
-  color: #991b1b;
-}
-
-.tag--info {
-  background-color: #e0e7ff;
-  color: #3730a3;
-}
-</style>

package/src/components/Tag/types.ts

@@ -1,4 +0,0 @@
-export interface TagProps {
-  variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
-  size?: 'small' | 'medium' | 'large'
-}

package/src/components/TextArea/TextArea.stories.ts

@@ -1,171 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import { ref } from 'vue'
-import TextArea from './TextArea.vue'
-
-const meta = {
-  title: 'Form Fields/TextArea',
-  component: TextArea,
-  tags: ['autodocs'],
-  argTypes: {
-    label: {
-      control: 'text',
-      description: 'Label text'
-    },
-    placeholder: {
-      control: 'text',
-      description: 'Placeholder text'
-    },
-    rows: {
-      control: 'number',
-      description: 'Number of visible text lines'
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Disabled state'
-    },
-    required: {
-      control: 'boolean',
-      description: 'Required field'
-    },
-    error: {
-      control: 'text',
-      description: 'Error message'
-    },
-    hint: {
-      control: 'text',
-      description: 'Hint text'
-    }
-  },
-  args: {
-    rows: 4
-  }
-} satisfies Meta<typeof TextArea>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    label: 'Message',
-    placeholder: 'Enter your message'
-  },
-  render: (args: any) => ({
-    components: { TextArea },
-    setup() {
-      const value = ref('')
-      return { args, value }
-    },
-    template: '<TextArea v-bind="args" v-model="value" />'
-  })
-}
-
-export const WithValue: Story = {
-  args: {
-    label: 'Description',
-    modelValue: 'This is a sample description that spans multiple lines.\n\nIt can contain paragraphs and line breaks.'
-  },
-  render: (args: any) => ({
-    components: { TextArea },
-    setup() {
-      const value = ref(args.modelValue ?? '')
-      return { args, value }
-    },
-    template: '<TextArea v-bind="args" v-model="value" />'
-  })
-}
-
-export const WithHint: Story = {
-  args: {
-    label: 'Comments',
-    placeholder: 'Add your comments',
-    hint: 'Maximum 500 characters'
-  },
-  render: (args: any) => ({
-    components: { TextArea },
-    setup() {
-      const value = ref('')
-      return { args, value }
-    },
-    template: '<TextArea v-bind="args" v-model="value" />'
-  })
-}
-
-export const WithError: Story = {
-  args: {
-    label: 'Feedback',
-    modelValue: 'Too short',
-    error: 'Feedback must be at least 50 characters'
-  },
-  render: (args: any) => ({
-    components: { TextArea },
-    setup() {
-      const value = ref(args.modelValue ?? '')
-      return { args, value }
-    },
-    template: '<TextArea v-bind="args" v-model="value" />'
-  })
-}
-
-export const Required: Story = {
-  args: {
-    label: 'Description',
-    placeholder: 'Describe the issue',
-    required: true
-  },
-  render: (args: any) => ({
-    components: { TextArea },
-    setup() {
-      const value = ref('')
-      return { args, value }
-    },
-    template: '<TextArea v-bind="args" v-model="value" />'
-  })
-}
-
-export const Disabled: Story = {
-  args: {
-    label: 'Read Only',
-    modelValue: 'This content cannot be edited',
-    disabled: true
-  },
-  render: (args: any) => ({
-    components: { TextArea },
-    setup() {
-      const value = ref(args.modelValue ?? '')
-      return { args, value }
-    },
-    template: '<TextArea v-bind="args" v-model="value" />'
-  })
-}
-
-export const CustomRows: Story = {
-  args: {
-    label: 'Short Note',
-    placeholder: 'Brief note',
-    rows: 2
-  },
-  render: (args: any) => ({
-    components: { TextArea },
-    setup() {
-      const value = ref('')
-      return { args, value }
-    },
-    template: '<TextArea v-bind="args" v-model="value" />'
-  })
-}
-
-export const LargeTextArea: Story = {
-  args: {
-    label: 'Article Content',
-    placeholder: 'Write your article content here',
-    rows: 10
-  },
-  render: (args: any) => ({
-    components: { TextArea },
-    setup() {
-      const value = ref('')
-      return { args, value }
-    },
-    template: '<TextArea v-bind="args" v-model="value" />'
-  })
-}

package/src/components/TextArea/TextArea.test.ts

@@ -1,202 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { render, screen } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import TextArea from './TextArea.vue'
-
-describe('TextArea', () => {
-  describe('rendering', () => {
-    it('renders with label', () => {
-      render(TextArea, {
-        props: {
-          label: 'Message'
-        }
-      })
-
-      expect(screen.getByText('Message')).toBeInTheDocument()
-    })
-
-    it('renders without label', () => {
-      const { container } = render(TextArea)
-      
-      expect(container.querySelector('.textarea-label')).not.toBeInTheDocument()
-    })
-
-    it('renders placeholder', () => {
-      render(TextArea, {
-        props: {
-          placeholder: 'Enter your message'
-        }
-      })
-
-      expect(screen.getByPlaceholderText('Enter your message')).toBeInTheDocument()
-    })
-
-    it('renders error message', () => {
-      render(TextArea, {
-        props: {
-          error: 'This field is required'
-        }
-      })
-
-      expect(screen.getByText('This field is required')).toBeInTheDocument()
-    })
-
-    it('renders hint text', () => {
-      render(TextArea, {
-        props: {
-          hint: 'Maximum 500 characters'
-        }
-      })
-
-      expect(screen.getByText('Maximum 500 characters')).toBeInTheDocument()
-    })
-
-    it('does not show hint when error is present', () => {
-      render(TextArea, {
-        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(TextArea, {
-        props: {
-          label: 'Comments',
-          required: true
-        }
-      })
-
-      expect(screen.getByText('*')).toBeInTheDocument()
-    })
-
-    it('applies error class when error prop is set', () => {
-      render(TextArea, {
-        props: {
-          error: 'Error'
-        }
-      })
-
-      const textarea = screen.getByRole('textbox')
-      expect(textarea).toHaveClass('textarea-field--error')
-    })
-
-    it('sets custom rows attribute', () => {
-      render(TextArea, {
-        props: {
-          rows: 8
-        }
-      })
-
-      const textarea = screen.getByRole('textbox')
-      expect(textarea).toHaveAttribute('rows', '8')
-    })
-
-    it('uses default rows value of 4', () => {
-      render(TextArea)
-
-      const textarea = screen.getByRole('textbox')
-      expect(textarea).toHaveAttribute('rows', '4')
-    })
-  })
-
-  describe('v-model', () => {
-    it('displays initial value', () => {
-      render(TextArea, {
-        props: {
-          modelValue: 'Initial text'
-        }
-      })
-
-      const textarea = screen.getByRole('textbox') as HTMLTextAreaElement
-      expect(textarea.value).toBe('Initial text')
-    })
-
-    it('emits update:modelValue on input', async () => {
-      const user = userEvent.setup()
-      const { emitted } = render(TextArea)
-
-      const textarea = screen.getByRole('textbox')
-      await user.type(textarea, 'test')
-
-      expect(emitted()['update:modelValue']).toBeTruthy()
-      expect(emitted()['update:modelValue'].length).toBeGreaterThan(0)
-    })
-
-    it('handles multiline input', async () => {
-      const user = userEvent.setup()
-      const { emitted } = render(TextArea)
-
-      const textarea = screen.getByRole('textbox')
-      await user.type(textarea, 'Line 1{Enter}Line 2')
-
-      const emissions = emitted()['update:modelValue'] as any[]
-      expect(emissions).toBeTruthy()
-      const lastEmission = emissions[emissions.length - 1][0] as string
-      expect(lastEmission).toContain('\n')
-    })
-  })
-
-  describe('disabled state', () => {
-    it('disables the textarea when disabled prop is true', () => {
-      render(TextArea, {
-        props: {
-          disabled: true
-        }
-      })
-
-      const textarea = screen.getByRole('textbox')
-      expect(textarea).toBeDisabled()
-    })
-
-    it('applies disabled class', () => {
-      render(TextArea, {
-        props: {
-          disabled: true
-        }
-      })
-
-      const textarea = screen.getByRole('textbox')
-      expect(textarea).toHaveClass('textarea-field--disabled')
-    })
-  })
-
-  describe('required attribute', () => {
-    it('sets required attribute when required prop is true', () => {
-      render(TextArea, {
-        props: {
-          required: true
-        }
-      })
-
-      const textarea = screen.getByRole('textbox')
-      expect(textarea).toBeRequired()
-    })
-
-    it('does not set required attribute by default', () => {
-      render(TextArea)
-
-      const textarea = screen.getByRole('textbox')
-      expect(textarea).not.toBeRequired()
-    })
-  })
-
-  describe('accessibility', () => {
-    it('associates label with textarea using htmlFor', () => {
-      render(TextArea, {
-        props: {
-          label: 'Message'
-        }
-      })
-
-      const label = screen.getByText('Message') as HTMLLabelElement
-      const textarea = screen.getByRole('textbox')
-      
-      expect(label.htmlFor).toBe(textarea.id)
-    })
-  })
-})

package/src/components/TextArea/TextArea.vue

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

package/src/components/TextArea/types.ts

@@ -1,11 +0,0 @@
-export interface TextAreaProps {
-  modelValue?: string
-  id?: string
-  label?: string
-  placeholder?: string
-  disabled?: boolean
-  required?: boolean
-  rows?: number
-  error?: string
-  hint?: string
-}