astro-tractstack 2.0.0-rc.0

package/templates/src/utils/api/fileHelpers.ts

@@ -0,0 +1,306 @@
+import type {
+  AllowedImageFormat,
+  ImageDimensions,
+  ImageProcessingResult,
+} from '@/types/formTypes';
+
+interface ValidationResult {
+  isValid: boolean;
+  error?: string;
+}
+
+/**
+ * Validates file size
+ */
+export const validateFileSize = (
+  file: File,
+  maxSizeKB: number
+): ValidationResult => {
+  if (file.size > maxSizeKB * 1024) {
+    return {
+      isValid: false,
+      error: `File size must be less than ${maxSizeKB}KB (current: ${Math.round(file.size / 1024)}KB)`,
+    };
+  }
+  return { isValid: true };
+};
+
+/**
+ * Validates file type against allowed formats
+ */
+export const validateFileType = (
+  file: File,
+  allowedFormats: AllowedImageFormat[]
+): ValidationResult => {
+  const fileExtension = file.name.toLowerCase().split('.').pop();
+  const mimeType = file.type.toLowerCase();
+
+  const formatChecks: Record<
+    AllowedImageFormat,
+    (ext: string, mime: string) => boolean
+  > = {
+    svg: (ext, mime) => ext === 'svg' || mime === 'image/svg+xml',
+    ico: (ext, mime) =>
+      ext === 'ico' ||
+      mime === 'image/x-icon' ||
+      mime === 'image/vnd.microsoft.icon',
+    png: (ext, mime) => ext === 'png' || mime === 'image/png',
+    jpg: (ext, mime) =>
+      ext === 'jpg' || ext === 'jpeg' || mime === 'image/jpeg',
+    jpeg: (ext, mime) =>
+      ext === 'jpg' || ext === 'jpeg' || mime === 'image/jpeg',
+    webp: (ext, mime) => ext === 'webp' || mime === 'image/webp',
+    gif: (ext, mime) => ext === 'gif' || mime === 'image/gif',
+  };
+
+  const isValid = allowedFormats.some((format) =>
+    formatChecks[format]?.(fileExtension || '', mimeType)
+  );
+
+  if (!isValid) {
+    return {
+      isValid: false,
+      error: `File type not allowed. Accepted formats: ${allowedFormats.join(', ')}`,
+    };
+  }
+
+  return { isValid: true };
+};
+
+/**
+ * Gets image dimensions from a file
+ */
+export const getImageDimensions = (file: File): Promise<ImageDimensions> => {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+
+    img.onload = () => {
+      resolve({
+        width: img.width,
+        height: img.height,
+      });
+      URL.revokeObjectURL(img.src);
+    };
+
+    img.onerror = () => {
+      URL.revokeObjectURL(img.src);
+      reject(new Error('Failed to load image'));
+    };
+
+    img.src = URL.createObjectURL(file);
+  });
+};
+
+/**
+ * Validates image dimensions
+ */
+export const validateImageDimensions = async (
+  file: File,
+  requiredDimensions: ImageDimensions
+): Promise<ValidationResult> => {
+  try {
+    const dimensions = await getImageDimensions(file);
+
+    if (
+      dimensions.width !== requiredDimensions.width ||
+      dimensions.height !== requiredDimensions.height
+    ) {
+      return {
+        isValid: false,
+        error: `Image must be ${requiredDimensions.width}x${requiredDimensions.height}px (got ${dimensions.width}x${dimensions.height}px)`,
+      };
+    }
+
+    return { isValid: true };
+  } catch (error) {
+    return {
+      isValid: false,
+      error: 'Failed to read image dimensions',
+    };
+  }
+};
+
+/**
+ * Checks if a file is an SVG (which doesn't need canvas processing)
+ */
+export const isSvgFile = (file: File): boolean => {
+  return (
+    file.type === 'image/svg+xml' || file.name.toLowerCase().endsWith('.svg')
+  );
+};
+
+/**
+ * Converts file to base64 (for SVG files and simple conversions)
+ */
+export const fileToBase64 = (file: File): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onload = (e) => {
+      const result = e.target?.result as string;
+      resolve(result);
+    };
+
+    reader.onerror = () => {
+      reject(new Error('Failed to read file'));
+    };
+
+    reader.readAsDataURL(file);
+  });
+};
+
+/**
+ * Resizes and crops an image to exact dimensions
+ * Uses smart cropping (center crop) to maintain aspect ratio
+ */
+export const resizeAndCropImage = async (
+  file: File,
+  targetDimensions: ImageDimensions,
+  quality: number = 0.9
+): Promise<ImageProcessingResult> => {
+  // Handle SVG files differently
+  if (isSvgFile(file)) {
+    const base64 = await fileToBase64(file);
+    return {
+      processedFile: base64,
+      warnings: ['SVG files cannot be resized. Original file preserved.'],
+      originalDimensions: { width: 0, height: 0 }, // SVG dimensions are dynamic
+      finalDimensions: targetDimensions,
+    };
+  }
+
+  return new Promise(async (resolve, reject) => {
+    try {
+      const originalDimensions = await getImageDimensions(file);
+      const warnings: string[] = [];
+
+      // If already correct dimensions, just convert to base64
+      if (
+        originalDimensions.width === targetDimensions.width &&
+        originalDimensions.height === targetDimensions.height
+      ) {
+        const base64 = await fileToBase64(file);
+        resolve({
+          processedFile: base64,
+          warnings: [],
+          originalDimensions,
+          finalDimensions: targetDimensions,
+        });
+        return;
+      }
+
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+
+      if (!ctx) {
+        reject(new Error('Could not get canvas context'));
+        return;
+      }
+
+      const img = new Image();
+
+      img.onload = () => {
+        // Calculate scaling to fill target dimensions (will crop if needed)
+        const scaleX = targetDimensions.width / img.width;
+        const scaleY = targetDimensions.height / img.height;
+        const scale = Math.max(scaleX, scaleY); // Use larger scale to fill
+
+        // Calculate scaled dimensions
+        const scaledWidth = img.width * scale;
+        const scaledHeight = img.height * scale;
+
+        // Calculate crop offset to center the image
+        const cropX = (scaledWidth - targetDimensions.width) / 2;
+        const cropY = (scaledHeight - targetDimensions.height) / 2;
+
+        // Set canvas to target dimensions
+        canvas.width = targetDimensions.width;
+        canvas.height = targetDimensions.height;
+
+        // Draw image scaled and centered
+        ctx.drawImage(img, -cropX, -cropY, scaledWidth, scaledHeight);
+
+        // Add warning about resizing
+        if (
+          originalDimensions.width !== targetDimensions.width ||
+          originalDimensions.height !== targetDimensions.height
+        ) {
+          warnings.push(
+            `Image resized from ${originalDimensions.width}x${originalDimensions.height} to ${targetDimensions.width}x${targetDimensions.height}`
+          );
+        }
+
+        // Add warning about cropping if aspect ratios don't match
+        const originalAspect =
+          originalDimensions.width / originalDimensions.height;
+        const targetAspect = targetDimensions.width / targetDimensions.height;
+
+        if (Math.abs(originalAspect - targetAspect) > 0.01) {
+          warnings.push('Image was cropped to fit the required aspect ratio');
+        }
+
+        // Convert to base64 (use JPEG for photos, PNG for images with transparency)
+        const outputFormat = file.type.includes('png')
+          ? 'image/png'
+          : 'image/jpeg';
+        const processedFile = canvas.toDataURL(outputFormat, quality);
+
+        resolve({
+          processedFile,
+          warnings,
+          originalDimensions,
+          finalDimensions: targetDimensions,
+        });
+
+        URL.revokeObjectURL(img.src);
+      };
+
+      img.onerror = () => {
+        URL.revokeObjectURL(img.src);
+        reject(new Error('Failed to load image for processing'));
+      };
+
+      img.src = URL.createObjectURL(file);
+    } catch (error) {
+      reject(error);
+    }
+  });
+};
+
+/**
+ * Comprehensive file validation
+ */
+export interface FileValidationOptions {
+  maxSizeKB?: number;
+  allowedFormats?: AllowedImageFormat[];
+  requiredDimensions?: ImageDimensions;
+  allowAnyImageWithWarning?: boolean;
+}
+
+export const validateFile = async (
+  file: File,
+  options: FileValidationOptions
+): Promise<ValidationResult> => {
+  // Validate file size
+  if (options.maxSizeKB) {
+    const sizeResult = validateFileSize(file, options.maxSizeKB);
+    if (!sizeResult.isValid) return sizeResult;
+  }
+
+  // Validate file type
+  if (options.allowedFormats && !options.allowAnyImageWithWarning) {
+    const typeResult = validateFileType(file, options.allowedFormats);
+    if (!typeResult.isValid) return typeResult;
+  }
+
+  // Validate dimensions (skip for SVG files)
+  if (options.requiredDimensions && !isSvgFile(file)) {
+    const dimensionResult = await validateImageDimensions(
+      file,
+      options.requiredDimensions
+    );
+    if (!dimensionResult.isValid) return dimensionResult;
+  }
+
+  return { isValid: true };
+};

package/templates/src/utils/api/menuConfig.ts

@@ -0,0 +1,57 @@
+import { TractStackAPI } from '../api';
+import { convertToBackendFormat } from './menuHelpers';
+import type { MenuNode, MenuNodeState } from '@/types/tractstack';
+
+/**
+ * Save an existing menu
+ */
+export async function saveMenu(
+  tenantId: string,
+  menuState: MenuNodeState
+): Promise<MenuNode> {
+  const api = new TractStackAPI(tenantId);
+  const menuData = convertToBackendFormat(menuState);
+
+  const response = await api.put(
+    `/api/v1/nodes/menus/${menuState.id}`,
+    menuData
+  );
+  return response.data as MenuNode;
+}
+
+/**
+ * Create a new menu
+ */
+export async function createMenu(
+  tenantId: string,
+  menuState: MenuNodeState
+): Promise<MenuNode> {
+  const api = new TractStackAPI(tenantId);
+  const menuData = convertToBackendFormat(menuState);
+
+  const response = await api.post('/api/v1/nodes/menus/create', menuData);
+  return response.data as MenuNode;
+}
+
+/**
+ * Delete a menu
+ */
+export async function deleteMenu(
+  tenantId: string,
+  menuId: string
+): Promise<void> {
+  const api = new TractStackAPI(tenantId);
+  await api.request(`/api/v1/nodes/menus/${menuId}`, { method: 'DELETE' });
+}
+
+/**
+ * Get a menu by ID
+ */
+export async function getMenuById(
+  tenantId: string,
+  menuId: string
+): Promise<MenuNode> {
+  const api = new TractStackAPI(tenantId);
+  const response = await api.get(`/api/v1/nodes/menus/${menuId}`);
+  return response.data as MenuNode;
+}

package/templates/src/utils/api/menuHelpers.ts

@@ -0,0 +1,156 @@
+import type { MenuNode, MenuNodeState, FieldErrors } from '@/types/tractstack';
+
+/**
+ * Convert backend MenuNode to frontend MenuNodeState
+ */
+export function convertToLocalState(menuNode: MenuNode): MenuNodeState {
+  return {
+    id: menuNode.id,
+    title: menuNode.title,
+    theme: menuNode.theme,
+    menuLinks: menuNode.optionsPayload.map((link) => ({
+      name: link.name,
+      description: link.description,
+      featured: link.featured,
+      actionLisp: link.actionLisp,
+    })),
+  };
+}
+
+/**
+ * Convert frontend MenuNodeState to backend MenuNode format
+ */
+export function convertToBackendFormat(state: MenuNodeState): MenuNode {
+  return {
+    id: state.id,
+    title: state.title,
+    theme: state.theme,
+    optionsPayload: state.menuLinks.map((link) => ({
+      name: link.name,
+      description: link.description,
+      featured: link.featured,
+      actionLisp: link.actionLisp,
+    })),
+  };
+}
+
+/**
+ * Validate menu node state
+ */
+export function validateMenuNode(state: MenuNodeState): FieldErrors {
+  const errors: FieldErrors = {};
+
+  // Validate title
+  if (!state.title?.trim()) {
+    errors.title = 'Title is required';
+  }
+
+  // Validate theme
+  if (!state.theme?.trim()) {
+    errors.theme = 'Theme is required';
+  }
+
+  // Validate menu links
+  if (!state.menuLinks || state.menuLinks.length === 0) {
+    errors.menuLinks = 'At least one menu link is required';
+  } else {
+    state.menuLinks.forEach((link, index) => {
+      if (!link.name?.trim()) {
+        errors[`menuLinks.${index}.name`] = 'Link name is required';
+      }
+      if (!link.actionLisp?.trim()) {
+        errors[`menuLinks.${index}.actionLisp`] = 'Action is required';
+      } else {
+        // Basic ActionLisp validation
+        if (!link.actionLisp.startsWith('(goto ')) {
+          errors[`menuLinks.${index}.actionLisp`] =
+            'Action must start with "(goto "';
+        }
+        if (!link.actionLisp.endsWith('))')) {
+          errors[`menuLinks.${index}.actionLisp`] = 'Action must end with "))"';
+        }
+      }
+    });
+  }
+
+  return errors;
+}
+
+/**
+ * State interceptor for form state management
+ */
+export function menuStateIntercept(
+  state: MenuNodeState,
+  field: keyof MenuNodeState,
+  value: any
+): MenuNodeState {
+  const newState = { ...state };
+
+  switch (field) {
+    case 'title':
+      newState.title = value || '';
+      break;
+    case 'theme':
+      newState.theme = value || '';
+      break;
+    case 'menuLinks':
+      newState.menuLinks = value || [];
+      break;
+    default:
+      (newState as any)[field] = value;
+  }
+
+  return newState;
+}
+
+/**
+ * Add a new menu link to the state
+ */
+export function addMenuLink(state: MenuNodeState): MenuNodeState {
+  return {
+    ...state,
+    menuLinks: [
+      ...state.menuLinks,
+      {
+        name: '',
+        description: '',
+        featured: true,
+        actionLisp: '',
+      },
+    ],
+  };
+}
+
+/**
+ * Remove a menu link from the state
+ */
+export function removeMenuLink(
+  state: MenuNodeState,
+  index: number
+): MenuNodeState {
+  return {
+    ...state,
+    menuLinks: state.menuLinks.filter((_, i) => i !== index),
+  };
+}
+
+/**
+ * Update a specific menu link in the state
+ */
+export function updateMenuLink(
+  state: MenuNodeState,
+  index: number,
+  field: string,
+  value: any
+): MenuNodeState {
+  const newMenuLinks = [...state.menuLinks];
+  newMenuLinks[index] = {
+    ...newMenuLinks[index],
+    [field]: value,
+  };
+
+  return {
+    ...state,
+    menuLinks: newMenuLinks,
+  };
+}

package/templates/src/utils/api/resourceConfig.ts

@@ -0,0 +1,158 @@
+import { TractStackAPI } from '../api';
+import { convertToLocalState, convertToBackendFormat } from './resourceHelpers';
+import type { ResourceConfig, ResourceState } from '@/types/tractstack';
+
+/**
+ * Save resource - handles both create and update operations
+ */
+export async function saveResource(
+  tenantId: string,
+  resource: Partial<ResourceConfig> & { id?: string }
+): Promise<ResourceConfig> {
+  const api = new TractStackAPI(tenantId);
+  try {
+    const isCreate = !resource.id || resource.id === '';
+
+    let response;
+
+    if (isCreate) {
+      // Create new resource
+      response = await api.post<ResourceConfig>(
+        '/api/v1/nodes/resources/create',
+        resource
+      );
+    } else {
+      // Update existing resource
+      response = await api.put<ResourceConfig>(
+        `/api/v1/nodes/resources/${resource.id}`,
+        resource
+      );
+    }
+
+    if (!response.success || !response.data) {
+      throw new Error(response.error || 'Failed to save resource');
+    }
+
+    return response.data;
+  } catch (error) {
+    console.error('saveResource error:', error);
+
+    if (error instanceof Error) {
+      // Check if it's a JSON parsing error (from the error message)
+      if (
+        error.message.includes('Unexpected non-whitespace character after JSON')
+      ) {
+        throw new Error(
+          'Server returned invalid JSON response. Please check the backend logs.'
+        );
+      }
+      throw error;
+    }
+
+    throw new Error('Failed to save resource');
+  }
+}
+
+export async function createResource(
+  tenantId: string,
+  resource: Omit<ResourceConfig, 'id'>
+): Promise<ResourceConfig> {
+  const api = new TractStackAPI(tenantId);
+  const response = await api.post('/api/v1/nodes/resources/create', resource);
+  if (!response.success) {
+    throw new Error(response.error || 'Failed to create resource');
+  }
+  return response.data;
+}
+
+export async function getResource(
+  tenantId: string,
+  id: string
+): Promise<ResourceConfig> {
+  const api = new TractStackAPI(tenantId);
+  const response = await api.get(`/api/v1/nodes/resources/${id}`);
+  if (!response.success) {
+    throw new Error(response.error || 'Failed to get resource');
+  }
+  return response.data;
+}
+
+export async function getResourceBySlug(
+  tenantId: string,
+  slug: string
+): Promise<ResourceConfig> {
+  const api = new TractStackAPI(tenantId);
+  const response = await api.get(`/api/v1/nodes/resources/slug/${slug}`);
+  if (!response.success) {
+    throw new Error(response.error || 'Failed to get resource by slug');
+  }
+  return response.data;
+}
+
+export async function deleteResource(
+  tenantId: string,
+  id: string
+): Promise<void> {
+  const api = new TractStackAPI(tenantId);
+  const response = await api.request(`/api/v1/nodes/resources/${id}`, {
+    method: 'DELETE',
+  });
+  if (!response.success) {
+    throw new Error(response.error || 'Failed to delete resource');
+  }
+}
+
+export async function getAllResourceIds(tenantId: string): Promise<string[]> {
+  const api = new TractStackAPI(tenantId);
+  const response = await api.get('/api/v1/nodes/resources');
+  if (!response.success) {
+    throw new Error(response.error || 'Failed to get resource IDs');
+  }
+  return response.data;
+}
+
+export async function getResourcesByIds(
+  tenantId: string,
+  ids: string[]
+): Promise<ResourceConfig[]> {
+  const api = new TractStackAPI(tenantId);
+  const response = await api.post('/api/v1/nodes/resources', { ids });
+  if (!response.success) {
+    throw new Error(response.error || 'Failed to get resources by IDs');
+  }
+  return response.data;
+}
+
+export async function getResourcesByCategory(
+  tenantId: string,
+  categorySlug: string
+): Promise<ResourceConfig[]> {
+  const allIds = await getAllResourceIds(tenantId);
+  const allResources = await getResourcesByIds(tenantId, allIds);
+  return allResources.filter(
+    (resource) => resource.categorySlug === categorySlug
+  );
+}
+
+export async function saveResourceWithStateUpdate(
+  tenantId: string,
+  currentState: ResourceState
+): Promise<ResourceState> {
+  // Convert to backend format
+  const backendFormat = convertToBackendFormat(currentState);
+
+  // Determine if this is a create operation
+  const isCreate = !currentState.id || currentState.id === '';
+
+  if (isCreate) {
+    // For create, remove id and call createResource
+    const { id, ...createData } = backendFormat;
+    const createdResource = await createResource(tenantId, createData);
+    return convertToLocalState(createdResource);
+  } else {
+    // For update, send the FULL payload (not just changed fields)
+    // This is required for nodes unlike brand/advanced config
+    const updatedResource = await saveResource(tenantId, backendFormat);
+    return convertToLocalState(updatedResource);
+  }
+}