diff --git a/storefront/components/Basic/Heading/Heading.tsx b/storefront/components/Basic/Heading/Heading.tsx index 7a9520b577..5d4685cb53 100644 --- a/storefront/components/Basic/Heading/Heading.tsx +++ b/storefront/components/Basic/Heading/Heading.tsx @@ -1,6 +1,6 @@ import { HTMLAttributes } from 'react'; import { twJoin } from 'tailwind-merge'; -import { ExtractNativePropsFromDefault } from 'typeHelpers/ExtractNativePropsFromDefault'; +import { ExtractNativePropsFromDefault } from 'types/ExtractNativePropsFromDefault'; import { twMergeCustom } from 'helpers/twMerge'; type NativeProps = ExtractNativePropsFromDefault, never, 'style' | 'onClick'>; diff --git a/storefront/components/Basic/Icon/IconImage.tsx b/storefront/components/Basic/Icon/IconImage.tsx index 463dfad0a6..7e09cd5008 100644 --- a/storefront/components/Basic/Icon/IconImage.tsx +++ b/storefront/components/Basic/Icon/IconImage.tsx @@ -1,5 +1,5 @@ import { HTMLAttributes } from 'react'; -import { ExtractNativePropsFromDefault } from 'typeHelpers/ExtractNativePropsFromDefault'; +import { ExtractNativePropsFromDefault } from 'types/ExtractNativePropsFromDefault'; type NativeProps = ExtractNativePropsFromDefault, never, 'onClick' | 'title'>; diff --git a/storefront/components/Basic/Link/Link.tsx b/storefront/components/Basic/Link/Link.tsx index 2838030e35..4f610c6f5d 100644 --- a/storefront/components/Basic/Link/Link.tsx +++ b/storefront/components/Basic/Link/Link.tsx @@ -1,6 +1,6 @@ import { Button } from 'components/Forms/Button/Button'; import { AnchorHTMLAttributes } from 'react'; -import { ExtractNativePropsFromDefault } from 'typeHelpers/ExtractNativePropsFromDefault'; +import { ExtractNativePropsFromDefault } from 'types/ExtractNativePropsFromDefault'; import { ExtendedNextLink } from '../ExtendedNextLink/ExtendedNextLink'; import { twMergeCustom } from 'helpers/twMerge'; diff --git a/storefront/components/Blocks/Adverts/Adverts.tsx b/storefront/components/Blocks/Adverts/Adverts.tsx index 0a4f823ef9..ac3e3c5d2d 100644 --- a/storefront/components/Blocks/Adverts/Adverts.tsx +++ b/storefront/components/Blocks/Adverts/Adverts.tsx @@ -2,7 +2,7 @@ import { ExtendedNextLink } from 'components/Basic/ExtendedNextLink/ExtendedNext import { Image } from 'components/Basic/Image/Image'; import { isElementVisible } from 'helpers/isElementVisible'; import { Webline } from 'components/Layout/Webline/Webline'; -import { desktopFirstSizes } from 'components/Theme/mediaQueries'; +import { desktopFirstSizes } from 'helpers/mediaQueries'; import { AdvertsFragmentApi, CategoryDetailFragmentApi, useAdvertsQueryApi } from 'graphql/generated'; import { useGetWindowSize } from 'hooks/ui/useGetWindowSize'; import { useResizeWidthEffect } from 'hooks/ui/useResizeWidthEffect'; diff --git a/storefront/components/Blocks/Banners/BannersSlider.tsx b/storefront/components/Blocks/Banners/BannersSlider.tsx index a19f83603a..6e6714cca7 100644 --- a/storefront/components/Blocks/Banners/BannersSlider.tsx +++ b/storefront/components/Blocks/Banners/BannersSlider.tsx @@ -5,7 +5,7 @@ import { useGetWindowSize } from 'hooks/ui/useGetWindowSize'; import 'keen-slider/keen-slider.min.css'; import { useKeenSlider } from 'keen-slider/react'; import { useEffect, useRef, useState } from 'react'; -import { desktopFirstSizes } from 'components/Theme/mediaQueries'; +import { desktopFirstSizes } from 'helpers/mediaQueries'; import Skeleton from 'react-loading-skeleton'; type BannersSliderProps = { diff --git a/storefront/components/Blocks/Product/ButtonsAction/ProductWishlistButton.tsx b/storefront/components/Blocks/Product/ButtonsAction/ProductWishlistButton.tsx index 8bc1171e64..b20a42c933 100644 --- a/storefront/components/Blocks/Product/ButtonsAction/ProductWishlistButton.tsx +++ b/storefront/components/Blocks/Product/ButtonsAction/ProductWishlistButton.tsx @@ -1,7 +1,7 @@ import { HeartIcon } from 'components/Basic/Icon/IconsSvg'; import useTranslation from 'next-translate/useTranslation'; import { HTMLAttributes } from 'react'; -import { ExtractNativePropsFromDefault } from 'typeHelpers/ExtractNativePropsFromDefault'; +import { ExtractNativePropsFromDefault } from 'types/ExtractNativePropsFromDefault'; import { twMergeCustom } from 'helpers/twMerge'; type NativeProps = ExtractNativePropsFromDefault, never, 'className'>; diff --git a/storefront/components/Blocks/SortingBar/SortingBar.tsx b/storefront/components/Blocks/SortingBar/SortingBar.tsx index e6882dd057..9d93f91eb2 100644 --- a/storefront/components/Blocks/SortingBar/SortingBar.tsx +++ b/storefront/components/Blocks/SortingBar/SortingBar.tsx @@ -1,6 +1,6 @@ import { isElementVisible } from 'helpers/isElementVisible'; import { SortIcon } from 'components/Basic/Icon/IconsSvg'; -import { mobileFirstSizes } from 'components/Theme/mediaQueries'; +import { mobileFirstSizes } from 'helpers/mediaQueries'; import { ProductOrderingModeEnumApi } from 'graphql/generated'; import { DEFAULT_SORT } from 'helpers/filterOptions/seoCategories'; import { getUrlQueriesWithoutDynamicPageQueries } from 'helpers/parsing/urlParsing'; diff --git a/storefront/components/Forms/Checkbox/Checkbox.tsx b/storefront/components/Forms/Checkbox/Checkbox.tsx index 35b59f7225..b1f5b191d3 100644 --- a/storefront/components/Forms/Checkbox/Checkbox.tsx +++ b/storefront/components/Forms/Checkbox/Checkbox.tsx @@ -1,7 +1,7 @@ import { LabelWrapper } from 'components/Forms/Lib/LabelWrapper'; import { twMergeCustom } from 'helpers/twMerge'; import { forwardRef, InputHTMLAttributes, ReactNode } from 'react'; -import { ExtractNativePropsFromDefault } from 'typeHelpers/ExtractNativePropsFromDefault'; +import { ExtractNativePropsFromDefault } from 'types/ExtractNativePropsFromDefault'; type NativeProps = ExtractNativePropsFromDefault< InputHTMLAttributes, diff --git a/storefront/components/Forms/CheckboxColor/CheckboxColor.tsx b/storefront/components/Forms/CheckboxColor/CheckboxColor.tsx index 06b71ab85d..1608c9641c 100644 --- a/storefront/components/Forms/CheckboxColor/CheckboxColor.tsx +++ b/storefront/components/Forms/CheckboxColor/CheckboxColor.tsx @@ -1,7 +1,7 @@ import { ColorLabelWrapper } from 'components/Forms/Lib/ColorLabelWrapper'; import { InputHTMLAttributes } from 'react'; import tinycolor from 'tinycolor2'; -import { ExtractNativePropsFromDefault } from 'typeHelpers/ExtractNativePropsFromDefault'; +import { ExtractNativePropsFromDefault } from 'types/ExtractNativePropsFromDefault'; type NativeProps = ExtractNativePropsFromDefault< InputHTMLAttributes, diff --git a/storefront/components/Forms/Form/Form.tsx b/storefront/components/Forms/Form/Form.tsx index e2d4d21d1d..6e06a88bc8 100644 --- a/storefront/components/Forms/Form/Form.tsx +++ b/storefront/components/Forms/Form/Form.tsx @@ -1,6 +1,6 @@ import { FormEvent, FormHTMLAttributes } from 'react'; import { useFormContext } from 'react-hook-form'; -import { ExtractNativePropsFromDefault } from 'typeHelpers/ExtractNativePropsFromDefault'; +import { ExtractNativePropsFromDefault } from 'types/ExtractNativePropsFromDefault'; type NativeProps = ExtractNativePropsFromDefault, never, 'onSubmit' | 'style'>; diff --git a/storefront/components/Forms/Lib/ChoiceFormLine.tsx b/storefront/components/Forms/Lib/ChoiceFormLine.tsx index a6e8a4cbab..4a37f066ce 100644 --- a/storefront/components/Forms/Lib/ChoiceFormLine.tsx +++ b/storefront/components/Forms/Lib/ChoiceFormLine.tsx @@ -1,6 +1,6 @@ import { twMergeCustom } from 'helpers/twMerge'; import { HTMLAttributes } from 'react'; -import { ExtractNativePropsFromDefault } from 'typeHelpers/ExtractNativePropsFromDefault'; +import { ExtractNativePropsFromDefault } from 'types/ExtractNativePropsFromDefault'; type NativeProps = ExtractNativePropsFromDefault, never, 'style'>; diff --git a/storefront/components/Forms/Lib/ColorLabelWrapper.tsx b/storefront/components/Forms/Lib/ColorLabelWrapper.tsx index 37e93d6a75..66f8c5e7a1 100644 --- a/storefront/components/Forms/Lib/ColorLabelWrapper.tsx +++ b/storefront/components/Forms/Lib/ColorLabelWrapper.tsx @@ -1,7 +1,7 @@ import { Tooltip } from 'components/Basic/Tooltip/Tooltip'; import { LabelHTMLAttributes } from 'react'; import { twJoin } from 'tailwind-merge'; -import { ExtractNativePropsFromDefault } from 'typeHelpers/ExtractNativePropsFromDefault'; +import { ExtractNativePropsFromDefault } from 'types/ExtractNativePropsFromDefault'; type NativeProps = ExtractNativePropsFromDefault, never, 'htmlFor'>; diff --git a/storefront/components/Forms/Lib/FormLine.tsx b/storefront/components/Forms/Lib/FormLine.tsx index 2cc0f4d126..89d3f1ae31 100644 --- a/storefront/components/Forms/Lib/FormLine.tsx +++ b/storefront/components/Forms/Lib/FormLine.tsx @@ -1,5 +1,5 @@ import { HTMLAttributes } from 'react'; -import { ExtractNativePropsFromDefault } from 'typeHelpers/ExtractNativePropsFromDefault'; +import { ExtractNativePropsFromDefault } from 'types/ExtractNativePropsFromDefault'; import { twMergeCustom } from 'helpers/twMerge'; type NativeProps = ExtractNativePropsFromDefault, never, 'style'>; diff --git a/storefront/components/Forms/Lib/LabelWrapper.tsx b/storefront/components/Forms/Lib/LabelWrapper.tsx index 653bc29eeb..a811af6bb9 100644 --- a/storefront/components/Forms/Lib/LabelWrapper.tsx +++ b/storefront/components/Forms/Lib/LabelWrapper.tsx @@ -1,5 +1,5 @@ import { LabelHTMLAttributes, ReactNode } from 'react'; -import { ExtractNativePropsFromDefault } from 'typeHelpers/ExtractNativePropsFromDefault'; +import { ExtractNativePropsFromDefault } from 'types/ExtractNativePropsFromDefault'; import { twMergeCustom } from 'helpers/twMerge'; import { CheckmarkIcon } from 'components/Basic/Icon/IconsSvg'; diff --git a/storefront/components/Forms/Radiobutton/Radiobutton.tsx b/storefront/components/Forms/Radiobutton/Radiobutton.tsx index 74bdefcc40..6ad23c3772 100644 --- a/storefront/components/Forms/Radiobutton/Radiobutton.tsx +++ b/storefront/components/Forms/Radiobutton/Radiobutton.tsx @@ -2,7 +2,7 @@ import { LabelWrapper } from '../Lib/LabelWrapper'; import { Image } from 'components/Basic/Image/Image'; import { ImageSizesFragmentApi } from 'graphql/generated'; import { forwardRef, InputHTMLAttributes, MouseEventHandler, ReactNode, useCallback } from 'react'; -import { ExtractNativePropsFromDefault } from 'typeHelpers/ExtractNativePropsFromDefault'; +import { ExtractNativePropsFromDefault } from 'types/ExtractNativePropsFromDefault'; type NativeProps = ExtractNativePropsFromDefault< InputHTMLAttributes, diff --git a/storefront/components/Forms/Select/Select.tsx b/storefront/components/Forms/Select/Select.tsx index f0265ebd12..154b8f775f 100644 --- a/storefront/components/Forms/Select/Select.tsx +++ b/storefront/components/Forms/Select/Select.tsx @@ -3,7 +3,7 @@ import { LabelWrapper } from 'components/Forms/Lib/LabelWrapper'; import { ReactNode } from 'react'; import SelectReact from 'react-select'; import { components, Props } from 'react-select'; -import { ExtractNativePropsFromDefault } from 'typeHelpers/ExtractNativePropsFromDefault'; +import { ExtractNativePropsFromDefault } from 'types/ExtractNativePropsFromDefault'; type NativeProps = ExtractNativePropsFromDefault< Props, diff --git a/storefront/components/Forms/TextInput/PasswordInputControlled.tsx b/storefront/components/Forms/TextInput/PasswordInputControlled.tsx index ca50f8d28f..6cb11197cc 100644 --- a/storefront/components/Forms/TextInput/PasswordInputControlled.tsx +++ b/storefront/components/Forms/TextInput/PasswordInputControlled.tsx @@ -3,7 +3,7 @@ import { TextInput } from './TextInput'; import { InputHTMLAttributes, ReactElement, useCallback, useState } from 'react'; import { Control, useController } from 'react-hook-form'; import { twJoin } from 'tailwind-merge'; -import { ExtractNativePropsFromDefault } from 'typeHelpers/ExtractNativePropsFromDefault'; +import { ExtractNativePropsFromDefault } from 'types/ExtractNativePropsFromDefault'; type NativeProps = ExtractNativePropsFromDefault, never, 'name'>; diff --git a/storefront/components/Forms/TextInput/SearchInput.tsx b/storefront/components/Forms/TextInput/SearchInput.tsx index 951a62693f..a2c4f6dbaf 100644 --- a/storefront/components/Forms/TextInput/SearchInput.tsx +++ b/storefront/components/Forms/TextInput/SearchInput.tsx @@ -2,7 +2,7 @@ import { CloseIcon, SearchIcon } from 'components/Basic/Icon/IconsSvg'; import { Loader } from 'components/Basic/Loader/Loader'; import useTranslation from 'next-translate/useTranslation'; import { InputHTMLAttributes, KeyboardEventHandler } from 'react'; -import { ExtractNativePropsFromDefault } from 'typeHelpers/ExtractNativePropsFromDefault'; +import { ExtractNativePropsFromDefault } from 'types/ExtractNativePropsFromDefault'; import { twMergeCustom } from 'helpers/twMerge'; type NativeProps = ExtractNativePropsFromDefault, 'onChange', never>; diff --git a/storefront/components/Forms/TextInput/TextInput.tsx b/storefront/components/Forms/TextInput/TextInput.tsx index 1fa0ae1f9f..c3b066ecaa 100644 --- a/storefront/components/Forms/TextInput/TextInput.tsx +++ b/storefront/components/Forms/TextInput/TextInput.tsx @@ -1,6 +1,6 @@ import { LabelWrapper } from 'components/Forms/Lib/LabelWrapper'; import { forwardRef, InputHTMLAttributes, ReactNode } from 'react'; -import { ExtractNativePropsFromDefault } from 'typeHelpers/ExtractNativePropsFromDefault'; +import { ExtractNativePropsFromDefault } from 'types/ExtractNativePropsFromDefault'; import { twMergeCustom } from 'helpers/twMerge'; type NativeProps = ExtractNativePropsFromDefault< diff --git a/storefront/components/Forms/Textarea/Textarea.tsx b/storefront/components/Forms/Textarea/Textarea.tsx index 3b7309bb11..d05a22ab73 100644 --- a/storefront/components/Forms/Textarea/Textarea.tsx +++ b/storefront/components/Forms/Textarea/Textarea.tsx @@ -1,7 +1,7 @@ import { LabelWrapper } from 'components/Forms/Lib/LabelWrapper'; import { forwardRef, TextareaHTMLAttributes } from 'react'; import { twJoin } from 'tailwind-merge'; -import { ExtractNativePropsFromDefault } from 'typeHelpers/ExtractNativePropsFromDefault'; +import { ExtractNativePropsFromDefault } from 'types/ExtractNativePropsFromDefault'; type NativeProps = ExtractNativePropsFromDefault< TextareaHTMLAttributes, diff --git a/storefront/components/Forms/ToggleSwitch/ToggleSwitch.tsx b/storefront/components/Forms/ToggleSwitch/ToggleSwitch.tsx index 555e0ca64c..6032d572fd 100644 --- a/storefront/components/Forms/ToggleSwitch/ToggleSwitch.tsx +++ b/storefront/components/Forms/ToggleSwitch/ToggleSwitch.tsx @@ -1,5 +1,5 @@ import { forwardRef, InputHTMLAttributes } from 'react'; -import { ExtractNativePropsFromDefault } from 'typeHelpers/ExtractNativePropsFromDefault'; +import { ExtractNativePropsFromDefault } from 'types/ExtractNativePropsFromDefault'; type NativeProps = ExtractNativePropsFromDefault< InputHTMLAttributes, diff --git a/storefront/components/Layout/Header/Contact/HeaderContact.tsx b/storefront/components/Layout/Header/Contact/HeaderContact.tsx index 29364bdc56..48b02a5648 100644 --- a/storefront/components/Layout/Header/Contact/HeaderContact.tsx +++ b/storefront/components/Layout/Header/Contact/HeaderContact.tsx @@ -1,6 +1,6 @@ import { isElementVisible } from 'helpers/isElementVisible'; import { PhoneIcon } from 'components/Basic/Icon/IconsSvg'; -import { mobileFirstSizes } from 'components/Theme/mediaQueries'; +import { mobileFirstSizes } from 'helpers/mediaQueries'; import { useGetWindowSize } from 'hooks/ui/useGetWindowSize'; import { useResizeWidthEffect } from 'hooks/ui/useResizeWidthEffect'; import { useState } from 'react'; diff --git a/storefront/components/Pages/ProductDetail/ProductDetailGallery.tsx b/storefront/components/Pages/ProductDetail/ProductDetailGallery.tsx index 87c41aae5f..260e3f4464 100644 --- a/storefront/components/Pages/ProductDetail/ProductDetailGallery.tsx +++ b/storefront/components/Pages/ProductDetail/ProductDetailGallery.tsx @@ -1,5 +1,5 @@ import { isElementVisible } from 'helpers/isElementVisible'; -import { desktopFirstSizes } from 'components/Theme/mediaQueries'; +import { desktopFirstSizes } from 'helpers/mediaQueries'; import { ImageSizesFragmentApi, SimpleFlagFragmentApi, VideoTokenFragmentApi } from 'graphql/generated'; import { useGetWindowSize } from 'hooks/ui/useGetWindowSize'; import { useResizeWidthEffect } from 'hooks/ui/useResizeWidthEffect'; diff --git a/storefront/components/Pages/Search/SearchContent.tsx b/storefront/components/Pages/Search/SearchContent.tsx index 4411fa202a..b3132e7c96 100644 --- a/storefront/components/Pages/Search/SearchContent.tsx +++ b/storefront/components/Pages/Search/SearchContent.tsx @@ -3,7 +3,7 @@ import { Heading } from 'components/Basic/Heading/Heading'; import { SimpleNavigation } from 'components/Blocks/SimpleNavigation/SimpleNavigation'; import { Button } from 'components/Forms/Button/Button'; import { Webline } from 'components/Layout/Webline/Webline'; -import { desktopFirstSizes, mobileFirstSizes } from 'components/Theme/mediaQueries'; +import { desktopFirstSizes, mobileFirstSizes } from 'helpers/mediaQueries'; import { SearchQueryApi, SimpleCategoryFragmentApi } from 'graphql/generated'; import { mapConnectionEdges } from 'helpers/mappers/connection'; import useTranslation from 'next-translate/useTranslation'; diff --git a/storefront/components/Theme/mediaQueries.ts b/storefront/components/Theme/mediaQueries.ts deleted file mode 100644 index 7155137add..0000000000 --- a/storefront/components/Theme/mediaQueries.ts +++ /dev/null @@ -1,36 +0,0 @@ -export const mobileFirstSizes = { - xs: 320, - sm: 480, - md: 600, - lg: 769, - vl: 1024, - xl: 1240, -} as const; - -export const desktopFirstSizes = { - mobileXs: 479, - mobile: 599, - tablet: 768, - notLargeDesktop: 1023, -} as const; - -const mobileFirst = { - queryXs: `(min-width: ${mobileFirstSizes.xs}px)`, - querySm: `(min-width: ${mobileFirstSizes.sm}px)`, - queryMd: `(min-width: ${mobileFirstSizes.md}px)`, - queryLg: `(min-width: ${mobileFirstSizes.lg}px)`, - queryVl: `(min-width: ${mobileFirstSizes.vl}px)`, - queryXl: `(min-width: ${mobileFirstSizes.xl}px)`, -} as const; - -const desktopFirst = { - queryMobileXs: `(max-width: ${desktopFirstSizes.mobileXs}px)`, - queryMobile: `(max-width: ${desktopFirstSizes.mobile}px)`, - queryTablet: `(max-width: ${desktopFirstSizes.tablet}px)`, - queryNotLargeDesktop: `(max-width: ${desktopFirstSizes.notLargeDesktop}px)`, -} as const; - -export const mediaQueries = { - ...mobileFirst, - ...desktopFirst, -}; diff --git a/storefront/gtm/helpers/helpers.ts b/storefront/gtm/helpers/helpers.ts index 467438b9b6..b43208f38d 100644 --- a/storefront/gtm/helpers/helpers.ts +++ b/storefront/gtm/helpers/helpers.ts @@ -1,4 +1,4 @@ -import { desktopFirstSizes, mobileFirstSizes } from 'components/Theme/mediaQueries'; +import { desktopFirstSizes, mobileFirstSizes } from 'helpers/mediaQueries'; import { canUseDom } from 'helpers/canUseDom'; import { isServer } from 'helpers/isServer'; import { compressToEncodedURIComponent, decompressFromEncodedURIComponent } from 'lz-string'; diff --git a/storefront/helpers/mediaQueries.ts b/storefront/helpers/mediaQueries.ts new file mode 100644 index 0000000000..2f2fe9d2ba --- /dev/null +++ b/storefront/helpers/mediaQueries.ts @@ -0,0 +1,15 @@ +export const mobileFirstSizes = { + xs: 320, + sm: 480, + md: 600, + lg: 769, + vl: 1024, + xl: 1240, +} as const; + +export const desktopFirstSizes = { + mobileXs: 479, + mobile: 599, + tablet: 768, + notLargeDesktop: 1023, +} as const; diff --git a/storefront/hooks/ui/useMediaMin.ts b/storefront/hooks/ui/useMediaMin.ts index 6ed62c16ba..7a7ce972aa 100644 --- a/storefront/hooks/ui/useMediaMin.ts +++ b/storefront/hooks/ui/useMediaMin.ts @@ -1,4 +1,4 @@ -import { mobileFirstSizes } from 'components/Theme/mediaQueries'; +import { mobileFirstSizes } from 'helpers/mediaQueries'; import { useEffect, useState } from 'react'; export const useMediaMin = (breakpoint: keyof typeof mobileFirstSizes, debounce = false): boolean | undefined => { diff --git a/storefront/typeHelpers/ExtractNativePropsFromDefault.ts b/storefront/types/ExtractNativePropsFromDefault.ts similarity index 100% rename from storefront/typeHelpers/ExtractNativePropsFromDefault.ts rename to storefront/types/ExtractNativePropsFromDefault.ts