noorui-rtl 0.4.2 → 0.4.4

package/CHANGELOG.md

@@ -5,6 +5,84 @@ All notable changes to Noor UI will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+## [0.4.4] - 2025-12-06
+
+### Fixed
+- **Popover Component**: Fixed RTL positioning issues by adding automatic direction detection (similar to DropdownMenu)
+  - Added MutationObserver to detect document direction changes
+  - Popover Root now automatically passes `dir` prop to Radix UI for proper RTL support
+  - Fixes notification popups, time pickers, and all popover-based components appearing on wrong side in RTL mode
+- **NotificationCenter**: Fixed RTL positioning - popup now appears on correct side in RTL mode
+  - Updated align logic to `direction === 'rtl' ? 'start' : 'end'` for consistent right-side positioning
+- **TimePicker & TimeRangePicker**: Fixed RTL positioning - popups now appear on correct side in RTL mode
+  - Updated align logic from `isRTL ? 'end' : 'start'` to `isRTL ? 'start' : 'end'`
+- **Documentation Pages**: Fixed inconsistent section title spacing across component pages
+  - **number-input**: Fixed Use Cases, API Reference, and Features sections
+  - **date-picker**: Fixed Use Cases, Type Definition, API Reference (2x), and Features sections
+  - **time-picker**: Fixed Use Cases, Type Definition, API Reference (2x), and Features sections
+  - All sections now use standard pattern: `<section className="mb-16">` with `<h2 className="text-2xl font-bold tracking-tight mb-6">`
+
+### Changed
+- **Popover Component**: Improved architecture to match DropdownMenu pattern for better RTL support
+- **Component Documentation**: Standardized section spacing for consistent visual hierarchy
+
+### Notes
+This release focuses on fixing RTL positioning issues in portal-rendered components (Popover) and improving documentation consistency. All popover-based components (notifications, time pickers, etc.) now position correctly in RTL mode.
+
+## [0.4.3] - 2025-12-05
+
+### Fixed
+- **Code Quality**: Resolved all React Hooks exhaustive-deps warnings (zero warnings achieved)
+  - **DataTable**: Wrapped `sampleUsers` in `useMemo` and added to dependency arrays in sorting, filtering, and pagination hooks
+  - **useRelativeTime Hook**: Wrapped `targetDate` in `useMemo` and `getRelativeTime` in `useCallback` with proper dependencies
+  - **Calendar**: Wrapped calendar days generation in `useMemo` with complete dependencies including `getHijriDate`
+- **Translations**: Fixed missing i18n keys across 11+ experimental component pages
+  - Added `rtlDemo` object with `ltr` and `rtl` keys to common.ts (EN/AR)
+  - Added missing example keys: `fullFeatured`, `compactMode`, `withPresets`, `customPresets`, `withoutPresets`, `inContext`
+  - Fixed incorrect key references: `rtl` → `rtlSupport`, `interface` → `typeDefinitions`, `sizes` → `examples.sizes`, `inContext` → `examples.inContext`
+- **NotificationCenter**: Fixed PropDefinition type error by changing `defaultValue` to `default` property
+- **WorkflowCanvas & WorkflowNode**: Fixed missing imports for `useDirection` and `content` from i18n
+- **ThinkingIndicator**: Fixed incorrect translation key references in examples section
+- **ParameterSlider**: Fixed non-existent translation key reference
+
+### Added
+- **Website**: Added "Starters" link to main navigation (both desktop and mobile)
+- **Website**: Added i18n translations for "Starters" menu item (English: "Starters", Arabic: "نماذج البداية")
+- **Website**: Added /starters page to sitemap.ts for SEO (priority: 0.8, weekly updates)
+- **SEO**: Added 3 OG images (bilingual, Arabic, English) at 1200×630px for social sharing
+- **SEO**: Updated root layout metadata with comprehensive OpenGraph and Twitter Card metadata
+- **Documentation**: Added OG image to main README.md for visual impact on GitHub
+- **Documentation**: Added OG image to npm package README (packages/noorui/README.md)
+- **Documentation**: Updated /starters page with Kitab Blog Starter information
+- **Documentation**: Added Kitab live demo link (kitab.noorui.com) and GitHub repository
+- **Documentation**: Updated README.md to include Starters page in documentation links
+- **Documentation**: Updated ROADMAP.md to highlight Kitab as completed deliverable
+- **Documentation**: Updated starters/README.md with full Kitab feature list
+- **Code Standards**: Added ESLint disable comments for intentional img usage (component library design decision)
+  - NotificationCenter: Avatar display using dynamic user-provided URLs
+  - ListingCard: Product image display
+  - FileUpload: Image preview using blob URLs from FileReader
+
+### Changed
+- **Website**: Improved visibility of /starters page through navigation integration
+- **Starters Page**: Replaced placeholder "Blog Dashboard" with production-ready "Kitab - Blog Starter"
+- **Starters Page**: Updated GitHub button to link to https://github.com/topics/noor-ui for broader project discovery
+- **Roadmap**: Updated current status to "READY FOR PUBLIC LAUNCH" with technical pre-launch checklist completed
+- **Roadmap**: Added Kitab to recent wins and next actions focused on marketing launch
+- **Website**: Updated all version references from v0.4.2 to v0.4.3
+  - Homepage (app/page.tsx)
+  - English home translations (lib/i18n/en/home.ts)
+  - Arabic home translations (lib/i18n/ar/home.ts)
+  - Launch plan documentation (LAUNCH_PLAN.md - 7 references)
+  - Roadmap documentation (ROADMAP.md - 4 references)
+- **Build Process**: Achieved zero build warnings and zero compilation errors
+- **Code Quality**: Improved React performance patterns with proper memoization and callback usage
+
+### Notes
+This release focuses on code quality improvements and documentation completeness. All 74+ components maintain full RTL/LTR support with zero build warnings. The codebase is now optimized for production use with proper React performance patterns.
+
 ## [0.4.2] - 2025-11-29
 
 ### Added

package/CONTRIBUTING.md

@@ -300,6 +300,7 @@ hooks/
 
 ## Questions?
 
+- 💬 Discord: [Join our community](https://discord.gg/gvrqU2WG)
 - 💬 Open an issue for questions
 - 📧 Email: info@ositaka.com
 - 🐛 Report bugs via GitHub issues

package/README.md

@@ -5,6 +5,8 @@
 [![npm version](https://badge.fury.io/js/noorui-rtl.svg)](https://www.npmjs.com/package/noorui-rtl)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 
+![Noor UI - Beautiful RTL-first React components for bilingual applications](https://raw.githubusercontent.com/ositaka/noor-ui/main/public/noorui--og-image--bilingual.png)
+
 Beautiful RTL-first React components for bilingual applications. Built with Radix UI, Tailwind CSS, and full Arabic/English support.
 
 **[Documentation](https://noorui.com)** · **[Examples](https://noorui.com/examples)** · **[npm](https://www.npmjs.com/package/noorui-rtl)**
@@ -298,6 +300,7 @@ Full documentation, examples, and guides available at **[noorui.com](https://noo
 - [Components](https://noorui.com/components)
 - [RTL Guide](https://noorui.com/rtl-guide)
 - [Examples](https://noorui.com/examples)
+- [Starters](https://noorui.com/starters)
 - [Design Tokens](https://noorui.com/tokens)
 
 ## 🤝 Contributing
@@ -318,6 +321,7 @@ Built with:
 
 ## 💬 Support
 
+- 💬 Discord: [Join our community](https://discord.gg/gvrqU2WG)
 - 📧 Email: info@ositaka.com
 - 🐛 Issues: [GitHub Issues](https://github.com/ositaka/noor-ui/issues)
 - 💬 Discussions: [GitHub Discussions](https://github.com/ositaka/noor-ui/discussions)

package/dist/index.d.mts

@@ -345,11 +345,11 @@ declare const CollapsibleContent: React$1.ForwardRefExoticComponent<CollapsibleP
 
 declare const Command: React$1.ForwardRefExoticComponent<Omit<{
     children?: React$1.ReactNode;
-} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     ref?: React$1.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -373,45 +373,45 @@ declare const CommandInput: React$1.ForwardRefExoticComponent<Omit<Omit<Pick<Pic
 } & React$1.RefAttributes<HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 declare const CommandList: React$1.ForwardRefExoticComponent<Omit<{
     children?: React$1.ReactNode;
-} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     ref?: React$1.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     label?: string;
 } & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CommandEmpty: React$1.ForwardRefExoticComponent<Omit<{
     children?: React$1.ReactNode;
-} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     ref?: React$1.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CommandGroup: React$1.ForwardRefExoticComponent<Omit<{
     children?: React$1.ReactNode;
-} & Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     ref?: React$1.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement> | "key">, "value" | "heading"> & {
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
     heading?: React$1.ReactNode;
     value?: string;
     forceMount?: boolean;
 } & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const CommandSeparator: React$1.ForwardRefExoticComponent<Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+declare const CommandSeparator: React$1.ForwardRefExoticComponent<Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     ref?: React$1.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     alwaysRender?: boolean;
 } & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CommandItem: React$1.ForwardRefExoticComponent<Omit<{
     children?: React$1.ReactNode;
-} & Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     ref?: React$1.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement> | "key">, "value" | "disabled" | "onSelect"> & {
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>>, "value" | "disabled" | "onSelect"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;
@@ -673,6 +673,9 @@ interface DataTableProps<T> {
     totalPages?: number;
     pageSize?: number;
     onPageChange?: (page: number) => void;
+    nextLabel?: string;
+    previousLabel?: string;
+    pageLabel?: string;
     mobileView?: 'table' | 'cards';
     /** Show sort buttons on mobile cards */
     mobileSorting?: boolean;
@@ -683,7 +686,7 @@ interface DataTableProps<T> {
     hoverable?: boolean;
     compact?: boolean;
 }
-declare function DataTable<T>({ data, columns, isLoading, sortBy: externalSortBy, sortDirection: externalSortDirection, onSort: externalOnSort, enableSorting, defaultSortBy, defaultSortDirection, searchable, searchPlaceholder, searchPlaceholderAr, searchValue, onSearchChange, pagination, currentPage, totalPages, pageSize, onPageChange, mobileView, mobileSorting, emptyMessage, emptyMessageAr, className, striped, hoverable, compact, }: DataTableProps<T>): React$1.JSX.Element;
+declare function DataTable<T>({ data, columns, isLoading, sortBy: externalSortBy, sortDirection: externalSortDirection, onSort: externalOnSort, enableSorting, defaultSortBy, defaultSortDirection, searchable, searchPlaceholder, searchPlaceholderAr, searchValue, onSearchChange, pagination, currentPage, totalPages, pageSize, onPageChange, nextLabel, previousLabel, pageLabel, mobileView, mobileSorting, emptyMessage, emptyMessageAr, className, striped, hoverable, compact, }: DataTableProps<T>): React$1.JSX.Element;
 
 interface DatePickerProps {
     date?: Date;

package/dist/index.d.ts

@@ -345,11 +345,11 @@ declare const CollapsibleContent: React$1.ForwardRefExoticComponent<CollapsibleP
 
 declare const Command: React$1.ForwardRefExoticComponent<Omit<{
     children?: React$1.ReactNode;
-} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     ref?: React$1.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -373,45 +373,45 @@ declare const CommandInput: React$1.ForwardRefExoticComponent<Omit<Omit<Pick<Pic
 } & React$1.RefAttributes<HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 declare const CommandList: React$1.ForwardRefExoticComponent<Omit<{
     children?: React$1.ReactNode;
-} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     ref?: React$1.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     label?: string;
 } & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CommandEmpty: React$1.ForwardRefExoticComponent<Omit<{
     children?: React$1.ReactNode;
-} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     ref?: React$1.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CommandGroup: React$1.ForwardRefExoticComponent<Omit<{
     children?: React$1.ReactNode;
-} & Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     ref?: React$1.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement> | "key">, "value" | "heading"> & {
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
     heading?: React$1.ReactNode;
     value?: string;
     forceMount?: boolean;
 } & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const CommandSeparator: React$1.ForwardRefExoticComponent<Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+declare const CommandSeparator: React$1.ForwardRefExoticComponent<Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     ref?: React$1.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     alwaysRender?: boolean;
 } & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CommandItem: React$1.ForwardRefExoticComponent<Omit<{
     children?: React$1.ReactNode;
-} & Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React$1.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     ref?: React$1.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement> | "key">, "value" | "disabled" | "onSelect"> & {
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>>, "value" | "disabled" | "onSelect"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;
@@ -673,6 +673,9 @@ interface DataTableProps<T> {
     totalPages?: number;
     pageSize?: number;
     onPageChange?: (page: number) => void;
+    nextLabel?: string;
+    previousLabel?: string;
+    pageLabel?: string;
     mobileView?: 'table' | 'cards';
     /** Show sort buttons on mobile cards */
     mobileSorting?: boolean;
@@ -683,7 +686,7 @@ interface DataTableProps<T> {
     hoverable?: boolean;
     compact?: boolean;
 }
-declare function DataTable<T>({ data, columns, isLoading, sortBy: externalSortBy, sortDirection: externalSortDirection, onSort: externalOnSort, enableSorting, defaultSortBy, defaultSortDirection, searchable, searchPlaceholder, searchPlaceholderAr, searchValue, onSearchChange, pagination, currentPage, totalPages, pageSize, onPageChange, mobileView, mobileSorting, emptyMessage, emptyMessageAr, className, striped, hoverable, compact, }: DataTableProps<T>): React$1.JSX.Element;
+declare function DataTable<T>({ data, columns, isLoading, sortBy: externalSortBy, sortDirection: externalSortDirection, onSort: externalOnSort, enableSorting, defaultSortBy, defaultSortDirection, searchable, searchPlaceholder, searchPlaceholderAr, searchValue, onSearchChange, pagination, currentPage, totalPages, pageSize, onPageChange, nextLabel, previousLabel, pageLabel, mobileView, mobileSorting, emptyMessage, emptyMessageAr, className, striped, hoverable, compact, }: DataTableProps<T>): React$1.JSX.Element;
 
 interface DatePickerProps {
     date?: Date;