diff --git a/apps/web/Components/Layout/index.jsx b/apps/web/Components/Layout/index.jsx index 9034d15..4c2138f 100644 --- a/apps/web/Components/Layout/index.jsx +++ b/apps/web/Components/Layout/index.jsx @@ -1,16 +1,11 @@ import Header from './Header'; import { AppMenu } from './Menu'; import { NavigationBar } from './Navigation'; -import { screens } from '@/config/ui'; import { NavigationProvider } from '@/context/navigation'; +import { Media } from '@/styles/media'; import { max, min } from '@/styles/mq'; -import dynamic from 'next/dynamic'; import styled from 'styled-components'; -const MediaQuery = dynamic(() => import('react-responsive'), { - ssr: false, -}); - const Main = styled.main` margin: 8px 0; @@ -29,9 +24,9 @@ export default function Layout({ children, user }) {
{user?.admin ? : false}
{children}
- + - + ); } diff --git a/apps/web/package.json b/apps/web/package.json index 086abc9..df155e7 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -16,6 +16,7 @@ }, "dependencies": { "@apollo/client": "^3.9.5", + "@artsy/fresnel": "^7.1.4", "@fontsource/montserrat": "^4.5.14", "@sentry/nextjs": "^7.102.0", "@sentry/node": "^7.102.0", @@ -33,7 +34,6 @@ "radash": "^11.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-responsive": "^10.0.0", "styled-components": "^5.3.11", "superjson": "^2.2.1", "tools": "workspace:*", diff --git a/apps/web/pages/_app.jsx b/apps/web/pages/_app.jsx index 3660ed9..0738932 100644 --- a/apps/web/pages/_app.jsx +++ b/apps/web/pages/_app.jsx @@ -11,6 +11,7 @@ import { usePageLoading } from '@/hooks'; import StoreProvider from '@/stores/Provider'; import getColors from '@/styles/colors'; import { GlobalStyle } from '@/styles/global-style'; +import { MediaContextProvider } from '@/styles/media'; import { trpcClient } from '@/trpc/client'; import { ApolloProvider } from '@apollo/client'; import { QueryClientProvider } from '@tanstack/react-query'; @@ -55,9 +56,11 @@ function App({ Component, pageProps }) { }} > - - {loading ? : } - + + + {loading ? : } + + diff --git a/apps/web/pages/index.jsx b/apps/web/pages/index.jsx index 08dd127..4a243b4 100644 --- a/apps/web/pages/index.jsx +++ b/apps/web/pages/index.jsx @@ -2,20 +2,15 @@ import initializeApollo from '@/apollo/client'; import * as Calculation from '@/Components/Calculation'; import { Error } from '@/Components/Common/Error'; import { Tabs } from '@/Components/Layout/Navigation'; -import { screens } from '@/config/ui'; import { NavigationContext } from '@/context/navigation'; import * as hooks from '@/process/hooks'; +import { Media } from '@/styles/media'; import { getPageTitle } from '@/utils/page'; import { makeGetUserType } from '@/utils/user'; import { dehydrate, QueryClient } from '@tanstack/react-query'; -import dynamic from 'next/dynamic'; import Head from 'next/head'; import { useContext, useEffect } from 'react'; -const MediaQuery = dynamic(() => import('react-responsive'), { - ssr: false, -}); - const tabs = [ { Component: () => , @@ -53,19 +48,16 @@ function Content() { {getPageTitle()} - - {(match) => { - if (match) return ; - - return ( - - - - - - ); - }} - + + + + + + + + + + ); } diff --git a/apps/web/pages/unlimited.jsx b/apps/web/pages/unlimited.jsx index 8287f39..5924208 100644 --- a/apps/web/pages/unlimited.jsx +++ b/apps/web/pages/unlimited.jsx @@ -2,20 +2,15 @@ import initializeApollo from '@/apollo/client'; import * as Calculation from '@/Components/Calculation'; import { Error } from '@/Components/Common/Error'; import { Tabs } from '@/Components/Layout/Navigation'; -import { screens } from '@/config/ui'; import { NavigationContext } from '@/context/navigation'; import * as hooks from '@/process/hooks'; +import { Media } from '@/styles/media'; import { getPageTitle } from '@/utils/page'; import { makeGetUserType } from '@/utils/user'; import { dehydrate, QueryClient } from '@tanstack/react-query'; -import dynamic from 'next/dynamic'; import Head from 'next/head'; import { useContext, useEffect } from 'react'; -const MediaQuery = dynamic(() => import('react-responsive'), { - ssr: false, -}); - const tabs = [ { Component: () => , @@ -54,19 +49,16 @@ function Content() { {getPageTitle('Без ограничений')} - - {(match) => { - if (match) return ; - - return ( - - - - - - ); - }} - + + + + + + + + + + ); } diff --git a/apps/web/styles/media.ts b/apps/web/styles/media.ts new file mode 100644 index 0000000..abee7ad --- /dev/null +++ b/apps/web/styles/media.ts @@ -0,0 +1,9 @@ +import { screens } from '@/config/ui'; +import { createMedia } from '@artsy/fresnel'; + +const ExampleAppMedia = createMedia({ + breakpoints: { ...screens, min: 0 }, +}); + +export const mediaStyle = ExampleAppMedia.createMediaStyle(); +export const { Media, MediaContextProvider } = ExampleAppMedia; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5ef1a75..acfd731 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -126,6 +126,9 @@ importers: '@apollo/client': specifier: ^3.9.5 version: 3.9.5(@types/react@18.2.58)(graphql@16.8.1)(react-dom@18.2.0)(react@18.2.0) + '@artsy/fresnel': + specifier: ^7.1.4 + version: 7.1.4(react@18.2.0) '@fontsource/montserrat': specifier: ^4.5.14 version: 4.5.14 @@ -177,9 +180,6 @@ importers: react-dom: specifier: ^18.2.0 version: 18.2.0(react@18.2.0) - react-responsive: - specifier: ^10.0.0 - version: 10.0.0(react@18.2.0) styled-components: specifier: ^5.3.11 version: 5.3.11(@babel/core@7.23.9)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0) @@ -560,6 +560,15 @@ packages: - encoding dev: true + /@artsy/fresnel@7.1.4(react@18.2.0): + resolution: {integrity: sha512-qbUdxzlcI9Q9Ez+HfYDq7hlLoeFKC8EKcCckW+EltWu9SWL3px4QZIkr7NwYEz13q/nLvAlHMnbJ3TpSEEZ1zg==} + engines: {node: '>=12.20.2', yarn: 1.x.x} + peerDependencies: + react: '>=18.0.0' + dependencies: + react: 18.2.0 + dev: false + /@babel/code-frame@7.23.5: resolution: {integrity: sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==} engines: {node: '>=6.9.0'} @@ -5902,10 +5911,6 @@ packages: engines: {node: '>=4'} dev: false - /css-mediaquery@0.1.2: - resolution: {integrity: sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==} - dev: false - /css-to-react-native@3.2.0: resolution: {integrity: sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==} dependencies: @@ -8481,10 +8486,6 @@ packages: hasBin: true dev: true - /hyphenate-style-name@1.0.5: - resolution: {integrity: sha512-fedL7PRwmeVkgyhu9hLeTBaI6wcGk7JGJswdaRsa5aUbkXI1kr1xZwTPBtaYPpwf56878iDek6VbVnuWMebJmw==} - dev: false - /iconv-lite@0.4.24: resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==} engines: {node: '>=0.10.0'} @@ -10234,12 +10235,6 @@ packages: object-visit: 1.0.1 dev: true - /matchmediaquery@0.4.2: - resolution: {integrity: sha512-wrZpoT50ehYOudhDjt/YvUJc6eUzcdFPdmbizfgvswCKNHD1/OBOHYJpHie+HXpu6bSkEGieFMYk6VuutaiRfA==} - dependencies: - css-mediaquery: 0.1.2 - dev: false - /media-typer@0.3.0: resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==} engines: {node: '>= 0.6'} @@ -11846,19 +11841,6 @@ packages: /react-is@18.2.0: resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==} - /react-responsive@10.0.0(react@18.2.0): - resolution: {integrity: sha512-N6/UiRLGQyGUqrarhBZmrSmHi2FXSD++N5VbSKsBBvWfG0ZV7asvUBluSv5lSzdMyEVjzZ6Y8DL4OHABiztDOg==} - engines: {node: '>=14'} - peerDependencies: - react: '>=16.8.0' - dependencies: - hyphenate-style-name: 1.0.5 - matchmediaquery: 0.4.2 - prop-types: 15.8.1 - react: 18.2.0 - shallow-equal: 3.1.0 - dev: false - /react@18.2.0: resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} engines: {node: '>=0.10.0'} @@ -12468,10 +12450,6 @@ packages: /setprototypeof@1.2.0: resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==} - /shallow-equal@3.1.0: - resolution: {integrity: sha512-pfVOw8QZIXpMbhBWvzBISicvToTiM5WBF1EeAUZDDSb5Dt29yl4AYbyywbJFSEsRUMr7gJaxqCdr4L3tQf9wVg==} - dev: false - /shallowequal@1.1.0: resolution: {integrity: sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==} dev: false