svelte-firekit 0.0.2 → 0.0.4

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/components/nav/nav.js

@@ -1,5 +1,5 @@
 export const nav = {
-    versions: ["1.0.1",],
+    versions: ["0.0.3",],
     navMain: [
         {
             title: "Getting Started",

package/dist/components/public/footer-main.svelte.d.ts

@@ -0,0 +1,26 @@
+export default FooterMain;
+type FooterMain = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const FooterMain: $$__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;
+}

package/dist/components/public/nav-main.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+    import { Button, buttonVariants } from "../ui/button/index.js";
+    import { Separator } from "../ui/separator/index.js";
+    import { Menu } from "lucide-svelte";
+    import * as DropdownMenu from "../ui/dropdown-menu/index.js";
+    import DarkModeToggle from "../nav/dark-mode-toggle.svelte";
+    import type { NavItem } from "../../types/nav.js";
+
+    let isNavOpen = false;
+    const siteConfig = {
+        title: "Svelte Firekit",
+        description: "Firebase Toolkit for SvelteKit",
+        logo: "/logo.svg",
+        logoDark: "/logo-white.svg",
+        favicon: "/favicon.png",
+        onboarding: true,
+    };
+    const publicNav: NavItem[] = [
+        {
+            title: "Docs",
+            href: "/docs",
+        },
+        {
+            title: "Contact",
+            href: "/contact",
+        },
+        {
+            title: "Blog",
+            href: "/blog",
+        },
+    ];
+</script>
+
+<header
+    class="border-border/40 bg-background/95 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50 w-full border-b backdrop-blur"
+>
+    <nav
+        class="relative mx-auto w-full max-w-[85rem] px-4 py-4 sm:px-6 md:flex md:items-center md:justify-between md:gap-3 lg:px-8"
+    >
+        <!-- Logo w/ Collapse Button -->
+        <div class="flex items-center justify-between">
+            <a href="/">
+                <img
+                    src={siteConfig.logo}
+                    alt={siteConfig.title}
+                    class="h-6 dark:hidden"
+                />
+                <img
+                    src={siteConfig.logoDark}
+                    alt={siteConfig.title}
+                    class="hidden h-6 dark:block"
+                />
+            </a>
+
+            <div class="flex items-center gap-2">
+                <Button
+                    variant="outline"
+                    size="icon"
+                    class="md:hidden"
+                    onclick={() => (isNavOpen = !isNavOpen)}
+                >
+                    <Menu /> <span class="sr-only">Toggle navigation</span>
+                </Button>
+                <!-- End Collapse Button -->
+                <div class="md:hidden">
+                    <DarkModeToggle />
+                </div>
+            </div>
+            <!-- Collapse Button -->
+        </div>
+        <!-- End Logo w/ Collapse Button -->
+
+        <!-- Collapse -->
+        <div
+            class={`${
+                isNavOpen ? "block" : "hidden"
+            } grow basis-full overflow-hidden transition-all duration-300 md:block`}
+            aria-labelledby="header-collapse"
+        >
+            <div
+                class="max-h-[75vh] overflow-hidden overflow-y-auto [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 [&::-webkit-scrollbar-track]:bg-gray-100 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 [&::-webkit-scrollbar]:w-2"
+            >
+                <div
+                    class="flex flex-col gap-0.5 py-2 md:flex-row md:items-center md:justify-end md:gap-1 md:py-0"
+                >
+                    {#each publicNav as item}
+                        {#if item.items && item.items?.length > 0}
+                            <!-- Dropdown for items with sub-items -->
+                            <DropdownMenu.Root>
+                                <DropdownMenu.Trigger
+                                    class="
+                                    {buttonVariants({
+                                        variant: 'ghost',
+                                    })} text-base font-normal"
+                                >
+                                    {item.title}
+                                </DropdownMenu.Trigger>
+                                <DropdownMenu.Content>
+                                    <DropdownMenu.Group>
+                                        {#each item.items as subItem}
+                                            <DropdownMenu.Item>
+                                                <a href={subItem.href}
+                                                    >{subItem.title}</a
+                                                >
+                                            </DropdownMenu.Item>
+                                        {/each}
+                                    </DropdownMenu.Group>
+                                </DropdownMenu.Content>
+                            </DropdownMenu.Root>
+                        {:else}
+                            <!-- Regular Button for single items -->
+                            <Button
+                                variant="ghost"
+                                href={item.href}
+                                class="text-base font-normal"
+                            >
+                                {#if item.icon}
+                                    <item.icon />
+                                {/if}
+                                {item.title}
+                            </Button>
+                        {/if}
+                    {/each}
+                    <Separator
+                        orientation="vertical"
+                        class="mr-2 hidden h-5 md:block"
+                    />
+                    <div class="hidden md:block">
+                        <DarkModeToggle />
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- End Collapse -->
+    </nav>
+</header>

package/dist/components/public/nav-main.svelte.d.ts

@@ -0,0 +1,18 @@
+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 NavMain: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type NavMain = InstanceType<typeof NavMain>;
+export default NavMain;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-firekit",
-	"version": "0.0.2",
+	"version": "0.0.4",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",
@@ -11,6 +11,18 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
 	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/code-gio/svelte-firekit.git"
+	},
+	"description": "A Svelte library for Firebase integration",
+	"keywords": [
+		"svelte",
+		"firebase",
+		"library",
+		"frontend"
+	],
+	"author": "Giovani Rodriguez",
 	"files": [
 		"dist",
 		"!dist/**/*.test.*",
@@ -35,6 +47,7 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/adapter-cloudflare": "^4.7.4",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",