@davidbirchall/core 1.0.6 → 1.0.8

package/src/components/EmptyState/EmptyState.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="empty-state" :class="`empty-state--${size}`">
+    <div v-if="icon || $slots.icon" class="empty-state__icon">
+      <slot name="icon">
+        <span class="empty-state__icon-text">{{ icon }}</span>
+      </slot>
+    </div>
+
+    <div class="empty-state__content">
+      <h3 v-if="title || $slots.title" class="empty-state__title">
+        <slot name="title">{{ title }}</slot>
+      </h3>
+
+      <p v-if="description || $slots.description" class="empty-state__description">
+        <slot name="description">{{ description }}</slot>
+      </p>
+
+      <div v-if="$slots.default" class="empty-state__body">
+        <slot />
+      </div>
+    </div>
+
+    <div v-if="actionText || $slots.action" class="empty-state__actions">
+      <slot name="action">
+        <button 
+          v-if="actionText"
+          type="button"
+          class="empty-state__button"
+          :class="`empty-state__button--${actionVariant}`"
+          @click="handleAction"
+        >
+          {{ actionText }}
+        </button>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import type { EmptyStateProps } from './types'
+
+withDefaults(defineProps<EmptyStateProps>(), {
+  title: '',
+  description: '',
+  icon: '',
+  actionText: '',
+  actionVariant: 'primary',
+  size: 'medium'
+})
+
+const emit = defineEmits<{
+  action: []
+}>()
+
+const handleAction = () => {
+  emit('action')
+}
+</script>
+
+<style scoped>
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 3rem 1.5rem;
+  color: #6b7280;
+}
+
+.empty-state--small {
+  padding: 1.5rem 1rem;
+}
+
+.empty-state--large {
+  padding: 4rem 2rem;
+}
+
+.empty-state__icon {
+  margin-bottom: 1.5rem;
+  color: #9ca3af;
+}
+
+.empty-state--small .empty-state__icon {
+  margin-bottom: 1rem;
+}
+
+.empty-state__icon-text {
+  font-size: 3rem;
+  line-height: 1;
+}
+
+.empty-state--small .empty-state__icon-text {
+  font-size: 2rem;
+}
+
+.empty-state--large .empty-state__icon-text {
+  font-size: 4rem;
+}
+
+.empty-state__content {
+  max-width: 480px;
+  margin-bottom: 1.5rem;
+}
+
+.empty-state--small .empty-state__content {
+  max-width: 360px;
+  margin-bottom: 1rem;
+}
+
+.empty-state--large .empty-state__content {
+  max-width: 600px;
+  margin-bottom: 2rem;
+}
+
+.empty-state__title {
+  margin: 0 0 0.75rem 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #374151;
+}
+
+.empty-state--small .empty-state__title {
+  font-size: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+.empty-state--large .empty-state__title {
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+.empty-state__description {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: #6b7280;
+}
+
+.empty-state--small .empty-state__description {
+  font-size: 0.8125rem;
+}
+
+.empty-state--large .empty-state__description {
+  font-size: 1rem;
+}
+
+.empty-state__body {
+  margin-top: 1rem;
+}
+
+.empty-state__actions {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.empty-state__button {
+  padding: 0.625rem 1.25rem;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.empty-state--small .empty-state__button {
+  padding: 0.5rem 1rem;
+  font-size: 0.8125rem;
+}
+
+.empty-state--large .empty-state__button {
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+}
+
+.empty-state__button--primary {
+  background: #3b82f6;
+  color: white;
+}
+
+.empty-state__button--primary:hover {
+  background: #2563eb;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3);
+}
+
+.empty-state__button--primary:active {
+  transform: translateY(0);
+}
+
+.empty-state__button--secondary {
+  background: white;
+  color: #374151;
+  border: 1px solid #d1d5db;
+}
+
+.empty-state__button--secondary:hover {
+  background: #f9fafb;
+  border-color: #9ca3af;
+}
+
+@media (max-width: 768px) {
+  .empty-state {
+    padding: 2rem 1rem;
+  }
+
+  .empty-state--large {
+    padding: 3rem 1.5rem;
+  }
+}
+</style>

package/src/components/EmptyState/types.ts

@@ -0,0 +1,8 @@
+export interface EmptyStateProps {
+  title?: string
+  description?: string
+  icon?: string
+  actionText?: string
+  actionVariant?: 'primary' | 'secondary'
+  size?: 'small' | 'medium' | 'large'
+}

package/src/components/ErrorSummary/ErrorSummary.vue

@@ -0,0 +1,78 @@
+<template>
+  <div v-if="errors.length" class="error-summary" role="alert" aria-live="assertive">
+    <div class="error-summary__header">
+      <span class="error-summary__icon">⚠️</span>
+      <div>
+        <h4 class="error-summary__title">{{ title }}</h4>
+        <p class="error-summary__subtitle">Please fix the following {{ errors.length }} issue<span v-if="errors.length !== 1">s</span>:</p>
+      </div>
+    </div>
+    <ul class="error-summary__list">
+      <li v-for="error in errors" :key="error.id" class="error-summary__item">
+        <a :href="`#${error.id}`" class="error-summary__link">
+          {{ error.message }}
+        </a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ErrorSummaryItem } from './types'
+
+withDefaults(defineProps<{
+  title?: string
+  errors: ErrorSummaryItem[]
+}>(), {
+  title: 'There is a problem'
+})
+</script>
+
+<style scoped>
+.error-summary {
+  border: 1px solid #fecaca;
+  background: #fef2f2;
+  border-radius: 0.75rem;
+  padding: 1rem 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
+.error-summary__header {
+  display: flex;
+  gap: 0.75rem;
+  align-items: flex-start;
+}
+
+.error-summary__icon {
+  font-size: 1.25rem;
+}
+
+.error-summary__title {
+  margin: 0;
+  color: #991b1b;
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.error-summary__subtitle {
+  margin: 0.25rem 0 0;
+  color: #7f1d1d;
+  font-size: 0.875rem;
+}
+
+.error-summary__list {
+  margin: 0.75rem 0 0;
+  padding-left: 1.25rem;
+  color: #7f1d1d;
+}
+
+.error-summary__item + .error-summary__item {
+  margin-top: 0.35rem;
+}
+
+.error-summary__link {
+  color: #7f1d1d;
+  text-decoration: underline;
+  font-weight: 600;
+}
+</style>

package/src/components/ErrorSummary/types.ts

@@ -0,0 +1,4 @@
+export type ErrorSummaryItem = {
+  id: string
+  message: string
+}

package/src/components/FormGroup/FormGroup.stories.ts

@@ -0,0 +1,264 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import FormGroup from './FormGroup.vue'
+
+const meta = {
+  title: 'Components/FormGroup',
+  component: FormGroup,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Form field label'
+    },
+    id: {
+      control: 'text',
+      description: 'Form field ID'
+    },
+    hint: {
+      control: 'text',
+      description: 'Helper text'
+    },
+    error: {
+      control: 'text',
+      description: 'Error message'
+    },
+    required: {
+      control: 'boolean',
+      description: 'Whether field is required'
+    }
+  },
+  args: {
+    label: 'Field Label',
+    id: 'field-id',
+    required: false
+  }
+} satisfies Meta<typeof FormGroup>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    label: 'Email Address',
+    id: 'email',
+    hint: 'We\'ll never share your email'
+  },
+  render: (args: any) => ({
+    components: { FormGroup },
+    setup() {
+      return { args }
+    },
+    template: `
+      <FormGroup v-bind="args">
+        <input 
+          :id="args.id"
+          type="email" 
+          placeholder="Enter your email"
+          style="width: 100%; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem;"
+        />
+      </FormGroup>
+    `
+  })
+}
+
+export const Required: Story = {
+  args: {
+    label: 'Password',
+    id: 'password',
+    required: true,
+    hint: 'Must be at least 8 characters'
+  },
+  render: (args: any) => ({
+    components: { FormGroup },
+    setup() {
+      return { args }
+    },
+    template: `
+      <FormGroup v-bind="args">
+        <input 
+          :id="args.id"
+          type="password" 
+          placeholder="Enter your password"
+          style="width: 100%; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem;"
+        />
+      </FormGroup>
+    `
+  })
+}
+
+export const WithError: Story = {
+  args: {
+    label: 'Username',
+    id: 'username',
+    error: 'This username is already taken',
+    required: true
+  },
+  render: (args: any) => ({
+    components: { FormGroup },
+    setup() {
+      return { args }
+    },
+    template: `
+      <FormGroup v-bind="args">
+        <input 
+          :id="args.id"
+          type="text" 
+          value="john_doe"
+          placeholder="Enter username"
+          style="width: 100%; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem;"
+        />
+      </FormGroup>
+    `
+  })
+}
+
+export const WithTextarea: Story = {
+  args: {
+    label: 'Description',
+    id: 'description',
+    hint: 'Brief description of your project'
+  },
+  render: (args: any) => ({
+    components: { FormGroup },
+    setup() {
+      return { args }
+    },
+    template: `
+      <FormGroup v-bind="args">
+        <textarea 
+          :id="args.id"
+          rows="4"
+          placeholder="Enter description"
+          style="width: 100%; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-family: inherit;"
+        />
+      </FormGroup>
+    `
+  })
+}
+
+export const WithSelect: Story = {
+  args: {
+    label: 'Country',
+    id: 'country',
+    required: true
+  },
+  render: (args: any) => ({
+    components: { FormGroup },
+    setup() {
+      return { args }
+    },
+    template: `
+      <FormGroup v-bind="args">
+        <select 
+          :id="args.id"
+          style="width: 100%; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem;"
+        >
+          <option value="">Select a country</option>
+          <option value="us">United States</option>
+          <option value="uk">United Kingdom</option>
+          <option value="ca">Canada</option>
+        </select>
+      </FormGroup>
+    `
+  })
+}
+
+export const CompleteForm: Story = {
+  render: () => ({
+    components: { FormGroup },
+    setup() {
+      const email = ref('')
+      const password = ref('')
+      const emailError = ref('')
+
+      const validateEmail = () => {
+        if (!email.value.includes('@')) {
+          emailError.value = 'Please enter a valid email'
+        } else {
+          emailError.value = ''
+        }
+      }
+
+      return { email, password, emailError, validateEmail }
+    },
+    template: `
+      <form style="max-width: 400px;">
+        <FormGroup 
+          label="Email" 
+          id="form-email"
+          :error="emailError"
+          required
+          hint="Enter your email address"
+        >
+          <input 
+            id="form-email"
+            v-model="email"
+            @blur="validateEmail"
+            type="email" 
+            placeholder="you@example.com"
+            style="width: 100%; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem;"
+          />
+        </FormGroup>
+
+        <FormGroup 
+          label="Password" 
+          id="form-password"
+          required
+          hint="Must be at least 8 characters"
+        >
+          <input 
+            id="form-password"
+            v-model="password"
+            type="password" 
+            placeholder="••••••••"
+            style="width: 100%; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem;"
+          />
+        </FormGroup>
+
+        <FormGroup 
+          label="Bio" 
+          id="form-bio"
+          hint="Tell us a bit about yourself"
+        >
+          <textarea 
+            id="form-bio"
+            rows="3"
+            placeholder="I am..."
+            style="width: 100%; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-family: inherit;"
+          />
+        </FormGroup>
+
+        <button 
+          type="submit"
+          style="width: 100%; padding: 0.625rem; background: #667eea; color: white; border: none; border-radius: 0.375rem; font-weight: 600; cursor: pointer;"
+        >
+          Submit
+        </button>
+      </form>
+    `
+  })
+}
+
+export const NoLabel: Story = {
+  args: {
+    id: 'search',
+    hint: 'Search for anything...'
+  },
+  render: (args: any) => ({
+    components: { FormGroup },
+    setup() {
+      return { args }
+    },
+    template: `
+      <FormGroup v-bind="args">
+        <input 
+          :id="args.id"
+          type="search" 
+          placeholder="Search..."
+          style="width: 100%; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem;"
+        />
+      </FormGroup>
+    `
+  })
+}

package/src/components/FormGroup/FormGroup.test.ts

@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import FormGroup from './FormGroup.vue'
+
+describe('FormGroup', () => {
+  it('renders label when provided', () => {
+    const wrapper = mount(FormGroup, {
+      props: {
+        label: 'Email Address'
+      }
+    })
+    expect(wrapper.find('.form-group__label').text()).toContain('Email Address')
+  })
+
+  it('shows required indicator when required prop is true', () => {
+    const wrapper = mount(FormGroup, {
+      props: {
+        label: 'Name',
+        required: true
+      }
+    })
+    expect(wrapper.find('.form-group__required').exists()).toBe(true)
+  })
+
+  it('displays hint text when provided', () => {
+    const wrapper = mount(FormGroup, {
+      props: {
+        hint: 'This is a helpful hint'
+      }
+    })
+    expect(wrapper.find('.form-group__hint').text()).toBe('This is a helpful hint')
+  })
+
+  it('displays error message and adds error class', () => {
+    const wrapper = mount(FormGroup, {
+      props: {
+        error: 'This field is required'
+      }
+    })
+    expect(wrapper.find('.form-group__error').text()).toBe('This field is required')
+    expect(wrapper.classes()).toContain('form-group--error')
+  })
+
+  it('hides hint when error is present', () => {
+    const wrapper = mount(FormGroup, {
+      props: {
+        hint: 'Helpful hint',
+        error: 'Error message'
+      }
+    })
+    expect(wrapper.find('.form-group__hint').exists()).toBe(false)
+    expect(wrapper.find('.form-group__error').exists()).toBe(true)
+  })
+
+  it('renders slot content', () => {
+    const wrapper = mount(FormGroup, {
+      slots: {
+        default: '<input type="text" />'
+      }
+    })
+    expect(wrapper.find('input').exists()).toBe(true)
+  })
+})

package/src/components/FormGroup/FormGroup.vue

@@ -0,0 +1,58 @@
+<template>
+  <div :class="['form-group', { 'form-group--error': error }]">
+    <label v-if="label" :for="id" class="form-group__label">
+      {{ label }}
+    </label>
+    <slot />
+    <small v-if="hint && !error" class="form-group__hint">{{ hint }}</small>
+    <small v-if="error" class="form-group__error">{{ error }}</small>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  label?: string
+  id?: string
+  hint?: string
+  error?: string
+  required?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  label: '',
+  id: '',
+  hint: '',
+  error: '',
+  required: false
+})
+</script>
+
+<style scoped>
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-group__label {
+  display: block;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: #374151;
+  font-size: 0.9375rem;
+}
+
+
+.form-group__hint {
+  display: block;
+  margin-top: 0.25rem;
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+
+.form-group__error {
+  display: block;
+  margin-top: 0.25rem;
+  color: #dc2626;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+</style>