feat: add new subscribe option for form

[joshunrau]

Summary by CodeRabbit

• New Features

  • Form now supports an optional subscription capability to react to specific value changes and programmatically update other fields.
  • Enables dynamic behaviors like debounced filtering of select options based on a search input.

• Documentation

  • Added a new example demonstrating subscribe-driven, debounced option filtering and validation within the form.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Adds a subscribe mechanism to Form to trigger on value-derived changes via a selector and onChange handler. Introduces a new Storybook story demonstrating debounced option filtering based on a subscribed searchTerm, with validation and controlled select reset behavior. Existing logic remains unchanged aside from the new subscription hook.

Changes

Cohort / File(s)	Summary
Form subscribe API src/components/Form/Form.tsx	Adds optional subscribe prop with { selector, onChange }. Hooks a useEffect to call onChange(values, setValues) when selector(values) output changes. No other form logic modified.
Storybook: subscribe demo src/components/Form/Form.stories.tsx	Adds WithSubscribe story. Implements debounced (500ms) filtering of default options via filterObject based on searchTerm. Uses subscribe with selector: values => values.searchTerm and onChange: handleChange. Ensures selected option validity; includes zod validation and JSON alert on submit.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as User
  participant S as Story (WithSubscribe)
  participant F as Form
  participant Sub as subscribe { selector,onChange }
  participant ST as setValues

  U->>S: Type in searchTerm
  S->>F: Update form values (searchTerm)
  rect rgba(235,245,255,0.6)
    note right of F: useEffect watches selector(values)
    F->>Sub: selector(values)
    alt selector output changed
      F->>Sub: onChange(values, setValues)
      note right of Sub: Debounce 500ms in story
      Sub-->>ST: setValues(v => {...filtered options...})
    else no change
      F-->>F: No-op
    end
  end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

A whisper of change, a subtle subscribe,
Selector awakens, the values imbibe.
Debounce the chatter, filter the flow,
Options align with the searchTerm’s glow.
Stories now tell how forms keep pace—
Listening softly, updating with grace.

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

• Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
• Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 06faf57 and 1521cc4.

📒 Files selected for processing (2)

• src/components/Form/Form.stories.tsx (2 hunks)
• src/components/Form/Form.tsx (3 hunks)

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch dynamic-field-change

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🎉 This PR is included in version 4.8.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀