silberengel
/
gitcitadel-online
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat(ListPRs): add list PRs ui component 

with test vectors

includes datejs dependancy
master
DanConwayDev 2 years ago
parent
9c33dd7838
commit
df843d90ab
No known key found for this signature in database
GPG Key ID: 68E15486D73F75E1
19 changed files with 681 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      __snapshots__/prs-list-item--loading.png
  2. BIN
      __snapshots__/prs-list-item--long-and-no-spaces.png
  3. BIN
      __snapshots__/prs-list-item--long-details.png
  4. BIN
      __snapshots__/prs-list-item--no-details.png
  5. BIN
      __snapshots__/prs-list-item--short-details.png
  6. 133
      __snapshots__/prs-list-item.test.js.snap
  7. BIN
      __snapshots__/prs-list-list--default.png
  8. BIN
      __snapshots__/prs-list-list--empty.png
  9. BIN
      __snapshots__/prs-list-list--loading.png
  10. BIN
      __snapshots__/prs-list-list--no-title.png
  11. BIN
      __snapshots__/prs-list-list--partially-loaded.png
  12. 293
      __snapshots__/prs-list-list.test.js.snap
  13. 3
      package.json
  14. 26
      src/lib/components/PR.vectors.ts
  15. 56
      src/lib/components/PRsList.stories.svelte
  16. 35
      src/lib/components/PRsList.svelte
  17. 26
      src/lib/components/PRsListItem.stories.svelte
  18. 109
      src/lib/components/PRsListItem.svelte
  19. 2
      yarn.lock

BIN
__snapshots__/prs-list-item--loading.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
__snapshots__/prs-list-item--long-and-no-spaces.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
__snapshots__/prs-list-item--long-details.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
__snapshots__/prs-list-item--no-details.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.5 KiB

BIN
__snapshots__/prs-list-item--short-details.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.9 KiB

133
__snapshots__/prs-list-item.test.js.snap
Unescape View File

@ -0,0 +1,133 @@ @@ -0,0 +1,133 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`PRs/List/Item Long Details test 1`] = `
<li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 16 16"
class="h-5 w-5 pt-1 flex-none fill-success"
>
<path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
</path>
</svg>
<div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
<div class="text-sm text-base-content">
rather long title that goes on and on and on and on and on and on...
</div>
<ul class="pt-2">
<li class="inline mr-3">
opened a minute ago
</li>
<li class="inline">
carole
</li>
</ul>
</div>
</li>
`;
exports[`PRs/List/Item Long and No Spaces test 1`] = `
<li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 16 16"
class="h-5 w-5 pt-1 flex-none fill-success"
>
<path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
</path>
</svg>
<div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
<div class="text-sm text-base-content">
LongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameL...
</div>
<ul class="pt-2">
<li class="align-middle inline mr-3">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-3 w-3 pt-0 flex-none fill-base-content inline-block"
viewbox="0 0 16 16"
>
<path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z">
</path>
</svg>
1
</li>
<li class="inline mr-3">
opened 3 months ago
</li>
<li class="inline">
steve
</li>
</ul>
</div>
</li>
`;
exports[`PRs/List/Item No Details test 1`] = `
<li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 16 16"
class="h-5 w-5 pt-1 flex-none fill-success"
>
<path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
</path>
</svg>
<div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
<div class="text-sm text-base-content">
Untitled
</div>
<ul class="pt-2">
<li class="inline mr-3">
opened
</li>
<li class="inline">
</li>
</ul>
</div>
</li>
`;
exports[`PRs/List/Item Short Details test 1`] = `
<li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 16 16"
class="h-5 w-5 pt-1 flex-none fill-success"
>
<path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
</path>
</svg>
<div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
<div class="text-sm text-base-content">
short title
</div>
<ul class="pt-2">
<li class="align-middle inline mr-3">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-3 w-3 pt-0 flex-none fill-base-content inline-block"
viewbox="0 0 16 16"
>
<path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z">
</path>
</svg>
2
</li>
<li class="inline mr-3">
opened 7 days ago
</li>
<li class="inline">
fred
</li>
</ul>
</div>
</li>
`;
exports[`PRs/List/Item loading test 1`] = `
<li class="flex p-2 pt-4 ">
<div class="h-5 w-5 pt-1 flex-none skeleton">
</div>
<div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
<div class="h-5 w-60 pt-1 flex-none skeleton">
</div>
<div class="h-3 w-40 mt-3 mb-1 flex-none skeleton">
</div>
</div>
</li>
`;

BIN
__snapshots__/prs-list-list--default.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
__snapshots__/prs-list-list--empty.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
__snapshots__/prs-list-list--loading.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.9 KiB

BIN
__snapshots__/prs-list-list--no-title.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
__snapshots__/prs-list-list--partially-loaded.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

293
__snapshots__/prs-list-list.test.js.snap
Unescape View File

@ -0,0 +1,293 @@ @@ -0,0 +1,293 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`PRs/List/List Default test 1`] = `
<div class>
<div class="prose">
<h3>
Open PRs
</h3>
</div>
<ul class="divide-y divide-neutral-600">
<li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 16 16"
class="h-5 w-5 pt-1 flex-none fill-success"
>
<path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
</path>
</svg>
<div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
<div class="text-sm text-base-content">
short title
</div>
<ul class="pt-2">
<li class="align-middle inline mr-3">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-3 w-3 pt-0 flex-none fill-base-content inline-block"
viewbox="0 0 16 16"
>
<path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z">
</path>
</svg>
2
</li>
<li class="inline mr-3">
opened 7 days ago
</li>
<li class="inline">
fred
</li>
</ul>
</div>
</li>
<li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 16 16"
class="h-5 w-5 pt-1 flex-none fill-success"
>
<path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
</path>
</svg>
<div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
<div class="text-sm text-base-content">
rather long title that goes on and on and on and on and on and on...
</div>
<ul class="pt-2">
<li class="inline mr-3">
opened a minute ago
</li>
<li class="inline">
carole
</li>
</ul>
</div>
</li>
<li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 16 16"
class="h-5 w-5 pt-1 flex-none fill-success"
>
<path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
</path>
</svg>
<div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
<div class="text-sm text-base-content">
LongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameL...
</div>
<ul class="pt-2">
<li class="align-middle inline mr-3">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-3 w-3 pt-0 flex-none fill-base-content inline-block"
viewbox="0 0 16 16"
>
<path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z">
</path>
</svg>
1
</li>
<li class="inline mr-3">
opened 3 months ago
</li>
<li class="inline">
steve
</li>
</ul>
</div>
</li>
</ul>
</div>
`;
exports[`PRs/List/List Empty test 1`] = `
<div class>
<div class="prose">
<h3>
Open PRs
</h3>
</div>
<p class="prose">
None
</p>
<ul class="divide-y divide-neutral-600">
</ul>
</div>
`;
exports[`PRs/List/List Loading test 1`] = `
<div class>
<div class="prose">
<h3>
Open PRs
</h3>
</div>
<ul class="divide-y divide-neutral-600">
<li class="flex p-2 pt-4 ">
<div class="h-5 w-5 pt-1 flex-none skeleton">
</div>
<div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
<div class="h-5 w-60 pt-1 flex-none skeleton">
</div>
<div class="h-3 w-40 mt-3 mb-1 flex-none skeleton">
</div>
</div>
</li>
<li class="flex p-2 pt-4 ">
<div class="h-5 w-5 pt-1 flex-none skeleton">
</div>
<div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
<div class="h-5 w-60 pt-1 flex-none skeleton">
</div>
<div class="h-3 w-40 mt-3 mb-1 flex-none skeleton">
</div>
</div>
</li>
<li class="flex p-2 pt-4 ">
<div class="h-5 w-5 pt-1 flex-none skeleton">
</div>
<div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
<div class="h-5 w-60 pt-1 flex-none skeleton">
</div>
<div class="h-3 w-40 mt-3 mb-1 flex-none skeleton">
</div>
</div>
</li>
</ul>
</div>
`;
exports[`PRs/List/List No Title test 1`] = `
<div class>
<ul class="divide-y divide-neutral-600">
<li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 16 16"
class="h-5 w-5 pt-1 flex-none fill-success"
>
<path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
</path>
</svg>
<div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
<div class="text-sm text-base-content">
short title
</div>
<ul class="pt-2">
<li class="align-middle inline mr-3">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-3 w-3 pt-0 flex-none fill-base-content inline-block"
viewbox="0 0 16 16"
>
<path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z">
</path>
</svg>
2
</li>
<li class="inline mr-3">
opened 7 days ago
</li>
<li class="inline">
fred
</li>
</ul>
</div>
</li>
<li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 16 16"
class="h-5 w-5 pt-1 flex-none fill-success"
>
<path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
</path>
</svg>
<div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
<div class="text-sm text-base-content">
rather long title that goes on and on and on and on and on and on...
</div>
<ul class="pt-2">
<li class="inline mr-3">
opened a minute ago
</li>
<li class="inline">
carole
</li>
</ul>
</div>
</li>
</ul>
</div>
`;
exports[`PRs/List/List Partially Loaded test 1`] = `
<div class>
<div class="prose">
<h3>
Open PRs
</h3>
</div>
<ul class="divide-y divide-neutral-600">
<li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 16 16"
class="h-5 w-5 pt-1 flex-none fill-success"
>
<path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
</path>
</svg>
<div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
<div class="text-sm text-base-content">
short title
</div>
<ul class="pt-2">
<li class="align-middle inline mr-3">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-3 w-3 pt-0 flex-none fill-base-content inline-block"
viewbox="0 0 16 16"
>
<path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z">
</path>
</svg>
2
</li>
<li class="inline mr-3">
opened 7 days ago
</li>
<li class="inline">
fred
</li>
</ul>
</div>
</li>
<li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 16 16"
class="h-5 w-5 pt-1 flex-none fill-success"
>
<path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
</path>
</svg>
<div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
<div class="text-sm text-base-content">
rather long title that goes on and on and on and on and on and on...
</div>
<ul class="pt-2">
<li class="inline mr-3">
opened a minute ago
</li>
<li class="inline">
carole
</li>
</ul>
</div>
</li>
<li class="flex p-2 pt-4 ">
<div class="h-5 w-5 pt-1 flex-none skeleton">
</div>
<div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
<div class="h-5 w-60 pt-1 flex-none skeleton">
</div>
<div class="h-3 w-40 mt-3 mb-1 flex-none skeleton">
</div>
</div>
</li>
</ul>
</div>
`;

3
package.json
Unescape View File

@ -48,7 +48,8 @@ @@ -48,7 +48,8 @@
"@nostr-dev-kit/ndk": "^1.3.0",
"@nostr-dev-kit/ndk-svelte": "^1.3.0",
"@nostr-dev-kit/ndk-svelte-components": "^1.3.0",
"daisyui": "^4.4"
"daisyui": "^4.4",
"dayjs": "^1.11.10"
},
"resolutions": {
"jackspeak": "2.1.1"

26
src/lib/components/PR.vectors.ts
Unescape View File

@ -0,0 +1,26 @@ @@ -0,0 +1,26 @@
import type { Args as PRListItemArgs } from "./PRsListItem.svelte";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
dayjs.extend(relativeTime);
export let PRsListItemArgsVectors = {
Short: {
title: "short title",
author: "fred",
created_at: dayjs().subtract(7, 'days').unix(),
comments: 2,
} as PRListItemArgs,
Long: {
title: "rather long title that goes on and on and on and on and on and on and on and on and on and on and on and on and on and on and on",
author: "carole",
created_at: dayjs().subtract(1, 'minute').unix(),
comments: 0,
} as PRListItemArgs,
LongNoSpaces: {
title: "LongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameLongName",
author: "steve",
created_at: dayjs().subtract(3, 'month').subtract(3, 'days').unix(),
comments: 1,
} as PRListItemArgs,
};

56
src/lib/components/PRsList.stories.svelte
Unescape View File

@ -0,0 +1,56 @@ @@ -0,0 +1,56 @@
<script lang="ts" context="module">
import type { Meta } from "@storybook/svelte";
import PRsList from "./PRsList.svelte";
import { Story, Template } from "@storybook/addon-svelte-csf";
import { PRsListItemArgsVectors as vectors } from "./PR.vectors";
export const meta: Meta<PRsList> = {
title: "PRs/List/List",
component: PRsList,
tags: ["autodocs"],
};
</script>
<Template let:args>
<PRsList {...args} />
</Template>
<Story
name="Default"
args={{
title: "Open PRs",
prs: [vectors.Short, vectors.Long, vectors.LongNoSpaces],
}}
/>
<Story
name="No Title"
args={{
prs: [vectors.Short, vectors.Long],
}}
/>
<Story
name="Empty"
args={{
title: "Open PRs",
prs: [],
}}
/>
<Story
name="Loading"
args={{
title: "Open PRs",
prs: [],
loading: true,
}}
/>
<Story
name="Partially Loaded"
args={{
title: "Open PRs",
prs: [vectors.Short, vectors.Long],
loading: true,
}}
/>

35
src/lib/components/PRsList.svelte
Unescape View File

@ -0,0 +1,35 @@ @@ -0,0 +1,35 @@
<script lang="ts">
import { fade } from "svelte/transition";
import { onMount } from "svelte";
import PRsListItem, {
type Args as PRsListItemArgs,
} from "$lib/components/PRsListItem.svelte";
export let title: string = "";
export let prs: PRsListItemArgs[] = [];
export let loading: boolean = false;
</script>
<div class="">
{#if title.length > 0}
<div class="prose">
<h3>{title}</h3>
</div>
{/if}
{#if prs.length == 0 && !loading}
<p class="prose">None</p>
{/if}
<ul class=" divide-y divide-neutral-600">
{#each prs as { title, comments, author, created_at }}
<PRsListItem {title} {comments} {author} {created_at} />
{/each}
{#if loading}
<PRsListItem loading={true} />
{#if prs.length == 0}
<PRsListItem loading={true} />
<PRsListItem loading={true} />
{/if}
{/if}
</ul>
</div>

26
src/lib/components/PRsListItem.stories.svelte
Unescape View File

@ -0,0 +1,26 @@ @@ -0,0 +1,26 @@
<script lang="ts" context="module">
import type { Meta } from "@storybook/svelte";
import PRsListItem from "./PRsListItem.svelte";
import { Story, Template } from "@storybook/addon-svelte-csf";
import { PRsListItemArgsVectors as vectors } from "./PR.vectors";
export const meta: Meta<PRsListItem> = {
title: "PRs/List/Item",
component: PRsListItem,
tags: ["autodocs"],
};
</script>
<Template let:args>
<PRsListItem {...args} />
</Template>
<Story name="Short Details" args={vectors.Short} />
<Story name="Long Details" args={vectors.Long} />
<Story name="Long and No Spaces" args={vectors.LongNoSpaces} />
<Story name="No Details" args={{}} />
<Story name="loading" args={{ loading: true }} />

109
src/lib/components/PRsListItem.svelte
Unescape View File

@ -0,0 +1,109 @@ @@ -0,0 +1,109 @@
<script lang="ts" context="module">
export interface Args {
title: string;
comments: number;
author: string;
created_at: number | undefined;
loading?: boolean;
}
export const defaults: Args = {
title: "",
comments: 0,
author: "",
created_at: 0,
loading: false,
};
</script>
<script lang="ts">
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
dayjs.extend(relativeTime);
export let { title, comments, author, created_at, loading } = defaults;
let short_title: string;
let created_at_ago: string;
$: {
if (title.length > 70) short_title = title.slice(0, 65) + "...";
else if (title.length == 0) short_title = "Untitled";
else short_title = title;
created_at_ago = created_at ? dayjs(created_at * 1000).fromNow() : "";
}
$: {
}
</script>
<li
class="flex p-2 pt-4 {!loading
? 'hover:bg-neutral-700 cursor-pointer'
: ''}"
>
<!-- <figure class="p-4 pl-0 text-color-primary"> -->
<!-- http://icon-sets.iconify.design/octicon/git-pull-request-16/ -->
{#if loading}
<div class="h-5 w-5 pt-1 flex-none skeleton"></div>
{:else}
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
class="h-5 w-5 pt-1 flex-none fill-success"
><path
d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0"
/>
</svg>
{/if}
<!-- <svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
class="fill-base-content"
><path
d="M3.25 1A2.25 2.25 0 0 1 4 5.372v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.251 2.251 0 0 1 3.25 1m9.5 14a2.25 2.25 0 1 1 0-4.5a2.25 2.25 0 0 1 0 4.5M2.5 3.25a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0M3.25 12a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m9.5 0a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5M14 7.5a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0m0-4.25a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0"
/></svg
> -->
<div class="ml-3 overflow-hidden grow text-xs text-neutral-content">
{#if loading}
<div class="h-5 w-60 pt-1 flex-none skeleton"></div>
<div class="h-3 w-40 mt-3 mb-1 flex-none skeleton"></div>
{:else}
<div class="text-sm text-base-content">
{short_title}
</div>
<!-- <div class="text-xs text-neutral-content">
{description}
</div> -->
<ul class="pt-2">
{#if comments > 0}
<li class="align-middle inline mr-3">
<!-- http://icon-sets.iconify.design/octicon/comment-16/ -->
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-3 w-3 pt-0 flex-none fill-base-content inline-block"
viewBox="0 0 16 16"
><path
d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"
/></svg
>
{comments}
</li>
{/if}
<li class="inline mr-3">
opened {created_at_ago}
</li>
<li class="inline">
{author}
</li>
</ul>
{/if}
</div>
<!-- <div class="flex-none text-xs pt-0 hidden md:block">
<div class="align-middle">
{#if loading}
<div class="skeleton w-10 h-10"></div>
{:else}
<Avatar />
{/if}
</div>
</div> -->
</li>

2
yarn.lock
Unescape View File

@ -4221,7 +4221,7 @@ data-uri-to-buffer@^4.0.0: @@ -4221,7 +4221,7 @@ data-uri-to-buffer@^4.0.0:
resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz#d8feb2b2881e6a4f58c2e08acfd0e2834e26222e"
integrity sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==
dayjs@^1.11.9:
dayjs@^1.11.10, dayjs@^1.11.9:
version "1.11.10"
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"
integrity sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==

Write Preview
Loading…
Cancel
Save