@getmicdrop/svelte-components 5.4.2 → 5.5.0

package/dist/recipes/CropImage/CropImage.stories.svelte

@@ -1,104 +1,104 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  import CropImage from "./CropImage.svelte";
-  import MicrophoneImage from "../../assets/images/microphone.png";
-
-  const { Story } = defineMeta({
-    title: "Components/CropImage",
-    component: CropImage,
-    argTypes: {
-      showModal: { control: "boolean" },
-      imageSrc: { control: "text" },
-    },
-  });
-</script>
-
-<script>
-  let showModal = $state(false);
-  let croppedImage = $state(null);
-
-  function handleSave(image) {
-    croppedImage = image;
-    console.log("Image cropped:", image);
-    alert("Image saved successfully!");
-  }
-
-  function handleCancel() {
-    console.log("Cropping cancelled");
-  }
-</script>
-
-
-<Story
-  name="Default"
-  args={{
-    imageSrc: MicrophoneImage
-  }}
-/>
-
-<Story name="With Sample Image">
-  <div>
-    <button
-      onclick={() => (showModal = true)}
-      class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
-    >
-      Crop Microphone Image
-    </button>
-
-    <CropImage
-      bind:showModal={showModal}
-      imageSrc={MicrophoneImage}
-      onSave={handleSave}
-      onCancel={handleCancel}
-    />
-
-    {#if croppedImage}
-      <div class="mt-4 p-4 bg-gray-100 rounded">
-        <p class="font-semibold mb-2">Cropped Result:</p>
-        <img src={URL.createObjectURL(croppedImage)} alt="Cropped result" class="max-w-sm border shadow" />
-      </div>
-    {/if}
-  </div>
-</Story>
-
-<Story name="Interactive Demo">
-  <div class="p-6">
-    <h3 class="text-lg font-bold mb-4">Image Cropping Demo</h3>
-    <p class="mb-2 text-gray-600">
-      Click the button below to open the crop modal. You can:
-    </p>
-    <ul class="list-disc ml-6 mt-2 mb-4 text-gray-600">
-      <li>Drag the crop box to reposition it</li>
-      <li>Drag corner handles to resize the crop area (maintains square aspect)</li>
-      <li>Use zoom slider or +/- buttons to zoom in/out</li>
-      <li>Click rotate button to rotate the image 90 degrees</li>
-      <li>Click Save to crop the image or Cancel to close</li>
-    </ul>
-
-    <button
-      onclick={() => (showModal = true)}
-      class="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 font-medium"
-    >
-      Start Cropping
-    </button>
-
-    <CropImage
-      bind:showModal={showModal}
-      imageSrc={MicrophoneImage}
-      onSave={handleSave}
-      onCancel={handleCancel}
-    />
-
-    {#if croppedImage}
-      <div class="mt-6 p-4 bg-green-50 border border-green-200 rounded-lg">
-        <p class="font-semibold text-green-800 mb-3">Successfully Cropped!</p>
-        <img
-          src={URL.createObjectURL(croppedImage)}
-          alt="Cropped result"
-          class="max-w-xs border-2 border-green-300 rounded shadow-lg"
-        />
-      </div>
-    {/if}
-  </div>
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import CropImage from "./CropImage.svelte";
+  import MicrophoneImage from "../../assets/images/microphone.png";
+
+  const { Story } = defineMeta({
+    title: "Components/CropImage",
+    component: CropImage,
+    argTypes: {
+      showModal: { control: "boolean" },
+      imageSrc: { control: "text" },
+    },
+  });
+</script>
+
+<script>
+  let showModal = $state(false);
+  let croppedImage = $state(null);
+
+  function handleSave(image) {
+    croppedImage = image;
+    console.log("Image cropped:", image);
+    alert("Image saved successfully!");
+  }
+
+  function handleCancel() {
+    console.log("Cropping cancelled");
+  }
+</script>
+
+
+<Story
+  name="Default"
+  args={{
+    imageSrc: MicrophoneImage
+  }}
+/>
+
+<Story name="With Sample Image">
+  <div>
+    <button
+      onclick={() => (showModal = true)}
+      class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+    >
+      Crop Microphone Image
+    </button>
+
+    <CropImage
+      bind:showModal={showModal}
+      imageSrc={MicrophoneImage}
+      onSave={handleSave}
+      onCancel={handleCancel}
+    />
+
+    {#if croppedImage}
+      <div class="mt-4 p-4 bg-gray-100 rounded">
+        <p class="font-semibold mb-2">Cropped Result:</p>
+        <img src={URL.createObjectURL(croppedImage)} alt="Cropped result" class="max-w-sm border shadow" />
+      </div>
+    {/if}
+  </div>
+</Story>
+
+<Story name="Interactive Demo">
+  <div class="p-6">
+    <h3 class="text-lg font-bold mb-4">Image Cropping Demo</h3>
+    <p class="mb-2 text-gray-600">
+      Click the button below to open the crop modal. You can:
+    </p>
+    <ul class="list-disc ml-6 mt-2 mb-4 text-gray-600">
+      <li>Drag the crop box to reposition it</li>
+      <li>Drag corner handles to resize the crop area (maintains square aspect)</li>
+      <li>Use zoom slider or +/- buttons to zoom in/out</li>
+      <li>Click rotate button to rotate the image 90 degrees</li>
+      <li>Click Save to crop the image or Cancel to close</li>
+    </ul>
+
+    <button
+      onclick={() => (showModal = true)}
+      class="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 font-medium"
+    >
+      Start Cropping
+    </button>
+
+    <CropImage
+      bind:showModal={showModal}
+      imageSrc={MicrophoneImage}
+      onSave={handleSave}
+      onCancel={handleCancel}
+    />
+
+    {#if croppedImage}
+      <div class="mt-6 p-4 bg-green-50 border border-green-200 rounded-lg">
+        <p class="font-semibold text-green-800 mb-3">Successfully Cropped!</p>
+        <img
+          src={URL.createObjectURL(croppedImage)}
+          alt="Cropped result"
+          class="max-w-xs border-2 border-green-300 rounded shadow-lg"
+        />
+      </div>
+    {/if}
+  </div>
+</Story>