evo/EvoCalculator.Client2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

packages: replace react-responsive -> @artsy/fresnel

Browse Source
This commit is contained in:
vchikalkin 2024-06-19 15:00:07 +03:00
parent 5aad257058
commit e5e4ca5857
7 changed files with 53 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
apps/web/Components/Layout/index.jsx
View File

@ -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 }) {
<Header />
{user?.admin ? <AppMenu /> : false}
<Main>{children}</Main>
<MediaQuery maxWidth={screens.laptop}>
<Media lessThan="laptop">
<NavigationBar />
</MediaQuery>
</Media>
</NavigationProvider>
);
}

2
apps/web/package.json
View File

@ -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:*",

9
apps/web/pages/_app.jsx
View File

@ -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 }) {
}}
>
<Notification>
<Layout {...pageProps}>
{loading ? <Loading /> : <Component {...pageProps} />}
</Layout>
<MediaContextProvider>
<Layout {...pageProps}>
{loading ? <Loading /> : <Component {...pageProps} />}
</Layout>
</MediaContextProvider>
</Notification>
</AntdConfig>
</QueryClientProvider>

30
apps/web/pages/index.jsx
View File

@ -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: () => <Calculation.Settings />,
@ -53,19 +48,16 @@ function Content() {
<Head>
<title>{getPageTitle()}</title>
</Head>
<MediaQuery maxWidth={screens.laptop}>
{(match) => {
if (match) return <Tabs tabs={tabs} />;
return (
<Calculation.Layout>
<Calculation.Form prune={['unlimited']} />
<Calculation.Settings />
<Calculation.Output />
</Calculation.Layout>
);
}}
</MediaQuery>
<Media lessThan="laptop">
<Tabs tabs={tabs} />
</Media>
<Media greaterThanOrEqual="laptop">
<Calculation.Layout>
<Calculation.Form prune={['unlimited']} />
<Calculation.Settings />
<Calculation.Output />
</Calculation.Layout>
</Media>
</>
);
}

30
apps/web/pages/unlimited.jsx
View File

@ -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: () => <Calculation.Settings />,
@ -54,19 +49,16 @@ function Content() {
<Head>
<title>{getPageTitle('Без ограничений')}</title>
</Head>
<MediaQuery maxWidth={screens.laptop}>
{(match) => {
if (match) return <Tabs tabs={tabs} />;
return (
<Calculation.Layout>
<Calculation.Form />
<Calculation.Settings />
<Calculation.Output />
</Calculation.Layout>
);
}}
</MediaQuery>
<Media lessThan="laptop">
<Tabs tabs={tabs} />
</Media>
<Media greaterThanOrEqual="laptop">
<Calculation.Layout>
<Calculation.Form prune={['unlimited']} />
<Calculation.Settings />
<Calculation.Output />
</Calculation.Layout>
</Media>
</>
);
}

9
apps/web/styles/media.ts Normal file
View File

@ -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;

46
pnpm-lock.yaml generated
View File

@ -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