@getmicdrop/svelte-components 1.0.2 → 1.0.3

package/dist/components/PlaceAutocomplete/PlaceAutocomplete.spec.js

@@ -0,0 +1,300 @@
+import { describe, it, expect, vi, beforeEach, beforeAll, afterEach } from 'vitest';
+import { render, fireEvent, waitFor, cleanup } from '@testing-library/svelte';
+
+// Mock the config
+vi.mock('../../lib/config.js', () => ({
+  PUBLIC_GOOGLE_MAPS_API_KEY: 'mock-api-key',
+}));
+
+// Mock Google Maps API
+const mockAutocompleteSessionToken = vi.fn().mockImplementation(() => ({}));
+const mockFetchAutocompleteSuggestions = vi.fn().mockResolvedValue({
+  suggestions: [
+    {
+      placePrediction: {
+        text: { toString: () => 'Los Angeles, CA, USA' },
+        types: ['locality', 'political'],
+        toPlace: vi.fn().mockReturnValue({
+          fetchFields: vi.fn().mockResolvedValue({}),
+          toJSON: vi.fn().mockReturnValue({
+            text: 'Los Angeles, CA, USA',
+            formattedAddress: '123 Main St, Los Angeles, CA 90012',
+          }),
+        }),
+      },
+    },
+    {
+      placePrediction: {
+        text: { toString: () => 'Long Beach, CA, USA' },
+        types: ['locality', 'political'],
+        toPlace: vi.fn().mockReturnValue({
+          fetchFields: vi.fn().mockResolvedValue({}),
+          toJSON: vi.fn().mockReturnValue({
+            text: 'Long Beach, CA, USA',
+            formattedAddress: '456 Beach St, Long Beach, CA 90801',
+          }),
+        }),
+      },
+    },
+  ],
+});
+
+vi.mock('@googlemaps/js-api-loader', () => ({
+  Loader: vi.fn().mockImplementation(() => ({
+    importLibrary: vi.fn().mockResolvedValue({
+      AutocompleteSessionToken: mockAutocompleteSessionToken,
+      AutocompleteSuggestion: {
+        fetchAutocompleteSuggestions: mockFetchAutocompleteSuggestions,
+      },
+    }),
+  })),
+}));
+
+describe('PlaceAutocomplete', () => {
+  let PlaceAutocomplete;
+
+  beforeAll(async () => {
+    vi.resetModules();
+    PlaceAutocomplete = (await import('./PlaceAutocomplete.svelte')).default;
+  }, 60000);
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe('Basic Rendering', () => {
+    it('renders the component', async () => {
+      const { container } = render(PlaceAutocomplete);
+      expect(container.querySelector('.place-wrapper')).toBeDefined();
+    });
+
+    it('renders with default placeholder', async () => {
+      const { container } = render(PlaceAutocomplete);
+      const input = container.querySelector('input');
+      expect(input?.placeholder).toContain('Search');
+    });
+
+    it('renders with custom placeholder', async () => {
+      const { container } = render(PlaceAutocomplete, {
+        props: { placeholder: 'Enter address' },
+      });
+      const input = container.querySelector('input');
+      expect(input?.placeholder).toBe('Enter address');
+    });
+
+    it('renders search icon', async () => {
+      const { container } = render(PlaceAutocomplete);
+      expect(container.querySelector('svg')).toBeDefined();
+    });
+  });
+
+  describe('Props', () => {
+    it('accepts initialValue prop', async () => {
+      const { container } = render(PlaceAutocomplete, {
+        props: { initialValue: 'New York, NY' },
+      });
+      const input = container.querySelector('input');
+      expect(input?.value).toBe('New York, NY');
+    });
+
+    it('accepts disabled prop', async () => {
+      const { container } = render(PlaceAutocomplete, {
+        props: { disabled: true },
+      });
+      const input = container.querySelector('input');
+      expect(input?.disabled).toBe(true);
+    });
+
+    it('accepts mode prop for cityState', async () => {
+      const { container } = render(PlaceAutocomplete, {
+        props: { mode: 'cityState' },
+      });
+      const input = container.querySelector('input');
+      expect(input?.placeholder).toContain('city, state');
+    });
+
+    it('accepts animateFocus prop', async () => {
+      const { container } = render(PlaceAutocomplete, {
+        props: { animateFocus: false },
+      });
+      expect(container.querySelector('.place-animate-focus')).toBeNull();
+    });
+
+    it('accepts autocomplete prop', async () => {
+      const { container } = render(PlaceAutocomplete, {
+        props: { autocomplete: 'off' },
+      });
+      const input = container.querySelector('input');
+      expect(input?.autocomplete).toBe('off');
+    });
+  });
+
+  describe('Input Interaction', () => {
+    it('updates value on input', async () => {
+      const { container } = render(PlaceAutocomplete);
+      const input = container.querySelector('input');
+
+      await fireEvent.input(input, { target: { value: 'Los' } });
+      expect(input?.value).toBe('Los');
+    });
+
+    it('clears results on empty input', async () => {
+      const { container } = render(PlaceAutocomplete);
+      const input = container.querySelector('input');
+
+      await fireEvent.input(input, { target: { value: 'Los' } });
+      await fireEvent.input(input, { target: { value: '' } });
+      expect(input?.value).toBe('');
+    });
+  });
+
+  describe('Keyboard Navigation', () => {
+    it('handles Escape key', async () => {
+      const { container } = render(PlaceAutocomplete);
+      const input = container.querySelector('input');
+
+      await fireEvent.keyDown(input, { key: 'Escape' });
+      expect(container).toBeDefined();
+    });
+
+    it('handles ArrowDown key with no results', async () => {
+      const { container } = render(PlaceAutocomplete);
+      const input = container.querySelector('input');
+
+      await fireEvent.keyDown(input, { key: 'ArrowDown' });
+      expect(container).toBeDefined();
+    });
+
+    it('handles ArrowUp key with no results', async () => {
+      const { container } = render(PlaceAutocomplete);
+      const input = container.querySelector('input');
+
+      await fireEvent.keyDown(input, { key: 'ArrowUp' });
+      expect(container).toBeDefined();
+    });
+
+    it('handles Enter key with no selection', async () => {
+      const { container } = render(PlaceAutocomplete);
+      const input = container.querySelector('input');
+
+      await fireEvent.keyDown(input, { key: 'Enter' });
+      expect(container).toBeDefined();
+    });
+  });
+
+  describe('Callbacks', () => {
+    it('calls onResponse when provided', async () => {
+      const onResponse = vi.fn();
+      const { container } = render(PlaceAutocomplete, {
+        props: { onResponse },
+      });
+      expect(container).toBeDefined();
+    });
+
+    it('calls onError when provided', async () => {
+      const onError = vi.fn();
+      const { container } = render(PlaceAutocomplete, {
+        props: { onError },
+      });
+      expect(container).toBeDefined();
+    });
+  });
+
+  describe('Styling', () => {
+    it('has correct wrapper class', async () => {
+      const { container } = render(PlaceAutocomplete);
+      expect(container.querySelector('.place-wrapper')).toBeDefined();
+    });
+
+    it('has correct container class', async () => {
+      const { container } = render(PlaceAutocomplete);
+      expect(container.querySelector('.place-container')).toBeDefined();
+    });
+
+    it('has correct input class', async () => {
+      const { container } = render(PlaceAutocomplete);
+      expect(container.querySelector('.place-input')).toBeDefined();
+    });
+
+    it('applies animate focus class when enabled', async () => {
+      const { container } = render(PlaceAutocomplete, {
+        props: { animateFocus: true, disabled: false },
+      });
+      expect(container.querySelector('.place-animate-focus')).toBeDefined();
+    });
+
+    it('does not apply animate focus class when disabled', async () => {
+      const { container } = render(PlaceAutocomplete, {
+        props: { animateFocus: true, disabled: true },
+      });
+      expect(container.querySelector('.place-animate-focus')).toBeNull();
+    });
+  });
+
+  describe('Mode: cityState', () => {
+    it('filters results to only localities', async () => {
+      const { container } = render(PlaceAutocomplete, {
+        props: { mode: 'cityState' },
+      });
+      expect(container).toBeDefined();
+    });
+
+    it('updates placeholder for cityState mode', async () => {
+      const { container } = render(PlaceAutocomplete, {
+        props: { mode: 'cityState' },
+      });
+      const input = container.querySelector('input');
+      expect(input?.placeholder).toContain('city, state');
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('handles missing API key gracefully', async () => {
+      const onError = vi.fn();
+      const { container } = render(PlaceAutocomplete, {
+        props: { onError },
+      });
+      expect(container).toBeDefined();
+    });
+  });
+
+  describe('Click Outside', () => {
+    it('handles click outside to close dropdown', async () => {
+      const { container } = render(PlaceAutocomplete);
+      
+      // Simulate click outside
+      document.body.click();
+      
+      await waitFor(() => {
+        expect(container.querySelector('.place-dropdown')).toBeNull();
+      });
+    });
+  });
+
+  describe('Initial Value', () => {
+    it('sets initial value on mount', async () => {
+      const { container } = render(PlaceAutocomplete, {
+        props: { initialValue: 'San Francisco, CA' },
+      });
+      
+      const input = container.querySelector('input');
+      expect(input?.value).toBe('San Francisco, CA');
+    });
+
+    it('initializes only once', async () => {
+      const { container, rerender } = render(PlaceAutocomplete, {
+        props: { initialValue: 'San Francisco, CA' },
+      });
+
+      await rerender({ initialValue: 'Los Angeles, CA' });
+      
+      // Value should remain the initial value
+      const input = container.querySelector('input');
+      expect(input).toBeDefined();
+    });
+  });
+});

package/dist/components/PlaceAutocomplete/PlaceAutocomplete.stories.svelte

@@ -0,0 +1,168 @@
+<script context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import PlaceAutocomplete from "./PlaceAutocomplete.svelte";
+
+  export const meta = {
+    title: "Components/PlaceAutocomplete",
+    component: PlaceAutocomplete,
+    argTypes: {
+      placeholder: { control: "text" },
+      initialValue: { control: "text" },
+      mode: { control: "select", options: ["full", "cityState"] },
+      language: { control: "text" },
+      region: { control: "text" },
+      onResponse: { action: "response" },
+      onError: { action: "error" },
+    },
+  };
+
+  function handleResponse(data) {
+    console.log("Place selected:", data);
+    alert(`Selected: ${JSON.stringify(data, null, 2)}`);
+  }
+
+  function handleError(error) {
+    console.error("Error:", error);
+    alert(`Error: ${error}`);
+  }
+</script>
+
+<Template let:args>
+  <div style="max-width: 500px; margin: 0 auto;">
+    <PlaceAutocomplete {...args} />
+  </div>
+</Template>
+
+<Story
+  name="Default Full Address"
+  args={{
+    placeholder: "Search for location...",
+    mode: "full",
+    onResponse: handleResponse,
+    onError: handleError
+  }}
+/>
+
+<Story name="City State Only">
+  <div style="max-width: 500px; margin: 0 auto;">
+    <PlaceAutocomplete
+      placeholder="Search for city, state..."
+      mode="cityState"
+      onResponse={handleResponse}
+      onError={handleError}
+    />
+  </div>
+</Story>
+
+<Story name="With Initial Value">
+  <div style="max-width: 500px; margin: 0 auto;">
+    <PlaceAutocomplete
+      placeholder="Search for location..."
+      initialValue="New York, NY"
+      mode="cityState"
+      onResponse={handleResponse}
+      onError={handleError}
+    />
+  </div>
+</Story>
+
+<Story name="Custom Placeholder">
+  <div style="max-width: 500px; margin: 0 auto;">
+    <PlaceAutocomplete
+      placeholder="Where is your venue located?"
+      mode="full"
+      onResponse={handleResponse}
+      onError={handleError}
+    />
+  </div>
+</Story>
+
+<Story name="In Form Context">
+  <div style="max-width: 600px; margin: 0 auto; padding: 20px;">
+    <h2 class="text-2xl font-bold mb-6">Event Location</h2>
+    <div class="space-y-4">
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-2">
+          Venue Name
+        </label>
+        <input
+          type="text"
+          placeholder="Enter venue name"
+          class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-2">
+          Venue Location
+        </label>
+        <PlaceAutocomplete
+          placeholder="Search for venue location..."
+          mode="full"
+          onResponse={handleResponse}
+          onError={handleError}
+        />
+      </div>
+      <button class="px-4 py-2 bg-blue-600 text-white rounded-lg">
+        Save Location
+      </button>
+    </div>
+  </div>
+</Story>
+
+<Story name="Performer Location">
+  <div style="max-width: 500px; margin: 0 auto;">
+    <label class="block text-sm font-medium text-gray-700 mb-2">
+      Your Home Base
+    </label>
+    <p class="text-sm text-gray-600 mb-3">
+      Let venues know where you're based
+    </p>
+    <PlaceAutocomplete
+      placeholder="Enter your city and state..."
+      mode="cityState"
+      onResponse={handleResponse}
+      onError={handleError}
+    />
+  </div>
+</Story>
+
+<Story name="Multiple Locations">
+  <div style="max-width: 700px; margin: 0 auto; padding: 20px;">
+    <h2 class="text-xl font-bold mb-6">Tour Locations</h2>
+    <div class="space-y-6">
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-2">
+          Starting City
+        </label>
+        <PlaceAutocomplete
+          placeholder="Where will you start?"
+          mode="cityState"
+          onResponse={handleResponse}
+          onError={handleError}
+        />
+      </div>
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-2">
+          Destination City
+        </label>
+        <PlaceAutocomplete
+          placeholder="Where will you end?"
+          mode="cityState"
+          onResponse={handleResponse}
+          onError={handleError}
+        />
+      </div>
+    </div>
+  </div>
+</Story>
+
+<Story name="Compact Layout">
+  <div style="max-width: 350px; margin: 0 auto;">
+    <PlaceAutocomplete
+      placeholder="City..."
+      mode="cityState"
+      onResponse={handleResponse}
+      onError={handleError}
+    />
+  </div>
+</Story>

package/dist/components/PlaceAutocomplete/PlaceAutocomplete.stories.svelte.d.ts

@@ -0,0 +1,60 @@
+export namespace meta {
+    export let title: string;
+    export { PlaceAutocomplete as component };
+    export namespace argTypes {
+        namespace placeholder {
+            let control: string;
+        }
+        namespace initialValue {
+            let control_1: string;
+            export { control_1 as control };
+        }
+        namespace mode {
+            let control_2: string;
+            export { control_2 as control };
+            export let options: string[];
+        }
+        namespace language {
+            let control_3: string;
+            export { control_3 as control };
+        }
+        namespace region {
+            let control_4: string;
+            export { control_4 as control };
+        }
+        namespace onResponse {
+            let action: string;
+        }
+        namespace onError {
+            let action_1: string;
+            export { action_1 as action };
+        }
+    }
+}
+/** @typedef {typeof __propDef.props}  PlaceAutocompleteProps */
+/** @typedef {typeof __propDef.events}  PlaceAutocompleteEvents */
+/** @typedef {typeof __propDef.slots}  PlaceAutocompleteSlots */
+export default class PlaceAutocomplete extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type PlaceAutocompleteProps = typeof __propDef.props;
+export type PlaceAutocompleteEvents = typeof __propDef.events;
+export type PlaceAutocompleteSlots = typeof __propDef.slots;
+import PlaceAutocomplete from "./PlaceAutocomplete.svelte";
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=PlaceAutocomplete.stories.svelte.d.ts.map

package/dist/components/PlaceAutocomplete/PlaceAutocomplete.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlaceAutocomplete.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/PlaceAutocomplete/PlaceAutocomplete.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8HA,gEAAgE;AAChE,kEAAkE;AAClE,gEAAgE;AAEhE;;;;;CACC;qCALa,OAAO,SAAS,CAAC,KAAK;sCACtB,OAAO,SAAS,CAAC,MAAM;qCACvB,OAAO,SAAS,CAAC,KAAK;8BA5HJ,4BAA4B;gCAJ5B,QAAQ;AA6HxC;;;;;;;;;;EAAgF"}