DRAFT: 883-feat: Make swipe gallery for merch card

dev-data/hero-page.data.ts

@@ -1,4 +1,5 @@
 import coursesPageHeroImg from '@/shared/assets/mentor-with-his-students.webp';
+import welcome from '@/shared/assets/welcome.webp';
 
 export const heroPageData = {
   school: {
@@ -26,4 +27,11 @@ export const heroPageData = {
     subTitle: ['By teaching others, you learn yourself'],
     imageAltText: '',
   },
+  merch: {
+    mainTitle: 'Merch',
+    widgetTitle: 'Free assets for your design',
+    subTitle: [''],
+    heroImageSrc: welcome,
+    imageAltText: 'A sloth mascot with arms raised under a welcome sign',
+  },
 };

package.json

@@ -38,6 +38,7 @@
     "react-double-marquee": "^1.1.0",
     "react-markdown": "^10.1.0",
     "react-responsive-carousel": "^3.2.23",
+    "react-swipeable": "^7.0.2",
     "react-youtube": "^10.1.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
@@ -46,7 +47,8 @@
     "remark-rehype": "^11.1.2",
     "remark-remove-comments": "^1.1.1",
     "remark-toc": "^9.0.0",
-    "swiper": "^11.2.6"
+    "swiper": "^11.2.6",
+    "uuid": "^11.1.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.1",
@@ -64,6 +66,7 @@
     "@types/node": "^22.15.3",
     "@types/react": "19.1.2",
     "@types/react-dom": "19.1.3",
+    "@types/uuid": "^10.0.0",
     "@vitejs/plugin-react": "^4.4.1",
     "@vitest/coverage-v8": "^3.1.2",
     "@vitest/eslint-plugin": "^1.1.44",

src/app/merch/page.tsx

@@ -0,0 +1,13 @@
+import { Metadata } from 'next';
+
+import { Merch } from '@/views/merch/merch';
+
+export async function generateMetadata(): Promise<Metadata> {
+  const title = 'Merch · The Rolling Scopes School';
+
+  return { title };
+}
+
+export default function CommunityRoute() {
+  return <Merch />;
+}

src/core/api/app-api.ts

@@ -1,3 +1,4 @@
+import { MerchApi } from '@/entities/merch/api/merch-api';
 import { TrainerApi } from '@/entities/trainer/api/trainer-api';
 import { ApiBaseClass } from '@/shared/api/api-base-class';
 import { ApiServices } from '@/shared/types';
@@ -7,9 +8,13 @@ export class Api {
 
   public readonly trainer: TrainerApi;
 
+  public readonly merch: MerchApi;
+
   constructor(private readonly baseURI: string) {
     this.services = { rest: new ApiBaseClass(this.baseURI) };
 
     this.trainer = new TrainerApi(this.services);
+
+    this.merch = new MerchApi(this.services);
   }
 }

src/core/styles/_constants.scss

@@ -82,6 +82,7 @@ $opacity-100: 1;
 $opacity-80: 0.8;
 $opacity-70: 0.7;
 $opacity-50: 0.5;
+$opacity-40: 0.4;
 $opacity-30: 0.3;
 $opacity-20: 0.2;
 $opacity-15: 0.15;

src/entities/merch/api/merch-api.ts

@@ -0,0 +1,10 @@
+import { MerchResponse } from '../types';
+import { ApiServices } from '@/shared/types';
+
+export class MerchApi {
+  constructor(private readonly services: ApiServices) {}
+
+  public queryMerchCatalog() {
+    return this.services.rest.get<MerchResponse>(`merch/filelist.json`);
+  }
+}

src/entities/merch/helpers/transform-merch-catalog.ts

@@ -0,0 +1,36 @@
+import { v4 as uuidv4 } from 'uuid';
+
+import { ApiMerchItem, ApiMerchItemAdapt, MerchProduct, MerchResponse } from '../types';
+
+export const transformMerchCatalog = (data: MerchResponse): MerchProduct[] => {
+  const products: MerchProduct[] = [];
+  const baseUrl = process.env.API_BASE_URL;
+  const processCategory = (category: ApiMerchItemAdapt, parentTags: string[]) => {
+    for (const [key, value] of Object.entries(category)) {
+      if (isApiMerchItem(value)) {
+        products.push({
+          id: uuidv4(),
+          name: key,
+          title: value.name,
+          preview: value.preview.map((path) => `${baseUrl}/${path}`),
+          download: value.download.map((path) => `${baseUrl}/${path}`),
+          tags: parentTags,
+        });
+      } else {
+        processCategory(value, [...parentTags, key]);
+      }
+    }
+  };
+
+  for (const [categoryName, categoryData] of Object.entries(data)) {
+    processCategory(categoryData, [categoryName]);
+  }
+
+  return products;
+};
+
+const isApiMerchItem = (item: unknown): item is ApiMerchItem => {
+  return Boolean(
+    item && typeof item === 'object' && 'name' in item && 'preview' in item && 'download' in item,
+  );
+};

src/entities/merch/index.ts

@@ -0,0 +1,3 @@
+export type { MerchProduct } from './types';
+export { MerchCard } from './ui/merch-card/merch-card';
+export { merchStore } from './model/store';

src/entities/merch/model/store.ts

@@ -0,0 +1,18 @@
+import { transformMerchCatalog } from '../helpers/transform-merch-catalog';
+import { api } from '@/shared/api/api';
+
+class MerchStore {
+  public loadMerchCatalog = async () => {
+    try {
+      const res = await api.merch.queryMerchCatalog();
+
+      if (res.isSuccess) {
+        return transformMerchCatalog(res.result);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+}
+
+export const merchStore = new MerchStore();

src/entities/merch/types.ts

@@ -0,0 +1,27 @@
+export type ApiMerchItem = {
+  name: string;
+  preview: string[];
+  download: string[];
+};
+
+type ApiMerchCategory = {
+  [key: string]: ApiMerchItem;
+};
+
+type ApiMerchData = {
+  [category: string]: ApiMerchCategory;
+};
+
+export type ApiMerchItemAdapt = ApiMerchItem | ApiMerchCategory | ApiMerchData;
+export type MerchResponse = {
+  [category: string]: ApiMerchData;
+};
+
+export type MerchProduct = {
+  id: string;
+  name: string;
+  title: string;
+  preview: string[];
+  download: string[];
+  tags: string[];
+};

src/entities/merch/ui/merch-card/merch-card.module.scss

@@ -0,0 +1,178 @@
+.merch-card {
+  position: relative;
+
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+  max-width: 320px;
+  height: 100%;
+  margin: 0 auto;
+  border-radius: 5px;
+
+  background-color: $color-white;
+  box-shadow: 0 4px 12px 0 hsla(from $color-black h s l / $opacity-10);
+
+  transition: box-shadow 0.3s ease;
+
+  &:hover {
+    box-shadow:
+      0 1px 5px hsla(from $color-black h s l / $opacity-40),
+      0 2px 8px -8px hsla(from $color-black h s l / $opacity-40);
+  }
+}
+
+.preview-wrap {
+  position: relative;
+  display: flex;
+  height: 180px;
+
+  &::after {
+    pointer-events: none;
+    content: '';
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+
+    background: linear-gradient(
+      to bottom,
+      transparent 0%,
+      hsla(from $color-black h s l / $opacity-10) 100%
+    );
+  }
+}
+
+.info-wrap {
+  display: flex;
+  flex: 1 1;
+  gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+
+  padding: 16px;
+}
+
+.preview {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.download {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+
+  padding: 10px;
+  border-radius: 100%;
+
+  opacity: 0.8;
+  background-color: $color-yellow;
+  box-shadow: 0 4px 12px 0 hsla(from $color-black h s l / $opacity-10);
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.download-img {
+  width: 20px;
+  height: 20px;
+  border-radius: 5px;
+  background-color: $color-yellow;
+}
+
+.swipe-btn {
+  cursor: pointer;
+
+  position: absolute;
+  z-index: 2;
+  top: 50%;
+  transform: translateY(-50%);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 36px;
+  height: 36px;
+  border: none;
+  border-radius: 50%;
+
+  font-size: 20px;
+  color: $color-white;
+
+  background-color: rgb(0 0 0 / 30%);
+
+  transition:
+    background-color 0.2s ease,
+    transform 0.2s ease;
+
+  .arrow-img {
+    filter: brightness(0) invert(1);
+  }
+
+  &.is-prev {
+    left: 8px;
+  }
+
+  &.is-next {
+    right: 8px;
+  }
+
+  &:hover {
+    background-color: rgb(0 0 0 / 60%);
+  }
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.3;
+  }
+}
+
+.swipe-dots {
+  position: absolute;
+  z-index: 2;
+  bottom: -15px;
+  left: 50%;
+  transform: translateX(-50%);
+
+  display: flex;
+  gap: 6px;
+
+  .swipe-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+
+    background-color: rgb(0 0 0 / 20%);
+
+    transition: background-color all 0.3s ease;
+
+    &.active {
+      background-color: $color-yellow;
+    }
+  }
+}
+
+.swipeable-area {
+  touch-action: pan-y;
+
+  position: relative;
+
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+}
+
+@media (max-width: $mobile-landscape-width) {
+  .swipe-btn {
+    display: none;
+  }
+}