@davidbirchall/core 1.0.8 → 1.0.9

package/src/components/EmptyState/EmptyState.vue

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

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

package/src/components/ErrorSummary/ErrorSummary.vue

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

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

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

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

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

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