feat(structure): add views and overview support to list panes #11075
+535
−43
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Implements support for custom views and overview components in Structure Builder list panes:
1. **List Views** - Add `.views()` method to ListBuilder enabling custom view components:
- Extended ListBuilder with views() method accepting array of ViewBuilder objects
- Created ListPaneContext and useListPane hook for state management
- Added ListHeaderTabs component for view tab navigation
- Modified ListPaneContent to switch between default list and custom views
- View state persists in URL via ?view=viewId parameter
2. **List Overview** - Add `.overview()` method to ListBuilder for default child pane:
- Extended ListBuilder with overview() method accepting Component/ComponentBuilder/ComponentInput
- Modified createResolvedPaneNodeStream.ts to create implicit child pane when list has overview
- Created createOverviewChildResolver() for navigation between overview and list items
- Overview appears in center pane by default when no item selected
- Selecting a list item navigates to that item's child pane
Usage:
```typescript
S.list()
.title('My List')
.items([...])
.views([
S.view.component(CustomView).id('custom').title('Custom View')
])
.overview(
S.component(OverviewComponent).id('overview')
)
```
Files modified:
- packages/sanity/src/structure/structureBuilder/List.ts
- packages/sanity/src/structure/types.ts
- packages/sanity/src/structure/panes/list/ListPane.tsx
- packages/sanity/src/structure/panes/list/ListPaneContent.tsx
- packages/sanity/src/structure/panes/list/ListPaneHeader.tsx
- packages/sanity/src/structure/structureResolvers/createResolvedPaneNodeStream.ts
Files created:
- packages/sanity/src/structure/panes/list/ListPaneContext.ts
- packages/sanity/src/structure/panes/list/useListPane.ts
- packages/sanity/src/structure/panes/list/ListHeaderTabs.tsx
- dev/test-studio/components/listViews/CustomListView.tsx
- dev/test-studio/components/listViews/ListOverview.tsx
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <[email protected]>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
3 Skipped Deployments
|
Contributor
|
No changes to documentation |
Contributor
🧪 E2E Preview environment🔑 Environment Variables for Local TestingThis is the preview URL for the E2E tests: https://e2e-studio-10mqumebw.sanity.dev To run the E2E tests locally, you can use the following environment variables, then run 💬 Remember to build the project first with |
Contributor
🧪 E2E Preview environmentWaiting for preview deployment to finish… |
Contributor
📊 Playwright Test ReportThis report contains test results, including videos of failing tests. |
Contributor
📊 Playwright Test ReportWaiting for E2E tests to finish… |
Contributor
⚡️ Editor Performance ReportDeploying studio and running performance tests… |
1 similar comment
Contributor
⚡️ Editor Performance ReportDeploying studio and running performance tests… |
Contributor
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR implements support for custom views and overview components in Structure Builder list panes, enabling developers to create more flexible and customizable list experiences in Sanity Studio.
Features
1. List Views
Add
.views()method toListBuilderenabling custom view components alongside the default list view:Implementation:
ListBuilderwithviews()method accepting array ofViewBuilderobjectsListPaneContextanduseListPanehook for state managementListHeaderTabscomponent for view tab navigationListPaneContentto switch between default list and custom views?view=viewIdparameter2. List Overview
Add
.overview()method toListBuilderfor displaying a default component in the center pane when no list item is selected:Implementation:
ListBuilderwithoverview()method acceptingComponent/ComponentBuilder/ComponentInputcreateResolvedPaneNodeStream.tsto create implicit child pane when list has overviewcreateOverviewChildResolver()for navigation between overview and list itemsFiles Modified
packages/sanity/src/structure/structureBuilder/List.tspackages/sanity/src/structure/types.tspackages/sanity/src/structure/panes/list/ListPane.tsxpackages/sanity/src/structure/panes/list/ListPaneContent.tsxpackages/sanity/src/structure/panes/list/ListPaneHeader.tsxpackages/sanity/src/structure/structureResolvers/createResolvedPaneNodeStream.tsFiles Created
packages/sanity/src/structure/panes/list/ListPaneContext.tspackages/sanity/src/structure/panes/list/useListPane.tspackages/sanity/src/structure/panes/list/ListHeaderTabs.tsxdev/test-studio/components/listViews/CustomListView.tsxdev/test-studio/components/listViews/ListOverview.tsxTesting
Test examples have been added to
dev/test-studio/structure/resolveStructure.ts:Design Decisions
Following Established Patterns
DocumentBuilder/DocumentPanepatternsDocumentHeaderTabspatternsComponentBuilderpatterns__edit__)Overview as Sibling Pane
The overview renders as a separate pane in the center (not inside the list pane), which:
🤖 Generated with Claude Code