From 2487be2dc9b31a618de5bf8552ffbc76a5f359d7 Mon Sep 17 00:00:00 2001
From: DanConwayDev <DanConwayDev@protonmail.com>
Date: Wed, 10 Jan 2024 00:00:00 +0000
Subject: [PATCH] feat(RepoPage): add RepoHeader

create a RepoHeader for use on multiple pages
---
 __snapshots__/repo-header--loading.png        | Bin 0 -> 5388 bytes
 __snapshots__/repo-header--long-name.png      | Bin 0 -> 10615 bytes
 __snapshots__/repo-header--no-name.png        | Bin 0 -> 6636 bytes
 __snapshots__/repo-header--short-name.png     | Bin 0 -> 7318 bytes
 __snapshots__/repo-header.test.js.snap        |  48 ++++++++++++++++++
 .../components/repo/RepoHeader.stories.svelte |  24 +++++++++
 src/lib/components/repo/RepoHeader.svelte     |  38 ++++++++++++++
 src/routes/repo/[repo_id]/+page.svelte        |   3 +-
 8 files changed, 112 insertions(+), 1 deletion(-)
 create mode 100644 __snapshots__/repo-header--loading.png
 create mode 100644 __snapshots__/repo-header--long-name.png
 create mode 100644 __snapshots__/repo-header--no-name.png
 create mode 100644 __snapshots__/repo-header--short-name.png
 create mode 100644 __snapshots__/repo-header.test.js.snap
 create mode 100644 src/lib/components/repo/RepoHeader.stories.svelte
 create mode 100644 src/lib/components/repo/RepoHeader.svelte

diff --git a/__snapshots__/repo-header--loading.png b/__snapshots__/repo-header--loading.png
new file mode 100644
index 0000000000000000000000000000000000000000..4cf01f5134120e6702124b09ddec6571d89b90d0
GIT binary patch
literal 5388
zcmeAS@N?(olHy`uVBq!ia0y~yU<ERnE^x2`sq?jW!+;cHage(c!@6@aFM%AEVkgfK
z4j`!ENa<i;5ZUJG;uumf=k0B6J|;s3*Fd}E3kerJj=ZT?Uc;y&$tf)nuBKxC{D+zU
z{Vl&M=h<5WjbKoC`Qbeyh;g8d#Q{Wf2s42A3O)=hK&rujQ2-=*h+2|4QhOi#jH=tn
z3^FyM&~kp;xoSoZ5GRpI0YtTMHh?GrH3lXi<uHR`RFdj}VAdPA!A5@n4RFM-vAo~j
z$IpJ?b#4wQ;2Ac^#y8M11)wFYW#5bbd<Ug)h6Lrf(KsJX_@JaPn)^osVYD6?tqc`F
zg~4cxU^Ea$+lHeJ<k5}*)jI;CovhKeW&@~>9c^%r2Eu5Ad$g^o04faV+u)AheVTuv
Shquvukky{9elF{r5}E*5S{iKt

literal 0
HcmV?d00001

diff --git a/__snapshots__/repo-header--long-name.png b/__snapshots__/repo-header--long-name.png
new file mode 100644
index 0000000000000000000000000000000000000000..4a775b06924020a6803a6d38dc5618a77eab36b9
GIT binary patch
literal 10615
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
XLDA*kN=G;RZWn$$>Id5QiU0T?PZgFm

literal 0
HcmV?d00001

diff --git a/__snapshots__/repo-header--no-name.png b/__snapshots__/repo-header--no-name.png
new file mode 100644
index 0000000000000000000000000000000000000000..44db13efcc7dcdc9c862c23e488e9586890d766e
GIT binary patch
literal 6636
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

literal 0
HcmV?d00001

diff --git a/__snapshots__/repo-header--short-name.png b/__snapshots__/repo-header--short-name.png
new file mode 100644
index 0000000000000000000000000000000000000000..a90509f190def874730936d85170aa3ae2d73248
GIT binary patch
literal 7318
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
WBMuFp@}=n8P_UChCz!`C|L`A%E`+fF

literal 0
HcmV?d00001

diff --git a/__snapshots__/repo-header.test.js.snap b/__snapshots__/repo-header.test.js.snap
new file mode 100644
index 0000000..2041769
--- /dev/null
+++ b/__snapshots__/repo-header.test.js.snap
@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Repo/Header Long Name smoke-test 1`] = `
+<div class="bg-base-300 py-2 border-b border-accent-content">
+  <div class="mx-auto lg:container">
+    <div class="max-w-md prose px-3">
+      <h4 class="text-sm my-1 break-words">
+        Long Name that goes on and on and on and on a...
+      </h4>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Repo/Header No Name smoke-test 1`] = `
+<div class="bg-base-300 py-2 border-b border-accent-content">
+  <div class="mx-auto lg:container">
+    <div class="max-w-md prose px-3">
+      <h4 class="text-sm my-1 break-words">
+        Untitled
+      </h4>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Repo/Header Short Name smoke-test 1`] = `
+<div class="bg-base-300 py-2 border-b border-accent-content">
+  <div class="mx-auto lg:container">
+    <div class="max-w-md prose px-3">
+      <h4 class="text-sm my-1 break-words">
+        Short Name
+      </h4>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Repo/Header loading smoke-test 1`] = `
+<div class="bg-base-300 py-2 border-b border-accent-content">
+  <div class="mx-auto lg:container">
+    <div class="max-w-md prose px-3">
+      <div class="h-5 my-2 skeleton w-28">
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/lib/components/repo/RepoHeader.stories.svelte b/src/lib/components/repo/RepoHeader.stories.svelte
new file mode 100644
index 0000000..3cc2b95
--- /dev/null
+++ b/src/lib/components/repo/RepoHeader.stories.svelte
@@ -0,0 +1,24 @@
+<script lang="ts" context="module">
+    import type { Meta } from "@storybook/svelte";
+    import RepoHeader from "./RepoHeader.svelte";
+    import { Story, Template } from "@storybook/addon-svelte-csf";
+    import { RepoDetailsArgsVectors as vectors } from "./vectors";
+
+    export const meta: Meta<RepoHeader> = {
+        title: "Repo/Header",
+        component: RepoHeader,
+        tags: ["autodocs"],
+    };
+</script>
+
+<Template let:args>
+    <RepoHeader {...args} />
+</Template>
+
+<Story name="Short Name" args={vectors.NoMaintainers} />
+
+<Story name="Long Name" args={vectors.Long} />
+
+<Story name="No Name" args={vectors.NoNameOrDescription} />
+
+<Story name="loading" args={{ loading: true }} />
diff --git a/src/lib/components/repo/RepoHeader.svelte b/src/lib/components/repo/RepoHeader.svelte
new file mode 100644
index 0000000..f6c9b29
--- /dev/null
+++ b/src/lib/components/repo/RepoHeader.svelte
@@ -0,0 +1,38 @@
+<script lang="ts" context="module">
+    import type { NDKUserProfile } from "@nostr-dev-kit/ndk";
+</script>
+
+<script lang="ts">
+    import type { User } from "$lib/components/users/type";
+    import UserHeader from "$lib/components/users/UserHeader.svelte";
+    import { defaults } from "./type";
+
+    export let {
+        repo_id,
+        name,
+        description,
+        git_server,
+        tags,
+        maintainers,
+        relays,
+        loading,
+    } = defaults;
+    let short_name: string;
+    $: {
+        if (name.length > 45) short_name = name.slice(0, 45) + "...";
+        else if (name.length == 0) short_name = "Untitled";
+        else short_name = name;
+    }
+</script>
+
+<div class="bg-base-300 py-2 border-b border-accent-content">
+    <div class="mx-auto lg:container">
+        <div class="max-w-md prose px-3">
+            {#if loading}
+                <div class="h-5 my-2 skeleton w-28"></div>
+            {:else}
+                <h4 class="text-sm my-1 break-words">{short_name}</h4>
+            {/if}
+        </div>
+    </div>
+</div>
diff --git a/src/routes/repo/[repo_id]/+page.svelte b/src/routes/repo/[repo_id]/+page.svelte
index d8621c2..64c5e9d 100644
--- a/src/routes/repo/[repo_id]/+page.svelte
+++ b/src/routes/repo/[repo_id]/+page.svelte
@@ -2,6 +2,7 @@
     import RepoDetails from "$lib/wrappers/RepoDetails.svelte";
     import OpenPRs from "$lib/wrappers/OpenPRs.svelte";
     import { ensureSelectedRepo, selected_repo } from "$lib/stores/repo";
+    import RepoHeader from "$lib/components/repo/RepoHeader.svelte";
 
     export let data: { repo_id: string };
     let repo_id = data.repo_id;
@@ -9,7 +10,7 @@
     ensureSelectedRepo(repo_id);
 </script>
 
-<h1 class="mx-2 my-4">{$selected_repo.name}</h1>
+<RepoHeader {...$selected_repo} />
 <div class="flex">
     <div class="w-2/3 mx-2">
         <OpenPRs {repo_id} />