doc: add storage docs

Author: codediodeio

docs/src/components/SideNav.astro

@@ -18,9 +18,9 @@
     <li><a href="/firestore/doc-component">&ltDoc&gt</a></li>
     <li><a href="/firestore/collection-component">&ltCollection&gt</a></li>
     <li class="heading">storage</li>
-    <li><a href="/guide/todo">uploadTaskStore</a></li>
-    <li><a href="/guide/todo">&ltFileUploader&gt</a></li>
-    <li><a href="/guide/todo">&ltDownloadURL&gt</a></li>
+    <li><a href="/storage/upload-task">&ltUploadTask&gt</a></li>
+    <li><a href="/storage/download-url">&ltDownloadURL&gt</a></li>
+    <li><a href="/storage/storage-list">&ltStorageList&gt</a></li>
     <li class="heading">analytics</li>
     <li><a href="/guide/todo">&ltPageView&gt</a></li>
   </ul>

docs/src/pages/storage/download-url.md

@@ -0,0 +1,42 @@
+---
+title: DownloadURL Component
+pubDate: 2023-07-23
+description: SvelteFire DownloadURL Component API reference
+layout: ../../layouts/MainLayout.astro
+---
+
+# DownloadURL
+
+Returns the download URL for a file in Firebase Storage.
+
+### Props
+
+- `ref` - A Firebase Storage reference or path string (e.g. `files/hi-mom.txt`)
+
+### Slots
+
+- `default` - Shown when the url is available
+- `loading` - Shown while the url is loading
+
+### Slot Props
+
+- `link` - The download URL
+- `ref` - Storage reference
+- `storage` - The Firestore instance
+
+### Example
+
+```svelte
+<script>
+  import  { DownloadURL } from "sveltefire";
+</script>
+
+
+<DownloadURL ref="images/pic.png" let:link let:ref>
+    <!-- show img -->
+    <img src={link} />
+
+    <!-- or download via link -->
+    <a href={link} download>{ref?.name}</a>
+</DownloadURL>
+```

docs/src/pages/storage/storage-list.md

@@ -0,0 +1,57 @@
+---
+title: StorageList Component
+pubDate: 2023-07-23
+description: SvelteFire StorageList Component API reference
+layout: ../../layouts/MainLayout.astro
+---
+
+# StorageList
+
+Returns a list of files stored in Firebase Storage.
+
+### Props
+
+- `ref` - A Firebase Storage reference or path string (e.g. `files/hi-mom.txt`)
+
+### Slots
+
+- `default` - Shown when the list is available
+- `loading` - Shown while the list is loading
+
+### Slot Props
+
+- `list` - The list of files and prefixes
+- `ref` - Storage reference
+- `storage` - The Firestore instance
+
+### Example
+
+```svelte
+<script>
+  import  { StorageList } from "sveltefire";
+</script>
+
+
+<StorageList ref="images/uid" let:list>
+    <ul>
+        {#if list === null}
+            <li>Loading...</li>
+        {:else if list.prefixes.length === 0 && list.items.length === 0}
+            <li>Empty</li>
+        {:else}
+          <!-- Listing the prefixes -->
+          {#each list.prefixes as prefix}
+              <li>
+                  {prefix.name}
+              </li>
+          {/each}
+          <!-- Listing the objects in the given folder -->
+          {#each list.items as item}
+              <li>
+                  {item.name}
+              </li>
+          {/each}
+        {/if}
+    </ul>
+</StorageList>
+```

docs/src/pages/storage/upload-task.md

@@ -0,0 +1,58 @@
+---
+title: UploadTask Component
+pubDate: 2023-07-23
+description: SvelteFire UploadTask Component API reference
+layout: ../../layouts/MainLayout.astro
+---
+
+# UploadTask
+
+Uploads a file to a Firebase storage bucket. 
+
+### Props
+
+- `ref` - A Firebase Storage reference or path string (e.g. `files/hi-mom.txt`)
+- `data` - the file data to be uploaded as `Blob | Uint8Array | ArrayBuffer`
+- `metadata` - (optional) file metadata
+
+
+### Slots
+
+- `default` 
+
+### Slot Props
+
+- `snapshot` - Firebase UploadTaskSnapshot
+- `task` - Firebase UploadTask
+- `progress` - Number as a percentage of the upload progress
+- `storage` - The Firestore instance
+
+### Example
+
+```svelte
+<script>
+  import  { DownloadURL, UploadTask } from "sveltefire";
+
+  let file;
+
+  function chooseFile(e) {
+    file = e.target.files[0];
+  }
+</script>
+
+<input type="file" on:change={chooseFile} />
+
+{#if file}
+  <UploadTask ref="myFile.txt" data={file} let:progress let:snapshot>
+    {#if snapshot?.state === "running"}
+      {progress}% uploaded
+    {/if}
+
+    {#if snapshot?.state === "success"}
+      <DownloadURL ref={snapshot?.ref} let:link>
+        <a href={link} download>Link</a>
+      </DownloadURL>
+    {/if}
+  </UploadTask>
+{/if}
+```

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sveltefire",
-	"version": "0.4.1",
+	"version": "0.4.2",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",

src/lib/stores/sdk.ts

@@ -1,4 +1,3 @@
-import { writable } from "svelte/store";
 import type { Firestore } from "firebase/firestore";
 import type { Auth } from "firebase/auth";
 import { getContext, setContext } from "svelte";

tests/storage.test.ts

@@ -8,7 +8,7 @@ test('Renders download links', async ({ page }) => {
 	expect( linksCount ).toBeGreaterThan(0);
 });
 
-test.only('Uploads a file', async ({ page }) => {
+test('Uploads a file', async ({ page }) => {
 	await page.goto('/storage-test');
 	await page.getByRole('button', { name: 'Make File' }).click();
 	await expect(page.getByTestId('progress')).toContainText('100% uploaded');