svelte-firekit 0.0.1 → 0.0.2

package/dist/auth/reset-password.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import ResetPasswordForm from "../components/auth/reset-password-form.svelte";
     import Button from "../components/ui/button/button.svelte";
-    import * as Card from "../components/ui/card";
+    import * as Card from "../components/ui/card/index.js";
 </script>
 
 <Card.Root class="sm:w-[448px]">

package/dist/auth/sign-in.svelte

@@ -2,8 +2,8 @@
     import SignInWithGoogle from "../components/auth/google-sign-in.svelte";
     import SignInForm from "../components/auth/sign-in-form.svelte";
     import Button from "../components/ui/button/button.svelte";
-    import * as Card from "../components/ui/card";
-    let { title = "Sign in" }: { title: string } = $props();
+    import * as Card from "../components/ui/card/index.js";
+    let { title = "Sign in" }: { title?: string } = $props();
 </script>
 
 <Card.Root class="sm:w-[448px]">

package/dist/auth/sign-in.svelte.d.ts

@@ -1,4 +1,4 @@
 declare const SignIn: import("svelte").Component<{
-    title: string;
+    title?: string;
 }, {}, "">;
 export default SignIn;

package/dist/components/auth/google-sign-in.svelte

@@ -1,7 +1,21 @@
 <script lang="ts">
-	import { signInWithGoogle } from "../../auth.js";
+	import { firekitAuth } from "../../firebase/auth/auth.js";
+	import { toast } from "svelte-sonner";
+
 	import Button from "../ui/button/button.svelte";
 	let { label = "Sign in" }: { label: string } = $props();
+
+	async function signInWithGoogle() {
+		try {
+			await firekitAuth.signInWithGoogle();
+		} catch (error) {
+			if (error instanceof Error) {
+				toast.error(error.message);
+			} else {
+				toast.error("An error occurred");
+			}
+		}
+	}
 </script>
 
 <Button onclick={signInWithGoogle} class="w-full gap-2" variant="outline">

package/dist/components/auth/reset-password-form.svelte

@@ -1,19 +1,15 @@
 <script lang="ts">
 	import { goto } from "$app/navigation";
-	import { sendPasswordReset } from "../../auth.js";
+	import { firekitAuth } from "../../firebase/auth/auth.js";
+
 	import * as Form from "../ui/form/index.js";
 	import { Input } from "../ui/input/index.js";
-	import {
-		resetPasswordSchema,
-	} from "../../schemas/reset-password.js";
+	import { resetPasswordSchema } from "../../schemas/reset-password.js";
 	import { toast } from "svelte-sonner";
-	import {
-		superForm,defaults
-	} from "sveltekit-superforms";
-	import { zodClient } from "sveltekit-superforms/adapters";
-	import { valibot } from 'sveltekit-superforms/adapters';
+	import { superForm, defaults } from "sveltekit-superforms";
+	import { valibot } from "sveltekit-superforms/adapters";
 
-const data = defaults(valibot(resetPasswordSchema));
+	const data = defaults(valibot(resetPasswordSchema));
 
 	const form = superForm(data, {
 		validators: valibot(resetPasswordSchema),
@@ -26,7 +22,7 @@ const data = defaults(valibot(resetPasswordSchema));
 			try {
 				const { data } = form;
 				const { email } = data;
-				await sendPasswordReset(email);
+				await firekitAuth.sendPasswordReset(email);
 				toast.success("Password reset email sent");
 				goto("/sign-in");
 			} catch (error) {
@@ -44,12 +40,15 @@ const data = defaults(valibot(resetPasswordSchema));
 
 <form method="POST" use:enhance class="space-y-4">
 	<Form.Field {form} name="email">
-		<Form.Control >
-		{#snippet children({ props })}
-        	<Form.Label>Email address</Form.Label>
-        	<Input {...props} bind:value={$formData.email}  placeholder="you@email.com"/>
-      	{/snippet}
-		
+		<Form.Control>
+			{#snippet children({ props })}
+				<Form.Label>Email address</Form.Label>
+				<Input
+					{...props}
+					bind:value={$formData.email}
+					placeholder="you@email.com"
+				/>
+			{/snippet}
 		</Form.Control>
 		<Form.FieldErrors />
 	</Form.Field>

package/dist/components/auth/sign-in-form.svelte

@@ -1,20 +1,18 @@
 <script lang="ts">
-	import { signInWithEmail } from "../../auth.js";
+	import { firekitAuth } from "../../firebase/auth/auth.js";
 	import { signInSchema } from "../../schemas/sign-in.js";
-	import {
-		superForm, defaults
-	} from "sveltekit-superforms";
+	import { superForm, defaults } from "sveltekit-superforms";
 	import { Input } from "../ui/input/index.js";
 	import Button from "../ui/button/button.svelte";
-	import { valibot } from 'sveltekit-superforms/adapters';
+	import { valibot } from "sveltekit-superforms/adapters";
 
-const data = defaults(valibot(signInSchema));
+	const data = defaults(valibot(signInSchema));
 
 	import * as Form from "../ui/form/index.js";
 	import { toast } from "svelte-sonner";
 
 	const form = superForm(data, {
-			validators: valibot(signInSchema),
+		validators: valibot(signInSchema),
 		dataType: "json",
 		SPA: true,
 		resetForm: false,
@@ -24,7 +22,7 @@ const data = defaults(valibot(signInSchema));
 			try {
 				const { data } = form;
 				const { email, password } = data;
-				await signInWithEmail(email, password);
+				await firekitAuth.signInWithEmail(email, password);
 				toast.success("Signed in successfully");
 			} catch (error) {
 				if (error instanceof Error) {
@@ -41,35 +39,38 @@ const data = defaults(valibot(signInSchema));
 
 <form method="POST" use:enhance class="space-y-2">
 	<Form.Field {form} name="email">
-		<Form.Control >
-			  {#snippet children({ props })}
-        <Form.Label>Email</Form.Label>
-        <Input {...props} bind:value={$formData.email}  placeholder="you@email.com"/>
-      {/snippet}
-			
+		<Form.Control>
+			{#snippet children({ props })}
+				<Form.Label>Email</Form.Label>
+				<Input
+					{...props}
+					bind:value={$formData.email}
+					placeholder="you@email.com"
+				/>
+			{/snippet}
 		</Form.Control>
 		<Form.FieldErrors />
 	</Form.Field>
 	<Form.Field {form} name="password">
-		<Form.Control >
+		<Form.Control>
 			{#snippet children({ props })}
-
 				<div class="flex w-full items-center justify-between">
 					<Form.Label>Password</Form.Label>
-					<Button variant="link" class="text-sm" href="/reset-password "
-						>
-						I forgot my password
-						</Button
+					<Button
+						variant="link"
+						class="text-sm"
+						href="/reset-password "
 					>
+						I forgot my password
+					</Button>
 				</div>
 				<Input
-					{...props} 
+					{...props}
 					bind:value={$formData.password}
 					placeholder="*********"
 					type="password"
 				/>
-      		{/snippet}
-
+			{/snippet}
 		</Form.Control>
 		<Form.FieldErrors />
 	</Form.Field>

package/dist/components/auth/sign-up-form.svelte

@@ -1,19 +1,18 @@
 <script lang="ts">
-	import { registerWithEmail } from "../../auth.js";
+	import { firekitAuth } from "../../firebase/auth/auth.js";
+
 	import * as Form from "../ui/form/index.js";
 	import { Input } from "../ui/input/index.js";
 	import { signUpSchema } from "../../schemas/sign-up.js";
 	import { toast } from "svelte-sonner";
-	import {
-		superForm,defaults
-	} from "sveltekit-superforms";
-	import { valibot } from 'sveltekit-superforms/adapters';
-    import Button from "../ui/button/button.svelte";
-    import Checkbox from "../ui/checkbox/checkbox.svelte";
-const data = defaults(valibot(signUpSchema));
+	import { superForm, defaults } from "sveltekit-superforms";
+	import { valibot } from "sveltekit-superforms/adapters";
+	import Button from "../ui/button/button.svelte";
+	import Checkbox from "../ui/checkbox/checkbox.svelte";
+	const data = defaults(valibot(signUpSchema));
 
 	const form = superForm(data, {
-			validators: valibot(signUpSchema),
+		validators: valibot(signUpSchema),
 		dataType: "json",
 		SPA: true,
 		resetForm: false,
@@ -24,7 +23,11 @@ const data = defaults(valibot(signUpSchema));
 				const { data } = form;
 				const { email, password, firstName, lastName } = data;
 				const displayName = `${firstName} ${lastName}`;
-				await registerWithEmail(email, password, displayName);
+				await firekitAuth.registerWithEmail(
+					email,
+					password,
+					displayName,
+				);
 				toast.success("Account created successfully");
 			} catch (error) {
 				if (error instanceof Error) {
@@ -42,7 +45,7 @@ const data = defaults(valibot(signUpSchema));
 <form method="POST" use:enhance class="space-y-2">
 	<div class="grid grid-cols-2 gap-4">
 		<Form.Field {form} name="firstName">
-			<Form.Control >
+			<Form.Control>
 				{#snippet children({ props })}
 					<Form.Label>First Name</Form.Label>
 					<Input
@@ -50,60 +53,64 @@ const data = defaults(valibot(signUpSchema));
 						bind:value={$formData.firstName}
 						placeholder="John"
 					/>
-      			{/snippet}
-
+				{/snippet}
 			</Form.Control>
 			<Form.FieldErrors />
 		</Form.Field>
 		<Form.Field {form} name="lastName">
-			<Form.Control >
-				  {#snippet children({ props })}
-
-				<Form.Label>First Name</Form.Label>
-				<Input
-					{...props}
-					bind:value={$formData.lastName}
-					placeholder="Smith"
-				/>
+			<Form.Control>
+				{#snippet children({ props })}
+					<Form.Label>First Name</Form.Label>
+					<Input
+						{...props}
+						bind:value={$formData.lastName}
+						placeholder="Smith"
+					/>
 				{/snippet}
 			</Form.Control>
 			<Form.FieldErrors />
 		</Form.Field>
 	</div>
 	<Form.Field {form} name="email">
-		<Form.Control >
-				  {#snippet children({ props })}
-        <Form.Label>Email</Form.Label>
-        <Input {...props} bind:value={$formData.email}  placeholder="you@email.com"/>
-      {/snippet}
+		<Form.Control>
+			{#snippet children({ props })}
+				<Form.Label>Email</Form.Label>
+				<Input
+					{...props}
+					bind:value={$formData.email}
+					placeholder="you@email.com"
+				/>
+			{/snippet}
 		</Form.Control>
 		<Form.FieldErrors />
 	</Form.Field>
 	<Form.Field {form} name="password">
-		<Form.Control >
-				  {#snippet children({ props })}
-
-			<Form.Label>Password</Form.Label>
-			<Input
-				{...props}
-				bind:value={$formData.password}
-				placeholder="*********"
-				type="password"
-			/>
+		<Form.Control>
+			{#snippet children({ props })}
+				<Form.Label>Password</Form.Label>
+				<Input
+					{...props}
+					bind:value={$formData.password}
+					placeholder="*********"
+					type="password"
+				/>
 			{/snippet}
 		</Form.Control>
 		<Form.FieldErrors />
 	</Form.Field>
 	<Form.Field {form} name="agreeToTerms">
-		<Form.Control >
-				  {#snippet children({ props })}
-        <Checkbox {...props} bind:checked={$formData.agreeToTerms} />
-
-		          <Form.Label>
-I accept the 
-<Button variant="link" href="/terms-and-conditions" class="p-0">Terms and Conditions</Button> 
-</Form.Label>
+		<Form.Control>
+			{#snippet children({ props })}
+				<Checkbox {...props} bind:checked={$formData.agreeToTerms} />
 
+				<Form.Label>
+					I accept the
+					<Button
+						variant="link"
+						href="/terms-and-conditions"
+						class="p-0">Terms and Conditions</Button
+					>
+				</Form.Label>
 			{/snippet}
 		</Form.Control>
 		<Form.FieldErrors />

package/dist/{auth → components/auth}/user-button.svelte

@@ -1,27 +1,28 @@
 <script lang="ts">
-    import * as DropdownMenu from "../components/ui/dropdown-menu/index.js";
-    import * as Avatar from "../components/ui/avatar/index.js";
-    import { authUser } from "./user.svelte.js";
-    import { getInitials } from "../utils.js";
+    import * as DropdownMenu from "../ui/dropdown-menu/index.js";
+    import * as Avatar from "../ui/avatar/index.js";
+    import { getInitials } from "../../utils.js";
+    import type { NavItem } from "../../types/nav.js";
+    let { nav }: { nav?: NavItem[] } = $props();
+    import * as AlertDialog from "../ui/alert-dialog/index.js";
+    import Button from "../ui/button/button.svelte";
+    import { firekitUser } from "../../firebase/auth/user.svelte.js";
+    import { firekitAuth } from "../../firebase/auth/auth.js";
     import { LogOut } from "lucide-svelte";
-    import { logOut } from "../auth.js";
-    import type { NavItem } from "../types/nav.js";
-    let { nav }: { nav: NavItem[] } = $props();
-    import * as AlertDialog from "../components/ui/alert-dialog/index.js";
-    import Button from "../components/ui/button/button.svelte";
     let isOpen = $state(false);
+
+    async function handleLogout() {
+        await firekitAuth.logOut();
+    }
 </script>
 
-{#if authUser.currentUser}
+{#if firekitUser.user}
     <DropdownMenu.Root>
         <DropdownMenu.Trigger>
             <Avatar.Root>
-                <Avatar.Image
-                    src={authUser.currentUser?.photoURL}
-                    alt="Avatar"
-                />
+                <Avatar.Image src={firekitUser.photoURL} alt="Avatar" />
                 <Avatar.Fallback>
-                    {getInitials(authUser.currentUser?.displayName)}
+                    {getInitials(firekitUser.displayName)}
                 </Avatar.Fallback>
             </Avatar.Root>
         </DropdownMenu.Trigger>
@@ -31,21 +32,21 @@
                     <div class="flex items-center gap-3">
                         <Avatar.Root>
                             <Avatar.Image
-                                src={authUser.currentUser?.photoURL}
+                                src={firekitUser.photoURL}
                                 alt="Avatar"
                             />
                             <Avatar.Fallback>
-                                {getInitials(authUser.currentUser?.displayName)}
+                                {getInitials(firekitUser.displayName)}
                             </Avatar.Fallback>
                         </Avatar.Root>
                         <div class="grow">
                             <span
                                 class="block font-medium text-sm text-gray-800 dark:text-neutral-200"
                             >
-                                {authUser.currentUser?.displayName}
+                                {firekitUser.displayName}
                             </span>
                             <p class="text-xs text-foreground-500">
-                                {authUser.currentUser?.email}
+                                {firekitUser.email}
                             </p>
                         </div>
                     </div>
@@ -54,16 +55,18 @@
                 <DropdownMenu.Item onclick={() => (isOpen = true)}>
                     Profile
                 </DropdownMenu.Item>
-                {#each nav as { href, label }}
-                    <DropdownMenu.Item>
-                        <a {href}>
-                            {label}
-                        </a>
-                    </DropdownMenu.Item>
-                {/each}
+                {#if nav}
+                    {#each nav as { href, label }}
+                        <DropdownMenu.Item>
+                            <a {href}>
+                                {label}
+                            </a>
+                        </DropdownMenu.Item>
+                    {/each}
+                {/if}
 
                 <DropdownMenu.Separator />
-                <DropdownMenu.Item onclick={logOut}>
+                <DropdownMenu.Item onclick={handleLogout}>
                     <LogOut /> Logout
                 </DropdownMenu.Item>
             </DropdownMenu.Group>
@@ -77,27 +80,25 @@
                         <div class="flex items-center gap-3">
                             <Avatar.Root>
                                 <Avatar.Image
-                                    src={authUser.currentUser?.photoURL}
+                                    src={firekitUser.photoURL}
                                     alt="Avatar"
                                 />
                                 <Avatar.Fallback>
-                                    {getInitials(
-                                        authUser.currentUser?.displayName,
-                                    )}
+                                    {getInitials(firekitUser.displayName)}
                                 </Avatar.Fallback>
                             </Avatar.Root>
                             <div class="grow">
                                 <span
                                     class="block font-medium text-sm text-gray-800 dark:text-neutral-200"
                                 >
-                                    {authUser.currentUser?.displayName}
+                                    {firekitUser.displayName}
                                 </span>
                                 <p class="text-xs text-foreground-500">
-                                    {authUser.currentUser?.email}
+                                    {firekitUser.email}
                                 </p>
                             </div>
                         </div>
-                        <Button onclick={logOut} variant="link">
+                        <Button onclick={handleLogout} variant="link">
                             <LogOut />Logout
                         </Button>
                     </div>

package/dist/{auth → components/auth}/user-button.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { NavItem } from "../types/nav.js";
+import type { NavItem } from "../../types/nav.js";
 declare const UserButton: import("svelte").Component<{
-    nav: NavItem[];
+    nav?: NavItem[];
 }, {}, "">;
 export default UserButton;

package/dist/components/firestore/collection.svelte

@@ -0,0 +1,45 @@
+<script lang="ts" generics="Data extends DocumentData">
+    import { firekitCollection } from "../../firebase/firestore/collection.svelte.js";
+    import type {
+        CollectionReference,
+        DocumentData,
+        QueryConstraint,
+    } from "firebase/firestore";
+    import type { Snippet } from "svelte";
+
+    let {
+        path,
+        queryConstraints,
+        children,
+        loading,
+        error,
+    }: {
+        path: string;
+        queryConstraints?: QueryConstraint[];
+        children?: Snippet<[data: Data[], ref: CollectionReference]>;
+        loading?: Snippet;
+        error?: Snippet<[error: Error]>;
+    } = $props();
+
+    let collection = queryConstraints
+        ? firekitCollection<Data>(path, ...queryConstraints)
+        : firekitCollection<Data>(path);
+</script>
+
+{#if collection.loading}
+    {#if loading}
+        {@render loading()}
+    {:else}
+        <div>Loading...</div>
+    {/if}
+{:else if collection.error}
+    {#if error}
+        {@render error(collection.error)}
+    {:else}
+        <div>Error: {collection.error.message}</div>
+    {/if}
+{:else if collection.data}
+    {#if children}
+        {@render children(collection.data, collection.ref)}
+    {/if}
+{/if}

package/dist/components/firestore/collection.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { CollectionReference, DocumentData, QueryConstraint } from "firebase/firestore";
+import type { Snippet } from "svelte";
+declare class __sveltets_Render<Data extends DocumentData> {
+    props(): {
+        path: string;
+        queryConstraints?: QueryConstraint[];
+        children?: Snippet<[data: Data[], ref: CollectionReference<DocumentData, DocumentData>]> | undefined;
+        loading?: Snippet;
+        error?: Snippet<[error: Error]>;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Data extends DocumentData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Data>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Data>['props']>, ReturnType<__sveltets_Render<Data>['events']>, ReturnType<__sveltets_Render<Data>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Data>['bindings']>;
+    } & ReturnType<__sveltets_Render<Data>['exports']>;
+    <Data extends DocumentData>(internal: unknown, props: ReturnType<__sveltets_Render<Data>['props']> & {}): ReturnType<__sveltets_Render<Data>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Collection: $$IsomorphicComponent;
+type Collection<Data extends DocumentData> = InstanceType<typeof Collection<Data>>;
+export default Collection;

package/dist/components/firestore/doc.svelte

@@ -0,0 +1,39 @@
+<script lang="ts" generics="Data extends DocumentData">
+    import { firekitDoc } from "../../firebase/firestore/doc.svelte.js";
+    import type { DocumentData, DocumentReference } from "firebase/firestore";
+    import type { Snippet } from "svelte";
+
+    let {
+        ref,
+        startWith,
+        children,
+        loading,
+        error,
+    }: {
+        ref: string | DocumentReference<Data>;
+        startWith?: Data | undefined;
+        children?: Snippet<[data: Data, ref: DocumentReference<Data>]>;
+        loading?: Snippet;
+        error?: Snippet<[error: Error]>;
+    } = $props();
+
+    let doc = firekitDoc<Data>(ref, startWith);
+</script>
+
+{#if doc.loading}
+    {#if loading}
+        {@render loading()}
+    {:else}
+        <div>Loading...</div>
+    {/if}
+{:else if doc.error}
+    {#if error}
+        {@render error(doc.error)}
+    {:else}
+        <div>Error: {doc.error.message}</div>
+    {/if}
+{:else if doc.data}
+    {#if children}
+        {@render children(doc.data, doc.ref)}
+    {/if}
+{/if}

package/dist/components/firestore/doc.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { DocumentData, DocumentReference } from "firebase/firestore";
+import type { Snippet } from "svelte";
+declare class __sveltets_Render<Data extends DocumentData> {
+    props(): {
+        ref: string | DocumentReference<Data, DocumentData>;
+        startWith?: Data | undefined;
+        children?: Snippet<[data: Data, ref: DocumentReference<Data, DocumentData>]> | undefined;
+        loading?: Snippet;
+        error?: Snippet<[error: Error]>;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Data extends DocumentData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Data>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Data>['props']>, ReturnType<__sveltets_Render<Data>['events']>, ReturnType<__sveltets_Render<Data>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Data>['bindings']>;
+    } & ReturnType<__sveltets_Render<Data>['exports']>;
+    <Data extends DocumentData>(internal: unknown, props: ReturnType<__sveltets_Render<Data>['props']> & {}): ReturnType<__sveltets_Render<Data>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Doc: $$IsomorphicComponent;
+type Doc<Data extends DocumentData> = InstanceType<typeof Doc<Data>>;
+export default Doc;