Search 3.0: add Storybook stories for feature-selector components (SEARCH-179)

[Copilot]

Fixes SEARCH-179

Why

No user-visible change. Designers and reviewers of the Search 3.0 dashboard can now demo the feature-selector UI — plan-gating, badge variants, and the dirty / saving / disabled save-button states — directly in Jetpack's Storybook without booting WordPress. This keeps visual regression checks and design review in the loop for the components shipped in #48500.

Proposed changes

• Add stories for <ExperienceOption> (Packages/Search/FeatureSelector/ExperienceOption) covering each experience (embedded, overlay, inline, off), selected vs unselected, and the disabled state with upgrade tooltip.
• Add stories for <FeatureSelector> (Packages/Search/FeatureSelector) covering clean (Save aria-disabled), dirty (Save enabled), saving (isBusy spinner), classic-only-plan (Embedded + Overlay disabled), and each experience as the active row.
• Wrap stories in a RegistryProvider with a fake store seeded with jetpackSettings and sitePlan, mirroring the existing test fixtures.
• Extend the search-dashboard-modules Vite plugin in Storybook to resolve bare store and store/ imports (in addition to the existing components/ handling) so the components render without module resolution errors.
• Add a small dummy.js placeholder in src/dashboard/ to back the Vite plugin's path resolution.

Related product discussion/links

• Linear: SEARCH-179 (companion to RSM-2116)
• Components shipped in Search 3.0: dashboard feature-selection UI (RSM-2116) #48500

Does this pull request change what data or activity we track or use?

No.

Testing instructions

• From the repo root, build the Storybook deps and start it: pnpm jetpack build js-packages/storybook (or run an existing Storybook build for the monorepo), then pnpm --filter @automattic/jetpack-storybook storybook.
• Open Storybook in the browser and navigate to Packages → Search → FeatureSelector.
  • Confirm ExperienceOption renders one row per story (Embedded, Overlay, Inline, Off), in selected and unselected variants, and that the Disabled story shows the upgrade tooltip on hover.
  • Confirm FeatureSelector renders the full form with the documented states reachable as separate stories: Clean (Save aria-disabled), Dirty (Save enabled), Saving (spinner via isBusy), ClassicOnlyPlan (Embedded + Overlay disabled), and each experience as the active row.
• Verify there are no console errors and that WPDS tokens (--wpds-* custom properties from @wordpress/theme) load correctly — text colours, spacing, and badge styles should all look right.

Original prompt

Issue Title: Search dashboard feature selector: Storybook stories
Issue Description: Companion to RSM-2116 (PR #48500). The new dashboard components ship without Storybook coverage; this issue tracks adding them.

Why

The Search package already publishes one story (Packages/Search/RecordMeter/NoticeBox) under the Jetpack monorepo's Storybook at projects/js-packages/storybook/. Adding stories for the new feature-selector components keeps designers, reviewers, and visual regression checks in the loop without booting WordPress, and gives us a place to demo plan-gating, badge variants, and the dirty / saving / disabled save-button states in isolation.

Components to cover

All three are added in PR #48500 and live in projects/packages/search/src/dashboard/components/:

1. <ExperienceOption> — dashboard/components/feature-selector/experience-option.jsx
   • Story title: Packages/Search/FeatureSelector/ExperienceOption
   • One row in isolation. Args: experience ('embedded' | 'overlay' | 'classic' | 'off'), disabled.
   • Demo states: each of the four experiences, selected vs unselected, disabled (with the upgrade tooltip).
2. <FeatureSelector> — dashboard/components/feature-selector/index.jsx
   • Story title: Packages/Search/FeatureSelector
   • Full form. Demo states: clean (Save aria-disabled), dirty (Save enabled), saving (isBusy), classic-only-plan (Embedded + Overlay disabled), each experience as the active row.

The components subscribe to the dashboard's redux store, so the stories will need a RegistryProvider wrapper that registers a fake store seeded with jetpackSettings (and sitePlan for the plan-gating story). The existing test files at projects/packages/search/tests/js/dashboard/feature-selector/ show the exact shape of that wrapper and the seed args for each state.

Acceptance

• THESE STORIES MUST BE ADDED TO THE JETPACK REPO
• All three story files render under Jetpack > Packages > Search in Storybook with no console errors.
• Each component's documented states are reachable via Storybook controls / separate stories.
• WPDS tokens load correctly (the components rely on --wpds-* custom properties from @wordpress/theme).
• Optional: snapshot / visual-regression coverage if the storybook config supports it.
  Fixes https://linear.app/a8c/issue/SEARCH-179/search-dashboard-feature-selector-storybook-stories
  Branch Name should include the identifier "SEARCH-179"

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ Add a "[Status]" label (In Progress, Needs Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

Follow this PR Review Process:

1. Ensure all required checks appearing at the bottom of this PR are passing.
2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
3. You can use GitHub's Reviewers functionality to request a review.
4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

[github-actions]

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

• To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack), and enable the copilot/rsm-2116-add-storybook-stories branch.
• To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack copilot/rsm-2116-add-storybook-stories

Interested in more tips and information?

• In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
• Read more about our development workflow here: PCYsg-eg0-p2
• Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

[adamwoodnz]

Review depth: standard (391 lines, 2 projects)

Summary

Adds Storybook coverage for <ExperienceOption> and <FeatureSelector>, extends the search-dashboard-modules Vite plugin to resolve bare store/store/* imports (in addition to existing components/*), and adds a placeholder dummy.js the plugin needs to anchor relative resolution.

Findings

Convention

1. [suggestion] — Changelog type is changed, but the precedent for the only other Storybook-only entry in this package was Added:

   ### Added
   - Added stories for the NoticeBox component [#26367]
   

   These are net-new story files, so Type: added is the more accurate classification.
   https://github.com/Automattic/jetpack/blob/5e8e407cbc/projects/packages/search/changelog/add-storybook-stories-search-179#L1-L4

Code quality

2. [suggestion] — In experience-option.stories.jsx, only experience and disabled are declared in argTypes. The pendingExperience and activeExperience args drive the seeded store state but aren't exposed in the Storybook controls panel — so a reviewer can't toggle "selected" / "active" / "unselected" states without editing the file. Either add controls for them, or drop the Template-args pattern and use plain function stories like feature-selector.stories.jsx already does. Mixing the two muddies what the controls actually do.
   https://github.com/Automattic/jetpack/blob/5e8e407cbc/projects/packages/search/src/dashboard/components/feature-selector/stories/experience-option.stories.jsx#L19-L52

3. [suggestion] — createStoreWithSettings is duplicated across the two new story files (and again in the existing test fixtures at tests/js/dashboard/feature-selector/). A tiny shared decorator (e.g., decorators/with-search-store.jsx) would let the next story skip this boilerplate and put the seed shape in one place if the store schema evolves. Not blocking — fine to defer.
   https://github.com/Automattic/jetpack/blob/5e8e407cbc/projects/packages/search/src/dashboard/components/feature-selector/stories/feature-selector.stories.jsx#L21-L34

4. [suggestion] — The story comment "Embedded experience (default - shows RECOMMENDED badge)" is slightly misleading: the RECOMMENDED badge is keyed off experience === EMBEDDED and is always present on that row regardless of selection/active state. With pendingExperience: null, activeExperience: null and module_active/instant_search_enabled both true, getActiveExperience derives to 'overlay', so the Embedded row in this story renders unselected/inactive. Consider clarifying the comment to "Default — Embedded row in its unselected/inactive baseline; RECOMMENDED badge always shows on Embedded".
   https://github.com/Automattic/jetpack/blob/5e8e407cbc/projects/packages/search/src/dashboard/components/feature-selector/stories/experience-option.stories.jsx#L55-L62

5. [suggestion] — The search-dashboard-modules plugin now ORs three id-shape checks. Easier to scan and extend later as:

   const handled = id.startsWith( 'components/' ) || id === 'store' || id.startsWith( 'store/' );
   if ( handled && importer?.includes( '/search/src/dashboard/' ) ) { … }

   Or as an array of prefixes. Not blocking. Worth noting that on trunk the referenced dummy.js didn't actually exist — the plugin was unexercised until this PR — so this is the first time the path is hit in practice; the new file lands correctly alongside the matching imports.
   https://github.com/Automattic/jetpack/blob/5e8e407cbc/projects/js-packages/storybook/storybook/main.js#L82-L101

Other checks

Security, performance, backward compatibility, translations, a11y, RTL, data/privacy, cross-project impact: all clear (devtools-only changes; no public API, no user-facing strings, no DB or network access).

Verdict

Minor issues — can merge after addressing. No blockers. Worth taking #1 (changelog type) before merge; the rest are stylistic suggestions you can take or leave.

---

Reviewed 5 files, 391 lines changed.

[jp-launch-control]

Code Coverage Summary

1 file is newly checked for coverage.

File	Coverage
projects/packages/search/src/dashboard/dummy.js	0/0 (—%) 🤷

Full summary · PHP report · JS report