From c1b4116512abed0ee436f1375afe000ee5b8b756 Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Fri, 14 Mar 2025 23:47:55 -0400
Subject: [PATCH] refactor Modal, use snippet for actions

---
 .../Actions/{Modal => }/Modal.stories.svelte  | 18 ++++++---------
 .../Actions/{Modal => }/Modal.svelte          | 22 ++++++++++++++++---
 .../Actions/Modal/ModalActions.svelte         | 13 -----------
 .../components/Actions/Modal/ModalBody.svelte | 13 -----------
 .../src/lib/components/Actions/Modal/index.ts |  3 ---
 .../src/lib/components/Actions/index.ts       |  2 +-
 6 files changed, 27 insertions(+), 44 deletions(-)
 rename packages/svelte/src/lib/components/Actions/{Modal => }/Modal.stories.svelte (59%)
 rename packages/svelte/src/lib/components/Actions/{Modal => }/Modal.svelte (57%)
 delete mode 100644 packages/svelte/src/lib/components/Actions/Modal/ModalActions.svelte
 delete mode 100644 packages/svelte/src/lib/components/Actions/Modal/ModalBody.svelte
 delete mode 100644 packages/svelte/src/lib/components/Actions/Modal/index.ts

diff --git a/packages/svelte/src/lib/components/Actions/Modal/Modal.stories.svelte b/packages/svelte/src/lib/components/Actions/Modal.stories.svelte
similarity index 59%
rename from packages/svelte/src/lib/components/Actions/Modal/Modal.stories.svelte
rename to packages/svelte/src/lib/components/Actions/Modal.stories.svelte
index 13decdb..e901747 100644
--- a/packages/svelte/src/lib/components/Actions/Modal/Modal.stories.svelte
+++ b/packages/svelte/src/lib/components/Actions/Modal.stories.svelte
@@ -1,10 +1,8 @@
 <script module lang="ts">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import type { ComponentProps } from 'svelte';
+	import Button from './Button.svelte';
 	import Modal from './Modal.svelte';
-	import ModalBody from './ModalBody.svelte';
-	import ModalActions from './ModalActions.svelte';
-	import Button from '../Button.svelte';
 
 	const { Story } = defineMeta({
 		title: 'Actions/Modal',
@@ -23,14 +21,12 @@
 {#snippet template({ children: _, ...props }: Partial<ComponentProps<typeof Modal>>)}
 	<Button onclick={() => dialog?.showModal()}>Open</Button>
 	<Modal {...props} backdrop bind:dialog>
-		<ModalBody>
-			<h3 class="text-lg font-bold">Hello!</h3>
-			<p class="py-4">Press ESC key or click the button below to close</p>
-			<ModalActions>
-				<Button onclick={() => dialog?.close()}>Close</Button>
-			</ModalActions>
-		</ModalBody>
+		<h3 class="text-lg font-bold">Hello!</h3>
+		<p class="py-4">Press ESC key or click the button below to close</p>
+		{#snippet actions()}
+			<Button onclick={() => dialog?.close()}>Close</Button>
+		{/snippet}
 	</Modal>
 {/snippet}
 
-<Story name="Default" children={template} />
+<Story name="Default" children={template} />
\ No newline at end of file
diff --git a/packages/svelte/src/lib/components/Actions/Modal/Modal.svelte b/packages/svelte/src/lib/components/Actions/Modal.svelte
similarity index 57%
rename from packages/svelte/src/lib/components/Actions/Modal/Modal.svelte
rename to packages/svelte/src/lib/components/Actions/Modal.svelte
index 0e71dfb..e629783 100644
--- a/packages/svelte/src/lib/components/Actions/Modal/Modal.svelte
+++ b/packages/svelte/src/lib/components/Actions/Modal.svelte
@@ -1,21 +1,37 @@
 <script lang="ts">
 	import clsx from 'clsx';
+	import type { Snippet } from 'svelte';
 	import type { SvelteHTMLElements } from 'svelte/elements';
 	import { twMerge } from 'tailwind-merge';
 
 	type Props = SvelteHTMLElements['dialog'] & {
+		actions?: Snippet;
 		backdrop?: boolean;
 		dialog?: HTMLDialogElement;
 	};
 
-	let { backdrop, dialog = $bindable(), children, class: className, ...props }: Props = $props();
+	let {
+		actions,
+		backdrop,
+		dialog = $bindable(),
+		children,
+		class: className,
+		...props
+	}: Props = $props();
 </script>
 
 <dialog {...props} class={twMerge('modal', clsx(className))} bind:this={dialog}>
-	{@render children?.()}
+	<div class="modal-box">
+		{@render children?.()}
+		{#if actions}
+			<div class="modal-action">
+				{@render actions()}
+			</div>
+		{/if}
+	</div>
 	{#if backdrop}
 		<form method="dialog" class="modal-backdrop">
 			<button>close</button>
 		</form>
 	{/if}
-</dialog>
+</dialog>
\ No newline at end of file
diff --git a/packages/svelte/src/lib/components/Actions/Modal/ModalActions.svelte b/packages/svelte/src/lib/components/Actions/Modal/ModalActions.svelte
deleted file mode 100644
index 05a6fc7..0000000
--- a/packages/svelte/src/lib/components/Actions/Modal/ModalActions.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts">
-	import clsx from 'clsx';
-	import type { SvelteHTMLElements } from 'svelte/elements';
-	import { twMerge } from 'tailwind-merge';
-
-	type Props = SvelteHTMLElements['div'];
-
-	let { children, class: className, ...props }: Props = $props();
-</script>
-
-<div {...props} class={twMerge('modal-action', clsx(className))}>
-	{@render children?.()}
-</div>
diff --git a/packages/svelte/src/lib/components/Actions/Modal/ModalBody.svelte b/packages/svelte/src/lib/components/Actions/Modal/ModalBody.svelte
deleted file mode 100644
index cd2b785..0000000
--- a/packages/svelte/src/lib/components/Actions/Modal/ModalBody.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts">
-	import clsx from 'clsx';
-	import type { SvelteHTMLElements } from 'svelte/elements';
-	import { twMerge } from 'tailwind-merge';
-
-	type Props = SvelteHTMLElements['div'];
-
-	let { children, class: className, ...props }: Props = $props();
-</script>
-
-<div {...props} class={twMerge('modal-box', clsx(className))}>
-	{@render children?.()}
-</div>
diff --git a/packages/svelte/src/lib/components/Actions/Modal/index.ts b/packages/svelte/src/lib/components/Actions/Modal/index.ts
deleted file mode 100644
index b23d2e1..0000000
--- a/packages/svelte/src/lib/components/Actions/Modal/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as Modal } from './Modal.svelte';
-export { default as ModalActions } from './ModalActions.svelte';
-export { default as ModalBody } from './ModalBody.svelte';
diff --git a/packages/svelte/src/lib/components/Actions/index.ts b/packages/svelte/src/lib/components/Actions/index.ts
index cc6d312..621d898 100644
--- a/packages/svelte/src/lib/components/Actions/index.ts
+++ b/packages/svelte/src/lib/components/Actions/index.ts
@@ -1,2 +1,2 @@
 export { default as Button } from './Button.svelte';
-export * from './Modal/';
+export { default as Modal } from './Modal.svelte';
\ No newline at end of file