feat: add a theme direction

.storybook/preview.tsx

@@ -6,7 +6,7 @@ import { ThemeProvider } from '@mui/system';
 import * as React from 'react';
 import 'react-quill/dist/quill.snow.css';
 
-import { theme } from '../src/theme';
+import { buildTheme } from '../src/theme';
 import './global.css';
 
 export const parameters = {
@@ -50,7 +50,7 @@ export const globalTypes = {
     },
   },
 };
-
+const theme = buildTheme()
 export const decorators = [
   (Story, { globals }) => {
     return (

src/ThemeContext/ThemeContext.tsx

@@ -7,10 +7,10 @@ import { Direction, SxProps } from '@mui/material';
 import { ThemeProvider as MuiThemeProvider } from '@mui/material';
 import { SelectProps as MuiSelectProps } from '@mui/material/Select';
 
-import { useContext, useMemo } from 'react';
+import { useContext, useEffect, useMemo } from 'react';
 import { createContext, useState } from 'react';
 
-import { theme } from '../theme';
+import { buildTheme } from '../theme';
 import { I18nInstance } from '../types';
 import LanguageSelect from './LanguageSelect';
 
@@ -22,6 +22,7 @@ type Props = {
   languageSelectLabel?: string;
   languageSelectVariant?: MuiSelectProps['variant'];
   languageSelectSize?: MuiSelectProps['size'];
+  defaultDirection?: Direction;
 };
 
 type Context = {
@@ -48,8 +49,9 @@ const ThemeProvider = ({
   languageSelectLabel,
   languageSelectVariant = 'outlined',
   languageSelectSize = 'small',
+  defaultDirection = 'ltr',
 }: Props): JSX.Element => {
-  const [direction, setDirection] = useState<Direction>(theme.direction);
+  const [direction, setDirection] = useState<Direction>(defaultDirection);
   const languageSelect = (
     <LanguageSelect
       languageSelectSx={languageSelectSx}
@@ -66,9 +68,17 @@ const ThemeProvider = ({
     [direction, languageSelect],
   );
 
+  useEffect(() => {
+    document.documentElement.setAttribute('dir', direction);
+  }, [direction]);
+
+  useEffect(() => {
+    setDirection(defaultDirection);
+  }, [defaultDirection]);
+
   return (
     <ThemeContext.Provider value={value}>
-      <MuiThemeProvider theme={{ ...theme, direction }}>
+      <MuiThemeProvider theme={{ ...buildTheme(direction), direction }}>
         <CacheProvider value={getCacheForDirection(direction)}>
           {children}
         </CacheProvider>

src/theme.ts

@@ -1,4 +1,9 @@
-import { Theme, createTheme, responsiveFontSizes } from '@mui/material';
+import {
+  Direction,
+  Theme,
+  createTheme,
+  responsiveFontSizes,
+} from '@mui/material';
 import { grey } from '@mui/material/colors';
 
 import { Context } from '@graasp/sdk';
@@ -67,11 +72,14 @@ declare module '@mui/material/Typography' {
 
 type GraaspThemeOptions = {
   fontFamily?: string;
+  direction?: Direction;
 };
 export const createGraaspTheme = ({
   fontFamily,
+  direction = 'ltr',
 }: GraaspThemeOptions): Theme => {
   const baseTheme = createTheme({
+    direction,
     palette: {
       action: {
         active: DEFAULT_ACTIVE_ACTION_COLOR,
@@ -212,4 +220,6 @@ export const createGraaspTheme = ({
     ],
   });
 };
-export const theme = createGraaspTheme({});
+
+export const buildTheme = (direction: Direction = 'ltr'): Theme =>
+  createGraaspTheme({ direction });