refactor(storybook): reorganize navigation into 3-tier architecture#128
Merged
garrity-miepub merged 3 commits intomainfrom Mar 11, 2026
Merged
refactor(storybook): reorganize navigation into 3-tier architecture#128garrity-miepub merged 3 commits intomainfrom
garrity-miepub merged 3 commits intomainfrom
Conversation
Restructure all story files from a flat/inconsistent navigation into an Atlassian-inspired 3-tier hierarchy: Foundations (5 pages) Colors, Icons, Text, ThemeProvider, VisuallyHidden Components (9 subcategories, ~86 pages) Forms & Inputs (38) Images & Media (5) Layout & Structure (11) Loaders (3) Messaging (2) Navigation (6) Overlays & Layering (6) Status Indicators (3) Text & Data Display (12) Product (2 subcategories, ~39 pages) Feature Modules (14) Provider (25) Also adds a 404 redirect in .storybook/manager.ts that sends old bookmarked story URLs to the Introduction page.
There was a problem hiding this comment.
Pull request overview
This PR refactors Storybook’s navigation by re-titling stories into a consistent 3-tier hierarchy (Foundations / Components / Product) and adds a manager-side fallback redirect for missing story routes to send users to the Introduction docs page.
Changes:
- Updated
titlefields across many*.stories.tsxfiles to match the new “Components/…” and “Product/…” taxonomy. - Normalized previously inconsistent top-level groupings (e.g., “Inputs & Controls”, “Feedback & Overlays”, “Provider”, “Examples”) into the new hierarchy.
- Added a Storybook manager addon intended to redirect missing stories to the Introduction page.
Reviewed changes
Copilot reviewed 126 out of 126 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/WebsiteInput/WebsiteInput.stories.tsx | Update Storybook title to new hierarchy |
| src/components/WebChartReportViewer/WebChartReportViewer.stories.tsx | Update Storybook title to new hierarchy |
| src/components/Tooltip/Tooltip.stories.tsx | Update Storybook title to new hierarchy |
| src/components/Toast/Toast.stories.tsx | Update Storybook title to new hierarchy |
| src/components/Timeline/Timeline.stories.tsx | Update Storybook title to new hierarchy |
| src/components/Textarea/Textarea.stories.tsx | Update Storybook title to new hierarchy |
| src/components/Tabs/Tabs.stories.tsx | Update Storybook title to new hierarchy |
| src/components/Table/Table.stories.tsx | Update Storybook title to new hierarchy |
| src/components/Switch/Switch.stories.tsx | Update Storybook title to new hierarchy |
| src/components/StripeBadge/StripeBadge.stories.tsx | Update Storybook title to new hierarchy |
| src/components/StepIndicator/StepIndicator.stories.tsx | Update Storybook title to new hierarchy |
| src/components/Spinner/Spinner.stories.tsx | Update Storybook title to new hierarchy |
| src/components/Slider/Slider.stories.tsx | Update Storybook title to new hierarchy |
| src/components/Skeleton/Skeleton.stories.tsx | Update Storybook title to new hierarchy |
| src/components/SiteHeader/SiteHeader.stories.tsx | Update Storybook title to new hierarchy |
| src/components/SiteFooter/SiteFooter.stories.tsx | Update Storybook title to new hierarchy |
| src/components/Sidebar/Sidebar.stories.tsx | Update Storybook title to new hierarchy |
| src/components/SetupServiceModal/SetupServiceModal.stories.tsx | Update Storybook title to new hierarchy |
| src/components/ServiceShippingSettings/ServiceShippingSettings.stories.tsx | Update Storybook title to new hierarchy |
| src/components/ServicePricingManager/ServicePricingManager.stories.tsx | Update Storybook title to new hierarchy |
| src/components/ServicePicker/ServicePicker.stories.tsx | Update Storybook title to new hierarchy |
| src/components/ServiceGrid/ServiceGrid.stories.tsx | Update Storybook title to new hierarchy |
| src/components/ServiceGeneralSettings/ServiceGeneralSettings.stories.tsx | Update Storybook title to new hierarchy |
| src/components/ServiceCard/ServiceCard.stories.tsx | Update Storybook title to new hierarchy |
| src/components/ServiceBadge/ServiceBadge.stories.tsx | Update Storybook title to new hierarchy |
| src/components/ServiceAccordion/ServiceAccordion.stories.tsx | Update Storybook title to new hierarchy |
| src/components/Select/Select.stories.tsx | Update Storybook title to new hierarchy |
| src/components/SchedulePicker/SchedulePicker.stories.tsx | Update Storybook title to new hierarchy |
| src/components/ScheduleCalendar/ScheduleCalendar.stories.tsx | Update Storybook title to new hierarchy |
| src/components/SSOConfigForm/SSOConfigForm.stories.tsx | Update Storybook title to new hierarchy |
| src/components/ResultsEntryForm/ResultsEntryForm.stories.tsx | Update Storybook title to new hierarchy |
| src/components/ReportDashboard/ReportDashboard.stories.tsx | Update Storybook title to new hierarchy |
| src/components/RejectionModal/RejectionModal.stories.tsx | Update Storybook title to new hierarchy |
| src/components/RecurringServiceCard/RecurringServiceCard.stories.tsx | Update Storybook title to new hierarchy |
| src/components/RecordButton/RecordButton.stories.tsx | Update Storybook title to new hierarchy |
| src/components/Radio/Radio.stories.tsx | Update Storybook title to new hierarchy |
| src/components/QuickLinksCard/QuickLinksCard.stories.tsx | Update Storybook title to new hierarchy |
| src/components/QuickAction/QuickAction.stories.tsx | Update Storybook title to new hierarchy |
| src/components/ProviderUsersTable/ProviderUsersTable.stories.tsx | Update Storybook title to new hierarchy |
| src/components/ProviderSettings/ProviderSettings.stories.tsx | Update Storybook title to new hierarchy |
| src/components/ProviderSelector/ProviderSelector.stories.tsx | Update Storybook title to new hierarchy |
| src/components/ProviderSearchFilters/ProviderSearchFilters.stories.tsx | Update Storybook title to new hierarchy |
| src/components/ProviderSearchBar/ProviderSearchBar.stories.tsx | Update Storybook title to new hierarchy |
| src/components/ProviderOverview/ProviderOverview.stories.tsx | Update Storybook title to new hierarchy |
| src/components/ProviderDetailHeader/ProviderDetailHeader.stories.tsx | Update Storybook title to new hierarchy |
| src/components/ProviderCard/ProviderCard.stories.tsx | Update Storybook title to new hierarchy |
| src/components/Progress/Progress.stories.tsx | Update Storybook title to new hierarchy |
| src/components/ProductVersion/ProductVersion.stories.tsx | Update Storybook title to new hierarchy |
| src/components/PhoneInput/PhoneInputGroup.stories.tsx | Update Storybook title to new hierarchy |
| src/components/PhoneInput/PhoneInput.stories.tsx | Update Storybook title to new hierarchy |
| src/components/PermissionsEditor/PermissionsEditor.stories.tsx | Update Storybook title to new hierarchy |
| src/components/PendingClaimsTable/PendingClaimsTable.stories.tsx | Update Storybook title to new hierarchy |
| src/components/PaymentMethod/PaymentMethod.stories.tsx | Update Storybook title to new hierarchy |
| src/components/PaymentHistoryTable/PaymentHistoryTable.stories.tsx | Update Storybook title to new hierarchy |
| src/components/PatientHeader/PatientHeader.stories.tsx | Update Storybook title to new hierarchy |
| src/components/Pagination/Pagination.stories.tsx | Update Storybook title to new hierarchy |
| src/components/PageHeader/PageHeader.stories.tsx | Update Storybook title to new hierarchy |
| src/components/OrderSidebar/OrderSidebar.stories.tsx | Update Storybook title to new hierarchy |
| src/components/OrderLookupForm/OrderLookupForm.stories.tsx | Update Storybook title to new hierarchy |
| src/components/OrderList/OrderList.stories.tsx | Update Storybook title to new hierarchy |
| src/components/OrderConfirmationWizard/OrderConfirmationWizard.stories.tsx | Update Storybook title to new hierarchy |
| src/components/OrderCard/OrderCard.stories.tsx | Update Storybook title to new hierarchy |
| src/components/OnboardingWizard/OnboardingWizard.stories.tsx | Update Storybook title to new hierarchy |
| src/components/NotificationCenter/NotificationCenter.stories.tsx | Update Storybook title to new hierarchy |
| src/components/Modal/Modal.stories.tsx | Update Storybook title to new hierarchy |
| src/components/Messaging/Messaging.stories.tsx | Update Storybook title to new hierarchy |
| src/components/LoadingPage/LoadingPage.stories.tsx | Update Storybook title to new hierarchy |
| src/components/LanguageSelector/LanguageSelector.stories.tsx | Update Storybook title to new hierarchy |
| src/components/InvoiceView/InvoiceView.stories.tsx | Update Storybook title to new hierarchy |
| src/components/InvoicePaymentPage/InvoicePaymentPage.stories.tsx | Update Storybook title to new hierarchy |
| src/components/InvoiceList/InvoiceList.stories.tsx | Update Storybook title to new hierarchy |
| src/components/InviteUserModal/InviteUserModal.stories.tsx | Update Storybook title to new hierarchy |
| src/components/InventoryManager/InventoryManager.stories.tsx | Update Storybook title to new hierarchy |
| src/components/Input/Input.stories.tsx | Update Storybook title to new hierarchy |
| src/components/HelpSupportPanel/HelpSupportPanel.stories.tsx | Update Storybook title to new hierarchy |
| src/components/HRISProviderSelector/HRISProviderSelector.stories.tsx | Update Storybook title to new hierarchy |
| src/components/FileManager/FileManager.stories.tsx | Update Storybook title to new hierarchy |
| src/components/ErrorPage/ErrorPage.stories.tsx | Update Storybook title to new hierarchy |
| src/components/EmployerView/EmployerView.stories.tsx | Update Storybook title to new hierarchy |
| src/components/EmployerServiceModal/EmployerServiceModal.stories.tsx | Update Storybook title to new hierarchy |
| src/components/EmployerPricingCard/EmployerPricingCard.stories.tsx | Update Storybook title to new hierarchy |
| src/components/EmployerList/EmployerList.stories.tsx | Update Storybook title to new hierarchy |
| src/components/EmployerContactCard/EmployerContactCard.stories.tsx | Update Storybook title to new hierarchy |
| src/components/EmployeeProfile/EmployeeProfile.stories.tsx | Update Storybook title to new hierarchy |
| src/components/EmployeeForm/EmployeeForm.stories.tsx | Update Storybook title to new hierarchy |
| src/components/EditUserRoleModal/EditUserRoleModal.stories.tsx | Update Storybook title to new hierarchy |
| src/components/DropzoneOverlay/DropzoneOverlay.stories.tsx | Update Storybook title to new hierarchy |
| src/components/Dropdown/Dropdown.stories.tsx | Update Storybook title to new hierarchy |
| src/components/DocumentScanner/DocumentScanner.stories.tsx | Update Storybook title to new hierarchy |
| src/components/DateRangePicker/DateRangePicker.stories.tsx | Update Storybook title to new hierarchy |
| src/components/DateInput/DateInput.stories.tsx | Update Storybook title to new hierarchy |
| src/components/DashboardWidget/DashboardWidget.stories.tsx | Update Storybook title to new hierarchy |
| src/components/Dashboard/DashboardWidgets.stories.tsx | Update Storybook title to new hierarchy |
| src/components/Dashboard/Dashboard.stories.tsx | Update Storybook title to new hierarchy |
| src/components/CreateReferralModal/CreateReferralModal.stories.tsx | Update Storybook title to new hierarchy |
| src/components/CreateInvoiceModal/CreateInvoiceModal.stories.tsx | Update Storybook title to new hierarchy |
| src/components/CountryCodeDropdown/CountryCodeDropdown.stories.tsx | Update Storybook title to new hierarchy |
| src/components/CountBadge/CountBadge.stories.tsx | Update Storybook title to new hierarchy |
| src/components/CookieConsent/CookieConsent.stories.tsx | Update Storybook title to new hierarchy |
| src/components/ConnectionStatus/ConnectionStatus.stories.tsx | Update Storybook title to new hierarchy |
| src/components/CommandPalette/CommandPalette.stories.tsx | Update Storybook title to new hierarchy |
| src/components/ClaimProviderForm/ClaimProviderForm.stories.tsx | Update Storybook title to new hierarchy |
| src/components/CheckrIntegration/CheckrIntegration.stories.tsx | Update Storybook title to new hierarchy |
| src/components/Checkbox/Checkbox.stories.tsx | Update Storybook title to new hierarchy |
| src/components/Card/Card.stories.tsx | Update Storybook title to new hierarchy |
| src/components/CSVColumnMapper/CSVColumnMapper.stories.tsx | Update Storybook title to new hierarchy |
| src/components/Button/Button.stories.tsx | Update Storybook title to new hierarchy |
| src/components/BusinessHoursEditor/BusinessHoursEditor.stories.tsx | Update Storybook title to new hierarchy |
| src/components/BusinessHours/BusinessHours.stories.tsx | Update Storybook title to new hierarchy |
| src/components/Breadcrumb/Breadcrumb.stories.tsx | Update Storybook title to new hierarchy |
| src/components/BookingDialog/BookingDialog.stories.tsx | Update Storybook title to new hierarchy |
| src/components/Badge/Badge.stories.tsx | Update Storybook title to new hierarchy |
| src/components/Avatar/Avatar.stories.tsx | Update Storybook title to new hierarchy |
| src/components/AuthDialog/AuthDialog.stories.tsx | Update Storybook title to new hierarchy |
| src/components/AudioRecorder/AudioRecorder.stories.tsx | Update Storybook title to new hierarchy |
| src/components/AudioPlayer/AudioPlayer.stories.tsx | Update Storybook title to new hierarchy |
| src/components/AppHeader/AppHeader.stories.tsx | Update Storybook title to new hierarchy |
| src/components/Alert/Alert.stories.tsx | Update Storybook title to new hierarchy |
| src/components/Address/AddressForm.stories.tsx | Update Storybook title to new hierarchy |
| src/components/Address/Address.stories.tsx | Update Storybook title to new hierarchy |
| src/components/AdditionalFields/AdditionalFields.stories.tsx | Update Storybook title to new hierarchy |
| src/components/AddContactModal/AddContactModal.stories.tsx | Update Storybook title to new hierarchy |
| src/components/AI/AI.stories.tsx | Update Storybook title to new hierarchy |
| src/components/AGGrid/AGGrid.stories.tsx | Update Storybook title to new hierarchy |
| src/components/AGGrid/AGGrid.enhanced.stories.tsx | Update Storybook title to new hierarchy |
| .storybook/manager.ts | Add manager-side redirect behavior for missing stories |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…ture The Storybook nav restructuring (3-tier architecture) changed all story titles from flat categories to the new Components/Subcategory/Name format. The Playwright visual regression tests still referenced the old story IDs, causing all 19 tests (except Text) to fail with: Story '<old-id>' failed to render - check if the story exists Updated all 19 story ID references in components.spec.ts: - inputs-controls-button -> components-forms-inputs-button - inputs-controls-input -> components-forms-inputs-input - inputs-controls-checkbox -> components-forms-inputs-checkbox - inputs-controls-switch -> components-forms-inputs-switch - inputs-controls-select -> components-forms-inputs-select - data-display-avatar -> components-text-data-display-avatar - data-display-badge -> components-text-data-display-badge - data-display-table -> components-layout-structure-table - data-display-spinner -> components-loaders-spinner - data-display-progress -> components-loaders-progress - data-display-aggrid -> components-text-data-display-aggrid - layout-structure-card -> components-layout-structure-card - navigation-breadcrumb -> components-navigation-breadcrumb - navigation-tabs -> components-layout-structure-tabs - navigation-commandpalette -> components-navigation-commandpalette - feedback-overlays-toast -> components-messaging-toast - media-device-audioplayer -> components-images-media-audioplayer The Text story (foundations-text--all-variants) was already correct since Foundations/Text was unchanged in the restructuring.
Deploying ui with
|
| Latest commit: |
fafd8c5
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://e2374f15.ui-6d0.pages.dev |
| Branch Preview URL: | https://updates-nav-architecture.ui-6d0.pages.dev |
Address Copilot review comments on PR #128: 1. Replace fixed setTimeout(1500) with a polling approach that checks every 200ms up to 5s max. This avoids false redirects on slower devices where getCurrentStoryData() may still be null while Storybook is loading a valid story. 2. Guard fallback selection with api.getData() check before calling selectStory, preventing redirect loops or stuck states if the fallback story ID ever changes or doesn't exist.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 127 out of 127 changed files in this pull request and generated no new comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
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
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.
nav-architure-updates.mov
Restructure all story files from a flat/inconsistent navigation into an Atlassian-inspired 3-tier hierarchy:
Foundations (5 pages)
Colors, Icons, Text, ThemeProvider, VisuallyHidden
Components (9 subcategories, ~86 pages)
Forms & Inputs (38)
Images & Media (5)
Layout & Structure (11)
Loaders (3)
Messaging (2)
Navigation (6)
Overlays & Layering (6)
Status Indicators (3)
Text & Data Display (12)
Product (2 subcategories, ~39 pages)
Feature Modules (14)
Provider (25)
Also adds a 404 redirect in .storybook/manager.ts that sends old bookmarked story URLs to the Introduction page.