Apply rtl styling for rtl languages

2024-04-25 14:07:59 +02:00
parent 6788e284e9
commit 1626771e92
5 changed files with 77 additions and 21 deletions
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
  },
  "dependencies": {
    "@apollo/client": "3.9.11",
+    "@emotion/cache": "^11.11.0",
    "@emotion/react": "11.11.4",
    "@emotion/styled": "11.11.5",
    "@fontsource/roboto": "5.0.12",
@@ -53,6 +54,8 @@
    "react-i18next": "14.1.0",
    "react-router-dom": "6.22.3",
    "react-virtuoso": "4.7.8",
+    "stylis": "^4.3.2",
+    "stylis-plugin-rtl": "^2.1.1",
    "use-long-press": "3.2.0",
    "use-query-params": "2.2.1"
  },
@@ -66,6 +69,7 @@
    "@types/react": "18.2.78",
    "@types/react-beautiful-dnd": "13.1.8",
    "@types/react-dom": "18.2.25",
+    "@types/stylis": "^4.2.5",
    "@types/yargs": "17.0.32",
    "@typescript-eslint/eslint-plugin": "7.6.0",
    "@typescript-eslint/parser": "7.6.0",
--- a/src/components/context/AppContext.tsx
+++ b/src/components/context/AppContext.tsx
@@ -6,11 +6,16 @@
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

-import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
-import React, { useMemo } from 'react';
+import { Direction, StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
+import React, { useMemo, useRef } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';
 import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
+import { useTranslation } from 'react-i18next';
+import { CacheProvider, EmotionCache } from '@emotion/react';
+import createCache from '@emotion/cache';
+import { prefixer } from 'stylis';
+import rtlPlugin from 'stylis-plugin-rtl';
 import { createTheme } from '@/theme';
 import { useLocalStorage } from '@/util/useStorage.tsx';
 import { DarkTheme } from '@/components/context/DarkTheme';
@@ -22,7 +27,27 @@ interface Props {
    children: React.ReactNode;
 }

+const directionToCache: Record<Direction, EmotionCache> = {
+    ltr: createCache({
+        key: 'muiltr',
+    }),
+    rtl: createCache({
+        key: 'muirtl',
+        stylisPlugins: [prefixer, rtlPlugin],
+    }),
+};
+
 export const AppContext: React.FC<Props> = ({ children }) => {
+    const directionRef = useRef<Direction>('ltr');
+    const { i18n } = useTranslation();
+
+    const currentDirection = i18n.dir();
+
+    if (directionRef.current !== currentDirection) {
+        document.dir = currentDirection;
+        directionRef.current = currentDirection;
+    }
+
    const [darkTheme, setDarkTheme] = useLocalStorage<boolean>('darkTheme', true);
    const [activeDevice, setActiveDeviceContext] = useLocalStorage('activeDevice', DEFAULT_DEVICE);

@@ -39,26 +64,28 @@ export const AppContext: React.FC<Props> = ({ children }) => {
        [activeDevice],
    );

-    const theme = useMemo(() => createTheme(darkTheme), [darkTheme]);
+    const theme = useMemo(() => createTheme(darkTheme, currentDirection), [darkTheme, currentDirection]);

    setActiveDevice(activeDevice);

    return (
        <Router>
            <StyledEngineProvider injectFirst>
-                <ThemeProvider theme={theme}>
-                    <DarkTheme.Provider value={darkThemeContext}>
-                        <QueryParamProvider adapter={ReactRouter6Adapter}>
-                            <LibraryOptionsContextProvider>
-                                <NavBarContextProvider>
-                                    <ActiveDevice.Provider value={activeDeviceContext}>
-                                        {children}
-                                    </ActiveDevice.Provider>
-                                </NavBarContextProvider>
-                            </LibraryOptionsContextProvider>
-                        </QueryParamProvider>
-                    </DarkTheme.Provider>
-                </ThemeProvider>
+                <CacheProvider value={directionToCache[currentDirection]}>
+                    <ThemeProvider theme={theme}>
+                        <DarkTheme.Provider value={darkThemeContext}>
+                            <QueryParamProvider adapter={ReactRouter6Adapter}>
+                                <LibraryOptionsContextProvider>
+                                    <NavBarContextProvider>
+                                        <ActiveDevice.Provider value={activeDeviceContext}>
+                                            {children}
+                                        </ActiveDevice.Provider>
+                                    </NavBarContextProvider>
+                                </LibraryOptionsContextProvider>
+                            </QueryParamProvider>
+                        </DarkTheme.Provider>
+                    </ThemeProvider>
+                </CacheProvider>
            </StyledEngineProvider>
        </Router>
    );
--- a/src/components/navbar/ReaderNavBar.tsx
+++ b/src/components/navbar/ReaderNavBar.tsx
@@ -22,7 +22,7 @@ import Divider from '@mui/material/Divider';
 import FormControl from '@mui/material/FormControl';
 import MenuItem from '@mui/material/MenuItem';
 import Tooltip from '@mui/material/Tooltip';
-import { styled } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import Collapse from '@mui/material/Collapse';
@@ -132,6 +132,8 @@ interface IProps {

 export function ReaderNavBar(props: IProps) {
    const { t } = useTranslation();
+    const theme = useTheme();
+
    const navigate = useNavigate();
    const location = useLocation<{
        prevDrawerOpen?: boolean;
@@ -308,7 +310,7 @@ export function ReaderNavBar(props: IProps) {
                                    disabled={disableChapterNavButtons || chapter.sourceOrder <= 1}
                                    onClick={() => openNextChapter(ChapterOffset.PREV)}
                                >
-                                    <KeyboardArrowLeftIcon />
+                                    {theme.direction === 'ltr' ? <KeyboardArrowLeftIcon /> : <KeyboardArrowRightIcon />}
                                </IconButton>
                            </Tooltip>
                            <FormControl
@@ -348,7 +350,7 @@ export function ReaderNavBar(props: IProps) {
                                    }
                                    onClick={() => openNextChapter(ChapterOffset.NEXT)}
                                >
-                                    <KeyboardArrowRightIcon />
+                                    {theme.direction === 'ltr' ? <KeyboardArrowRightIcon /> : <KeyboardArrowLeftIcon />}
                                </IconButton>
                            </Tooltip>
                        </ChapterNavigation>
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -6,7 +6,7 @@
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

-import { createTheme as createMuiTheme, Palette as MuiPalette, Theme } from '@mui/material/styles';
+import { createTheme as createMuiTheme, Direction, Palette as MuiPalette, Theme } from '@mui/material/styles';

 declare module '@mui/material/styles/createPalette' {
    interface Palette {
@@ -23,8 +23,9 @@ type DefaultMuiTheme = Omit<Theme, 'palette'> & { palette: DefaultMuiPalette };

 let theme: Theme;
 export const getCurrentTheme = () => theme;
-export const createTheme = (dark?: boolean) => {
+export const createTheme = (dark?: boolean, direction: Direction = 'ltr') => {
    const baseTheme: DefaultMuiTheme = createMuiTheme({
+        direction,
        palette: {
            mode: dark ? 'dark' : 'light',
        },
--- a/yarn.lock
+++ b/yarn.lock
@@ -2540,6 +2540,11 @@
  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e"
  integrity sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==

+"@types/stylis@^4.2.5":
+  version "4.2.5"
+  resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.5.tgz#1daa6456f40959d06157698a653a9ab0a70281df"
+  integrity sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==
+
 "@types/ws@^8.0.0":
  version "8.5.10"
  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.10.tgz#4acfb517970853fa6574a3a6886791d04a396787"
@@ -3516,6 +3521,11 @@ css-box-model@^1.2.0:
  dependencies:
    tiny-invariant "^1.0.6"

+cssjanus@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cssjanus/-/cssjanus-2.1.0.tgz#6f99070e0b7cc79f826ea48c63c03cb250713af1"
+  integrity sha512-kAijbny3GmdOi9k+QT6DGIXqFvL96aksNlGr4Rhk9qXDZYWUojU4bRc3IHWxdaLNOqgEZHuXoe5Wl2l7dxLW5g==
+
 csstype@^3.0.2, csstype@^3.1.3:
  version "3.1.3"
  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
@@ -6531,11 +6541,23 @@ style-to-object@1.0.6:
  dependencies:
    inline-style-parser "0.2.3"

+stylis-plugin-rtl@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/stylis-plugin-rtl/-/stylis-plugin-rtl-2.1.1.tgz#16707809c878494835f77e5d4aadaae3db639b5e"
+  integrity sha512-q6xIkri6fBufIO/sV55md2CbgS5c6gg9EhSVATtHHCdOnbN/jcI0u3lYhNVeuI65c4lQPo67g8xmq5jrREvzlg==
+  dependencies:
+    cssjanus "^2.0.1"
+
 stylis@4.2.0:
  version "4.2.0"
  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
  integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==

+stylis@^4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.2.tgz#8f76b70777dd53eb669c6f58c997bf0a9972e444"
+  integrity sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==
+
 supports-color@^5.3.0:
  version "5.5.0"
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"