Fixing "Toggle Progress" For RTL Support & correct display & Fixing Translate (#363)

* Fixing "Toggle Progress" For RTL Support

* Fix correct display of regex in RTL

* Fixing Persian Translate For lesson 49

Author: amirroox

src/components/CheatsheetCollapse.tsx

@@ -36,7 +36,7 @@ const CheatsheetCollapse = ({ title, data }: CheatsheetCollapseProps) => {
         aria-controls={`Collapse-${data.title}`}
       >
         <div className="w-14 inline-block">
-          <span className="p-1 text-xs font-mono text-neutral-100 bg-[#333] rounded-md">
+          <span className="p-1 text-xs font-mono text-neutral-100 bg-[#333] rounded-md" dir='ltr'>
             {data.code}
           </span>
         </div>

src/components/LearnProgress.tsx

@@ -4,6 +4,7 @@ import { useIntl } from 'react-intl';
 import Icon from './Icon';
 import { InteractiveAreaContext } from 'src/context/InteractiveAreaContext';
 import HighlightedText from './HighlightedText';
+import { useLanguageDirection } from "src/utils/useLanguageDirection";
 
 const LearnProgress = () => {
   const [open, setOpen] = useState(false);
@@ -27,11 +28,22 @@ const LearnProgress = () => {
 
   const toggleProgress = () => setOpen(!open);
 
+  const direction = useLanguageDirection();
+
+  // list lesson (ToggleProgress For RTL/LTR)
+  const listOpen = direction === 'rtl' ? 'left-0' : 'right-0';
+  const listClose = direction === 'rtl' ? '-left-[244px]' : '-right-[244px]';
+  const listOpenInner = direction === 'rtl' ? '-left-10' : '-right-10';
+  const listCloseInner = direction === 'rtl' ? 'left-[204px]' : 'right-[204px]';
+  const listIconName = direction === 'rtl' ? 'arrow-right' : 'arrow-left';
+  const listStepDirection = direction === 'rtl' ? 'left-[7px]' : 'right-[7px]';
+
+
   return (
     <div
       className={clsx(
         'hidden lg:block text-xs top-[50%] -translate-y-[50%] absolute z-10 transition-all select-none',
-        open ? 'right-0 ' : '-right-[244px]',
+        open ? listOpen : listClose,
       )}
     >
       <div
@@ -41,15 +53,17 @@ const LearnProgress = () => {
         <div
           onClick={toggleProgress}
           className={clsx(
-            'w-10 h-10 cursor-pointer rounded-full  flex fixed top-[50%] -translate-x-[50%] -translate-y-[50%] transition-all duration-50',
-            open ? '-right-10 bg-neutral-600/40' : 'right-[204px] bg-emerald-600',
+            direction === 'rtl' ? 'translate-x-[50%]' : '-translate-x-[50%]',
+            `w-10 h-10 cursor-pointer rounded-full  flex fixed top-[50%] transition-all duration-50`,
+            open ? `${listOpenInner} bg-neutral-600/40` : `${listCloseInner} bg-emerald-600`,
           )}
         >
           <Icon
-            icon="arrow-left"
+            icon={listIconName}
             size={15}
             className={clsx(
-              'mr-auto my-auto ml-1 text-neutral-100',
+              direction === 'rtl' ? 'ml-auto mr-1' : 'mr-auto ml-1',
+              `my-auto text-neutral-100`,
               open ? 'rotate-180' : 'rotate-0',
             )}
           />
@@ -66,17 +80,26 @@ const LearnProgress = () => {
               },
               'step-item relative truncate max-w-[80%] flex flex-row-reverse items-center',
               index !== lessonData.length - 1 &&
-                "pb-6 after:content-[''] after:block after:w-[2px] after:h-8 after:bg-neutral-700 after:rounded-md after:right-[7px] after:top-8 after:absolute",
+                `pb-6 after:content-[''] after:block after:w-[2px] after:h-8 after:bg-neutral-700 after:rounded-md after:${listStepDirection} after:top-8 after:absolute`,
             )}
           >
             {step === index && (
-              <Icon icon="play" size={16} className="text-green-400 ml-2 flex-shrink-0" />
+              <Icon icon="play" size={16} className={clsx(
+                direction === 'ltr' ? 'ml-2' : 'mr-2',
+                "text-green-400 flex-shrink-0"
+              )} />
             )}
             {lastStep >= index && step !== index && (
-              <Icon icon="check" size={16} className="text-green-400 ml-2 flex-shrink-0" />
+              <Icon icon="check" size={16} className={clsx(
+                direction === 'ltr' ? 'ml-2' : 'mr-2',
+                "text-green-400 flex-shrink-0"
+              )} />
             )}
             {lastStep < index && (
-              <Icon icon="lock-closed" size={16} className="text-neutral-500 ml-2 flex-shrink-0" />
+              <Icon icon="lock-closed" size={16} className={clsx(
+                direction === 'ltr' ? 'ml-2' : 'mr-2',
+                "text-neutral-500 flex-shrink-0"
+              )} />
             )}
 
             <HighlightedText

src/components/Step.tsx

@@ -43,6 +43,7 @@ const Step = () => {
           text={formatMessage({ id: data.title })}
           attrs={{
             className: 'px-2 my-1 bg-neutral-700 rounded-md mx-1 whitespace-nowrap',
+            dir: 'ltr'
           }}
         />
         <HighlightedText
@@ -51,6 +52,7 @@ const Step = () => {
           text={formatMessage({ id: data.description })}
           attrs={{
             className: 'p-1 text-xs whitespace-nowrap rounded-md bg-neutral-700 tracking-widest',
+            dir: 'ltr'
           }}
         />
       </div>

src/localization/fa/learn.json

@@ -137,8 +137,8 @@
   "steps.positiveLookbehind.title": "بررسی رو به عقب مثبت: `(?<=)`",
   "steps.positiveLookbehind.description": "برای مثال می خواهیم مقدار قیمت را در متن انتخاب کنیم. بنابراین، برای انتخاب فقط مقادیر عددی که بعد از علامت $ هستند، باید بررسی رو به عقب مثبت (Positive Lookbehind) `(?<=)` را قبل از عبارت خود بنویسیم. بعد از علامت `=` داخل پرانتز،  `\\$` را اضافه کنید.",
 
-  "steps.negativeLookbehind.title": "بررسی رو به عقب منفی: `(؟<!)`",
-  "steps.negativeLookbehind.description": "به عنوان مثال، می خواهیم در متن اعدادی غیر از مقدار قیمت انتخاب کنیم. بنابراین، برای انتخاب فقط مقادیر عددی که بعد از `$` نیستند، باید قبل از عبارت، بررسی رو به عقب منفی (Negative Lookbehind) `(?<!)` را بنویسیم. بعد از علامت `!` داخل پرانتز `\\$` را اضافه کنید.",
+  "steps.negativeLookbehind.title": "بررسی رو به عقب منفی: `(?&lt;!)`",
+  "steps.negativeLookbehind.description": "به عنوان مثال، می خواهیم در متن اعدادی غیر از مقدار قیمت انتخاب کنیم. بنابراین، برای انتخاب فقط مقادیر عددی که بعد از `$` نیستند، باید قبل از عبارت، بررسی رو به عقب منفی (Negative Lookbehind) `(?&lt;!)` را بنویسیم. بعد از علامت `!` داخل پرانتز `\\$` را اضافه کنید.",
 
   "steps.flags.title": "پرچم ها",
   "steps.flags.description": "پرچم ها خروجی عبارت را تغییر می دهند. به همین دلیل است که پرجم ها را اصلاح کننده (`modifiers`) نیز مینامند. پرچمها تعیین میکنند که آیا عبارت تایپ شده متن را به عنوان خطوط جداگانه در نظر میگیرد، به حروف کوچک و بزرگ حساس است و یا همه موارد تطابق را پیدا میکند یا خیر. برای یادگیری پرچم ها به مرحله بعدی بروید.",