@getmicdrop/svelte-components 5.5.4 → 5.5.5

package/dist/tokens/__tests__/z-index.test.js

@@ -0,0 +1,121 @@
+import { describe, it, expect } from 'vitest';
+import { zIndex, layers } from '../z-index';
+describe('Z-Index Tokens', () => {
+    it('has auto value', () => {
+        expect(zIndex.auto).toBe('auto');
+    });
+    it('has base 0 value', () => {
+        expect(zIndex['0']).toBe('0');
+    });
+    it('has 10 value', () => {
+        expect(zIndex['10']).toBe('10');
+    });
+    it('has 20 value', () => {
+        expect(zIndex['20']).toBe('20');
+    });
+    it('has 30 value', () => {
+        expect(zIndex['30']).toBe('30');
+    });
+    it('has 40 value', () => {
+        expect(zIndex['40']).toBe('40');
+    });
+    it('has 50 value', () => {
+        expect(zIndex['50']).toBe('50');
+    });
+    it('has 51 value for modal content', () => {
+        expect(zIndex['51']).toBe('51');
+    });
+    it('has 60 value', () => {
+        expect(zIndex['60']).toBe('60');
+    });
+    it('has 70 value', () => {
+        expect(zIndex['70']).toBe('70');
+    });
+    it('has 100 value for critical', () => {
+        expect(zIndex['100']).toBe('100');
+    });
+});
+describe('Layer Aliases', () => {
+    it('base is 0', () => {
+        expect(layers.base).toBe('0');
+        expect(layers.base).toBe(zIndex['0']);
+    });
+    it('sticky is 10', () => {
+        expect(layers.sticky).toBe('10');
+        expect(layers.sticky).toBe(zIndex['10']);
+    });
+    it('navigation is 20', () => {
+        expect(layers.navigation).toBe('20');
+        expect(layers.navigation).toBe(zIndex['20']);
+    });
+    it('dropdown is 30', () => {
+        expect(layers.dropdown).toBe('30');
+        expect(layers.dropdown).toBe(zIndex['30']);
+    });
+    it('overlay is 40', () => {
+        expect(layers.overlay).toBe('40');
+        expect(layers.overlay).toBe(zIndex['40']);
+    });
+    it('modal is 50', () => {
+        expect(layers.modal).toBe('50');
+        expect(layers.modal).toBe(zIndex['50']);
+    });
+    it('modalContent is 51 (above modal)', () => {
+        expect(layers.modalContent).toBe('51');
+        expect(layers.modalContent).toBe(zIndex['51']);
+    });
+    it('toast is 60', () => {
+        expect(layers.toast).toBe('60');
+        expect(layers.toast).toBe(zIndex['60']);
+    });
+    it('tooltip is 70', () => {
+        expect(layers.tooltip).toBe('70');
+        expect(layers.tooltip).toBe(zIndex['70']);
+    });
+    it('critical is 100', () => {
+        expect(layers.critical).toBe('100');
+        expect(layers.critical).toBe(zIndex['100']);
+    });
+});
+describe('Layer Stacking Order', () => {
+    it('layers stack in correct order', () => {
+        const order = [
+            parseInt(layers.base),
+            parseInt(layers.sticky),
+            parseInt(layers.navigation),
+            parseInt(layers.dropdown),
+            parseInt(layers.overlay),
+            parseInt(layers.modal),
+            parseInt(layers.modalContent),
+            parseInt(layers.toast),
+            parseInt(layers.tooltip),
+            parseInt(layers.critical),
+        ];
+        for (let i = 0; i < order.length - 1; i++) {
+            expect(order[i + 1]).toBeGreaterThanOrEqual(order[i]);
+        }
+    });
+    it('modal content is above modal', () => {
+        expect(parseInt(layers.modalContent)).toBeGreaterThan(parseInt(layers.modal));
+    });
+    it('toast is above overlay', () => {
+        expect(parseInt(layers.toast)).toBeGreaterThan(parseInt(layers.overlay));
+    });
+    it('tooltip is above toast', () => {
+        expect(parseInt(layers.tooltip)).toBeGreaterThan(parseInt(layers.toast));
+    });
+    it('critical is highest', () => {
+        expect(parseInt(layers.critical)).toBeGreaterThanOrEqual(parseInt(layers.tooltip));
+    });
+});
+describe('Z-Index Semantic Meaning', () => {
+    it('dropdowns appear above navigation', () => {
+        expect(parseInt(layers.dropdown)).toBeGreaterThan(parseInt(layers.navigation));
+    });
+    it('overlays appear above dropdowns', () => {
+        expect(parseInt(layers.overlay)).toBeGreaterThan(parseInt(layers.dropdown));
+    });
+    it('modals appear above overlays', () => {
+        expect(parseInt(layers.modal)).toBeGreaterThan(parseInt(layers.overlay));
+    });
+});

package/dist/utils/apiConfig.spec.js

@@ -1,9 +1,12 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import {
   API_BASE_URL,
   FRONTEND_BASE_URL,
   buildApiUrl,
   API_ENDPOINTS,
+  buildPerformerInviteUrl,
+  getPerformerInviteMethod,
+  buildV2PerformerActionUrl,
 } from './apiConfig';
 
 describe('apiConfig', () => {
@@ -115,4 +118,102 @@ describe('apiConfig', () => {
       expect(loginUrl).toContain('/api/public/login');
     });
   });
+
+  describe('buildPerformerInviteUrl', () => {
+    it('builds V1 accept URL', () => {
+      const url = buildPerformerInviteUrl(123, 'accept');
+      expect(url).toContain('/api/public/acceptEventPerformerInvite/123');
+    });
+
+    it('builds V1 decline URL', () => {
+      const url = buildPerformerInviteUrl(456, 'decline');
+      expect(url).toContain('/api/public/declineEventPerformerInvite/456');
+    });
+
+    it('builds V1 cancel URL', () => {
+      const url = buildPerformerInviteUrl(789, 'cancel');
+      expect(url).toContain('/api/public/cancelEventPerformerInvite/789');
+    });
+  });
+
+  describe('getPerformerInviteMethod', () => {
+    it('returns correct HTTP method for V1 actions', () => {
+      expect(getPerformerInviteMethod('accept')).toBe('PUT');
+      expect(getPerformerInviteMethod('decline')).toBe('PUT');
+      expect(getPerformerInviteMethod('cancel')).toBe('PUT');
+    });
+  });
+
+  describe('buildV2PerformerActionUrl', () => {
+    it('builds V2 performer action URL with confirm', () => {
+      const url = buildV2PerformerActionUrl(123, 'confirm');
+      expect(url).toContain('/api/v2/event-performers/123/confirm');
+    });
+
+    it('builds V2 performer action URL with decline', () => {
+      const url = buildV2PerformerActionUrl(456, 'decline');
+      expect(url).toContain('/api/v2/event-performers/456/decline');
+    });
+
+    it('builds V2 performer action URL with reassign', () => {
+      const url = buildV2PerformerActionUrl(789, 'reassign');
+      expect(url).toContain('/api/v2/event-performers/789/reassign');
+    });
+  });
+
+  describe('V2 API paths', () => {
+    let originalEnv;
+
+    beforeEach(async () => {
+      originalEnv = import.meta.env.VITE_API_VERSION;
+      vi.resetModules();
+    });
+
+    afterEach(async () => {
+      import.meta.env.VITE_API_VERSION = originalEnv;
+      vi.resetModules();
+    });
+
+    it('buildPerformerInviteUrl uses V2 endpoint for accept when USE_V2_API is true', async () => {
+      // Set environment variable to v2
+      import.meta.env.VITE_API_VERSION = 'v2';
+
+      // Re-import to get fresh module with new env
+      const module = await import('./apiConfig');
+
+      const url = module.buildPerformerInviteUrl(123, 'accept');
+      expect(url).toContain('/api/v2/event-performers/123/confirm');
+    });
+
+    it('buildPerformerInviteUrl uses V2 endpoint for decline when USE_V2_API is true', async () => {
+      import.meta.env.VITE_API_VERSION = 'v2';
+      const module = await import('./apiConfig');
+
+      const url = module.buildPerformerInviteUrl(456, 'decline');
+      expect(url).toContain('/api/v2/event-performers/456/decline');
+    });
+
+    it('buildPerformerInviteUrl uses V1 endpoint for cancel even when USE_V2_API is true', async () => {
+      import.meta.env.VITE_API_VERSION = 'v2';
+      const module = await import('./apiConfig');
+
+      const url = module.buildPerformerInviteUrl(789, 'cancel');
+      expect(url).toContain('/api/public/cancelEventPerformerInvite/789');
+    });
+
+    it('getPerformerInviteMethod returns POST for V2 non-cancel actions', async () => {
+      import.meta.env.VITE_API_VERSION = 'v2';
+      const module = await import('./apiConfig');
+
+      expect(module.getPerformerInviteMethod('accept')).toBe('POST');
+      expect(module.getPerformerInviteMethod('decline')).toBe('POST');
+    });
+
+    it('getPerformerInviteMethod returns PUT for V2 cancel action', async () => {
+      import.meta.env.VITE_API_VERSION = 'v2';
+      const module = await import('./apiConfig');
+
+      expect(module.getPerformerInviteMethod('cancel')).toBe('PUT');
+    });
+  });
 });

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

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

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

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

package/dist/utils/formatters.spec.js

@@ -0,0 +1,82 @@
+import { expect, describe, test } from 'vitest';
+import { formatCreditCardNumber, formatPhoneNumber } from './formatters.ts';
+
+describe('formatCreditCardNumber', () => {
+  test('formats empty string', () => {
+    expect(formatCreditCardNumber('')).toBe('');
+  });
+
+  test('formats 4 digits', () => {
+    expect(formatCreditCardNumber('1234')).toBe('1234');
+  });
+
+  test('formats 8 digits with space', () => {
+    expect(formatCreditCardNumber('12345678')).toBe('1234 5678');
+  });
+
+  test('formats 12 digits with spaces', () => {
+    expect(formatCreditCardNumber('123456789012')).toBe('1234 5678 9012');
+  });
+
+  test('formats 16 digits with spaces', () => {
+    expect(formatCreditCardNumber('1234567890123456')).toBe('1234 5678 9012 3456');
+  });
+
+  test('removes non-digit characters', () => {
+    expect(formatCreditCardNumber('1234-5678-9012-3456')).toBe('1234 5678 9012 3456');
+  });
+
+  test('handles spaces in input', () => {
+    expect(formatCreditCardNumber('1234 5678')).toBe('1234 5678');
+  });
+
+  test('handles letters in input', () => {
+    expect(formatCreditCardNumber('1234abcd5678')).toBe('1234 5678');
+  });
+
+  test('handles partial card number', () => {
+    expect(formatCreditCardNumber('123456789')).toBe('1234 5678 9');
+  });
+});
+
+describe('formatPhoneNumber', () => {
+  test('formats empty string', () => {
+    expect(formatPhoneNumber('')).toBe('');
+  });
+
+  test('formats 3 digits', () => {
+    expect(formatPhoneNumber('123')).toBe('123');
+  });
+
+  test('formats 4 digits with dash', () => {
+    expect(formatPhoneNumber('1234')).toBe('123-4');
+  });
+
+  test('formats 6 digits with dash', () => {
+    expect(formatPhoneNumber('123456')).toBe('123-456');
+  });
+
+  test('formats 7 digits with two dashes', () => {
+    expect(formatPhoneNumber('1234567')).toBe('123-456-7');
+  });
+
+  test('formats 10 digits fully', () => {
+    expect(formatPhoneNumber('1234567890')).toBe('123-456-7890');
+  });
+
+  test('removes non-digit characters', () => {
+    expect(formatPhoneNumber('123-456-7890')).toBe('123-456-7890');
+  });
+
+  test('handles parentheses in input', () => {
+    expect(formatPhoneNumber('(123) 456-7890')).toBe('123-456-7890');
+  });
+
+  test('handles letters in input', () => {
+    expect(formatPhoneNumber('123abc456')).toBe('123-456');
+  });
+
+  test('truncates after 10 digits', () => {
+    expect(formatPhoneNumber('12345678901234')).toBe('123-456-7890');
+  });
+});

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

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

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

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

package/dist/utils/transitions.spec.js

@@ -0,0 +1,130 @@
+import { expect, describe, test, vi } from 'vitest';
+import { safeSlide } from './transitions.js';
+
+// Mock svelte/transition
+vi.mock('svelte/transition', () => ({
+  slide: vi.fn((node, params) => ({
+    delay: params?.delay || 0,
+    duration: params?.duration || 400,
+    css: (t) => `height: ${t * 100}px`
+  }))
+}));
+
+describe('safeSlide', () => {
+  test('returns no-op transition for zero dimensions', () => {
+    const node = {
+      offsetHeight: 0,
+      offsetWidth: 0
+    };
+
+    const result = safeSlide(node);
+
+    expect(result.duration).toBe(0);
+    expect(result.css()).toBe('');
+  });
+
+  test('returns no-op transition for undefined dimensions', () => {
+    const node = {};
+
+    const result = safeSlide(node);
+
+    expect(result.duration).toBe(0);
+    expect(result.css()).toBe('');
+  });
+
+  test('returns no-op transition for NaN dimensions', () => {
+    const node = {
+      offsetHeight: NaN,
+      offsetWidth: NaN
+    };
+
+    const result = safeSlide(node);
+
+    expect(result.duration).toBe(0);
+    expect(result.css()).toBe('');
+  });
+
+  test('returns no-op transition for Infinity dimensions', () => {
+    const node = {
+      offsetHeight: Infinity,
+      offsetWidth: Infinity
+    };
+
+    const result = safeSlide(node);
+
+    expect(result.duration).toBe(0);
+    expect(result.css()).toBe('');
+  });
+
+  test('uses standard slide for valid dimensions', async () => {
+    const node = {
+      offsetHeight: 100,
+      offsetWidth: 200
+    };
+
+    const result = safeSlide(node);
+
+    // Should have received slide transition result
+    expect(result.duration).toBe(400);
+    expect(typeof result.css).toBe('function');
+  });
+
+  test('passes params to slide transition', async () => {
+    const node = {
+      offsetHeight: 100,
+      offsetWidth: 200
+    };
+    const params = { delay: 100, duration: 200 };
+
+    const result = safeSlide(node, params);
+
+    expect(result.delay).toBe(100);
+    expect(result.duration).toBe(200);
+  });
+
+  test('uses default delay for no-op transition', () => {
+    const node = {
+      offsetHeight: 0,
+      offsetWidth: 0
+    };
+
+    const result = safeSlide(node);
+
+    expect(result.delay).toBe(0);
+  });
+
+  test('uses custom delay for no-op transition', () => {
+    const node = {
+      offsetHeight: 0,
+      offsetWidth: 0
+    };
+
+    const result = safeSlide(node, { delay: 500 });
+
+    expect(result.delay).toBe(500);
+  });
+
+  test('handles node with only height (uses slide)', () => {
+    const node = {
+      offsetHeight: 100,
+      offsetWidth: 0
+    };
+
+    const result = safeSlide(node);
+
+    // At least one dimension is valid, so should use slide
+    expect(result.duration).toBe(400);
+  });
+
+  test('handles node with only width (uses slide)', () => {
+    const node = {
+      offsetHeight: 0,
+      offsetWidth: 100
+    };
+
+    const result = safeSlide(node);
+
+    // At least one dimension is valid, so should use slide
+    expect(result.duration).toBe(400);
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getmicdrop/svelte-components",
-  "version": "5.5.4",
+  "version": "5.5.5",
   "description": "Shared component library for Micdrop applications",
   "type": "module",
   "main": "./dist/index.js",
@@ -115,7 +115,7 @@
       "types": "./dist/datetime/index.d.ts",
       "import": "./dist/datetime/index.js"
     },
-"./utils/utils": {
+    "./utils/utils": {
       "import": "./dist/utils/utils.js"
     },
     "./utils/utils/utils": {
@@ -229,13 +229,14 @@
     "sortablejs": "^1.15.6",
     "svelte-easy-crop": "^5.0.0",
     "svelte-filepond": "^0.2.2",
-    "svelte-sonner": "^0.3.28",
+    "svelte-sonner": "^1.0.7",
     "tailwind-merge": "^2.5.4",
     "tinymce": "^7.4.1",
     "zod": "^3.23.8"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.14.6",
+    "@eslint/js": "^9.39.2",
     "@storybook/addon-essentials": "^8.2.5",
     "@storybook/addon-interactions": "^8.2.5",
     "@storybook/addon-links": "^8.2.5",
@@ -253,13 +254,16 @@
     "@testing-library/svelte": "^5.2.0",
     "@types/cookie": "^1.0.0",
     "@types/node": "^20.14.12",
+    "@typescript-eslint/parser": "^8.52.0",
     "@vitest/coverage-istanbul": "^2.1.9",
+    "@vitest/coverage-v8": "^2.1.9",
     "@vitest/ui": "^2.0.4",
     "autoprefixer": "^10.4.19",
     "chromatic": "^13.3.4",
     "cypress": "^15.1.0",
     "eslint": "^9.7.0",
     "eslint-plugin-svelte": "^2.43.0",
+    "globals": "^17.0.0",
     "husky": "^9.1.7",
     "jsdom": "^24.1.1",
     "postcss": "^8.4.39",
@@ -271,6 +275,7 @@
     "svelte-check": "^3.8.4",
     "tailwindcss": "^3.4.6",
     "typescript": "^5.5.4",
+    "typescript-eslint": "^8.52.0",
     "vite": "^6.4.1",
     "vite-plugin-istanbul": "^7.2.1",
     "vitest": "^2.0.4"