Merge pull request #182 from buggregator/dx/update-page-layouts

Dx/update page layouts
buggregator · Jun 29, 2024 · 94bb8f5 · 94bb8f5
2 parents 5b21818 + 8aad6e5
commit 94bb8f5
Show file tree

Hide file tree

Showing 36 changed files with 492 additions and 464 deletions.
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -14,7 +14,7 @@ const preview: Preview = {
 
       if (html) {
         const oldClass = html.classList.value
-        const newClass = parameters?.backgrounds.values.find(({ value }) => globals.backgrounds.value === value)?.class
+        const newClass = parameters?.backgrounds.values.find(({ value }) => globals?.backgrounds?.value === value)?.class
 
         if (newClass) {
           if (oldClass) {

diff --git a/app.vue b/app.vue
@@ -1,7 +1,5 @@
 <template>
-  <NuxtLayout>
-    <NuxtPage />
-  </NuxtLayout>
+  <NuxtPage />
 </template>
 
 <script lang="ts" setup>

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,37 +1,12 @@
 <script lang="ts" setup>
-import { storeToRefs } from "pinia";
-import { ref, onMounted } from "vue";
+import { onMounted } from "vue";
 import { LayoutSidebar } from "~/src/widgets/ui";
 import { useEvents } from "~/src/shared/lib/use-events";
-import { useSettings } from "~/src/shared/lib/use-settings";
 import SfdumpWrap from "~/src/shared/lib/vendor/dumper";
-import { useProfileStore, useSettingsStore } from "~~/src/shared/stores";
-import { version } from "../package.json";
 
-useSettingsStore();
 SfdumpWrap(window.document);
-const { profile } = storeToRefs(useProfileStore());
-
-const {
-  api: { getVersion },
-} = useSettings();
-
-const apiVersion = ref("");
-const clientVersion = ref(
-  !version || version === "0.0.1" ? "@dev" : `v${version}`
-);
-
-const getApiVersion = async () => {
-  const data = await getVersion();
-
-  apiVersion.value = String(data).match(/^[0-9.]+.*$/)
-    ? `v${data}`
-    : `@${data}`;
-};
 
 onMounted(() => {
-  getApiVersion();
-
   const { events } = useEvents();
 
   if (!events?.items?.value?.length) {
@@ -42,12 +17,15 @@ onMounted(() => {
 
 <template>
   <div class="main-layout">
-    <LayoutSidebar
-      class="main-layout__sidebar"
-      :api-version="apiVersion"
-      :client-version="clientVersion"
-      :profile="profile"
-    />
+    <div class="main-layout__sidebar">
+      <slot name="sidebar">
+        <LayoutSidebar />
+      </slot>
+    </div>
+
+    <div class="main-layout__header">
+      <slot name="header" />
+    </div>
 
     <div class="main-layout__content">
       <slot />
@@ -67,8 +45,13 @@ onMounted(() => {
   @include layout-sidebar;
 }
 
+.main-layout__header {
+  @include layout-head;
+}
+
 .main-layout__content {
-  @apply flex flex-col h-full flex-1 w-full min-h-screen absolute top-0 left-0 pl-10 md:pl-14 lg:pl-16;
+  @include layout-body;
+  @apply flex flex-col h-full flex-1 w-full min-h-screen absolute top-0 left-0;
 
   & > div {
     @apply flex flex-col h-full flex-1;

diff --git a/pages/http-dump/[id].vue b/pages/http-dump/[id].vue
@@ -54,37 +54,27 @@ onMounted(getEvent);
 </script>
 
 <template>
-  <main class="http-dump-event">
-    <PageEventHeader title="Http dumps" :event-id="eventId" />
+  <NuxtLayout>
+    <template #header>
+      <PageEventHeader title="Http dumps" :event-id="eventId" />
+    </template>
 
     <div v-if="isLoading && !event" class="http-dump-event__loading">
       <div></div>
       <div></div>
       <div></div>
     </div>
 
-    <div class="http-dump-event__body">
-      <HttpDumpPage v-if="event" :event="event" />
-    </div>
-  </main>
+    <HttpDumpPage v-if="event" :event="event" />
+  </NuxtLayout>
 </template>
 
 <style lang="scss" scoped>
 @import "src/assets/mixins";
 .http-dump-event {
-  @include layout;
-}
-
-.http-dump-event__head {
-  @include layout-head;
 }
 
 .http-dump-event__loading {
   @include loading;
-  @include layout-body;
-}
-
-.http-dump-event__body {
-  @include layout-body;
 }
 </style>
diff --git a/pages/http-dump/index.vue b/pages/http-dump/index.vue
@@ -1,8 +1,14 @@
 <script lang="ts" setup>
-import { PageLayout } from "~/src/widgets/ui/page-layout";
+import { PageHeader, PageLayout } from "~/src/widgets/ui";
 import { PAGE_TYPES } from "~/src/shared/constants";
 </script>
 
 <template>
-  <PageLayout :type="PAGE_TYPES.HTTP_DUMP" title="HttpDump" />
+  <NuxtLayout>
+    <template #header>
+      <PageHeader :type="PAGE_TYPES.HTTP_DUMP" title="Http-dump" />
+    </template>
+
+    <PageLayout :type="PAGE_TYPES.HTTP_DUMP" title="Http-dump" />
+  </NuxtLayout>
 </template>
diff --git a/pages/index.vue b/pages/index.vue
@@ -1,9 +1,14 @@
 <script lang="ts" setup>
-// eslint-disable-next-line @conarti/feature-sliced/public-api
-import { PageLayout } from "~/src/widgets/ui/page-layout";
+import { PageHeader, PageLayout } from "~/src/widgets/ui"; // eslint-disable-line @conarti/feature-sliced/public-api
 import { PAGE_TYPES } from "~/src/shared/constants";
 </script>
 
 <template>
-  <PageLayout :type="PAGE_TYPES.ALL_EVENTS" title="" />
+  <NuxtLayout>
+    <template #header>
+      <PageHeader :type="PAGE_TYPES.ALL_EVENTS" title="" />
+    </template>
+
+    <PageLayout :type="PAGE_TYPES.ALL_EVENTS" title="" />
+  </NuxtLayout>
 </template>
diff --git a/pages/inspector/[id].vue b/pages/inspector/[id].vue
@@ -53,37 +53,27 @@ onMounted(getEvent);
 </script>
 
 <template>
-  <main class="inspector-event">
-    <PageEventHeader title="Inspector" :event-id="eventId" />
+  <NuxtLayout>
+    <template #header>
+      <PageEventHeader title="Inspector" :event-id="eventId" />
+    </template>
 
     <div v-if="isLoading && !event" class="inspector-event__loading">
       <div></div>
       <div></div>
       <div></div>
     </div>
 
-    <div class="inspector-event__body">
-      <InspectorPage v-if="event" :event="event" />
-    </div>
-  </main>
+    <InspectorPage v-if="event" :event="event" />
+  </NuxtLayout>
 </template>
 
 <style lang="scss" scoped>
 @import "src/assets/mixins";
 .inspector-event {
-  @include layout;
-}
-
-.inspector-event__head {
-  @include layout-head;
 }
 
 .inspector-event__loading {
   @include loading;
-  @include layout-body;
-}
-
-.inspector-event__body {
-  @include layout-body;
 }
 </style>
diff --git a/pages/inspector/index.vue b/pages/inspector/index.vue
@@ -1,8 +1,14 @@
 <script lang="ts" setup>
-import { PageLayout } from "~/src/widgets/ui/page-layout";
+import { PageHeader, PageLayout } from "~/src/widgets/ui";
 import { PAGE_TYPES } from "~/src/shared/constants";
 </script>
 
 <template>
-  <PageLayout :type="PAGE_TYPES.INSPECTOR" title="Inspector" />
+  <NuxtLayout>
+    <template #header>
+      <PageHeader :type="PAGE_TYPES.INSPECTOR" title="Inspector" />
+    </template>
+
+    <PageLayout :type="PAGE_TYPES.INSPECTOR" title="Inspector" />
+  </NuxtLayout>
 </template>
diff --git a/pages/login.vue b/pages/login.vue
@@ -22,31 +22,33 @@ const redirect = async () => {
 </script>
 
 <template>
-  <div class="login-page">
-    <div class="login-form-container">
-      <IconSvg class="login-form--logo" name="logo" />
-      <div class="login-form">
-        <div class="login-form-left-block">
-          <h1 class="login-form--title">Welcome Back</h1>
-          <p class="pb-2 text-center text-sm text-gray-800">
-            Let's get you signed in.
-          </p>
-          <button class="login-form--button" @click="redirect">
-            <IconSvg class="w-6" name="lock" fill="currentcolor" />
-            Continue to SSO
-          </button>
+  <NuxtLayout>
+    <div class="login-page">
+      <div class="login-form-container">
+        <IconSvg class="login-form--logo" name="logo" />
+        <div class="login-form">
+          <div class="login-form-left-block">
+            <h1 class="login-form--title">Welcome Back</h1>
+            <p class="pb-2 text-center text-sm text-gray-800">
+              Let's get you signed in.
+            </p>
+            <button class="login-form--button" @click="redirect">
+              <IconSvg class="w-6" name="lock" fill="currentcolor" />
+              Continue to SSO
+            </button>
+          </div>
+          <div
+            class="login-form-right-block"
+            style="
+              background: url('/bg.jpg');
+              background-size: cover;
+              background-position: center center;
+            "
+          ></div>
         </div>
-        <div
-          class="login-form-right-block"
-          style="
-            background: url('/bg.jpg');
-            background-size: cover;
-            background-position: center center;
-          "
-        ></div>
       </div>
     </div>
-  </div>
+  </NuxtLayout>
 </template>
 
 <style lang="scss" scoped>

diff --git a/pages/monolog/[id].vue b/pages/monolog/[id].vue
@@ -49,34 +49,31 @@ onMounted(getEvent);
 </script>
 
 <template>
-  <main class="monolog">
-    <PageEventHeader title="Monolog" :event-id="eventId" />
+  <NuxtLayout>
+    <template #header>
+      <PageEventHeader title="Monolog" :event-id="eventId" />
+    </template>
 
     <div v-if="isLoading && !event" class="monolog__loading">
       <div></div>
       <div></div>
       <div></div>
     </div>
 
-    <div v-if="event" class="monolog__body">
+    <div v-if="event">
       <MonologPage :event="event" />
     </div>
-  </main>
+  </NuxtLayout>
 </template>
 
 <style lang="scss" scoped>
 @import "src/assets/mixins";
 
 .monolog {
-  @include layout;
 }
 
 .monolog__loading {
   @include loading;
   @include layout-body;
 }
-
-.monolog__body {
-  @include layout-body;
-}
 </style>
diff --git a/pages/monolog/index.vue b/pages/monolog/index.vue
@@ -1,8 +1,14 @@
 <script lang="ts" setup>
-import { PageLayout } from "~/src/widgets/ui/page-layout";
+import { PageHeader, PageLayout } from "~/src/widgets/ui";
 import { PAGE_TYPES } from "~/src/shared/constants";
 </script>
 
 <template>
-  <PageLayout :type="PAGE_TYPES.MONOLOG" title="Monolog" />
+  <NuxtLayout>
+    <template #header>
+      <PageHeader :type="PAGE_TYPES.MONOLOG" title="Monolog" />
+    </template>
+
+    <PageLayout :type="PAGE_TYPES.MONOLOG" title="Monolog" />
+  </NuxtLayout>
 </template>
diff --git a/pages/profiler/[id].vue b/pages/profiler/[id].vue
@@ -52,19 +52,19 @@ onMounted(getEvent);
 </script>
 
 <template>
-  <main class="profiler-event">
-    <PageEventHeader title="Profiler" :event-id="eventId" />
+  <NuxtLayout>
+    <template #header>
+      <PageEventHeader title="Profiler" :event-id="eventId" />
+    </template>
 
     <div v-if="isLoading && !event" class="profiler-event__loading">
       <div></div>
       <div></div>
       <div></div>
     </div>
 
-    <div class="profiler-event__body">
-      <ProfilerPage v-if="event" :event="event" class="p-5" />
-    </div>
-  </main>
+    <ProfilerPage v-if="event" :event="event" class="p-5" />
+  </NuxtLayout>
 </template>
 
 <style lang="scss" scoped>
@@ -82,9 +82,4 @@ onMounted(getEvent);
   @include loading;
   @include layout-body;
 }
-
-.profiler-event__body {
-  @include layout-body;
-  @apply h-full;
-}
 </style>