@svadmin/lite 0.1.0

package/src/schema-generator.ts

@@ -0,0 +1,145 @@
+/**
+ * @svadmin/lite — Schema Generator
+ *
+ * Auto-generates Zod schemas from @svadmin/core FieldDefinitions.
+ * Used with sveltekit-superforms for server-side form validation.
+ */
+import { z } from 'zod';
+import type { FieldDefinition, ResourceDefinition } from '@svadmin/core';
+
+/**
+ * Convert a single FieldDefinition to its corresponding Zod type.
+ */
+function fieldToZod(field: FieldDefinition): z.ZodTypeAny {
+  let schema: z.ZodTypeAny;
+
+  switch (field.type) {
+    case 'number':
+      schema = z.coerce.number({ invalid_type_error: `${field.label} must be a number` });
+      break;
+    case 'boolean':
+      schema = z.coerce.boolean();
+      break;
+    case 'email':
+      schema = z.string().email(`${field.label} must be a valid email`);
+      break;
+    case 'url':
+      schema = z.string().url(`${field.label} must be a valid URL`);
+      break;
+    case 'date':
+      schema = z.string().refine(
+        (v: string | undefined) => !v || !isNaN(Date.parse(v)),
+        { message: `${field.label} must be a valid date` },
+      );
+      break;
+    case 'select':
+      if (field.options?.length) {
+        schema = z.enum(
+          field.options.map((o: { value: string | number }) => String(o.value)) as [string, ...string[]],
+          { errorMap: () => ({ message: `${field.label} must be one of the options` }) },
+        );
+      } else {
+        schema = z.string();
+      }
+      break;
+    case 'multiselect':
+    case 'tags':
+      schema = z.string().transform((v: string) => v ? v.split(',').map((s: string) => s.trim()) : []);
+      break;
+    case 'textarea':
+    case 'richtext':
+      schema = z.string().max(50000, `${field.label} is too long`);
+      break;
+    case 'json':
+      schema = z.string().refine(
+        (v: string) => { try { JSON.parse(v); return true; } catch { return false; } },
+        { message: `${field.label} must be valid JSON` },
+      );
+      break;
+    case 'phone':
+      schema = z.string().regex(/^[+\d\s()-]*$/, `${field.label} must be a valid phone number`);
+      break;
+    default:
+      schema = z.string();
+  }
+
+  // Wrap with optional/required
+  if (!field.required) {
+    schema = schema.optional().or(z.literal(''));
+  }
+
+  return schema;
+}
+
+/**
+ * Generate a Zod object schema from a ResourceDefinition's fields.
+ * Only includes fields that are relevant for form rendering.
+ *
+ * @param mode - 'create' | 'edit' to filter fields by showInCreate / showInEdit
+ */
+export function fieldsToZodSchema(
+  fields: FieldDefinition[],
+  mode: 'create' | 'edit' = 'create',
+): z.ZodObject<Record<string, z.ZodTypeAny>> {
+  const shape: Record<string, z.ZodTypeAny> = {};
+
+  for (const field of fields) {
+    // Skip fields not shown in forms
+    if (field.showInForm === false) continue;
+    if (mode === 'create' && field.showInCreate === false) continue;
+    if (mode === 'edit' && field.showInEdit === false) continue;
+
+    shape[field.key] = fieldToZod(field);
+  }
+
+  return z.object(shape);
+}
+
+/**
+ * Generate a Zod schema from a ResourceDefinition.
+ * Convenience wrapper around fieldsToZodSchema.
+ */
+export function resourceToZodSchema(
+  resource: ResourceDefinition,
+  mode: 'create' | 'edit' = 'create',
+): z.ZodObject<Record<string, z.ZodTypeAny>> {
+  return fieldsToZodSchema(resource.fields, mode);
+}
+
+/**
+ * Determine the appropriate HTML input type for an IE11-friendly `<input>`.
+ * Falls back to 'text' for unsupported HTML5 types.
+ */
+export function fieldToInputType(field: FieldDefinition): string {
+  switch (field.type) {
+    case 'number': return 'text';      // IE11 <input type="number"> has bugs
+    case 'email': return 'text';       // IE11 email validation is broken
+    case 'url': return 'text';
+    case 'phone': return 'tel';
+    case 'boolean': return 'checkbox';
+    case 'date': return 'text';        // IE11 doesn't support type="date"
+    case 'textarea':
+    case 'richtext': return 'textarea';
+    case 'select':
+    case 'multiselect': return 'select';
+    case 'image':
+    case 'images':
+    case 'file': return 'file';
+    default: return 'text';
+  }
+}
+
+/**
+ * Generate an input placeholder with format hint for IE11
+ * (which cannot show native date pickers, etc.)
+ */
+export function fieldToPlaceholder(field: FieldDefinition): string {
+  switch (field.type) {
+    case 'date': return 'YYYY-MM-DD';
+    case 'email': return 'user@example.com';
+    case 'url': return 'https://example.com';
+    case 'phone': return '+1 (555) 000-0000';
+    case 'number': return '0';
+    default: return '';
+  }
+}

package/src/server-adapter.ts

@@ -0,0 +1,291 @@
+/**
+ * @svadmin/lite — Server Adapter
+ *
+ * Bridges @svadmin/core DataProvider into SvelteKit server loaders and form actions.
+ * All data fetching happens on the server — zero client-side JS required.
+ */
+import type {
+  DataProvider, AuthProvider,
+  ResourceDefinition, FieldDefinition,
+  Sort, Filter,
+} from '@svadmin/core';
+import type { RequestEvent } from '@sveltejs/kit';
+
+// ─── List Loader ──────────────────────────────────────────────
+
+export interface ListLoaderResult {
+  records: Record<string, unknown>[];
+  total: number;
+  page: number;
+  pageSize: number;
+  totalPages: number;
+  sort?: string;
+  order?: 'asc' | 'desc';
+  search?: string;
+  resource: ResourceDefinition;
+}
+
+/**
+ * Creates a SvelteKit `load` function that fetches a resource list
+ * via the DataProvider. All state is driven by URL search params.
+ */
+export function createListLoader(
+  dp: DataProvider,
+  resource: ResourceDefinition,
+) {
+  return async ({ url }: { url: URL }): Promise<ListLoaderResult> => {
+    const page = Math.max(1, Number(url.searchParams.get('page')) || 1);
+    const pageSize = resource.pageSize ?? 20;
+    const sort = url.searchParams.get('sort') ?? undefined;
+    const order = (url.searchParams.get('order') as 'asc' | 'desc') ?? 'asc';
+    const search = url.searchParams.get('q') ?? undefined;
+
+    const sorters: Sort[] = sort ? [{ field: sort, order }] : 
+      resource.defaultSort ? [resource.defaultSort] : [];
+
+    const filters: Filter[] = [];
+    if (search) {
+      const searchable = resource.fields.find((f: FieldDefinition) => f.searchable);
+      if (searchable) {
+        filters.push({ field: searchable.key, operator: 'contains', value: search });
+      }
+    }
+
+    const result = await dp.getList({
+      resource: resource.name,
+      pagination: { current: page, pageSize },
+      sorters,
+      filters,
+    });
+
+    return {
+      records: result.data as Record<string, unknown>[],
+      total: result.total,
+      page,
+      pageSize,
+      totalPages: Math.ceil(result.total / pageSize),
+      sort,
+      order,
+      search,
+      resource,
+    };
+  };
+}
+
+// ─── Detail Loader ────────────────────────────────────────────
+
+export function createDetailLoader(
+  dp: DataProvider,
+  resource: ResourceDefinition,
+) {
+  return async ({ params }: { params: { id: string } }) => {
+    const result = await dp.getOne({
+      resource: resource.name,
+      id: params.id,
+    });
+    return { record: result.data as Record<string, unknown>, resource };
+  };
+}
+
+// ─── CRUD Form Actions ────────────────────────────────────────
+
+/**
+ * Creates SvelteKit form actions for create / update / delete.
+ * Works with standard `<form method="POST">` submissions — no JS needed.
+ */
+export function createCrudActions(
+  dp: DataProvider,
+  resource: ResourceDefinition,
+) {
+  const pk = resource.primaryKey ?? 'id';
+
+  return {
+    create: async ({ request }: RequestEvent) => {
+      const formData = await request.formData();
+      const variables = formDataToObject(formData, resource.fields);
+      try {
+        const result = await dp.create({ resource: resource.name, variables });
+        return { success: true, id: (result.data as Record<string, unknown>)[pk] };
+      } catch (e) {
+        return { success: false, error: (e as Error).message, values: variables };
+      }
+    },
+
+    update: async ({ request }: RequestEvent) => {
+      const formData = await request.formData();
+      const id = formData.get('_id') as string;
+      formData.delete('_id');
+      const variables = formDataToObject(formData, resource.fields);
+      try {
+        await dp.update({ resource: resource.name, id, variables });
+        return { success: true };
+      } catch (e) {
+        return { success: false, error: (e as Error).message, values: variables };
+      }
+    },
+
+    delete: async ({ request }: RequestEvent) => {
+      const formData = await request.formData();
+      const id = formData.get('id') as string;
+      try {
+        await dp.deleteOne({ resource: resource.name, id });
+        return { success: true };
+      } catch (e) {
+        return { success: false, error: (e as Error).message };
+      }
+    },
+  };
+}
+
+// ─── Auth Helpers ─────────────────────────────────────────────
+
+/**
+ * Creates a SvelteKit server hook that checks auth via AuthProvider
+ * and redirects unauthenticated users to a login page.
+ */
+export function createAuthGuard(
+  authProvider: AuthProvider,
+  loginPath = '/lite/login',
+) {
+  return async ({ event, resolve }: { event: RequestEvent; resolve: (event: RequestEvent) => Promise<Response> }) => {
+    // Skip auth check for the login page itself
+    if (event.url.pathname === loginPath) {
+      return resolve(event);
+    }
+
+    try {
+      const check = await authProvider.check();
+      if (!check.authenticated) {
+        return new Response(null, {
+          status: 302,
+          headers: { Location: loginPath },
+        });
+      }
+    } catch {
+      return new Response(null, {
+        status: 302,
+        headers: { Location: loginPath },
+      });
+    }
+
+    return resolve(event);
+  };
+}
+
+/**
+ * Creates login/logout form actions using AuthProvider.
+ */
+export function createAuthActions(authProvider: AuthProvider) {
+  return {
+    login: async ({ request, cookies }: RequestEvent) => {
+      const formData = await request.formData();
+      const params = Object.fromEntries(formData);
+      try {
+        const result = await authProvider.login(params);
+        if (result.success) {
+          // Store a session indicator in a cookie
+          cookies.set('svadmin-session', 'active', {
+            path: '/',
+            httpOnly: true,
+            sameSite: 'lax',
+            maxAge: 60 * 60 * 24 * 7, // 7 days
+          });
+          return { success: true, redirectTo: result.redirectTo ?? '/lite' };
+        }
+        return { success: false, error: result.error?.message ?? 'Login failed' };
+      } catch (e) {
+        return { success: false, error: (e as Error).message };
+      }
+    },
+
+    logout: async ({ cookies }: RequestEvent) => {
+      try { await authProvider.logout(); } catch { /* ignore */ }
+      cookies.delete('svadmin-session', { path: '/' });
+      return { success: true };
+    },
+  };
+}
+
+// ─── UA Detection ─────────────────────────────────────────────
+
+/**
+ * Detects legacy browsers (IE11) from the User-Agent header.
+ */
+export function isLegacyBrowser(userAgent: string): boolean {
+  return /MSIE|Trident|rv:11/.test(userAgent);
+}
+
+/**
+ * Creates a SvelteKit handle hook that auto-redirects legacy browsers to /lite/.
+ */
+export function createLegacyRedirectHook(litePrefix = '/lite') {
+  return async ({ event, resolve }: { event: RequestEvent; resolve: (event: RequestEvent) => Promise<Response> }) => {
+    const ua = event.request.headers.get('user-agent') ?? '';
+    if (isLegacyBrowser(ua) && !event.url.pathname.startsWith(litePrefix)) {
+      return new Response(null, {
+        status: 302,
+        headers: { Location: `${litePrefix}${event.url.pathname}` },
+      });
+    }
+    return resolve(event);
+  };
+}
+
+// ─── Utilities ────────────────────────────────────────────────
+
+function formDataToObject(
+  formData: FormData,
+  fields: FieldDefinition[],
+): Record<string, unknown> {
+  const obj: Record<string, unknown> = {};
+  for (const field of fields) {
+    if (field.showInForm === false) continue;
+    
+    // Handle array types (like multiselect)
+    if (field.type === 'multiselect') {
+      const values = formData.getAll(field.key);
+      if (values.length > 0) {
+        obj[field.key] = values.map(v => String(v));
+      }
+      continue;
+    }
+
+    const raw = formData.get(field.key);
+    if (raw === null) {
+      if (field.type === 'boolean') obj[field.key] = false;
+      continue;
+    }
+
+    // Don't coerce File objects, but ignore empty native file inputs
+    if (raw instanceof File) {
+      if (raw.size > 0 && raw.name !== '') {
+         obj[field.key] = raw;
+      }
+      continue;
+    }
+
+    const strRaw = String(raw);
+
+    switch (field.type) {
+      case 'number':
+        obj[field.key] = strRaw === '' ? null : Number(strRaw);
+        break;
+      case 'boolean':
+        obj[field.key] = strRaw === 'on' || strRaw === 'true' || strRaw === '1';
+        break;
+      case 'tags':
+        obj[field.key] = strRaw ? strRaw.split(',').map(s => s.trim()).filter(Boolean) : [];
+        break;
+      case 'json':
+        try {
+          obj[field.key] = strRaw ? JSON.parse(strRaw) : null;
+        } catch {
+          obj[field.key] = strRaw; // Let Zod handle validation errors
+        }
+        break;
+      default:
+        obj[field.key] = strRaw;
+    }
+  }
+  return obj;
+}

package/static/enhance.js

@@ -0,0 +1,56 @@
+/**
+ * @svadmin/lite — Optional Progressive Enhancement (ES5)
+ *
+ * This script is 100% OPTIONAL and written in ES5 for IE11 compatibility.
+ * If included, it adds minor UX improvements. If not, everything still works.
+ *
+ * Include in your app.html:
+ *   <script src="/enhance.js"></script>
+ */
+(function() {
+  'use strict';
+
+  // 1. Delete confirmation — close <details> when clicking outside
+  document.addEventListener('click', function(e) {
+    var details = document.querySelectorAll('details.lite-confirm-details');
+    for (var i = 0; i < details.length; i++) {
+      if (!details[i].contains(e.target)) {
+        details[i].removeAttribute('open');
+      }
+    }
+  });
+
+  // 2. Highlight current table row on hover (for older browsers without :hover)
+  var rows = document.querySelectorAll('.lite-table tbody tr');
+  for (var j = 0; j < rows.length; j++) {
+    rows[j].addEventListener('mouseenter', function() {
+      this.style.backgroundColor = '#f8fafc';
+    });
+    rows[j].addEventListener('mouseleave', function() {
+      this.style.backgroundColor = '';
+    });
+  }
+
+  // 3. Auto-focus first input on form pages
+  var firstInput = document.querySelector('.lite-form-group input, .lite-form-group textarea');
+  if (firstInput && firstInput.offsetParent !== null) {
+    firstInput.focus();
+  }
+
+  // 4. Confirm before leaving dirty forms
+  var form = document.querySelector('form.lite-card');
+  if (form) {
+    var dirty = false;
+    var inputs = form.querySelectorAll('input, textarea, select');
+    for (var k = 0; k < inputs.length; k++) {
+      inputs[k].addEventListener('change', function() { dirty = true; });
+    }
+    window.addEventListener('beforeunload', function(e) {
+      if (dirty) {
+        e.returnValue = 'You have unsaved changes.';
+        return e.returnValue;
+      }
+    });
+    form.addEventListener('submit', function() { dirty = false; });
+  }
+})();