@getmicdrop/svelte-components 3.0.0 → 3.1.0

package/dist/components/Modal/ModalAudit.stories.svelte

@@ -1,329 +0,0 @@
-<script context="module">
-  import Modal from "./Modal.svelte";
-  import ConfirmationModal from "./ConfirmationModal.svelte";
-  import Button from "../Button/Button.svelte";
-
-  export const meta = {
-    title: "Audit/Modal Variants",
-    component: Modal,
-  };
-</script>
-
-<script>
-  import { Story } from "@storybook/addon-svelte-csf";
-
-  let showBasicModal = false;
-  let showProcessingModal = false;
-  let showSuccessModal = false;
-  let showConfirmDelete = false;
-  let showConfirmLeave = false;
-  let showConfirmCancel = false;
-  let showWithIcon = false;
-  let showWithWarning = false;
-</script>
-
-<Story name="All Modal Variants">
-  <div class="performer-portal p-6 space-y-8 bg-BG-Primary min-h-screen">
-    <div class="max-w-4xl mx-auto">
-      <h1 class="text-2xl font-bold text-Text-Primary mb-2">Modal Component Audit</h1>
-      <p class="text-Text-Tartiary mb-8">All modal variants as they appear across the performers portal</p>
-
-      <!-- SECTION: Base Modal Component -->
-      <section class="mb-10">
-        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
-          Base Modal Component
-        </h2>
-        <p class="text-sm text-Text-Tartiary mb-4">
-          The base Modal uses slots (header, body, footer) and is wrapped by other components.
-        </p>
-
-        <div class="space-y-4">
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              Modal with header, body, footer slots
-            </div>
-            <Button variant="blue-solid" on:click={() => showBasicModal = true}>
-              Open Basic Modal
-            </Button>
-            <div class="mt-2 text-xs text-Text-Tartiary">
-              <strong>Props:</strong> show, isProcessing, isSuccess
-            </div>
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              Modal with isProcessing=true (smaller width)
-            </div>
-            <Button variant="blue-outline" on:click={() => showProcessingModal = true}>
-              Open Processing Modal
-            </Button>
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              Modal with isSuccess=true (smaller width)
-            </div>
-            <Button variant="blue-outline" on:click={() => showSuccessModal = true}>
-              Open Success Modal
-            </Button>
-          </div>
-        </div>
-      </section>
-
-      <!-- SECTION: ConfirmationModal Component -->
-      <section class="mb-10">
-        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
-          ConfirmationModal Component
-        </h2>
-        <p class="text-sm text-Text-Tartiary mb-4">
-          Higher-level wrapper with title, description, and action buttons.
-        </p>
-
-        <div class="space-y-4">
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              Delete confirmation (red-solid action)
-            </div>
-            <Button variant="red-solid" on:click={() => showConfirmDelete = true}>
-              Show Delete Confirmation
-            </Button>
-            <div class="mt-2 text-xs text-Text-Tartiary">
-              <strong>Used in:</strong> payment-settings (delete payment method)
-            </div>
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              Leave venue confirmation (gray-outline + red-solid)
-            </div>
-            <Button variant="red-outline" on:click={() => showConfirmLeave = true}>
-              Show Leave Venue Modal
-            </Button>
-            <div class="mt-2 text-xs text-Text-Tartiary">
-              <strong>Used in:</strong> ShowItemCard, VenueItemCard (duplicated!)
-            </div>
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              Cancel booking confirmation
-            </div>
-            <Button variant="gray-outline" on:click={() => showConfirmCancel = true}>
-              Show Cancel Booking Modal
-            </Button>
-            <div class="mt-2 text-xs text-Text-Tartiary">
-              <strong>Used in:</strong> ShowItemCard
-            </div>
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              With icon prop
-            </div>
-            <Button variant="blue-outline" on:click={() => showWithIcon = true}>
-              Show Modal with Icon
-            </Button>
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              With warningText prop
-            </div>
-            <Button variant="red-outline" on:click={() => showWithWarning = true}>
-              Show Modal with Warning
-            </Button>
-          </div>
-        </div>
-      </section>
-
-      <!-- SECTION: Props Summary -->
-      <section class="mb-10">
-        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
-          Props Summary
-        </h2>
-
-        <div class="bg-BG-Secondary rounded-lg p-4 text-sm">
-          <h3 class="font-semibold text-Text-Primary mb-2">Base Modal</h3>
-          <table class="w-full text-left mb-4">
-            <thead>
-              <tr class="border-b border-stroke-Primary">
-                <th class="py-2 text-Text-Primary">Prop</th>
-                <th class="py-2 text-Text-Primary">Type</th>
-                <th class="py-2 text-Text-Primary">Description</th>
-              </tr>
-            </thead>
-            <tbody class="text-Text-Tartiary">
-              <tr class="border-b border-stroke-Secondary">
-                <td class="py-2 font-mono text-xs">show</td>
-                <td class="py-2 text-xs">boolean</td>
-                <td class="py-2 text-xs">Controls visibility</td>
-              </tr>
-              <tr class="border-b border-stroke-Secondary">
-                <td class="py-2 font-mono text-xs">isProcessing</td>
-                <td class="py-2 text-xs">boolean</td>
-                <td class="py-2 text-xs">Shows smaller modal (350px)</td>
-              </tr>
-              <tr>
-                <td class="py-2 font-mono text-xs">isSuccess</td>
-                <td class="py-2 text-xs">boolean</td>
-                <td class="py-2 text-xs">Shows smaller modal (350px)</td>
-              </tr>
-            </tbody>
-          </table>
-
-          <h3 class="font-semibold text-Text-Primary mb-2 mt-4">ConfirmationModal</h3>
-          <table class="w-full text-left">
-            <thead>
-              <tr class="border-b border-stroke-Primary">
-                <th class="py-2 text-Text-Primary">Prop</th>
-                <th class="py-2 text-Text-Primary">Type</th>
-                <th class="py-2 text-Text-Primary">Description</th>
-              </tr>
-            </thead>
-            <tbody class="text-Text-Tartiary">
-              <tr class="border-b border-stroke-Secondary">
-                <td class="py-2 font-mono text-xs">title</td>
-                <td class="py-2 text-xs">string</td>
-                <td class="py-2 text-xs">Modal heading</td>
-              </tr>
-              <tr class="border-b border-stroke-Secondary">
-                <td class="py-2 font-mono text-xs">description</td>
-                <td class="py-2 text-xs">string</td>
-                <td class="py-2 text-xs">Body text</td>
-              </tr>
-              <tr class="border-b border-stroke-Secondary">
-                <td class="py-2 font-mono text-xs">warningText</td>
-                <td class="py-2 text-xs">string</td>
-                <td class="py-2 text-xs">Red warning message</td>
-              </tr>
-              <tr class="border-b border-stroke-Secondary">
-                <td class="py-2 font-mono text-xs">icon</td>
-                <td class="py-2 text-xs">string (src)</td>
-                <td class="py-2 text-xs">Header icon image</td>
-              </tr>
-              <tr class="border-b border-stroke-Secondary">
-                <td class="py-2 font-mono text-xs">closeBtn</td>
-                <td class="py-2 text-xs">boolean</td>
-                <td class="py-2 text-xs">Show X button</td>
-              </tr>
-              <tr>
-                <td class="py-2 font-mono text-xs">actions</td>
-                <td class="py-2 text-xs">array</td>
-                <td class="py-2 text-xs">Button configs with label, onClick, variant</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </section>
-
-      <!-- SECTION: Consolidation Recommendations -->
-      <section class="mb-10">
-        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
-          Consolidation Recommendations
-        </h2>
-
-        <div class="space-y-4 text-sm text-Text-Tartiary">
-          <div class="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
-            <h3 class="font-semibold text-red-700 dark:text-red-400 mb-2">Issues Found</h3>
-            <ul class="list-disc list-inside space-y-1">
-              <li><strong>"Leave Venue" modal is duplicated</strong> in ShowItemCard and VenueItemCard - exact same code!</li>
-              <li>Base Modal has <strong>no dark mode support</strong> - uses hardcoded bg-BG-Primary</li>
-              <li>Modal lacks <strong>accessibility features</strong> - no focus trap, no escape key handling</li>
-              <li>isProcessing and isSuccess props both do the same thing (smaller width)</li>
-            </ul>
-          </div>
-
-          <div class="p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
-            <h3 class="font-semibold text-yellow-700 dark:text-yellow-400 mb-2">Suggested Changes</h3>
-            <ul class="list-disc list-inside space-y-1">
-              <li>Extract "Leave Venue" modal into shared LeaveVenueModal component</li>
-              <li>Add dark mode CSS variables to base Modal</li>
-              <li>Combine isProcessing/isSuccess into single "size" prop (normal, small)</li>
-              <li>Add escape key and focus trap for accessibility</li>
-              <li>Consider adding transition animations</li>
-            </ul>
-          </div>
-
-          <div class="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
-            <h3 class="font-semibold text-green-700 dark:text-green-400 mb-2">Keep As-Is</h3>
-            <ul class="list-disc list-inside space-y-1">
-              <li>Slot-based architecture is flexible and works well</li>
-              <li>ConfirmationModal abstraction is useful for common patterns</li>
-              <li>Action button variant mapping (legacy props to new) is helpful</li>
-            </ul>
-          </div>
-        </div>
-      </section>
-    </div>
-  </div>
-
-  <!-- Actual Modals -->
-  <Modal bind:show={showBasicModal}>
-    <div slot="header">
-      <h3 class="text-lg font-semibold text-Text-Primary">Basic Modal</h3>
-    </div>
-    <div slot="body" class="py-4">
-      <p class="text-Text-Tartiary">This is the base modal with custom slot content.</p>
-    </div>
-    <div slot="footer" class="flex gap-2">
-      <Button variant="gray-outline" on:click={() => showBasicModal = false}>Cancel</Button>
-      <Button variant="blue-solid" on:click={() => showBasicModal = false}>Confirm</Button>
-    </div>
-  </Modal>
-
-  <Modal bind:show={showProcessingModal} isProcessing={true}>
-    <div slot="body" class="py-8 text-center">
-      <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-4"></div>
-      <p class="text-Text-Tartiary">Processing...</p>
-    </div>
-  </Modal>
-
-  <Modal bind:show={showSuccessModal} isSuccess={true}>
-    <div slot="body" class="py-8 text-center">
-      <div class="text-green-500 text-4xl mb-4">✓</div>
-      <p class="text-Text-Primary font-semibold">Success!</p>
-    </div>
-  </Modal>
-
-  <ConfirmationModal
-    bind:show={showConfirmDelete}
-    title="Delete Payment Method"
-    description="Are you sure you want to delete this payment method? This action cannot be undone."
-    actions={[
-      { label: "Cancel", onClick: () => {}, variant: "gray-outline" },
-      { label: "Delete", onClick: () => {}, variant: "red-solid" }
-    ]}
-  />
-
-  <ConfirmationModal
-    bind:show={showConfirmLeave}
-    title="Leave Venue"
-    description="Are you sure you want to leave this venue? You will need to be re-invited to perform here again."
-    warningText="This action cannot be undone."
-    actions={[
-      { label: "Cancel", onClick: () => {}, variant: "gray-outline" },
-      { label: "Leave Venue", onClick: () => {}, variant: "red-solid" }
-    ]}
-  />
-
-  <ConfirmationModal
-    bind:show={showConfirmCancel}
-    title="Cancel Booking"
-    description="Are you sure you want to cancel this booking?"
-    actions={[
-      { label: "Close", onClick: () => {}, variant: "gray-outline" },
-      { label: "Yes, cancel", onClick: () => {}, variant: "red-solid" }
-    ]}
-  />
-
-  <ConfirmationModal
-    bind:show={showWithWarning}
-    title="Danger Zone"
-    description="This action has serious consequences."
-    warningText="Warning: This cannot be reversed!"
-    actions={[
-      { label: "Go Back", onClick: () => {}, variant: "gray-outline" },
-      { label: "Proceed", onClick: () => {}, variant: "red-solid" }
-    ]}
-  />
-</Story>

package/dist/components/Modal/ModalAudit.stories.svelte.d.ts

@@ -1,32 +0,0 @@
-export namespace meta {
-    export let title: string;
-    export { Modal as component };
-}
-export default ModalAudit;
-import Modal from "./Modal.svelte";
-type ModalAudit = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const ModalAudit: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-//# sourceMappingURL=ModalAudit.stories.svelte.d.ts.map

package/dist/components/Modal/ModalAudit.stories.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ModalAudit.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Modal/ModalAudit.stories.svelte.js"],"names":[],"mappings":";;;;;kBAGoB,gBAAgB;;;;;;;;AAkUpC;;;;mBAAsH;6CATzE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}