#32 initial dynamic search packages

.github/workflows/ci.yml

@@ -40,6 +40,26 @@ jobs:
           message-id: preview-comment-${{needs.changes.outputs.preview_folder}}
           message: |
             no preview or changes related to UI
+  test:
+    needs: changes
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          persist-credentials: false
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 7
+      - name: setup node
+        uses: actions/setup-node@v1
+        with:
+          node-version: 16
+          cache: 'pnpm'
+          cache-dependency-path: pnpm-lock.yaml
+      - name: install app dependencies
+        run: pnpm install
+      - name: lint
+        run: pnpm -r lint
   build_svelte:
     needs: changes
     if: needs.changes.outputs.svelte == 'true'
@@ -62,6 +82,8 @@ jobs:
         with:
           toolchain: stable
       - name: install app dependencies and build it
+        env:
+          BUILD_FOR: preview
         run: pnpm install && pnpm --filter gui build
       - uses: aws-actions/configure-aws-credentials@v1
         with:

packages/gui/.eslintignore

@@ -11,3 +11,4 @@ node_modules
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+src-tauri/target/*

packages/gui/.eslintrc.cjs

@@ -4,10 +4,12 @@ module.exports = {
 	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
 	plugins: ['svelte3', '@typescript-eslint'],
 	ignorePatterns: ['*.cjs'],
-  overrides: [{
+	overrides: [
+		{
 			files: ['*.svelte'],
 			processor: 'svelte3/svelte3'
-  }],
+		}
+	],
 	settings: {
 		'svelte3/typescript': () => require('typescript')
 	},

packages/gui/.prettierignore

@@ -11,3 +11,11 @@ node_modules
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+build
+/src-tauri/src/*
+/src-tauri/icons/*
+/src-tauri/target/**/*
+/src-tauri/build/*
+/src-tauri/Cargo.lock
+/src-tauri/Cargo.toml
+src-tauri

packages/gui/.prettierrc

@@ -1,4 +1,5 @@
 {
+	"tabWidth": 2,
 	"useTabs": true,
 	"singleQuote": true,
 	"trailingComma": "none",

packages/gui/README.md

@@ -1,4 +1,5 @@
 # @tea/gui
+
 Desktop app of [tea](https://tea.xyz) for installing packages/softwares
 
 More interesting and possibly updated documentations are at this [NOTION](https://www.notion.so/teaxyz/tea-gui-fdd9f50aa980432fa370b2cf6a03cb50) page. It is ideal to review it also, its more updated.
@@ -29,5 +30,4 @@ You can preview the production build with `npm run preview`.
 
 ## Intuition Building Links
 
-* [Rust module system is weird?](https://www.sheshbabu.com/posts/rust-module-system/)
+- [Rust module system is weird?](https://www.sheshbabu.com/posts/rust-module-system/)
-

packages/gui/package.json

@@ -32,6 +32,7 @@
 		"svelte": "^3.49.0",
 		"svelte-check": "^2.8.0",
 		"svelte-preprocess": "^4.10.7",
+		"svelte2tsx": "^0.5.20",
 		"tailwindcss": "^3.2.4",
 		"tslib": "^2.3.1",
 		"typescript": "^4.7.4",

packages/gui/postcss.config.cjs

@@ -1,6 +1,6 @@
 module.exports = {
 	plugins: {
 		tailwindcss: {},
-    autoprefixer: {},
+		autoprefixer: {}
-  },
 	}
+};

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

@@ -15,10 +15,7 @@
 			"http": {
 				"all": true,
 				"request": true,
-        "scope": [
+				"scope": ["https://api.tea.xyz/v1/*", "https://github.com/*"]
-          "https://api.tea.xyz/v1/*",
-          "https://github.com/*"
-        ]
 			},
 			"shell": {
 				"all": false,

packages/gui/src/app.css

@@ -3,13 +3,13 @@
 @tailwind utilities;
 
 @font-face {
-  font-family: "pp-neue-machina";
+	font-family: 'pp-neue-machina';
-  src: url("/fonts/PPNeueMachina-InktrapLight.woff");
+	src: url('/fonts/PPNeueMachina-InktrapLight.woff');
 }
 
 @font-face {
-  font-family: "sono";
+	font-family: 'sono';
-  src: url("/fonts/Sono-Light.woff2");
+	src: url('/fonts/Sono-Light.woff2');
 }
 
 html {

packages/gui/src/components/Badges/Badges.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import "$appcss";
+	import '$appcss';
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+	import Placeholder from '$components/Placeholder/Placeholder.svelte';
 </script>
+
 <Placeholder label="Badges" />

packages/gui/src/components/BigBlackSpace/BigBlackSpace.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import "$appcss";
+	import '$appcss';
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+	import Placeholder from '$components/Placeholder/Placeholder.svelte';
 </script>
+
 <Placeholder label="BigBlackSpace" />

packages/gui/src/components/CliBanner/CliBanner.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import "$appcss";
+	import '$appcss';
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+	import Placeholder from '$components/Placeholder/Placeholder.svelte';
 </script>
+
 <Placeholder label="CLI Hero" />

packages/gui/src/components/EssentialWorkshops/EssentialWorkshops.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import "$appcss";
+	import '$appcss';
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+	import Placeholder from '$components/Placeholder/Placeholder.svelte';
 </script>
+
 <Placeholder label="EssentialWorkshops" />

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

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import "$appcss";
+	import '$appcss';
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+	import Placeholder from '$components/Placeholder/Placeholder.svelte';
 </script>
+
 <Placeholder label="FeaturedCourses" />

packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import "$appcss";
+	import '$appcss';
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+	import Placeholder from '$components/Placeholder/Placeholder.svelte';
 </script>
+
 <Placeholder label="FeaturedPackages" />

packages/gui/src/components/GettingStarted/GettingStarted.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import "$appcss";
+	import '$appcss';
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+	import Placeholder from '$components/Placeholder/Placeholder.svelte';
 </script>
+
 <Placeholder label="GettingStarted" />

packages/gui/src/components/InstalledPackages/InstalledPackages.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import "$appcss";
+	import '$appcss';
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+	import Placeholder from '$components/Placeholder/Placeholder.svelte';
 </script>
+
 <Placeholder label="InstalledPackages" />

packages/gui/src/components/NavBar/NavBar.svelte

@@ -5,10 +5,9 @@
 
 	import { beforeUpdate } from 'svelte';
 
-
 	const openGithub = () => {
-        open('https://github.com/teaxyz')
+		open('https://github.com/teaxyz');
-    }
+	};
 
 	let maximized = false;
 	const toggleMaximize = () => {
@@ -18,7 +17,7 @@
 		} else {
 			appWindow.unmaximize();
 		}
-    }
+	};
 
 	let routes = [
 		{
@@ -63,16 +62,10 @@
 				<img src="/images/close.svg" alt="close" />
 			</button>
 			<button class="titlebar-button" id="titlebar-minimize" on:click={appWindow.minimize}>
-                <img
+				<img src="/images/minimize.svg" alt="minimize" />
-                src="/images/minimize.svg"
-                alt="minimize"
-                />
 			</button>
 			<button class="titlebar-button" id="titlebar-maximize" on:click={toggleMaximize}>
-                <img
+				<img src="/images/expand.svg" alt="maximize" />
-                src="/images/expand.svg"
-                alt="maximize"
-                />
 			</button>
 		</div>
 		<a href="/">
@@ -80,10 +73,14 @@
 		</a>
 	</nav>
 
-    <input class="w-full bg-black h-12 p-4 border border-x-0 border-gray" type="search" placeholder="search" />
+	<input
+		class="w-full bg-black h-12 p-4 border border-x-0 border-gray"
+		type="search"
+		placeholder="search"
+	/>
 
 	{#each routes as route}
-        <li class={route.active ? "nav_button active": "nav_button"}>
+		<li class={route.active ? 'nav_button active' : 'nav_button'}>
 			<a href={route.path}>{route.label}</a>
 		</li>
 	{/each}
@@ -112,7 +109,7 @@
 
 	@layer components {
 		.nav_button {
-            transition: all .3s;
+			transition: all 0.3s;
 			color: theme('colors.white');
 			padding: theme('spacing.4') theme('spacing.2');
 		}
@@ -127,7 +124,7 @@
 	}
 
 	nav:hover {
-        transition: all .3s;
+		transition: all 0.3s;
 		background-color: #2d2d2d;
 	}
 
@@ -141,7 +138,7 @@
 		opacity: 0.9;
 	}
 	.titlebar-button img {
-        transition: opacity .3s;
+		transition: opacity 0.3s;
 		opacity: 0;
 	}
 	.titlebar-button:hover img {

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

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import "$appcss";
+	import '$appcss';
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+	import Placeholder from '$components/Placeholder/Placeholder.svelte';
 </script>
+
 <Placeholder label="PackageBanner" />

packages/gui/src/components/PackageReviews/PackageReviews.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import "$appcss";
+	import '$appcss';
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+	import Placeholder from '$components/Placeholder/Placeholder.svelte';
 </script>
 
 <Placeholder label="PackageReviews" />

packages/gui/src/components/PageHeader/PageHeader.svelte

@@ -1,3 +1,3 @@
 <header class="text-primary text-6xl font-machina uppercase">
-    <slot></slot>    
+	<slot />
 </header>

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

@@ -1,10 +1,10 @@
 <script type="ts">
-    export let label:string = "";
+	export let label = '';
 </script>
 
 <section>
 	<header>{label}</header>
-    <slot></slot>
+	<slot />
 </section>
 
 <style>
@@ -14,7 +14,7 @@
 		height: 100%;
 		width: 100%;
 		min-width: 100%;
-        background-color: #CCC;
+		background-color: #ccc;
 		display: flex;
 	}
 	header {

packages/gui/src/components/Preflight/Preflight.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import "$appcss";
+	import '$appcss';
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+	import Placeholder from '$components/Placeholder/Placeholder.svelte';
 </script>
+
 <Placeholder label="Preflight" />

packages/gui/src/components/ProfileBanner/ProfileBanner.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import "$appcss";
+	import '$appcss';
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+	import Placeholder from '$components/Placeholder/Placeholder.svelte';
 </script>
+
 <Placeholder label="ProfileBanner" />

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

@@ -1,6 +1,23 @@
-<script>
+<script type="ts">
-    import "$appcss";
+	import '$appcss';
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+	import Placeholder from '$components/Placeholder/Placeholder.svelte';
+
+	import { packages as packagesStore, initializePackages } from '$libs/stores';
+	import type { Package } from '$libs/types';
+	import { onMount } from 'svelte';
+
+	let packages: Package[] = [];
+	let initialized = false;
+	packagesStore.subscribe((v) => {
+		packages = v;
+	});
+
+	onMount(async () => {
+		if (!packages.length && !initialized) {
+			initialized = true;
+			initializePackages();
+		}
+	});
 </script>
 
 <div class="bg-black border border-gray">
@@ -9,23 +26,10 @@
 		<input type="search" class="text-white bg-black border border-gray" />
 	</section>
 	<ul class="grid grid-cols-3 gap-8 mt-8">
+		{#each packages as pkg}
 			<li>
-            <a href="/packages/pkg-a"><Placeholder label="Pkg A"></Placeholder></a>
+				<a href={`/packages/${pkg.slug}`}><Placeholder label={pkg.name} /></a>
-        </li>
-        <li>
-            <a href="/packages/pkg-b"><Placeholder label="Pkg B"></Placeholder></a>
-        </li>
-        <li>
-            <a href="/packages/pkg-c"><Placeholder label="Pkg C"></Placeholder></a>
-        </li>
-        <li>
-            <a href="/packages/pkg-a"><Placeholder label="Pkg D"></Placeholder></a>
-        </li>
-        <li>
-            <a href="/packages/pkg-b"><Placeholder label="Pkg E"></Placeholder></a>
-        </li>
-        <li>
-            <a href="/packages/pkg-c"><Placeholder label="Pkg F"></Placeholder></a>
 			</li>
+		{/each}
 	</ul>
 </div>

packages/gui/src/libs/api.ts

@@ -1,32 +0,0 @@
-import { getClient } from '@tauri-apps/api/http';
-import { Buffer } from 'buffer';
-
-
-const username = 'user';
-const password = 'password';
-const auth = 'Basic ' + Buffer.from(username + ':' + password).toString('base64');
-
-const base = 'https://api.tea.xyz/v1';
-
-export async function get<T>(path: string){
-    const client = await getClient();
-    const uri = join(base, path);
-    const { data } = await client.get<T>(uri.toString(), {
-        headers: {
-            Authorization: auth
-        }
-    });
-    return data;
-}
-
-const join = function(...paths: string[]){
-    return paths.map(function(path){
-        if(path[0] === "/"){
-            path = path.slice(1);        
-        }
-        if(path[path.length - 1] === "/"){
-            path = path.slice(0, path.length - 1);   
-        }
-        return path;     
-    }).join("/");
-}

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

@@ -0,0 +1,154 @@
+/**
+ * primarily used to make this desktop app work in the website preview setting in the CI/CD
+ * may contain fake/mock data
+ *
+ * TODO:
+ *  * make cors work with api.tea.xyz/v1
+ */
+import type { Package } from '../types';
+
+export async function getPackages(): Promise<Package[]> {
+	const packages: 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
+		},
+		{
+			slug: 'pixman_org',
+			homepage: 'http://www.pixman.org/',
+			maintainer: 'freedesktop',
+			name: 'pixman.org',
+			version: '0.40.0',
+			last_modified: '2022-09-26T19:37:47.000Z',
+			full_name: 'pixman.org',
+			dl_count: 0,
+			thumb_image_name: 'pixman_org_option 1.jpg ',
+			desc: 'Pixman is a library that provides low-level pixel manipulation features such as image compositing and trapezoid rasterization.',
+			thumb_image_url: 'https://tea.xyz/Images/packages/pixman_org.jpg',
+			installs: 0
+		},
+		{
+			slug: 'freedesktop_org_pkg_config',
+			homepage: 'https://freedesktop.org',
+			maintainer: 'freedesktop.org',
+			name: 'pkg-config',
+			version: '0.29.2',
+			last_modified: '2022-10-20T01:32:15.000Z',
+			full_name: 'freedesktop.org/pkg-config',
+			dl_count: 2661501,
+			thumb_image_name: 'freedecktop_org_pkg_config option 1.jpg ',
+			desc: 'Manage compile and link flags for libraries',
+			thumb_image_url: 'https://tea.xyz/Images/packages/freedesktop_org_pkg_config.jpg',
+			installs: 0
+		},
+		{
+			slug: 'gnu_org_gettext',
+			homepage: 'https://gnu.org',
+			maintainer: 'gnu.org',
+			name: 'gettext',
+			version: '0.21.1',
+			last_modified: '2022-10-20T01:23:46.000Z',
+			full_name: 'gnu.org/gettext',
+			dl_count: 3715970,
+			thumb_image_name: 'gnu_org_gettext_option 1.jpg ',
+			desc: 'GNU internationalization (i18n) and localization (l10n) library',
+			thumb_image_url: 'https://tea.xyz/Images/packages/gnu_org_gettext.jpg',
+			installs: 0
+		},
+		{
+			slug: 'ipfs_tech',
+			homepage: 'https://ipfs.tech',
+			name: 'ipfs.tech',
+			version: '0.16.0',
+			last_modified: '2022-10-19T21:36:52.000Z',
+			full_name: 'ipfs.tech',
+			dl_count: 14457,
+			thumb_image_name: 'ipfs_tech_option 2.jpg ',
+			maintainer: '',
+			desc: 'Peer-to-peer hypermedia protocol',
+			thumb_image_url: 'https://tea.xyz/Images/packages/ipfs_tech.jpg',
+			installs: 0
+		},
+		{
+			slug: 'nixos_org_patchelf',
+			homepage: 'https://nixos.org',
+			maintainer: 'nixos.org',
+			name: 'patchelf',
+			version: '0.15.0',
+			last_modified: '2022-09-27T04:50:44.000Z',
+			full_name: 'nixos.org/patchelf',
+			dl_count: 0,
+			thumb_image_name: 'nixos_org_patchelf_option 1.jpg ',
+			desc: 'PatchELF is a simple utility for modifying existing ELF executables and libraries.',
+			thumb_image_url: 'https://tea.xyz/Images/packages/nixos_org_patchelf.jpg',
+			installs: 0
+		},
+		{
+			slug: 'tea_xyz',
+			homepage: 'https://tea.xyz',
+			maintainer: 'tea.xyz',
+			name: 'tea.xyz',
+			version: '0.8.6',
+			last_modified: '2022-10-19T19:13:51.000Z',
+			full_name: 'tea.xyz',
+			dl_count: 0,
+			thumb_image_name: 'tea_xyz_option 2.jpg ',
+			desc: 'Website of tea.xyz',
+			thumb_image_url: 'https://tea.xyz/Images/packages/tea_xyz.jpg',
+			installs: 0
+		},
+		{
+			slug: 'charm_sh_gum',
+			homepage: 'https://charm.sh',
+			maintainer: 'charm.sh',
+			name: 'gum',
+			version: '0.8.0',
+			last_modified: '2022-10-21T02:15:16.000Z',
+			full_name: 'charm.sh/gum',
+			dl_count: 0,
+			thumb_image_name: 'charm_sh_gum.jpg ',
+			desc: '',
+			thumb_image_url: 'https://tea.xyz/Images/packages/charm_sh_gum.jpg',
+			installs: 0
+		},
+		{
+			slug: 'pyyaml_org',
+			homepage: 'https://pyyaml.org',
+			name: 'pyyaml.org',
+			version: '0.2.5',
+			last_modified: '2022-10-03T15:35:14.000Z',
+			full_name: 'pyyaml.org',
+			dl_count: 107505,
+			thumb_image_name: 'pyyaml_org_option 1.jpg ',
+			maintainer: '',
+			desc: 'YAML framework for Python',
+			thumb_image_url: 'https://tea.xyz/Images/packages/pyyaml_org.jpg',
+			installs: 0
+		},
+		{
+			slug: 'tea_xyz_gx_cc',
+			homepage: 'https://tea.xyz',
+			maintainer: 'tea.xyz',
+			name: 'cc',
+			version: '0.1.0',
+			last_modified: '2022-10-19T16:47:44.000Z',
+			full_name: 'tea.xyz/gx/cc',
+			dl_count: 0,
+			thumb_image_name: 'tea_xyz_gx.jpg ',
+			desc: '',
+			thumb_image_url: 'https://tea.xyz/Images/packages/tea_xyz_gx_cc.jpg',
+			installs: 0
+		}
+	];
+	return packages;
+}

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

@@ -0,0 +1,51 @@
+/**
+ * this is the main api integration, anything added here
+ * should be mock replicated in ./mock.ts
+ *  why? to make it easier to verify features without us always
+ *    going through
+ *      the build->download->install->test loop
+ *      thus saving us so much time
+ *
+ * primary concerns here are any method that does the following:
+ *  - connect to remote api(api.tea.xyz) and returns a data
+ *  - connect to a local platform api and returns a data
+ */
+import { getClient } from '@tauri-apps/api/http';
+import { Buffer } from 'buffer';
+import type { Package } from '../types';
+
+const username = 'user';
+const password = 'password';
+const auth = 'Basic ' + Buffer.from(username + ':' + password).toString('base64');
+
+const base = 'https://api.tea.xyz/v1';
+
+async function get<T>(path: string) {
+	const client = await getClient();
+	const uri = join(base, path);
+	const { data } = await client.get<T>(uri.toString(), {
+		headers: {
+			Authorization: auth
+		}
+	});
+	return data;
+}
+
+const join = function (...paths: string[]) {
+	return paths
+		.map(function (path) {
+			if (path[0] === '/') {
+				path = path.slice(1);
+			}
+			if (path[path.length - 1] === '/') {
+				path = path.slice(0, path.length - 1);
+			}
+			return path;
+		})
+		.join('/');
+};
+
+export async function getPackages(): Promise<Package[]> {
+	const packages = await get<Package[]>('packages');
+	return packages;
+}

packages/gui/src/libs/stores.ts

@@ -1,3 +1,15 @@
-import { writable } from "svelte/store";
+import { writable } from 'svelte/store';
+import type { Package } from './types';
+
+import { getPackages } from '@api';
 
 export const backLink = writable<string>('/');
+
+export const packages = writable<Package[]>([]);
+
+export const initializePackages = async () => {
+	console.log("getting packages");
+	const newPackages = await getPackages();
+	console.log("got packages", newPackages);
+	packages.set(newPackages);
+};

packages/gui/src/libs/types.ts

@@ -1,10 +1,14 @@
-export interface S3Package {
+export interface Package {
-    slug: string,
+	slug: string;
-    version: string,
+	version: string;
-    full_name: string,
+	full_name: string;
-    name: string,
+	name: string;
-    maintainer: string,
+	maintainer: string;
-    homepage: string,
+	homepage: string;
-    // key: string,
+	last_modified: Date | 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

@@ -1,11 +1,11 @@
 <!-- home / discover / welcome page -->
 <script lang="ts">
-    import "$appcss";
+	import '$appcss';
 	import NavBar from '$components/NavBar/NavBar.svelte';
 
 	import { backLink as backLinkStore } from '$libs/stores';
 
-    let backLink: string = '';
+	let backLink = '';
 	backLinkStore.subscribe((v) => {
 		backLink = v;
 	});
@@ -21,9 +21,9 @@
 				<a href={backLink}>back</a>
 			</header>
 		{/if}
-        <figure></figure>
+		<figure />
 		<div>
-            <slot></slot>
+			<slot />
 		</div>
 	</section>
 </div>
@@ -59,7 +59,7 @@
 		left: 0px;
 		width: 100%;
 		height: 50px;
-        border-bottom: #CCC 1px solid;
+		border-bottom: #ccc 1px solid;
 	}
 
 	slot {

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

@@ -1,14 +1,13 @@
 <!-- home / discover / welcome page -->
 <script lang="ts">
-    import "$appcss";
+	import '$appcss';
 	import { backLink } from '$libs/stores';
-    import PageHeader from "$components/PageHeader/PageHeader.svelte";
+	import PageHeader from '$components/PageHeader/PageHeader.svelte';
-    import FeaturedPackages from "$components/FeaturedPackages/FeaturedPackages.svelte";
+	import FeaturedPackages from '$components/FeaturedPackages/FeaturedPackages.svelte';
-    import GettingStarted from "$components/GettingStarted/GettingStarted.svelte";
+	import GettingStarted from '$components/GettingStarted/GettingStarted.svelte';
 	backLink.set('');
 </script>
 
-
 <div>
 	<PageHeader>Discover</PageHeader>
 	<section>

packages/gui/src/routes/cli/+page.svelte

@@ -1,13 +1,12 @@
 <script>
-    import "$appcss";
+	import '$appcss';
-    import PageHeader from "$components/PageHeader/PageHeader.svelte";
+	import PageHeader from '$components/PageHeader/PageHeader.svelte';
-    import CliBanner from "$components/CliBanner/CliBanner.svelte";
+	import CliBanner from '$components/CliBanner/CliBanner.svelte';
-    import BigBlackSpace from "$components/BigBlackSpace/BigBlackSpace.svelte";
+	import BigBlackSpace from '$components/BigBlackSpace/BigBlackSpace.svelte';
 	import { backLink } from '$libs/stores';
 	backLink.set('/');
 </script>
 
-
 <div>
 	<PageHeader>INSTALL TEA</PageHeader>
 

packages/gui/src/routes/documentation/+page.svelte

@@ -1,13 +1,12 @@
 <script>
-    import "$appcss";
+	import '$appcss';
-    import PageHeader from "$components/PageHeader/PageHeader.svelte";
+	import PageHeader from '$components/PageHeader/PageHeader.svelte';
-    import FeaturedCourses from "$components/FeaturedCourses/FeaturedCourses.svelte";
+	import FeaturedCourses from '$components/FeaturedCourses/FeaturedCourses.svelte';
-    import EssentialWorkshops from "$components/EssentialWorkshops/EssentialWorkshops.svelte";
+	import EssentialWorkshops from '$components/EssentialWorkshops/EssentialWorkshops.svelte';
 	import { backLink } from '$libs/stores';
 	backLink.set('/');
 </script>
 
-
 <div>
 	<PageHeader>Documentation</PageHeader>
 

packages/gui/src/routes/others/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { invoke } from '@tauri-apps/api/tauri'
+	import { invoke } from '@tauri-apps/api/tauri';
 	import Button from '@tea/ui/Button/Button.svelte';
 	let pkg = '';
 	async function installPackage() {
@@ -8,6 +8,6 @@
 </script>
 
 <h1>Others</h1>
-<input bind:value={pkg}>
+<input bind:value={pkg} />
-<Button on:click={installPackage} label="install package"></Button>
+<Button on:click={installPackage} label="install package" />
 <a href="/">Back</a>

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

@@ -1,12 +1,11 @@
 <script>
-    import "$appcss";
+	import '$appcss';
-    import PageHeader from "$components/PageHeader/PageHeader.svelte";
+	import PageHeader from '$components/PageHeader/PageHeader.svelte';
-    import SearchPackages from "$components/SearchPackages/SearchPackages.svelte";
+	import SearchPackages from '$components/SearchPackages/SearchPackages.svelte';
 	import { backLink } from '$libs/stores';
 	backLink.set('/');
 </script>
 
-
 <div>
 	<PageHeader>Packages</PageHeader>
 	<SearchPackages />

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

@@ -1,6 +1,6 @@
 <script>
-    import "$appcss";
+	import '$appcss';
-    import PageHeader from "$components/PageHeader/PageHeader.svelte";
+	import PageHeader from '$components/PageHeader/PageHeader.svelte';
 	import { backLink } from '$libs/stores';
 	import PackageBanner from '$components/PackageBanner/PackageBanner.svelte';
 	import PackageReviews from '$components/PackageReviews/PackageReviews.svelte';

packages/gui/src/routes/profile/+page.svelte

@@ -1,16 +1,14 @@
 <script>
-    import "$appcss";
+	import '$appcss';
-    import PageHeader from "$components/PageHeader/PageHeader.svelte";
+	import PageHeader from '$components/PageHeader/PageHeader.svelte';
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+	import ProfileBanner from '$components/ProfileBanner/ProfileBanner.svelte';
-    import ProfileBanner from "$components/ProfileBanner/ProfileBanner.svelte";
+	import Preflight from '$components/Preflight/Preflight.svelte';
-    import Preflight from "$components/Preflight/Preflight.svelte";
+	import Badges from '$components/Badges/Badges.svelte';
-    import Badges from "$components/Badges/Badges.svelte";
+	import InstalledPackages from '$components/InstalledPackages/InstalledPackages.svelte';
-    import InstalledPackages from "$components/InstalledPackages/InstalledPackages.svelte";
 	import { backLink } from '$libs/stores';
 	backLink.set('/');
 </script>
 
-
 <div>
 	<PageHeader>PROFILE</PageHeader>
 
@@ -30,5 +28,4 @@
 	<section class="mt-8">
 		<InstalledPackages />
 	</section>
-
 </div>

packages/gui/svelte.config.js

@@ -7,17 +7,17 @@ const config = {
 	// for more information about preprocessors
 	preprocess: [
 		preprocess({
-			postcss: true,
+			postcss: true
 		})
 	],
 	kit: {
 		adapter: adapter({
 			pages: 'build',
 			assets: 'build',
-			fallback: 'app.html',
+			fallback: 'app.html'
 		}),
 		alias: {
-			'@tea/ui/*': '../ui/src/*',
+			'@tea/ui/*': '../ui/src/*'
 		}
 		// ssr: false,
 		// hydrate the <div id="svelte"> element in src/app.html

packages/gui/tailwind.config.cjs

@@ -1,10 +1,7 @@
 /** @type {import('tailwindcss').Config} */
-const { theme } = require('@tea/ui/tailwind.config.cjs')
+const { theme } = require('@tea/ui/tailwind.config.cjs');
 module.exports = {
-  content: [
+	content: ['./src/**/*.{html,svelte,ts,js}', '../ui/src/**/*.{html,svelte,ts,js}'],
-    './src/**/*.{html,svelte,ts,js}',
-    '../ui/src/**/*.{html,svelte,ts,js}'
-  ],
 	theme,
-  plugins: [],
+	plugins: []
-}
+};

packages/gui/tsconfig.json

@@ -12,11 +12,11 @@
 		"paths": {
 			"$appcss": ["src/app.css"],
 			"$libs/*": ["src/libs/*"],
-			"@api": ["src/lib/api.ts"],
+			"@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
 	//
 	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes

packages/gui/vite.config.ts

@@ -2,14 +2,21 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import type { UserConfig } from 'vite';
 import path from 'path';
 
+const isMock = process.env.BUILD_FOR === 'preview';
+
 const config: UserConfig = {
 	plugins: [sveltekit()],
 	resolve: {
 		alias: {
 			'@tea/ui/*': path.resolve('../ui/src/*'),
+			// this dynamic-ish static importing is followed by the svelte build
+			// but for vscode editing intellisense tsconfig.json is being used
+			'@api': isMock ?
+				path.resolve('src/libs/api/mock.ts') :
+				path.resolve('src/libs/api/tauri.ts'),
 			$components: path.resolve('./src/components'),
 			$libs: path.resolve('./src/libs'),
-			$appcss: path.resolve('./src/app.css'),
+			$appcss: path.resolve('./src/app.css')
 		}
 	}
 };

packages/ui/.eslintrc.cjs

@@ -1,13 +1,20 @@
 module.exports = {
 	root: true,
 	parser: '@typescript-eslint/parser',
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier', 'plugin:storybook/recommended'],
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'prettier',
+		'plugin:storybook/recommended'
+	],
 	plugins: ['svelte3', '@typescript-eslint'],
 	ignorePatterns: ['*.cjs'],
-  overrides: [{
+	overrides: [
+		{
 			files: ['*.svelte'],
 			processor: 'svelte3/svelte3'
-  }],
+		}
+	],
 	settings: {
 		'svelte3/typescript': () => require('typescript')
 	},

packages/ui/.prettierrc

@@ -1,4 +1,5 @@
 {
+	"tabWidth": 2,
 	"useTabs": true,
 	"singleQuote": true,
 	"trailingComma": "none",

packages/ui/.storybook/main.cjs

@@ -1,19 +1,16 @@
 const path = require('path');
 module.exports = {
-  "stories": [
+	stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
-    "../src/**/*.stories.mdx",
+	addons: [
-    "../src/**/*.stories.@(js|jsx|ts|tsx|svelte)"
+		'@storybook/addon-links',
+		'@storybook/addon-essentials',
+		'@storybook/addon-interactions'
 	],
-  "addons": [
+	framework: {
-    "@storybook/addon-links",
+		name: '@storybook/svelte-vite',
-    "@storybook/addon-essentials",
+		options: {}
-    "@storybook/addon-interactions"
-  ],
-  "framework": {
-    "name": "@storybook/svelte-vite",
-    "options": {}
 	},
-  "docs": {
+	docs: {
-    "docsPage": true
+		docsPage: true
-  }
 	}
+};

packages/ui/.storybook/preview.js

@@ -1,9 +1,9 @@
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+	actions: { argTypesRegex: '^on[A-Z].*' },
 	controls: {
 		matchers: {
 			color: /(background|color)$/i,
-      date: /Date$/,
+			date: /Date$/
-    },
-  },
 		}
+	}
+};

packages/ui/README.md

@@ -1,4 +1,5 @@
 # @tea/ui
+
 Isolated set of UI elements/components that can be reused across all svelte related apps of tea. Components here have to be maintained as much as possible as a [dumb/presentational components](https://medium.com/@thejasonfile/dumb-components-and-smart-components-e7b33a698d43).
 
 ## Developing
@@ -11,10 +12,12 @@ $ pnpm dev
 ```
 
 ## Todo
+
 [] setup a scaffolding script to make it easier making elements
 
 ## Design System
 
 This library is dependent on the following
+
 - [svelte](https://svelte.dev/)
 - [tailwind](https://tailwindcss.com/)

packages/ui/postcss.config.cjs

@@ -1,6 +1,6 @@
 module.exports = {
 	plugins: {
 		tailwindcss: {},
-    autoprefixer: {},
+		autoprefixer: {}
-  },
 	}
+};

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

@@ -9,8 +9,8 @@ export default {
 		Component: Button,
 		props: args,
 		on: {
-      click: args.onClick,
+			click: args.onClick
-    },
+		}
 	}),
 	argTypes: {
 		backgroundColor: { control: 'color' },
@@ -19,35 +19,35 @@ export default {
 		primary: { control: 'boolean' },
 		size: {
 			control: { type: 'select' },
-      options: ['small', 'medium', 'large'],
+			options: ['small', 'medium', 'large']
-    },
+		}
-  },
+	}
 };
 
 // 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',
+		label: 'Button'
-  },
+	}
 };
 
 export const Secondary = {
 	args: {
-    label: 'Button',
+		label: 'Button'
-  },
+	}
 };
 
 export const Large = {
 	args: {
 		size: 'large',
-    label: 'Button',
+		label: 'Button'
-  },
+	}
 };
 
 export const Small = {
 	args: {
 		size: 'small',
-    label: 'Button',
+		label: 'Button'
-  },
+	}
 };

packages/ui/src/Button/Button.svelte

@@ -1,23 +1,24 @@
 <script type="ts">
 	import './button.css';
 	import { createEventDispatcher } from 'svelte';
+
 	/**
 	 * Is this the principal call to action on the page?
 	 */
-  export let primary:boolean = false;
+	export let primary = false;
 
 	/**
 	 * What background color to use
 	 */
-  export let backgroundColor:string = '';
+	export let backgroundColor = '';
 	/**
 	 * How large should the button be?
 	 */
-  export let size:string = 'medium';
+	export let size: 'large' | 'medium' | 'small' = 'medium';
 	/**
 	 * Button contents
 	 */
-  export let label:string = '';
+	export let label = '';
 
 	$: mode = primary ? 'storybook-button--primary bg-primary' : 'storybook-button--secondary';
 

packages/ui/src/Button/button.css

@@ -1,4 +1,4 @@
-@import "../app.css";
+@import '../app.css';
 
 .storybook-button {
 	font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

packages/ui/src/Header/Header.stories.ts

@@ -11,26 +11,26 @@ export default {
 		on: {
 			login: args.onLogin,
 			logout: args.onLogout,
-      createAccount: args.onCreateAccount,
+			createAccount: args.onCreateAccount
-    },
+		}
 	}),
 	parameters: {
 		// More on how to position stories at: https://storybook.js.org/docs/7.0/svelte/configure/story-layout
-    layout: 'fullscreen',
+		layout: 'fullscreen'
 	},
 	argTypes: {
 		onLogin: { action: 'onLogin' },
 		onLogout: { action: 'onLogout' },
-    onCreateAccount: { action: 'onCreateAccount' },
+		onCreateAccount: { action: 'onCreateAccount' }
-  },
+	}
 };
 
 export const LoggedIn = {
 	args: {
 		user: {
-      name: 'Jane Doe',
+			name: 'Jane Doe'
-    },
+		}
-  },
+	}
 };
 
 export const LoggedOut = {};

packages/ui/src/Header/Header.svelte

@@ -26,10 +26,12 @@
 				<g fill="none" fill-rule="evenodd">
 					<path
 						d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
-            fill="#FFF" />
+						fill="#FFF"
+					/>
 					<path
 						d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
-            fill="#555AB9" />
+						fill="#555AB9"
+					/>
 					<path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
 				</g>
 			</svg>

packages/ui/src/Header/header.css

@@ -1,4 +1,4 @@
-@import "../app.css";
+@import '../app.css';
 
 .wrapper {
 	font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

packages/ui/src/Page/Page.stories.ts

@@ -6,8 +6,8 @@ export default {
 	component: Page,
 	parameters: {
 		// More on how to position stories at: https://storybook.js.org/docs/7.0/svelte/configure/story-layout
-    layout: 'fullscreen',
+		layout: 'fullscreen'
-  },
+	}
 };
 export const LoggedOut = {};
 
@@ -15,13 +15,13 @@ export const LoggedOut = {};
 export const LoggedIn = {
 	render: (args) => ({
 		Component: Page,
-    props: args,
+		props: args
 	}),
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
 		const loginButton = await canvas.getByRole('button', {
-      name: /Log in/i,
+			name: /Log in/i
 		});
 		await userEvent.click(loginButton);
-  },
+	}
 };

packages/ui/src/Page/Page.svelte

@@ -6,7 +6,12 @@
 </script>
 
 <article>
-  <Header {user} on:login={() => user = { name: 'Jane Doe' }} on:logout={() => user = null} on:createAccount={() => user = { name: 'Jane Doe' }} />
+	<Header
+		{user}
+		on:login={() => (user = { name: 'Jane Doe' })}
+		on:logout={() => (user = null)}
+		on:createAccount={() => (user = { name: 'Jane Doe' })}
+	/>
 
 	<section>
 		<h2>Pages in Storybook</h2>
@@ -15,7 +20,8 @@
 			<a
 				href="https://blog.hichroma.com/component-driven-development-ce1109d56c8e"
 				target="_blank"
-        rel="noopener noreferrer">
+				rel="noopener noreferrer"
+			>
 				<strong>component-driven</strong>
 			</a>
 			process starting with atomic components and ending with pages.
@@ -54,7 +60,8 @@
             01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0
             010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
 						id="a"
-            fill="#999" />
+						fill="#999"
+					/>
 				</g>
 			</svg>
 			Viewports addon in the toolbar

packages/ui/src/Page/page.css

@@ -1,4 +1,4 @@
-@import "../app.css";
+@import '../app.css';
 
 section {
 	font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

packages/ui/src/app.css

@@ -2,14 +2,12 @@
 @tailwind components;
 @tailwind utilities;
 
-
 @font-face {
-    font-family: "pp-neue-machina";
+	font-family: 'pp-neue-machina';
-    src: url("../static/fonts/PPNeueMachina-InktrapLight.woff");
+	src: url('../static/fonts/PPNeueMachina-InktrapLight.woff');
 }
 
 @font-face {
-    font-family: "sono";
+	font-family: 'sono';
-    src: url("../static/fonts/Sono-Light.woff2");
+	src: url('../static/fonts/Sono-Light.woff2');
 }
-  

packages/ui/svelte.config.js

@@ -6,7 +6,7 @@ const config = {
 	// Consult https://github.com/sveltejs/svelte-preprocess
 	// for more information about preprocessors
 	preprocess: preprocess({
-		postcss: true,
+		postcss: true
 	}),
 
 	kit: {

packages/ui/tailwind.config.cjs

@@ -12,14 +12,14 @@ module.exports = {
 			green: primary,
 			black,
 			white,
-      gray,
+			gray
 		},
 		extend: {
 			fontFamily: {
 				sono: ['sono', 'sans-serif'],
 				machina: ['pp-neue-machina', 'sans-serif']
 			}
-    },
-  },
-  plugins: [],
 		}
+	},
+	plugins: []
+};

packages/ui/tsconfig.json

@@ -2,18 +2,11 @@
 	"compilerOptions": {
 		"baseUrl": "..",
 		"paths": {},
-		"rootDirs": [
+		"rootDirs": ["..", "./types"],
-			"..",
-			"./types"
-		],
 		"importsNotUsedAsValues": "error",
 		"isolatedModules": true,
 		"preserveValueImports": true,
-		"lib": [
+		"lib": ["esnext", "DOM", "DOM.Iterable"],
-			"esnext",
-			"DOM",
-			"DOM.Iterable"
-		],
 		"moduleResolution": "node",
 		"module": "esnext",
 		"target": "esnext",
@@ -40,8 +33,5 @@
 		"../tests/**/*.ts",
 		"../tests/**/*.svelte"
 	],
-	"exclude": [
+	"exclude": ["../node_modules/**", "./[!ambient.d.ts]**"]
-		"../node_modules/**",
-		"./[!ambient.d.ts]**"
-	]
 }

pnpm-lock.yaml

@@ -27,6 +27,7 @@ importers:
       svelte: ^3.49.0
       svelte-check: ^2.8.0
       svelte-preprocess: ^4.10.7
+      svelte2tsx: ^0.5.20
       tailwindcss: ^3.2.4
       tslib: ^2.3.1
       typescript: ^4.7.4
@@ -38,7 +39,7 @@ importers:
       '@playwright/test': 1.25.0
       '@sveltejs/adapter-auto': 1.0.0-next.89
       '@sveltejs/adapter-static': 1.0.0-next.48
-      '@sveltejs/kit': 1.0.0-next.561_svelte@3.53.1+vite@3.2.4
+      '@sveltejs/kit': 1.0.0-next.562_svelte@3.53.1+vite@3.2.4
       '@tauri-apps/cli': 1.2.0
       '@tea/ui': link:../ui
       '@typescript-eslint/eslint-plugin': 5.43.0_wze2rj5tow7zwqpgbdx2buoy3m
@@ -53,6 +54,7 @@ importers:
       svelte: 3.53.1
       svelte-check: 2.9.2_mocwzvuqzrhb37u7s4hjvvzl3i
       svelte-preprocess: 4.10.7_mvbmsfnr3ibpjsbee6imjcb33m
+      svelte2tsx: 0.5.20_7dvewpees4iyn2tkw2qzal77a4
       tailwindcss: 3.2.4
       tslib: 2.4.1
       typescript: 4.9.3
@@ -3028,6 +3030,34 @@ packages:
       - supports-color
     dev: true
 
+  /@sveltejs/kit/1.0.0-next.562_svelte@3.53.1+vite@3.2.4:
+    resolution: {integrity: sha512-VgJzjtfjVLW/4A/vDtURc10PrS3bb/N62LHzqLZcUNb5+eN4a0k5cayC7Hz2tmtvrb2Qsg+piEAogvqjKBxrOg==}
+    engines: {node: '>=16.14'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      svelte: ^3.44.0
+      vite: ^3.2.0
+    dependencies:
+      '@sveltejs/vite-plugin-svelte': 1.3.1_svelte@3.53.1+vite@3.2.4
+      '@types/cookie': 0.5.1
+      cookie: 0.5.0
+      devalue: 4.2.0
+      kleur: 4.1.5
+      magic-string: 0.26.7
+      mime: 3.0.0
+      sade: 1.8.1
+      set-cookie-parser: 2.5.1
+      sirv: 2.0.2
+      svelte: 3.53.1
+      tiny-glob: 0.2.9
+      undici: 5.12.0
+      vite: 3.2.4
+    transitivePeerDependencies:
+      - diff-match-patch
+      - supports-color
+    dev: true
+
   /@sveltejs/package/1.0.0-next.1_7dvewpees4iyn2tkw2qzal77a4:
     resolution: {integrity: sha512-U8XBk6Cfy8MjKG41Uyo+fqBpdhu7xUSnhiCNoODRaAtWV02RZoLh+McXrsxEvqi/ycgymctlhJhssqDnD+E+FA==}
     engines: {node: '>=16.9'}