feat(dashboard): support RTL in dashboard (medusajs#11252)

* fix: add direction attribute to components and adjust styles for RTL support

* fix(data-grid): comment it out

* Added useDocumentDirection hook

* refactor: Integrate useDocumentDirection hook

* refactor: Standardize direction prop usage across components

* resolve

* fix: resolve build errors

* fix : remove unused useDocument

* Apply RTL styles for some components

* Create smooth-gorillas-hide.md

* refactor: update some styles for RTL support

---------

Co-authored-by: William Bouchard <[email protected]>

Author: MEClouds

.changeset/smooth-gorillas-hide.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/dashboard": patch
+---
+
+feat(dashboard): support RTL in dashboard

packages/admin/dashboard/src/components/common/action-menu/action-menu.tsx

@@ -4,6 +4,7 @@ import { EllipsisHorizontal } from "@medusajs/icons"
 import { PropsWithChildren, ReactNode } from "react"
 import { Link } from "react-router-dom"
 import { ConditionalTooltip } from "../conditional-tooltip"
+import { useDocumentDirection } from "../../../hooks/use-document-direction"
 
 export type Action = {
   icon: ReactNode
@@ -38,14 +39,15 @@ export const ActionMenu = ({
   variant = "transparent",
   children,
 }: ActionMenuProps) => {
+  const direction = useDocumentDirection()
   const inner = children ?? (
     <IconButton size="small" variant={variant}>
       <EllipsisHorizontal />
     </IconButton>
   )
 
   return (
-    <DropdownMenu>
+    <DropdownMenu dir={direction}>
       <DropdownMenu.Trigger asChild>{inner}</DropdownMenu.Trigger>
       <DropdownMenu.Content>
         {groups.map((group, index) => {

packages/admin/dashboard/src/components/common/json-view-section/json-view-section.tsx

@@ -46,7 +46,10 @@ export const JsonViewSection = ({ data }: JsonViewSectionProps) => {
             <ArrowUpRightOnBox />
           </IconButton>
         </Drawer.Trigger>
-        <Drawer.Content className="bg-ui-contrast-bg-base text-ui-code-fg-subtle !shadow-elevation-commandbar overflow-hidden border border-none max-md:inset-x-2 max-md:max-w-[calc(100%-16px)]">
+        <Drawer.Content
+          dir="ltr"
+          className="bg-ui-contrast-bg-base text-ui-code-fg-subtle !shadow-elevation-commandbar overflow-hidden border border-none max-md:inset-x-2 max-md:max-w-[calc(100%-16px)]"
+        >
           <div className="bg-ui-code-bg-base flex items-center justify-between px-6 py-4">
             <div className="flex items-center gap-x-4">
               <Drawer.Title asChild>

packages/admin/dashboard/src/components/common/sidebar-link/sidebar-link.tsx

@@ -37,7 +37,7 @@ export const SidebarLink = ({
               </Text>
             </div>
             <div className="flex size-7 items-center justify-center">
-              <TriangleRightMini className="text-ui-fg-muted" />
+              <TriangleRightMini className="text-ui-fg-muted rtl:rotate-180" />
             </div>
           </div>
         </div>

packages/admin/dashboard/src/components/common/switch-box/switch-box.tsx

@@ -50,6 +50,8 @@ export const SwitchBox = <
             <div className="bg-ui-bg-component shadow-elevation-card-rest flex items-start gap-x-3 rounded-lg p-3">
               <Form.Control>
                 <Switch
+                  className="rtl:rotate-180"
+                  dir="ltr"
                   {...field}
                   checked={value}
                   onCheckedChange={(e) => {

packages/admin/dashboard/src/components/data-grid/components/data-grid-root.tsx

@@ -29,6 +29,7 @@ import { FieldValues, UseFormReturn } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 
 import { useCommandHistory } from "../../../hooks/use-command-history"
+import { useDocumentDirection } from "../../../hooks/use-document-direction"
 import { ConditionalTooltip } from "../../common/conditional-tooltip"
 import { DataGridContext } from "../context"
 import {
@@ -50,7 +51,7 @@ import { isCellMatch, isSpecialFocusKey } from "../utils"
 import { DataGridKeyboardShortcutModal } from "./data-grid-keyboard-shortcut-modal"
 export interface DataGridRootProps<
   TData,
-  TFieldValues extends FieldValues = FieldValues
+  TFieldValues extends FieldValues = FieldValues,
 > {
   data?: TData[]
   columns: ColumnDef<TData>[]
@@ -96,7 +97,7 @@ const getCommonPinningStyles = <TData,>(
 
 export const DataGridRoot = <
   TData,
-  TFieldValues extends FieldValues = FieldValues
+  TFieldValues extends FieldValues = FieldValues,
 >({
   data = [],
   columns,
@@ -700,6 +701,7 @@ const DataGridHeader = ({
   const [shortcutsOpen, setShortcutsOpen] = useState(false)
   const [columnsOpen, setColumnsOpen] = useState(false)
   const { t } = useTranslation()
+  const direction = useDocumentDirection()
 
   // Since all columns are checked by default, we can check if any column is unchecked
   const hasChanged = columnOptions.some((column) => !column.checked)
@@ -716,7 +718,11 @@ const DataGridHeader = ({
   return (
     <div className="bg-ui-bg-base flex items-center justify-between border-b p-4">
       <div className="flex items-center gap-x-2">
-        <DropdownMenu open={columnsOpen} onOpenChange={handleColumnsOpenChange}>
+        <DropdownMenu
+          dir={direction}
+          open={columnsOpen}
+          onOpenChange={handleColumnsOpenChange}
+        >
           <ConditionalTooltip
             showTooltip={isDisabled}
             content={t("dataGrid.columns.disabled")}

packages/admin/dashboard/src/components/data-grid/components/data-grid-toggleable-number-cell.tsx

@@ -106,9 +106,10 @@ const OuterComponent = ({
     >
       <div className="absolute inset-y-0 left-4 z-[3] flex w-fit items-center justify-center">
         <Switch
+          dir="ltr"
           ref={buttonRef}
           size="small"
-          className="shrink-0"
+          className="shrink-0 rtl:rotate-180"
           checked={localValue.checked}
           disabled={localValue.disabledToggle}
           onCheckedChange={handleCheckedChange}

packages/admin/dashboard/src/components/filtering/filter-group/filter-group.tsx

@@ -1,6 +1,7 @@
 import { Button, DropdownMenu } from "@medusajs/ui"
 import { ReactNode } from "react"
 import { useSearchParams } from "react-router-dom"
+import { useDocumentDirection } from "../../../hooks/use-document-direction"
 
 type FilterGroupProps = {
   filters: {
@@ -37,8 +38,11 @@ type AddFilterMenuProps = {
 }
 
 const AddFilterMenu = ({ availableKeys }: AddFilterMenuProps) => {
+  const direction = useDocumentDirection()
   return (
-    <DropdownMenu>
+    <DropdownMenu
+      dir={direction}
+    >
       <DropdownMenu.Trigger asChild>
         <Button variant="secondary" size="small">
           Add filter

packages/admin/dashboard/src/components/filtering/order-by/order-by.tsx

@@ -4,6 +4,8 @@ import { useState } from "react"
 import { useTranslation } from "react-i18next"
 import { useSearchParams } from "react-router-dom"
 
+import { useDocumentDirection } from "../../../hooks/use-document-direction"
+
 type OrderByProps = {
   keys: string[]
 }
@@ -56,6 +58,7 @@ export const OrderBy = ({ keys }: OrderByProps) => {
   }>(initState(searchParams))
 
   const { t } = useTranslation()
+  const direction = useDocumentDirection()
 
   const handleDirChange = (dir: string) => {
     setState((prev) => ({
@@ -99,7 +102,7 @@ export const OrderBy = ({ keys }: OrderByProps) => {
   }
 
   return (
-    <DropdownMenu>
+    <DropdownMenu dir={direction}>
       <DropdownMenu.Trigger asChild>
         <IconButton size="small">
           <ArrowUpDown />

packages/admin/dashboard/src/components/forms/address-form/address-form.tsx

@@ -7,6 +7,7 @@ import { Control } from "react-hook-form"
 import { AddressSchema } from "../../../lib/schemas"
 import { Form } from "../../common/form"
 import { CountrySelect } from "../../inputs/country-select"
+import { useDocumentDirection } from "../../../hooks/use-document-direction"
 
 type AddressFieldValues = z.infer<typeof AddressSchema>
 
@@ -22,7 +23,7 @@ export const AddressForm = ({
   layout,
 }: AddressFormProps) => {
   const { t } = useTranslation()
-
+  const direction = useDocumentDirection()
   const style = clx("gap-4", {
     "flex flex-col": layout === "stack",
     "grid grid-cols-2": layout === "grid",
@@ -182,7 +183,11 @@ export const AddressForm = ({
                   <Form.Label>{t("fields.country")}</Form.Label>
                   <Form.Control>
                     {countries ? (
-                      <Select {...field} onValueChange={onChange}>
+                      <Select
+                        dir={direction}
+                        {...field}
+                        onValueChange={onChange}
+                      >
                         <Select.Trigger ref={ref}>
                           <Select.Value />
                         </Select.Trigger>