Merge pull request #208 from PrefectHQ/clean-house

Clean out the repo for v2 rebuild

.eslintrc.json

@@ -18,8 +18,5 @@
         "project": "./tsconfig.json"
       }
     }
-  },
-  "rules": {
-    "import/no-default-export": "error"
   }
 }

demo/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "no-relative-import-paths/no-relative-import-paths": "off"
+  }
+}

demo/App.vue

@@ -1,95 +1,84 @@
 <template>
-  <div class="app">
-    <template v-if="!media.lg">
-      <p-global-sidebar class="app__mobile-menu">
-        <template #upper-links>
-          <p-icon icon="Prefect" class="app__prefect-icon" />
-          <span class="text-slate-200">Prefect</span>
-        </template>
-        <template #bottom-links>
-          <p-icon icon="Bars3Icon" class="app__menu-icon" @click="toggle" />
-        </template>
-      </p-global-sidebar>
+  <div class="max-w-full min-h-full app">
+    <template v-if="mobileNav">
+      <AppNavigationBar layout="horizontal" class="app__sidebar" />
     </template>
-    <ContextSidebar v-if="showMenu" class="app__sidebar" />
 
-    <router-view v-slot="{ Component }" class="app__router-view">
-      <transition name="app__router-view-fade" mode="out-in">
-        <component :is="Component" />
-      </transition>
-    </router-view>
+    <p-layout-resizable class="app__layout">
+      <template v-if="!mobileNav" #aside>
+        <AppNavigationBar class="app__sidebar" />
+      </template>
+
+      <suspense>
+        <router-view class="app__router-view" />
+      </suspense>
+    </p-layout-resizable>
   </div>
 </template>
 
 <script lang="ts" setup>
   import { media, useColorTheme } from '@prefecthq/prefect-design'
-  import { computed, watchEffect } from 'vue'
-  import ContextSidebar from '@/demo/components/ContextSidebar.vue'
-  import { mobileMenuOpen, toggle } from '@/demo/router/menu'
-
-  // Add PIXI to the global scope so that the chrome plugin can access it, when in demo mode
-  if (import.meta.env.MODE === 'demo') {
-    import('pixi.js').then(PIXI => Object.defineProperty(window, 'PIXI', { value: PIXI }))
-  }
-
-  const showMenu = computed(() => media.lg || mobileMenuOpen.value)
-
-  watchEffect(() => document.body.classList.toggle('body-scrolling-disabled', showMenu.value && !media.lg))
+  import { computed } from 'vue'
+  import AppNavigationBar from '@/demo/components/AppNavigationBar.vue'
 
   useColorTheme()
+
+  const mobileNav = computed(() => !media.lg)
 </script>
 
 <style>
 .body-scrolling-disabled { @apply
   overflow-hidden
 }
 
-html, body {
-  overscroll-behavior-y: none;
+.app { @apply
+  grid
+  max-h-screen
 }
 
-.app { @apply
-  h-screen
-  flex
-  flex-col
+.app__layout {
+  --p-layout-resizable-aside-size: 256px;
+  --p-layout-resizable-aside-max-size: 50vw;
+  --p-layout-resizable-aside-min-size: 256px;
+}
+
+.app {
+  grid-template-columns: auto;
+  grid-template-rows: auto 1fr;
+}
+
+@screen lg {
+  .app {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+  }
 }
 
 .app__prefect-icon { @apply
   w-6
   h-6
 }
 
-.app__menu-icon { @apply
-  text-slate-200
-  w-6
-  h-6
-  cursor-pointer
+.app__sidebar { @apply
+  w-full
 }
 
 .app__router-view { @apply
-  w-full
-  mx-auto
-  py-10
-  px-6
-  lg:px-8
-  h-screen
+  relative
+  h-full
+  pb-4
   overflow-auto
+  w-full
+  z-0
 }
 
 .app__router-view-fade-enter-active,
 .app__router-view-fade-leave-active {
-  transition: opacity 0.15s ease;
+  transition: opacity 0.25s ease;
 }
 
 .app__router-view-fade-enter-from,
 .app__router-view-fade-leave-to {
   opacity: 0;
 }
-
-@screen lg {
-  .app {
-    display: grid;
-    grid-template-columns: max-content minmax(0, 1fr);
-  }
-}
-</style>
+</style>

demo/components/AppComponentNavigationItems.vue

@@ -0,0 +1,44 @@
+<template>
+  <template v-for="record in routeRecords" :key="record.name">
+    <component :is="getComponentForRecord(record)" v-bind="getContextProps(record)" />
+  </template>
+</template>
+
+<script lang="ts" setup>
+  import { PContextAccordionItem, PContextNavItem } from '@prefecthq/prefect-design'
+  import { RouteLocationRaw, RouteRecordRaw } from 'vue-router'
+  import { routeRecords } from '@/demo/router'
+
+  export type ContextAccordionChildItem = {
+    to: RouteLocationRaw,
+    title?: string,
+  }
+
+  function getComponentForRecord(record: RouteRecordRaw): typeof PContextAccordionItem | typeof PContextNavItem {
+    if (record.children) {
+      return PContextAccordionItem
+    }
+
+    return PContextNavItem
+  }
+
+  function getContextProps(record: RouteRecordRaw): { title: string, children: ContextAccordionChildItem[] } | { title: string, to: RouteLocationRaw } {
+    const title = record.name?.toString() ?? ''
+
+    if (!record.children) {
+      const to = { name: record.name }
+      return {
+        title,
+        to,
+      }
+    }
+
+    return {
+      title,
+      children: record.children.map(({ name, path }) => ({
+        title: `${path}`,
+        to: { name },
+      })),
+    }
+  }
+</script>

demo/components/AppNavigationBar.vue

@@ -0,0 +1,109 @@
+<template>
+  <p-navigation-bar class="app-navigation-bar" :class="classes.root" v-bind="{ layout }">
+    <template #prepend>
+      <slot name="prepend" v-bind="{ layout }">
+        <template v-if="layout == 'horizontal'">
+          <p-button icon="Bars3Icon" @click="toggleDrawer" />
+        </template>
+        <template v-else>
+          <p-icon class="app-navigation-bar__logo" icon="Prefect" @click="toggleDrawer" />
+          <span class="app-navigation-bar__heading">Prefect Graphs</span>
+        </template>
+      </slot>
+    </template>
+
+    <template v-if="layout == 'horizontal'">
+      <p-drawer v-model:open="showDrawer" resizable>
+        <AppNavigationBar class="app-navigation-bar__drawer">
+          <template #prepend>
+            <p-icon class="app-navigation-bar__logo" icon="Prefect" @click="toggleDrawer" />
+            <span class="app-navigation-bar__heading">Prefect Design</span>
+          </template>
+        </AppNavigationBar>
+      </p-drawer>
+    </template>
+
+    <template v-else>
+      <AppComponentNavigationItems />
+    </template>
+
+    <template v-if="layout == 'vertical'" #append>
+      <div class="app-navigation-bar__append">
+        <p-theme-toggle />
+      </div>
+    </template>
+  </p-navigation-bar>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref } from 'vue'
+  import AppComponentNavigationItems from '@/demo/components/AppComponentNavigationItems.vue'
+
+  const props = defineProps<{
+    layout?: 'horizontal' | 'vertical',
+  }>()
+
+  const showDrawer = ref(false)
+
+
+  const layout = computed(() => props.layout ?? 'vertical')
+  const classes = computed(() => ({
+    root: {
+      [`app-navigation-bar--${layout.value}`]: true,
+    },
+  }))
+
+  const toggleDrawer = (): void => {
+    showDrawer.value = !showDrawer.value
+  }
+</script>
+
+<style>
+.app-navigation-bar {
+  --p-layout-resizable-aside-size: 256px;
+  --p-layout-resizable-aside-max-size: 512px;
+  --p-layout-resizable-aside-min-size: 256px;
+  --p-drawer-min-size: 256px;
+}
+
+.app-navigation-bar { @apply
+  pt-4
+  px-2
+  w-full
+}
+
+.app-navigation-bar__logo { @apply
+  h-10
+  w-10
+}
+
+.app-navigation-bar__heading { @apply
+  font-normal
+  text-xl
+}
+
+.app-navigation-bar--horizontal { @apply
+  py-2
+  px-4
+}
+
+.app-navigation-bar__drawer { @apply
+  bg-floating
+  shadow-lg
+  w-full
+  max-w-[theme(screens.sm)]
+}
+
+.app-navigation-bar .p-context-accordion-item__title,
+.app-navigation-bar .p-context-nav-item { @apply
+  capitalize
+}
+
+.app-navigation-bar__append { @apply
+  flex
+  flex-col
+  items-center
+  w-full
+  pb-4
+}
+</style>