feat: right to left layout

package.json

@@ -68,7 +68,6 @@
     "react-i18next": "12.2.0",
     "react-refresh": "0.10.0",
     "tailwindcss": "3.2.7",
-    "tailwindcss-rtl": "^0.9.0",
     "ts-node": "10.9.1",
     "typescript": "4.9.5",
     "url-loader": "4.1.1",

packages/web/src/features/languages/LanguagesView.tsx

@@ -39,12 +39,14 @@ export default function LanguagesView() {
             </ListHeaderCell>
             <ListHeaderCell />
           </ListHeader>
-          <ListRowAction colSpan={2}>
-            <Link to="./new">
-              <Icon icon="plus" className="me-1" />
-              {t('add_language')}
-            </Link>
-          </ListRowAction>
+          {session.user?.systemRoles.includes(SystemRole.Admin) && (
+            <ListRowAction colSpan={2}>
+              <Link to="./new">
+                <Icon icon="plus" className="me-1" />
+                {t('add_language')}
+              </Link>
+            </ListRowAction>
+          )}
           <ListBody>
             {languages.data.map((language) => (
               <ListRow key={language.code}>

packages/web/src/features/languages/ManageLanguageView.tsx

@@ -64,7 +64,7 @@ export default function ManageLanguageView() {
           </div>
           <div>
             <Button type="submit">{t('update')}</Button>
-            <SubmittingIndicator className="ml-3" />
+            <SubmittingIndicator className="ms-3" />
           </div>
         </Form>
       </Card>

packages/web/src/features/languages/NewLanguageView.tsx

@@ -81,7 +81,7 @@ export default function NewLanguageView() {
           </div>
           <div>
             <Button type="submit">{t('create')}</Button>
-            <SubmittingIndicator className="ml-3" />
+            <SubmittingIndicator className="ms-3" />
           </div>
         </Form>
       </Card>

packages/web/src/features/translation/TranslationView.tsx

@@ -110,7 +110,11 @@ export default function TranslationView() {
         verseId={verse.id}
         onVerseChange={(verseId) => navigate('../translate/' + verseId)}
       />
-      <ol className={`flex flex-wrap ${isHebrew ? 'flex-row-reverse' : ''}`}>
+      <ol
+        className={`flex flex-wrap ${
+          isHebrew ? 'ltr:flex-row-reverse' : 'rtl:flex-row-reverse'
+        }`}
+      >
         {verse.words.map((word, i) => {
           const targetGloss = targetGlosses[i]?.approvedGloss;
           const isSaving = glossRequests.some(

packages/web/src/features/translation/VerseSelector.tsx

@@ -42,18 +42,16 @@ export function VerseSelector({ verseId, onVerseChange }: VerseSelectorProps) {
         onKeyDown={onKeyDown}
         arial-label={t('select_verse')}
       />
-      {/* Use flex-row-reverse on rtl, so that the previous button is always
-          to the left of the next button. */}
-      <div className="flex ltr:flex-row rtl:flex-row-reverse gap-4">
-        <button onClick={() => onVerseChange(decrementVerseId(verseId))}>
-          <Icon icon="arrow-left" />
-          <span className="sr-only">{t('previous_verse')}</span>
-        </button>
-        <button onClick={() => onVerseChange(incrementVerseId(verseId))}>
-          <Icon icon="arrow-right" />
-          <span className="sr-only">{t('next_verse')}</span>
-        </button>
-      </div>
+      <button onClick={() => onVerseChange(decrementVerseId(verseId))}>
+        <Icon icon="arrow-left" className="rtl:hidden" />
+        <Icon icon="arrow-right" className="ltr:hidden" />
+        <span className="sr-only">{t('previous_verse')}</span>
+      </button>
+      <button onClick={() => onVerseChange(incrementVerseId(verseId))}>
+        <Icon icon="arrow-right" className="rtl:hidden" />
+        <Icon icon="arrow-left" className="ltr:hidden" />
+        <span className="sr-only">{t('next_verse')}</span>
+      </button>
     </div>
   );
 }

packages/web/src/features/users/InviteUserView.tsx

@@ -85,7 +85,7 @@ export default function InviteUserView() {
           </div>
           <div>
             <Button type="submit">{t('invite')}</Button>
-            <SubmittingIndicator className="ml-3" />
+            <SubmittingIndicator className="ms-3" />
           </div>
         </Form>
       </Card>

packages/web/src/main.tsx

@@ -1,15 +1,21 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { StrictMode } from 'react';
+import i18next from 'i18next';
+import { StrictMode, useEffect } from 'react';
 import * as ReactDOM from 'react-dom/client';
-import { useTranslation } from 'react-i18next';
 import { RouterProvider } from 'react-router-dom';
 import './app/i18n';
 import router from './app/router';
 import { FlashProvider } from './shared/hooks/flash';
 
 function App() {
-  const { i18n } = useTranslation();
-  document.body.dir = i18n.dir();
+  useEffect(() => {
+    function handler() {
+      document.body.dir = i18next.dir();
+    }
+    handler();
+    i18next.on('languageChanged', handler);
+  }, [i18next.dir, i18next.on]);
+
   return (
     <StrictMode>
       <QueryClientProvider client={queryClient}>

packages/web/src/public/locales/ar/bible.json

@@ -1,135 +1,69 @@
 {
   "reference_format": "{{bookName}} {{chapterNumber}} {{verseNumber}}",
   "gen": "منشأ",
-  "gen_short": "Gen",
   "exo": "خروج",
-  "exo_short": "Exo",
   "lev": "سفر اللاويين",
-  "lev_short": "Lev",
   "num": "أعداد",
-  "num_short": "Num",
   "deu": "سفر التثنية",
-  "deu_short": "Deut",
   "jos": "جوشوا",
-  "jos_short": "Josh",
   "jdg": "القضاة",
-  "jdg_short": "Judg",
   "rut": "روث",
-  "rut_short": "Rut",
   "1sa": "صموئيل الأول 1",
-  "1sa_short": "1 Sam",
   "2sa": "صموئيل الثاني 2",
-  "2sa_short": "2 Sam",
   "1ki": "الملوك الأول 1",
-  "1ki_short": "1 Kgs",
   "2ki": "لملوك الثاني 2",
-  "2ki_short": "2 Kgs",
   "1ch": "أخبار الأيام الأول 1",
-  "1ch_short": "1 Chr",
   "2ch": "أخبار الأيام الثاني 2",
-  "2ch_short": "2 Chr",
   "ezr": "عزرا",
-  "ezr_short": "Ezra",
   "neh": "نحميا",
-  "neh_short": "Neh",
   "est": "أستير",
-  "est_short": "Est",
   "job": "أيوب",
-  "job_short": "Job",
   "psa": "مزامير",
-  "psa_short": "Ps",
   "pro": "الأمثال",
-  "pro_short": "Prov",
   "ecc": "سفر الجامعة",
-  "ecc_short": "Ecc",
   "sng": "أغنية الأغاني",
-  "sng_short": "Song",
   "isa": "أشعيا",
-  "isa_short": "Isa",
   "jer": "إرميا",
-  "jer_short": "Jer",
   "lam": "الرثاء",
-  "lam_short": "Lam",
   "ezk": "حزقيال",
-  "ezk_short": "Ezek",
   "dan": "دانيال",
-  "dan_short": "Dan",
   "hos": "هوشيا",
-  "hos_short": "Hos",
   "jol": "جويل",
-  "jol_short": "Joel",
   "amo": "عاموس",
-  "amo_short": "Amos",
   "oba": "أوباديا",
-  "oba_short": "Obad",
   "jon": "يونس",
-  "jon_short": "Jonah",
   "mic": "ميكا",
-  "mic_short": "Mic",
   "nam": "ناحوم",
-  "nam_short": "Nah",
   "hab": "حبقوق",
-  "hab_short": "Hab",
   "zep": "زيفانيا",
-  "zep_short": "Zeph",
   "hag": "هاجاي",
-  "hag_short": "Hag",
   "zec": "زكريا",
-  "zec_short": "Zech",
   "mal": "ملاخي",
-  "mal_short": "Mal",
   "mat": "ماثيو",
-  "mat_short": "Matt",
   "mrk": "علامة",
-  "mrk_short": "Mark",
   "luk": "لوقا",
-  "luk_short": "Luke",
   "jhn": "جون",
-  "jhn_short": "John",
   "act": "أعمال",
-  "act_short": "Acts",
   "rom": "رومان",
-  "rom_short": "Rom",
   "1co": "1 كورنثوس",
-  "1co_short": "1 Cor",
   "2co": "2 كورنثوس",
-  "2co_short": "2 Cor",
   "gal": "غلاطية",
-  "gal_short": "Gal",
   "eph": "أفسس",
-  "eph_short": "Eph",
   "php": "فيلبي",
-  "php_short": "Phil",
   "col": "كولوسي",
-  "col_short": "Col",
   "1th": "1 تسالونيكي",
-  "1th_short": "1 Thess",
   "2th": "2 تسالونيكي",
-  "2th_short": "2 Thess",
   "1ti": "1 تيموثي",
-  "1ti_short": "1 Tim",
   "2ti": "2 تيموثي",
-  "2ti_short": "2 Tim",
   "tit": "تيتوس",
-  "tit_short": "Titus",
   "phm": "فليمون",
-  "phm_short": "Phm",
   "heb": "العبرانيين",
-  "heb_short": "Heb",
   "jas": "جوامع",
-  "jas_short": "James",
   "1pe": "1 بيتر",
-  "1pe_short": "1 Pet",
   "2pe": "2 بيتر",
-  "2pe_short": "2 Pet",
   "1jn": "1 جون",
-  "1jn_short": "1 John",
   "2jn": "2 جون",
-  "2jn_short": "2 John",
   "3jn": "3 جون",
-  "3jn_short": "3 John",
   "jud": "جود",
-  "jud_short": "Jude",
-  "rev": "وحي",
-  "rev_short": "Rev"
+  "rev": "وحي"
 }

packages/web/src/public/locales/ar/translation.json

@@ -9,12 +9,24 @@
   "update": "تحديث",
   "create": "يخلق",
   "name": "اسم",
+  "email": "بريد إلكتروني",
   "code": "شفرة",
   "select_verse": "حدد الآية",
   "previous_verse": "الآية السابقة",
   "next_verse": "الآية التالية",
   "saving": "إنقاذ",
   "saved": "أنقذ",
+  "submitting": "تقديم",
   "log_in": "تسجيل الدخول",
-  "log_out": "تسجيل خروج"
+  "log_out": "تسجيل خروج",
+  "invite": "يدعو",
+  "invite_user": "دعوة المستخدم",
+  "user_invited": "دعا المستخدم!",
+  "user_exists": "مستخدم مع البريد الإلكتروني \"{{email}}\" موجود بالفعل",
+  "close": "يغلق",
+  "language_exists": "لغة مع رمز \"{{code}}\" موجودة بالفعل",
+  "language_created": "لغة خلقت!",
+  "language_updated": "اللغة المحدثة!",
+  "error": "خطأ",
+  "success": "نجاح"
 }

packages/web/src/tailwind-utilities/index.js

@@ -0,0 +1,16 @@
+// Our tailwind utilities are originally based off of tailwindcss-rtl.
+// https://github.com/20lives/tailwindcss-rtl
+const plugin = require('tailwindcss/plugin');
+
+const paddingUtilities = require('./paddingUtilities');
+const marginUtilities = require('./marginUtilities');
+const insetUtilities = require('./insetUtilities');
+const textAlignUtilities = require('./textAlignUtilities');
+
+module.exports = plugin((helpers) => {
+  const { addUtilities, theme, variants } = helpers;
+  paddingUtilities(helpers);
+  marginUtilities(helpers);
+  insetUtilities(helpers);
+  addUtilities(textAlignUtilities(helpers), variants('textAlign'));
+});

packages/web/src/tailwind-utilities/insetUtilities.js

@@ -0,0 +1,26 @@
+module.exports = ({ matchUtilities, theme }) => {
+  matchUtilities(
+    {
+      start: (value) => ({
+        '[dir="rtl"] &': {
+          right: value,
+        },
+        '[dir="ltr"] &': {
+          left: value,
+        },
+      }),
+      end: (value) => ({
+        '[dir="rtl"] &': {
+          left: value,
+        },
+        '[dir="ltr"] &': {
+          right: value,
+        },
+      }),
+    },
+    {
+      supportsNegativeValues: true,
+      values: theme('inset'),
+    }
+  );
+};

packages/web/src/tailwind-utilities/marginUtilities.js

@@ -0,0 +1,16 @@
+module.exports = ({ matchUtilities, theme }) => {
+  matchUtilities(
+    {
+      ms: (value) => ({
+        marginInlineStart: value,
+      }),
+      me: (value) => ({
+        marginInlineEnd: value,
+      }),
+    },
+    {
+      supportsNegativeValues: true,
+      values: theme('margin'),
+    }
+  );
+};