From 473c69869d1cd99df84402a2d5f4e3dd622b3558 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Preu=C3=9F?= <rene@preuss.io>
Date: Sun, 30 Oct 2022 14:15:45 +0100
Subject: [PATCH] Initial commit

---
 .gitignore                           |   1 +
 README.md                            |  76 +++++++++++++++++++
 components/Button.vue                |  21 ++++++
 components/Card.vue                  |  15 ++++
 components/CardBody.vue              |  15 ++++
 components/CardHeader.vue            |  17 +++++
 components/Container.vue             |  15 ++++
 components/FirstLevelLink.vue        |  20 +++++
 components/FirstLevelMenu.vue        | 105 +++++++++++++++++++++++++++
 components/FlexAuto.vue              |  15 ++++
 components/FloatingBanner.vue        |  44 +++++++++++
 components/HeroCard.vue              |  15 ++++
 components/ScreenScrollContainer.vue |  15 ++++
 components/SecondLevelLink.vue       |  17 +++++
 components/SecondLevelMenu.vue       |  43 +++++++++++
 components/ThirdLevelMenu.vue        |  62 ++++++++++++++++
 composables/app.js                   |   8 ++
 package.json                         |  11 +++
 18 files changed, 515 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 README.md
 create mode 100644 components/Button.vue
 create mode 100644 components/Card.vue
 create mode 100644 components/CardBody.vue
 create mode 100644 components/CardHeader.vue
 create mode 100644 components/Container.vue
 create mode 100644 components/FirstLevelLink.vue
 create mode 100644 components/FirstLevelMenu.vue
 create mode 100644 components/FlexAuto.vue
 create mode 100644 components/FloatingBanner.vue
 create mode 100644 components/HeroCard.vue
 create mode 100644 components/ScreenScrollContainer.vue
 create mode 100644 components/SecondLevelLink.vue
 create mode 100644 components/SecondLevelMenu.vue
 create mode 100644 components/ThirdLevelMenu.vue
 create mode 100644 composables/app.js
 create mode 100644 package.json

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..723ef36
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.idea
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..3b27eb7
--- /dev/null
+++ b/README.md
@@ -0,0 +1,76 @@
+# bitinflow UI Kit
+
+## Goal
+
+The main goal of this package is to provide a clean & simple usage of common components in bitinflow brand.  
+
+## Example Skeleton
+
+This example skeleton provides the default ui experience for dashboards, featuring first-, second- &
+third-level menus.
+
+```html
+<template>
+  <FloatingBanner></FloatingBanner>
+  <FirstLevelMenu>
+    <template v-slot:top>
+      <FirstLevelLink icon="fa-home">Home</FirstLevelLink>
+      <FirstLevelLink icon="fa-location-dot">Pull Zones</FirstLevelLink>
+      <FirstLevelLink icon="fa-bucket">Buckets</FirstLevelLink>
+      <FirstLevelLink icon="fa-meteor">Spaces</FirstLevelLink>
+      <FirstLevelLink icon="fa-globe">Domains</FirstLevelLink>
+      <FirstLevelLink icon="fa-list">Zones</FirstLevelLink>
+    </template>
+
+    <template v-slot:bottom>
+      <FirstLevelLink icon="fa-wallet">Billing</FirstLevelLink>
+      <FirstLevelLink icon="fa-fingerprint">Account</FirstLevelLink>
+      <FirstLevelLink icon="fa-arrow-right-from-bracket">Logout</FirstLevelLink>
+    </template>
+
+    <SecondLevelMenu>
+      <template v-slot:title>Domains</template>
+
+      <SecondLevelLink icon="fa-globe">example.com</SecondLevelLink>
+      <SecondLevelLink icon="fa-globe">example.com</SecondLevelLink>
+      <SecondLevelLink icon="fa-globe">example.com</SecondLevelLink>
+      <SecondLevelLink icon="fa-globe">example.com</SecondLevelLink>
+    </SecondLevelMenu>
+
+    <FlexAuto>
+      <ScreenScrollContainer>
+        <ThirdLevelMenu>
+          <template v-slot:title>Test</template>
+        </ThirdLevelMenu>
+        <Container>
+          <HeroCard>
+            <div class="text-3xl">Yeet!</div>
+          </HeroCard>
+          <Card>
+            <CardHeader>Test</CardHeader>
+            <CardBody>Test</CardBody>
+          </Card>
+          <Card>
+            <CardHeader>Test</CardHeader>
+            <CardBody>Test</CardBody>
+          </Card>
+        </Container>
+      </ScreenScrollContainer>
+    </FlexAuto>
+  </FirstLevelMenu>
+</template>
+
+<script>
+import Card from "@bitinflow/ui/components/Card";
+import CardHeader from "@bitinflow/ui/components/CardHeader";
+import CardBody from "@bitinflow/ui/components/CardBody";
+import SecondLevelMenu from "@bitinflow/ui/components/SecondLevelMenu";
+import FloatingBanner from "@bitinflow/ui/components/FloatingBanner";
+import FirstLevelMenu from "@bitinflow/ui/components/FirstLevelMenu";
+import ScreenScrollContainer from "@bitinflow/ui/components/ScreenScrollContainer";
+
+export default {
+  components: {FloatingBanner, ScreenScrollContainer, FirstLevelMenu, SecondLevelMenu, CardBody, CardHeader, Card},
+}
+</script>
+```
\ No newline at end of file
diff --git a/components/Button.vue b/components/Button.vue
new file mode 100644
index 0000000..032f907
--- /dev/null
+++ b/components/Button.vue
@@ -0,0 +1,21 @@
+<template>
+  <a href="#" class="truncate text-black dark:text-white hover:bg-zinc-100 dark:bg-base-700 dark:hover:bg-base-600 dark:text-white rounded-lg px-4 py-2">
+    <slot/>
+  </a>
+</template>
+
+<script>
+export default {
+  name: "Button",
+
+  methods: {
+    click() {
+      this.$emit('click');
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/components/Card.vue b/components/Card.vue
new file mode 100644
index 0000000..18f0c19
--- /dev/null
+++ b/components/Card.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="bg-white text-black dark:bg-base-700 dark:text-white rounded shadow mb-8">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Card"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/components/CardBody.vue b/components/CardBody.vue
new file mode 100644
index 0000000..3b3704f
--- /dev/null
+++ b/components/CardBody.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="p-8 rounded-b">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CardBody"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/components/CardHeader.vue b/components/CardHeader.vue
new file mode 100644
index 0000000..b0255c9
--- /dev/null
+++ b/components/CardHeader.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="py-4 px-8 border-b dark:border-base-800 rounded-t">
+    <div class="text-xl font-medium">
+      <slot/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CardHeader"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/components/Container.vue b/components/Container.vue
new file mode 100644
index 0000000..a10b8f6
--- /dev/null
+++ b/components/Container.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="container mx-auto px-4 lg:px-16 py-8 space-y-8">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Container"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/components/FirstLevelLink.vue b/components/FirstLevelLink.vue
new file mode 100644
index 0000000..0d8d505
--- /dev/null
+++ b/components/FirstLevelLink.vue
@@ -0,0 +1,20 @@
+<template>
+  <a class="hover:bg-primary-500 rounded-lg text-center text-xs py-4 flex flex-col space-y-2" href="#">
+    <i :class="['fal text-xl', icon]"></i>
+    <span>
+      <slot/>
+    </span>
+  </a>
+</template>
+
+<script>
+export default {
+  name: "FirstLevelLink",
+  props: {
+    icon: {
+      type: String,
+      default: 'fa-arrow-up-right-from-square'
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/components/FirstLevelMenu.vue b/components/FirstLevelMenu.vue
new file mode 100644
index 0000000..475e2fd
--- /dev/null
+++ b/components/FirstLevelMenu.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="bg-gray-100 dark:bg-base min-h-screen flex flex-col relative">
+    <!-- Overlay -->
+    <div ref="overlay" class="sm:hidden hidden bg-gray-800 opacity-50 w-full min-h-screen absolute z-10"></div>
+
+    <!-- Header -->
+    <header class="bg-white relative shadow sm:hidden z-10">
+      <div class="container flex justify-between items-center py-4">
+        <img src="/img/icon-light.svg" class="h-4" alt="bitinflow">
+
+        <div class="flex items-center space-x-4">
+          <nuxt-link v-for="link in secondaryMenu" :key="link.name" :to="link.to">
+            <i :class="link.icon" class="icon"/> {{ link.name }}
+          </nuxt-link>
+
+          <nuxt-link class="inline-block flex" to="/">
+            <img class="h-8 w-8 rounded-full" alt="profile" src="/img/avatar.jpg"/>
+          </nuxt-link>
+
+          <button @click="toggleMenu" class="focus-within:outline-none pl-4">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
+                 stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+    </header>
+
+    <!-- Sidenav with Content -->
+    <div class="flex flex-grow">
+      <!-- Sidenav -->
+      <nav ref="sidebar"
+           class="flex h-screen flex-col w-36 bg-base-800 dark:border-r dark:border-base text-gray-100 shadow sm:relative
+           absolute inset-y-0 transform -translate-x-full sm:translate-x-0 transition transition-transform z-20">
+        <!-- logo -->
+        <div class="flex-none bg-primary-500 h-16 sm:h-20 py-3 sm:py-6 text-white flex flex-initial justify-center">
+          <button @click="toggleDarkMode">
+            <img src="/img/icon-light.svg" class="h-8 w-auto" alt="Logo">
+          </button>
+        </div>
+
+        <div class="flex-auto flex flex-col overflow-y-auto py-6 space-y-6">
+          <!-- nav -->
+          <nav class="primary flex flex-grow flex-col space-y-4 px-6">
+            <slot name="top"/>
+          </nav>
+
+          <nav class="flex flex-initial flex-col space-y-4 px-6">
+            <slot name="bottom"/>
+          </nav>
+        </div>
+        <div class="flex-none"></div>
+      </nav>
+
+      <!-- Content -->
+      <main class="flex flex-1">
+        <slot/>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "FirstLevelMenu",
+  data() {
+    return {
+      primaryMenu: [
+        {name: 'Home', icon: 'fal fa-home', to: '/', exact: true},
+        {name: 'Buckets', icon: 'fal fa-bucket', to: '/buckets', exact: false},
+        {name: 'Domains', icon: 'fal fa-globe', to: '/domains', exact: false},
+        {name: 'Spaces', icon: 'fal fa-meteor', to: '/spaces', exact: false},
+        {name: 'Zones', icon: 'fal fa-list-ul', to: '/zones', exact: false},
+      ],
+      secondaryMenu: [
+        {name: 'Logout', icon: 'fal fa-sign-out', to: '/logout'},
+      ],
+    };
+  },
+  methods: {
+    toggleMenu() {
+      this.$refs.overlay.classList.toggle('hidden');
+      this.$refs.sidebar.classList.toggle('-translate-x-full');
+    },
+    closeMenu() {
+      this.$refs.overlay.classList.add('hidden');
+      this.$refs.sidebar.classList.add('-translate-x-full');
+    },
+    toggleDarkMode() {
+      document.body.classList.toggle('dark')
+    }
+  },
+};
+</script>
+
+<style scoped>
+.nuxt-link-active {
+  background: #00BFA5;
+}
+
+.nuxt-link-active:hover {
+  background: #004F44;
+}
+</style>
diff --git a/components/FlexAuto.vue b/components/FlexAuto.vue
new file mode 100644
index 0000000..0b58933
--- /dev/null
+++ b/components/FlexAuto.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="flex-auto">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Flex"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/components/FloatingBanner.vue b/components/FloatingBanner.vue
new file mode 100644
index 0000000..537021b
--- /dev/null
+++ b/components/FloatingBanner.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="fixed inset-x-0 bottom-0 pb-2 sm:pb-5 z-[100]">
+    <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
+      <div class="rounded-lg bg-primary-500 p-2 shadow-lg sm:p-3">
+        <div class="flex flex-wrap items-center justify-between">
+          <div class="flex w-0 flex-1 items-center">
+          <span class="flex rounded-lg bg-primary-800 p-2">
+            <!-- Heroicon name: outline/megaphone -->
+            <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46" />
+            </svg>
+          </span>
+            <p class="ml-3 truncate font-medium text-white">
+              <span class="md:hidden">We announced a new product!</span>
+              <span class="hidden md:inline">Big news! We're excited to announce a brand new product.</span>
+            </p>
+          </div>
+          <div class="order-3 mt-2 w-full flex-shrink-0 sm:order-2 sm:mt-0 sm:w-auto">
+            <a href="#" class="flex items-center justify-center rounded-md border border-transparent bg-white px-4 py-2 text-sm font-medium text-primary-500 shadow-sm hover:bg-zinc-200">Learn more</a>
+          </div>
+          <div class="order-2 flex-shrink-0 sm:order-3 sm:ml-2">
+            <button type="button" class="-mr-1 flex rounded-md p-2 hover:bg-primary-500 focus:outline-none focus:ring-2 focus:ring-white">
+              <span class="sr-only">Dismiss</span>
+              <!-- Heroicon name: outline/x-mark -->
+              <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "FloatingBanner"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/components/HeroCard.vue b/components/HeroCard.vue
new file mode 100644
index 0000000..40dc254
--- /dev/null
+++ b/components/HeroCard.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="bg-gradient-to-tr from-primary-600 to-primary-400 text-white rounded shadow p-8">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "HeroCard"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/components/ScreenScrollContainer.vue b/components/ScreenScrollContainer.vue
new file mode 100644
index 0000000..07eb75e
--- /dev/null
+++ b/components/ScreenScrollContainer.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="overflow-y-auto h-screen">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ScreenScrollContainer"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/components/SecondLevelLink.vue b/components/SecondLevelLink.vue
new file mode 100644
index 0000000..757273b
--- /dev/null
+++ b/components/SecondLevelLink.vue
@@ -0,0 +1,17 @@
+<template>
+  <Button class="flex items-center gap-2">
+    <i :class="['fal', icon]"></i> <slot/>
+  </Button>
+</template>
+
+<script>
+export default {
+  name: "SecondLevelLink",
+  props: {
+    icon: {
+      type: String,
+      default: 'fa-arrow-up-right-from-square'
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/components/SecondLevelMenu.vue b/components/SecondLevelMenu.vue
new file mode 100644
index 0000000..b053f41
--- /dev/null
+++ b/components/SecondLevelMenu.vue
@@ -0,0 +1,43 @@
+<template>
+  <nav class="w-64 bg-white text-black shadow dark:bg-base-700 dark:text-white dark:border-base-900 dark:border-l
+  flex flex-col overflow-y-auto h-screen absolute sm:relative transform -translate-x-full sm:translate-x-0 pt-10 pb-4 px-4 space-y-2">
+    <span class="font-semibold px-4">
+      <slot name="title"/>
+    </span>
+    <div class="flex flex-col gap-2 justify-between flex-1">
+      <div class="flex flex-col gap-2">
+        <slot/>
+      </div>
+      <div>
+        <SecondLevelLink class="bg-zinc-100 hover:bg-zinc-200 dark:bg-base-500 dark:hover:bg-base-600"
+          icon="fa-plus">
+          Create Resource
+        </SecondLevelLink>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script>
+export default {
+  name: "SecondLevelMenu",
+  props: {
+    items: {
+      type: Array,
+      default: [
+        {name: 'Test', href: 'Test'}
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.nuxt-link-active {
+  background: #f3f3f3;
+}
+
+.dark .nuxt-link-active {
+  background: #464649;
+}
+</style>
\ No newline at end of file
diff --git a/components/ThirdLevelMenu.vue b/components/ThirdLevelMenu.vue
new file mode 100644
index 0000000..ef78089
--- /dev/null
+++ b/components/ThirdLevelMenu.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="flex-1 dark:border-l dark:border-base shadow text-black dark:text-white">
+    <div class="bg-white border-b dark:bg-base-600 dark:border-base">
+      <div class="container mx-auto px-4 lg:px-16 py-10">
+        <div class="text-3xl font-semibold">
+          <slot name="title"/>
+        </div>
+      </div>
+    </div>
+
+    <nav class="bg-white dark:bg-base-700 py-4">
+      <div class="container mx-auto px-4 lg:px-16">
+        <div class="hidden xl:block space-x-4">
+          <Button v-for="link in thirdLevelLinks">
+            <i :class="link.icon" class="icon"></i> {{ link.name }}
+          </Button>
+        </div>
+
+        <div class="flex flex-col xl:hidden">
+          <select @change="onChange" v-model="link" class="bg-white">
+            <option v-for="link in thirdLevelLinks" v-bind:key="link.name" :to="link.to" :value="link.to">
+              {{ link.name }}
+            </option>
+          </select>
+        </div>
+      </div>
+    </nav>
+  </div>
+</template>
+
+<script>
+import {useMenuStore} from "../stores/menu";
+import {mapState} from "pinia";
+
+export default {
+  name: "ThirdLevelMenu",
+  data() {
+    return {
+      link: ''
+    }
+  },
+  computed: {
+    ...mapState(useMenuStore, ['thirdLevelLinks'])
+  },
+  methods: {
+    onChange(event) {
+      this.link = event.target.value
+      this.$router.push(event.target.value)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.nuxt-link-active {
+  background: #f3f3f3;
+}
+
+.dark .nuxt-link-active {
+  background: #464649;
+}
+</style>
\ No newline at end of file
diff --git a/composables/app.js b/composables/app.js
new file mode 100644
index 0000000..339cf2e
--- /dev/null
+++ b/composables/app.js
@@ -0,0 +1,8 @@
+import {useMenuStore} from "~/stores/menu";
+
+export const useMenu = (data) => {
+    const menu = useMenuStore()
+    if (data.thirdLevelLinks) {
+        menu.updateThirdLevelLinks(data.thirdLevelLinks)
+    }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..8950732
--- /dev/null
+++ b/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@bitinflow/ui",
+  "version": "0.0.1",
+  "description": "Bitinflow UI Kit",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "René Preuß <rene@bitinflow.com>",
+  "license": "Apache-2.0"
+}