ima-claude 2.9.0

package/plugins/ima-claude/skills/js-fp-vue/references/complete-examples.md

@@ -0,0 +1,397 @@
+# Complete Component Examples
+
+Full working examples demonstrating Vue FP patterns.
+
+## Table of Contents
+
+1. [Product Card Component](#product-card-component)
+2. [User Dashboard with Wrapper](#user-dashboard-with-wrapper)
+3. [Form with Validation](#form-with-validation)
+
+---
+
+## Product Card Component
+
+Complete example with pure composable, component, and styling.
+
+```vue
+<!-- ProductCard.vue -->
+<script setup lang="ts">
+import type { Ref } from 'vue'
+import { computed, readonly, toRef } from 'vue'
+
+interface Product {
+  id: string
+  name: string
+  price: number
+  inStock: boolean
+}
+
+// ───── Pure composable ─────
+const useProductLogic = (product: Readonly<Ref<Product>>) => {
+  const displayData = computed(() => ({
+    ...product.value,
+    formattedPrice: `$${product.value.price.toFixed(2)}`,
+    availability: product.value.inStock ? 'In Stock' : 'Out of Stock'
+  }))
+
+  const cssClasses = computed(() => ({
+    card: `product-card ${product.value.inStock ? 'in-stock' : 'out-of-stock'}`,
+    price: `product-price ${product.value.inStock ? 'available' : 'unavailable'}`
+  }))
+
+  return { displayData, cssClasses }
+}
+
+// ───── Component setup ─────
+const props = defineProps<{
+  product: Product
+}>()
+
+const emit = defineEmits<{
+  addToCart: [productId: string]
+}>()
+
+const { displayData, cssClasses } = useProductLogic(
+  readonly(toRef(props, 'product'))
+)
+
+const handleAddToCart = () => {
+  if (props.product.inStock) {
+    emit('addToCart', props.product.id)
+  }
+}
+</script>
+
+<template>
+  <div :class="cssClasses.card">
+    <h3>{{ displayData.name }}</h3>
+    <p :class="cssClasses.price">{{ displayData.formattedPrice }}</p>
+    <p class="availability">{{ displayData.availability }}</p>
+    <button
+      @click="handleAddToCart"
+      :disabled="!product.inStock"
+    >
+      Add to Cart
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.product-card {
+  border: 1px solid #ddd;
+  padding: 1rem;
+  border-radius: 8px;
+}
+
+.product-card.in-stock {
+  border-color: #28a745;
+}
+
+.product-card.out-of-stock {
+  opacity: 0.6;
+}
+
+.product-price.unavailable {
+  text-decoration: line-through;
+}
+</style>
+```
+
+---
+
+## User Dashboard with Wrapper
+
+Pure component + wrapper pattern with API integration.
+
+### Pure Component
+
+```vue
+<!-- UserListPure.vue -->
+<script setup lang="ts">
+interface User {
+  id: string
+  name: string
+  email: string
+  role: 'admin' | 'user'
+}
+
+defineProps<{
+  users: User[]
+  selectedId: string | null
+}>()
+
+const emit = defineEmits<{
+  select: [userId: string]
+  delete: [userId: string]
+}>()
+</script>
+
+<template>
+  <ul class="user-list">
+    <li
+      v-for="user in users"
+      :key="user.id"
+      :class="{ selected: user.id === selectedId }"
+      @click="emit('select', user.id)"
+    >
+      <span class="name">{{ user.name }}</span>
+      <span class="email">{{ user.email }}</span>
+      <span :class="['role', user.role]">{{ user.role }}</span>
+      <button @click.stop="emit('delete', user.id)">Delete</button>
+    </li>
+  </ul>
+</template>
+```
+
+### Wrapper Component
+
+```vue
+<!-- UserDashboard.vue -->
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import UserListPure from './UserListPure.vue'
+
+interface User {
+  id: string
+  name: string
+  email: string
+  role: 'admin' | 'user'
+}
+
+// Injected or imported API
+const userApi = {
+  getUsers: async (): Promise<User[]> => {
+    const response = await fetch('/api/users')
+    return response.json()
+  },
+  deleteUser: async (id: string): Promise<void> => {
+    await fetch(`/api/users/${id}`, { method: 'DELETE' })
+  }
+}
+
+// State
+const users = ref<User[]>([])
+const selectedId = ref<string | null>(null)
+const loading = ref(true)
+const error = ref<Error | null>(null)
+
+// Side effects isolated to wrapper
+const fetchUsers = async () => {
+  loading.value = true
+  error.value = null
+  try {
+    users.value = await userApi.getUsers()
+  } catch (e) {
+    error.value = e as Error
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleSelect = (userId: string) => {
+  selectedId.value = userId
+}
+
+const handleDelete = async (userId: string) => {
+  try {
+    await userApi.deleteUser(userId)
+    await fetchUsers() // Refresh list
+    if (selectedId.value === userId) {
+      selectedId.value = null
+    }
+  } catch (e) {
+    error.value = e as Error
+  }
+}
+
+onMounted(fetchUsers)
+</script>
+
+<template>
+  <div class="user-dashboard">
+    <h2>Users</h2>
+
+    <div v-if="loading" class="loading">Loading users...</div>
+
+    <div v-else-if="error" class="error">
+      Error: {{ error.message }}
+      <button @click="fetchUsers">Retry</button>
+    </div>
+
+    <UserListPure
+      v-else
+      :users="users"
+      :selected-id="selectedId"
+      @select="handleSelect"
+      @delete="handleDelete"
+    />
+  </div>
+</template>
+```
+
+---
+
+## Form with Validation
+
+Pure validation logic with form component.
+
+### Validation Composable
+
+```typescript
+// composables/useFormValidation.ts
+import type { Ref } from 'vue'
+import { computed, ref } from 'vue'
+
+type Validator<T> = (value: T) => string | null
+
+interface FieldConfig<T> {
+  value: Ref<T>
+  validators: Validator<T>[]
+}
+
+export const useFormValidation = <T extends Record<string, unknown>>(
+  fields: { [K in keyof T]: FieldConfig<T[K]> }
+) => {
+  const touched = ref<Record<keyof T, boolean>>(
+    Object.keys(fields).reduce((acc, key) => ({ ...acc, [key]: false }), {} as Record<keyof T, boolean>)
+  )
+
+  const errors = computed(() => {
+    const result: Partial<Record<keyof T, string>> = {}
+
+    for (const [key, config] of Object.entries(fields) as [keyof T, FieldConfig<T[keyof T]>][]) {
+      for (const validator of config.validators) {
+        const error = validator(config.value.value)
+        if (error) {
+          result[key] = error
+          break
+        }
+      }
+    }
+
+    return result
+  })
+
+  const isValid = computed(() => Object.keys(errors.value).length === 0)
+
+  const touch = (field: keyof T) => {
+    touched.value[field] = true
+  }
+
+  const touchAll = () => {
+    for (const key of Object.keys(fields)) {
+      touched.value[key as keyof T] = true
+    }
+  }
+
+  const getError = (field: keyof T) => {
+    return touched.value[field] ? errors.value[field] : null
+  }
+
+  return { errors, isValid, touched, touch, touchAll, getError }
+}
+
+// Common validators
+export const required = (msg = 'Required'): Validator<string> =>
+  (value) => value.trim() ? null : msg
+
+export const minLength = (min: number, msg?: string): Validator<string> =>
+  (value) => value.length >= min ? null : msg ?? `Min ${min} characters`
+
+export const email = (msg = 'Invalid email'): Validator<string> =>
+  (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) ? null : msg
+```
+
+### Form Component
+
+```vue
+<!-- UserForm.vue -->
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useFormValidation, required, minLength, email } from '@/composables/useFormValidation'
+
+const emit = defineEmits<{
+  submit: [data: { name: string; email: string }]
+}>()
+
+// Form state
+const name = ref('')
+const userEmail = ref('')
+
+// Validation
+const { isValid, touch, touchAll, getError } = useFormValidation({
+  name: {
+    value: name,
+    validators: [required(), minLength(2)]
+  },
+  email: {
+    value: userEmail,
+    validators: [required(), email()]
+  }
+})
+
+const handleSubmit = () => {
+  touchAll()
+  if (isValid.value) {
+    emit('submit', { name: name.value, email: userEmail.value })
+  }
+}
+</script>
+
+<template>
+  <form @submit.prevent="handleSubmit" class="user-form">
+    <div class="field">
+      <label for="name">Name</label>
+      <input
+        id="name"
+        v-model="name"
+        @blur="touch('name')"
+        :class="{ error: getError('name') }"
+      />
+      <span v-if="getError('name')" class="error-msg">{{ getError('name') }}</span>
+    </div>
+
+    <div class="field">
+      <label for="email">Email</label>
+      <input
+        id="email"
+        type="email"
+        v-model="userEmail"
+        @blur="touch('email')"
+        :class="{ error: getError('email') }"
+      />
+      <span v-if="getError('email')" class="error-msg">{{ getError('email') }}</span>
+    </div>
+
+    <button type="submit" :disabled="!isValid">Submit</button>
+  </form>
+</template>
+
+<style scoped>
+.user-form .field {
+  margin-bottom: 1rem;
+}
+
+.user-form input.error {
+  border-color: #dc3545;
+}
+
+.user-form .error-msg {
+  color: #dc3545;
+  font-size: 0.875rem;
+}
+</style>
+```
+
+---
+
+## Pattern Summary
+
+| Pattern | Example | Benefit |
+|---------|---------|---------|
+| Pure Composable | `useProductLogic` | 100% testable logic |
+| Wrapper Pattern | `UserDashboard` + `UserListPure` | Isolated side effects |
+| Validation Composable | `useFormValidation` | Reusable, pure validation |
+| Computed CSS | `cssClasses` | Cached class computation |
+| Event Delegation | `emit('select')` | Unidirectional data flow |

package/plugins/ima-claude/skills/js-fp-vue/references/composables-advanced.md

@@ -0,0 +1,282 @@
+# Composables Advanced Patterns
+
+Advanced composable patterns for Vue.js FP architecture.
+
+## Table of Contents
+
+1. [Composable Factory Pattern](#composable-factory-pattern)
+2. [State Management with Composables](#state-management-with-composables)
+3. [Provide/Inject for Dependency Injection](#provideinject-for-dependency-injection)
+4. [Lifecycle Integration](#lifecycle-integration)
+5. [Composable Composition](#composable-composition)
+
+---
+
+## Composable Factory Pattern
+
+Pre-compile expensive configurations for performance.
+
+```typescript
+// composables/useUserFactory.ts
+import type { Ref } from 'vue'
+import { computed } from 'vue'
+
+interface UserData {
+  id: string
+  name: string
+  email: string
+}
+
+interface UserConfig {
+  showEmail: boolean
+  variant: 'compact' | 'detailed'
+}
+
+// Factory creates optimized composable
+const createUserComposable = (defaultConfig: UserConfig) => {
+  // Pre-compile static configuration (hot path optimization)
+  const compiledClasses = {
+    compact: {
+      card: 'user-card user-card--compact',
+      name: 'user-card__name user-card__name--compact'
+    },
+    detailed: {
+      card: 'user-card user-card--detailed',
+      name: 'user-card__name user-card__name--detailed'
+    }
+  }
+
+  return (userData: Readonly<Ref<UserData>>, config?: Partial<UserConfig>) => {
+    const mergedConfig = { ...defaultConfig, ...config }
+
+    const displayData = computed(() => ({
+      ...userData.value,
+      displayName: userData.value.name.trim()
+    }))
+
+    // O(1) lookup instead of string concatenation
+    const cssClasses = computed(() => compiledClasses[mergedConfig.variant])
+
+    return { displayData, cssClasses }
+  }
+}
+
+// Usage: Pre-compile for different contexts
+export const useCompactUser = createUserComposable({
+  showEmail: false,
+  variant: 'compact'
+})
+
+export const useDetailedUser = createUserComposable({
+  showEmail: true,
+  variant: 'detailed'
+})
+```
+
+---
+
+## State Management with Composables
+
+Use composables for 95% of state management. Only use Pinia/Vuex for truly global state.
+
+```typescript
+// composables/useUserState.ts
+import { ref, readonly } from 'vue'
+
+interface UserData {
+  id: string
+  name: string
+  email: string
+}
+
+export const useUserState = () => {
+  const users = ref<UserData[]>([])
+  const loading = ref(false)
+
+  // Pure functions for state transitions
+  const addUser = (user: UserData) => {
+    users.value = [...users.value, user] // Immutable
+  }
+
+  const updateUser = (userId: string, updates: Partial<UserData>) => {
+    users.value = users.value.map(user =>
+      user.id === userId ? { ...user, ...updates } : user
+    ) // Immutable
+  }
+
+  const removeUser = (userId: string) => {
+    users.value = users.value.filter(user => user.id !== userId) // Immutable
+  }
+
+  // Side effect isolated
+  const fetchUsers = async (userApi: { getUsers: () => Promise<UserData[]> }) => {
+    loading.value = true
+    try {
+      users.value = await userApi.getUsers()
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    users: readonly(users),
+    loading: readonly(loading),
+    addUser,
+    updateUser,
+    removeUser,
+    fetchUsers
+  }
+}
+```
+
+---
+
+## Provide/Inject for Dependency Injection
+
+Use Vue's provide/inject for cross-component dependency injection.
+
+```typescript
+// composables/useApiProvider.ts
+import { provide, inject, type InjectionKey } from 'vue'
+
+interface ApiClient {
+  getUser: (id: string) => Promise<UserData>
+  updateUser: (user: UserData) => Promise<void>
+}
+
+// Type-safe injection key
+const API_KEY: InjectionKey<ApiClient> = Symbol('api')
+
+// Provider composable (use in root component)
+export const useApiProvider = (client: ApiClient) => {
+  provide(API_KEY, client)
+}
+
+// Consumer composable (use in child components)
+export const useApi = (): ApiClient => {
+  const api = inject(API_KEY)
+  if (!api) {
+    throw new Error('useApi must be used within ApiProvider')
+  }
+  return api
+}
+
+// Mock provider for testing
+export const useMockApiProvider = () => {
+  const mockClient: ApiClient = {
+    getUser: async (id) => ({ id, name: 'Mock User', email: 'mock@test.com' }),
+    updateUser: async () => {}
+  }
+  provide(API_KEY, mockClient)
+}
+```
+
+---
+
+## Lifecycle Integration
+
+Integrate composables with Vue lifecycle hooks.
+
+```typescript
+// composables/usePolling.ts
+import { ref, readonly, onMounted, onUnmounted } from 'vue'
+
+export const usePolling = <T>(
+  fetcher: () => Promise<T>,
+  intervalMs: number = 60000
+) => {
+  const data = ref<T | null>(null)
+  const error = ref<Error | null>(null)
+  const loading = ref(false)
+
+  let intervalId: ReturnType<typeof setInterval> | null = null
+
+  const fetch = async () => {
+    loading.value = true
+    try {
+      data.value = await fetcher()
+      error.value = null
+    } catch (e) {
+      error.value = e as Error
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const start = () => {
+    fetch() // Initial fetch
+    intervalId = setInterval(fetch, intervalMs)
+  }
+
+  const stop = () => {
+    if (intervalId) {
+      clearInterval(intervalId)
+      intervalId = null
+    }
+  }
+
+  // Lifecycle integration
+  onMounted(start)
+  onUnmounted(stop)
+
+  return {
+    data: readonly(data),
+    error: readonly(error),
+    loading: readonly(loading),
+    refetch: fetch,
+    stop
+  }
+}
+```
+
+---
+
+## Composable Composition
+
+Compose multiple composables together.
+
+```typescript
+// composables/useUserDashboard.ts
+import { computed } from 'vue'
+import { useUserState } from './useUserState'
+import { usePolling } from './usePolling'
+
+export const useUserDashboard = (userApi: { getUsers: () => Promise<UserData[]> }) => {
+  // Compose state management
+  const { users, loading: stateLoading, addUser, updateUser, removeUser } = useUserState()
+
+  // Compose polling
+  const { data: freshUsers, loading: pollLoading, refetch } = usePolling(
+    userApi.getUsers,
+    30000
+  )
+
+  // Derived state from composed composables
+  const isLoading = computed(() => stateLoading.value || pollLoading.value)
+  const userCount = computed(() => users.value.length)
+  const hasUsers = computed(() => userCount.value > 0)
+
+  return {
+    users,
+    isLoading,
+    userCount,
+    hasUsers,
+    addUser,
+    updateUser,
+    removeUser,
+    refetch
+  }
+}
+```
+
+---
+
+## When to Use These Patterns
+
+| Pattern | Use When |
+|---------|----------|
+| Factory | Multiple similar composables with different configs |
+| State Management | Local/feature state (95% of cases) |
+| Provide/Inject | Cross-component dependencies, testing |
+| Lifecycle Integration | Timers, subscriptions, cleanup needed |
+| Composition | Building complex features from simple parts |