Merge pull request #5 from projectatomic/feature/catalog-page

feat: adding catalog page

README.md

@@ -2,4 +2,4 @@
 
 Run in development mode:
 
-`yarn watch --extension-folder ~/git/projectatomic/studio-extension`
+`yarn watch --extension-folder ~/git/projectatomic/packages/backend`

package.json

@@ -23,6 +23,7 @@
     "@vitest/coverage-v8": "^1.1.0",
     "concurrently": "^8.2.2",
     "eslint": "^8.56.0",
+    "autoprefixer": "^10.4.16",
     "eslint-import-resolver-custom-alias": "^1.3.2",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-etc": "^2.0.3",

packages/backend/package.json

@@ -22,8 +22,8 @@
     "format:fix": "prettier --write \"src/**/*.ts\"",
     "watch": "vite --mode development build -w"
   },
-  "dependencies": {},
-  "devDependencies": {
-    "@podman-desktop/api": "^1.6.3"
-  }
+  "dependencies": {
+    "simple-git": "^3.22.0"
+  },
+  "devDependencies": {}
 }

packages/frontend/package.json

@@ -12,8 +12,17 @@
     "format:fix": "prettier --write \"src/**/*.ts\"",
     "watch": "vite --mode development build -w"
   },
-  "dependencies": {},
+  "dependencies": {
+    "tinro": "^0.6.12"
+  },
   "devDependencies": {
+    "svelte-fa": "^3.0.4",
+    "svelte-markdown": "^0.4.1",
+    "@tailwindcss/typography": "^0.5.10",
+    "@fortawesome/fontawesome-free": "^6.5.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@sveltejs/vite-plugin-svelte": "3.0.1",
     "@testing-library/dom": "^9.3.3",
     "@testing-library/svelte": "^4.0.5",
@@ -22,7 +31,8 @@
     "@typescript-eslint/eslint-plugin": "6.15.0",
     "svelte": "4.2.8",
     "svelte-preprocess": "^5.1.3",
-    "tailwindcss": "^3.4.0"
-
+    "tailwindcss": "^3.4.0",
+    "postcss": "^8.4.33",
+    "postcss-load-config": "^5.0.2"
   }
 }

packages/frontend/postcss.config.cjs

@@ -0,0 +1,25 @@
+/**********************************************************************
+ * Copyright (C) 2022 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    'postcss-import': {},
+    autoprefixer: {},
+  },
+};

packages/frontend/src/App.svelte

@@ -1,29 +1,77 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
-import './app.css';
+  import './app.css';
+import { onMount } from 'svelte';
+import '@fortawesome/fontawesome-free/css/all.min.css';
+import { router } from 'tinro';
+import Route from '/@/Route.svelte';
+import Navigation from '/@/lib/Navigation.svelte';
+  import Dashboard from '/@/pages/Dashboard.svelte';
+  import Recipes from '/@/pages/Recipes.svelte';
+  import Environments from '/@/pages/Environments.svelte';
+  import Preferences from '/@/pages/Preferences.svelte';
+  import Registries from '/@/pages/Registries.svelte';
+  import Models from '/@/pages/Models.svelte';
+  import Recipe from '/@/pages/Recipe.svelte';
+
+router.mode.hash();
 
 onMount(() => {
   const podmanDesktopApi = acquirePodmanDesktopApi();
 
-      // Update state
-      podmanDesktopApi.setState({ studioValue: 1 });
-
+  // Update state
+  podmanDesktopApi.setState({ studioValue: 1 });
 
-      // Handle messages sent from the extension to the webview
+  // Handle messages sent from the extension to the webview
   window.addEventListener('message', event => {
     console.log('received the message from the backend with data:', event.data);
   });
 
-
   // after 20s, send a message to the backend
   setTimeout(() => {
     podmanDesktopApi.postMessage({ message: 'Hello from the webview!' });
   }, 20000);
-
 });
 </script>
 
 
-<div>
-    <h1>Hello Studio World !</h1>
-</div>
+<Route path="/*" breadcrumb="Home" let:meta>
+  <main class="flex flex-col w-screen h-screen overflow-hidden bg-charcoal-700">
+    <div class="flex flex-row w-full h-full overflow-hidden">
+      <Navigation meta="{meta}"/>
+
+      <!-- Dashboard -->
+      <Route path="/" breadcrumb="IA Studio Dashboard Page">
+        <Dashboard/>
+      </Route>
+
+      <!-- Recipes Catalog -->
+      <Route path="/recipes" breadcrumb="Recipes Catalog">
+        <Recipes/>
+      </Route>
+
+      <!-- Environments -->
+      <Route path="/environments" breadcrumb="Environments">
+        <Environments/>
+      </Route>
+
+      <!-- Models -->
+      <Route path="/models" breadcrumb="Models">
+        <Models/>
+      </Route>
+
+      <!-- Registries -->
+      <Route path="/registries" breadcrumb="Registries">
+        <Registries/>
+      </Route>
+
+      <!-- Preferences -->
+      <Route path="/preferences" breadcrumb="Preferences">
+        <Preferences/>
+      </Route>
+
+      <Route path="/recipes/:id/*" breadcrumb="Recipe Details" let:meta>
+        <Recipe recipeId="{meta.params.id}"/>
+      </Route>
+    </div>
+  </main>
+</Route>

packages/frontend/src/Route.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+import { createRouteObject } from 'tinro/dist/tinro_lib';
+import type { TinroRouteMeta } from 'tinro';
+
+export let path = '/*';
+export let fallback = false;
+export let redirect = false;
+export let firstmatch = false;
+export let breadcrumb: string | undefined = undefined;
+
+let showContent = false;
+let params: Record<string, string> = {};
+let meta: TinroRouteMeta = {} as TinroRouteMeta;
+
+const route = createRouteObject({
+  fallback,
+  onShow() {
+    showContent = true;
+  },
+  onHide() {
+    showContent = false;
+  },
+  onMeta(newMeta: TinroRouteMeta) {
+    meta = newMeta;
+    params = meta.params;
+  },
+});
+
+$: route.update({
+  path,
+  redirect,
+  firstmatch,
+  breadcrumb,
+});
+</script>
+
+{#if showContent}
+  <slot params="{params}" meta="{meta}" />
+{/if}

packages/frontend/src/lib/Card.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+import Fa from 'svelte-fa';
+import type { IconDefinition } from '@fortawesome/free-regular-svg-icons';
+
+export let title: string | undefined = undefined;
+export let classes: string = "";
+
+export let href: string | undefined = undefined;
+
+export let icon: IconDefinition | undefined = undefined
+
+export let primaryBackground: string = "bg-charcoal-800"
+</script>
+
+<a class="no-underline" href="{href}">
+  <div class="{classes} rounded-md flex-nowrap overflow-hidden" role="region">
+    <div class="flex flex-row">
+      <div class="flex flex-row items-center">
+        {#if icon}
+          <div class="{primaryBackground} rounded-full w-8 h-8 flex items-center justify-center mr-3">
+            <Fa size="20" class="text-purple-500 cursor-pointer" icon="{icon}" />
+          </div>
+        {/if}
+        {#if title}
+          <div class="flex flex-col text-gray-400 whitespace-nowrap" aria-label="context-name">
+            <div class="flex flex-row items-center">
+              {title}
+            </div>
+          </div>
+        {/if}
+      </div>
+    </div>
+    <div class="flex overflow-hidden" role="region" aria-label="content">
+      <slot name="content" />
+    </div>
+  </div>
+</a>
+

packages/frontend/src/lib/MarkdownRenderer.svelte

@@ -0,0 +1,30 @@
+<script>
+  import SvelteMarkdown from 'svelte-markdown'
+  const source = `## This file is string markdown
+
+\`\`\`
+This would be pulled from a git repository (for now it is mocked)
+\`\`\`
+This is a paragraph.
+
+* This is a list
+* With two items
+  1. And a sublist
+  2. That is ordered
+    * With another
+    * Sublist inside
+
+| And this is | A table |
+|-------------|---------|
+| With two    | columns |
+
+## _does images are working ?_
+![MarineGEO circle logo](https://marinegeo.github.io/assets/img/MarineGEO_logo.png)
+`
+
+</script>
+
+<article class="prose min-w-full">
+  <SvelteMarkdown {source} />
+</article>
+

packages/frontend/src/lib/NavPage.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+export let title: string;
+export let searchTerm = '';
+export let searchEnabled = true;
+</script>
+
+<div class="flex flex-col w-full h-full shadow-pageheader">
+  <div class="flex flex-col w-full h-full pt-4" role="region" aria-label="{title}">
+    <div class="flex pb-2 px-5" role="region" aria-label="header">
+
+        <div class="flex flex-col">
+          <h1 class="text-xl first-letter:uppercase">{title}</h1>
+          <slot name="subtitle" />
+        </div>
+
+        <div class="flex flex-1 justify-end">
+          {#if searchEnabled}
+            <div class="flex flex-row" role="region" aria-label="search">
+              <div class="pl-5 lg:w-[35rem] w-[22rem] flex justify-end items-center">
+                <div class="w-full flex items-center bg-charcoal-800 text-gray-700 rounded-sm">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="w-5 h-5 ml-2 mr-2"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor">
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                  </svg>
+                  <input
+                    bind:value="{searchTerm}"
+                    type="text"
+                    name="containerSearchName"
+                    placeholder="Search {title}...."
+                    class="w-full py-2 outline-none text-sm bg-charcoal-800 rounded-sm text-gray-700 placeholder-gray-700" />
+                </div>
+              </div>
+            </div>
+          {/if}
+        </div>
+      </div>
+
+    <div class="flex flex-row px-2 border-b border-charcoal-400">
+      <slot name="tabs" />
+    </div>
+    <div class="flex w-full h-full overflow-auto" role="region" aria-label="content">
+      <slot name="content" />
+    </div>
+  </div>
+</div>

packages/frontend/src/lib/Navigation.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+import SettingsNavItem from '/@/lib/SettingsNavItem.svelte';
+import type { TinroRouteMeta } from 'tinro';
+import Fa from 'svelte-fa';
+import { faBrain } from '@fortawesome/free-solid-svg-icons';
+
+export let meta: TinroRouteMeta;
+</script>
+
+<nav
+  class="z-1 w-leftsidebar min-w-leftsidebar shadow flex-col justify-between flex transition-all duration-500 ease-in-out bg-charcoal-800"
+  aria-label="PreferencesNavigation">
+  <div class="flex items-center">
+    <div class="pt-4 px-5 mb-10 flex items-center">
+      <Fa size="24" class="text-purple-500 cursor-pointer mr-4" icon="{faBrain}" />
+      <p class="text-xl first-letter:uppercase">AI Studio</p>
+    </div>
+  </div>
+  <div class="h-full overflow-hidden hover:overflow-y-auto" style="margin-bottom:auto">
+
+    <SettingsNavItem title="Recipe Catalog" href="/recipes" bind:meta="{meta}" />
+
+    <SettingsNavItem title="Environments" href="/environments" bind:meta="{meta}" />
+
+    <SettingsNavItem title="Models" href="/models" bind:meta="{meta}" />
+
+    <SettingsNavItem title="Registries" href="/registries" bind:meta="{meta}" />
+
+    <SettingsNavItem title="Preferences" href="/preferences" bind:meta="{meta}" />
+  </div>
+</nav>