@getmicdrop/svelte-components 5.9.6 → 5.10.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>

package/dist/recipes/CropImage/CropImage.svelte

@@ -1,219 +1,219 @@
-<script lang="ts">
-  import Cropper from 'svelte-easy-crop';
-  import { CloseOutline, MinusOutline, PlusOutline } from "../../primitives/Icons";
-  import Button from '../../primitives/Button/Button.svelte';
-  import { typography } from '../../tokens/typography';
-  import { createImage, supportsWebP } from '../../utils/imageOptimizer';
-
-  interface Props {
-    /** Whether to show the modal */
-    showModal?: boolean;
-    /** Image source to crop */
-    imageSrc?: string;
-    /** Callback when save is clicked with cropped image */
-    onSave?: (croppedImage: File) => void;
-    /** Callback when cancel is clicked */
-    onCancel?: () => void;
-    /** Whether image is currently uploading */
-    isUploadingImage?: boolean;
-  }
-
-  let {
-    showModal = $bindable(false),
-    imageSrc = $bindable(''),
-    onSave = () => {},
-    onCancel = () => {},
-    isUploadingImage = false
-  }: Props = $props();
-
-  let crop = $state({ x: 0, y: 0 });
-  let zoom = $state(1);
-  let croppedAreaPixels = $state<{ x: number; y: number; width: number; height: number } | null>(null);
-  let isLoading = $state(true);
-  let isSaving = $state(false);
-
-  $effect(() => {
-    if (showModal && imageSrc) {
-      crop = { x: 0, y: 0 };
-      zoom = 1;
-      croppedAreaPixels = null;
-      isLoading = true;
-      isSaving = false; // Reset saving state when modal opens with new image
-    }
-  });
-
-  function handleCropComplete(e: { pixels: { x: number; y: number; width: number; height: number } }) {
-    croppedAreaPixels = e.pixels;
-    isLoading = false;
-  }
-
-  async function handleSave() {
-    if (!croppedAreaPixels || isSaving) return;
-
-    isSaving = true;
-    const croppedImage = await getCroppedImg(imageSrc, croppedAreaPixels);
-    onSave(croppedImage);
-  }
-
-  function closeModal() {
-    showModal = false;
-    imageSrc = '';
-    crop = { x: 0, y: 0 };
-    zoom = 1;
-    croppedAreaPixels = null;
-    isSaving = false;
-    onCancel();
-  }
-
-  async function getCroppedImg(imageSrc: string, pixelCrop: { x: number; y: number; width: number; height: number }): Promise<File> {
-    const image = await createImage(imageSrc);
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d')!;
-
-    const maxSize = 1000;
-    canvas.width = maxSize;
-    canvas.height = maxSize;
-
-    ctx.imageSmoothingEnabled = true;
-    ctx.imageSmoothingQuality = 'high';
-
-    ctx.drawImage(
-      image,
-      pixelCrop.x,
-      pixelCrop.y,
-      pixelCrop.width,
-      pixelCrop.height,
-      0,
-      0,
-      maxSize,
-      maxSize
-    );
-
-    const useWebP = supportsWebP();
-    const mimeType = useWebP ? 'image/webp' : 'image/jpeg';
-    const quality = useWebP ? 0.80 : 0.85;
-    const extension = useWebP ? 'webp' : 'jpg';
-
-    return new Promise((resolve) => {
-      canvas.toBlob(
-        (blob) => {
-          const file = new File([blob!], `cropped-image.${extension}`, {
-            type: mimeType,
-          });
-          resolve(file);
-        },
-        mimeType,
-        quality
-      );
-    });
-  }
-</script>
-
-{#if showModal}
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div
-    class="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto overflow-x-hidden bg-gray-900/50 dark:bg-gray-900/80 p-4"
-    onclick={(e) => { if (e.target === e.currentTarget) closeModal(); }}
-  >
-    <div class="relative w-full max-w-lg max-h-full">
-      <div class="relative bg-white rounded-lg shadow-xl dark:bg-gray-800">
-        <div class="flex items-center justify-between p-4 border-b border-gray-200 rounded-t-lg dark:border-gray-600">
-          <h3 class={typography.h2}>
-            Crop image
-          </h3>
-          <Button
-            variant="icon"
-            size="sm"
-            onclick={closeModal}
-            aria-label="Close modal"
-          >
-            <CloseOutline class="w-3 h-3" />
-          </Button>
-        </div>
-
-        <div class="p-4 md:p-6 space-y-4">
-          <div class="relative w-full aspect-square sm:aspect-[4/3] max-h-80 sm:max-h-96 bg-gray-800 rounded-lg overflow-hidden">
-            {#if isLoading}
-              <div class="absolute inset-0 flex items-center justify-center bg-gray-200 dark:bg-gray-700 z-10">
-                <span class={typography.smMuted}>Loading...</span>
-              </div>
-            {/if}
-            <Cropper
-              image={imageSrc}
-              bind:crop
-              bind:zoom
-              aspect={1}
-              minZoom={1}
-              maxZoom={3}
-              showGrid={true}
-              oncropcomplete={handleCropComplete}
-            />
-          </div>
-
-          <p class={`${typography.smMuted} text-center`}>
-            Drag to position. Pinch or use slider to zoom.
-          </p>
-
-          <div class="flex items-center justify-center gap-3 max-w-xs mx-auto">
-            <Button
-              variant="outline"
-              size="sm"
-              class="!rounded-full !w-9 !h-9 !p-0 shrink-0"
-              onclick={() => (zoom = Math.max(1, zoom - 0.2))}
-              aria-label="Zoom out"
-            >
-              <MinusOutline class="w-4 h-4" />
-            </Button>
-
-            <input
-              type="range"
-              min="1"
-              max="3"
-              step="0.1"
-              bind:value={zoom}
-              class="flex-1 w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 accent-blue-600"
-              aria-label="Zoom level"
-            />
-
-            <Button
-              variant="outline"
-              size="sm"
-              class="!rounded-full !w-9 !h-9 !p-0 shrink-0"
-              onclick={() => (zoom = Math.min(3, zoom + 0.2))}
-              aria-label="Zoom in"
-            >
-              <PlusOutline class="w-4 h-4" />
-            </Button>
-          </div>
-        </div>
-
-        <div class="flex items-center justify-end gap-3 p-4 border-t border-gray-200 rounded-b-lg dark:border-gray-600">
-          <Button
-            type="button"
-            variant="alternative"
-            size="md"
-            minWidth="sm"
-            onclick={closeModal}
-            disabled={isSaving || isUploadingImage}
-          >
-            Cancel
-          </Button>
-          <Button
-            type="button"
-            size="md"
-            minWidth="sm"
-            onclick={handleSave}
-            disabled={isLoading || isSaving || isUploadingImage}
-          >
-            {#if isSaving || isUploadingImage}
-              Uploading...
-            {:else}
-              Save
-            {/if}
-          </Button>
-        </div>
-      </div>
-    </div>
-  </div>
-{/if}
+<script lang="ts">
+  import Cropper from 'svelte-easy-crop';
+  import { CloseOutline, MinusOutline, PlusOutline } from "../../primitives/Icons";
+  import Button from '../../primitives/Button/Button.svelte';
+  import { typography } from '../../tokens/typography';
+  import { createImage, supportsWebP } from '../../utils/imageOptimizer';
+
+  interface Props {
+    /** Whether to show the modal */
+    showModal?: boolean;
+    /** Image source to crop */
+    imageSrc?: string;
+    /** Callback when save is clicked with cropped image */
+    onSave?: (croppedImage: File) => void;
+    /** Callback when cancel is clicked */
+    onCancel?: () => void;
+    /** Whether image is currently uploading */
+    isUploadingImage?: boolean;
+  }
+
+  let {
+    showModal = $bindable(false),
+    imageSrc = $bindable(''),
+    onSave = () => {},
+    onCancel = () => {},
+    isUploadingImage = false
+  }: Props = $props();
+
+  let crop = $state({ x: 0, y: 0 });
+  let zoom = $state(1);
+  let croppedAreaPixels = $state<{ x: number; y: number; width: number; height: number } | null>(null);
+  let isLoading = $state(true);
+  let isSaving = $state(false);
+
+  $effect(() => {
+    if (showModal && imageSrc) {
+      crop = { x: 0, y: 0 };
+      zoom = 1;
+      croppedAreaPixels = null;
+      isLoading = true;
+      isSaving = false; // Reset saving state when modal opens with new image
+    }
+  });
+
+  function handleCropComplete(e: { pixels: { x: number; y: number; width: number; height: number } }) {
+    croppedAreaPixels = e.pixels;
+    isLoading = false;
+  }
+
+  async function handleSave() {
+    if (!croppedAreaPixels || isSaving) return;
+
+    isSaving = true;
+    const croppedImage = await getCroppedImg(imageSrc, croppedAreaPixels);
+    onSave(croppedImage);
+  }
+
+  function closeModal() {
+    showModal = false;
+    imageSrc = '';
+    crop = { x: 0, y: 0 };
+    zoom = 1;
+    croppedAreaPixels = null;
+    isSaving = false;
+    onCancel();
+  }
+
+  async function getCroppedImg(imageSrc: string, pixelCrop: { x: number; y: number; width: number; height: number }): Promise<File> {
+    const image = await createImage(imageSrc);
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d')!;
+
+    const maxSize = 1000;
+    canvas.width = maxSize;
+    canvas.height = maxSize;
+
+    ctx.imageSmoothingEnabled = true;
+    ctx.imageSmoothingQuality = 'high';
+
+    ctx.drawImage(
+      image,
+      pixelCrop.x,
+      pixelCrop.y,
+      pixelCrop.width,
+      pixelCrop.height,
+      0,
+      0,
+      maxSize,
+      maxSize
+    );
+
+    const useWebP = supportsWebP();
+    const mimeType = useWebP ? 'image/webp' : 'image/jpeg';
+    const quality = useWebP ? 0.80 : 0.85;
+    const extension = useWebP ? 'webp' : 'jpg';
+
+    return new Promise((resolve) => {
+      canvas.toBlob(
+        (blob) => {
+          const file = new File([blob!], `cropped-image.${extension}`, {
+            type: mimeType,
+          });
+          resolve(file);
+        },
+        mimeType,
+        quality
+      );
+    });
+  }
+</script>
+
+{#if showModal}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto overflow-x-hidden bg-gray-900/50 dark:bg-gray-900/80 p-4"
+    onclick={(e) => { if (e.target === e.currentTarget) closeModal(); }}
+  >
+    <div class="relative w-full max-w-lg max-h-full">
+      <div class="relative bg-white rounded-lg shadow-xl dark:bg-gray-800">
+        <div class="flex items-center justify-between p-4 border-b border-gray-200 rounded-t-lg dark:border-gray-600">
+          <h3 class={typography.h2}>
+            Crop image
+          </h3>
+          <Button
+            variant="icon"
+            size="sm"
+            onclick={closeModal}
+            aria-label="Close modal"
+          >
+            <CloseOutline class="w-3 h-3" />
+          </Button>
+        </div>
+
+        <div class="p-4 md:p-6 space-y-4">
+          <div class="relative w-full aspect-square sm:aspect-[4/3] max-h-80 sm:max-h-96 bg-gray-800 rounded-lg overflow-hidden">
+            {#if isLoading}
+              <div class="absolute inset-0 flex items-center justify-center bg-gray-200 dark:bg-gray-700 z-10">
+                <span class={typography.smMuted}>Loading...</span>
+              </div>
+            {/if}
+            <Cropper
+              image={imageSrc}
+              bind:crop
+              bind:zoom
+              aspect={1}
+              minZoom={1}
+              maxZoom={3}
+              showGrid={true}
+              oncropcomplete={handleCropComplete}
+            />
+          </div>
+
+          <p class={`${typography.smMuted} text-center`}>
+            Drag to position. Pinch or use slider to zoom.
+          </p>
+
+          <div class="flex items-center justify-center gap-3 max-w-xs mx-auto">
+            <Button
+              variant="outline"
+              size="sm"
+              class="rounded-full! w-9! h-9! p-0! shrink-0"
+              onclick={() => (zoom = Math.max(1, zoom - 0.2))}
+              aria-label="Zoom out"
+            >
+              <MinusOutline class="w-4 h-4" />
+            </Button>
+
+            <input
+              type="range"
+              min="1"
+              max="3"
+              step="0.1"
+              bind:value={zoom}
+              class="flex-1 w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 accent-blue-600"
+              aria-label="Zoom level"
+            />
+
+            <Button
+              variant="outline"
+              size="sm"
+              class="rounded-full! w-9! h-9! p-0! shrink-0"
+              onclick={() => (zoom = Math.min(3, zoom + 0.2))}
+              aria-label="Zoom in"
+            >
+              <PlusOutline class="w-4 h-4" />
+            </Button>
+          </div>
+        </div>
+
+        <div class="flex items-center justify-end gap-3 p-4 border-t border-gray-200 rounded-b-lg dark:border-gray-600">
+          <Button
+            type="button"
+            variant="alternative"
+            size="md"
+            minWidth="sm"
+            onclick={closeModal}
+            disabled={isSaving || isUploadingImage}
+          >
+            Cancel
+          </Button>
+          <Button
+            type="button"
+            size="md"
+            minWidth="sm"
+            onclick={handleSave}
+            disabled={isLoading || isSaving || isUploadingImage}
+          >
+            {#if isSaving || isUploadingImage}
+              Uploading...
+            {:else}
+              Save
+            {/if}
+          </Button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}