@designcrowd/fe-shared-lib 1.5.25 → 1.5.26-pre-gt-0007

package/src/atoms/components/Button/variants/ButtonGray.vue

@@ -1,14 +1,15 @@
 <template>
   <button
     v-if="!url"
-    class="tw-font-sans tw-font-bold tw-text-grayscale-800 tw-uppercase tw-border-solid tw-transition-colors tw-duration-300"
+    class="tw-font-sans tw-border-2 tw-font-bold tw-text-grayscale-800 tw-uppercase tw-border-solid tw-transition-colors tw-duration-300"
     :class="[
       classes,
       computedClasses,
       {
         'no-rounded-l': !rounded && !roundedLeft,
         'no-rounded-r': !rounded && !roundedRight,
-        'tw-cursor-pointer tw-bg-grayscale-300 hover:tw-bg-grayscale-500': !disabled,
+        'tw-cursor-pointer tw-bg-grayscale-300 tw-border-grayscale-300 hover:tw-border-grayscale-500 hover:tw-bg-grayscale-500':
+          !disabled,
         'tw-bg-grayscale-100 tw-border-grayscale-300 tw-cursor-not-allowed': disabled,
       },
     ]"
@@ -22,15 +23,16 @@
   <a
     v-else
     :href="computedUrl"
-    class="tw-justify-center tw-font-sans tw-inline-flex tw-font-bold tw-text-grayscale-800 hover:tw-text-grayscale-800 tw-uppercase tw-border-solid tw-transition-colors tw-duration-300 tw-no-underline"
+    class="tw-justify-center tw-font-sans tw-inline-flex tw-border-2 tw-font-bold tw-text-grayscale-800 tw-uppercase tw-border-solid tw-transition-colors tw-duration-300 tw-no-underline"
     :class="[
       classes,
       computedClasses,
       {
         'no-rounded-l': !rounded && !roundedLeft,
         'no-rounded-r': !rounded && !roundedRight,
-        'tw-cursor-pointer tw-bg-grayscale-300 hover:tw-bg-grayscale-500': !disabled,
-        'tw-bg-grayscale-100 tw-cursor-not-allowed': disabled,
+        'tw-cursor-pointer tw-bg-grayscale-300 tw-border-grayscale-300 hover:tw-border-grayscale-500 hover:tw-bg-grayscale-500':
+          !disabled,
+        'tw-bg-grayscale-100 tw-border-grayscale-100 tw-cursor-not-allowed': disabled,
       },
     ]"
     :download="download"

package/src/atoms/components/Carousel/CarouselSSR.vue

@@ -0,0 +1,215 @@
+<template>
+  <div :class="['carousel tw-flex tw-flex-col tw-box-content', ...normalizedClasses]">
+    <!-- SSR Skeleton: rendered server-side and before client mount -->
+    <div v-if="!isMounted" class="tw-flex tw-items-center tw-relative">
+      <div class="swiper tw-w-full tw-overflow-hidden">
+        <div class="swiper-wrapper tw-flex tw-flex-row" :style="skeletonWrapperStyle">
+          <div
+            v-for="(slide, i) in visibleCards"
+            :key="i"
+            class="swiper-slide tw-h-auto tw-flex-shrink-0"
+            :style="slideStyle(slide)"
+          >
+            <div class="tw-h-full">
+              <slot name="slide" :slide="slide" :index="i"></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Actual Carousel: only rendered after client-side mount -->
+    <Carousel
+      v-else
+      :ref="swiperRef"
+      :swiper-ref="swiperRef"
+      :classes="classes"
+      :cards="cards"
+      :options="options"
+      :disable-right-click="disableRightClick"
+      :nav-carousel="navCarousel"
+      :show-controls="showControls"
+      :show-bullets="showBullets"
+      :hide-bullets-on-mobile="hideBulletsOnMobile"
+      :hide-bullets-element="hideBulletsElement"
+      :navigation-unique-indexer="navigationUniqueIndexer"
+      :slide-index="slideIndex"
+      @on-carousel-load="onCarouselLoad"
+    >
+      <template #slide="{ slide, index }">
+        <slot name="slide" :slide="slide" :index="index"></slot>
+      </template>
+      <template #arrow-left>
+        <slot name="arrow-left"></slot>
+      </template>
+      <template #arrow-right>
+        <slot name="arrow-right"></slot>
+      </template>
+    </Carousel>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import Carousel from './Carousel.vue';
+
+const props = defineProps({
+  classes: {
+    type: [String, Object, Array],
+    required: false,
+    default: () => [],
+  },
+  cards: {
+    type: Array,
+    required: true,
+  },
+  options: {
+    type: Object,
+    required: false,
+    default: () => ({}),
+  },
+  disableRightClick: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  navCarousel: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  showControls: {
+    type: Boolean,
+    required: false,
+    default: true,
+  },
+  showBullets: {
+    type: Boolean,
+    required: false,
+    default: true,
+  },
+  hideBulletsOnMobile: {
+    type: Boolean,
+    required: false,
+    default: true,
+  },
+  hideBulletsElement: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  swiperRef: {
+    type: String,
+    default: 'js-swiper',
+  },
+  navigationUniqueIndexer: {
+    type: String,
+    default: undefined,
+  },
+  slideIndex: {
+    type: Number,
+    required: false,
+    default: undefined,
+  },
+  skeletonSlideCount: {
+    type: Number,
+    required: false,
+    default: 6,
+  },
+});
+
+const emit = defineEmits(['on-carousel-load']);
+
+const isMounted = ref(false);
+
+onMounted(() => {
+  isMounted.value = true;
+});
+
+const normalizedClasses = computed(() => {
+  if (Array.isArray(props.classes)) {
+    return props.classes;
+  }
+  if (typeof props.classes === 'string') {
+    return [props.classes];
+  }
+  return [props.classes];
+});
+
+const visibleCards = computed(() => {
+  return props.cards.slice(0, props.skeletonSlideCount);
+});
+
+const spaceBetween = computed(() => {
+  return props.options?.spaceBetween ?? 10;
+});
+
+const skeletonWrapperStyle = computed(() => {
+  return {
+    gap: `${spaceBetween.value}px`,
+  };
+});
+
+const slideStyle = (slide) => {
+  if (slide.width) {
+    const width = typeof slide.width === 'number' ? `${slide.width}px` : slide.width;
+    return { width, minWidth: width };
+  }
+  return {};
+};
+
+const onCarouselLoad = () => {
+  emit('on-carousel-load');
+};
+</script>
+
+<style scoped>
+.carousel :deep(.swiper-button-next, .swiper-button-prev) {
+  @apply tw-hidden;
+}
+
+.carousel :deep(.swiper-button-disabled) {
+  @apply tw-hidden;
+}
+
+.carousel :deep(.swiper-pagination) {
+  @apply tw-static tw-pt-6;
+}
+
+.carousel :deep(.swiper-pagination-bullets) {
+  @apply tw-text-center;
+}
+
+.carousel :deep(.swiper-pagination--desktop-only) {
+  @apply tw-hidden sm:tw-block;
+}
+
+.carousel :deep(.carousel__button-nav) {
+  @apply tw-relative;
+}
+
+.carousel :deep(.swiper-pagination-bullet) {
+  border-color: #595959;
+  @apply tw-border-2 tw-border-solid tw-opacity-100 tw-bg-transparent tw-w-2 tw-h-2 tw-inline-block tw-rounded tw-cursor-pointer;
+}
+
+.carousel :deep(.swiper-pagination-bullet.swiper-pagination-bullet-active) {
+  background-color: #595959;
+}
+
+.carousel :deep(.swiper-pagination-bullet:not(:last-child)) {
+  @apply tw-mr-2;
+}
+
+.carousel :deep(.swiper-pagination-bullet:only-child) {
+  @apply tw-hidden;
+}
+
+.carousel :deep(.swiper-container) {
+  @apply tw-w-full;
+}
+
+.carousel :deep(.swiper-slide) {
+  @apply tw-h-auto tw-w-auto;
+}
+</style>

package/src/atoms/components/Carousel/carousel.stories.js

@@ -1,6 +1,7 @@
 import Icon from '../Icon/Icon.vue';
 import { cards } from './Carousel.fixtures';
 import Carousel from './Carousel.vue';
+import CarouselSSR from './CarouselSSR.vue';
 
 export default {
   title: 'Components/Carousel',
@@ -528,3 +529,137 @@ export const ResponsiveBreakpoints = {
     },
   },
 };
+
+// CarouselSSR - SSR-safe wrapper that prevents hydration mismatches
+export const SSRSafe = {
+  args: {
+    cards,
+    showControls: true,
+    showBullets: true,
+    options: {
+      loop: true,
+      spaceBetween: 20,
+      slidesPerView: 1,
+      breakpoints: {
+        640: {
+          slidesPerView: 2,
+          slidesPerGroup: 2,
+        },
+        1024: {
+          slidesPerView: 3,
+          slidesPerGroup: 3,
+        },
+      },
+    },
+  },
+  render: (args) => ({
+    components: { CarouselSSR },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="tw-p-8">
+        <div class="tw-mb-4 tw-p-4 tw-bg-green-50 tw-rounded-lg">
+          <p class="tw-text-sm tw-font-semibold tw-text-green-800">CarouselSSR Component</p>
+          <p class="tw-text-sm tw-text-green-700 tw-mt-1">
+            This wrapper prevents hydration mismatch errors in SSR environments (Nuxt).
+            It renders a static skeleton server-side, then switches to the interactive Swiper on the client.
+          </p>
+        </div>
+        <CarouselSSR
+          :cards="args.cards"
+          :show-controls="args.showControls"
+          :show-bullets="args.showBullets"
+          :options="args.options"
+        >
+          <template #slide="{ slide }">
+            <div class="tw-flex tw-flex-col tw-items-center tw-cursor-pointer tw-p-4 tw-bg-gray-50 tw-rounded-lg tw-h-full">
+              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-48 tw-object-contain tw-mb-4" />
+              <span class="tw-text-lg tw-font-semibold tw-text-center">{{ slide.name }}</span>
+            </div>
+          </template>
+        </CarouselSSR>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: `
+**CarouselSSR** is an SSR-safe wrapper around the Carousel component designed for use in Nuxt/SSR environments.
+
+### Why use CarouselSSR?
+Swiper.js initializes client-side and adds classes/styles that don't exist on the server, causing Vue hydration mismatches. CarouselSSR solves this by:
+
+1. **Server-side**: Renders a static skeleton that matches the carousel layout (showing actual card content)
+2. **Client-side**: After mount, switches to the interactive Swiper carousel
+
+### Migration
+Replace \`Carousel\` with \`CarouselSSR\` - the API is identical:
+
+\`\`\`vue
+<!-- Before -->
+<Carousel :cards="cards" :options="options">
+  <template #slide="{ slide }">...</template>
+</Carousel>
+
+<!-- After -->
+<CarouselSSR :cards="cards" :options="options">
+  <template #slide="{ slide }">...</template>
+</CarouselSSR>
+\`\`\`
+
+### Additional Props
+- \`skeletonSlideCount\` (Number, default: 6) - How many slides to show in the skeleton
+        `,
+      },
+    },
+  },
+};
+
+// CarouselSSR with custom skeleton slide count
+export const SSRSafeCustomSkeletonCount = {
+  args: {
+    cards: [...cards, ...cards],
+    skeletonSlideCount: 3,
+    options: {
+      spaceBetween: 20,
+      slidesPerView: 'auto',
+    },
+  },
+  render: (args) => ({
+    components: { CarouselSSR },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="tw-p-8">
+        <div class="tw-mb-4 tw-p-4 tw-bg-blue-50 tw-rounded-lg">
+          <p class="tw-text-sm tw-text-blue-800">
+            <strong>skeletonSlideCount: 3</strong> - Only shows 3 slides in the SSR skeleton,
+            even though there are more cards. Useful for controlling initial render size.
+          </p>
+        </div>
+        <CarouselSSR
+          :cards="args.cards"
+          :skeleton-slide-count="args.skeletonSlideCount"
+          :options="args.options"
+        >
+          <template #slide="{ slide }">
+            <div class="tw-flex tw-flex-col tw-items-center tw-p-4 tw-bg-white tw-rounded-lg tw-shadow" style="width: 200px;">
+              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-32 tw-object-contain tw-mb-2" />
+              <span class="tw-text-center tw-text-sm tw-font-medium">{{ slide.name }}</span>
+            </div>
+          </template>
+        </CarouselSSR>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Control how many slides appear in the SSR skeleton with the `skeletonSlideCount` prop.',
+      },
+    },
+  },
+};