@davidbirchall/core 1.0.8 → 1.0.9

package/src/components/Select/Select.vue

@@ -1,147 +0,0 @@
-<template>
-  <div class="select-wrapper">
-    <label v-if="label" :for="selectId" class="select-label">
-      {{ label }}
-    </label>
-    <select
-      :id="selectId"
-      :value="modelValue"
-      :disabled="disabled"
-      :required="required"
-      :class="[
-        'select-field', 
-        { 
-          'select-field--error': error, 
-          'select-field--disabled': disabled,
-          'select-field--placeholder': !modelValue || modelValue === ''
-        }
-      ]"
-      @change="handleChange"
-    >
-      <option v-if="placeholder" value="" disabled>{{ placeholder }}</option>
-      <option
-        v-for="option in options"
-        :key="option.value"
-        :value="option.value"
-      >
-        {{ option.label }}
-      </option>
-    </select>
-    <span v-if="error" class="select-error">{{ error }}</span>
-    <span v-if="hint && !error" class="select-hint">{{ hint }}</span>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-let componentIdCounter = 0
-
-export interface SelectOption {
-  value: string | number
-  label: string
-}
-
-export interface SelectProps {
-  modelValue?: string | number
-  id?: string
-  label?: string
-  options?: SelectOption[]
-  placeholder?: string
-  disabled?: boolean
-  required?: boolean
-  error?: string
-  hint?: string
-}
-
-const props = withDefaults(defineProps<SelectProps>(), {
-  options: () => [],
-  disabled: false,
-  required: false
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string]
-}>()
-
-const generatedId = `select-${++componentIdCounter}`
-const selectId = computed(() => props.id || generatedId)
-
-const handleChange = (event: Event) => {
-  const target = event.target as HTMLSelectElement
-  emit('update:modelValue', target.value)
-}
-</script>
-
-<style scoped>
-.select-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-}
-
-.select-label {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: #374151;
-}
-
-
-.select-field {
-  padding: 0.75rem 0.875rem;
-  font-size: 1rem;
-  line-height: 1.5;
-  height: 48px;
-  border: 1px solid #d1d5db;
-  border-radius: 0.375rem;
-  outline: none;
-  transition: all 0.2s ease-in-out;
-  background: white;
-  color: #1f2937;
-  cursor: pointer;
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 0.75rem center;
-  padding-right: 2.5rem;
-  box-sizing: border-box;
-}
-
-/* When no value is selected (showing placeholder), make text gray */
-.select-field--placeholder {
-  color: #9ca3af;
-}
-
-.select-field:focus {
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.select-field--error {
-  border-color: #fca5a5;
-  border-bottom: 2px solid #dc2626;
-  background-color: #fef2f2;
-}
-
-.select-field--error:focus {
-  border-color: #fca5a5;
-  border-bottom: 2px solid #dc2626;
-  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
-}
-
-.select-field--disabled {
-  background-color: #f3f4f6;
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.select-error {
-  font-size: 0.75rem;
-  color: #ef4444;
-}
-
-.select-hint {
-  font-size: 0.75rem;
-  color: #6b7280;
-}
-</style>

package/src/components/Select/types.ts

@@ -1,16 +0,0 @@
-export interface SelectOption {
-  value: string | number
-  label: string
-}
-
-export interface SelectProps {
-  modelValue?: string | number
-  id?: string
-  label?: string
-  options?: SelectOption[]
-  placeholder?: string
-  disabled?: boolean
-  required?: boolean
-  error?: string
-  hint?: string
-}

package/src/components/StatCard/StatCard.stories.ts

@@ -1,274 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import { ref } from 'vue'
-import StatCard from './StatCard.vue'
-
-const meta = {
-  title: 'Components/StatCard',
-  component: StatCard,
-  tags: ['autodocs'],
-  argTypes: {
-    title: {
-      control: 'text',
-      description: 'Card title'
-    },
-    value: {
-      control: 'text',
-      description: 'Stat value'
-    },
-    variant: {
-      control: 'select',
-      options: ['default', 'success', 'warning', 'danger'],
-      description: 'Card color variant'
-    },
-    prefix: {
-      control: 'text',
-      description: 'Value prefix (e.g., $)'
-    },
-    suffix: {
-      control: 'text',
-      description: 'Value suffix (e.g., %)'
-    },
-    editable: {
-      control: 'boolean',
-      description: 'Whether the value is editable'
-    },
-    onInput: { action: 'input' },
-    onChange: { action: 'change' }
-  },
-  args: {
-    variant: 'default',
-    editable: false
-  }
-} satisfies Meta<typeof StatCard>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    title: 'Total Revenue',
-    value: '45,231'
-  }
-}
-
-export const WithPrefix: Story = {
-  args: {
-    title: 'Total Sales',
-    value: '12,450',
-    prefix: '$'
-  }
-}
-
-export const WithSuffix: Story = {
-  args: {
-    title: 'Conversion Rate',
-    value: '3.24',
-    suffix: '%'
-  }
-}
-
-export const Success: Story = {
-  args: {
-    title: 'Active Users',
-    value: '2,345',
-    variant: 'success'
-  }
-}
-
-export const Warning: Story = {
-  args: {
-    title: 'Pending Orders',
-    value: '47',
-    variant: 'warning'
-  }
-}
-
-export const Danger: Story = {
-  args: {
-    title: 'Failed Payments',
-    value: '8',
-    variant: 'danger'
-  }
-}
-
-export const WithTrendUp: Story = {
-  args: {
-    title: 'Revenue Growth',
-    value: '23,456',
-    prefix: '$',
-    trend: {
-      value: 12.5,
-      direction: 'up'
-    }
-  }
-}
-
-export const WithTrendDown: Story = {
-  args: {
-    title: 'Bounce Rate',
-    value: '43.2',
-    suffix: '%',
-    variant: 'danger',
-    trend: {
-      value: 8.3,
-      direction: 'down'
-    }
-  }
-}
-
-export const Editable: Story = {
-  args: {
-    title: 'Budget',
-    value: '5000',
-    prefix: '$',
-    editable: true
-  },
-  render: (args: any) => ({
-    components: { StatCard },
-    setup() {
-      const value = ref(args.value)
-      
-      const handleChange = (newValue: string | number) => {
-        value.value = newValue
-        if (args.onChange) {
-          args.onChange(newValue)
-        }
-      }
-
-      return { args, value, handleChange }
-    },
-    template: `
-      <StatCard 
-        v-bind="args" 
-        :value="value"
-        @change="handleChange"
-      />
-    `
-  })
-}
-
-export const NegativeValue: Story = {
-  args: {
-    title: 'Net Income',
-    value: '-1,234',
-    prefix: '$',
-    variant: 'danger'
-  }
-}
-
-export const LargeNumber: Story = {
-  args: {
-    title: 'Total Impressions',
-    value: '1,234,567',
-    variant: 'success'
-  }
-}
-
-export const Decimal: Story = {
-  args: {
-    title: 'Average Rating',
-    value: '4.8',
-    suffix: '/ 5'
-  }
-}
-
-export const Dashboard: Story = {
-  render: () => ({
-    components: { StatCard },
-    template: `
-      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;">
-        <StatCard 
-          title="Total Revenue" 
-          value="45,231" 
-          prefix="$"
-          variant="success"
-          :trend="{ value: 12.5, direction: 'up' }"
-        />
-        <StatCard 
-          title="Active Users" 
-          value="2,345"
-          :trend="{ value: 8.2, direction: 'up' }"
-        />
-        <StatCard 
-          title="Conversion Rate" 
-          value="3.24" 
-          suffix="%"
-          :trend="{ value: 0.8, direction: 'down' }"
-        />
-        <StatCard 
-          title="Pending Orders" 
-          value="47"
-          variant="warning"
-        />
-      </div>
-    `
-  })
-}
-
-export const EditableDashboard: Story = {
-  render: () => ({
-    components: { StatCard },
-    setup() {
-      const budget = ref('5000')
-      const target = ref('10000')
-      const employees = ref('25')
-
-      return { budget, target, employees }
-    },
-    template: `
-      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;">
-        <StatCard 
-          title="Monthly Budget" 
-          v-model:value="budget"
-          prefix="$"
-          editable
-          @change="(val) => console.log('Budget changed:', val)"
-        />
-        <StatCard 
-          title="Sales Target" 
-          v-model:value="target"
-          prefix="$"
-          editable
-          variant="success"
-          @change="(val) => console.log('Target changed:', val)"
-        />
-        <StatCard 
-          title="Team Size" 
-          v-model:value="employees"
-          editable
-          @change="(val) => console.log('Employees changed:', val)"
-        />
-      </div>
-    `
-  })
-}
-
-export const AllVariants: Story = {
-  render: () => ({
-    components: { StatCard },
-    template: `
-      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;">
-        <StatCard 
-          title="Default" 
-          value="1,234"
-          variant="default"
-        />
-        <StatCard 
-          title="Success" 
-          value="5,678"
-          variant="success"
-        />
-        <StatCard 
-          title="Warning" 
-          value="910"
-          variant="warning"
-        />
-        <StatCard 
-          title="Danger" 
-          value="42"
-          variant="danger"
-        />
-      </div>
-    `
-  })
-}

package/src/components/StatCard/StatCard.vue

@@ -1,226 +0,0 @@
-<template>
-  <div class="stat-card" :class="`stat-card--${variant}`">
-    <h3 class="stat-card__title">{{ title }}</h3>
-    
-    <div v-if="editable" class="stat-card__input-wrapper">
-      <span v-if="prefix" class="stat-card__prefix">{{ prefix }}</span>
-      <input
-        :value="value"
-        @input="handleInput"
-        @change="handleChange"
-        type="number"
-        class="stat-card__input"
-        :placeholder="String(value)"
-      />
-      <span v-if="suffix" class="stat-card__suffix">{{ suffix }}</span>
-    </div>
-    
-    <div v-else class="stat-card__value-wrapper">
-      <p class="stat-card__value" :class="{ 'stat-card__value--negative': isNegative }">
-        <span v-if="prefix" class="stat-card__prefix">{{ prefix }}</span>
-        <span>{{ formattedValue }}</span>
-        <span v-if="suffix" class="stat-card__suffix">{{ suffix }}</span>
-      </p>
-      
-      <div v-if="trend" class="stat-card__trend" :class="`stat-card__trend--${trend.direction}`">
-        <span class="stat-card__trend-icon">{{ trend.direction === 'up' ? '↑' : '↓' }}</span>
-        <span class="stat-card__trend-value">{{ Math.abs(trend.value) }}%</span>
-      </div>
-    </div>
-    
-    <slot name="footer" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { StatCardProps } from './types'
-
-const props = withDefaults(defineProps<StatCardProps>(), {
-  variant: 'default',
-  prefix: '',
-  suffix: '',
-  editable: false
-})
-
-const emit = defineEmits<{
-  input: [value: number | string]
-  change: [value: number | string]
-}>()
-
-const formattedValue = computed(() => {
-  if (typeof props.value === 'number') {
-    return props.value.toLocaleString()
-  }
-  return props.value
-})
-
-const isNegative = computed(() => {
-  return typeof props.value === 'number' && props.value < 0
-})
-
-const handleInput = (event: Event) => {
-  const target = event.target as HTMLInputElement
-  const value = target.valueAsNumber || target.value
-  emit('input', value)
-}
-
-const handleChange = (event: Event) => {
-  const target = event.target as HTMLInputElement
-  const value = target.valueAsNumber || target.value
-  emit('change', value)
-}
-</script>
-
-<style scoped>
-.stat-card {
-  background: white;
-  border: 1px solid #e5e7eb;
-  border-radius: 12px;
-  padding: 1.5rem;
-  transition: all 0.2s ease;
-}
-
-.stat-card:hover {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  transform: translateY(-2px);
-}
-
-.stat-card__title {
-  margin: 0 0 0.75rem 0;
-  font-size: 0.875rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: #6b7280;
-}
-
-.stat-card__value-wrapper {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 0.5rem;
-}
-
-.stat-card__value {
-  margin: 0;
-  font-size: 2rem;
-  font-weight: 700;
-  color: #111827;
-  display: flex;
-  align-items: baseline;
-  gap: 0.25rem;
-}
-
-.stat-card__value--negative {
-  color: #dc2626;
-}
-
-.stat-card__prefix {
-  font-size: 1.5rem;
-  color: #6b7280;
-  font-weight: 500;
-}
-
-.stat-card__suffix {
-  font-size: 1rem;
-  color: #6b7280;
-  font-weight: 500;
-  margin-left: 0.25rem;
-}
-
-.stat-card__input-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  background: #f9fafb;
-  border: 2px solid #e5e7eb;
-  border-radius: 8px;
-  padding: 0.5rem 0.75rem;
-  transition: border-color 0.2s;
-}
-
-.stat-card__input-wrapper:focus-within {
-  border-color: #3b82f6;
-}
-
-.stat-card__input {
-  flex: 1;
-  border: none;
-  background: transparent;
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: #111827;
-  outline: none;
-  min-width: 0;
-}
-
-.stat-card__input::placeholder {
-  color: #9ca3af;
-}
-
-/* Remove spinner buttons */
-.stat-card__input::-webkit-outer-spin-button,
-.stat-card__input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.stat-card__input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.stat-card__trend {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  padding: 0.25rem 0.5rem;
-  border-radius: 4px;
-}
-
-.stat-card__trend--up {
-  color: #059669;
-  background: #d1fae5;
-}
-
-.stat-card__trend--down {
-  color: #dc2626;
-  background: #fee2e2;
-}
-
-.stat-card__trend-icon {
-  font-size: 1rem;
-}
-
-/* Variants */
-.stat-card--success {
-  border-color: #10b981;
-  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
-}
-
-.stat-card--warning {
-  border-color: #f59e0b;
-  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
-}
-
-.stat-card--danger {
-  border-color: #ef4444;
-  background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
-}
-
-@media (max-width: 768px) {
-  .stat-card {
-    padding: 1rem;
-  }
-
-  .stat-card__value {
-    font-size: 1.5rem;
-  }
-
-  .stat-card__input {
-    font-size: 1.25rem;
-  }
-}
-</style>

package/src/components/StatCard/types.ts

@@ -1,12 +0,0 @@
-export interface StatCardProps {
-  title: string
-  value: string | number
-  variant?: 'default' | 'success' | 'warning' | 'danger'
-  prefix?: string
-  suffix?: string
-  editable?: boolean
-  trend?: {
-    value: number
-    direction: 'up' | 'down'
-  }
-}