From 3b60f12ecab94fa9b00ae348f1b2d27b4f723ba2 Mon Sep 17 00:00:00 2001 From: LinaYahya Date: Fri, 19 Jul 2024 09:47:32 +0200 Subject: [PATCH 1/2] feat: pass direction to theme provider --- package.json | 2 +- src/components/Root.tsx | 52 +++++++++++++++++++++++------------- yarn.lock | 59 +++++++++++++++++------------------------ 3 files changed, 60 insertions(+), 53 deletions(-) diff --git a/package.json b/package.json index ba3f905f0..ea728b678 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "@graasp/query-client": "3.15.2", "@graasp/sdk": "4.17.0", "@graasp/translations": "1.32.0", - "@graasp/ui": "4.21.0", + "@graasp/ui": "github:graasp/graasp-ui#955-set-theme-direction", "@mui/icons-material": "5.16.4", "@mui/lab": "5.0.0-alpha.172", "@mui/material": "5.16.4", diff --git a/src/components/Root.tsx b/src/components/Root.tsx index d21a76c5c..18ad7f419 100644 --- a/src/components/Root.tsx +++ b/src/components/Root.tsx @@ -11,16 +11,18 @@ import { I18nextProvider } from 'react-i18next'; import { BrowserRouter as Router } from 'react-router-dom'; import { ToastContainer } from 'react-toastify'; -import { CssBaseline, ThemeProvider } from '@mui/material'; +import { CssBaseline } from '@mui/material'; -import { theme } from '@graasp/ui'; +import { langs } from '@graasp/translations'; +import { ThemeProvider } from '@graasp/ui'; import * as Sentry from '@sentry/react'; -import i18nConfig from '../config/i18n'; +import i18nConfig, { useCommonTranslation } from '../config/i18n'; import { QueryClientProvider, ReactQueryDevtools, + hooks, queryClient, } from '../config/queryClient'; import App from './App'; @@ -29,25 +31,39 @@ import { CurrentUserContextProvider } from './context/CurrentUserContext'; import { FilterItemsContextProvider } from './context/FilterItemsContext'; import ModalProviders from './context/ModalProviders'; +const ThemeWrapper = () => { + const { i18n } = useCommonTranslation(); + const { data: currentMember } = hooks.useCurrentMember(); + + return ( + + + + + }> + + + + + + + + + + + ); +}; + const Root = (): JSX.Element => ( - - - - - }> - - - - - - - - - - + {import.meta.env.DEV && import.meta.env.MODE !== 'test' && ( diff --git a/yarn.lock b/yarn.lock index 2edfe5845..e4837c5ff 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1771,36 +1771,35 @@ __metadata: languageName: node linkType: hard -"@graasp/ui@npm:4.20.0": - version: 4.20.0 - resolution: "@graasp/ui@npm:4.20.0" +"@graasp/ui@github:graasp/graasp-ui#955-set-theme-direction": + version: 4.21.0 + resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=b8849a85e15e4ac1e455173f6f37f64663dacc81" dependencies: "@ag-grid-community/client-side-row-model": "npm:31.3.2" - "@ag-grid-community/react": "npm:^31.3.1" - "@ag-grid-community/styles": "npm:^31.3.1" - "@storybook/react-vite": "npm:8.1.10" + "@ag-grid-community/react": "npm:^31.3.2" + "@ag-grid-community/styles": "npm:^31.3.2" + "@storybook/react-vite": "npm:8.1.11" http-status-codes: "npm:2.3.0" interweave: "npm:13.1.0" - katex: "npm:0.16.10" + katex: "npm:0.16.11" lodash.truncate: "npm:4.4.2" - lucide-react: "npm:0.395.0" + lucide-react: "npm:0.408.0" react-cookie-consent: "npm:9.0.0" react-dnd: "npm:16.0.1" react-dnd-html5-backend: "npm:16.0.1" react-quill: "npm:2.0.0" react-rnd: "npm:10.4.11" - react-text-mask: "npm:5.5.0" uuid: "npm:10.0.0" - vitest: "npm:1.6.0" + vitest: "npm:2.0.2" peerDependencies: "@emotion/cache": ~11.10.7 || ~11.11.0 "@emotion/react": ~11.10.6 || ~11.11.0 "@emotion/styled": ~11.10.6 || ~11.11.0 "@graasp/sdk": ^4.14.0 "@graasp/translations": ^1.23.0 - "@mui/icons-material": ~5.14.0 || ~5.15.0 + "@mui/icons-material": ~5.14.0 || ~5.15.0 || ~5.16.0 "@mui/lab": ~5.0.0-alpha.150 - "@mui/material": ~5.14.0 || ~5.15.0 + "@mui/material": ~5.14.0 || ~5.15.0 || ~5.16.0 i18next: ^22.4.15 || ^23.0.0 react: ^18.0.0 react-dom: ^18.0.0 @@ -1808,28 +1807,29 @@ __metadata: react-router-dom: ^6.11.0 stylis: ^4.1.3 stylis-plugin-rtl: ^2.1.1 - checksum: 10/2259b603ddffb00187f5684215a9e16e91a192612a84f7807759f385b7121fe198bdb20ae17fc978b1996a0b921dd2381283f22a3a84ad40c3b8a0031efdaf05 + checksum: 10/d242a58bfb6a4163cce8e002d56e080165acb294037331c206c476692c7415056d0e6d108b71d737a3fd09bbc02e5c7cf550c6bc4fc19e92dba0d2eca7a87d81 languageName: node linkType: hard -"@graasp/ui@npm:4.21.0": - version: 4.21.0 - resolution: "@graasp/ui@npm:4.21.0" +"@graasp/ui@npm:4.20.0": + version: 4.20.0 + resolution: "@graasp/ui@npm:4.20.0" dependencies: "@ag-grid-community/client-side-row-model": "npm:31.3.2" - "@ag-grid-community/react": "npm:^31.3.2" - "@ag-grid-community/styles": "npm:^31.3.2" - "@storybook/react-vite": "npm:8.1.11" + "@ag-grid-community/react": "npm:^31.3.1" + "@ag-grid-community/styles": "npm:^31.3.1" + "@storybook/react-vite": "npm:8.1.10" http-status-codes: "npm:2.3.0" interweave: "npm:13.1.0" - katex: "npm:0.16.11" + katex: "npm:0.16.10" lodash.truncate: "npm:4.4.2" - lucide-react: "npm:0.402.0" + lucide-react: "npm:0.395.0" react-cookie-consent: "npm:9.0.0" react-dnd: "npm:16.0.1" react-dnd-html5-backend: "npm:16.0.1" react-quill: "npm:2.0.0" react-rnd: "npm:10.4.11" + react-text-mask: "npm:5.5.0" uuid: "npm:10.0.0" vitest: "npm:1.6.0" peerDependencies: @@ -1838,9 +1838,9 @@ __metadata: "@emotion/styled": ~11.10.6 || ~11.11.0 "@graasp/sdk": ^4.14.0 "@graasp/translations": ^1.23.0 - "@mui/icons-material": ~5.14.0 || ~5.15.0 || ~5.16.0 + "@mui/icons-material": ~5.14.0 || ~5.15.0 "@mui/lab": ~5.0.0-alpha.150 - "@mui/material": ~5.14.0 || ~5.15.0 || ~5.16.0 + "@mui/material": ~5.14.0 || ~5.15.0 i18next: ^22.4.15 || ^23.0.0 react: ^18.0.0 react-dom: ^18.0.0 @@ -1848,7 +1848,7 @@ __metadata: react-router-dom: ^6.11.0 stylis: ^4.1.3 stylis-plugin-rtl: ^2.1.1 - checksum: 10/6a8778ae27ebb534204a44e1f97b08fdba6d7524fe3417fd7eaab8f4cf66e19800a38812f0b10c8796c885d6cabc5823bed137aebfbf36f29308ac7f04525314 + checksum: 10/2259b603ddffb00187f5684215a9e16e91a192612a84f7807759f385b7121fe198bdb20ae17fc978b1996a0b921dd2381283f22a3a84ad40c3b8a0031efdaf05 languageName: node linkType: hard @@ -8033,7 +8033,7 @@ __metadata: "@graasp/query-client": "npm:3.15.2" "@graasp/sdk": "npm:4.17.0" "@graasp/translations": "npm:1.32.0" - "@graasp/ui": "npm:4.21.0" + "@graasp/ui": "github:graasp/graasp-ui#955-set-theme-direction" "@mui/icons-material": "npm:5.16.4" "@mui/lab": "npm:5.0.0-alpha.172" "@mui/material": "npm:5.16.4" @@ -9792,15 +9792,6 @@ __metadata: languageName: node linkType: hard -"lucide-react@npm:0.402.0": - version: 0.402.0 - resolution: "lucide-react@npm:0.402.0" - peerDependencies: - react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0 - checksum: 10/fe8a7d5b65e469ee9f376e65942a1cb66aa39fc650265be4153e0f0235a0a5b09cdb03e8f51ed1f2319bdf91e1ae0859c61fe3a25c68e08ecb289a692bf52a17 - languageName: node - linkType: hard - "lucide-react@npm:0.408.0": version: 0.408.0 resolution: "lucide-react@npm:0.408.0" From 53cc78f4b8b992fd5c7d97b96431a6df927e85b9 Mon Sep 17 00:00:00 2001 From: LinaYahya Date: Thu, 25 Jul 2024 10:27:49 +0200 Subject: [PATCH 2/2] fix: use i18n direction --- src/components/Root.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Root.tsx b/src/components/Root.tsx index 18ad7f419..79d1d22c8 100644 --- a/src/components/Root.tsx +++ b/src/components/Root.tsx @@ -40,7 +40,7 @@ const ThemeWrapper = () => { langs={langs} languageSelectSx={{ mb: 2, mr: 2 }} i18n={i18n} - defaultDirection={currentMember?.extra?.lang === 'ar' ? 'rtl' : 'ltr'} + defaultDirection={i18n.dir(currentMember?.extra?.lang)} >