@happyvertical/smrt-products 0.30.0

package/dist/lib/lib/components/ProductForm.svelte

@@ -0,0 +1,289 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../i18n.js';
+import type { ProductData } from '../types';
+
+const { t } = useI18n();
+
+interface Props {
+  product?: Partial<ProductData>;
+  onSubmit: (product: Partial<ProductData>) => void;
+  onCancel?: () => void;
+  loading?: boolean;
+}
+
+const { product = {}, onSubmit, onCancel, loading = false }: Props = $props();
+
+const formData = $state({
+  name: product.name || '',
+  description: product.description || '',
+  price: product.price || 0,
+  inStock: product.inStock ?? true,
+  category: product.category || '',
+  tags: product.tags?.join(', ') || '',
+});
+
+let errors = $state<Record<string, string>>({});
+
+function validateForm() {
+  errors = {};
+
+  if (!formData.name.trim()) {
+    errors.name = 'Product name is required';
+  }
+
+  if (formData.price < 0) {
+    errors.price = 'Price must be non-negative';
+  }
+
+  return Object.keys(errors).length === 0;
+}
+
+function _handleSubmit(event: Event) {
+  event.preventDefault();
+
+  if (!validateForm()) {
+    return;
+  }
+
+  const productData: Partial<ProductData> = {
+    ...product,
+    name: formData.name.trim(),
+    description: formData.description.trim() || undefined,
+    price: formData.price,
+    inStock: formData.inStock,
+    category: formData.category.trim(),
+    tags: formData.tags
+      ? formData.tags
+          .split(',')
+          .map((tag) => tag.trim())
+          .filter(Boolean)
+      : [],
+  };
+
+  onSubmit(productData);
+}
+</script>
+
+<form onsubmit={handleSubmit} class="product-form">
+  <div class="form-group">
+    <label for="name">{t(M['products.product_form.name_label'])}</label>
+    <input
+      id="name"
+      type="text"
+      bind:value={formData.name}
+      disabled={loading}
+      class="form-input"
+      class:error={errors.name}
+      placeholder={t(M['products.product_form.name_placeholder'])}
+    />
+    {#if errors.name}
+      <span class="error-message">{errors.name}</span>
+    {/if}
+  </div>
+
+  <div class="form-group">
+    <label for="description">Description</label>
+    <textarea
+      id="description"
+      bind:value={formData.description}
+      disabled={loading}
+      class="form-textarea"
+      placeholder={t(M['products.product_form.description_placeholder'])}
+      rows="3"
+    ></textarea>
+  </div>
+
+  <div class="form-row">
+    <div class="form-group">
+      <label for="price">Price *</label>
+      <input
+        id="price"
+        type="number"
+        step="0.01"
+        min="0"
+        bind:value={formData.price}
+        disabled={loading}
+        class="form-input"
+        class:error={errors.price}
+        placeholder="0.00"
+      />
+      {#if errors.price}
+        <span class="error-message">{errors.price}</span>
+      {/if}
+    </div>
+
+    <div class="form-group">
+      <label for="category">Category</label>
+      <input
+        id="category"
+        type="text"
+        bind:value={formData.category}
+        disabled={loading}
+        class="form-input"
+        placeholder={t(M['products.product_form.category_placeholder'])}
+      />
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="tags">Tags</label>
+    <input
+      id="tags"
+      type="text"
+      bind:value={formData.tags}
+      disabled={loading}
+      class="form-input"
+      placeholder={t(M['products.product_form.tags_placeholder'])}
+    />
+    <small class="form-hint">{t(M['products.product_form.tags_hint'])}</small>
+  </div>
+
+  <div class="form-group">
+    <label class="checkbox-label">
+      <input
+        type="checkbox"
+        bind:checked={formData.inStock}
+        disabled={loading}
+        class="form-checkbox"
+      />
+      {t(M['products.product_form.in_stock_label'])}
+    </label>
+  </div>
+
+  <div class="form-actions">
+    {#if onCancel}
+      <button type="button" onclick={onCancel} disabled={loading} class="cancel-btn">
+        Cancel
+      </button>
+    {/if}
+    
+    <button type="submit" disabled={loading} class="submit-btn">
+      {#if loading}
+        Saving...
+      {:else}
+        {product.id ? 'Update Product' : 'Create Product'}
+      {/if}
+    </button>
+  </div>
+</form>
+
+<style>
+  .product-form {
+    max-width: 500px;
+    padding: 1.5rem;
+    background: white;
+    border-radius: var(--smrt-radius-md, 8px);
+    border: 1px solid var(--smrt-color-outline-variant, #e2e8f0);
+  }
+  
+  .form-group {
+    margin-bottom: 1rem;
+  }
+  
+  .form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+  }
+  
+  label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    color: var(--smrt-color-on-surface, #374151);
+    font-size: var(--smrt-typography-label-large-size, 0.875rem);
+  }
+
+  .form-input, .form-textarea {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
+    border-radius: var(--smrt-radius-sm, 4px);
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    transition: border-color 0.2s;
+  }
+
+  .form-input:focus, .form-textarea:focus {
+    outline: none;
+    border-color: var(--smrt-color-primary, #3b82f6);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary, #3b82f6) 10%, transparent);
+  }
+
+  .form-input.error {
+    border-color: var(--smrt-color-error, #dc2626);
+  }
+  
+  .form-textarea {
+    resize: vertical;
+    min-height: 80px;
+  }
+  
+  .checkbox-label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+  }
+  
+  .form-checkbox {
+    width: auto;
+  }
+  
+  .form-hint {
+    color: var(--smrt-color-on-surface-variant, #6b7280);
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+    margin-top: 0.25rem;
+  }
+
+  .error-message {
+    color: var(--smrt-color-error, #dc2626);
+    font-size: var(--smrt-typography-label-medium-size, 0.75rem);
+    margin-top: 0.25rem;
+    display: block;
+  }
+
+  .form-actions {
+    display: flex;
+    gap: 0.75rem;
+    justify-content: flex-end;
+    margin-top: 1.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--smrt-color-outline-variant, #f3f4f6);
+  }
+  
+  .cancel-btn, .submit-btn {
+    padding: 0.5rem 1rem;
+    border-radius: var(--smrt-radius-sm, 4px);
+    font-size: var(--smrt-typography-label-large-size, 0.875rem);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    cursor: pointer;
+    border: 1px solid;
+    transition: all 0.2s;
+  }
+  
+  .cancel-btn {
+    background: white;
+    border-color: var(--smrt-color-outline-variant, #d1d5db);
+    color: var(--smrt-color-on-surface, #374151);
+  }
+
+  .cancel-btn:hover:not(:disabled) {
+    background: var(--smrt-color-surface-container-low, #f9fafb);
+  }
+
+  .submit-btn {
+    background: var(--smrt-color-primary, #3b82f6);
+    border-color: var(--smrt-color-primary, #3b82f6);
+    color: var(--smrt-color-on-primary, white);
+  }
+
+  .submit-btn:hover:not(:disabled) {
+    background: var(--smrt-color-primary, #2563eb);
+  }
+  
+  .submit-btn:disabled, .cancel-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+</style>

package/dist/lib/lib/components/ProductForm.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ProductData } from '../types';
+interface Props {
+    product?: Partial<ProductData>;
+    onSubmit: (product: Partial<ProductData>) => void;
+    onCancel?: () => void;
+    loading?: boolean;
+}
+declare const ProductForm: import("svelte").Component<Props, {}, "">;
+type ProductForm = ReturnType<typeof ProductForm>;
+export default ProductForm;
+//# sourceMappingURL=ProductForm.svelte.d.ts.map

package/dist/lib/lib/components/ProductForm.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductForm.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/ProductForm.svelte"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC/B,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA0HD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/lib/lib/components/TestComponent.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../i18n.js';
+
+interface Props {
+  message?: string;
+}
+
+const { message = 'Hello Federation!' }: Props = $props();
+const { t } = useI18n();
+</script>
+
+<div class="test-component">
+  <h3>{t(M['products.test_component.title'])}</h3>
+  <p>{message}</p>
+</div>
+
+<style>
+  .test-component {
+    padding: 1rem;
+    border: 1px solid var(--smrt-color-outline-variant, #ccc);
+    border-radius: var(--smrt-radius-sm, 4px);
+    background: var(--smrt-color-surface-container-low, #f9f9f9);
+  }
+</style>

package/dist/lib/lib/components/TestComponent.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    message?: string;
+}
+declare const TestComponent: import("svelte").Component<Props, {}, "">;
+type TestComponent = ReturnType<typeof TestComponent>;
+export default TestComponent;
+//# sourceMappingURL=TestComponent.svelte.d.ts.map

package/dist/lib/lib/components/TestComponent.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TestComponent.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/TestComponent.svelte"],"names":[],"mappings":"AAOA,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAkBD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/lib/lib/components/auto-generated/AutoForm.svelte

@@ -0,0 +1,240 @@
+<script lang="ts">
+/**
+ * Auto-generated form component from SMRT object schema
+ * Demonstrates "Define Once, Consume Everywhere" - form is generated from Product class definition
+ */
+
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../../i18n.js';
+import type { ProductData } from '../../types';
+
+const { t } = useI18n();
+
+interface Props {
+  data?: ProductData;
+  title?: string;
+  submitLabel?: string;
+  readonly?: boolean;
+  onSubmit?: (data: ProductData) => void;
+  onChange?: (data: ProductData) => void;
+}
+
+const {
+  data = {},
+  title = 'Product Information',
+  submitLabel = 'Save',
+  readonly = false,
+  onSubmit,
+  onChange,
+}: Props = $props();
+
+// Auto-generated field schema from Product class
+// In a full implementation, this would be generated by the SMRT plugin
+const fieldSchema = [
+  {
+    name: 'name',
+    type: 'string',
+    label: 'Product Name',
+    required: true,
+    placeholder: 'Enter product name',
+  },
+  {
+    name: 'description',
+    type: 'string',
+    label: 'Description',
+    placeholder: 'Product description',
+  },
+  {
+    name: 'category',
+    type: 'string',
+    label: 'Category',
+    placeholder: 'Product category',
+  },
+  {
+    name: 'manufacturer',
+    type: 'string',
+    label: 'Manufacturer',
+    placeholder: 'Manufacturer name',
+  },
+  {
+    name: 'model',
+    type: 'string',
+    label: 'Model',
+    placeholder: 'Product model',
+  },
+  {
+    name: 'specifications',
+    type: 'object',
+    label: 'Specifications',
+    placeholder: 'Technical specifications',
+  },
+  { name: 'tags', type: 'array', label: 'Tags', placeholder: 'Product tags' },
+] as const;
+
+// Reactive form data
+let formData = $state({ ...data });
+
+// Update form data when props change
+$effect(() => {
+  formData = { ...data };
+});
+
+function _updateField(fieldName: string, value: any) {
+  formData[fieldName as keyof ProductData] = value;
+
+  // Trigger change callback
+  if (onChange) {
+    onChange({ ...formData });
+  }
+}
+
+function _handleSubmit(event: Event) {
+  event.preventDefault();
+  if (onSubmit && !readonly) {
+    onSubmit({ ...formData });
+  }
+}
+
+function _getFieldType(
+  name: string,
+): 'string' | 'number' | 'boolean' | 'array' | 'object' {
+  const field = fieldSchema.find((f) => f.name === name);
+  return field?.type || 'string';
+}
+</script>
+
+<div class="auto-form">
+  <header class="form-header">
+    <h2 class="form-title">{title}</h2>
+    <div class="form-subtitle">
+      {t(M['products.auto_form.subtitle'])}
+    </div>
+  </header>
+
+  <form class="form-content" onsubmit={handleSubmit}>
+    {#each fieldSchema as field}
+      <FieldRenderer
+        fieldName={field.name}
+        fieldType={field.type}
+        value={formData[field.name]}
+        label={field.label}
+        placeholder={field.placeholder}
+        required={field.required || false}
+        {readonly}
+        onUpdate={(value) => updateField(field.name, value)}
+      />
+    {/each}
+
+    {#if !readonly}
+      <div class="form-actions">
+        <button type="submit" class="submit-btn">
+          {submitLabel}
+        </button>
+        <button type="button" class="reset-btn" onclick={() => formData = {}}>
+          Reset
+        </button>
+      </div>
+    {/if}
+  </form>
+
+  <!-- Demo: Show current form state -->
+  <details class="form-debug">
+    <summary>{t(M['products.auto_form.debug_summary'])}</summary>
+    <pre>{JSON.stringify(formData, null, 2)}</pre>
+  </details>
+</div>
+
+<style>
+  .auto-form {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 1.5rem;
+    background: white;
+    border-radius: var(--smrt-radius-md, 8px);
+    box-shadow: var(--smrt-elevation-1, 0 1px 3px color-mix(in srgb, var(--smrt-color-shadow, #000) 10%, transparent));
+  }
+
+  .form-header {
+    margin-bottom: 2rem;
+    text-align: center;
+  }
+
+  .form-title {
+    font-size: var(--smrt-typography-headline-small-size, 1.5rem);
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+    color: var(--smrt-color-on-surface, #1f2937);
+    margin: 0 0 0.5rem 0;
+  }
+
+  .form-subtitle {
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    color: var(--smrt-color-on-surface-variant, #6b7280);
+    font-style: italic;
+  }
+
+  .form-content {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .form-actions {
+    display: flex;
+    gap: 0.75rem;
+    margin-top: 1.5rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
+  }
+
+  .submit-btn {
+    background: var(--smrt-color-primary, #3b82f6);
+    color: var(--smrt-color-on-primary, white);
+    border: none;
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.375rem;
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    cursor: pointer;
+    transition: background-color 0.2s;
+  }
+
+  .submit-btn:hover {
+    background: var(--smrt-color-primary, #2563eb);
+  }
+
+  .reset-btn {
+    background: var(--smrt-color-surface-container, #f3f4f6);
+    color: var(--smrt-color-on-surface, #374151);
+    border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.375rem;
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    cursor: pointer;
+    transition: background-color 0.2s;
+  }
+
+  .reset-btn:hover {
+    background: var(--smrt-color-surface-container-high, #e5e7eb);
+  }
+
+  .form-debug {
+    margin-top: 2rem;
+    padding: 1rem;
+    background: var(--smrt-color-surface-container-low, #f9fafb);
+    border-radius: 0.375rem;
+    border: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
+  }
+
+  .form-debug summary {
+    cursor: pointer;
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    color: var(--smrt-color-on-surface, #374151);
+  }
+
+  .form-debug pre {
+    margin-top: 0.5rem;
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+    color: var(--smrt-color-on-surface-variant, #6b7280);
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+</style>

package/dist/lib/lib/components/auto-generated/AutoForm.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { ProductData } from '../../types';
+interface Props {
+    data?: ProductData;
+    title?: string;
+    submitLabel?: string;
+    readonly?: boolean;
+    onSubmit?: (data: ProductData) => void;
+    onChange?: (data: ProductData) => void;
+}
+declare const AutoForm: import("svelte").Component<Props, {}, "">;
+type AutoForm = ReturnType<typeof AutoForm>;
+export default AutoForm;
+//# sourceMappingURL=AutoForm.svelte.d.ts.map

package/dist/lib/lib/components/auto-generated/AutoForm.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoForm.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/auto-generated/AutoForm.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;CACxC;AAkID,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}