@wishbone-media/spark 0.3.0 → 0.5.0

package/package.json

@@ -1,24 +1,33 @@
 {
   "name": "@wishbone-media/spark",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "files": [
     "dist",
-    "src"
+    "src",
+    "formkit.config.js",
+    "formkit.theme.mjs"
   ],
   "peerDependencies": {
-    "@headlessui/vue": "^1.7.0",
-    "@fortawesome/fontawesome-svg-core": "^6.7.2",
-    "@fortawesome/pro-regular-svg-icons": "^6.7.2",
-    "pinia": "^3.0.3",
-    "vue": "^3.5.16"
+    "@formkit/addons": "^1.6.9",
+    "@formkit/core": "^1.6.9",
+    "@formkit/icons": "^1.6.9",
+    "@formkit/pro": "^0.127.23",
+    "@formkit/themes": "^1.6.9",
+    "@formkit/vue": "^1.6.9",
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/pro-regular-svg-icons": "^7.1.0",
+    "@headlessui/vue": "^1.7.23",
+    "pinia": "^3.0.4",
+    "vue": "^3.5.24",
+    "vue-router": "^4.6.3"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.2.4",
-    "vite": "^6.3.5",
-    "vue": "^3.5.16"
+    "@vitejs/plugin-vue": "^6.0.2",
+    "vite": "^7.2.2",
+    "vue": "^3.5.24"
   },
   "packageManager": "pnpm@10.11.1",
   "scripts": {
@@ -29,7 +38,11 @@
   },
   "exports": {
     ".": "./dist/index.js",
-    "./src/*": "./src/*"
+    "./src/*": "./src/*",
+    "./formkit.config.js": "./formkit.config.js",
+    "./formkit.theme.mjs": "./formkit.theme.mjs",
+    "./assets/css/*": "./src/assets/css/*",
+    "./assets/fonts/*": "./src/assets/fonts/*"
   },
   "publishConfig": {
     "access": "public"

package/src/assets/css/fonts.css

@@ -0,0 +1,72 @@
+/* Inter font declarations */
+@font-face {
+  font-family: 'Inter';
+  src: url('../fonts/inter/Inter-Thin.woff2') format('woff2');
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../fonts/inter/Inter-ExtraLight.woff2') format('woff2');
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../fonts/inter/Inter-Light.woff2') format('woff2');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../fonts/inter/Inter-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../fonts/inter/Inter-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../fonts/inter/Inter-SemiBold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../fonts/inter/Inter-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../fonts/inter/Inter-ExtraBold.woff2') format('woff2');
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../fonts/inter/Inter-Black.woff2') format('woff2');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}

package/src/assets/css/index.css

@@ -0,0 +1,29 @@
+@import './fonts.css';
+
+:root {
+  font-family:
+    'Inter',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Open Sans',
+    'Helvetica Neue',
+    sans-serif;
+}
+
+html,
+body,
+#app {
+  @apply h-full;
+}
+
+@layer base {
+  button:not(:disabled),
+  [role='button']:not(:disabled) {
+    cursor: pointer;
+  }
+}

package/src/components/SparkCard.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="divide-y divide-gray-300 rounded-lg border border-gray-300 text-gray-700 bg-gray-100">
+    <div v-if="$slots.header" class="p-5">
+      <slot name="header" />
+    </div>
+
+    <div :class="[props.padded ? props.paddedClass : '']">
+      <slot></slot>
+    </div>
+
+    <div v-if="$slots.footer" class="p-5">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  padded: {
+    type: Boolean,
+    default: true,
+  },
+
+  paddedClass: {
+    type: String,
+    default: 'p-5',
+  },
+})
+</script>

package/src/components/index.js

@@ -3,6 +3,7 @@ export { default as SparkAppSelector } from './SparkAppSelector.vue'
 export { default as SparkBrandSelector } from './SparkBrandSelector.vue'
 export { default as SparkButton } from './SparkButton.vue'
 export { default as SparkButtonGroup } from './SparkButtonGroup.vue'
+export { default as SparkCard } from './SparkCard.vue'
 export { default as SparkModalContainer } from './SparkModalContainer.vue'
 export { default as SparkModalDialog } from './SparkModalDialog.vue'
 export { default as SparkOverlay } from './SparkOverlay.vue'

package/src/containers/SparkDefaultContainer.vue

@@ -0,0 +1,210 @@
+<template>
+  <div :class="sidebarClass" class="fixed inset-y-0 flex transition-all z-100">
+    <div class="flex grow m-2.5 p-[10px] rounded-lg">
+      <nav class="flex flex-1 flex-col">
+        <ul class="flex flex-1 flex-col gap-y-7" role="list">
+          <li>
+            <ul role="list">
+              <li class="flex items-center pb-8">
+                <a
+                  class="grid w-[40px] h-[40px] place-items-center rounded-md bg-primary-600 text-white text-[13px] cursor-pointer"
+                  @click.prevent="mainNavStore.goto('dashboard')"
+                >
+                  <font-awesome-icon :icon="Icons[appStore.state.icon]" class="size-5" />
+                </a>
+                <a
+                  @click.prevent="mainNavStore.goto('dashboard')"
+                  v-if="!mainNavStore.state.collapsed"
+                  class="font-medium text-gray-800 ml-[10px] cursor-pointer"
+                >
+                  {{ appStore.state.app }}
+                </a>
+              </li>
+              <template v-for="item in mainNavStore.state.menu" :key="item.name">
+                <li
+                  :class="{
+                    'mt-[10px]': item.children,
+                  }"
+                >
+                  <a
+                    :class="{
+                      'bg-gray-100': item.current,
+                      'hover:bg-gray-100': item?.href,
+                    }"
+                    :href="item?.href"
+                    class="h-[37px] sgroup flex items-center gap-x-2 rounded-md p-3 text-gray-800 leading-5 transition-all duration-300 ease-in-out"
+                    @click.prevent="mainNavStore.goto(item.href)"
+                  >
+                    <font-awesome-icon
+                      :icon="Icons[item.icon]"
+                      :class="[item.current ? 'text-gray-400' : 'text-gray-400']"
+                      class="size-4"
+                      v-if="item.icon"
+                    />
+                    <span
+                      v-if="!mainNavStore.state.collapsed"
+                      :class="{
+                        'text-[11px]': item?.children,
+                        'text-[13px]': !item?.children,
+                        'font-semibold': item?.children,
+                        'text-gray-500': item?.children,
+                      }"
+                    >
+                      {{ item.name }}
+                    </span>
+                    <div v-else-if="item?.children" class="w-full flex justify-center">
+                      <div class="w-[10px] h-px bg-gray-400"></div>
+                    </div>
+                  </a>
+                  <ul v-if="item.children" class="mt-[5px] flex flex-col gap-[5px]">
+                    <li v-for="child in item.children" :key="child.name">
+                      <a
+                        :class="[child.current ? 'bg-gray-100' : '', 'hover:bg-gray-100']"
+                        :href="child.href"
+                        class="h-[37px] sgroup flex items-center gap-x-2 rounded-md p-3 text-gray-800 leading-5 transition-all duration-300 ease-in-out"
+                        @click.prevent="mainNavStore.goto(child.href)"
+                      >
+                        <font-awesome-icon
+                          v-if="child.icon"
+                          :icon="Icons[child.icon]"
+                          :class="[child.current ? 'text-gray-400' : 'text-gray-400']"
+                          class="size-4"
+                        />
+                        <span class="text-[13px]" v-if="!mainNavStore.state.collapsed">
+                          {{ child.name }}
+                        </span>
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+              </template>
+            </ul>
+          </li>
+          <li class="mt-auto">
+            <a
+              class="font-medium grid place-content-center gap-x-3 rounded-md h-10 p-2.5 text-gray-800 text-[13px] hover:bg-gray-100 transition-all duration-300 ease-in-out"
+              href="#"
+              @click.prevent="mainNavStore.toggleCollapsed()"
+            >
+              <font-awesome-icon
+                :icon="
+                  Icons[mainNavStore.state.collapsed ? 'farArrowRightToLine' : 'farArrowLeftToLine']
+                "
+                class="class-5"
+              />
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+
+  <div :class="contentClass" class="h-full transition-all flex flex-col">
+    <div class="p-[10px] flex-shrink-0">
+      <div class="flex flex-1 items-center gap-x-6">
+        <div class="relative flex flex-1 items-center justify-between">
+          <div class="cursor-pointer">
+            <font-awesome-icon
+              :icon="Icons.farBarsSort"
+              class="size-5"
+              @click="mainNavStore.toggleHidden()"
+            />
+          </div>
+
+          <div class="cursor-pointer h-9 flex items-center" @click="toggleBrandSelector">
+            <img
+              v-if="sparkBrandFilterStore.currentBrand"
+              :src="sparkBrandFilterStore.currentBrand.logo"
+              alt=""
+              class="h-[30px] w-auto"
+            />
+          </div>
+
+          <button
+            class="rounded-sm bg-white w-[42px] h-[42px] ring-1 ring-inset ring-gray-300"
+            type="button"
+            @click="toggleAppSelector"
+          >
+            <font-awesome-icon :icon="Icons.farGripDotsVertical" class="size-4 text-gray-400" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <main class="mr-[10px] pb-[10px] flex-1 flex flex-col">
+      <router-view />
+    </main>
+  </div>
+
+  <spark-overlay
+    position="left"
+    :overlay-instance="sparkOverlayService.left"
+    @close="sparkOverlayService.closeLeft"
+  />
+  <spark-overlay
+    position="right"
+    :overlay-instance="sparkOverlayService.right"
+    @close="sparkOverlayService.closeRight"
+  />
+
+  <spark-modal-container />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import {
+  SparkOverlay,
+  SparkBrandSelector,
+  useSparkBrandFilterStore,
+  SparkAppSelector,
+  sparkOverlayService,
+  SparkModalContainer,
+  Icons,
+} from '@/index.js'
+
+const props = defineProps({
+  appStore: {
+    type: Object,
+    required: true,
+  },
+  mainNavStore: {
+    type: Object,
+    required: true,
+  },
+})
+
+const sparkBrandFilterStore = useSparkBrandFilterStore()
+
+const toggleAppSelector = () => {
+  sparkOverlayService.showRight(SparkAppSelector, {
+    currentApp: props.appStore.state.app,
+  })
+}
+
+const toggleBrandSelector = () => {
+  sparkOverlayService.showLeft(
+    SparkBrandSelector,
+    {},
+    {
+      select: (brand) => {
+        sparkBrandFilterStore.toggleBrand(brand)
+        sparkOverlayService.closeLeft()
+      },
+    },
+  )
+}
+
+const sidebarClass = computed(() => {
+  if (props.mainNavStore.state.hidden) {
+    return ['w-0 overflow-hidden']
+  }
+  return [props.mainNavStore.state.collapsed ? 'w-[80px]' : 'w-[240px]']
+})
+
+const contentClass = computed(() => {
+  if (props.mainNavStore.state.hidden) {
+    return ['pl-2.5']
+  }
+  return [props.mainNavStore.state.collapsed ? 'pl-[80px]' : 'pl-[240px]']
+})
+</script>

package/src/containers/SparkPublicContainer.vue

@@ -0,0 +1,8 @@
+<template>
+  <main class="h-full">
+    <router-view />
+  </main>
+</template>
+
+<script setup>
+</script>

package/src/containers/index.js

@@ -0,0 +1,2 @@
+export { default as SparkDefaultContainer } from './SparkDefaultContainer.vue'
+export { default as SparkPublicContainer } from './SparkPublicContainer.vue'

package/src/index.js

@@ -1,4 +1,6 @@
 export * from './components/index.js'
 export * from './composables/index.js'
+export * from './containers/index.js'
 export * from './plugins/index.js'
-export * from './stores/index.js'
+export * from './stores/index.js'
+export * from './views/index.js'

package/src/plugins/fontawesome.js

@@ -1,37 +1,85 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 import {
-  faExclamationTriangle,
+  faArrowLeftToLine,
+  faArrowRightToLine,
+  faBarsSort,
+  faBellRing,
+  faBullhorn,
+  faCheck,
   faCheckCircle,
-  faInfoCircle,
+  faChevronDown,
+  faChevronLeft,
+  faChevronRight,
+  faChevronUp,
+  faCircleUser,
   faCircleXmark,
-  faXmark,
-  faCheck,
-  faTimes,
+  faComments,
+  faEdit,
+  faEllipsis,
+  faEllipsisVertical,
+  faExclamationTriangle,
+  faFaceSmileRelaxed,
+  faFaceSmileWink,
+  faFlag,
+  faGearComplex,
+  faGripDotsVertical,
+  faInfoCircle,
   faLaptopMobile,
+  faLayerPlus,
   faSatelliteDish,
   faScaleBalanced,
+  faSort,
+  faSortDown,
+  faSortUp,
   faStreetView,
-  faFaceSmileRelaxed,
-  faComments,
+  faTimes,
+  faXmark,
 } from '@fortawesome/pro-regular-svg-icons'
 
 export const Icons = {
-  farExclamationTriangle: faExclamationTriangle,
+  farArrowLeftToLine: faArrowLeftToLine,
+  farArrowRightToLine: faArrowRightToLine,
+  farBarsSort: faBarsSort,
+  farBellRing: faBellRing,
+  farBullhorn: faBullhorn,
+  farCheck: faCheck,
   farCheckCircle: faCheckCircle,
-  farInfoCircle: faInfoCircle,
+  farChevronDown: faChevronDown,
+  farChevronLeft: faChevronLeft,
+  farChevronRight: faChevronRight,
+  farChevronUp: faChevronUp,
+  farCircleUser: faCircleUser,
   farCircleXmark: faCircleXmark,
-  farXmark: faXmark,
-  farCheck: faCheck,
-  farTimes: faTimes,
+  farComments: faComments,
+  farEdit: faEdit,
+  farEllipsis: faEllipsis,
+  farEllipsisVertical: faEllipsisVertical,
+  farExclamationTriangle: faExclamationTriangle,
+  farFaceSmileRelaxed: faFaceSmileRelaxed,
+  farFaceSmileWink: faFaceSmileWink,
+  farFlag: faFlag,
+  farGearComplex: faGearComplex,
+  farGripDotsVertical: faGripDotsVertical,
+  farInfoCircle: faInfoCircle,
   farLaptopMobile: faLaptopMobile,
+  farLayerPlus: faLayerPlus,
   farSatelliteDish: faSatelliteDish,
   farScaleBalanced: faScaleBalanced,
+  farSort: faSort,
+  farSortDown: faSortDown,
+  farSortUp: faSortUp,
   farStreetView: faStreetView,
-  farFaceSmileRelaxed: faFaceSmileRelaxed,
-  farComments: faComments,
+  farTimes: faTimes,
+  farXmark: faXmark,
 }
 
 export function addSparkIcons() {
   library.add(...Object.values(Icons))
+}
+
+export function setupFontAwesome(app) {
+  library.add(...Object.values(Icons))
+  app.component('FontAwesomeIcon', FontAwesomeIcon)
 }

package/src/plugins/index.js

@@ -1 +1 @@
-export { Icons, addSparkIcons } from './fontawesome.js'
+export { Icons, addSparkIcons, setupFontAwesome } from './fontawesome.js'

package/src/stores/app.js

@@ -0,0 +1,19 @@
+import { defineStore } from 'pinia'
+import { reactive } from 'vue'
+
+export const useSparkAppStore = defineStore('sparkApp', () => {
+  const state = reactive({
+    app: '',
+    icon: '',
+  })
+
+  const initialize = (config = {}) => {
+    state.app = config.app || ''
+    state.icon = config.icon || ''
+  }
+
+  return {
+    state,
+    initialize,
+  }
+})

package/src/stores/index.js

@@ -1 +1,3 @@
-export * from './brand-filter.js'
+export * from './app.js'
+export * from './brand-filter.js'
+export * from './navigation.js'

package/src/stores/navigation.js

@@ -0,0 +1,68 @@
+import { defineStore } from 'pinia'
+import { reactive } from 'vue'
+import { useRouter } from 'vue-router'
+
+export const useSparkNavStore = defineStore('sparkNav', () => {
+  const state = reactive({
+    menu: [],
+    collapsed: false,
+    hidden: false,
+  })
+
+  const router = useRouter()
+
+  const initialize = (menuConfig = []) => {
+    state.menu = menuConfig
+  }
+
+  const findMenuItemByRoute = (items, route) => {
+    for (const item of items) {
+      if (item.href === route) return item
+      if (item.children) {
+        const found = findMenuItemByRoute(item.children, route)
+        if (found) return found
+      }
+    }
+    return null
+  }
+
+  const goto = async (route) => {
+    if (route) {
+      const updateMenuItemCurrent = (items) => {
+        items.forEach((item) => {
+          item.current = item.href === route
+          if (item.children) {
+            updateMenuItemCurrent(item.children)
+          }
+        })
+      }
+
+      updateMenuItemCurrent(state.menu)
+
+      const menuItem = findMenuItemByRoute(state.menu, route)
+
+      if (menuItem && typeof menuItem.action === 'function') {
+        menuItem.action()
+        return
+      }
+
+      await router.push(route)
+    }
+  }
+
+  const toggleCollapsed = () => {
+    state.collapsed = !state.collapsed
+  }
+
+  const toggleHidden = () => {
+    state.hidden = !state.hidden
+  }
+
+  return {
+    state,
+    initialize,
+    goto,
+    toggleCollapsed,
+    toggleHidden,
+  }
+})