@getmicdrop/svelte-components 5.21.0 → 5.21.2

package/dist/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.stories.svelte

@@ -1,170 +1,170 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-    import PlaceAutocomplete from "./PlaceAutocomplete.svelte";
-
-  const { Story } = defineMeta({
-    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>
-
-
-<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 for="venue-name" class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
-          Venue Name
-        </label>
-        <input
-          id="venue-name"
-          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>
-        <!-- svelte-ignore a11y_label_has_associated_control -->
-        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 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-primary text-white rounded-lg">
-        Save Location
-      </button>
-    </div>
-  </div>
-</Story>
-
-<Story name="Performer Location">
-  <div style="max-width: 500px; margin: 0 auto;">
-    <!-- svelte-ignore a11y_label_has_associated_control -->
-    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
-      Your Home Base
-    </label>
-    <p class="text-sm text-gray-500 dark:text-gray-400 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>
-        <!-- svelte-ignore a11y_label_has_associated_control -->
-        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
-          Starting City
-        </label>
-        <PlaceAutocomplete
-          placeholder="Where will you start?"
-          mode="cityState"
-          onResponse={handleResponse}
-          onError={handleError}
-        />
-      </div>
-      <div>
-        <!-- svelte-ignore a11y_label_has_associated_control -->
-        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 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>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+    import PlaceAutocomplete from "./PlaceAutocomplete.svelte";
+
+  const { Story } = defineMeta({
+    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>
+
+
+<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 for="venue-name" class="block text-sm font-medium text-muted-foreground mb-2">
+          Venue Name
+        </label>
+        <input
+          id="venue-name"
+          type="text"
+          placeholder="Enter venue name"
+          class="w-full px-3 py-2 border border-stroke-primary rounded-lg focus:ring-2 focus:ring-focus-ring"
+        />
+      </div>
+      <div>
+        <!-- svelte-ignore a11y_label_has_associated_control -->
+        <label class="block text-sm font-medium text-muted-foreground 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-primary text-white rounded-lg">
+        Save Location
+      </button>
+    </div>
+  </div>
+</Story>
+
+<Story name="Performer Location">
+  <div style="max-width: 500px; margin: 0 auto;">
+    <!-- svelte-ignore a11y_label_has_associated_control -->
+    <label class="block text-sm font-medium text-muted-foreground mb-2">
+      Your Home Base
+    </label>
+    <p class="text-sm text-muted-foreground 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>
+        <!-- svelte-ignore a11y_label_has_associated_control -->
+        <label class="block text-sm font-medium text-muted-foreground mb-2">
+          Starting City
+        </label>
+        <PlaceAutocomplete
+          placeholder="Where will you start?"
+          mode="cityState"
+          onResponse={handleResponse}
+          onError={handleError}
+        />
+      </div>
+      <div>
+        <!-- svelte-ignore a11y_label_has_associated_control -->
+        <label class="block text-sm font-medium text-muted-foreground 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>