Merge pull request #154 from hubblecommerce/rc2.2

Release Candidate 2.2

.eslintrc

@@ -53,6 +53,9 @@
         ],
         "vue/no-multiple-template-root": [
             "off"
+        ],
+        "no-useless-return": [
+            "off"
         ]
     }
 }

.github/workflows/main.yml

@@ -36,3 +36,10 @@ jobs:
 
       - name: Run e2e tests
         run: npm run test:e2e
+
+      - name: Upload screenshots
+        uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: cypress-snapshots
+          path: cypress/screenshots

README.md

@@ -53,9 +53,7 @@ npm i @hubblecommerce/hubble
 
 3. Add the module to nuxt.config.ts
 ```js
-modules: [
-    ['@hubblecommerce/hubble']
-]
+modules: ['@hubblecommerce/hubble']
 ```
 
 4. Create a .env file in project root and fill credentials

__tests__/module/fixture/components/misc/MiscSkeleton.vue

@@ -0,0 +1,106 @@
+<template>
+    Overridden component from project root
+    <div
+        v-for="index in repeat"
+        :key="index"
+        :class="classes"
+        :style="styles"
+    />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+    text?: boolean,
+    round?: boolean,
+    circle?: boolean,
+    height?: string | number,
+    width?: string | number,
+    size?: 'small' | 'medium' | 'large',
+    repeat?: string | number,
+    animated?: boolean,
+    sharp?: boolean,
+    color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    text: false,
+    round: false,
+    circle: false,
+    height: '',
+    width: '',
+    size: 'medium',
+    repeat: 1,
+    animated: true,
+    sharp: true,
+    color: 'bg-base-200'
+})
+
+const styles = computed(() => {
+    let text
+    if (props.text) {
+        text = 'display: inline-block;'
+    }
+
+    let width = 'width: 100%;'
+    if (props.width) {
+        if (typeof props.width === 'number') {
+            width = `width: ${props.width}px;`
+        }
+        if (typeof props.width === 'string') {
+            width = `width: ${props.width};`
+        }
+    }
+
+    let height = 'height: 24px;'
+    if (props.size === 'small') {
+        height = 'height: 24px;'
+    }
+
+    if (props.size === 'medium') {
+        height = 'height: 32px;'
+    }
+
+    if (props.size === 'large') {
+        height = 'height: 48px;'
+    }
+
+    if (props.circle) {
+        width = height.replace('height', 'width')
+    }
+
+    return [
+        text,
+        width,
+        height
+    ].join(' ')
+})
+
+const classes = computed(() => {
+    let round
+    if (props.round) {
+        round = 'rounded-3xl'
+    }
+
+    if (!props.sharp) {
+        round = 'rounded'
+    }
+
+    if (props.circle) {
+        round = 'rounded-full'
+    }
+
+    let animated
+    if (props.animated) {
+        animated = 'animate-pulse'
+    }
+
+    return [
+        round,
+        animated,
+        props.color
+    ].join(' ')
+})
+
+</script>

__tests__/module/fixture/composables/useNotification.ts

@@ -0,0 +1,58 @@
+import { ref, Ref } from 'vue'
+// @ts-ignore
+import { HblIUseNotification, HblNotificationOptions, HblNotification } from '@/utils/types'
+
+const notifications: Ref<HblNotification[]> = ref([])
+let notificationDefaultDisplayTime = 5
+let notificationsDefaultKeepAlive = false
+let notificationsDefaultType = 'info'
+let notificationCounter = 0
+
+export function useNotification (): HblIUseNotification {
+    const additionalRef = ref('overridden component value')
+
+    function setDefaultOptions (options: HblNotificationOptions) {
+        notificationDefaultDisplayTime = options.displayTime != null ? options.displayTime : notificationDefaultDisplayTime
+        notificationsDefaultKeepAlive = options.keepAlive != null ? options.keepAlive : notificationsDefaultKeepAlive
+        notificationsDefaultType = options.type != null ? options.type : notificationsDefaultType
+    }
+
+    function showNotification (
+        message: string,
+        type = notificationsDefaultType,
+        keepAlive = notificationsDefaultKeepAlive,
+        displayTime = notificationDefaultDisplayTime
+    ): void {
+        const notification: HblNotification = {
+            id: notificationCounter,
+            message,
+            displayTime,
+            keepAlive,
+            type
+        }
+
+        notifications.value.push(notification)
+
+        if (!notification.keepAlive) {
+            setTimeout(() => {
+                closeNotification(notification.id)
+            }, notification.displayTime != null ? notification.displayTime * 1000 : 1000)
+        }
+
+        notificationCounter++
+    }
+
+    function closeNotification (id: number): void {
+        notifications.value = notifications.value.filter((item) => {
+            return item.id !== id
+        })
+    }
+
+    return {
+        notifications,
+        showNotification,
+        closeNotification,
+        setDefaultOptions,
+        additionalRef
+    }
+}

__tests__/module/fixture/pages/index.vue

@@ -3,13 +3,14 @@
         <Head>
             <Title>Module fixture</Title>
         </Head>
+        <client-only>hydration: true</client-only>
         <div>Load composable from appropriate platform: {{ apiUrl }}</div>
-        <div>Load overridden composable from project root: {{ cart }}</div>
+        <div>Load overridden composable from project root: {{ additionalRef }}</div>
         <div>RuntimeConfig | meta.category.title: {{ config.meta.category.title }}</div>
         <div>RuntimeConfig | testPluginConfig1: {{ config.testPluginConfig1 }}</div>
         <div>RuntimeConfig | testPluginConfig2: {{ config.testPluginConfig2 }}</div>
         <MiscModuleTestComponent />
-        <ProductDetail />
+        <MiscSkeleton />
         <ProductDetailPlugin />
         <div>{{ t('index.translationTest') }}</div>
         <MiscPluginSlot name="test-plugin-slot" :data="{}" :events="{}" />
@@ -27,10 +28,10 @@
 
 <script setup>
 import { useI18n } from 'vue-i18n'
-import { useCart, usePlatform } from '#imports'
+import { useNotification, usePlatform } from '#imports'
 
 const { apiUrl } = usePlatform()
-const { cart } = useCart()
+const { additionalRef } = useNotification()
 const config = useRuntimeConfig().public
 const { t } = useI18n()
 </script>

cypress.config.ts

@@ -1,6 +1,9 @@
 import { defineConfig } from 'cypress'
 
 export default defineConfig({
+    env: {
+        mobileViewportWidthBreakpoint: 1024
+    },
     e2e: {
         baseUrl: 'http://localhost:3000',
         video: false,