svelte-firekit 0.0.15 → 0.0.16

package/dist/index.js

@@ -1,32 +1,14 @@
 // Firebase config
-export { firebaseConfig } from './firebase/config.js';
-export { firebaseService } from './firebase/firebase.js';
+export { firebaseConfig } from './config.js';
+export { firebaseService } from './firebase.js';
 // auth services
-// export { firekitUser } from './firebase/auth/user.svelte.js'
-// export { firekitAuthGuard } from './firebase/auth/auth-guard.svelte.js'
-export { firekitAuthManager } from './firebase/auth/auth-manager.svelte.js';
+export { firekitUser } from './auth/user.svelte.js';
 // firestore services
-export { firekitAwaitableDoc } from './firebase/firestore/awaitable-doc.svelte.js';
-export { firekitDocMutations } from './firebase/firestore/document-mutations.svelte';
-export { firekitCollection } from './firebase/firestore/collection.svelte.js';
-export { firekitDoc } from './firebase/firestore/doc.svelte.js';
+export { firekitAwaitableDoc } from './firestore/awaitable-doc.svelte.js';
+export { firekitDocMutations } from './firestore/document-mutations.svelte';
+export { firekitCollection } from './firestore/collection.svelte.js';
+export { firekitDoc } from './firestore/doc.svelte.js';
 // Storage services
-export { firekitDownloadUrl } from './firebase/storage/download-url.svelte.js';
-export { firekitStorageList } from './firebase/storage/storage-list.svelte.js';
-export { firekitUploadTask } from './firebase/storage/upload-task.svelte.js';
-// auth components
-export { default as SignInPage } from './auth/sign-in.svelte';
-export { default as SignUpPage } from './auth/sign-up.svelte';
-export { default as ResetPassWordPage } from './auth/reset-password.svelte';
-export { default as AuthPage } from './auth/auth.svelte';
-export { default as RequireAuth } from './auth/require-auth.svelte';
-export { default as RequireNoAuth } from './auth/require-no-auth.svelte';
-export { default as ResetPassWordForm } from './components/auth/reset-password-form.svelte';
-export { default as SignInForm } from './components/auth/sign-in-form.svelte';
-export { default as SignUpForm } from './components/auth/sign-up-form.svelte';
-export { default as UserButton } from './components/auth/user-button/user-button.svelte';
-// firestore components
-export { default as Collection } from './components/firestore/collection.svelte';
-export { default as Doc } from './components/firestore/doc.svelte';
-// storage 
-export { default as Upload } from './components/storage/upload.svelte';
+export { firekitDownloadUrl } from './storage/download-url.svelte.js';
+export { firekitStorageList } from './storage/storage-list.svelte.js';
+export { firekitUploadTask } from './storage/upload-task.svelte.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-firekit",
-	"version": "0.0.15",
+	"version": "0.0.16",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",
@@ -9,7 +9,9 @@
 		"package": "svelte-kit sync && svelte-package && publint",
 		"prepublishOnly": "npm run package",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check ."
 	},
 	"repository": {
 		"type": "git",
@@ -41,41 +43,23 @@
 		}
 	},
 	"peerDependencies": {
-		"@sveltejs/kit": "^2.0.0",
 		"firebase": "^11.0.1",
 		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/adapter-cloudflare": "^4.7.4",
-		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/kit": "^2.9.0",
 		"@sveltejs/package": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^4.0.0",
-		"@tailwindcss/typography": "^0.5.15",
-		"autoprefixer": "^10.4.20",
-		"bits-ui": "^1.0.0-next.63",
-		"clsx": "^2.1.1",
-		"formsnap": "^2.0.0-next.1",
-		"lucide-svelte": "^0.456.0",
-		"mode-watcher": "^0.4.1",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"prettier": "^3.3.2",
+		"prettier-plugin-svelte": "^3.2.6",
 		"publint": "^0.2.0",
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
-		"svelte-radix": "^2.0.1",
-		"svelte-sonner": "^0.3.28",
-		"sveltekit-superforms": "^2.20.0",
-		"tailwind-merge": "^2.5.4",
-		"tailwind-variants": "^0.2.1",
-		"tailwindcss": "^3.4.9",
-		"tailwindcss-animate": "^1.0.7",
 		"typescript": "^5.0.0",
-		"vite": "^5.0.11"
+		"vite": "^6.0.0"
 	},
 	"dependencies": {
-		"@types/intl-tel-input": "^18.1.4",
-		"firebase": "^11.0.1",
-		"intl-tel-input": "^24.7.0",
-		"lucide": "^0.454.0",
-		"mdsvex": "^0.12.3"
+		"firebase": "^11.0.2"
 	}
 }

package/dist/auth/auth.svelte

@@ -1,65 +0,0 @@
-<script lang="ts">
-    import SignInWithGoogle from "../components/auth/google-sign-in.svelte";
-    import ResetPasswordForm from "../components/auth/reset-password-form.svelte";
-    import SignInForm from "../components/auth/sign-in-form.svelte";
-    import SignUpForm from "../components/auth/sign-up-form.svelte";
-    import Button from "../components/ui/button/button.svelte";
-    import * as Card from "../components/ui/card/index.js";
-    let currentForm = $state("sign-in");
-</script>
-
-<Card.Root class="sm:w-[448px]">
-    <Card.Header>
-        <Card.Title class="text-center text-2xl">
-            {#if currentForm === "sign-in"}
-                Sign in
-            {:else if currentForm === "sign-up"}
-                Sign up
-            {:else if currentForm === "forgot-password"}
-                Forgot password
-            {/if}
-        </Card.Title>
-        <Card.Description class="text-center">
-            {#if currentForm === "sign-in"}
-                Don't have an account yet?
-                <Button
-                    variant="link"
-                    onclick={() => (currentForm = "sign-up")}
-                    class="p-0">Sign up here</Button
-                >
-            {:else if currentForm === "sign-up"}
-                Already have an account?
-                <Button
-                    variant="link"
-                    onclick={() => (currentForm = "sign-in")}
-                    class="p-0">Sign in here</Button
-                >
-            {:else if currentForm === "forgot-password"}
-                Remember your password?
-                <Button
-                    variant="link"
-                    onclick={() => (currentForm = "sign-in")}
-                    class="p-0">Sign in here</Button
-                >
-            {/if}
-        </Card.Description>
-    </Card.Header>
-    <Card.Content class="space-y-5">
-        {#if currentForm !== "forgot-password"}
-            <SignInWithGoogle label="Sign in" />
-
-            <div
-                class="before:muted-foreground after:muted-foreground flex items-center text-xs uppercase text-muted-foreground before:me-6 before:flex-1 before:border-t after:ms-6 after:flex-1 after:border-t dark:before:border-muted-foreground dark:after:border-muted-foreground"
-            >
-                Or
-            </div>
-        {/if}
-        {#if currentForm === "sign-in"}
-            <SignInForm />
-        {:else if currentForm === "sign-up"}
-            <SignUpForm />
-        {:else if currentForm === "forgot-password"}
-            <ResetPasswordForm />
-        {/if}
-    </Card.Content>
-</Card.Root>

package/dist/auth/auth.svelte.d.ts

@@ -1,2 +0,0 @@
-declare const Auth: import("svelte").Component<Record<string, never>, {}, "">;
-export default Auth;

package/dist/auth/require-auth.svelte

@@ -1,52 +0,0 @@
-<script lang="ts">
-    import type { DocumentData } from "firebase/firestore";
-    import { firekitAuthManager } from "../firebase/auth/auth-manager.svelte.js";
-
-    interface Props {
-        redirectTo?: string;
-        redirectParams?: Record<string, string>;
-        requiredClaims?: string[];
-        requiredData?: (data: DocumentData | null) => boolean;
-        allowIf?: (manager: typeof firekitAuthManager) => boolean;
-        children: () => any;
-    }
-
-    let {
-        redirectTo = "/login",
-        redirectParams,
-        requiredClaims = [],
-        requiredData,
-        allowIf,
-        children,
-    }: Props = $props();
-
-    let isAuthorized = $state(false);
-    let isValidating = $state(true);
-
-    async function validateAccess() {
-        isValidating = true;
-        isAuthorized = await firekitAuthManager.validateAuth({
-            authRequired: true,
-            redirectTo,
-            redirectParams,
-            requiredClaims,
-            requiredData,
-            allowIf,
-        });
-        isValidating = false;
-    }
-
-    $effect(() => {
-        if (firekitAuthManager.initialized) {
-            validateAccess();
-        }
-    });
-</script>
-
-{#if isValidating || firekitAuthManager.loading}
-    <div class="flex items-center justify-center p-4">
-        <span class="text-gray-500">Loading...</span>
-    </div>
-{:else if isAuthorized}
-    {@render children()}
-{/if}

package/dist/auth/require-auth.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { DocumentData } from "firebase/firestore";
-import { firekitAuthManager } from "../firebase/auth/auth-manager.svelte.js";
-declare const RequireAuth: import("svelte").Component<{
-    redirectTo?: string;
-    redirectParams?: Record<string, string>;
-    requiredClaims?: string[];
-    requiredData?: (data: DocumentData | null) => boolean;
-    allowIf?: (manager: typeof firekitAuthManager) => boolean;
-    children: () => any;
-}, {}, "">;
-export default RequireAuth;

package/dist/auth/require-no-auth.svelte

@@ -1,42 +0,0 @@
-<script lang="ts">
-    import { firekitAuthManager } from "../firebase/auth/auth-manager.svelte.js";
-
-    interface Props {
-        redirectTo?: string;
-        redirectParams?: Record<string, string>;
-        children: () => any;
-    }
-
-    let {
-        redirectTo = "/dashboard",
-        redirectParams,
-        children,
-    }: Props = $props();
-
-    let isAuthorized = $state(false);
-    let isValidating = $state(true);
-
-    async function validateAccess() {
-        isValidating = true;
-        isAuthorized = await firekitAuthManager.validateAuth({
-            authRequired: false,
-            redirectTo,
-            redirectParams,
-        });
-        isValidating = false;
-    }
-
-    $effect(() => {
-        if (firekitAuthManager.initialized) {
-            validateAccess();
-        }
-    });
-</script>
-
-{#if isValidating || firekitAuthManager.loading}
-    <div class="flex items-center justify-center p-4">
-        <span class="text-gray-500">Loading...</span>
-    </div>
-{:else if isAuthorized}
-    {@render children()}
-{/if}

package/dist/auth/require-no-auth.svelte.d.ts

@@ -1,6 +0,0 @@
-declare const RequireNoAuth: import("svelte").Component<{
-    redirectTo?: string;
-    redirectParams?: Record<string, string>;
-    children: () => any;
-}, {}, "">;
-export default RequireNoAuth;

package/dist/auth/reset-password.svelte

@@ -1,33 +0,0 @@
-<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/index.js";
-
-
-  let {
-    title="Forgot password?",
-    subtitle="Remember your password?",
-    labelLink="Sign in here",
-    link="/sign-in",
-    redirect="/sign-in"
-  }: {
-    title?: string;
-    subtitle?: string;
-    labelLink?: string;
-    link?: string;
-    redirect?: string;
-  } = $props();
-</script>
-
-<Card.Root class="sm:w-[448px]">
-  <Card.Header>
-    <Card.Title class="text-center text-2xl">{title}</Card.Title>
-    <Card.Description class="text-center">
-      {subtitle}
-      <Button variant="link" href={link} class="p-0">{labelLink}</Button>
-    </Card.Description>
-  </Card.Header>
-  <Card.Content>
-    <ResetPasswordForm {redirect} />
-  </Card.Content>
-</Card.Root>

package/dist/auth/reset-password.svelte.d.ts

@@ -1,8 +0,0 @@
-declare const ResetPassword: import("svelte").Component<{
-    title?: string;
-    subtitle?: string;
-    labelLink?: string;
-    link?: string;
-    redirect?: string;
-}, {}, "">;
-export default ResetPassword;

package/dist/auth/sign-in.svelte

@@ -1,61 +0,0 @@
-<script lang="ts">
-  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/index.js";
-  let {
-    title = "Sign in",
-    subtitle = "Don't have an account yet?",
-    textLink = "Sign up here",
-    link = "/sign-up",
-    redirectTo = "/dashboard",
-    labelBtnGoogle = "Sign in with",
-    labelEmail = "Email",
-    labelPassword = "Password",
-    labellLinkEmailForm = "I forgot my password",
-    linkForgetPassword = "/reset-password",
-    labelBtnFormEmail = "Sign",
-    labelDivider = "Or",
-  }: {
-    title?: string;
-    subtitle?: string;
-    textLink?: string;
-    link?: string;
-    redirectTo?: string;
-    labelBtnGoogle?: string;
-    labelEmail?: string;
-    labelPassword?: string;
-    labellLinkEmailForm?: string;
-    linkForgetPassword?: string;
-    labelBtnFormEmail?: string;
-    labelDivider?: string;
-  } = $props();
-</script>
-
-<Card.Root class="sm:w-[448px]">
-  <Card.Header>
-    <Card.Title class="text-center text-2xl">{title}</Card.Title>
-    <Card.Description class="text-center">
-      {subtitle}
-      <Button variant="link" href={link} class="p-0">{textLink}</Button>
-    </Card.Description>
-  </Card.Header>
-  <Card.Content class="space-y-5">
-    <SignInWithGoogle label={labelBtnGoogle} />
-
-    <div
-      class="before:muted-foreground after:muted-foreground flex items-center text-xs uppercase text-muted-foreground before:me-6 before:flex-1 before:border-t after:ms-6 after:flex-1 after:border-t dark:before:border-muted-foreground dark:after:border-muted-foreground"
-    >
-      {labelDivider}
-    </div>
-
-    <SignInForm
-      {labelEmail}
-      {labelPassword}
-      {labellLinkEmailForm}
-      {linkForgetPassword}
-      {labelBtnFormEmail}
-      {redirectTo}
-    />
-  </Card.Content>
-</Card.Root>

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

@@ -1,15 +0,0 @@
-declare const SignIn: import("svelte").Component<{
-    title?: string;
-    subtitle?: string;
-    textLink?: string;
-    link?: string;
-    redirectTo?: string;
-    labelBtnGoogle?: string;
-    labelEmail?: string;
-    labelPassword?: string;
-    labellLinkEmailForm?: string;
-    linkForgetPassword?: string;
-    labelBtnFormEmail?: string;
-    labelDivider?: string;
-}, {}, "">;
-export default SignIn;

package/dist/auth/sign-up.svelte

@@ -1,72 +0,0 @@
-<script lang="ts">
-  import SignInWithGoogle from "../components/auth/google-sign-in.svelte";
-  import SignUpForm from "../components/auth/sign-up-form.svelte";
-  import Button from "../components/ui/button/button.svelte";
-  import * as Card from "../components/ui/card/index.js";
-  // let { title = "Sign up" }: { title: string } = $props();
-
-  let {
-    title = "Sign up",
-    subtitle = "Already have an account?",
-    labelLink = "Sign in here",
-    link = "/sign-in",
-    labelBtnGoogle = "Sign up with",
-    labelFisrtName = "First Name",
-    labelLastName = "Last Name",
-    labelEmail = "Email",
-    labelPassword = "Password",
-    linkTerms = "/terms-and-conditions",
-    labelTerms = "I accept the",
-    labelLinkTerms = "Terms and Conditions",
-    labelBtnFormEmail = "Sign up",
-    labelDivider = "Or",
-    redirectTo = "/dashboard",
-  }: {
-    title?: string;
-    subtitle?: string;
-    labelLink?: string;
-    link?: string;
-    labelBtnGoogle?: string;
-    labelFisrtName?: string;
-    labelLastName?: string;
-    labelEmail?: string;
-    labelPassword?: string;
-    linkTerms?: string;
-    labelTerms?: string;
-    labelLinkTerms?: string;
-    labelBtnFormEmail?: string;
-    labelDivider?: string;
-    redirectTo?: string;
-  } = $props();
-</script>
-
-<Card.Root class="sm:w-[448px]">
-  <Card.Header>
-    <Card.Title class="text-center text-2xl">{title}</Card.Title>
-    <Card.Description class="text-center">
-      {subtitle}
-      <Button variant="link" href={link} class="p-0">{labelLink}</Button>
-    </Card.Description>
-  </Card.Header>
-  <Card.Content class="space-y-5">
-    <SignInWithGoogle label={labelBtnGoogle} />
-
-    <div
-      class="before:muted-foreground after:muted-foreground flex items-center text-xs uppercase text-muted-foreground before:me-6 before:flex-1 before:border-t after:ms-6 after:flex-1 after:border-t dark:before:border-muted-foreground dark:after:border-muted-foreground"
-    >
-      {labelDivider}
-    </div>
-
-    <SignUpForm
-      {labelFisrtName}
-      {labelLastName}
-      {labelEmail}
-      {labelPassword}
-      {linkTerms}
-      {labelTerms}
-      {labelLinkTerms}
-      {labelBtnFormEmail}
-      {redirectTo}
-    />
-  </Card.Content>
-</Card.Root>

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

@@ -1,18 +0,0 @@
-declare const SignUp: import("svelte").Component<{
-    title?: string;
-    subtitle?: string;
-    labelLink?: string;
-    link?: string;
-    labelBtnGoogle?: string;
-    labelFisrtName?: string;
-    labelLastName?: string;
-    labelEmail?: string;
-    labelPassword?: string;
-    linkTerms?: string;
-    labelTerms?: string;
-    labelLinkTerms?: string;
-    labelBtnFormEmail?: string;
-    labelDivider?: string;
-    redirectTo?: string;
-}, {}, "">;
-export default SignUp;

package/dist/components/app/nav/app-sidebar.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-  import * as Sidebar from "../../ui/sidebar/index.js";
-  import type { ComponentProps } from "svelte";
-  // import SidebarOptInForm from "./sidebar-opt-in-form.svelte";
-  import { firekitAuthManager } from "../../../firebase/auth/auth-manager.svelte.js";
-  import UserButton from "../../auth/user-button/user-button.svelte";
-  import NavMain from "../../nav/nav-main.svelte";
-
-  let {
-    ref = $bindable(null),
-    collapsible = "icon",
-    ...restProps
-  }: ComponentProps<typeof Sidebar.Root> = $props();
-</script>
-
-<Sidebar.Root bind:ref {collapsible} {...restProps}>
-  <Sidebar.Header>
-	<section class="flex justify-center items-center gap-2 my-4">
-		<UserButton redirectTo="/sign-in"></UserButton> 
-		<div class="flex flex-col">
-			<small>{firekitAuthManager.data?.displayName}</small>
-			<small>{firekitAuthManager.data?.email}</small>
-		</div>
-	</section>
-  </Sidebar.Header>
-  <Sidebar.Content>
-    <NavMain />
-  </Sidebar.Content>
-  <Sidebar.Footer>
-    <div class="p-1">
-      <!-- <SidebarOptInForm /> -->
-    </div>
-  </Sidebar.Footer>
-  <Sidebar.Rail />
-</Sidebar.Root>

package/dist/components/app/nav/app-sidebar.svelte.d.ts

@@ -1,8 +0,0 @@
-declare const AppSidebar: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLDivElement> & {
-    ref?: HTMLElement | null | undefined;
-} & {
-    side?: "left" | "right";
-    variant?: "sidebar" | "floating" | "inset";
-    collapsible?: "offcanvas" | "icon" | "none";
-}, {}, "ref">;
-export default AppSidebar;

package/dist/components/app/nav/breadcrumb.svelte

@@ -1,42 +0,0 @@
-<script lang="ts">
-    import { page } from "$app/stores";
-    import { derived } from "svelte/store";
-    import * as Breadcrumb from "../../ui/breadcrumb/index.js";
-
-    // Create a derived store to get breadcrumb items from the URL
-    const breadcrumbs = derived(page, ($page) => {
-        const path = $page.url.pathname;
-        const segments = path.split("/").filter(Boolean); // split path and remove empty segments
-        const breadcrumbItems = segments.map((segment, index) => {
-            // Construct the path up to this segment
-            const href = "/" + segments.slice(0, index + 1).join("/");
-            return {
-                name: segment
-                    .replace(/-/g, " ")
-                    .replace(/\b\w/g, (char) => char.toUpperCase()),
-                href,
-            };
-        });
-        return breadcrumbItems;
-    });
-</script>
-
-<Breadcrumb.Root>
-    <Breadcrumb.List>
-        {#each $breadcrumbs as breadcrumb, i}
-            {#if i > 0}
-                <Breadcrumb.Separator class="hidden md:block" />
-            {/if}
-            <Breadcrumb.Item>
-                <!-- Check if it's the last breadcrumb item to render as Page instead of Link -->
-                {#if i === $breadcrumbs.length - 1}
-                    <Breadcrumb.Page>{breadcrumb.name}</Breadcrumb.Page>
-                {:else}
-                    <Breadcrumb.Link href={breadcrumb.href}
-                        >{breadcrumb.name}</Breadcrumb.Link
-                    >
-                {/if}
-            </Breadcrumb.Item>
-        {/each}
-    </Breadcrumb.List>
-</Breadcrumb.Root>

package/dist/components/app/nav/breadcrumb.svelte.d.ts

@@ -1,19 +0,0 @@
-import * as Breadcrumb from "../../ui/breadcrumb/index.js";
-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;
-}
-declare const Breadcrumb: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Breadcrumb = InstanceType<typeof Breadcrumb>;
-export default Breadcrumb;