@getmicdrop/svelte-components 1.0.5 → 1.0.6

package/dist/utils/imageValidation.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Validates an image file according to upload guidelines
+ * @param {File} file - The image file to validate
+ * @returns {Promise<{valid: boolean, error: string|null, dimensions: {width: number, height: number}}>}
+ */
+export function validateImage(file: File): Promise<{
+    valid: boolean;
+    error: string | null;
+    dimensions: {
+        width: number;
+        height: number;
+    };
+}>;
+/**
+ * Gets the accept attribute value for file inputs
+ * @returns {string}
+ */
+export function getImageAcceptAttribute(): string;
+/**
+ * Gets formatted error messages for display in UI
+ * @returns {object}
+ */
+export function getValidationMessages(): object;
+/**
+ * Image validation utilities for file uploads
+ *
+ * Guidelines:
+ * - Formats: PNG, JPG, JPEG, WebP, HEIC, HEIF
+ * - Max dimension: 8000px (to handle phone screenshots up to 4K)
+ * - Max file size: 20MB (we crop and optimize to 1000x1000 WebP anyway)
+ * - Aspect ratio: Any
+ */
+export const MAX_FILE_SIZE: number;
+export const MAX_DIMENSION: 8000;
+export const ALLOWED_IMAGE_TYPES: string[];
+//# sourceMappingURL=imageValidation.d.ts.map

package/dist/utils/imageValidation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"imageValidation.d.ts","sourceRoot":"","sources":["../../src/lib/utils/imageValidation.js"],"names":[],"mappings":"AAqBA;;;;GAIG;AACH,oCAHW,IAAI,GACF,OAAO,CAAC;IAAC,KAAK,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,GAAC,IAAI,CAAC;IAAC,UAAU,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAC,CAAA;CAAC,CAAC,CA8CtG;AA6BD;;;GAGG;AACH,2CAFa,MAAM,CAIlB;AAED;;;GAGG;AACH,yCAFa,MAAM,CASlB;AAtHD;;;;;;;;GAQG;AAEH,mCAAuC;AACvC,4BAAsB,IAAI,CAAC;AAC3B,2CAOE"}

package/dist/utils/imageValidation.js

@@ -0,0 +1,121 @@
+/**
+ * Image validation utilities for file uploads
+ *
+ * Guidelines:
+ * - Formats: PNG, JPG, JPEG, WebP, HEIC, HEIF
+ * - Max dimension: 8000px (to handle phone screenshots up to 4K)
+ * - Max file size: 20MB (we crop and optimize to 1000x1000 WebP anyway)
+ * - Aspect ratio: Any
+ */
+
+const MAX_FILE_SIZE = 20 * 1024 * 1024; // 20 MB - generous since we optimize
+const MAX_DIMENSION = 8000; // pixels - handles 4K+ phone screenshots
+const ALLOWED_IMAGE_TYPES = [
+  'image/jpeg',
+  'image/jpg',
+  'image/png',
+  'image/webp',
+  'image/heic',
+  'image/heif'
+];
+
+/**
+ * Validates an image file according to upload guidelines
+ * @param {File} file - The image file to validate
+ * @returns {Promise<{valid: boolean, error: string|null, dimensions: {width: number, height: number}}>}
+ */
+export async function validateImage(file) {
+  // Check file type
+  if (!ALLOWED_IMAGE_TYPES.includes(file.type.toLowerCase())) {
+    return {
+      valid: false,
+      error: 'Invalid file format. Please upload PNG, JPG, WebP, or HEIC images only.',
+      dimensions: null
+    };
+  }
+
+  // Check file size
+  if (file.size > MAX_FILE_SIZE) {
+    const sizeMB = (file.size / (1024 * 1024)).toFixed(2);
+    return {
+      valid: false,
+      error: `File too large (${sizeMB}MB). Maximum file size is 20MB.`,
+      dimensions: null
+    };
+  }
+
+  // Check dimensions
+  try {
+    const dimensions = await getImageDimensions(file);
+
+    if (dimensions.width > MAX_DIMENSION || dimensions.height > MAX_DIMENSION) {
+      return {
+        valid: false,
+        error: `Image dimensions too large (${dimensions.width}x${dimensions.height}px). Maximum dimension is ${MAX_DIMENSION}px.`,
+        dimensions
+      };
+    }
+
+    return {
+      valid: true,
+      error: null,
+      dimensions
+    };
+  } catch (error) {
+    return {
+      valid: false,
+      error: 'Failed to read image dimensions. Please try another file.',
+      dimensions: null
+    };
+  }
+}
+
+/**
+ * Gets the dimensions of an image file
+ * @param {File} file - The image file
+ * @returns {Promise<{width: number, height: number}>}
+ */
+function getImageDimensions(file) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    const objectUrl = URL.createObjectURL(file);
+
+    img.onload = function() {
+      URL.revokeObjectURL(objectUrl);
+      resolve({
+        width: this.width,
+        height: this.height
+      });
+    };
+
+    img.onerror = function() {
+      URL.revokeObjectURL(objectUrl);
+      reject(new Error('Failed to load image'));
+    };
+
+    img.src = objectUrl;
+  });
+}
+
+/**
+ * Gets the accept attribute value for file inputs
+ * @returns {string}
+ */
+export function getImageAcceptAttribute() {
+  return 'image/png,image/jpeg,image/jpg,image/webp,image/heic,image/heif';
+}
+
+/**
+ * Gets formatted error messages for display in UI
+ * @returns {object}
+ */
+export function getValidationMessages() {
+  return {
+    formats: 'PNG, JPG, WebP, HEIC',
+    maxSize: '20MB',
+    maxDimension: '8000px',
+    aspectRatio: 'Any'
+  };
+}
+
+export { MAX_FILE_SIZE, MAX_DIMENSION, ALLOWED_IMAGE_TYPES };

package/dist/utils/imageValidation.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=imageValidation.spec.d.ts.map

package/dist/utils/imageValidation.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"imageValidation.spec.d.ts","sourceRoot":"","sources":["../../src/lib/utils/imageValidation.spec.js"],"names":[],"mappings":""}

package/dist/utils/imageValidation.spec.js

@@ -0,0 +1,220 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import {
+  validateImage,
+  getImageAcceptAttribute,
+  getValidationMessages,
+  MAX_FILE_SIZE,
+  MAX_DIMENSION,
+  ALLOWED_IMAGE_TYPES,
+} from './imageValidation';
+
+describe('imageValidation', () => {
+  beforeEach(() => {
+    // Mock URL.createObjectURL and URL.revokeObjectURL
+    global.URL.createObjectURL = vi.fn(() => 'mock-object-url');
+    global.URL.revokeObjectURL = vi.fn();
+  });
+
+  describe('constants', () => {
+    it('MAX_FILE_SIZE is 20MB', () => {
+      expect(MAX_FILE_SIZE).toBe(20 * 1024 * 1024);
+    });
+
+    it('MAX_DIMENSION is 8000', () => {
+      expect(MAX_DIMENSION).toBe(8000);
+    });
+
+    it('ALLOWED_IMAGE_TYPES includes common formats', () => {
+      expect(ALLOWED_IMAGE_TYPES).toContain('image/jpeg');
+      expect(ALLOWED_IMAGE_TYPES).toContain('image/png');
+      expect(ALLOWED_IMAGE_TYPES).toContain('image/webp');
+      expect(ALLOWED_IMAGE_TYPES).toContain('image/heic');
+      expect(ALLOWED_IMAGE_TYPES).toContain('image/heif');
+    });
+  });
+
+  describe('validateImage', () => {
+    it('rejects invalid file type', async () => {
+      const file = new File(['content'], 'test.gif', { type: 'image/gif' });
+      const result = await validateImage(file);
+
+      expect(result.valid).toBe(false);
+      expect(result.error).toContain('Invalid file format');
+    });
+
+    it('rejects file that is too large', async () => {
+      // Create a mock file larger than 20MB
+      const largeContent = new ArrayBuffer(21 * 1024 * 1024);
+      const file = new File([largeContent], 'large.jpg', { type: 'image/jpeg' });
+
+      const result = await validateImage(file);
+
+      expect(result.valid).toBe(false);
+      expect(result.error).toContain('File too large');
+      expect(result.error).toContain('20MB');
+    });
+
+    it('accepts valid JPEG file', async () => {
+      const file = new File(['content'], 'test.jpg', { type: 'image/jpeg' });
+
+      // Mock Image loading
+      const mockImage = {
+        width: 100,
+        height: 100,
+        onload: null,
+        onerror: null,
+        src: '',
+      };
+      vi.spyOn(global, 'Image').mockImplementation(() => {
+        setTimeout(() => mockImage.onload?.call(mockImage), 0);
+        return mockImage;
+      });
+
+      const result = await validateImage(file);
+
+      expect(result.valid).toBe(true);
+      expect(result.error).toBe(null);
+      expect(result.dimensions).toEqual({ width: 100, height: 100 });
+    });
+
+    it('accepts valid PNG file', async () => {
+      const file = new File(['content'], 'test.png', { type: 'image/png' });
+
+      const mockImage = {
+        width: 500,
+        height: 500,
+        onload: null,
+        onerror: null,
+        src: '',
+      };
+      vi.spyOn(global, 'Image').mockImplementation(() => {
+        setTimeout(() => mockImage.onload?.call(mockImage), 0);
+        return mockImage;
+      });
+
+      const result = await validateImage(file);
+
+      expect(result.valid).toBe(true);
+    });
+
+    it('accepts valid WebP file', async () => {
+      const file = new File(['content'], 'test.webp', { type: 'image/webp' });
+
+      const mockImage = {
+        width: 200,
+        height: 200,
+        onload: null,
+        onerror: null,
+        src: '',
+      };
+      vi.spyOn(global, 'Image').mockImplementation(() => {
+        setTimeout(() => mockImage.onload?.call(mockImage), 0);
+        return mockImage;
+      });
+
+      const result = await validateImage(file);
+
+      expect(result.valid).toBe(true);
+    });
+
+    it('rejects image with dimensions too large', async () => {
+      const file = new File(['content'], 'test.jpg', { type: 'image/jpeg' });
+
+      const mockImage = {
+        width: 9000,
+        height: 9000,
+        onload: null,
+        onerror: null,
+        src: '',
+      };
+      vi.spyOn(global, 'Image').mockImplementation(() => {
+        setTimeout(() => mockImage.onload?.call(mockImage), 0);
+        return mockImage;
+      });
+
+      const result = await validateImage(file);
+
+      expect(result.valid).toBe(false);
+      expect(result.error).toContain('dimensions too large');
+      expect(result.dimensions).toEqual({ width: 9000, height: 9000 });
+    });
+
+    it('handles image load error', async () => {
+      const file = new File(['content'], 'test.jpg', { type: 'image/jpeg' });
+
+      const mockImage = {
+        onload: null,
+        onerror: null,
+        src: '',
+      };
+      vi.spyOn(global, 'Image').mockImplementation(() => {
+        setTimeout(() => mockImage.onerror?.(), 0);
+        return mockImage;
+      });
+
+      const result = await validateImage(file);
+
+      expect(result.valid).toBe(false);
+      expect(result.error).toContain('Failed to read image dimensions');
+    });
+
+    it('handles HEIC format', async () => {
+      const file = new File(['content'], 'test.heic', { type: 'image/heic' });
+
+      const mockImage = {
+        width: 100,
+        height: 100,
+        onload: null,
+        onerror: null,
+        src: '',
+      };
+      vi.spyOn(global, 'Image').mockImplementation(() => {
+        setTimeout(() => mockImage.onload?.call(mockImage), 0);
+        return mockImage;
+      });
+
+      const result = await validateImage(file);
+
+      expect(result.valid).toBe(true);
+    });
+  });
+
+  describe('getImageAcceptAttribute', () => {
+    it('returns accept string with all allowed types', () => {
+      const accept = getImageAcceptAttribute();
+
+      expect(accept).toContain('image/png');
+      expect(accept).toContain('image/jpeg');
+      expect(accept).toContain('image/webp');
+      expect(accept).toContain('image/heic');
+      expect(accept).toContain('image/heif');
+    });
+
+    it('returns comma-separated values', () => {
+      const accept = getImageAcceptAttribute();
+      expect(accept.split(',').length).toBeGreaterThan(1);
+    });
+  });
+
+  describe('getValidationMessages', () => {
+    it('returns formats message', () => {
+      const messages = getValidationMessages();
+      expect(messages.formats).toBe('PNG, JPG, WebP, HEIC');
+    });
+
+    it('returns maxSize message', () => {
+      const messages = getValidationMessages();
+      expect(messages.maxSize).toBe('20MB');
+    });
+
+    it('returns maxDimension message', () => {
+      const messages = getValidationMessages();
+      expect(messages.maxDimension).toBe('8000px');
+    });
+
+    it('returns aspectRatio message', () => {
+      const messages = getValidationMessages();
+      expect(messages.aspectRatio).toBe('Any');
+    });
+  });
+});

package/dist/utils/portal.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Svelte action that portals an element to a target container (default: document.body)
+ * This moves the element outside of any stacking contexts, solving iOS z-index issues.
+ *
+ * Usage: <div use:portal>...</div>
+ * Or: <div use:portal={document.getElementById('modal-root')}>...</div>
+ */
+export function portal(node: any, target?: HTMLElement): {
+    update(newTarget: any): void;
+    destroy(): void;
+};
+//# sourceMappingURL=portal.d.ts.map

package/dist/utils/portal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal.d.ts","sourceRoot":"","sources":["portal.js"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH;;;EAiBC"}

package/dist/utils/portal.js

@@ -0,0 +1,25 @@
+/**
+ * Svelte action that portals an element to a target container (default: document.body)
+ * This moves the element outside of any stacking contexts, solving iOS z-index issues.
+ *
+ * Usage: <div use:portal>...</div>
+ * Or: <div use:portal={document.getElementById('modal-root')}>...</div>
+ */
+export function portal(node, target = document.body) {
+  // Move the node to the target
+  target.appendChild(node);
+
+  return {
+    update(newTarget) {
+      // If target changes, move to new target
+      newTarget = newTarget || document.body;
+      newTarget.appendChild(node);
+    },
+    destroy() {
+      // Clean up - remove the node when component is destroyed
+      if (node.parentNode) {
+        node.parentNode.removeChild(node);
+      }
+    }
+  };
+}

package/dist/utils/portal.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=portal.spec.d.ts.map

package/dist/utils/portal.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal.spec.d.ts","sourceRoot":"","sources":["../../src/lib/utils/portal.spec.js"],"names":[],"mappings":""}

package/dist/utils/portal.spec.js

@@ -0,0 +1,143 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { portal } from './portal';
+
+describe('portal', () => {
+  let node;
+  let target;
+
+  beforeEach(() => {
+    // Create mock nodes
+    node = document.createElement('div');
+    node.textContent = 'Portal Content';
+    target = document.createElement('div');
+    target.id = 'portal-target';
+    document.body.appendChild(target);
+  });
+
+  afterEach(() => {
+    // Clean up
+    if (target.parentNode) {
+      target.parentNode.removeChild(target);
+    }
+    if (node.parentNode) {
+      node.parentNode.removeChild(node);
+    }
+  });
+
+  describe('initial portal', () => {
+    it('appends node to document.body by default', () => {
+      portal(node);
+      expect(node.parentNode).toBe(document.body);
+    });
+
+    it('appends node to specified target', () => {
+      portal(node, target);
+      expect(node.parentNode).toBe(target);
+    });
+
+    it('returns an object with update and destroy methods', () => {
+      const result = portal(node);
+      expect(result).toHaveProperty('update');
+      expect(result).toHaveProperty('destroy');
+      expect(typeof result.update).toBe('function');
+      expect(typeof result.destroy).toBe('function');
+    });
+  });
+
+  describe('update method', () => {
+    it('moves node to new target', () => {
+      const newTarget = document.createElement('div');
+      document.body.appendChild(newTarget);
+
+      const { update } = portal(node, target);
+      expect(node.parentNode).toBe(target);
+
+      update(newTarget);
+      expect(node.parentNode).toBe(newTarget);
+
+      // Clean up
+      newTarget.parentNode.removeChild(newTarget);
+    });
+
+    it('moves node to document.body when new target is null', () => {
+      const { update } = portal(node, target);
+      expect(node.parentNode).toBe(target);
+
+      update(null);
+      expect(node.parentNode).toBe(document.body);
+    });
+
+    it('moves node to document.body when new target is undefined', () => {
+      const { update } = portal(node, target);
+      expect(node.parentNode).toBe(target);
+
+      update(undefined);
+      expect(node.parentNode).toBe(document.body);
+    });
+  });
+
+  describe('destroy method', () => {
+    it('removes node from parent', () => {
+      const { destroy } = portal(node, target);
+      expect(node.parentNode).toBe(target);
+
+      destroy();
+      expect(node.parentNode).toBe(null);
+    });
+
+    it('handles node already removed', () => {
+      const { destroy } = portal(node, target);
+
+      // Manually remove node first
+      target.removeChild(node);
+
+      // Should not throw
+      expect(() => destroy()).not.toThrow();
+    });
+
+    it('removes node from document.body', () => {
+      const { destroy } = portal(node);
+      expect(node.parentNode).toBe(document.body);
+
+      destroy();
+      expect(node.parentNode).toBe(null);
+    });
+  });
+
+  describe('real-world usage scenarios', () => {
+    it('can portal modal content outside stacking context', () => {
+      // Create a stacking context
+      const stackingContext = document.createElement('div');
+      stackingContext.style.position = 'relative';
+      stackingContext.style.zIndex = '1';
+      document.body.appendChild(stackingContext);
+
+      // Create modal inside stacking context
+      const modal = document.createElement('div');
+      modal.className = 'modal';
+      stackingContext.appendChild(modal);
+
+      // Portal should move it to body
+      portal(modal);
+      expect(modal.parentNode).toBe(document.body);
+
+      // Clean up
+      stackingContext.parentNode.removeChild(stackingContext);
+    });
+
+    it('works with multiple portals', () => {
+      const node1 = document.createElement('div');
+      const node2 = document.createElement('div');
+
+      portal(node1);
+      portal(node2);
+
+      expect(node1.parentNode).toBe(document.body);
+      expect(node2.parentNode).toBe(document.body);
+
+      // Clean up
+      document.body.removeChild(node1);
+      document.body.removeChild(node2);
+    });
+  });
+});

package/dist/utils/utils/utils.d.ts

@@ -0,0 +1,73 @@
+export function cn(...inputs: any[]): string;
+export function convertToDate(value: any): string | null;
+export function classNames(...classes: any[]): string;
+export function truncateTitle(title: any, maxLength: any): any;
+export function convertToCustomDateFormat(isoString: any): Date;
+export function convertToCustomDateTimeFormat(isoDateString: any): Date;
+export function formatHour(dateString: any): string;
+export function formattedDate(date: any): string;
+export function formattedFullDate(date: any): string;
+export function formatTimeRange(startDate: any, endDate: any): string;
+export function getDateRange(startDate: any, endDate: any): string[];
+export function capitalize(word: any): any;
+export function timeAgo(date: any): string;
+export function formatDateTime(dateTimeString: any, timeZone?: string): string;
+export function formatTimeline(startDateTime: any): string;
+export function getDay(dateString: any): string;
+export function getMonth(dateString: any): string;
+export function getDateOfMonth(dateString: any): number;
+export function getRoleFromRoleOnStage(roleOnStage: any): any;
+export function formatEvent(event: any): {
+    eventId: any;
+    venueId: any;
+    title: any;
+    role: any;
+    startDateTime: any;
+    acceptedState: any;
+    doorsOpenTime: any;
+    spotDuration: string;
+    venueName: any;
+    location: any;
+    id: any;
+    image: any;
+    details: {
+        venue: any;
+        stageName: any;
+        address: any;
+        setLength: string;
+        eventDetails: any;
+    };
+    lastUpdated: any;
+};
+export function formatRosterEventPerformerInvite(event: any): {
+    venueId: any;
+    role: any;
+    acceptedState: any;
+    name: any;
+    shortVenue: string;
+    location: string;
+    id: any;
+    lastUpdated: any;
+    image: any;
+    hasAvailability: boolean;
+    invitationAccepted: boolean;
+};
+export function formatVenue(event: any): {
+    venueId: any;
+    name: any;
+    image: any;
+    location: string;
+    start: any;
+    end: any;
+    doorOpen: any;
+    email: any;
+    phone: any;
+    description: any;
+    instagram: any;
+    facebook: any;
+    twitter: any;
+    lastUpdated: any;
+    timeRange: string;
+    dateRange: string[];
+};
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils/utils/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["utils.js"],"names":[],"mappings":"AAGA,6CAEC;AAED,yDAEC;AAED,sDAEC;AAED,+DAKC;AAED,gEAUC;AAED,wEAWC;AAED,oDAWC;AAED,iDAQC;AAED,qDAiBC;AAgDD,sEAgBC;AAED,qEAgBC;AA+HD,2CAEC;AAED,2CAsBC;AA1NM,+EAeN;AAEM,2DAYN;AAsCM,gDAIN;AAEM,kDAiBN;AAEM,wDAGN;AAgBM,8DAEN;AAGM;;;;;;;;;;;;;;;;;;;;;EAoCN;AAEM;;;;;;;;;;;;EAeN;AAEM;;;;;;;;;;;;;;;;;EAmBN"}