@davidbirchall/core 1.0.6 → 1.0.8

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

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

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

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

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

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

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

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

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

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