#39 package banner detailed layout

* added @tea/ui StarRating component

packages/gui/src-tauri/tauri.conf.json

@@ -102,7 +102,7 @@
 				"height": 600,
 				"resizable": true,
 				"title": "gui",
-				"width": 1024,
+				"width": 1200,
 				"decorations": false
 			}
 		]

packages/gui/src/components/PackageBanner/PackageBanner.svelte

@@ -2,27 +2,39 @@
 	import '$appcss';
 	import '@tea/ui/icons/icons.css';
 	import type { Package } from '@tea/ui/types';
+	import Button from '@tea/ui/Button/Button.svelte';
+	import StarRating from '@tea/ui/StarRating/StarRating.svelte';
 
 	export let pkg: Package;
+
+	let packageRating = 0;
 </script>
 
-<section class="border-gray border bg-black">
+<section class="border-gray border bg-black mt-4">
 	<header class="flex p-2">
 		<figure class="w-1/3 grow-1">
 			<img width={260} src={pkg.thumb_image_url} alt={pkg.full_name} />
 		</figure>
 		<article class="w-2/3 p-4">
-			<h3 class="text-primary">{pkg.full_name}</h3>
+			<h3 class="text-primary text-5xl">{pkg.full_name}</h3>
 			{#if pkg.maintainer}
 				<h3>* {pkg.maintainer}</h3>
 			{/if}
-			<span>stars</span>
-			<p>{pkg.desc}</p>
+			<div class="mt-4">
+				<StarRating maxRating={5} rating={packageRating} />
+			</div>
+			<p class="font-sono mt-4 text-sm">{pkg.desc}</p>
 		</article>
 	</header>
-	<footer class="flex text-white">
-		<div>sh &lt;(curl tea.xyz ) +textin</div>
-		<div>copy</div>
-		<div>open terminal</div>
+	<footer class="flex text-white border-gray border-t h-20">
+		<input
+			class="flex-grow bg-black pl-4"
+			disabled
+			value={`sh <(curl tea.xyz ) +${pkg.full_name}`}
+		/>
+		<Button class="text-sm border-0 border-l-2" onClick={() => console.log('copy')}>COPY</Button>
+		<Button class="text-sm border-0 border-l-2" onClick={() => console.log('copy')}
+			>OPEN IN TERMINAL</Button
+		>
 	</footer>
 </section>

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

@@ -55,7 +55,7 @@
 	</section>
 	<ul class="grid grid-cols-3">
 		{#each packages as pkg}
-			<PackageCard {pkg} link={`/packages/${pkg.full_name}`} />
+			<PackageCard {pkg} link={`/packages/${pkg.slug}`} />
 		{/each}
 	</ul>
 </div>

packages/gui/src/routes/packages/[slug]/+page.svelte

@@ -16,7 +16,7 @@
 	let pkg: Package;
 
 	packagesStore.subscribe((allPackages) => {
-		const foundPackage = allPackages.find(({ full_name }) => full_name === data?.title) as Package;
+		const foundPackage = allPackages.find(({ slug }) => slug === data?.slug) as Package;
 		if (foundPackage) {
 			pkg = foundPackage;
 		}

packages/ui/scripts/update-icons.js

@@ -39,7 +39,7 @@ async function main() {
 
 	const newCssFile = cssFile
 		.replaceAll('https://file.myfontastic.com/Fd33ifaooDVpESwnDXETgR/', '')
-		.replaceAll('1669684803', 'tea-icons');
+		.replaceAll(fileVersion, 'tea-icons');
 	await fs.writeFileSync(path.join(iconsFolder, 'icons.css'), newCssFile, { encoding: 'utf-8' });
 }
 

packages/ui/src/Button/Button.stories.ts

@@ -27,27 +27,6 @@ export default {
 // More on writing stories with args: https://storybook.js.org/docs/7.0/svelte/writing-stories/args
 export const Primary = {
 	args: {
-		primary: true,
-		label: 'Button'
-	}
-};
-
-export const Secondary = {
-	args: {
-		label: 'Button'
-	}
-};
-
-export const Large = {
-	args: {
-		size: 'large',
-		label: 'Button'
-	}
-};
-
-export const Small = {
-	args: {
-		size: 'small',
-		label: 'Button'
+		primary: true
 	}
 };

packages/ui/src/Button/Button.svelte

@@ -1,44 +1,29 @@
 <script type="ts">
-	import './button.css';
-	import { createEventDispatcher } from 'svelte';
+	let clazz: string = '';
+	export { clazz as class };
 
-	/**
-	 * Is this the principal call to action on the page?
-	 */
-	export let primary = false;
-
-	/**
-	 * What background color to use
-	 */
-	export let backgroundColor = '';
-	/**
-	 * How large should the button be?
-	 */
 	export let size: 'large' | 'medium' | 'small' = 'medium';
-	/**
-	 * Button contents
-	 */
-	export let label = '';
 
-	$: mode = primary ? 'storybook-button--primary bg-primary' : 'storybook-button--secondary';
-
-	$: style = backgroundColor ? `background-color: ${backgroundColor}` : '';
-
-	const dispatch = createEventDispatcher();
-
-	/**
-	 * Optional click handler
-	 */
-	export let onClick = (event: any) => {
-		dispatch('click', event);
-	};
+	export let onClick: () => void;
 </script>
 
 <button
-	type="button"
-	class={['storybook-button', `storybook-button--${size}`, 'hover:font-light', mode].join(' ')}
-	{style}
-	on:click={onClick}
+	type="button font-sans"
+	class={`p-2 font-machina bg-black text-gray ${clazz}`}
+	id="liveToastBtn"
+	on:click={() => onClick && onClick()}
 >
-	{label}
+	<slot />
 </button>
+
+<style>
+	button {
+		min-width: 100px;
+		transition: 0.2s ease-in-out !important;
+	}
+	button:hover {
+		box-shadow: inset 0px 0px 0px 5px #1a1a1a !important;
+		background-color: #00ffd0 !important;
+		color: #1a1a1a !important;
+	}
+</style>

packages/ui/src/Button/button.css

@@ -1,31 +0,0 @@
-@import '../app.css';
-
-.storybook-button {
-	font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-	font-weight: 700;
-	border: 0;
-	border-radius: 3em;
-	cursor: pointer;
-	display: inline-block;
-	line-height: 1;
-}
-.storybook-button--primary {
-	color: white;
-}
-.storybook-button--secondary {
-	color: #333;
-	background-color: transparent;
-	box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-}
-.storybook-button--small {
-	font-size: 12px;
-	padding: 10px 16px;
-}
-.storybook-button--medium {
-	font-size: 14px;
-	padding: 11px 20px;
-}
-.storybook-button--large {
-	font-size: 16px;
-	padding: 12px 24px;
-}

packages/ui/src/StarRating/StarRating.svelte

@@ -0,0 +1,25 @@
+<script type="ts">
+	import '../app.css';
+
+	export let rating: number = 0;
+	export let maxRating: number = 5;
+
+	let stars: string[] = [];
+	for (let i = 1; i <= maxRating; i++) {
+		const mod1 = rating % 1;
+
+		if (i < rating) {
+			stars.push('icon-star-full');
+		} else if (mod1 >= 0.5) {
+			stars.push('icon-star-half');
+		} else {
+			stars.push('icon-star-empty');
+		}
+	}
+</script>
+
+<section class="flex text-primary">
+	{#each stars as star}
+		<i class={star} />
+	{/each}
+</section>

packages/ui/src/StarRating/StartRating.stories.ts

@@ -0,0 +1,25 @@
+import StarRating from './StarRating.svelte';
+
+export default {
+	title: 'Example/StarRating',
+	component: StarRating,
+	// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/svelte/writing-docs/docs-page
+	tags: [],
+	render: (args) => ({
+		Component: StarRating,
+		props: args
+	}),
+	parameters: {
+		// More on how to position stories at: https://storybook.js.org/docs/7.0/svelte/configure/story-layout
+		// layout: 'fullscreen'
+	},
+	argTypes: {
+		// onLogin: { action: 'onLogin' },
+		// onLogout: { action: 'onLogout' },
+		// onCreateAccount: { action: 'onCreateAccount' }
+	}
+};
+
+export const Example = {
+	args: {}
+};

packages/ui/src/icons/fonts/tea-icons.svg

@@ -25,4 +25,7 @@
 <glyph glyph-name="pattern-random-19" unicode="&#112;" d="M439 512l-201 0 0-91-37 0 0 91-201 0 0-201 91 0 0-110-91 0 0-201 512 0 0 421-73 0z m-183-18l165 0 0-73-165 0z m0-92l165 0 0-73-165 0z m-238-73l0 165 165 0 0-73-92 0 0-92z m165 73l0-73-73 0 0 73z m-165-384l0 165 73 0 0-165z m92 0l0 165 73 0 0-165z m384 384l0-384-293 0 0 183-91 0 0 110 91 0 0 91 37 0 0-91 201 0 0 91z m-256-347l201 0 0 201-201 0z m18 183l165 0 0-165-165 0z"/>
 <glyph glyph-name="click-copy-icon" unicode="&#113;" d="M380 440l0 71-325 0 0-439 77 0 0-71 325 0 0 439z m-304-347l0 397 284 0 0-50-228 0 0-347z m360-71l-284 0 0 397 284 0z"/>
 <glyph glyph-name="search-icon" unicode="&#114;" d="M422 340c0 92-74 166-166 166-92 0-166-74-166-166 0-85 64-156 147-165l0-169 38 0 0 169c83 9 147 80 147 165z m-166-128c-71 0-128 57-128 128 0 71 57 128 128 128 71 0 128-57 128-128 0-71-57-128-128-128z"/>
+<glyph glyph-name="star-full" unicode="&#115;" d="M494 327c0-4-3-9-8-14l-103-101 24-143c0-1 0-3 0-5 0-4-1-8-3-10-2-3-4-5-8-5-4 0-8 2-12 4l-128 67-128-67c-4-2-8-4-12-4-4 0-7 2-9 5-2 2-3 6-3 10 0 1 0 3 1 5l24 143-104 101c-4 6-7 10-7 14 0 7 6 12 16 13l144 21 64 130c4 8 8 12 14 12 6 0 10-4 14-12l64-130 144-21c10-1 16-6 16-13z"/>
+<glyph glyph-name="star-half" unicode="&#116;" d="M357 239l74 71-102 15-19 3-9 17-45 92 0-275 17-9 91-48-17 101-4 19z m129 74l-103-101 24-143c1-6 1-11-2-14-2-4-5-6-9-6-4 0-7 2-12 4l-128 67-128-67c-5-2-8-4-12-4-4 0-7 2-9 6-3 3-3 8-2 14l24 143-104 101c-6 7-8 12-6 17 2 6 7 9 15 10l144 21 64 130c4 8 8 12 14 12 5 0 10-4 14-12l64-130 144-21c8-1 13-4 15-10 2-5 0-10-7-17z"/>
+<glyph glyph-name="star-empty" unicode="&#117;" d="M343 225l88 85-121 18-54 109-54-109-121-18 88-85-21-120 108 57 108-57z m151 102c0-4-3-9-8-14l-103-101 24-143c0-1 0-3 0-5 0-10-3-15-11-15-4 0-8 2-12 4l-128 67-128-67c-4-2-8-4-12-4-4 0-7 2-9 5-2 2-3 6-3 10 0 1 0 3 1 5l24 143-104 101c-4 6-7 10-7 14 0 7 6 12 16 13l144 21 64 130c4 8 8 12 14 12 6 0 10-4 14-12l64-130 144-21c10-1 16-6 16-13z"/>
 </font></defs></svg>

packages/ui/src/icons/icons.css

@@ -91,3 +91,12 @@
 .icon-search-icon:before {
 	content: '\72';
 }
+.icon-star-full:before {
+	content: '\73';
+}
+.icon-star-half:before {
+	content: '\74';
+}
+.icon-star-empty:before {
+	content: '\75';
+}