From 5b5a2eb7c4a2e291be83b9157f6b66cff5d2b0c6 Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Mon, 14 Oct 2024 15:44:28 +0200
Subject: [PATCH 1/2] feat(tailwind-components): Update header for design

- new data-explorer design has left aligned header
- update breadcrumbs and pageheader with ts types and fix issues
- add option to left align header
- update breadcrumbs for ui app the match design ( [schema, table])
- add playground story for breadcrumbs
---
 .../components/BreadCrumbs.vue                | 28 ++++++++-------
 .../components/PageHeader.vue                 | 34 ++++++++++---------
 .../components/content/ContentBlock.vue       |  2 +-
 .../pages/BreadCrumbs.story.vue               | 28 +++++++++++++++
 apps/ui/pages/[schema]/[table]/index.vue      | 26 +++++++-------
 apps/ui/pages/[schema]/index.vue              |  9 ++---
 6 files changed, 76 insertions(+), 51 deletions(-)
 create mode 100644 apps/tailwind-components/pages/BreadCrumbs.story.vue

diff --git a/apps/tailwind-components/components/BreadCrumbs.vue b/apps/tailwind-components/components/BreadCrumbs.vue
index f10d32a751..3e524fb5b1 100644
--- a/apps/tailwind-components/components/BreadCrumbs.vue
+++ b/apps/tailwind-components/components/BreadCrumbs.vue
@@ -1,15 +1,16 @@
-<script setup>
-defineProps({
-  crumbs: {
-    type: Object,
-    default: [],
-    required: false,
-  },
-  current: {
-    type: String,
-    required: false,
-  },
-});
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    crumbs?: Record<string, string>;
+    current?: string | undefined;
+    align?: "left" | "center";
+  }>(),
+  {
+    crumbs: () => ({}),
+    current: undefined,
+    align: "center",
+  }
+);
 </script>
 
 <template>
@@ -24,7 +25,8 @@ defineProps({
     </a> -->
   </div>
   <nav
-    class="items-center justify-center hidden gap-3 tracking-widest xl:flex font-display text-heading-lg"
+    class="items-center hidden gap-3 tracking-widest xl:flex font-display text-heading-lg"
+    :class="{ 'justify-center': align === 'center' }"
   >
     <template v-for="(url, label, index) in crumbs" :key="label">
       <NuxtLink :to="url" class="text-breadcrumb hover:underline">{{
diff --git a/apps/tailwind-components/components/PageHeader.vue b/apps/tailwind-components/components/PageHeader.vue
index 36ab293202..944c8898ef 100644
--- a/apps/tailwind-components/components/PageHeader.vue
+++ b/apps/tailwind-components/components/PageHeader.vue
@@ -1,22 +1,21 @@
-<script setup>
+<script setup lang="ts">
 import { useSlots } from "vue";
 
 const slots = useSlots();
 
-defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-  description: { type: String },
-  icon: {
-    type: String,
-  },
-  truncate: {
-    type: Boolean,
-    default: true,
-  },
-});
+withDefaults(
+  defineProps<{
+    title: string;
+    description?: string;
+    icon?: string;
+    truncate?: boolean;
+    align?: "left" | "center";
+  }>(),
+  {
+    truncate: true,
+    align: "center",
+  }
+);
 </script>
 
 <template>
@@ -24,7 +23,10 @@ defineProps({
     <div class="mb-6" v-if="slots.prefix">
       <slot name="prefix"></slot>
     </div>
-    <div class="flex flex-col items-center text-title">
+    <div
+      class="flex flex-col text-title"
+      :class="{ 'items-center': align === 'center' }"
+    >
       <span class="mb-2 mt-2.5 xl:block hidden text-icon" v-if="icon">
         <BaseIcon :name="icon" :width="55" />
       </span>
diff --git a/apps/tailwind-components/components/content/ContentBlock.vue b/apps/tailwind-components/components/content/ContentBlock.vue
index 2364fe1366..5bffb4c002 100644
--- a/apps/tailwind-components/components/content/ContentBlock.vue
+++ b/apps/tailwind-components/components/content/ContentBlock.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 defineProps<{
-  title: string;
+  title?: string;
   description?: string;
 }>();
 </script>
diff --git a/apps/tailwind-components/pages/BreadCrumbs.story.vue b/apps/tailwind-components/pages/BreadCrumbs.story.vue
new file mode 100644
index 0000000000..92564bcd42
--- /dev/null
+++ b/apps/tailwind-components/pages/BreadCrumbs.story.vue
@@ -0,0 +1,28 @@
+<template>
+  <p class="pb-3">Default breadcrumbs, with 3 items</p>
+  <div>
+    <BreadCrumbs :crumbs="crumbs" />
+  </div>
+
+  <p class="pt-6 pb-3">Breadcrumbs aligined left</p>
+  <div>
+    <BreadCrumbs :crumbs="crumbs" align="left" />
+  </div>
+
+  <p class="pt-6 pb-3">Breadcrumbs with 'item 4' as current</p>
+  <div>
+    <BreadCrumbs :crumbs="crumbs" current="item 4" align="left" />
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute();
+interface Crumbs {
+  [key: string]: string;
+}
+
+const crumbs = ref<Crumbs>({});
+crumbs.value["item 1"] = route.path;
+crumbs.value["item 2"] = route.path;
+crumbs.value["item 3"] = route.path;
+</script>
diff --git a/apps/ui/pages/[schema]/[table]/index.vue b/apps/ui/pages/[schema]/[table]/index.vue
index a1e51a0de8..6d82a52b8f 100644
--- a/apps/ui/pages/[schema]/[table]/index.vue
+++ b/apps/ui/pages/[schema]/[table]/index.vue
@@ -86,27 +86,25 @@ function handleSettingsUpdate(settings: ITableSettings) {
 
   router.push({ query });
 }
+
+const crumbs = computed(() => {
+  let crumb: { [key: string]: string } = {};
+  crumb[schemaId] = `/${schemaId}`;
+  return crumb;
+});
+const current = computed(
+  () => tableMetaData.value?.label ?? tableMetaData.value?.id ?? ""
+);
 </script>
 <template>
   <Container>
-    <PageHeader :title="tableMetaData?.label">
+    <PageHeader :title="tableMetaData?.label ?? ''" align="left">
       <template #prefix>
-        <BreadCrumbs
-          :crumbs="{
-            databases: '/',
-            tables: `/${schemaId}`,
-            [tableMetaData?.label ||
-            tableMetaData?.id ||
-            '']: `/${schemaId}/${tableId}`,
-          }"
-        />
+        <BreadCrumbs :align="'left'" :crumbs="crumbs" :current="current" />
       </template>
     </PageHeader>
 
-    <ContentBlock
-      :title="tableMetaData?.label || tableMetaData?.id || ''"
-      :description="tableMetaData?.description"
-    >
+    <ContentBlock>
       <div v-if="status === 'pending'">Loading...</div>
       <div v-if="error">Error: {{ error }}</div>
       <!-- <pre v-if="data">{{ tableMetaData }}</pre> -->
diff --git a/apps/ui/pages/[schema]/index.vue b/apps/ui/pages/[schema]/index.vue
index 52d9073205..16a042905d 100644
--- a/apps/ui/pages/[schema]/index.vue
+++ b/apps/ui/pages/[schema]/index.vue
@@ -46,14 +46,9 @@ const ontologies = computed(
 </script>
 <template>
   <Container>
-    <PageHeader :title="`Tables in ${data?.data._schema.label}`">
+    <PageHeader :title="`Tables in ${data?.data._schema.label}`" align="left">
       <template #prefix>
-        <BreadCrumbs
-          :crumbs="{
-            databases: '/',
-            tables: `/${schema}`,
-          }"
-        />
+        <BreadCrumbs align="left" :current="data?.data._schema.label" />
       </template>
     </PageHeader>
 

From 61f2d1e77f1af1b90ea7910be8c00f739fa28661 Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Wed, 16 Oct 2024 10:27:11 +0200
Subject: [PATCH 2/2] set container padding as per design

---
 apps/tailwind-components/components/Container.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/tailwind-components/components/Container.vue b/apps/tailwind-components/components/Container.vue
index 4dfc01f104..652af58801 100644
--- a/apps/tailwind-components/components/Container.vue
+++ b/apps/tailwind-components/components/Container.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="max-w-lg mx-auto lg:px-5 px-0">
+  <section class="max-w-lg mx-auto lg:px-[30px] px-0">
     <slot></slot>
   </section>
 </template>