feat(luna): handle english text input

luna/src/components/Direction/Direction.tsx

@@ -1,8 +1,9 @@
 import React from "react";
+import { Dir } from "@/components/Direction/types";
 
 export const Direction: React.FC<{
-  dir?: "ltr" | "rtl";
+  dir?: Dir;
   children: React.ReactNode;
-}> = ({ dir = "rtl", children }) => {
+}> = ({ dir = Dir.RTL, children }) => {
   return <div dir={dir}>{children}</div>;
 };

luna/src/components/Direction/index.ts

@@ -1 +1,2 @@
 export { Direction } from "@/components/Direction/Direction";
+export { Dir } from "@/components/Direction/types";

luna/src/components/Direction/types.ts

@@ -0,0 +1,4 @@
+export enum Dir {
+  RTL = "rtl",
+  LRT = "ltr",
+}

luna/src/components/Input/Input.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { Input } from "@/components/Input";
-import React, { ComponentProps } from "react";
+import React, { ComponentProps, useState } from "react";
 import { Direction } from "@/components/Direction";
 import ar from "@/locales/ar-eg.json";
 
@@ -59,4 +59,24 @@ export const ErrorWithValue: StoryObj<typeof Wrapper> = {
   },
 };
 
+export const InputEnglish = {
+  render: () => {
+    const [value, setValue] = useState<string>("");
+    return (
+      <Direction>
+        <div className="ui-w-[50rem]">
+          <Input
+            type="text"
+            id="name"
+            label={ar["global.form.email.label"]}
+            placeholder={ar["global.form.email.placeholder"]}
+            value={value}
+            onChange={(event) => setValue(event.target.value)}
+          />
+        </div>
+      </Direction>
+    );
+  },
+};
+
 export default meta;

luna/src/components/Input/Input.tsx

@@ -1,17 +1,20 @@
 import React, { useMemo } from "react";
-import { ChangeHandler } from "react-hook-form";
 import { motion, AnimatePresence } from "framer-motion";
 import cn from "classnames";
 import ErrorOutlined from "@/icons/ErrorOutlined";
+import { Dir } from "@/components/Direction";
+
+const arabic =
+  /[\u0600-\u06ff]|[\u0750-\u077f]|[\ufb50-\ufc3f]|[\ufe70-\ufefc]/;
 
 export const Input: React.FC<{
   id: string;
   label: string;
   placeholder?: string;
   autoComplete?: string;
   type: "text" | "password";
-  onChange?: ChangeHandler;
-  onBlur?: ChangeHandler;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  onBlur?: React.ChangeEventHandler<HTMLInputElement>;
   name?: string;
   error?: string | null;
   value?: string;
@@ -27,6 +30,12 @@ export const Input: React.FC<{
   error,
   value,
 }) => {
+  const dir: Dir | undefined = useMemo(() => {
+    if (!value) return undefined;
+    if (arabic.test(value[0])) return Dir.RTL;
+    return Dir.LRT;
+  }, [value]);
+
   return (
     <div className="ui-flex ui-flex-col ui-w-full">
       <label
@@ -39,6 +48,7 @@ export const Input: React.FC<{
       </label>
       <div className="ui-w-full ui-relative">
         <input
+          dir={dir}
           id={id}
           type={type}
           name={name}
@@ -47,12 +57,14 @@ export const Input: React.FC<{
           onChange={onChange}
           onBlur={onBlur}
           className={cn(
-            "ui-w-full ui-bg-inputbg ui-py-[10px] ui-px-lg ui-rounded-2xl  ui-h-[72px] ui-font-cairo placeholder:ui-text-arxl placeholder:ui-font-medium ui-leading-normal",
+            "ui-w-full ui-bg-inputbg ui-py-[10px] ui-px-lg ui-rounded-2xl  ui-h-[72px] ui-font-cairo",
+            "placeholder:ui-text-arxl placeholder:ui-font-medium ui-leading-normal placeholder:ui-text-right",
             "ui-text-arxl ui-font-bold ui-leading-normal ui-border focus:ui-outline-none focus:ui-border-blue-normal",
             {
               "ui-bg-red-light ui-border-red-border focus:ui-border-red-border":
                 !!error,
               "ui-border-transparent": !error,
+              "ui-text-right focus:ui-text-left": dir === Dir.LRT,
             }
           )}
           placeholder={placeholder}

luna/tailwind.config.js

@@ -55,6 +55,9 @@ export default {
         xxl: "32px",
         "sm-section": "40px",
       },
+      transitionProperty: {
+        "border-color": "border-color",
+      },
     },
   },
   plugins: [],