From c1f5a038f4f8ee3657a7f60a96e9553b0741e004 Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Tue, 11 Aug 2026 15:03:52 +1000 Subject: [PATCH 1/3] chore: SideNav in test apps --- examples/s2-next-macros/src/app/page.tsx | 91 ++++++++++++++++++ examples/s2-parcel-example/src/App.js | 83 +++++++++++++++++ examples/s2-vite-project/src/App.tsx | 91 ++++++++++++++++++ examples/s2-webpack-5-example/src/App.js | 83 +++++++++++++++++ .../src/App.tsx | 92 +++++++++++++++++++ 5 files changed, 440 insertions(+) diff --git a/examples/s2-next-macros/src/app/page.tsx b/examples/s2-next-macros/src/app/page.tsx index e1cef34b79a..16125aac36e 100644 --- a/examples/s2-next-macros/src/app/page.tsx +++ b/examples/s2-next-macros/src/app/page.tsx @@ -38,6 +38,10 @@ import { PickerItem, Provider, Row, + SideNav, + SideNavItem, + SideNavItemContent, + SideNavItemLink, SubmenuTrigger, TableBody, TableHeader, @@ -53,9 +57,12 @@ import { useListData, useTreeData } from '@react-spectrum/s2'; +import Delete from '@react-spectrum/s2/icons/Delete'; import Edit from '@react-spectrum/s2/icons/Edit'; +import File from '@react-spectrum/s2/icons/File'; import FileTxt from '@react-spectrum/s2/icons/FileText'; import Folder from '@react-spectrum/s2/icons/Folder'; +import {RouterProvider} from 'react-aria-components'; import Section from './components/Section'; import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; import {CardViewExample} from './components/CardViewExample'; @@ -222,6 +229,89 @@ function ReorderableTreeView() { ); } +interface SideNavItemData { + id: number; + title: string; + type: 'directory' | 'file'; + href?: string; + children?: SideNavItemData[]; +} + +let sideNavItems: SideNavItemData[] = [ + { + id: 1, + title: 'Documents', + type: 'directory', + children: [ + { + id: 2, + title: 'Project', + type: 'directory', + children: [ + {id: 3, title: 'Notes', type: 'file', href: '/notes'}, + {id: 4, title: 'Budget', type: 'file', href: '/budget'} + ] + } + ] + }, + { + id: 5, + title: 'Photos', + type: 'directory', + children: [ + {id: 6, title: 'Image 1', type: 'file', href: '/image-1'}, + {id: 7, title: 'Image 2', type: 'file', href: '/image-2'} + ] + } +]; + +// Wrap SideNav in a RouterProvider whose navigate only updates local state so +// clicking a link selects the item without actually navigating the page. +function SideNavExample() { + let [selectedRoute, setSelectedRoute] = useState('/notes'); + return ( + setSelectedRoute(href)}> + + {function renderItem(item: SideNavItemData) { + return ( + + + {item.href ? ( + + {item.type === 'directory' ? : } + {item.title} + + ) : ( + <> + {item.type === 'directory' ? : } + {item.title} + + )} + + + + Edit + + + + Delete + + + + {item.children && {renderItem}} + + ); + }} + + + ); +} + function App() { let [isLazyLoaded, setLazyLoaded] = useState(false); let [cardViewState, setCardViewState] = useState({ @@ -355,6 +445,7 @@ function App() { + {!isLazyLoaded && ( diff --git a/examples/s2-parcel-example/src/App.js b/examples/s2-parcel-example/src/App.js index 67fbe0f7414..2602a87a3a1 100644 --- a/examples/s2-parcel-example/src/App.js +++ b/examples/s2-parcel-example/src/App.js @@ -36,6 +36,10 @@ import { PickerItem, Provider, Row, + SideNav, + SideNavItem, + SideNavItemContent, + SideNavItemLink, SubmenuTrigger, TableBody, TableHeader, @@ -51,9 +55,12 @@ import { useListData, useTreeData } from '@react-spectrum/s2'; +import Delete from '@react-spectrum/s2/icons/Delete'; import Edit from '@react-spectrum/s2/icons/Edit'; +import File from '@react-spectrum/s2/icons/File'; import FileTxt from '@react-spectrum/s2/icons/FileText'; import Folder from '@react-spectrum/s2/icons/Folder'; +import {RouterProvider} from 'react-aria-components'; import Section from './components/Section'; import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; import {CardViewExample} from './components/CardViewExample'; @@ -218,6 +225,81 @@ function ReorderableTreeView() { ); } +let sideNavItems = [ + { + id: 1, + title: 'Documents', + type: 'directory', + children: [ + { + id: 2, + title: 'Project', + type: 'directory', + children: [ + {id: 3, title: 'Notes', type: 'file', href: '/notes'}, + {id: 4, title: 'Budget', type: 'file', href: '/budget'} + ] + } + ] + }, + { + id: 5, + title: 'Photos', + type: 'directory', + children: [ + {id: 6, title: 'Image 1', type: 'file', href: '/image-1'}, + {id: 7, title: 'Image 2', type: 'file', href: '/image-2'} + ] + } +]; + +// Wrap SideNav in a RouterProvider whose navigate only updates local state so +// clicking a link selects the item without actually navigating the page. +function SideNavExample() { + let [selectedRoute, setSelectedRoute] = useState('/notes'); + return ( + setSelectedRoute(href)}> + + {function renderItem(item) { + return ( + + + {item.href ? ( + + {item.type === 'directory' ? : } + {item.title} + + ) : ( + <> + {item.type === 'directory' ? : } + {item.title} + + )} + + + + Edit + + + + Delete + + + + {item.children && {renderItem}} + + ); + }} + + + ); +} + function App() { let [isLazyLoaded, setLazyLoaded] = useState(false); let [cardViewState, setCardViewState] = useState({ @@ -349,6 +431,7 @@ function App() { + {!isLazyLoaded && ( diff --git a/examples/s2-vite-project/src/App.tsx b/examples/s2-vite-project/src/App.tsx index 9c317800944..a2418c4ea23 100644 --- a/examples/s2-vite-project/src/App.tsx +++ b/examples/s2-vite-project/src/App.tsx @@ -34,6 +34,10 @@ import { PickerItem, Provider, Row, + SideNav, + SideNavItem, + SideNavItemContent, + SideNavItemLink, SubmenuTrigger, TableBody, TableHeader, @@ -48,9 +52,12 @@ import { useListData, useTreeData } from '@react-spectrum/s2'; +import Delete from '@react-spectrum/s2/icons/Delete'; import Edit from '@react-spectrum/s2/icons/Edit'; +import File from '@react-spectrum/s2/icons/File'; import FileTxt from '@react-spectrum/s2/icons/FileText'; import Folder from '@react-spectrum/s2/icons/Folder'; +import {RouterProvider} from 'react-aria-components'; import Section from './components/Section'; import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; import {CardViewExample} from './components/CardViewExample'; @@ -217,6 +224,89 @@ function ReorderableTreeView() { ); } +interface SideNavItemData { + id: number; + title: string; + type: 'directory' | 'file'; + href?: string; + children?: SideNavItemData[]; +} + +let sideNavItems: SideNavItemData[] = [ + { + id: 1, + title: 'Documents', + type: 'directory', + children: [ + { + id: 2, + title: 'Project', + type: 'directory', + children: [ + {id: 3, title: 'Notes', type: 'file', href: '/notes'}, + {id: 4, title: 'Budget', type: 'file', href: '/budget'} + ] + } + ] + }, + { + id: 5, + title: 'Photos', + type: 'directory', + children: [ + {id: 6, title: 'Image 1', type: 'file', href: '/image-1'}, + {id: 7, title: 'Image 2', type: 'file', href: '/image-2'} + ] + } +]; + +// Wrap SideNav in a RouterProvider whose navigate only updates local state so +// clicking a link selects the item without actually navigating the page. +function SideNavExample() { + let [selectedRoute, setSelectedRoute] = useState('/notes'); + return ( + setSelectedRoute(href)}> + + {function renderItem(item: SideNavItemData) { + return ( + + + {item.href ? ( + + {item.type === 'directory' ? : } + {item.title} + + ) : ( + <> + {item.type === 'directory' ? : } + {item.title} + + )} + + + + Edit + + + + Delete + + + + {item.children && {renderItem}} + + ); + }} + + + ); +} + function App() { let [isLazyLoaded, setLazyLoaded] = useState(false); let [cardViewState, setCardViewState] = useState({ @@ -344,6 +434,7 @@ function App() { + {!isLazyLoaded && ( diff --git a/examples/s2-webpack-5-example/src/App.js b/examples/s2-webpack-5-example/src/App.js index 3cfecfc5669..5027d8c8a71 100644 --- a/examples/s2-webpack-5-example/src/App.js +++ b/examples/s2-webpack-5-example/src/App.js @@ -36,6 +36,10 @@ import { PickerItem, Provider, Row, + SideNav, + SideNavItem, + SideNavItemContent, + SideNavItemLink, SubmenuTrigger, TableBody, TableHeader, @@ -51,9 +55,12 @@ import { useListData, useTreeData } from '@react-spectrum/s2'; +import Delete from '@react-spectrum/s2/icons/Delete'; import Edit from '@react-spectrum/s2/icons/Edit'; +import File from '@react-spectrum/s2/icons/File'; import FileTxt from '@react-spectrum/s2/icons/FileText'; import Folder from '@react-spectrum/s2/icons/Folder'; +import {RouterProvider} from 'react-aria-components'; import Section from './components/Section'; import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; import {CardViewExample} from './components/CardViewExample'; @@ -218,6 +225,81 @@ function ReorderableTreeView() { ); } +let sideNavItems = [ + { + id: 1, + title: 'Documents', + type: 'directory', + children: [ + { + id: 2, + title: 'Project', + type: 'directory', + children: [ + {id: 3, title: 'Notes', type: 'file', href: '/notes'}, + {id: 4, title: 'Budget', type: 'file', href: '/budget'} + ] + } + ] + }, + { + id: 5, + title: 'Photos', + type: 'directory', + children: [ + {id: 6, title: 'Image 1', type: 'file', href: '/image-1'}, + {id: 7, title: 'Image 2', type: 'file', href: '/image-2'} + ] + } +]; + +// Wrap SideNav in a RouterProvider whose navigate only updates local state so +// clicking a link selects the item without actually navigating the page. +function SideNavExample() { + let [selectedRoute, setSelectedRoute] = useState('/notes'); + return ( + setSelectedRoute(href)}> + + {function renderItem(item) { + return ( + + + {item.href ? ( + + {item.type === 'directory' ? : } + {item.title} + + ) : ( + <> + {item.type === 'directory' ? : } + {item.title} + + )} + + + + Edit + + + + Delete + + + + {item.children && {renderItem}} + + ); + }} + + + ); +} + function App() { let [isLazyLoaded, setLazyLoaded] = useState(false); let [cardViewState, setCardViewState] = useState({ @@ -349,6 +431,7 @@ function App() { + {!isLazyLoaded && ( diff --git a/examples/s2-webpack-5-typescript-example/src/App.tsx b/examples/s2-webpack-5-typescript-example/src/App.tsx index f06a7314668..7f2944443c9 100644 --- a/examples/s2-webpack-5-typescript-example/src/App.tsx +++ b/examples/s2-webpack-5-typescript-example/src/App.tsx @@ -19,6 +19,7 @@ import { Button, ButtonGroup, Cell, + Collection, Column, Divider, Heading, @@ -31,6 +32,10 @@ import { PickerItem, Provider, Row, + SideNav, + SideNavItem, + SideNavItemContent, + SideNavItemLink, SubmenuTrigger, TableBody, TableHeader, @@ -44,9 +49,12 @@ import { } from '@react-spectrum/s2'; import {CardViewExample} from './components/CardViewExample'; import {CollectionCardsExample} from './components/CollectionCardsExample'; +import Delete from '@react-spectrum/s2/icons/Delete'; import Edit from '@react-spectrum/s2/icons/Edit'; +import File from '@react-spectrum/s2/icons/File'; import FileTxt from '@react-spectrum/s2/icons/FileText'; import Folder from '@react-spectrum/s2/icons/Folder'; +import {RouterProvider} from 'react-aria-components'; import {LoadingState} from '@react-types/shared'; import React, {useState} from 'react'; import Section from './components/Section'; @@ -54,6 +62,89 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; const Lazy = React.lazy(() => import('./Lazy')); +interface SideNavItemData { + id: number; + title: string; + type: 'directory' | 'file'; + href?: string; + children?: SideNavItemData[]; +} + +let sideNavItems: SideNavItemData[] = [ + { + id: 1, + title: 'Documents', + type: 'directory', + children: [ + { + id: 2, + title: 'Project', + type: 'directory', + children: [ + {id: 3, title: 'Notes', type: 'file', href: '/notes'}, + {id: 4, title: 'Budget', type: 'file', href: '/budget'} + ] + } + ] + }, + { + id: 5, + title: 'Photos', + type: 'directory', + children: [ + {id: 6, title: 'Image 1', type: 'file', href: '/image-1'}, + {id: 7, title: 'Image 2', type: 'file', href: '/image-2'} + ] + } +]; + +// Wrap SideNav in a RouterProvider whose navigate only updates local state so +// clicking a link selects the item without actually navigating the page. +function SideNavExample() { + let [selectedRoute, setSelectedRoute] = useState('/notes'); + return ( + setSelectedRoute(href)}> + + {function renderItem(item: SideNavItemData) { + return ( + + + {item.href ? ( + + {item.type === 'directory' ? : } + {item.title} + + ) : ( + <> + {item.type === 'directory' ? : } + {item.title} + + )} + + + + Edit + + + + Delete + + + + {item.children && {renderItem}} + + ); + }} + + + ); +} + function App() { let [isLazyLoaded, setLazyLoaded] = useState(false); let [cardViewState, setCardViewState] = useState<{ @@ -263,6 +354,7 @@ function App() { + {!isLazyLoaded && ( From 4973fd56dd784dda7214b0f65574004cf27f4e61 Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Tue, 11 Aug 2026 15:04:58 +1000 Subject: [PATCH 2/3] turn on verdaccio --- .circleci/comment.js | 4 ++-- .circleci/config.yml | 3 --- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/.circleci/comment.js b/.circleci/comment.js index 597e7e3b8e4..1623c8cc8b5 100644 --- a/.circleci/comment.js +++ b/.circleci/comment.js @@ -10,7 +10,7 @@ async function run() { let pr; // If we aren't running on a PR commit, double check if this is a branch created for a fork. If so, we'll need to // comment the build link on the fork. - if (!process.env.CIRCLE_PULL_REQUEST) { + if (true) { try { const commit = await octokit.git.getCommit({ owner: 'adobe', @@ -51,7 +51,7 @@ async function run() { break; } } - } else if (!process.env.CIRCLE_PULL_REQUEST) { + } else if (true) { // If it isn't a PR commit, then we are on main. Create a comment for the test app and docs build await octokit.repos.createCommitComment({ owner: 'adobe', diff --git a/.circleci/config.yml b/.circleci/config.yml index 9c118a4cff4..a0842877f0b 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -1044,9 +1044,6 @@ workflows: branches: only: main - verdaccio: - filters: - branches: - only: main requires: - install - v-webpack-4: From 8457ccfc22541a588a44c75612e06b8c73b1d13c Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Tue, 11 Aug 2026 15:45:11 +1000 Subject: [PATCH 3/3] Revert "turn on verdaccio" This reverts commit 4973fd56dd784dda7214b0f65574004cf27f4e61. --- .circleci/comment.js | 4 ++-- .circleci/config.yml | 3 +++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/.circleci/comment.js b/.circleci/comment.js index 1623c8cc8b5..597e7e3b8e4 100644 --- a/.circleci/comment.js +++ b/.circleci/comment.js @@ -10,7 +10,7 @@ async function run() { let pr; // If we aren't running on a PR commit, double check if this is a branch created for a fork. If so, we'll need to // comment the build link on the fork. - if (true) { + if (!process.env.CIRCLE_PULL_REQUEST) { try { const commit = await octokit.git.getCommit({ owner: 'adobe', @@ -51,7 +51,7 @@ async function run() { break; } } - } else if (true) { + } else if (!process.env.CIRCLE_PULL_REQUEST) { // If it isn't a PR commit, then we are on main. Create a comment for the test app and docs build await octokit.repos.createCommitComment({ owner: 'adobe', diff --git a/.circleci/config.yml b/.circleci/config.yml index a0842877f0b..9c118a4cff4 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -1044,6 +1044,9 @@ workflows: branches: only: main - verdaccio: + filters: + branches: + only: main requires: - install - v-webpack-4: