@davidbirchall/core 1.0.6 → 1.0.8

package/src/components/Select/Select.vue

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

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

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

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

@@ -0,0 +1,12 @@
+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'
+  }
+}