fix: mobile release sorting in new docs

packages/dev/s2-docs/src/ComponentCardView.tsx

@@ -1,66 +1,35 @@
+/* eslint-disable rulesdir/imports */
+/* eslint-disable monorepo/no-internal-import */
 'use client';
 
+import {CardView, Collection} from '@react-spectrum/s2';
 import {ComponentCard} from './ComponentCard';
-import {InternalCardViewContext} from '../../../@react-spectrum/s2/src/Card';
-import {Key, ListBox, ListBoxItem} from 'react-aria-components';
+import {Key} from 'react-aria-components';
 import React from 'react';
-import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 export interface ComponentCardItem {
   id: string,
   name: string,
   href: string,
-  description?: string
+  description?: string,
+  date?: string
 }
 
 interface ComponentCardGridProps {
   items: ComponentCardItem[],
   ariaLabel?: string,
   size?: 'S' | 'M' | 'L',
   onAction?: (key: Key) => void,
+  styles?: any,
   renderEmptyState?: () => React.ReactNode
 }
 
-export function ComponentCardView({items, ariaLabel = 'Items', size = 'S', onAction, renderEmptyState}: ComponentCardGridProps) {
+export function ComponentCardView({items, ariaLabel = 'Items', size = 'S', onAction, styles, renderEmptyState}: ComponentCardGridProps) {
   return (
-    <InternalCardViewContext.Provider value={{ElementType: ListBoxItem, layout: 'grid'}}>
-      <ListBox
-        aria-label={ariaLabel}
-        layout="grid"
-        onAction={onAction}
-        className={style({
-          display: {
-            default: 'grid',
-            isEmpty: 'flex'
-          },
-          gridTemplateColumns: {
-            default: 'repeat(auto-fill, minmax(150px, 1fr))',
-            md: 'repeat(auto-fill, minmax(200px, 1fr))'
-          },
-          gridAutoRows: 'max-content',
-          gap: 16,
-          padding: {
-            default: 12,
-            md: 16
-          },
-          marginX: {
-            default: -12,
-            md: 0
-          },
-          alignItems: {
-            isEmpty: 'center'
-          },
-          justifyContent: {
-            default: 'space-between',
-            isEmpty: 'center'
-          },
-          overflow: 'auto',
-          flexGrow: 1
-        })}
-        renderEmptyState={renderEmptyState}
-        items={items}>
+    <CardView aria-label={ariaLabel} onAction={onAction} styles={styles} renderEmptyState={renderEmptyState}>
+      <Collection items={items}>
         {(item) => <ComponentCard id={item.id} name={item.name.trim()} href={item.href} description={item.description} size={size} />}
-      </ListBox>
-    </InternalCardViewContext.Provider>
+      </Collection>
+    </CardView>
   );
 }

packages/dev/s2-docs/src/MobileSearchMenu.tsx

@@ -305,6 +305,15 @@ function MobileNav({pages, currentPage}: PageProps) {
     return matchedPages.sort((a, b) => {
       let aNameMatch = title(a).toLowerCase().startsWith(searchLower);
       let bNameMatch = title(b).toLowerCase().startsWith(searchLower);
+      if (a.date && b.date) {
+        let aDate = new Date(a.date);
+        let bDate = new Date(b.date);
+        return bDate.getTime() - aDate.getTime();
+      } else if (a.date && !b.date) {
+        return 1;
+      } else if (!a.date && b.date) {
+        return -1;
+      }
 
       if (aNameMatch && !bNameMatch) {
         return -1;
@@ -325,16 +334,29 @@ function MobileNav({pages, currentPage}: PageProps) {
     let filteredPages = filterPages(pages, searchValue);
 
     return filteredPages
-      .sort((a, b) => title(a).localeCompare(title(b)))
-      .map(page => ({id: page.url.replace(/^\//, ''), name: title(page), href: page.url, description: page.exports?.description}));
+      .sort((a, b) => {
+        return title(a).localeCompare(title(b));
+      })
+      .map(page => ({id: page.url.replace(/^\//, ''), name: title(page), href: page.url, description: page.exports?.description, date: page.exports?.date}));
   };
 
   let getAllContent = (libraryId: string, searchValue: string = ''): ComponentCardItem[] => {
     let librarySections = getSectionsForLibrary(libraryId);
     let allPages = Array.from(librarySections.values()).flat();
     let filteredPages = filterPages(allPages, searchValue);
     return filteredPages
-      .sort((a, b) => title(a).localeCompare(title(b)))
+      .sort((a, b) => {
+        if (a.date && b.date) {
+          let aDate = new Date(a.date);
+          let bDate = new Date(b.date);
+          return bDate.getTime() - aDate.getTime();
+        } else if (a.date && !b.date) {
+          return 1;
+        } else if (!a.date && b.date) {
+          return -1;
+        }
+        return title(a).localeCompare(title(b));
+      })
       .map(page => ({id: page.url.replace(/^\//, ''), name: title(page), href: page.url, description: page.exports?.description}));
   };
 
@@ -355,6 +377,16 @@ function MobileNav({pages, currentPage}: PageProps) {
         const aIsIntro = a.name === 'Introduction';
         const bIsIntro = b.name === 'Introduction';
 
+        if (a.date && b.date) {
+          let aDate = new Date(a.date);
+          let bDate = new Date(b.date);
+          return bDate.getTime() - aDate.getTime();
+        } else if (a.date && !b.date) {
+          return 1;
+        } else if (!a.date && b.date) {
+          return -1;
+        }
+
         if (aIsIntro && !bIsIntro) {
           return -1;
         }