#230-category-fsd

src/app/providers/StoreProvider/config/StateSchema.ts

@@ -12,12 +12,12 @@ import type { TProductSchema } from '@/pages/ProductPage/model/types/productType
 import type { CategoryListSchema } from '@/widgets/CategoryGrid/model/types/types'
 import type { ICategoryProductsSchema } from '@/pages/ProductsPage/types/types'
 import type { ICategorySchema, IMainCategorySchema } from '@/widgets/CategoryList/types/types'
-import type { ICategoryFiltersSchema } from '@/components/Dropdown/types/types'
+import type { ICategoryFiltersSchema } from '@/shared/ui/Dropdown/types/types'
 import type { IFeedbackFormSchema } from '@/widgets/FeedbackForm/model/scheme/feedbackFormSliceSchema'
 import type { ICartEntitySchema } from '@/entities/CartEntity/model/types/types'
 import type { IAboutUsSchema } from '@/pages/AboutUsPage/model/types/types'
 import type { IFeedbackSchema } from '@/features/Reviews/model/types/types'
-import type { TNumberOfPageSchema } from '@/components/Pagination/types/types'
+import type { TNumberOfPageSchema } from '@/widgets/Pagination/types/types'
 
 export interface StateSchema {
   aboutUs: IAboutUsSchema

src/app/providers/StoreProvider/config/store.ts

@@ -17,12 +17,12 @@ import { categoryIdSliceReducer } from '@/entities/Category/slice/categoryIdSlic
 import { categorySlugSliceReducer } from '@/entities/Category/slice/categorySlugSlice'
 import { categoryBranchesReducer } from '@/widgets/CategoryList/slice/pageCategoryBranchesSlice'
 import { getCategoriesReducer } from '@/widgets/CategoryList/slice/pageCategoriesSlice'
-import { categoryFiltersSliceReducer } from '@/components/Dropdown/slice/filtersSlice'
+import { categoryFiltersSliceReducer } from '@/shared/ui/Dropdown/slice/filtersSlice'
 import { feedbackFormReducer } from '@/widgets/FeedbackForm/model/slice/feedbackFormSlice'
 import { aboutUsReducer } from '@/pages/AboutUsPage/model/slice/aboutUsSlice'
 import { cartEntityReducer } from '@/entities/CartEntity/model/slice/cartEntitySlice'
 import { feedbacksReducer } from '@/features/Reviews/model/slice/feedbacksSlice'
-import { paginationSliceReducer } from '@/components/Pagination/slice/paginationSlice'
+import { paginationSliceReducer } from '@/widgets/Pagination/slice/paginationSlice'
 
 export type RootState = StateSchema
 

src/widgets/Carousel/Carousel.module.scss → src/entities/Carousel/Carousel.module.scss

@@ -1,4 +1,4 @@
-@use '../../shared/styles/utils/variables' as color;
+@use '@/shared/styles/utils/variables' as var;
 
 .carouselContainer {
   position: relative;
@@ -40,9 +40,9 @@
   width: 100%;
   max-width: 100px;
   height: 2px;
-  background-color: color.$body-color-light-grey;
+  background-color: var.$body-color-light-grey;
 }
 
 .dot.active {
-  background-color: color.$theme-primary-color;
+  background-color: var.$theme-primary-color;
 }

src/features/ProductAvailability/ProductAvailability.module.scss → src/entities/ProductAvailability/ProductAvailability.module.scss

@@ -1,4 +1,4 @@
-@use '../../shared/styles/utils/variables' as var;
+@use '@/shared/styles/utils/variables' as var;
 
 .product-card__info {
   display: flex;

src/features/ProductImgCarousel/ProductImgCarousel.tsx → src/entities/ProductImgCarousel/ProductImgCarousel.tsx

@@ -1,10 +1,10 @@
 import { useState, type FC, Dispatch, SetStateAction } from 'react'
 
+import { ImgCarousel } from '@/entities/ProductImgCarousel/ui/ImgCarousel/ImgCarousel'
+import { PreviewCarousel } from '@/entities/ProductImgCarousel/ui/PreviewCarousel/PreviewCarousel'
 import type { IImage } from '@/shared/model/types/ImageModel'
 
 import styles from './ProductImgCarousel.module.scss'
-import { ImgCarousel } from './ui/ImgCarousel/ImgCarousel'
-import { PreviewCarousel } from './ui/PreviewCarousel/PreviewCarousel'
 
 interface IProductImgCarouselProps {
   imgList: IImage[]

src/features/ProductImgCarousel/ui/ImgCarousel/ImgCarousel.tsx → src/entities/ProductImgCarousel/ui/ImgCarousel/ImgCarousel.tsx

@@ -1,11 +1,10 @@
 import React, { FC, useEffect, useMemo, useState } from 'react'
 
+import { IMG_SIZE_PAGE, IMG_SIZE_POPUP } from '@/entities/ProductImgCarousel/model/constants/constants'
+import { TImgCarouselProps } from '@/entities/ProductImgCarousel/model/types/productImgCarouselType'
 import { bodyScrollControl } from '@/shared/libs/helpers/popupHelper'
 import { useResize } from '@/shared/libs/hooks/useResize'
 
-import { IMG_SIZE_PAGE, IMG_SIZE_POPUP } from '../../model/constants/constants'
-import { TImgCarouselProps } from '../../model/types/productImgCarouselType'
-
 import styles from './ImgCarousel.module.scss'
 
 /**

src/features/ProductImgCarousel/ui/PreviewCarousel/PreviewCarousel.tsx → src/entities/ProductImgCarousel/ui/PreviewCarousel/PreviewCarousel.tsx

@@ -2,13 +2,15 @@ import { type FC, useState, useEffect, useMemo, Dispatch, SetStateAction, MouseE
 
 import IconArrowDown from '@/assets/icons/IconArrowDown.svg'
 import IconArrowUp from '@/assets/icons/IconArrowUp.svg'
+import { getDisplayedIndex, slicedImgList } from '@/entities/ProductImgCarousel/model/functions/functions'
+import type {
+  TDisplayedImgList,
+  TChangeImgArgs
+} from '@/entities/ProductImgCarousel/model/types/productImgCarouselType'
 import type { IImage } from '@/shared/model/types/ImageModel'
 import { Button, ButtonTheme, ButtonDesign, ButtonSize } from '@/shared/ui/Button/Button'
 import { DISPLAYED_IMAGES_NUMBER } from '@/widgets/Product/model/constants/constants'
 
-import { getDisplayedIndex, slicedImgList } from '../../model/functions/functions'
-import type { TDisplayedImgList, TChangeImgArgs } from '../../model/types/productImgCarouselType'
-
 import styles from './PreviewCarousel.module.scss'
 
 interface IPreviewCarouselProps {

src/features/WidgetButtonsFunctions/WidgetButtonsFunctions.stories.tsx → src/entities/WidgetButtonsFunctions/WidgetButtonsFunctions.stories.tsx

@@ -1,6 +1,6 @@
 import { Story, Meta } from '@storybook/react'
 
-import { WidgetButtonsFunctions } from '@/features/WidgetButtonsFunctions/WidgetButtonsFunctions'
+import { WidgetButtonsFunctions } from '@/entities/WidgetButtonsFunctions/WidgetButtonsFunctions'
 import { ECardView } from '@/shared/model/types/common'
 
 export default {

src/features/WidgetButtonsFunctions/WidgetButtonsFunctions.tsx → src/entities/WidgetButtonsFunctions/WidgetButtonsFunctions.tsx

@@ -3,10 +3,10 @@ import { FC } from 'react'
 
 import IconCompare from '@/assets/icons/IconCompare.svg'
 import IconLike from '@/assets/icons/IconLike'
+import styles from '@/features/ProductItem/ProductItem.module.scss'
 import { ECardView } from '@/shared/model/types/common'
 import { Button, ButtonSize, ButtonTheme } from '@/shared/ui/Button/Button'
 import { getStylesForCurrentLayout } from '@/shared/ui/ProductLabels/utils/utils'
-import styles from '@/widgets/ProductItem/ProductItem.module.scss'
 
 import stylesSvg from './WidgetButtonsFunctions.module.scss'
 

src/features/WidgetButtonsPurchase/WidgetButtonsPurchase.module.scss → src/entities/WidgetButtonsPurchase/WidgetButtonsPurchase.module.scss

@@ -9,7 +9,6 @@
 .customButton {
   max-width: 120px;
   min-height: 50px;
-  padding: 5px;
   display: flex;
   align-items: center;
   justify-content: center;

src/features/WidgetButtonsPurchase/WidgetButtonsPurchase.stories.tsx → src/entities/WidgetButtonsPurchase/WidgetButtonsPurchase.stories.tsx

@@ -1,6 +1,6 @@
 import { Story, Meta } from '@storybook/react'
 
-import { WidgetButtonsPurchase } from '@/features/WidgetButtonsPurchase/WidgetButtonsPurchase'
+import { WidgetButtonsPurchase } from '@/entities/WidgetButtonsPurchase/WidgetButtonsPurchase'
 import { ECardView } from '@/shared/model/types/common'
 
 export default {

src/widgets/ProductItem/CardPreview/CardPreview.module.scss → src/features/ProductItem/CardPreview/CardPreview.module.scss

@@ -1,4 +1,4 @@
-@use '../../../shared/styles/utils/variables' as var;
+@use '@/shared/styles/utils/variables' as var;
 
 .modal-card {
   margin: 0 50px;

src/widgets/ProductItem/CardPreview/CardPreview.tsx → src/features/ProductItem/CardPreview/CardPreview.tsx

@@ -4,10 +4,10 @@ import { useNavigate } from 'react-router-dom'
 import IconCart from '@/assets/icons/IconCart.svg'
 import { useProductInCart } from '@/entities/CartEntity/model/hooks/cartHooks'
 import { useWithFavorite } from '@/entities/Favorite/model/hooks/useWithFavorie'
+import { ProductAvailability } from '@/entities/ProductAvailability/ProductAvailability'
+import { ProductImgCarousel } from '@/entities/ProductImgCarousel/ProductImgCarousel'
 import { CardPreviewFooter } from '@/features/CardPreviewFooter/CardPreviewFooter'
 import { CardPreviewHeader } from '@/features/CardPreviewHeader/CardPreviewHeader'
-import { ProductAvailability } from '@/features/ProductAvailability/ProductAvailability'
-import { ProductImgCarousel } from '@/features/ProductImgCarousel/ProductImgCarousel'
 import { Routes } from '@/shared/config/routerConfig/routes'
 import { IProduct } from '@/shared/model/types/ProductModel'
 import { Button, ButtonSize, ButtonTheme } from '@/shared/ui/Button/Button'
@@ -18,7 +18,7 @@ import { PopupImg } from '@/widgets/Product/ui/PopupImg/PopupImg'
 
 import styles from './CardPreview.module.scss'
 
-const LazyQuickPurchaseForm = lazy(() => import('@/features/QuickPurchase/index'))
+const LazyQuickPurchaseForm = lazy(() => import('@/features/QuickPurchase'))
 
 type TProps =
   | 'name'
@@ -118,9 +118,6 @@ export const CardPreview: FC<TCardPreviewProps> = ({
       <section className={styles['modal-card']}>
         <ProductImgCarousel imgList={images} setShowPopup={setShowPopup} />
         {showPopup && <PopupImg imgList={images} setShowPopup={setShowPopup} />}
-        {/*  /!* @TODO: Добавить компонент для фотографии товара*/}
-        {/*https://github.com/Studio-Yandex-Practicum/maxboom_frontend/issues/41 *!/*/}
-        {/*  <img src={`${images[0].image}`} alt={name} className={styles['modal-card__image']} />*/}
         <div className={styles.description}>
           <CardPreviewHeader
             brand={brand}

src/widgets/ProductItem/CardPreview/CardPrewiew.stories.tsx → src/features/ProductItem/CardPreview/CardPrewiew.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react'
 
 import image1 from '@/assets/images/product/1-260x260.webp'
-import { CardPreview } from '@/widgets/ProductItem/CardPreview/CardPreview'
+import { CardPreview } from '@/features/ProductItem/CardPreview/CardPreview'
 
 const meta = {
   title: 'widgets/CardPreview',

src/widgets/ProductItem/ProductItem.module.scss → src/features/ProductItem/ProductItem.module.scss

@@ -1,4 +1,4 @@
-@use '../../shared/styles/utils/variables' as var;
+@use '@/shared/styles/utils/variables' as var;
 
 .product-item {
   position: relative;

src/widgets/ProductItem/ProductItem.stories.tsx → src/features/ProductItem/ProductItem.stories.tsx

@@ -5,9 +5,9 @@ import image2 from '@/assets/images/product/1-500x500.webp'
 import image3 from '@/assets/images/product/2-500x500.webp'
 import image4 from '@/assets/images/product/3-500x500.webp'
 import image5 from '@/assets/images/product/4-500x500.webp'
+import { ProductItem } from '@/features/ProductItem/ProductItem'
 import { ECardView } from '@/shared/model/types/common'
 import type { IProduct } from '@/shared/model/types/ProductModel'
-import { ProductItem } from '@/widgets/ProductItem/ProductItem'
 
 export default {
   title: 'widgets/ProductItem',

src/widgets/ProductItem/ProductItem.tsx → src/features/ProductItem/ProductItem.tsx

@@ -2,11 +2,13 @@ import classnames from 'classnames'
 import { type FC, useState } from 'react'
 import { Link } from 'react-router-dom'
 
+import Carousel from '@/entities/Carousel/Carousel'
 import { useProductInCart } from '@/entities/CartEntity/model/hooks/cartHooks'
 import { useWithFavorite } from '@/entities/Favorite/model/hooks/useWithFavorie'
-import { ProductAvailability } from '@/features/ProductAvailability/ProductAvailability'
-import { WidgetButtonsFunctions } from '@/features/WidgetButtonsFunctions/WidgetButtonsFunctions'
-import { WidgetButtonsPurchase } from '@/features/WidgetButtonsPurchase/WidgetButtonsPurchase'
+import { ProductAvailability } from '@/entities/ProductAvailability/ProductAvailability'
+import { WidgetButtonsFunctions } from '@/entities/WidgetButtonsFunctions/WidgetButtonsFunctions'
+import { WidgetButtonsPurchase } from '@/entities/WidgetButtonsPurchase/WidgetButtonsPurchase'
+import { CardPreview } from '@/features/ProductItem/CardPreview/CardPreview'
 import { Routes } from '@/shared/config/routerConfig/routes'
 import { handleCutDescription } from '@/shared/libs/helpers/handleCutDescription'
 import { ECardView } from '@/shared/model/types/common'
@@ -16,8 +18,6 @@ import Modal from '@/shared/ui/Modal/Modal'
 import Paragraph from '@/shared/ui/Paragraph/Paragraph'
 import { ProductLabels } from '@/shared/ui/ProductLabels/ProductLabels'
 import { getStylesForCurrentLayout } from '@/shared/ui/ProductLabels/utils/utils'
-import Carousel from '@/widgets/Carousel/Carousel'
-import { CardPreview } from '@/widgets/ProductItem/CardPreview/CardPreview'
 
 import styles from './ProductItem.module.scss'
 

src/widgets/ProductItem/ProductSkeleton/ProductSkeleton.module.scss → src/features/ProductItem/ProductSkeleton/ProductSkeleton.module.scss

@@ -1,4 +1,4 @@
-@use '../../../shared/styles/utils/variables' as var;
+@use '@/shared/styles/utils/variables' as var;
 
 .sk-product-item {
   padding: 20px;

src/widgets/ProductItem/ProductSkeleton/ProductSkeleton.stories.tsx → src/features/ProductItem/ProductSkeleton/ProductSkeleton.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react'
 import { type FC } from 'react'
 
-import { ProductSkeleton } from '@/widgets/ProductItem/ProductSkeleton/ProductSkeleton'
+import { ProductSkeleton } from '@/features/ProductItem/ProductSkeleton/ProductSkeleton'
 
 const StorybookWrapper: FC = () => {
   return (

src/pages/ProductsPage/ProductsPage.module.scss

@@ -34,3 +34,15 @@
   display: none;
   }
 }
+
+.mobile-page-controls{
+  display: flex;
+  width: 100%;
+  align-items: end;
+
+  @include media.respond-to('middle') {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+}

src/pages/ProductsPage/ProductsPage.tsx

@@ -4,17 +4,9 @@ import { useSelector } from 'react-redux'
 import { useLocation } from 'react-router'
 import { useNavigate } from 'react-router-dom'
 
-import { selectFilterProducts, selectFilterQuantity } from '@/components/Dropdown/selectors/selectors'
-import { setFilterProducts, setProductQuantityFilter } from '@/components/Dropdown/slice/filtersSlice'
-import { PageControls } from '@/components/PageControls/PageControls'
-import { PageControlsSkeletons } from '@/components/PageControls/PageControlsSkeletons/PageControlsSkeletons'
-import { PageDescription } from '@/components/PageDescription/PageDescription'
-import { PageDescriptionSkeleton } from '@/components/PageDescription/PageDescriptionSkeleton/PageDescriptionSkeleton'
-import { Pagination } from '@/components/Pagination/Pagination'
-import { selectNumberOfPage } from '@/components/Pagination/selectors/selectors'
-import { setNumberOfPage } from '@/components/Pagination/slice/paginationSlice'
 import { selectCategoryId, selectCategorySlug } from '@/entities/Category/selectors/categorySelectors'
 import { setCategoryId } from '@/entities/Category/slice/categoryIdSlice'
+import { ProductSkeleton } from '@/features/ProductItem/ProductSkeleton/ProductSkeleton'
 import { getLoading, getProductsOfCategorySelector } from '@/pages/ProductsPage/selectors/selectors'
 import { getProducts } from '@/pages/ProductsPage/services/getProducts'
 import { ITEMS_PER_PAGE_OPTION, NUMBER_OF_PRODUCTS, SORT_OPTION } from '@/shared/constants/constants'
@@ -23,9 +15,18 @@ import { totalPagesHandler } from '@/shared/libs/helpers/totalPagesHandler'
 import { useAppDispatch } from '@/shared/libs/hooks/store'
 import { useReplaceValueFromLocation } from '@/shared/libs/hooks/useReplaceValueFromLocation'
 import { ECardView } from '@/shared/model/types/common'
+import { selectFilterProducts, selectFilterQuantity } from '@/shared/ui/Dropdown/selectors/selectors'
+import { setFilterProducts, setProductQuantityFilter } from '@/shared/ui/Dropdown/slice/filtersSlice'
 import WrapperForMainContent from '@/shared/ui/WrapperForMainContent/WrapperForMainContent'
 import { CategoryList } from '@/widgets/CategoryList/CategoryList'
-import { ProductSkeleton } from '@/widgets/ProductItem/ProductSkeleton/ProductSkeleton'
+import { CategoryListMobilePopup } from '@/widgets/CategoryList/CategoryListMobilePopup/CategoryListMobilePopup'
+import { PageControls } from '@/widgets/PageControls/PageControls'
+import { PageControlsSkeletons } from '@/widgets/PageControls/PageControlsSkeletons/PageControlsSkeletons'
+import { PageDescription } from '@/widgets/PageDescription/PageDescription'
+import { PageDescriptionSkeleton } from '@/widgets/PageDescription/PageDescriptionSkeleton/PageDescriptionSkeleton'
+import { Pagination } from '@/widgets/Pagination/Pagination'
+import { selectNumberOfPage } from '@/widgets/Pagination/selectors/selectors'
+import { setNumberOfPage } from '@/widgets/Pagination/slice/paginationSlice'
 import { ProductsList } from '@/widgets/ProductsList/ProductsList'
 
 import styles from './ProductsPage.module.scss'
@@ -164,16 +165,19 @@ export const ProductsPage = () => {
                 </>
               ) : categoriesProducts.results.length > 0 ? (
                 <>
-                  <PageControls
-                    cardView={cardView}
-                    handleCardViewChange={handleCardViewChange}
-                    handleItemsPerPageChange={handleItemsPerPageChange}
-                    handleSortChange={handleSortChange}
-                    itemPerPageOptions={ITEMS_PER_PAGE_OPTION}
-                    sortOptions={SORT_OPTION}
-                    changeValueToFilterProducts={selectProductsFilter.name}
-                    changeValueToQuantityProducts={selectQuantityFilter.name}
-                  />
+                  <div className={styles['mobile-page-controls']}>
+                    <CategoryListMobilePopup />
+                    <PageControls
+                      cardView={cardView}
+                      handleCardViewChange={handleCardViewChange}
+                      handleItemsPerPageChange={handleItemsPerPageChange}
+                      handleSortChange={handleSortChange}
+                      itemPerPageOptions={ITEMS_PER_PAGE_OPTION}
+                      sortOptions={SORT_OPTION}
+                      changeValueToFilterProducts={selectProductsFilter.name}
+                      changeValueToQuantityProducts={selectQuantityFilter.name}
+                    />
+                  </div>
                   <ProductsList items={categoriesProducts} cardView={cardView} />
                 </>
               ) : (

src/components/Dropdown/Dropdown.tsx → src/shared/ui/Dropdown/Dropdown.tsx

@@ -1,6 +1,6 @@
 import React, { ChangeEvent, useState } from 'react'
 
-import type { TSortOptions } from '@/components/PageControls/PageControls'
+import type { TSortOptions } from '@/widgets/PageControls/PageControls'
 
 import styles from './Dropdown.module.scss'
 

src/components/Dropdown/slice/filtersSlice.tsx → src/shared/ui/Dropdown/slice/filtersSlice.tsx

@@ -1,7 +1,7 @@
 import { createSlice } from '@reduxjs/toolkit'
 
-import type { ICategoryFiltersSchema } from '@/components/Dropdown/types/types'
 import { SORT_NAMES, SORT_VALUES } from '@/shared/constants/constants'
+import type { ICategoryFiltersSchema } from '@/shared/ui/Dropdown/types/types'
 
 const initialState: ICategoryFiltersSchema = {
   filterProducts: { name: SORT_NAMES.NAMES_A_YA, value: SORT_VALUES.NAMES_A_YA },

src/widgets/AccountCart/ui/AccountCartCard/AccountCartCard.tsx

@@ -1,7 +1,7 @@
 import { FC, useState } from 'react'
 
 import { useWithFavorite } from '@/entities/Favorite/model/hooks/useWithFavorie'
-import { WidgetButtonsFunctions } from '@/features/WidgetButtonsFunctions/WidgetButtonsFunctions'
+import { WidgetButtonsFunctions } from '@/entities/WidgetButtonsFunctions/WidgetButtonsFunctions'
 import { Routes } from '@/shared/config/routerConfig/routes'
 import { ECardView } from '@/shared/model/types/common'
 import { IProduct } from '@/shared/model/types/ProductModel'

src/entities/CategoryListMobilePopup/CategoryListMobilePopup.module.scss → src/widgets/CategoryList/CategoryListMobilePopup/CategoryListMobilePopup.module.scss

@@ -16,7 +16,7 @@
 
   @include media.respond-to('large') {
     display: flex;
-    max-width: 310px;
+    width: 310px;
   }
 }
 

src/entities/CategoryListMobilePopup/CategoryListMobilePopup.tsx → src/widgets/CategoryList/CategoryListMobilePopup/CategoryListMobilePopup.tsx

@@ -1,10 +1,10 @@
 import { type FC, useState } from 'react'
 
-import styles from '@/entities/CategoryListMobilePopup/CategoryListMobilePopup.module.scss'
 import MobileMenuIcon from '@/shared/icons/MobileMenuIcon.svg'
 import { Button, ButtonSize, ButtonTheme } from '@/shared/ui/Button/Button'
 import Modal from '@/shared/ui/Modal/Modal'
 import { CategoryList } from '@/widgets/CategoryList/CategoryList'
+import styles from '@/widgets/CategoryList/CategoryListMobilePopup/CategoryListMobilePopup.module.scss'
 
 export const CategoryListMobilePopup: FC = () => {
   const [isModalOpen, setIsModalOpen] = useState(false)

src/components/PageControls/PageControls.module.scss → src/widgets/PageControls/PageControls.module.scss

@@ -7,6 +7,10 @@
   justify-content: space-between;
   gap: 10px;
 
+  @include media.respond-to('large') {
+    justify-content: end;
+  }
+
   @include media.respond-to('middle') {
     flex-direction: column;
   }