From ea079aa7d5121c66e9d6493dc91e62c4fa6ef808 Mon Sep 17 00:00:00 2001 From: Robert Snow Date: Tue, 11 Nov 2025 11:37:09 +1100 Subject: [PATCH 1/5] fix: mobile release sorting in new docs --- .../dev/s2-docs/src/ComponentCardView.tsx | 3 +- packages/dev/s2-docs/src/MobileSearchMenu.tsx | 43 +++++++++++++++++-- 2 files changed, 42 insertions(+), 4 deletions(-) diff --git a/packages/dev/s2-docs/src/ComponentCardView.tsx b/packages/dev/s2-docs/src/ComponentCardView.tsx index d51b93d960a..cbf3e5808f7 100644 --- a/packages/dev/s2-docs/src/ComponentCardView.tsx +++ b/packages/dev/s2-docs/src/ComponentCardView.tsx @@ -20,7 +20,8 @@ interface ComponentCardGridProps { size?: 'S' | 'M' | 'L', onAction?: (key: Key) => void, styles?: any, - renderEmptyState?: () => React.ReactNode + renderEmptyState?: () => React.ReactNode, + date?: string } export function ComponentCardView({items, ariaLabel = 'Items', size = 'S', onAction, styles, renderEmptyState}: ComponentCardGridProps) { diff --git a/packages/dev/s2-docs/src/MobileSearchMenu.tsx b/packages/dev/s2-docs/src/MobileSearchMenu.tsx index 684f5a4ada6..a883c74eec9 100644 --- a/packages/dev/s2-docs/src/MobileSearchMenu.tsx +++ b/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,8 +334,10 @@ 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[] => { @@ -334,7 +345,21 @@ function MobileNav({pages, currentPage}: PageProps) { 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) => { + console.log('getAllContent'); + console.log('a', a); + console.log('b', 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})); }; @@ -352,8 +377,20 @@ function MobileNav({pages, currentPage}: PageProps) { // Sort to show "Introduction" first when search is empty if (searchValue.trim().length === 0) { items = [...items].sort((a, b) => { + console.log('getItemsForSelection'); + console.log('a', a); + console.log('b', b); 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; From 29290a0d738bbdf299039131935146bff7d8583f Mon Sep 17 00:00:00 2001 From: Robert Snow Date: Tue, 11 Nov 2025 12:02:35 +1100 Subject: [PATCH 2/5] remove console logs --- packages/dev/s2-docs/src/ComponentCardView.tsx | 3 +-- packages/dev/s2-docs/src/MobileSearchMenu.tsx | 15 --------------- 2 files changed, 1 insertion(+), 17 deletions(-) diff --git a/packages/dev/s2-docs/src/ComponentCardView.tsx b/packages/dev/s2-docs/src/ComponentCardView.tsx index cbf3e5808f7..d51b93d960a 100644 --- a/packages/dev/s2-docs/src/ComponentCardView.tsx +++ b/packages/dev/s2-docs/src/ComponentCardView.tsx @@ -20,8 +20,7 @@ interface ComponentCardGridProps { size?: 'S' | 'M' | 'L', onAction?: (key: Key) => void, styles?: any, - renderEmptyState?: () => React.ReactNode, - date?: string + renderEmptyState?: () => React.ReactNode } export function ComponentCardView({items, ariaLabel = 'Items', size = 'S', onAction, styles, renderEmptyState}: ComponentCardGridProps) { diff --git a/packages/dev/s2-docs/src/MobileSearchMenu.tsx b/packages/dev/s2-docs/src/MobileSearchMenu.tsx index a883c74eec9..af31df8b106 100644 --- a/packages/dev/s2-docs/src/MobileSearchMenu.tsx +++ b/packages/dev/s2-docs/src/MobileSearchMenu.tsx @@ -346,9 +346,6 @@ function MobileNav({pages, currentPage}: PageProps) { let filteredPages = filterPages(allPages, searchValue); return filteredPages .sort((a, b) => { - console.log('getAllContent'); - console.log('a', a); - console.log('b', b); if (a.date && b.date) { let aDate = new Date(a.date); let bDate = new Date(b.date); @@ -377,20 +374,8 @@ function MobileNav({pages, currentPage}: PageProps) { // Sort to show "Introduction" first when search is empty if (searchValue.trim().length === 0) { items = [...items].sort((a, b) => { - console.log('getItemsForSelection'); - console.log('a', a); - console.log('b', b); 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; From f33c4c31a13b6b1f283a14aa876099396a1c355e Mon Sep 17 00:00:00 2001 From: Robert Snow Date: Tue, 11 Nov 2025 12:30:56 +1100 Subject: [PATCH 3/5] fix search --- .../dev/s2-docs/src/ComponentCardView.tsx | 55 ++++--------------- packages/dev/s2-docs/src/MobileSearchMenu.tsx | 10 ++++ 2 files changed, 22 insertions(+), 43 deletions(-) diff --git a/packages/dev/s2-docs/src/ComponentCardView.tsx b/packages/dev/s2-docs/src/ComponentCardView.tsx index 1e860142961..f7a191b4ee0 100644 --- a/packages/dev/s2-docs/src/ComponentCardView.tsx +++ b/packages/dev/s2-docs/src/ComponentCardView.tsx @@ -1,16 +1,18 @@ +/* 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 { @@ -18,49 +20,16 @@ interface ComponentCardGridProps { 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 ( - - + + {(item) => } - - + + ); } diff --git a/packages/dev/s2-docs/src/MobileSearchMenu.tsx b/packages/dev/s2-docs/src/MobileSearchMenu.tsx index af31df8b106..905444694da 100644 --- a/packages/dev/s2-docs/src/MobileSearchMenu.tsx +++ b/packages/dev/s2-docs/src/MobileSearchMenu.tsx @@ -377,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; } From b6cbd199c2b487b21de8fffe32f33d0868f35e9c Mon Sep 17 00:00:00 2001 From: Robert Snow Date: Wed, 12 Nov 2025 07:50:10 +1100 Subject: [PATCH 4/5] fix another bad merge --- .../dev/s2-docs/src/ComponentCardView.tsx | 54 +++++++++++++++---- 1 file changed, 43 insertions(+), 11 deletions(-) diff --git a/packages/dev/s2-docs/src/ComponentCardView.tsx b/packages/dev/s2-docs/src/ComponentCardView.tsx index f7a191b4ee0..45addb2d32c 100644 --- a/packages/dev/s2-docs/src/ComponentCardView.tsx +++ b/packages/dev/s2-docs/src/ComponentCardView.tsx @@ -1,11 +1,10 @@ -/* eslint-disable rulesdir/imports */ -/* eslint-disable monorepo/no-internal-import */ 'use client'; -import {CardView, Collection} from '@react-spectrum/s2'; import {ComponentCard} from './ComponentCard'; -import {Key} from 'react-aria-components'; +import {InternalCardViewContext} from '../../../@react-spectrum/s2/src/Card'; +import {Key, ListBox, ListBoxItem} from 'react-aria-components'; import React from 'react'; +import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; export interface ComponentCardItem { id: string, @@ -20,16 +19,49 @@ interface ComponentCardGridProps { ariaLabel?: string, size?: 'S' | 'M' | 'L', onAction?: (key: Key) => void, - styles?: any, renderEmptyState?: () => React.ReactNode } -export function ComponentCardView({items, ariaLabel = 'Items', size = 'S', onAction, styles, renderEmptyState}: ComponentCardGridProps) { +export function ComponentCardView({items, ariaLabel = 'Items', size = 'S', onAction, renderEmptyState}: ComponentCardGridProps) { return ( - - + + {(item) => } - - + + ); -} +} \ No newline at end of file From f208a4940ec9162bb3122140707b4bf941631d80 Mon Sep 17 00:00:00 2001 From: Robert Snow Date: Wed, 12 Nov 2025 07:50:33 +1100 Subject: [PATCH 5/5] add newline --- packages/dev/s2-docs/src/ComponentCardView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dev/s2-docs/src/ComponentCardView.tsx b/packages/dev/s2-docs/src/ComponentCardView.tsx index 45addb2d32c..e23cdbeaec7 100644 --- a/packages/dev/s2-docs/src/ComponentCardView.tsx +++ b/packages/dev/s2-docs/src/ComponentCardView.tsx @@ -64,4 +64,4 @@ export function ComponentCardView({items, ariaLabel = 'Items', size = 'S', onAct ); -} \ No newline at end of file +}