svelte-firekit 0.0.1 → 0.0.3

package/README.md

@@ -1,58 +1,106 @@
-# create-svelte
+# Firekit
 
-Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+Firekit is a powerful Firebase toolkit for SvelteKit applications, providing a comprehensive set of utilities, stores, and components for Firebase integration.
 
-Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+## Features
 
-## Creating a project
+- 🔥 **Firebase Integration** - Seamless Firebase setup and configuration
+- 🔐 **Authentication** - Complete auth system with built-in components
+- 📚 **Firestore** - Reactive data stores and CRUD operations
+- 📦 **Storage** - File upload and management utilities
+- 🛡️ **Route Guards** - Protected routes and authorization
+- ⚡ **SSR Compatible** - Full server-side rendering support
+- 🎯 **Type Safe** - Built with TypeScript for better development experience
 
-If you're seeing this, you've probably already done this step. Congrats!
+## Quick Start
 
 ```bash
-# create a new project in the current directory
-npx sv create
-
-# create a new project in my-app
-npx sv create my-app
+# Install with your package manager of choice
+npm install @firekit/sveltekit
+pnpm install @firekit/sveltekit
+yarn add @firekit/sveltekit
 ```
 
-## Developing
+## Basic Usage
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+```typescript
+// Configure Firebase
+import { firebaseConfig } from '@firekit/sveltekit';
+firebaseConfig.init({
+    apiKey: 'your-api-key',
+    // ... other firebase config
+});
 
-```bash
-npm run dev
+// Use Authentication
+import { firekitAuth } from '@firekit/sveltekit';
+await firekitAuth.signInWithEmail(email, password);
+
+// Access User State
+import { firekitUser } from '@firekit/sveltekit';
+isLoggedIn = $derived(firekitUser.isLoggedIn);
+
+// Protect Routes
+import { firekitAuthGuard } from '@firekit/sveltekit';
+await firekitAuthGuard.requireAuth();
 
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+// Use Firestore
+import { firekitDoc, firekitCollection } from '@firekit/sveltekit';
+const document = firekitDoc<UserData>('users/123');
+const collection = firekitCollection<PostData>('posts');
+
+// Handle File Uploads
+import { firekitUploadTask } from '@firekit/sveltekit';
+const uploadTask = firekitUploadTask('path/to/file', file);
 ```
 
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+## Available Services
 
-## Building
+### Firebase Configuration
+- `firebaseConfig` - Firebase app configuration
+- `firebaseService` - Core Firebase service initialization
 
-To build your library:
+### Authentication
+- `firekitUser` - User state management
+- `firekitAuth` - Authentication methods
+- `firekitAuthGuard` - Route protection
 
-```bash
-npm run package
-```
+### Firestore
+- `firekitDoc` - Real-time document subscription
+- `firekitAwaitableDoc` - Promise-based document operations
+- `firekitCollection` - Real-time collection subscription
+- `firekitDocMutations` - Document CRUD operations
 
-To create a production version of your showcase app:
+### Storage
+- `firekitDownloadUrl` - File URL management
+- `firekitStorageList` - Storage browsing
+- `firekitUploadTask` - File upload handling
 
-```bash
-npm run build
-```
+## Built-in Components
 
-You can preview the production build with `npm run preview`.
+### Authentication
+- `SignInPage` - Complete sign-in page
+- `SignUpPage` - User registration page
+- `ResetPasswordPage` - Password reset flow
+- `SignInForm` - Reusable sign-in form
+- `SignUpForm` - Reusable registration form
+- `ResetPasswordForm` - Password reset form
+- `UserButton` - User profile button
 
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+### Firestore
+- `Collection` - Collection data display
+- `Doc` - Document data display
 
-## Publishing
+### Storage
+- `Upload` - File upload component
 
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+## Documentation
 
-To publish your library to [npm](https://www.npmjs.com):
+Visit our [documentation site](https://firekit.codegio.com) for detailed guides and API references.
 
-```bash
-npm publish
-```
+## Contributing
+
+We welcome contributions! Please see our [contributing guidelines](CONTRIBUTING.md) for details.
+
+## License
+
+MIT License - see [LICENSE](LICENSE) for details.

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;