@getmicdrop/svelte-components 1.0.2 → 1.0.3

package/dist/components/CropImage/CropImage.stories.svelte

@@ -0,0 +1,133 @@
+<script context="module">
+  import CropImage from "./CropImage.svelte";
+  import MicrophoneImage from "../../assets/images/microphone.png";
+
+  export const meta = {
+    title: "Components/CropImage",
+    component: CropImage,
+    argTypes: {
+      showModal: { control: "boolean" },
+      imageSrc: { control: "text" },
+    },
+  };
+</script>
+
+<script>
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import { writable } from "svelte/store";
+
+  let showModal = writable(false);
+  let croppedImage = null;
+
+  function handleSave(image) {
+    croppedImage = image;
+    console.log("Image cropped:", image);
+    alert("Image saved successfully!");
+  }
+
+  function handleCancel() {
+    console.log("Cropping cancelled");
+  }
+
+  function openModal() {
+    $showModal = true;
+  }
+</script>
+
+<Template let:args>
+  <div>
+    <button
+      on:click={openModal}
+      class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+    >
+      Open Crop Image Modal
+    </button>
+
+    <CropImage
+      bind:showModal={$showModal}
+      imageSrc={args.imageSrc}
+      onSave={handleSave}
+      onCancel={handleCancel}
+    />
+
+    {#if croppedImage}
+      <div class="mt-4">
+        <p class="font-semibold">Cropped Image:</p>
+        <img src={URL.createObjectURL(croppedImage)} alt="Cropped result" class="max-w-md mt-2 border" />
+      </div>
+    {/if}
+  </div>
+</Template>
+
+<Story
+  name="Default"
+  args={{
+    imageSrc: MicrophoneImage
+  }}
+/>
+
+<Story name="With Sample Image">
+  <div>
+    <button
+      on:click={() => ($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
+      on:click={() => ($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/components/CropImage/CropImage.stories.svelte.d.ts

@@ -0,0 +1,40 @@
+export namespace meta {
+    export let title: string;
+    export { CropImage as component };
+    export namespace argTypes {
+        namespace showModal {
+            let control: string;
+        }
+        namespace imageSrc {
+            let control_1: string;
+            export { control_1 as control };
+        }
+    }
+}
+/** @typedef {typeof __propDef.props}  CropImageProps */
+/** @typedef {typeof __propDef.events}  CropImageEvents */
+/** @typedef {typeof __propDef.slots}  CropImageSlots */
+export default class CropImage extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type CropImageProps = typeof __propDef.props;
+export type CropImageEvents = typeof __propDef.events;
+export type CropImageSlots = typeof __propDef.slots;
+import CropImage from "./CropImage.svelte";
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=CropImage.stories.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CropImage.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/CropImage/CropImage.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;AAiHA,wDAAwD;AACxD,0DAA0D;AAC1D,wDAAwD;AAExD;;;;;CACC;6BALa,OAAO,SAAS,CAAC,KAAK;8BACtB,OAAO,SAAS,CAAC,MAAM;6BACvB,OAAO,SAAS,CAAC,KAAK;sBAhHZ,oBAAoB;gCAHZ,QAAQ;AAgHxC;;;;;;;;;;EAAgF"}

package/dist/components/CropImage/CropImage.svelte

@@ -0,0 +1,311 @@
+<script>
+  import Cropper from 'svelte-easy-crop';
+  import Button from '../Button/Button.svelte';
+
+  export let showModal = false;
+  export let imageSrc = '';
+  export let onSave = (croppedImage) => {};
+  export let onCancel = () => {};
+  export let isUploadingImage = false;
+
+  let crop = { x: 0, y: 0 };
+  let zoom = 1;
+  let croppedAreaPixels = null;
+  let isLoading = true;
+  let isSaving = false;
+
+  $: progress = ((zoom - 1) / (3 - 1)) * 100;
+
+  // Reset state when modal opens with new image
+  $: if (showModal && imageSrc) {
+    crop = { x: 0, y: 0 };
+    zoom = 1;
+    croppedAreaPixels = null;
+    isLoading = true;
+  }
+
+  function handleCropComplete(e) {
+    croppedAreaPixels = e.detail.pixels;
+    isLoading = false;
+  }
+
+  async function handleSave() {
+    if (!croppedAreaPixels || isSaving) return;
+
+    isSaving = true;
+    const croppedImage = await getCroppedImg(imageSrc, croppedAreaPixels);
+    onSave(croppedImage);
+    // Note: closeModal is called by parent after upload completes
+    // Don't reset isSaving here as modal will be closed by parent
+  }
+
+  function closeModal() {
+    showModal = false;
+    imageSrc = '';
+    crop = { x: 0, y: 0 };
+    zoom = 1;
+    croppedAreaPixels = null;
+    isSaving = false;
+    onCancel();
+  }
+
+  // Helper to create image from URL
+  function createImage(url) {
+    return new Promise((resolve, reject) => {
+      const image = new Image();
+      image.addEventListener('load', () => resolve(image));
+      image.addEventListener('error', (error) => reject(error));
+      image.setAttribute('crossOrigin', 'anonymous');
+      image.src = url;
+    });
+  }
+
+  // Check if browser supports WebP
+  function supportsWebP() {
+    const canvas = document.createElement('canvas');
+    canvas.width = 1;
+    canvas.height = 1;
+    return canvas.toDataURL('image/webp').indexOf('data:image/webp') === 0;
+  }
+
+  // Helper to extract cropped image
+  // Outputs 1000x1000px for 2x retina support (displayed at 500px)
+  // Uses WebP at quality 80 with JPEG fallback
+  async function getCroppedImg(imageSrc, pixelCrop) {
+    const image = await createImage(imageSrc);
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+
+    // Output at 1000x1000 for 2x retina (displayed at ~500px)
+    const maxSize = 1000;
+    canvas.width = maxSize;
+    canvas.height = maxSize;
+
+    // High quality rendering
+    ctx.imageSmoothingEnabled = true;
+    ctx.imageSmoothingQuality = 'high';
+
+    ctx.drawImage(
+      image,
+      pixelCrop.x,
+      pixelCrop.y,
+      pixelCrop.width,
+      pixelCrop.height,
+      0,
+      0,
+      maxSize,
+      maxSize
+    );
+
+    // Use WebP if supported (80% quality), fallback to JPEG (85% quality)
+    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-[9999] flex items-center justify-center bg-gray-900 bg-opacity-50 p-4"
+    on:click|self={closeModal}
+  >
+    <div
+      class="relative bg-BG-Primary rounded-2xl shadow-lg w-full max-w-[556px] max-h-[90vh] overflow-auto"
+    >
+      <!-- Header -->
+      <div class="flex items-center justify-between p-4 border-b border-stroke-Primary">
+        <h3 class="text-xl font-medium text-Text-Primary">Crop image</h3>
+        <button
+          type="button"
+          class="text-Text-Tartiary hover:text-Text-Primary transition-colors"
+          on:click={closeModal}
+          aria-label="Close"
+        >
+          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+
+      <!-- Cropper Container -->
+      <div class="p-4 sm:p-6">
+        <div class="cropper-container">
+          {#if isLoading}
+            <div class="absolute inset-0 flex items-center justify-center bg-gray-200 z-10">
+              <span class="text-Text-Tartiary">Loading...</span>
+            </div>
+          {/if}
+          <Cropper
+            image={imageSrc}
+            bind:crop
+            bind:zoom
+            aspect={1}
+            minZoom={1}
+            maxZoom={3}
+            showGrid={true}
+            on:cropcomplete={handleCropComplete}
+          />
+        </div>
+
+        <!-- Instructions -->
+        <p class="text-sm text-Text-Tartiary text-center mt-3">
+          Drag to position • Pinch or use slider to zoom
+        </p>
+
+        <!-- Zoom Controls -->
+        <div class="flex items-center justify-center mt-4 mx-auto gap-3" style="max-width: 280px;">
+          <button
+            type="button"
+            class="zoom-button"
+            on:click={() => (zoom = Math.max(1, zoom - 0.2))}
+            aria-label="Zoom out"
+          >
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
+            </svg>
+          </button>
+
+          <input
+            type="range"
+            min="1"
+            max="3"
+            step="0.1"
+            bind:value={zoom}
+            class="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer zoom-slider"
+            style="--progress: {progress}%"
+            aria-label="Zoom level"
+          />
+
+          <button
+            type="button"
+            class="zoom-button"
+            on:click={() => (zoom = Math.min(3, zoom + 0.2))}
+            aria-label="Zoom in"
+          >
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <!-- Actions -->
+      <div class="flex items-center justify-end gap-3 p-4 border-t border-stroke-Primary">
+        <Button type="button" variant="gray-outline" size="md" minWidth="sm" on:click={closeModal} disabled={isSaving || isUploadingImage}>
+          Cancel
+        </Button>
+        <Button type="button" size="md" minWidth="sm" on:click={handleSave} disabled={isLoading || isSaving || isUploadingImage}>
+          {#if isSaving || isUploadingImage}
+            Uploading...
+          {:else}
+            Save
+          {/if}
+        </Button>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .cropper-container {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    max-height: 400px;
+    background-color: #1f2937;
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
+
+  @media (min-width: 640px) {
+    .cropper-container {
+      aspect-ratio: 4 / 3;
+      max-height: 340px;
+    }
+  }
+
+  .zoom-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background-color: hsl(var(--BG-Secondary));
+    color: hsl(var(--Text-Primary));
+    border: 1px solid hsl(var(--Stroke-Primary));
+    cursor: pointer;
+    transition: background-color 0.15s, border-color 0.15s;
+    flex-shrink: 0;
+  }
+
+  .zoom-button:hover {
+    background-color: hsl(var(--BG-Tertiary, var(--BG-Secondary)));
+    border-color: hsl(var(--Stroke-Secondary, var(--Stroke-Primary)));
+  }
+
+  .zoom-button:active {
+    transform: scale(0.95);
+  }
+
+  .zoom-slider {
+    background: linear-gradient(
+      to right,
+      hsl(var(--primary-700)) 0%,
+      hsl(var(--primary-700)) var(--progress, 0%),
+      #e5e7eb var(--progress, 0%),
+      #e5e7eb 100%
+    );
+  }
+
+  .zoom-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+            appearance: none;
+    width: 20px;
+    height: 20px;
+    background: hsl(var(--primary-700));
+    cursor: pointer;
+    border-radius: 50%;
+    border: 3px solid hsl(var(--primary-200));
+    box-shadow: 0 0 0 1px hsl(var(--primary-700));
+  }
+
+  .zoom-slider::-moz-range-thumb {
+    width: 20px;
+    height: 20px;
+    background: hsl(var(--primary-700));
+    cursor: pointer;
+    border-radius: 50%;
+    border: 3px solid hsl(var(--primary-200));
+    box-shadow: 0 0 0 1px hsl(var(--primary-700));
+  }
+
+  .zoom-slider::-webkit-slider-track {
+    background: transparent;
+    height: 8px;
+    border-radius: 4px;
+  }
+
+  .zoom-slider::-moz-range-track {
+    background: transparent;
+    height: 8px;
+    border-radius: 4px;
+    border: none;
+  }
+</style>

package/dist/components/CropImage/CropImage.svelte.d.ts

@@ -0,0 +1,34 @@
+/** @typedef {typeof __propDef.props}  CropImageProps */
+/** @typedef {typeof __propDef.events}  CropImageEvents */
+/** @typedef {typeof __propDef.slots}  CropImageSlots */
+export default class CropImage extends SvelteComponent<{
+    onCancel?: (() => void) | undefined;
+    showModal?: boolean | undefined;
+    imageSrc?: string | undefined;
+    onSave?: ((croppedImage: any) => void) | undefined;
+    isUploadingImage?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type CropImageProps = typeof __propDef.props;
+export type CropImageEvents = typeof __propDef.events;
+export type CropImageSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        onCancel?: (() => void) | undefined;
+        showModal?: boolean | undefined;
+        imageSrc?: string | undefined;
+        onSave?: ((croppedImage: any) => void) | undefined;
+        isUploadingImage?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=CropImage.svelte.d.ts.map

package/dist/components/CropImage/CropImage.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CropImage.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/CropImage/CropImage.svelte.js"],"names":[],"mappings":"AAiMA,wDAAwD;AACxD,0DAA0D;AAC1D,wDAAwD;AAExD;;;;;;;;;CACC;6BALa,OAAO,SAAS,CAAC,KAAK;8BACtB,OAAO,SAAS,CAAC,MAAM;6BACvB,OAAO,SAAS,CAAC,KAAK;gCAnMJ,QAAQ;AAgMxC;;;;;;;;;;;;;;EAAiJ"}

package/dist/components/DarkModeToggle.spec.d.ts

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

package/dist/components/DarkModeToggle.spec.d.ts.map

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