788-feat: Add filter for merch

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference path="./.next/types/routes.d.ts" />
+/// <reference path="./build/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

src/app/docs/components/search/search.tsx

@@ -128,7 +128,9 @@ function Result({ result }: { result: PagefindSearchResult }) {
   return (
     <div>
       <Link href={removeHtmlExtension(data.url)}>
-        <Subtitle size="extra-small" weight="bold">{data.meta.title}</Subtitle>
+        <Subtitle size="extra-small" weight="bold">
+          {data.meta.title}
+        </Subtitle>
         <p dangerouslySetInnerHTML={{ __html: data.excerpt }} />
       </Link>
 

src/shared/__tests__/constants.tsx

@@ -5,6 +5,7 @@ import { Course } from '@/entities/course';
 import type { Trainer } from '@/entities/trainer';
 import { COURSE_LINKS, COURSE_TITLES, ROUTES } from '@/shared/constants';
 import { Paragraph } from '@/shared/ui/paragraph';
+import { MerchCatalogProps } from '@/widgets/merch-section/ui/merch-catalog/types';
 
 export const MOCKED_IMAGE_PATH: StaticImageData = {
   src: 'mocked-image-path.webp',
@@ -227,3 +228,16 @@ export const MOCKED_VIDEOS: Video[] = [
     thumbnail: 'thumb3.jpg',
   },
 ];
+
+export const getMockedProps = (overrides: Partial<MerchCatalogProps> = {}): MerchCatalogProps => ({
+  allAvailableTags: ['tag1', 'tag2', 'tag3'],
+  searchTerm: '',
+  selectedTags: [],
+  hasActiveFilters: false,
+  areTagsExpanded: false,
+  onSearchChange: vi.fn(),
+  onTagChange: vi.fn(),
+  onClearFilters: vi.fn(),
+  onToggleTagsExpansion: vi.fn(),
+  ...overrides,
+});

src/shared/hooks/use-media-query/use-media-query.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+
+export const useMediaQuery = (query: string): boolean => {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    const media = window.matchMedia(query);
+    const listener = () => setMatches(media.matches);
+
+    listener();
+    media.addEventListener('change', listener);
+    return () => media.removeEventListener('change', listener);
+  }, [query]);
+  return matches;
+};

src/shared/ui/search-input/search-input.module.scss

@@ -0,0 +1,13 @@
+.input {
+  width: 100%;
+  height: 35px;
+  padding: $gap-xxs $gap-xs;
+  border: 1px solid $color-gray-400;
+  border-radius: $border-radius-xxs;
+
+  outline-offset: -2px;
+
+  &:focus {
+    outline: 2px solid $color-blue-500;
+  }
+}

src/shared/ui/search-input/search-input.tsx

@@ -0,0 +1,33 @@
+import classNames from 'classnames/bind';
+
+import styles from './search-input.module.scss';
+
+const cx = classNames.bind(styles);
+
+type SearchInputProps = {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  ariaLabel?: string;
+  name?: string;
+};
+
+export default function SearchInput({
+  value,
+  onChange,
+  placeholder,
+  ariaLabel,
+  name,
+}: SearchInputProps) {
+  return (
+    <input
+      className={cx('input')}
+      type="text"
+      placeholder={placeholder}
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      aria-label={ariaLabel}
+      name={name}
+    />
+  );
+}

src/views/merch.tsx

@@ -3,16 +3,16 @@ import { Suspense } from 'react';
 import welcome from '@/shared/assets/welcome.webp';
 import { Breadcrumbs } from '@/widgets/breadcrumbs';
 import { Hero } from '@/widgets/hero';
-import { MerchCatalog } from '@/widgets/merch-catalog';
-import { Loader } from '@/widgets/merch-catalog/ui/loader/loader';
+import { MerchSection } from '@/widgets/merch-section';
+import { Loader } from '@/widgets/merch-section/ui/loader/loader';
 
 export const Merch = async () => {
   return (
     <>
       <Hero heading="Merch" subHeading="Free assets for your design" image={welcome} />
       <Breadcrumbs />
       <Suspense fallback={<Loader />}>
-        <MerchCatalog />
+        <MerchSection />
       </Suspense>
     </>
   );

src/widgets/merch-section/index.ts

@@ -0,0 +1 @@
+export { MerchSection } from './ui/merch-section';

src/widgets/merch-section/ui/merch-catalog/layouts/desktop-merch-filters/desktop-merch-filters.test.tsx

@@ -0,0 +1,80 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import { DesktopMerchFilters } from './desktop-merch-filters';
+
+vi.mock('@/shared/ui/subtitle', () => ({ Subtitle: (props: { children: React.ReactNode }) => <div>{props.children}</div> }));
+
+describe('DesktopMerchFilters', () => {
+  const user = userEvent.setup();
+
+  const mockSearchFilters = <div data-testid="search-filters">Mock Search</div>;
+  const mockTagFilters = <div data-testid="tag-filters">Mock Tags</div>;
+
+  it('should render the title and the provided filter slots', () => {
+    render(
+      <DesktopMerchFilters
+        searchFilters={mockSearchFilters}
+        tagFilters={mockTagFilters}
+        hasActiveFilters={false}
+        onClearFilters={() => {}}
+      />,
+    );
+
+    expect(screen.getByText('Filter merch')).toBeInTheDocument();
+    expect(screen.getByTestId('search-filters')).toBeInTheDocument();
+    expect(screen.getByTestId('tag-filters')).toBeInTheDocument();
+  });
+
+  it('should render the "Clear" button without "active" class if filters are not active', () => {
+    render(
+      <DesktopMerchFilters
+        searchFilters={mockSearchFilters}
+        tagFilters={mockTagFilters}
+        hasActiveFilters={false}
+        onClearFilters={() => {}}
+      />,
+    );
+
+    const clearButton = screen.getByRole('button', { name: /Clear/i });
+
+    expect(clearButton).toBeInTheDocument();
+    expect(clearButton).not.toHaveClass('active');
+  });
+
+  it('should render the "Clear" button with "active" class if filters are active', () => {
+    render(
+      <DesktopMerchFilters
+        searchFilters={mockSearchFilters}
+        tagFilters={mockTagFilters}
+        hasActiveFilters={true}
+        onClearFilters={() => {}}
+      />,
+    );
+
+    const clearButton = screen.getByRole('button', { name: /Clear/i });
+
+    expect(clearButton).toBeInTheDocument();
+    expect(clearButton).toHaveClass('active');
+  });
+
+  it('should call onClearFilters when the "Clear" button is clicked', async () => {
+    const handleClearFiltersMock = vi.fn();
+
+    render(
+      <DesktopMerchFilters
+        searchFilters={mockSearchFilters}
+        tagFilters={mockTagFilters}
+        hasActiveFilters={true}
+        onClearFilters={handleClearFiltersMock}
+      />,
+    );
+
+    const clearButton = screen.getByRole('button', { name: /Clear/i });
+
+    await user.click(clearButton);
+
+    expect(handleClearFiltersMock).toHaveBeenCalledTimes(1);
+  });
+});

src/widgets/merch-section/ui/merch-catalog/layouts/desktop-merch-filters/desktop-merch-filters.tsx

@@ -0,0 +1,36 @@
+import classNames from 'classnames/bind';
+
+import { LayoutProps } from '../../types';
+import { Subtitle } from '@/shared/ui/subtitle';
+
+import styles from '../layouts.module.scss';
+
+const cx = classNames.bind(styles);
+
+export const DesktopMerchFilters = ({
+  hasActiveFilters,
+  searchFilters,
+  tagFilters,
+  onClearFilters,
+}: LayoutProps) => {
+  return (
+    <div className={cx('controls-wrapper')}>
+      <div className={cx('desktop-actions-wrapper')}>
+        <Subtitle size="extra-small" weight="bold">
+          Filter merch
+        </Subtitle>
+        <button
+          type="button"
+          className={cx('button', 'secondary', { active: hasActiveFilters })}
+          onClick={onClearFilters}
+        >
+          Clear
+        </button>
+      </div>
+
+      {searchFilters}
+
+      {tagFilters}
+    </div>
+  );
+};

src/widgets/merch-section/ui/merch-catalog/layouts/layouts.module.scss

@@ -0,0 +1,120 @@
+.controls-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: $gap-xs;
+}
+
+.desktop-actions-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.filter-accordion {
+  display: flex;
+  flex-direction: column;
+  gap: $gap-xs;
+}
+
+.button {
+  @extend %transition-all;
+
+  cursor: pointer;
+
+  gap: $gap-xs;
+  place-content: center center;
+  align-items: center;
+
+  font-weight: $font-weight-medium;
+  letter-spacing: 0;
+  white-space: pre;
+}
+
+.secondary {
+  width: max-content;
+  padding: $gap-xxs $gap-s;
+  border: 1px solid $color-gray-900;
+
+  font-size: $font-size-xxs;
+  color: $color-gray-900;
+
+  visibility: hidden;
+  opacity: 0;
+  background: none;
+
+  &:hover {
+    background-color: $color-gray-100;
+  }
+
+  &.active {
+    visibility: visible;
+    opacity: $opacity-100;
+    transition-delay: 0s;
+  }
+
+  @include media-tablet-large {
+    width: 10%;
+
+    &.active {
+      max-height: 35px;
+      padding: $gap-xs;
+    }
+  }
+
+  @include media-mobile-landscape {
+    width: 20%;
+  }
+}
+
+.tablet-actions-wrapper {
+  display: flex;
+  gap: $gap-xs;
+}
+
+.tablet-toggle-button {
+  cursor: pointer;
+
+  position: relative;
+
+  display: inline-flex;
+  gap: $gap-xs;
+  align-items: center;
+  justify-content: space-between;
+
+  width: 100%;
+  padding: $gap-s;
+  border: none;
+  border-radius: $border-radius-xxs;
+
+  font-size: $font-size-s;
+  font-weight: $font-weight-medium;
+
+  background-color: transparent;
+
+  transition: background-color 0.2s ease;
+
+  &.expanded {
+    background-color: $color-gray-50;
+  }
+
+  &:focus-visible {
+    outline: 1px solid $color-gray-600;
+    outline-offset: 1px;
+  }
+
+  &.has-active-filters::after {
+    content: '';
+    display: block;
+    width: 6px;
+    height: 6px;
+  }
+}
+
+.filter-toggle-arrow {
+  margin-left: auto;
+  transition: transform 0.2s ease-in-out;
+
+  &.rotate {
+    transform: rotate(180deg);
+  }
+}