simplify structure (#118)

src/app/archive/page.tsx

@@ -1,8 +1,8 @@
 import CoreLayout from "@/components/layouts/CoreLayout";
 import { serviceClient } from "@/lib/api";
 
-import { MediaProvider } from "@/components/global/MediaProvider";
-import { ArchiveMediaItem } from "@/components/global/MediaProvider/ArchiveMediaItem";
+import { FullscreenImagesCarousel } from "@/components/sections/FullscreenImagesCarousel";
+import { ArchiveMediaItem } from "@/components/sections/FullscreenImagesCarousel/ArchiveMediaItem";
 
 export default async function Page() {
   const { archives } = await serviceClient.GetArchivesPaged({
@@ -23,7 +23,7 @@ export default async function Page() {
                 {/* todo: fix images. make sure all the images have known size + add scroll when there are more images  */}
 
                 {a.items && (
-                  <MediaProvider
+                  <FullscreenImagesCarousel
                     mediaList={a.items.map((x) => x.archiveItem?.media!)}
                     ItemComponent={ArchiveMediaItem}
                   />

src/app/cart/page.tsx

@@ -1,11 +1,11 @@
 import { Suspense } from "react";
-import CartProductsList from "@/components/cart/CartProductsList";
+import CartProductsList from "@/components/sections/Cart/CartProductsList";
 import CoreLayout from "@/components/layouts/CoreLayout";
 import { CartProductsSkeleton } from "@/components/ui/Skeleton";
 import Button from "@/components/ui/Button";
 import { ButtonStyle } from "@/components/ui/Button/styles";
 import Link from "next/link";
-import TotalPrice from "@/components/cart/TotalPrice";
+import TotalPrice from "@/components/sections/Cart/TotalPrice";
 import { getCookieCart } from "@/lib/utils/cart";
 
 export const dynamic = "force-dynamic";

src/app/catalog/page.tsx

@@ -1,5 +1,5 @@
 import CatalogSection from "@/components/sections/CatalogSection";
-import Filters from "@/components/Filters";
+import Filters from "@/components/sections/Filters";
 import CoreLayout from "@/components/layouts/CoreLayout";
 import { CATALOG_LIMIT } from "@/constants";
 import { serviceClient } from "@/lib/api";

src/app/not-found.tsx

@@ -1,4 +1,4 @@
-import Header from "@/components/global/Header";
+import Header from "@/components/sections/Header";
 import Button from "@/components/ui/Button";
 import { ButtonStyle } from "@/components/ui/Button/styles";
 import Link from "next/link";

src/app/product/[...productParams]/page.tsx

@@ -1,12 +1,9 @@
 import { addCartProduct } from "@/actions/cart";
 import AddToCartForm from "@/components/forms/AddToCartForm";
-import { MediaProvider } from "@/components/global/MediaProvider";
-import { ProductMediaItem } from "@/components/global/MediaProvider/ProductMediaItem";
-import Modal from "@/components/ui/Modal";
+import { FullscreenImagesCarousel } from "@/components/sections/FullscreenImagesCarousel";
+import { ProductMediaItem } from "@/components/sections/FullscreenImagesCarousel/ProductMediaItem";
 import CoreLayout from "@/components/layouts/CoreLayout";
-import MeasurementsModalContent from "@/components/product/MeasurementsModalContent";
-import Button from "@/components/ui/Button";
-import { ButtonStyle } from "@/components/ui/Button/styles";
+import MeasurementsModal from "@/components/sections/MeasurementsModal";
 import { CURRENCY_MAP, MAX_LIMIT } from "@/constants";
 import { serviceClient } from "@/lib/api";
 import { notFound } from "next/navigation";
@@ -62,7 +59,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
       <div className="flex flex-col bg-white pb-20 pt-5">
         {product?.media && (
           <div className="grid w-full grid-cols-6 items-end gap-2">
-            <MediaProvider
+            <FullscreenImagesCarousel
               mediaList={product.media}
               ItemComponent={ProductMediaItem}
             />
@@ -80,15 +77,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
             {product?.product?.productDisplay?.productBody?.description}
           </div>
           <div className="mt-4">
-            <Modal
-              openElement={
-                <Button asChild style={ButtonStyle.underlinedButton}>
-                  measurements
-                </Button>
-              }
-            >
-              <MeasurementsModalContent />
-            </Modal>
+            <MeasurementsModal />
           </div>
 
           {baseCurrencyPrice &&

src/components/layouts/CoreLayout.tsx

@@ -1,12 +1,12 @@
-import CartPopup from "@/components/cart/CartPopup";
-import Footer from "@/components/global/Footer";
-import Header from "@/components/global/Header";
+import CartPopup from "@/components/sections/Cart/CartPopup";
+import Footer from "@/components/sections/Footer";
+import Header from "@/components/sections/Header";
 import Button from "@/components/ui/Button";
 import { ButtonStyle } from "@/components/ui/Button/styles";
 import Link from "next/link";
 import { Suspense } from "react";
-import CartProductsList from "../cart/CartProductsList";
-import TotalPrice from "../cart/TotalPrice";
+import CartProductsList from "@/components/sections/Cart/CartProductsList";
+import TotalPrice from "@/components/sections/Cart/TotalPrice";
 import { getCookieCart } from "@/lib/utils/cart";
 
 export default function CoreLayout({

src/components/layouts/HeroContextLayout.tsx

@@ -1,5 +1,5 @@
 import { serviceClient } from "@/lib/api";
-import { HeroContextProvider } from "../contexts/HeroContext";
+import { HeroContextProvider } from "@/components/contexts/HeroContext";
 
 type Props = {
   children: React.ReactNode;

src/components/sections/AdsSection.tsx

@@ -1,5 +1,5 @@
 import { common_HeroItem } from "@/api/proto-http/frontend";
-import Image from "@/components/global/Image";
+import Image from "@/components/ui/Image";
 import { calculateAspectRatio } from "@/lib/utils";
 
 export default function AdsSection({

src/components/cart/CartItemRow.tsx → src/components/sections/Cart/CartItemRow.tsx

@@ -1,6 +1,6 @@
 import { changeCartProductQuantity, removeCartProduct } from "@/actions/cart";
 import type { common_ProductFull } from "@/api/proto-http/frontend";
-import ImageComponent from "../global/Image";
+import ImageComponent from "@/components/ui/Image";
 import ProductAmountButtons from "./ProductAmountButtons";
 
 export default function CartItemRow({

src/components/cart/CartPopup.tsx → src/components/sections/Cart/CartPopup.tsx

@@ -5,7 +5,7 @@ import { cn } from "@/lib/utils";
 import { useClickAway } from "@uidotdev/usehooks";
 import Link from "next/link";
 import { useState } from "react";
-import { ButtonStyle } from "../ui/Button/styles";
+import { ButtonStyle } from "@/components/ui/Button/styles";
 
 export default function CartPopup({
   children,

src/components/cart/CartProductsList.tsx → src/components/sections/Cart/CartProductsList.tsx

@@ -1,11 +1,11 @@
-import CartItemRow from "@/components/cart/CartItemRow";
 import Button from "@/components/ui/Button";
 import { serviceClient } from "@/lib/api";
 import {
   getCartProductSlugAndSizeFromKey,
   getCookieCart,
 } from "@/lib/utils/cart";
 import Link from "next/link";
+import CartItemRow from "./CartItemRow";
 
 export default async function CartProductsList() {
   const cartData = getCookieCart();

src/components/Filters/Category.tsx → src/components/sections/Filters/Category.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { useHeroContext } from "../contexts/HeroContext";
-import GenericPopover from "../ui/Popover";
+import { useHeroContext } from "@/components/contexts/HeroContext";
+import GenericPopover from "@/components/ui/Popover";
 import useFilterQueryParams from "./useFilterQueryParams";
 import FilterOptionButtons from "./FilterOptionButtons";
 

src/components/Filters/Order.tsx → src/components/sections/Filters/Order.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { useHeroContext } from "../contexts/HeroContext";
-import GenericPopover from "../ui/Popover";
+import { useHeroContext } from "@/components/contexts/HeroContext";
+import GenericPopover from "@/components/ui/Popover";
 import useFilterQueryParams from "./useFilterQueryParams";
 import FilterOptionButtons from "./FilterOptionButtons";
 

src/components/Filters/Size.tsx → src/components/sections/Filters/Size.tsx

@@ -1,6 +1,6 @@
 "use client";
-import { useHeroContext } from "../contexts/HeroContext";
-import GenericPopover from "../ui/Popover";
+import { useHeroContext } from "@/components/contexts/HeroContext";
+import GenericPopover from "@/components/ui/Popover";
 import useFilterQueryParams from "./useFilterQueryParams";
 import FilterOptionButtons from "./FilterOptionButtons";
 

src/components/Filters/Sort.tsx → src/components/sections/Filters/Sort.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import GenericPopover from "@/components/ui/Popover";
-import { useHeroContext } from "../contexts/HeroContext";
+import { useHeroContext } from "@/components/contexts/HeroContext";
 import useFilterQueryParams from "./useFilterQueryParams";
 import FilterOptionButtons from "./FilterOptionButtons";
 

src/components/global/MediaProvider/ArchiveMediaItem.tsx → src/components/sections/FullscreenImagesCarousel/ArchiveMediaItem.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { common_MediaFull } from "@/api/proto-http/frontend";
-import GlobalImage from "@/components/global/Image";
+import GlobalImage from "@/components/ui/Image";
 import { calculateAspectRatio } from "@/lib/utils";
 import { PhotoView } from "react-photo-view";
 

src/components/global/MediaProvider/ProductMediaItem.tsx → src/components/sections/FullscreenImagesCarousel/ProductMediaItem.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { common_MediaFull } from "@/api/proto-http/frontend";
-import GlobalImage from "@/components/global/Image";
+import GlobalImage from "@/components/ui/Image";
 import { calculateAspectRatio } from "@/lib/utils";
 import { PhotoView } from "react-photo-view";
 

src/components/global/MediaProvider/index.tsx → src/components/sections/FullscreenImagesCarousel/index.tsx

@@ -4,7 +4,7 @@ import { common_MediaFull } from "@/api/proto-http/frontend";
 import { PhotoProvider } from "react-photo-view";
 import "react-photo-view/dist/react-photo-view.css";
 
-export function MediaProvider({
+export function FullscreenImagesCarousel({
   mediaList,
   ItemComponent,
 }: {

src/components/global/Header/index.tsx → src/components/sections/Header/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import Image from "@/components/global/Image";
+import Image from "@/components/ui/Image";
 import useMobileMenu from "./useMobileMenu";
 import Button from "@/components/ui/Button";
 

src/components/sections/HeroSection.tsx

@@ -1,5 +1,5 @@
 import { common_HeroItem } from "@/api/proto-http/frontend";
-import Image from "@/components/global/Image";
+import Image from "@/components/ui/Image";
 
 export default function Hero({ media }: common_HeroItem) {
   if (!media) return null;

src/components/product/MeasurementsModalContent.tsx → src/components/sections/MeasurementsModal/MeasurementsModalContent.tsx

@@ -1,8 +1,10 @@
 "use client";
+
 import { useLockBodyScroll } from "@uidotdev/usehooks";
 
 export default function MeasurementsModalContent() {
   useLockBodyScroll();
+
   return (
     <div className="flex h-full w-full pt-20 text-buttonTextColor">
       <div className="w-1/2 ">Image placeholder</div>

src/components/sections/MeasurementsModal/index.tsx

@@ -0,0 +1,18 @@
+import Button from "@/components/ui/Button";
+import { ButtonStyle } from "@/components/ui/Button/styles";
+import Modal from "@/components/ui/Modal";
+import MeasurementsModalContent from "./MeasurementsModalContent";
+
+export default function Component() {
+  return (
+    <Modal
+      openElement={
+        <Button asChild style={ButtonStyle.underlinedButton}>
+          measurements
+        </Button>
+      }
+    >
+      <MeasurementsModalContent />
+    </Modal>
+  );
+}

src/components/sections/ProductsGridSection/ProductItem.tsx

@@ -1,5 +1,5 @@
 import type { common_Product } from "@/api/proto-http/frontend";
-import Image from "@/components/global/Image";
+import Image from "@/components/ui/Image";
 import Button from "@/components/ui/Button";
 import { CURRENCY_MAP } from "@/constants";
 import { cn } from "@/lib/utils";