@meeovi/layer-shared 1.0.0

package/app/components/ui/ProductCard/ProductCard.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="border border-neutral-200 rounded-md hover:shadow-lg flex-auto flex-shrink-0" data-testid="product-card">
+    <div class="relative">
+      <SfLink :tag="NuxtLink" :to="`${paths.product}${slug}`">
+        <NuxtImg
+          :src="imageUrl"
+          :alt="imageAlt"
+          class="object-cover rounded-md aspect-square w-full h-full"
+          data-testid="image-slot"
+          width="190"
+          height="190"
+          :loading="lazy && !priority ? 'lazy' : undefined"
+          :fetchpriority="priority ? 'high' : undefined"
+          :preload="priority"
+          format="webp"
+        />
+      </SfLink>
+    </div>
+    <div class="p-2 border-t border-neutral-200 typography-text-sm">
+      <SfLink :tag="NuxtLink" :to="`${paths.product}${slug}`" class="no-underline" variant="secondary">
+        {{ name }}
+      </SfLink>
+      <div class="flex items-center pt-1">
+        <SfRating size="xs" :value="rating ?? 0" :max="5" />
+        <SfLink to="#" variant="secondary" :tag="NuxtLink" class="ml-1 no-underline">
+          <SfCounter size="xs">{{ ratingCount }}</SfCounter>
+        </SfLink>
+      </div>
+      <p class="block py-2 font-normal typography-text-xs text-neutral-700 text-justify">
+        {{ description }}
+      </p>
+      <span class="block pb-2 font-bold typography-text-sm" data-testid="product-card-vertical-price">
+        ${{ price }}
+      </span>
+      <SfButton size="sm">
+        <template #prefix>
+          <SfIconShoppingCart size="sm" />
+        </template>
+        {{ $t('addToCartShort') }}
+      </SfButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SfLink, SfRating, SfCounter, SfButton, SfIconShoppingCart } from '@storefront-ui/vue';
+import type { ProductCardProps } from '~/components/ui/ProductCard/types';
+
+withDefaults(defineProps<ProductCardProps>(), {
+  lazy: true,
+  imageAlt: '',
+});
+
+const NuxtLink = resolveComponent('NuxtLink');
+</script>

package/app/components/ui/ProductCard/__tests__/ProductCard.spec.ts

@@ -0,0 +1,16 @@
+import { mount } from '@vue/test-utils';
+import ProductCard from '~/components/ui/ProductCard/ProductCard.vue';
+
+describe('<ProductCard />', () => {
+  it('should render component', () => {
+    const { getByTestId } = mount(ProductCard, {
+      props: {
+        name: 'test',
+        price: 100,
+        imageUrl: '/images/product.webp',
+      },
+    });
+
+    expect(getByTestId('product-card'));
+  });
+});

package/app/components/ui/ProductCard/types.ts

@@ -0,0 +1,12 @@
+export type ProductCardProps = {
+  name: string;
+  imageUrl: string;
+  imageAlt?: string;
+  description?: string;
+  rating?: number;
+  ratingCount?: number;
+  price?: number;
+  slug?: string;
+  priority?: boolean;
+  lazy?: boolean;
+};

package/app/components/ui/ProductCardHorizontal/ProductCardHorizontal.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="flex min-w-[320px] max-w-[470px] pt-4" data-testid="product-card-horizontal">
+    <div class="relative overflow-hidden rounded-md w-[100px]">
+      <NuxtImg
+        class="w-full h-auto border rounded-md border-neutral-200"
+        :src="product.gallery[0].url"
+        :alt="product.gallery[0].alt ?? ''"
+        width="100"
+        height="100"
+      />
+    </div>
+    <div class="flex flex-col pl-4 min-w-[180px] flex-1 typography-text-base">
+      {{ product.name }}
+      <div class="my-2 sm:mb-0">
+        <ul class="font-normal leading-5 typography-text-xs sm:typography-text-sm text-neutral-700">
+          <li>
+            <span class="mr-1">{{ product.attributes[0].name }}:</span>
+            <span class="font-medium">{{ product.attributes[0].value }}</span>
+          </li>
+          <li>
+            <span class="mr-1">{{ product.attributes[1].name }}:</span>
+            <span class="font-medium">{{ product.attributes[1].value }}</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ProductHorizontalProps } from '~/components/ui/ProductCardHorizontal/types';
+
+defineProps<ProductHorizontalProps>();
+</script>

package/app/components/ui/ProductCardHorizontal/__tests__/ProductCardHorizontal.spec.ts

@@ -0,0 +1,36 @@
+import { mount } from '@vue/test-utils';
+import ProductCardHorizontal from '~/components/ui/ProductCardHorizontal/ProductCardHorizontal.vue';
+
+describe('<ProductCardHorizontal />', () => {
+  it('should render component', () => {
+    const { getByTestId } = mount(ProductCardHorizontal, {
+      props: {
+        product: {
+          name: 'Smartwatch Fitness Tracker',
+          gallery: [
+            {
+              alt: 'Smartwatch Fitness Tracker',
+              url: '/images/watch.png',
+            },
+          ],
+          attributes: [
+            {
+              label: 'Size',
+              name: 'Size',
+              value: '1.9″',
+              valueLabel: 'value',
+            },
+            {
+              name: 'Color',
+              label: 'color',
+              value: 'Black',
+              valueLabel: 'value',
+            },
+          ],
+        },
+      },
+    });
+
+    expect(getByTestId('product-card-horizontal'));    
+  });
+});

package/app/components/ui/ProductCardHorizontal/types.ts

@@ -0,0 +1,8 @@
+import type { SfProduct } from '@vue-storefront/unified-data-model';
+
+export type ProductHorizontalProps = {
+  product: Omit<
+    SfProduct,
+    'id' | 'sku' | 'slug' | 'description' | 'price' | 'primaryImage' | 'rating' | 'variants' | 'quantityLimit'
+  >;
+};

package/app/components/ui/PurchaseCard/PurchaseCard.vue

@@ -0,0 +1,109 @@
+<template>
+  <section
+    class="p-4 xl:p-6 md:border md:border-neutral-100 md:shadow-lg md:rounded-md md:sticky md:top-20"
+    data-testid="purchase-card"
+  >
+    <UiTag variant="secondary" strong class="mb-4">
+      <SfIconSell size="sm" class="mr-1" />
+      <span class="mr-1">{{ $t(`sale`) }}</span>
+    </UiTag>
+    <h1 class="mb-1 font-bold typography-headline-4" data-testid="product-name">{{ product.name }}</h1>
+    <div class="my-1">
+      <span class="mr-2 text-secondary-700 font-bold font-headings text-2xl" data-testid="price">
+        ${{ product.price?.value.amount }}
+      </span>
+      <span class="text-base font-normal text-neutral-500 line-through">
+        ${{ product.price?.regularPrice.amount }}
+      </span>
+    </div>
+    <div class="inline-flex items-center mt-4 mb-2">
+      <SfRating size="xs" :value="product.rating?.average" :max="5" />
+      <SfCounter class="ml-1" size="xs">{{ product.rating?.count }}</SfCounter>
+      <SfLink href="#" variant="secondary" class="ml-2 text-xs text-neutral-500">
+        {{ $t('reviewsCount', { count: product.rating?.count }) }}
+      </SfLink>
+    </div>
+    <p class="mb-4 font-normal typography-text-sm" data-testid="product-description">
+      {{ product.description }}
+    </p>
+    <div class="py-4 mb-4 border-gray-200 border-y">
+      <UiTag class="w-full mb-4">
+        <SfIconShoppingCartCheckout />
+        {{ $t('numberInCart', { count: 1 }) }}
+      </UiTag>
+      <div class="flex flex-col md:flex-row flex-wrap gap-4">
+        <UiQuantitySelector :value="quantitySelectorValue" class="min-w-[145px] flex-grow flex-shrink-0 basis-0" />
+        <SfButton size="lg" class="flex-grow-[2] flex-shrink basis-auto whitespace-nowrap">
+          <template #prefix>
+            <SfIconShoppingCart size="sm" />
+          </template>
+          {{ $t('addToCart') }}
+        </SfButton>
+      </div>
+      <div class="flex justify-center mt-4 gap-x-4">
+        <SfButton size="sm" variant="tertiary">
+          <template #prefix>
+            <SfIconCompareArrows size="sm" />
+          </template>
+          {{ $t('compare') }}
+        </SfButton>
+        <SfButton size="sm" variant="tertiary">
+          <SfIconFavorite size="sm" />
+          {{ $t('addToList') }}
+        </SfButton>
+      </div>
+    </div>
+    <div class="flex first:mt-4">
+      <SfIconPackage size="sm" class="flex-shrink-0 mr-1 text-neutral-500" />
+      <p class="text-sm">
+        <i18n-t keypath="additionalInfo.shipping">
+          <template #addAddress>
+            <SfLink href="#" variant="secondary">{{ $t('additionalInfo.addAddress') }}</SfLink>
+          </template>
+        </i18n-t>
+      </p>
+    </div>
+    <div class="flex mt-4">
+      <SfIconWarehouse size="sm" class="flex-shrink-0 mr-1 text-neutral-500" />
+      <p class="text-sm">
+        <i18n-t keypath="additionalInfo.pickup">
+          <template #checkAvailability>
+            <SfLink href="#" variant="secondary">{{ $t('additionalInfo.checkAvailability') }}</SfLink>
+          </template>
+        </i18n-t>
+      </p>
+    </div>
+    <div class="flex mt-4">
+      <p class="text-sm">
+        <SfIconSafetyCheck size="sm" class="flex-shrink-0 mr-1 text-neutral-500" />
+        <i18n-t keypath="additionalInfo.returns">
+          <template #details>
+            <SfLink href="#" variant="secondary">{{ $t('additionalInfo.details') }}</SfLink>
+          </template>
+        </i18n-t>
+      </p>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import {
+  SfButton,
+  SfCounter,
+  SfLink,
+  SfRating,
+  SfIconSafetyCheck,
+  SfIconCompareArrows,
+  SfIconWarehouse,
+  SfIconPackage,
+  SfIconFavorite,
+  SfIconSell,
+  SfIconShoppingCartCheckout,
+  SfIconShoppingCart,
+} from '@storefront-ui/vue';
+import type { PurchaseCardProps } from '~/components/ui/PurchaseCard/types';
+
+defineProps<PurchaseCardProps>();
+
+const quantitySelectorValue = ref(1);
+</script>

package/app/components/ui/PurchaseCard/__tests__/PurchaseCard.spec.ts

@@ -0,0 +1,15 @@
+import { mount } from '@vue/test-utils';
+import PurchaseCard from '~/components/ui/PurchaseCard/PurchaseCard.vue';
+import type { SfProduct } from '@vue-storefront/unified-data-model';
+
+describe('<PurchaseCard />', () => {
+  it('should render component', () => {
+    const wrapper = mount(PurchaseCard, {
+      props: {
+        product: {} as SfProduct,
+      },
+    });
+
+    expect(wrapper.getByTestId('purchase-card'));
+  });
+});

package/app/components/ui/PurchaseCard/types.ts

@@ -0,0 +1,5 @@
+import type { SfProduct } from '@vue-storefront/unified-data-model';
+
+export type PurchaseCardProps = {
+  product: SfProduct;
+};

package/app/components/ui/QuantitySelector/QuantitySelector.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="inline-flex flex-col items-center" data-testid="quantity-selector">
+    <div class="flex border border-neutral-300 rounded-md h-full w-full">
+      <SfButton
+        variant="tertiary"
+        :disabled="count <= minValue"
+        square
+        class="rounded-r-none"
+        :aria-controls="inputId"
+        :aria-label="$t('quantitySelectorDecrease')"
+        data-testid="quantity-selector-decrease-button"
+        @click="dec()"
+      >
+        <SfIconRemove />
+      </SfButton>
+      <input
+        :id="inputId"
+        v-model="count"
+        type="number"
+        role="spinbutton"
+        :class="inputClasses"
+        :min="minValue"
+        :max="maxValue"
+        data-testid="quantity-selector-input"
+        :aria-label="$t('quantitySelector')"
+        @input="handleOnChange"
+      />
+      <SfButton
+        variant="tertiary"
+        :disabled="count >= maxValue"
+        square
+        class="rounded-l-none"
+        :aria-controls="inputId"
+        :aria-label="$t('quantitySelectorIncrease')"
+        data-testid="quantity-selector-increase-button"
+        @click="inc()"
+      >
+        <SfIconAdd />
+      </SfButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { clamp } from '@storefront-ui/shared';
+import { SfButton, SfIconAdd, SfIconRemove, useId } from '@storefront-ui/vue';
+import { useCounter } from '@vueuse/core';
+import type { QuantitySelectorProps } from '~/components/ui/QuantitySelector/types';
+
+const { value, minValue, maxValue } = withDefaults(defineProps<QuantitySelectorProps>(), {
+  value: 1,
+  minValue: 1,
+  maxValue: 10,
+});
+
+const inputId = useId();
+const { count, inc, dec, set } = useCounter(value);
+
+const inputClasses = computed(
+  () =>
+    'appearance-none flex-1 mx-2 w-8 text-center bg-transparent font-medium [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-inner-spin-button]:display-none [&::-webkit-inner-spin-button]:m-0 [&::-webkit-outer-spin-button]:display-none [&::-webkit-outer-spin-button]:m-0 [-moz-appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none disabled:placeholder-disabled-900 focus-visible:outline focus-visible:outline-offset focus-visible:rounded-sm',
+);
+
+const handleOnChange = (event: Event) => {
+  const currentValue = (event.target as HTMLInputElement)?.value;
+  const nextValue = Number.parseFloat(currentValue);
+  set(clamp(nextValue, minValue, maxValue));
+};
+</script>

package/app/components/ui/QuantitySelector/__tests__/QuantitySelector.spec.ts

@@ -0,0 +1,15 @@
+import { mount } from '@vue/test-utils';
+import QuantitySelector from '~/components/ui/QuantitySelector/QuantitySelector.vue';
+
+const value = 1;
+
+describe('<QuantitySelector />', () => {
+  it('should render component', () => {
+    const wrapper = mount(QuantitySelector, {
+      props: {
+        value,
+      },
+    });
+    expect(wrapper.getByTestId('quantity-selector'));
+  });
+});

package/app/components/ui/QuantitySelector/types.ts

@@ -0,0 +1,5 @@
+export interface QuantitySelectorProps {
+  value?: number;
+  minValue?: number;
+  maxValue?: number;
+}

package/app/components/ui/RadialProgress.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+const props = defineProps({
+	radius: {
+		type: Number,
+		default: 50,
+	},
+	progress: {
+		type: Number,
+		default: 0,
+	},
+	stroke: {
+		type: Number,
+		default: 10,
+	},
+});
+
+const normalizedRadius = props.radius - props.stroke * 2;
+const circumference = normalizedRadius * 2 * Math.PI;
+
+const strokeDashoffset = computed(() => {
+	return circumference - ((props.progress * 100) / 100) * circumference;
+});
+</script>
+<template>
+	<svg :height="radius * 2" :width="radius * 2">
+		<circle
+			stroke="currentColor"
+			:stroke-dasharray="circumference + ' ' + circumference"
+			:style="{ strokeDashoffset: strokeDashoffset }"
+			:stroke-width="stroke"
+			fill="transparent"
+			:r="normalizedRadius"
+			:cx="radius"
+			:cy="radius"
+		/>
+	</svg>
+</template>
+<style>
+circle {
+	transition: stroke-dashoffset 0.25s;
+	transform: rotate(-90deg);
+	transform-origin: 50% 50%;
+}
+</style>

package/app/components/ui/Review/Review.vue

@@ -0,0 +1,57 @@
+<template>
+  <article class="w-full p-4 border rounded-md" data-testid="review">
+    <p class="pb-2 font-medium">{{ review.title }}</p>
+    <header class="flex flex-col pb-2 md:flex-row md:justify-between">
+      <span class="flex items-center pr-2 text-xs text-neutral-500">
+        <SfRating :value="review.rating ?? undefined" :max="5" size="xs" class="mr-2" />
+        {{ $d(new Date(review.createdAt)) }}
+      </span>
+      <p class="flex items-center text-xs truncate text-primary-700">
+        <span class="mr-2 text-xs text-neutral-500">{{ review.reviewer }}</span>
+        <SfIconCheck size="xs" class="mr-1" /> {{ $t('review.verifiedPurchase') }}
+      </p>
+    </header>
+    <p class="pb-2 text-sm text-neutral-900">{{ truncatedContent }}</p>
+    <button
+      v-if="isButtonVisible"
+      type="button"
+      class="inline-block mb-2 text-sm font-normal border-b-2 border-black cursor-pointer w-fit hover:text-primary-700 hover:border-primary-800"
+      @click="isCollapsed = !isCollapsed"
+    >
+      {{ $t(isCollapsed ? 'readMore' : 'readLess') }}
+    </button>
+    <footer class="flex items-center justify-between">
+      <div class="text-sm text-neutral-500">
+        <button type="button" class="mr-6 hover:text-primary-800">
+          <SfIconThumbUp size="sm" class="mr-2.5" />
+          <SfCounter size="sm" class="text-inherit">6</SfCounter>
+        </button>
+        <button type="button" class="hover:text-primary-800">
+          <SfIconThumbDown size="sm" class="mr-2.5" />
+          <SfCounter size="sm" class="text-inherit">2</SfCounter>
+        </button>
+      </div>
+
+      <button class="px-3 py-1.5 text-neutral-500 font-medium text-sm hover:text-primary-800" type="button">
+        {{ $t('review.reportAbuse') }}
+      </button>
+    </footer>
+  </article>
+</template>
+
+<script setup lang="ts">
+import { SfRating, SfIconCheck, SfIconThumbUp, SfIconThumbDown, SfCounter } from '@storefront-ui/vue';
+import type { ReviewProps } from '~/components/ui/Review/types';
+
+const props = defineProps<ReviewProps>();
+
+const { review } = toRefs(props);
+const charLimit = 400;
+const isCollapsed = ref(true);
+const isButtonVisible = computed(() => review.value.text?.length || 0 > charLimit);
+const truncatedContent = computed(() =>
+  isButtonVisible.value && isCollapsed.value
+    ? `${review.value.text?.slice(0, Math.max(0, charLimit))}...`
+    : review.value.text,
+);
+</script>

package/app/components/ui/Review/__tests__/Review.spec.ts

@@ -0,0 +1,15 @@
+import { mount } from '@vue/test-utils';
+import Review from '~/components/ui/Review/Review.vue';
+import { mockProductReviews } from '~/composables/useProductReviews/__tests__/productReviews.mock';
+
+describe('<Review />', () => {
+  it('should render component', () => {
+    const { getByTestId } = mount(Review, {
+      props: {
+        review: mockProductReviews[0],
+      },
+    });
+
+    expect(getByTestId('review'));
+  });
+});

package/app/components/ui/Review/types.ts

@@ -0,0 +1,5 @@
+import type { SfProductReview } from '@vue-storefront/unified-data-model';
+
+export type ReviewProps = {
+  review: SfProductReview;
+};

package/app/components/ui/ScrollTop.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useWindowScroll } from '@vueuse/core';
+
+const el = ref<HTMLElement | null>(null);
+const { y } = useWindowScroll();
+
+const radius = 25;
+const stroke = 5;
+const circumference = 2 * Math.PI * radius;
+const dashArray = `${circumference} ${circumference}`;
+const progress = computed(() => {
+	if (el.value) {
+		const sc = el.value.scrollTop;
+		const total = el.value.scrollHeight - (el.value.clientHeight || 0);
+		return total <= 0 ? 0 : Math.min(sc / total, 1);
+	}
+	const sc = y.value;
+	const doc = document.documentElement;
+	const total = (doc.scrollHeight || 0) - (window.innerHeight || 0);
+	return total <= 0 ? 0 : Math.min(sc / total, 1);
+});
+
+const dashOffset = computed(() => circumference * (1 - (progress.value ?? 0)));
+
+function scrollToTop() {
+	if (el.value) el.value.scrollTo({ top: 0, behavior: 'smooth' });
+	else window.scrollTo({ top: 0, behavior: 'smooth' });
+}
+</script>
+
+<template>
+	<div class="flex items-center" ref="el">
+		<div class="relative">
+			<svg :width="(radius + stroke) * 2" :height="(radius + stroke) * 2" viewBox="0 0 60 60" class="text-primary/75">
+				<g transform="translate(30,30)">
+					<circle
+						r="25"
+						fill="transparent"
+						stroke="currentColor"
+						:stroke-width="stroke"
+						class="text-gray-200"
+					/>
+					<circle
+						r="25"
+						fill="transparent"
+						stroke="currentColor"
+						:stroke-width="stroke"
+						stroke-linecap="round"
+						:stroke-dasharray="dashArray"
+						:stroke-dashoffset="dashOffset"
+						transform="rotate(-90)"
+						class="text-primary/75"
+					/>
+				</g>
+			</svg>
+
+			<button
+				v-if="progress >= 0.95"
+				class="absolute inset-0 flex items-center justify-center"
+				@click="scrollToTop"
+				aria-label="Scroll to top"
+			>
+				<svg class="w-4 h-4 text-primary/75 hover:text-gray-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+					<path d="M12 4v16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+					<path d="M18 10l-6-6-6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+				</svg>
+			</button>
+		</div>
+
+		<span
+			v-if="progress >= 0.95"
+			class="p-1.5 text-gray-700 bg-gray-300 bg-opacity-50 rounded-xl dark:bg-gray-700 dark:text-gray-200 font-display"
+		>
+			fin.
+		</span>
+	</div>
+</template>
+
+<style scoped>
+.text-primary\/75 { color: theme('colors.primary', '#0ea5a0'); }
+</style>

package/app/components/ui/Search.vue

@@ -0,0 +1,54 @@
+<template>
+  <form ref="referenceRef" role="search" class="relative" @submit.prevent="handleSubmit">
+    <SfInput ref="inputReference" v-model="inputModel" aria-label="Search" placeholder="Search" @focus="open">
+      <template #prefix>
+        <SfIconSearch />
+      </template>
+      <template #suffix>
+        <button
+          v-if="inputModel"
+          type="button"
+          aria-label="Reset search"
+          class="flex rounded-md focus-visible:outline focus-visible:outline-offset"
+          @click="handleReset"
+        >
+          <SfIconCancel />
+        </button>
+      </template>
+    </SfInput>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { SfIconCancel, SfIconSearch, SfInput, useDisclosure } from '@storefront-ui/vue';
+import { unrefElement } from '@vueuse/core';
+
+const props = defineProps<{
+  close?: () => boolean;
+}>();
+
+const router = useRouter();
+const { open } = useDisclosure();
+
+const inputModel = ref('');
+const inputReference = ref<HTMLSpanElement>();
+const handleInputFocus = () => {
+  const inputElement = unrefElement(inputReference)?.querySelector('input');
+  inputElement?.focus();
+};
+const handleReset = () => {
+  inputModel.value = '';
+  handleInputFocus();
+};
+const handleSubmit = () => {
+  props.close?.();
+  router.push({ path: paths.search, query: { search: inputModel.value } });
+  handleReset();
+};
+
+watch(inputModel, () => {
+  if (inputModel.value === '') {
+    handleReset();
+  }
+});
+</script>