@davidbirchall/core 1.0.6 → 1.0.8

package/.storybook/main.ts

@@ -0,0 +1,18 @@
+import type { StorybookConfig } from '@storybook/vue3-vite'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-links'
+  ],
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {}
+  },
+  docs: {
+    autodocs: 'tag'
+  }
+}
+
+export default config

package/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/vue3'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    }
+  }
+}
+
+export default preview

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@davidbirchall/core",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "Vue 3 component library with TypeScript",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -17,9 +17,6 @@
     },
     "./core.css": "./dist/core.css"
   },
-  "files": [
-    "dist"
-  ],
   "scripts": {
     "dev": "vite build --watch",
     "build": "vite build && tsc --emitDeclarationOnly",

package/src/components/Badge/Badge.stories.ts

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

package/src/components/Badge/Badge.test.ts

@@ -0,0 +1,57 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Badge from './Badge.vue'
+
+describe('Badge', () => {
+  it('renders slot content', () => {
+    const wrapper = mount(Badge, {
+      slots: {
+        default: 'New'
+      }
+    })
+    expect(wrapper.text()).toBe('New')
+  })
+
+  it('applies primary variant by default', () => {
+    const wrapper = mount(Badge)
+    expect(wrapper.classes()).toContain('badge--primary')
+  })
+
+  it('applies correct variant class', () => {
+    const variants = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'] as const
+    
+    variants.forEach(variant => {
+      const wrapper = mount(Badge, {
+        props: { variant }
+      })
+      expect(wrapper.classes()).toContain(`badge--${variant}`)
+    })
+  })
+
+  it('applies medium size by default', () => {
+    const wrapper = mount(Badge)
+    expect(wrapper.classes()).toContain('badge--medium')
+  })
+
+  it('applies correct size class', () => {
+    const sizes = ['small', 'medium', 'large'] as const
+    
+    sizes.forEach(size => {
+      const wrapper = mount(Badge, {
+        props: { size }
+      })
+      expect(wrapper.classes()).toContain(`badge--${size}`)
+    })
+  })
+
+  it('combines variant and size classes', () => {
+    const wrapper = mount(Badge, {
+      props: {
+        variant: 'success',
+        size: 'large'
+      }
+    })
+    expect(wrapper.classes()).toContain('badge--success')
+    expect(wrapper.classes()).toContain('badge--large')
+  })
+})

package/src/components/Badge/Badge.vue

@@ -0,0 +1,79 @@
+<template>
+  <span :class="['badge', `badge--${variant}`, `badge--${size}`]">
+    <slot />
+  </span>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'
+  size?: 'small' | 'medium' | 'large'
+}
+
+withDefaults(defineProps<Props>(), {
+  variant: 'primary',
+  size: 'medium'
+})
+</script>
+
+<style scoped>
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  border-radius: 0.375rem;
+  white-space: nowrap;
+  transition: all 0.2s;
+}
+
+/* Sizes */
+.badge--small {
+  padding: 0.125rem 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1.25;
+}
+
+.badge--medium {
+  padding: 0.25rem 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25;
+}
+
+.badge--large {
+  padding: 0.375rem 1rem;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+}
+
+/* Variants */
+.badge--primary {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+
+.badge--secondary {
+  background: #f3f4f6;
+  color: #374151;
+}
+
+.badge--success {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.badge--warning {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.badge--danger {
+  background: #fee2e2;
+  color: #991b1b;
+}
+
+.badge--info {
+  background: #dbeafe;
+  color: #1e40af;
+}
+</style>

package/src/components/Button/Button.stories.ts

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Button from './Button.vue'
+
+const meta = {
+  title: 'Components/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'danger'],
+      description: 'Button variant style'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disabled state'
+    },
+    onClick: { action: 'clicked' }
+  },
+  args: {
+    variant: 'primary',
+    disabled: false
+  }
+} satisfies Meta<typeof Button>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary'
+  },
+  render: (args: any) => ({
+    components: { Button },
+    setup() {
+      return { args }
+    },
+    template: '<Button v-bind="args">Click me</Button>'
+  })
+}
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary'
+  },
+  render: (args: any) => ({
+    components: { Button },
+    setup() {
+      return { args }
+    },
+    template: '<Button v-bind="args">Click me</Button>'
+  })
+}
+
+export const Danger: Story = {
+  args: {
+    variant: 'danger'
+  },
+  render: (args: any) => ({
+    components: { Button },
+    setup() {
+      return { args }
+    },
+    template: '<Button v-bind="args">Delete</Button>'
+  })
+}
+
+export const Disabled: Story = {
+  args: {
+    variant: 'primary',
+    disabled: true
+  },
+  render: (args: any) => ({
+    components: { Button },
+    setup() {
+      return { args }
+    },
+    template: '<Button v-bind="args">Disabled</Button>'
+  })
+}

package/src/components/Button/Button.test.ts

@@ -0,0 +1,145 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import Button from './Button.vue'
+
+describe('Button', () => {
+  describe('rendering', () => {
+    it('renders slot content', () => {
+      render(Button, {
+        slots: {
+          default: 'Click me'
+        }
+      })
+
+      expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument()
+    })
+
+    it('applies primary variant class by default', () => {
+      render(Button, {
+        slots: { default: 'Button' }
+      })
+      
+      const button = screen.getByRole('button')
+      expect(button).toHaveClass('btn--primary')
+    })
+
+    it('applies correct variant class', () => {
+      render(Button, {
+        props: {
+          variant: 'secondary'
+        },
+        slots: { default: 'Button' }
+      })
+
+      const button = screen.getByRole('button')
+      expect(button).toHaveClass('btn--secondary')
+      expect(button).not.toHaveClass('btn--primary')
+    })
+
+    it('applies danger variant class', () => {
+      render(Button, {
+        props: {
+          variant: 'danger'
+        },
+        slots: { default: 'Button' }
+      })
+
+      const button = screen.getByRole('button')
+      expect(button).toHaveClass('btn--danger')
+    })
+
+    it('applies disabled class when disabled prop is true', () => {
+      render(Button, {
+        props: {
+          disabled: true
+        },
+        slots: { default: 'Button' }
+      })
+
+      const button = screen.getByRole('button')
+      expect(button).toHaveClass('btn--disabled')
+    })
+
+    it('sets disabled attribute when disabled prop is true', () => {
+      render(Button, {
+        props: {
+          disabled: true
+        },
+        slots: { default: 'Button' }
+      })
+
+      const button = screen.getByRole('button')
+      expect(button).toBeDisabled()
+    })
+  })
+
+  describe('interactions', () => {
+    it('emits click event when clicked', async () => {
+      const user = userEvent.setup()
+      const clickHandler = vi.fn()
+      
+      render(Button, {
+        props: {
+          onClick: clickHandler
+        },
+        slots: { default: 'Click me' }
+      })
+
+      const button = screen.getByRole('button')
+      await user.click(button)
+
+      expect(clickHandler).toHaveBeenCalledTimes(1)
+      expect(clickHandler).toHaveBeenCalledWith(expect.any(MouseEvent))
+    })
+
+    it('does not call click handler when disabled', async () => {
+      const user = userEvent.setup()
+      const clickHandler = vi.fn()
+      
+      render(Button, {
+        props: {
+          disabled: true,
+          onClick: clickHandler
+        },
+        slots: { default: 'Button' }
+      })
+
+      const button = screen.getByRole('button')
+      await user.click(button)
+
+      expect(clickHandler).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('props validation', () => {
+    it('accepts all valid variant values', () => {
+      const variants = ['primary', 'secondary', 'danger'] as const
+
+      variants.forEach(variant => {
+        const { container } = render(Button, {
+          props: {
+            variant
+          },
+          slots: { default: 'Button' }
+        })
+
+        const button = container.querySelector('button')
+        expect(button).toHaveClass(`btn--${variant}`)
+      })
+    })
+
+    it('handles boolean disabled prop', () => {
+      render(Button, {
+        props: {
+          disabled: false
+        },
+        slots: { default: 'Button' }
+      })
+
+      const button = screen.getByRole('button')
+      expect(button).not.toHaveClass('btn--disabled')
+      expect(button).not.toBeDisabled()
+    })
+  })
+})

package/src/components/Button/Button.vue

@@ -0,0 +1,108 @@
+<template>
+  <component
+    :is="url ? 'a' : 'button'"
+    :href="url"
+    :target="url ? target : undefined"
+    :rel="url && target === '_blank' ? 'noopener noreferrer' : undefined"
+    :class="['btn', `btn--${variant}`, { 'btn--disabled': disabled }]"
+    :disabled="!url && disabled"
+    :aria-disabled="disabled"
+    v-on="!url ? { click: handleClick } : {}"
+  >
+    <slot />
+    <span v-if="url && target === '_blank'" class="sr-only">(opens in new window)</span>
+  </component>
+</template>
+
+<script setup lang="ts">
+export interface ButtonProps {
+  variant?: 'primary' | 'secondary' | 'danger'
+  disabled?: boolean
+  url?: string
+  target?: '_self' | '_blank'
+}
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+  variant: 'primary',
+  disabled: false,
+  target: '_self'
+})
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+const handleClick = (event: MouseEvent) => {
+  if (props.disabled) {
+    event.preventDefault()
+    event.stopImmediatePropagation()
+  } else {
+    emit('click', event)
+  }
+}
+</script>
+
+<style scoped>
+.btn {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 0.25rem;
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+}
+
+.btn:hover:not(.btn--disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.btn--primary {
+  background-color: #3b82f6;
+  color: white;
+}
+
+.btn--primary:hover:not(.btn--disabled) {
+  background-color: #2563eb;
+}
+
+.btn--secondary {
+  background-color: #6b7280;
+  color: white;
+}
+
+.btn--secondary:hover:not(.btn--disabled) {
+  background-color: #4b5563;
+}
+
+.btn--danger {
+  background-color: #ef4444;
+  color: white;
+}
+
+.btn--danger:hover:not(.btn--disabled) {
+  background-color: #dc2626;
+}
+
+.btn--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+</style>

package/src/components/Button/types.ts

@@ -0,0 +1,4 @@
+export interface ButtonProps {
+  variant?: 'primary' | 'secondary' | 'danger'
+  disabled?: boolean
+}