#32 initial implementation of @tea/ui:PackageCard

packages/gui/src/components/FeaturedCourses/FeaturedCourses.svelte

@@ -4,3 +4,4 @@
 </script>
 
 <Placeholder label="FeaturedCourses" />
+<h1>test</h1>

packages/gui/src/components/Placeholder/Placeholder.svelte

@@ -2,7 +2,7 @@
 	export let label = '';
 </script>
 
-<section>
+<section class="p-8 bg-gray">
 	<header>{label}</header>
 	<slot />
 </section>
@@ -14,7 +14,7 @@
 		height: 100%;
 		width: 100%;
 		min-width: 100%;
-		background-color: #ccc;
+		/* background-color: #ccc; */
 		display: flex;
 	}
 	header {

packages/gui/src/components/SearchPackages/SearchPackages.svelte

@@ -1,9 +1,11 @@
 <script type="ts">
 	import '$appcss';
-	import Placeholder from '$components/Placeholder/Placeholder.svelte';
 
 	import { packages as packagesStore, initializePackages } from '$libs/stores';
-	import type { Package } from '$libs/types';
+
+	import type { Package } from '@tea/ui/types';
+	import PackageCard from '@tea/ui/PackageCard/PackageCard.svelte';
+
 	import { onMount } from 'svelte';
 
 	let packages: Package[] = [];
@@ -25,11 +27,9 @@
 		<h2>Filter Packages</h2>
 		<input type="search" class="text-white bg-black border border-gray" />
 	</section>
-	<ul class="grid grid-cols-3 gap-8 mt-8">
+	<ul class="grid grid-cols-3 mt-8">
 		{#each packages as pkg}
-			<li>
+			<PackageCard {pkg} link={`/packages/${pkg.full_name}`} />
-				<a href={`/packages/${pkg.slug}`}><Placeholder label={pkg.name} /></a>
-			</li>
 		{/each}
 	</ul>
 </div>

packages/gui/src/libs/api/mock.ts

@@ -150,6 +150,5 @@ const packages: Package[] = [
 ];
 
 export async function getPackages(): Promise<Package[]> {
-
 	return packages;
 }

packages/gui/src/libs/types.ts

@@ -1,14 +1,4 @@
-export interface Package {
+// as much possible add types here that are unique to @tea/gui use only
-	slug: string;
+// else
-	version: string;
+// 		please use the package @tea/ui/src/types.ts
-	full_name: string;
+//		things that go there are shared types/shapes like ie: Package
-	name: string;
-	maintainer: string;
-	homepage: string;
-	last_modified: Date | string;
-	thumb_image_url: string;
-	thumb_image_name: string;
-	desc: string;
-	dl_count: number;
-	installs: number;
-}

packages/gui/src/routes/+layout.svelte

@@ -23,6 +23,7 @@
 		{/if}
 		<figure />
 		<div>
+			<!-- all pages get inserted in this slot -->
 			<slot />
 		</div>
 	</section>

packages/gui/tsconfig.json

@@ -14,7 +14,7 @@
 			"$libs/*": ["src/libs/*"],
 			"@api": ["src/lib/api/tauri.ts"],
 			"$components/*": ["src/components/*"],
-			"@tea/ui": ["../ui/src/*"]
+			"@tea/ui/*": ["../ui/src/*"]
 		}
 	}
 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias

packages/tsconfig.cli.json

@@ -1,8 +0,0 @@
-{
-    "extends": "./tsconfig.json",
-    "compilerOptions": {
-		"paths": {
-			"@api": ["src/lib/api_cli.ts"],
-		}
-	},
-}

packages/ui/src/PackageCard/PackageCard.css

@@ -0,0 +1 @@
+@import '../app.css';

packages/ui/src/PackageCard/PackageCard.stories.ts

@@ -0,0 +1,45 @@
+import PackageCard from './PackageCard.svelte';
+import type { Package } from '../types';
+
+const SamplePkg: Package = {
+	slug: 'mesonbuild_com',
+	homepage: 'https://mesonbuild.com',
+	name: 'mesonbuild.com',
+	version: '0.63.3',
+	last_modified: '2022-10-06T15:45:08.000Z',
+	full_name: 'mesonbuild.com',
+	dl_count: 270745,
+	thumb_image_name: 'mesonbuild_com_option 1.jpg ',
+	maintainer: '',
+	desc: 'Fast and user friendly build system',
+	thumb_image_url: 'https://tea.xyz/Images/packages/mesonbuild_com.jpg',
+	installs: 0
+};
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction
+export default {
+	title: 'Example/PackageCard',
+	component: PackageCard,
+	tags: ['docsPage'],
+	render: ({ pkg, link }: { pkg: Package; link: string }) => ({
+		Component: PackageCard,
+		props: { pkg }
+	}),
+	argTypes: {
+		pkg: {
+			name: 'pkg',
+			description: 'type Package'
+		},
+		link: {
+			name: 'link'
+		}
+	}
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/svelte/writing-stories/args
+export const Example = {
+	args: {
+		pkg: SamplePkg,
+		link: '#'
+	}
+};

packages/ui/src/PackageCard/PackageCard.svelte

@@ -0,0 +1,128 @@
+<script type="ts">
+	import './PackageCard.css';
+	import type { Package } from '../types';
+	export let pkg: Package;
+	export let link: string;
+</script>
+
+<section class="p-4 border border-gray">
+	<figure>
+		<img
+			src={!pkg.thumb_image_url.includes('https://tea.xyz')
+				? 'https://tea.xyz/Images/package-thumb-nolabel4.jpg'
+				: pkg.thumb_image_url}
+			alt={pkg.name}
+		/>
+		<article class="card-thumb-label">
+			<i class="icon-tea-logo-iconasset-1">
+				<!-- TODO: replace with icon.svg -->
+			</i>
+			<h3>{pkg.name}</h3>
+			{#if pkg.maintainer}
+				<h4>&#x2022;&nbsp;{pkg.maintainer}</h4>
+			{/if}
+		</article>
+	</figure>
+	<footer class="flex mt-4 justify-between">
+		<div>
+			<p>
+				<span>V&NonBreakingSpace;{pkg.version}</span>
+				<!--
+        TODO: uncomment once install counts improve
+        <br>
+        <span class="package-install-no">>{{- .installs -}}&nbsp;installs</span> -->
+			</p>
+		</div>
+		<a href={link}>
+			<button class="detail-btn"><i class="icon-enter-arrow" />details</button>
+		</a>
+	</footer>
+</section>
+
+<style>
+	section {
+		background-color: #1a1a1a;
+		transition: all 0.3s;
+		width: 100%;
+	}
+
+	figure {
+		position: relative;
+	}
+
+	.detail-btn {
+		position: relative;
+		float: right !important;
+		right: 0;
+	}
+
+	img {
+		box-shadow: 0px 0px 12px #0c0c0c !important;
+		width: 100%;
+		height: 100%;
+	}
+	.card-thumb-label i {
+		font-size: 1.5vw;
+	}
+
+	.card-thumb-label h3 {
+		color: black;
+		font-size: 1.8vw;
+		line-height: 1.8vw;
+		margin: 0px 0px 0.5vw 0vw;
+		padding: 0px;
+	}
+
+	.card-thumb-label {
+		position: absolute;
+		background: rgba(255, 255, 255, 0.9);
+		left: 0;
+		bottom: 0vw;
+		padding: 1.116vw;
+		text-align: left;
+		width: 90%;
+		height: 40%;
+	}
+
+	.card-thumb-label h4 {
+		color: black;
+		font-size: 1.5vw;
+		line-height: 1.5vw;
+		margin: 0px;
+		padding: 0px;
+	}
+
+	.detail-btn {
+		display: inline-block;
+		font-family: 'pp-neue-machina', sans-serif;
+		background-color: #1a1a1a;
+		border: 0.5px solid #ffffff;
+		color: #fff;
+		padding-top: 0.279vw;
+		text-decoration: none;
+		text-transform: uppercase;
+		width: 134px;
+		height: 2.232vw;
+		min-height: 34px;
+		transition: 0.1s linear;
+	}
+
+	.detail-btn:hover {
+		background-color: #8000ff;
+		box-shadow: inset 0vw 0vw 0vw 0.223vw #1a1a1a !important;
+	}
+
+	/* Icon Styling */
+
+	.detail-btn .icon-enter-arrow {
+		display: inline-block;
+		position: relative;
+		margin-right: 0.558vw;
+		transition: 0.2s ease-in-out;
+	}
+
+	.detail-btn:hover .icon-enter-arrow {
+		display: inline-block;
+		transform: rotate(-45deg) !important;
+	}
+</style>

packages/ui/src/types.ts

@@ -0,0 +1,14 @@
+export interface Package {
+	slug: string;
+	version: string;
+	full_name: string;
+	name: string;
+	maintainer: string;
+	homepage: string;
+	last_modified: Date | string;
+	thumb_image_url: string;
+	thumb_image_name: string;
+	desc: string;
+	dl_count: number;
+	installs: number;
+}