cloudcommerce 0.1.6 → 0.2.0

package/packages/storefront/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/storefront",
   "type": "module",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "description": "E-Com Plus Cloud Commerce storefront with Astro",
   "main": "src/index.js",
   "repository": {
@@ -37,25 +37,26 @@
     "@fastify/deepmerge": "^1.3.0",
     "@headlessui/vue": "^1.7.7",
     "@iconify-json/fa6-brands": "^1.1.8",
-    "@iconify-json/heroicons": "^1.1.6",
-    "@iconify-json/logos": "^1.1.19",
-    "@vueuse/core": "^9.9.0",
-    "astro": "^1.7.2",
+    "@iconify-json/heroicons": "^1.1.8",
+    "@iconify-json/logos": "^1.1.22",
+    "@vite-pwa/astro": "^0.0.1",
+    "@vueuse/core": "^9.10.0",
+    "astro": "^1.9.2",
     "chroma-js": "^2.4.2",
     "dotenv": "^16.0.3",
     "firebase": "^9.15.0",
     "image-size": "^1.0.2",
+    "lodash": "^4.17.21",
     "semver": "^7.3.8",
     "sharp": "^0.31.3",
     "tailwindcss": "^3.2.4",
-    "unocss": "^0.48.0",
+    "unocss": "^0.48.4",
     "vite": "^3.2.5",
-    "vite-plugin-pwa": "^0.14.0",
-    "vue": "^3.2.45",
-    "vue-bind-once": "^0.1.1"
+    "vite-plugin-pwa": "^0.14.1",
+    "vue": "^3.2.45"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.7",
+    "@babel/core": "^7.20.12",
     "@cloudcommerce/types": "workspace:*"
   }
 }

package/packages/storefront/src/env.d.ts

@@ -1,3 +1,12 @@
 /// <reference types="@astrojs/image/client" />
 /// <reference types="vite-plugin-pwa/client" />
+/// <reference types="vue/ref-macros" />
 /// <reference types="../client" />
+
+/* eslint-disable import/newline-after-import */
+
+declare module '*.vue' {
+  import { type DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

package/packages/storefront/src/lib/assets/tooltip.css

@@ -1,8 +1,9 @@
 [data-tooltip] {
   position: relative;
   cursor: help;
-  --c-background: var(--c-tooltip-background, rgba(44, 44, 44, 0.85));
-  --c-foreground: var(--c-tooltip-foreground, var(--c-on-dark));
+  --background-color: var(--c-tooltip-background, rgba(44, 44, 44, 0.85));
+  --color: var(--c-tooltip-foreground, var(--c-on-dark));
+  --border-color: transparent transparent var(--background-color) transparent;
 }
 [data-tooltip]::before {
   content: attr(data-tooltip);
@@ -16,8 +17,8 @@
   margin-top: 5px;
   font-size: clamp(0.75rem, 90%, 1rem);
   width: max-content;
-  background-color: var(--c-background);
-  color: var(--c-foreground);
+  background-color: var(--background-color);
+  color: var(--color);
   text-align: center;
   @apply rounded-sm py-1 px-2 leading-snug;
 }
@@ -34,7 +35,7 @@
   margin-top: -4px;
   border-width: 5px;
   border-style: solid;
-  border-color: transparent transparent var(--c-background) transparent;
+  border-color: var(--border-color);
 }
 [data-tooltip]:hover::before,
 [data-tooltip]:hover::after {

package/packages/storefront/src/lib/components/Carousel.vue

@@ -0,0 +1,259 @@
+<script setup lang="ts">
+/* REFERENCE: https://github.com/bartdominiak/vue-snap */
+import {
+  onMounted,
+  onBeforeUnmount,
+  ref,
+  watch,
+  toRef,
+  nextTick,
+  provide,
+} from 'vue';
+import debounce from 'lodash/debounce';
+import { useElementHover } from '@vueuse/core';
+import { carouselKey } from './_injection-keys';
+import CarouselControl from './CarouselControl.vue';
+
+export interface Props {
+  as?: string;
+  modelValue?: number;
+  autoplay?: number; // milliseconds
+}
+
+const approximatelyEqual = (v1, v2, epsilon) => {
+  return Math.abs(v1 - v2) <= epsilon;
+};
+const SCROLL_DEBOUNCE = 100;
+const RESIZE_DEBOUNCE = 410;
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'ul',
+  modelValue: 1,
+});
+const emit = defineEmits([
+  'update:modelValue',
+  'bound-left',
+  'bound-right',
+]);
+
+const currentPage = ref(props.modelValue - 1);
+watch(toRef(props, 'modelValue'), (modelValue) => {
+  currentPage.value = modelValue - 1;
+});
+watch(currentPage, (current, previous) => {
+  if (current !== previous) {
+    emit('update:modelValue', current + 1);
+  }
+});
+const wrapper = ref<HTMLElement>(null);
+const isBoundLeft = ref(true);
+const isBoundRight = ref(false);
+const slidesWidth = ref([]);
+const wrapperScrollWidth = ref(0);
+const wrapperVisibleWidth = ref(0);
+const currentPos = ref(0);
+const maxPages = ref(0);
+const onResizeFn = ref(null);
+const onScrollFn = ref(null);
+const calcBounds = () => {
+  // Find the closest point, with 5px approximate.
+  const _isBoundLeft = approximatelyEqual(currentPos.value, 0, 5);
+  const _isBoundRight = approximatelyEqual(
+    wrapperScrollWidth.value - wrapperVisibleWidth.value,
+    currentPos.value,
+    5,
+  );
+  if (_isBoundLeft) {
+    emit('bound-left', true);
+  }
+  isBoundLeft.value = _isBoundLeft;
+  if (_isBoundRight) {
+    emit('bound-right', true);
+  }
+  isBoundRight.value = _isBoundRight;
+};
+const calcWrapperWidth = () => {
+  wrapperScrollWidth.value = wrapper.value.scrollWidth;
+  wrapperVisibleWidth.value = wrapper.value.offsetWidth;
+};
+const calcSlidesWidth = () => {
+  const childNodes = [...wrapper.value.children];
+  slidesWidth.value = childNodes.map((node: HTMLElement) => ({
+    offsetLeft: node.offsetLeft,
+    width: node.offsetWidth,
+  }));
+};
+const calcNextWidth = (direction) => {
+  const nextSlideIndex = direction > 0 ? currentPage.value : currentPage.value + direction;
+  const width = slidesWidth.value[nextSlideIndex].width || 0;
+  if (!width) {
+    return 0;
+  }
+  return width * direction;
+};
+const calcCurrentPage = () => {
+  const getCurrentPage = slidesWidth.value.findIndex((slide) => {
+    // Find the closest point, with 5px approximate.
+    return approximatelyEqual(slide.offsetLeft, currentPos.value, 5);
+  });
+  if (getCurrentPage !== -1 && getCurrentPage !== -2) {
+    currentPage.value = getCurrentPage || 0;
+  }
+};
+const calcCurrentPosition = () => {
+  currentPos.value = wrapper.value.scrollLeft || 0;
+};
+const calcMaxPages = () => {
+  const maxPos = wrapperScrollWidth.value - wrapperVisibleWidth.value;
+  maxPages.value = slidesWidth.value
+    .findIndex(({ offsetLeft }) => (offsetLeft >= maxPos));
+};
+const calcOnInit = () => {
+  if (!wrapper.value) {
+    return;
+  }
+  calcWrapperWidth();
+  calcSlidesWidth();
+  calcCurrentPosition();
+  calcCurrentPage();
+  calcBounds();
+  calcMaxPages();
+};
+const calcOnScroll = () => {
+  if (!wrapper.value) {
+    return;
+  }
+  calcCurrentPosition();
+  calcCurrentPage();
+  calcBounds();
+};
+let autoplayTimer = null;
+const restartAutoplay = () => {
+  if (props.autoplay) {
+    clearTimeout(autoplayTimer);
+    autoplayTimer = setTimeout(() => {
+      // eslint-disable-next-line no-use-before-define
+      changeSlide(1);
+    }, props.autoplay);
+  }
+};
+const changeSlide = (direction: number) => {
+  if (direction < 0) {
+    if (isBoundLeft.value) {
+      calcMaxPages();
+      currentPage.value = maxPages.value - 1;
+      changeSlide(1);
+      return;
+    }
+  } else if (isBoundRight.value) {
+    currentPage.value = 1;
+    changeSlide(-1);
+    return;
+  }
+  const nextSlideWidth = calcNextWidth(direction);
+  if (nextSlideWidth) {
+    wrapper.value.scrollBy({ left: nextSlideWidth, behavior: 'smooth' });
+    restartAutoplay();
+  }
+};
+const carousel = ref(null);
+const isHovered = useElementHover(carousel);
+watch(isHovered, (_isHovered) => {
+  if (_isHovered) {
+    clearTimeout(autoplayTimer);
+  } else {
+    restartAutoplay();
+  }
+});
+onMounted(() => {
+  calcOnInit();
+  if (!import.meta.env.SSR) {
+    // Assign to new variable and keep reference for removeEventListener (Avoid Memory Leaks)
+    onScrollFn.value = debounce(calcOnScroll, SCROLL_DEBOUNCE);
+    onResizeFn.value = debounce(calcOnInit, RESIZE_DEBOUNCE);
+    wrapper.value.addEventListener('scroll', onScrollFn.value);
+    window.addEventListener('resize', onResizeFn.value);
+    nextTick(() => {
+      [...wrapper.value.children].forEach((slide: HTMLElement) => {
+        slide.setAttribute('tabindex', '0');
+      });
+    });
+    restartAutoplay();
+  }
+});
+onBeforeUnmount(() => {
+  if (!import.meta.env.SSR) {
+    wrapper.value.removeEventListener('scroll', onScrollFn.value);
+    window.removeEventListener('resize', onResizeFn.value);
+    clearTimeout(autoplayTimer);
+  }
+});
+provide(carouselKey, {
+  autoplay: toRef(props, 'autoplay'),
+  changeSlide,
+  isBoundLeft,
+  isBoundRight,
+});
+</script>
+
+<template>
+  <div ref="carousel" data-carousel>
+    <component :is="as" ref="wrapper" data-carousel-wrapper>
+      <slot />
+    </component>
+    <!-- @slot Slot for Arrows -->
+    <slot
+      name="controls"
+      v-bind="{ changeSlide, isBoundLeft, isBoundRight }"
+    >
+      <CarouselControl :direction="-1">
+        <slot name="previous" />
+      </CarouselControl>
+      <CarouselControl>
+        <slot name="next" />
+      </CarouselControl>
+    </slot>
+  </div>
+</template>
+
+<style>
+[data-carousel] {
+  position: relative;
+}
+[data-carousel-wrapper] {
+  display: flex;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: none;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+[data-carousel-wrapper]::-webkit-scrollbar {
+  display: none;
+}
+[data-carousel-wrapper] > * {
+  flex: 0 0 100%;
+  height: 100%;
+  scroll-snap-align: start;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  outline: none;
+}
+[data-carousel-control] {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+}
+[data-carousel-control=previous] {
+  left: 0;
+}
+[data-carousel-control=next] {
+  right: 0;
+}
+</style>

package/packages/storefront/src/lib/components/CarouselControl.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { inject } from 'vue';
+import { carouselKey } from './_injection-keys';
+
+export interface Props {
+  direction?: number;
+}
+
+withDefaults(defineProps<Props>(), {
+  direction: 1,
+});
+const { changeSlide } = inject(carouselKey);
+</script>
+
+<template>
+  <button
+    type="button"
+    :aria-label="direction > 0 ? $t.i19next : $t.i19previous"
+    @click="changeSlide(direction)"
+    :data-carousel-control="direction > 0 ? 'next' : 'previous'"
+  >
+    <slot>
+      <i
+        class="mb-0 z-10"
+        :class="direction > 0 ? 'i-chevron-right' : 'i-chevron-left'"
+      ></i>
+    </slot>
+  </button>
+</template>

package/packages/storefront/src/lib/components/LoginDrawer.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { ref, defineAsyncComponent } from 'vue';
 import { i19myAccount, i19myOrders } from '@@i18n';
-import ADrawer from '@@components/ADrawer.vue';
+import ADrawer from '@@sf/components/ADrawer.vue';
 
 export interface Props {
   accountUrl?: string;

package/packages/storefront/src/lib/components/PitchBar.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import Carousel from '@@sf/components/Carousel.vue';
+import CarouselControl from '@@sf/components/CarouselControl.vue';
+
+export interface Props {
+  slides: Array<{
+    href?: string;
+    target?: string;
+    html: string;
+  }>;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+  <div data-pitch-bar class="bg-base-100">
+    <div class="container md:w-2/3 mx-auto px-3 py-1">
+      <Carousel :autoplay="7000">
+        <li v-for="({ href, target, html }, i) in slides" :key="i">
+          <component
+            :is="href ? 'ALink' : 'span'"
+            :href="href"
+            :target="target"
+            :class="href ? 'hover:underline' : null"
+          >
+            <slot name="slide">
+              <span v-html="html" class="prose text-sm text-base-800"></span>
+            </slot>
+          </component>
+        </li>
+        <template #controls>
+          <div class="text-xl leading-none text-base-400">
+            <CarouselControl
+              :direction="-1"
+              class="pr-2 bg-base-100 hover:text-base-700"
+            />
+            <CarouselControl class="pl-2 bg-base-100 hover:text-base-700" />
+          </div>
+        </template>
+      </Carousel>
+    </div>
+  </div>
+</template>