chore: add `RTL` support for `@asgardeo/react` & `@asgardeo/nextjs` UI components

[brionmario]

Current Limitation

Add Right-to-Left (RTL) language support to the @asgardeo/react & @asgardeo/nextjs components to ensure proper internationalization for Arabic, Hebrew, and other RTL languages.

Current State:

• Components use LTR (Left-to-Right) layout assumptions
• No RTL-specific styling or layout adjustments
• Text direction not handled for RTL languages
• Icons and UI elements positioned for LTR only

Missing RTL Features:

• CSS logical properties not used (margin-left vs margin-inline-start)
• No dir="rtl" attribute handling
• Icons and arrows don't flip for RTL contexts
• Dropdown positioning assumes LTR layout
• Modal and popup positioning needs RTL consideration

Suggested Improvement

Implementation Plan

1. CSS Logical Properties

Replace physical properties with logical equivalents:

/* Before */
margin-left: 16px;
text-align: left;

/* After */
margin-inline-start: 16px;
text-align: start;

2. RTL Detection Hook

// Custom hook for RTL detection
const useRTL = () => {
  const isRTL = document.dir === 'rtl' || 
               document.documentElement.dir === 'rtl';
  return { isRTL };
};

3. Icon and Arrow Flipping

• Add transform: scaleX(-1) for directional icons in RTL
• Update arrow directions in dropdowns and navigation
• Flip chevron icons appropriately

4. Component Updates

OrganizationSwitcher:

• Dropdown positioning for RTL
• Icon alignment adjustments
• Menu item layout

Modal Components:

• Positioning and alignment
• Close button placement
• Content flow direction

5. Testing

// RTL testing with Vitest
test('renders correctly in RTL mode', () => {
  document.dir = 'rtl';
  render(<OrganizationSwitcher />);
  // Test RTL-specific behavior
});

Files to Update

• CSS/styled-components in all React components
• OrganizationSwitcher and related modal components
• Icon components for directional flipping
• Add RTL detection utilities
• Update Storybook stories with RTL variants
• Add RTL-specific tests

Please select the package issue is related to

@asgardeo/react, @asgardeo/nextjs

Version

current

Reporter Checklist

• I have searched the existing issues and this is not a duplicate.
• I have provided all the necessary information.
• I have verified the improvement is not available in the latest version of the package.

[Iduranga-Uwanpriya]

Hi @brionmario , can you reserve this issue for me, this looks interesting too. Adding RTL support is essential for proper internationalization. I plan to introduce CSS logical properties, an RTL detection hook, icon flipping, and RTL-aware dropdown/modal positioning, along with RTL-specific tests to ensure correct rendering in @asgardeo/react and @asgardeo/nextjs.

[Coding4DevelopersByShenthuri]

Can I work on this issue

[brionmario]

Thanks everyone for the interest! 🙌

Hi @brionmario , can you reserve this issue for me, this looks interesting too. Adding RTL support is essential for proper internationalization. I plan to introduce CSS logical properties, an RTL detection hook, icon flipping, and RTL-aware dropdown/modal positioning, along with RTL-specific tests to ensure correct rendering in @asgardeo/react and @asgardeo/nextjs.

Hey @Iduranga-Uwanpriya ,

Since you were the first to comment, would you like to take this over?

[Iduranga-Uwanpriya]

yes i would really like to take this over thank you @brionmario