sprintify-ui 0.0.18 → 0.0.20

package/src/components/BaseLayoutSidebar.vue

@@ -0,0 +1,199 @@
+<template>
+  <div class="min-h-full">
+    <TransitionRoot as="template" :show="showMobileMenu">
+      <Dialog
+        as="div"
+        class="relative z-40 xl:hidden"
+        @close="showMobileMenu = false"
+      >
+        <TransitionChild
+          as="template"
+          enter="transition-opacity ease-linear duration-300"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="transition-opacity ease-linear duration-300"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
+          <div class="fixed inset-0 bg-slate-600 bg-opacity-75" />
+        </TransitionChild>
+
+        <div class="fixed inset-0 z-40 flex">
+          <TransitionChild
+            as="template"
+            enter="transition ease-in-out duration-300 transform"
+            enter-from="-translate-x-full"
+            enter-to="translate-x-0"
+            leave="transition ease-in-out duration-300 transform"
+            leave-from="translate-x-0"
+            leave-to="-translate-x-full"
+          >
+            <DialogPanel
+              class="relative flex w-full max-w-xs flex-1 flex-col pt-5 pb-4"
+              :class="[dark ? 'bg-slate-800' : 'bg-white']"
+            >
+              <TransitionChild
+                as="template"
+                enter="ease-in-out duration-300"
+                enter-from="opacity-0"
+                enter-to="opacity-100"
+                leave="ease-in-out duration-300"
+                leave-from="opacity-100"
+                leave-to="opacity-0"
+              >
+                <div class="absolute top-0 right-0 -mr-12 pt-2">
+                  <button
+                    type="button"
+                    class="ml-1 flex h-10 w-10 items-center justify-center rounded-full"
+                    @click="showMobileMenu = false"
+                  >
+                    <span class="sr-only">Close sidebar</span>
+                    <BaseIcon
+                      icon="heroicons:x-mark"
+                      class="h-6 w-6 text-white"
+                      aria-hidden="true"
+                    />
+                  </button>
+                </div>
+              </TransitionChild>
+              <div class="flex flex-shrink-0 items-center px-4">
+                <img class="block h-8 w-auto" :src="logoUrl" :alt="appName" />
+              </div>
+              <div class="mt-5 h-0 flex-1 overflow-y-auto">
+                <nav>
+                  <slot name="menu" />
+                </nav>
+              </div>
+            </DialogPanel>
+          </TransitionChild>
+          <div class="w-14 flex-shrink-0" aria-hidden="true">
+            <!-- Dummy element to force sidebar to shrink to fit close icon -->
+          </div>
+        </div>
+      </Dialog>
+    </TransitionRoot>
+
+    <div class="flex min-h-full flex-col xl:pl-64">
+      <div class="sticky top-0 left-0 z-10 shrink-0 shadow">
+        <BaseSystemAlert
+          v-for="systemAlert in systemAlerts"
+          :key="systemAlert.id"
+          :color="systemAlert.color"
+          :to="systemAlert.to"
+          :action="systemAlert.action"
+          :closable="systemAlert.closable"
+          @close="systemAlertStore.remove(systemAlert)"
+        >
+          {{ systemAlert.message }}
+        </BaseSystemAlert>
+
+        <div class="flex h-16 bg-white">
+          <button
+            type="button"
+            class="border-r border-slate-200 px-4 text-slate-500 xl:hidden"
+            @click="showMobileMenu = true"
+          >
+            <span class="sr-only">Open sidebar</span>
+            <BaseIcon
+              icon="heroicons:bars-3-bottom-left"
+              class="h-6 w-6"
+              aria-hidden="true"
+            />
+          </button>
+
+          <!-- Navbar -->
+          <div class="flex flex-1">
+            <slot name="navbar" />
+          </div>
+        </div>
+      </div>
+
+      <!-- Position: relative to contain Loading Covers -->
+      <main class="relative min-h-full flex-1">
+        <slot />
+      </main>
+    </div>
+
+    <!-- Static sidebar for desktop -->
+    <div class="z-10 hidden xl:fixed xl:inset-y-0 xl:flex xl:w-64 xl:flex-col">
+      <!-- Sidebar component, swap this element with another sidebar if you like -->
+      <div
+        class="flex min-h-0 flex-1 flex-col"
+        :class="[dark ? 'bg-slate-800' : 'bg-white shadow']"
+      >
+        <div
+          class="flex h-16 flex-shrink-0 items-center px-4"
+          :class="[dark ? 'bg-slate-900' : 'bg-white']"
+        >
+          <img class="block h-8 w-auto" :src="logoUrl" :alt="appName" />
+        </div>
+        <div class="flex flex-1">
+          <nav class="flex-1">
+            <slot name="menu" />
+          </nav>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import {
+  Dialog,
+  DialogPanel,
+  TransitionChild,
+  TransitionRoot,
+} from '@headlessui/vue';
+
+import { useSystemAlertStore } from '../stores/systemAlerts';
+import { BaseIcon } from '.';
+import BaseSystemAlert from './BaseSystemAlert.vue';
+
+const props = defineProps({
+  appName: {
+    default: '',
+    type: String,
+  },
+  logoUrl: {
+    default: 'https://sprintify.witify.io/img/logo/logo-side-dark.svg',
+    type: String,
+  },
+  dark: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+/**
+ * System Alert And Navigation size
+ */
+
+const systemAlertStore = useSystemAlertStore();
+
+const systemAlerts = computed(() => {
+  return systemAlertStore.systemAlerts;
+});
+
+/**
+ * Show/Hide sidebar
+ */
+
+const showMobileMenu = ref(false);
+
+function toggleMenu() {
+  showMobileMenu.value = !showMobileMenu.value;
+}
+
+function openMenu() {
+  showMobileMenu.value = true;
+}
+
+function closeMenu() {
+  showMobileMenu.value = false;
+}
+
+provide('toggleMenu', toggleMenu);
+provide('openMenu', openMenu);
+provide('closeMenu', closeMenu);
+</script>

package/src/components/BaseLayoutSidebarConfigurable.stories.js

@@ -0,0 +1,111 @@
+import BaseContainer from './BaseContainer.vue';
+import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
+
+export default {
+  title: 'Layout/BaseLayoutSidebarConfigurable',
+  component: BaseLayoutSidebarConfigurable,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    user: {
+      email: 'jane@witify.io',
+      first_name: 'Jane',
+      last_name: 'Doe',
+      full_name: 'Jane Doe',
+      avatar_url:
+        'https://images.unsplash.com/photo-1494790108377-be9c29b29330??auto=format&fit=crop&w=200&h=200&q=80&g=face',
+    },
+    menu: [
+      {
+        title: 'General',
+        actions: [
+          {
+            label: 'Dashboard',
+            to: '/',
+            icon: 'heroicons-home',
+          },
+          {
+            label: 'Articles',
+            to: '/articles',
+            icon: 'heroicons:document-text',
+          },
+          {
+            label: 'Users',
+            to: '/users',
+            icon: 'heroicons:users',
+          },
+        ],
+      },
+      {
+        title: 'Settings',
+        actions: [
+          {
+            label: 'Account',
+            to: '/account',
+            icon: 'heroicons:cog',
+          },
+          {
+            label: 'Logout',
+            action: logout,
+            icon: 'heroicons:arrow-left-on-rectangle',
+          },
+        ],
+      },
+    ],
+    userMenu: [
+      {
+        label: 'Dashboard',
+        to: '/',
+        icon: 'heroicons-home',
+      },
+      {
+        label: 'Settings',
+        to: '/account',
+        icon: 'heroicons:cog',
+      },
+      {
+        label: 'Logout',
+        action: logout,
+        icon: 'heroicons:arrow-left-on-rectangle',
+      },
+    ],
+  },
+};
+
+async function logout() {
+  alert('logout');
+}
+
+const Template = (args) => ({
+  components: {
+    BaseContainer,
+    BaseLayoutSidebarConfigurable,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseLayoutSidebarConfigurable v-bind="args">
+      <div class="py-16">
+        <BaseContainer size="3xl">
+          <p v-for="i in 20" class="mb-1">
+            Amet occaecat enim pariatur incididunt enim laborum enim. Duis cillum in in excepteur sit excepteur laboris consectetur magna. Commodo proident labore commodo duis veniam do nisi irure ipsum officia excepteur non. Nisi cillum mollit tempor ut.
+          </p>
+        </BaseContainer>
+      </div>
+    </BaseLayoutSidebarConfigurable>
+  `,
+});
+
+export const Light = Template.bind({});
+Light.args = {
+  dark: false,
+  logoUrl: 'https://sprintify.witify.io/img/logo/logo-side.svg',
+};
+
+export const Dark = Template.bind({});
+Dark.args = {
+  dark: true,
+  logoUrl: 'https://sprintify.witify.io/img/logo/logo-side-dark.svg',
+};

package/src/components/BaseLayoutSidebarConfigurable.vue

@@ -0,0 +1,115 @@
+<template>
+  <BaseLayoutSidebar :app-name="appName" :logo-url="logoUrl" :dark="dark">
+    <template #menu>
+      <div class="px-3 py-6">
+        <div class="space-y-8">
+          <div v-for="section in actionSections" :key="section.title">
+            <h2
+              v-if="section.title"
+              class="mb-3 pl-3 text-xs font-semibold uppercase tracking-widest"
+              :class="dark ? 'text-slate-400' : 'text-slate-500'"
+            >
+              {{ section.title }}
+            </h2>
+            <div>
+              <div class="space-y-1">
+                <BaseNavbarSideItem
+                  v-for="item in section.actions"
+                  :key="item.label"
+                  :item="item"
+                  :dark="dark"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template #navbar>
+      <div class="flex flex-1 justify-between px-4">
+        <div class="flex flex-1">
+          <!-- Good spot for search bar... -->
+        </div>
+
+        <div class="ml-4 flex items-center md:ml-6">
+          <!-- Good spot for notification button... -->
+
+          <!-- Profile dropdown -->
+          <div class="relative ml-3 mr-3">
+            <BaseMenu :items="userMenu">
+              <template #button="{ open }">
+                <div
+                  class="flex"
+                  :class="[
+                    open
+                      ? 'ring-2 ring-blue-500 ring-offset-2 ring-offset-white'
+                      : '',
+                  ]"
+                >
+                  <BaseAvatar :user="user" show-details />
+                </div>
+              </template>
+            </BaseMenu>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template #default>
+      <slot />
+    </template>
+  </BaseLayoutSidebar>
+</template>
+
+<script setup lang="ts">
+import { User } from '@/types/User';
+import { PropType } from 'vue';
+import { ActionItem, ActionSection } from '../types/types';
+import BaseAvatar from './BaseAvatar.vue';
+import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
+import BaseMenu from './BaseMenu.vue';
+import BaseNavbarSideItem from './BaseNavbarSideItem.vue';
+
+const props = defineProps({
+  appName: {
+    default: '',
+    type: String,
+  },
+  logoUrl: {
+    default: 'https://sprintify.witify.io/img/logo/logo-side-dark.svg',
+    type: String,
+  },
+  menu: {
+    required: true,
+    type: Array as PropType<ActionItem[] | ActionSection[]>,
+  },
+  userMenu: {
+    required: true,
+    type: Array as PropType<ActionItem[]>,
+  },
+  user: {
+    required: true,
+    type: Object as PropType<User>,
+  },
+  dark: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const actionSections = computed((): ActionSection[] => {
+  const isActionSections = props.menu.length > 0 && 'actions' in props.menu[0];
+
+  if (isActionSections) {
+    return props.menu as ActionSection[];
+  }
+
+  return [
+    {
+      title: '',
+      actions: props.menu as ActionItem[],
+    },
+  ];
+});
+</script>

package/src/components/BaseLayoutStacked.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="sticky top-0 z-20 w-full shadow-sm">
+    <BaseSystemAlert
+      v-for="systemAlert in systemAlerts"
+      :key="systemAlert.id"
+      :color="systemAlert.color"
+      :to="systemAlert.to"
+      :action="systemAlert.action"
+      :closable="systemAlert.closable"
+      @close="systemAlertStore.remove(systemAlert)"
+    >
+      {{ systemAlert.message }}
+    </BaseSystemAlert>
+
+    <BaseNavbar :dark="dark">
+      <template #navbar>
+        <slot name="navbar" />
+      </template>
+
+      <template #mobile>
+        <slot name="mobile" />
+      </template>
+    </BaseNavbar>
+  </div>
+
+  <div>
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useSystemAlertStore } from '../stores/systemAlerts';
+import BaseNavbar from './BaseNavbar.vue';
+import BaseSystemAlert from './BaseSystemAlert.vue';
+
+defineProps({
+  dark: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+/**
+ * System Alerts
+ */
+
+const systemAlertStore = useSystemAlertStore();
+
+const systemAlerts = computed(() => {
+  return systemAlertStore.systemAlerts;
+});
+</script>

package/src/components/BaseLayoutStackedConfigurable.stories.js

@@ -0,0 +1,92 @@
+import BaseContainer from './BaseContainer.vue';
+import BaseLayoutStackedConfigurable from './BaseLayoutStackedConfigurable.vue';
+
+export default {
+  title: 'Layout/BaseLayoutStackedConfigurable',
+  component: BaseLayoutStackedConfigurable,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    appName: 'Sprintify',
+    user: {
+      email: 'jane@witify.io',
+      first_name: 'Jane',
+      last_name: 'Doe',
+      full_name: 'Jane Doe',
+      avatar_url:
+        'https://images.unsplash.com/photo-1494790108377-be9c29b29330??auto=format&fit=crop&w=200&h=200&q=80&g=face',
+    },
+    menu: [
+      {
+        label: 'Products',
+        to: '/',
+        count: 234,
+        type: 'RouterLink',
+      },
+      {
+        label: 'Users',
+        to: '/setup',
+      },
+      {
+        label: 'Account',
+        to: '/settings',
+        icon: 'heroicons:cog',
+      },
+    ],
+    userMenu: [
+      {
+        label: 'Dashboard',
+        to: '/',
+        icon: 'heroicons-home',
+      },
+      {
+        label: 'Settings',
+        to: '/account',
+        icon: 'heroicons:cog',
+      },
+      {
+        label: 'Logout',
+        action: logout,
+        icon: 'heroicons:arrow-left-on-rectangle',
+      },
+    ],
+  },
+};
+
+async function logout() {
+  alert('logout');
+}
+
+const Template = (args) => ({
+  components: {
+    BaseLayoutStackedConfigurable,
+    BaseContainer,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseLayoutStackedConfigurable v-bind="args">
+      <div class="py-16">
+        <BaseContainer size="3xl">
+          <p v-for="i in 20" class="mb-1">
+            Amet occaecat enim pariatur incididunt enim laborum enim. Duis cillum in in excepteur sit excepteur laboris consectetur magna. Commodo proident labore commodo duis veniam do nisi irure ipsum officia excepteur non. Nisi cillum mollit tempor ut.
+          </p>
+        </BaseContainer>
+      </div>
+    </BaseLayoutStackedConfigurable>
+  `,
+});
+
+export const Light = Template.bind({});
+Light.args = {
+  dark: false,
+  logoUrl: 'https://sprintify.witify.io/img/logo/logo-side.svg',
+};
+
+export const Dark = Template.bind({});
+Dark.args = {
+  dark: true,
+  logoUrl: 'https://sprintify.witify.io/img/logo/logo-side-dark.svg',
+};

package/src/components/BaseLayoutStackedConfigurable.vue

@@ -0,0 +1,124 @@
+<template>
+  <BaseLayoutStacked :dark="dark">
+    <template #navbar>
+      <div class="flex h-16 justify-between">
+        <!-- Left -->
+
+        <div class="flex justify-center">
+          <!-- Logo -->
+          <router-link to="/" class="flex flex-shrink-0 items-center p-2 pl-0">
+            <img class="block h-8 w-auto" :src="logoUrl" :alt="appName" />
+          </router-link>
+
+          <!-- Links (desktop) -->
+          <div class="ml-10 hidden space-x-4 md:flex">
+            <BaseNavbarItem
+              v-for="item in menu"
+              :key="item.label"
+              :item="item"
+              :dark="dark"
+            />
+          </div>
+        </div>
+
+        <!-- Right -->
+
+        <div class="hidden md:ml-6 md:flex md:items-center">
+          <!-- Profile dropdown -->
+          <BaseMenu menu-class="w-52" :items="userMenu">
+            <template #button="{ open }">
+              <div
+                class="flex rounded-full"
+                :class="[
+                  open
+                    ? 'bg-slate-700 ring-2 ring-blue-500 ring-offset-2 ring-offset-slate-700'
+                    : '',
+                ]"
+              >
+                <BaseAvatar :class="dark ? 'text-white' : ''" :user="user" />
+              </div>
+            </template>
+          </BaseMenu>
+        </div>
+      </div>
+    </template>
+
+    <template #mobile>
+      <!-- Links mobile -->
+      <div class="space-y-1 p-2 pt-0">
+        <BaseNavbarSideItem
+          v-for="item in menu"
+          :key="item.label"
+          :item="item"
+          :dark="dark"
+        />
+      </div>
+
+      <hr
+        class="mb-4 mt-2"
+        :class="[dark ? 'border-slate-700' : 'border-slate-200']"
+      />
+
+      <!-- Profile links -->
+      <div class="p-2 pb-6">
+        <BaseAvatar
+          :user="user"
+          show-details
+          size="base"
+          class="px-3"
+          :class="dark ? 'text-white' : ''"
+        />
+        <div class="mt-4 space-y-1">
+          <BaseNavbarSideItem
+            v-for="item in userMenu"
+            :key="item.label"
+            :item="item"
+            :dark="dark"
+          />
+        </div>
+      </div>
+    </template>
+
+    <template #default>
+      <slot name="default" />
+    </template>
+  </BaseLayoutStacked>
+</template>
+
+<script lang="ts" setup>
+import { User } from '@/types/User';
+import { PropType } from 'vue';
+import { ActionItem } from '../types/types';
+import BaseAvatar from './BaseAvatar.vue';
+import BaseLayoutStacked from './BaseLayoutStacked.vue';
+import BaseMenu from './BaseMenu.vue';
+import BaseNavbarItem from './BaseNavbarItem.vue';
+import BaseNavbarSideItem from './BaseNavbarSideItem.vue';
+
+defineProps({
+  appName: {
+    default: '',
+    type: String,
+  },
+  logoUrl: {
+    default: 'https://sprintify.witify.io/img/logo/logo-side.svg',
+    type: String,
+  },
+  menu: {
+    required: true,
+    type: Array as PropType<ActionItem[]>,
+  },
+  userMenu: {
+    required: true,
+    type: Array as PropType<ActionItem[]>,
+  },
+  user: {
+    required: true,
+    type: Object as PropType<User>,
+  },
+  dark: {
+    default: false,
+    type: Boolean,
+  },
+});
+</script>