Skip to content

Add React wrappers for OK FV components#3012

Draft
fredvisser wants to merge 5 commits into
mainfrom
users/fvisser/ok-fv-react-wrappers
Draft

Add React wrappers for OK FV components#3012
fredvisser wants to merge 5 commits into
mainfrom
users/fvisser/ok-fv-react-wrappers

Conversation

@fredvisser

@fredvisser fredvisser commented Jul 10, 2026

Copy link
Copy Markdown
Contributor

Pull Request

🤨 Rationale

Adds React entry points for existing OK FV web components so React consumers can use the same supported component surface as other framework wrappers.

👩‍💻 Implementation

  • Adds @lit/react wrappers for card, chip selector, context help, master-detail list and list item, split button and anchor, and summary panel/tile.
  • Re-exports each component tag and relevant public element/type APIs.
  • Maps the underlying custom events to typed React callback props where applicable.

🧪 Testing

  • npm run lint -w @ni/ok-react
  • npm run build -w @ni/ok-react

No automated runtime tests were added because this focused wrapper addition follows the existing ok-react package pattern, which does not currently provide a test harness.

✅ Checklist

  • I have determined no project documentation changes are needed.

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds React entry points in @ni/ok-react for existing OK FV web components, enabling React consumers to use the same component surface while preserving the underlying web-component implementation.

Changes:

  • Added React wrapper exports for FV card, chip selector, context help, master-detail list + item, split button (+ anchor), and summary panel (+ tile).
  • Re-exported component tags and relevant public APIs from @ni/ok-components.
  • Added typed React callback prop mappings for several underlying custom events.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
packages/react-workspace/ok-react/src/fv/card/index.ts Adds React wrapper entry point for ok-fv-card and re-exports appearance/interaction APIs.
packages/react-workspace/ok-react/src/fv/chip-selector/index.ts Adds React wrapper for ok-fv-chip-selector and maps the change custom event to a typed callback prop.
packages/react-workspace/ok-react/src/fv/context-help/index.ts Adds React wrapper entry point for ok-fv-context-help and re-exports severity type.
packages/react-workspace/ok-react/src/fv/master-detail-list/index.ts Adds React wrapper for ok-fv-master-detail-list and maps the change custom event to a typed callback prop.
packages/react-workspace/ok-react/src/fv/master-detail-list-item/index.ts Adds React wrapper entry point for ok-fv-master-detail-list-item.
packages/react-workspace/ok-react/src/fv/split-button/index.ts Adds React wrapper for ok-fv-split-button and maps trigger/toggle events to typed callback props.
packages/react-workspace/ok-react/src/fv/split-button-anchor/index.ts Adds React wrapper for ok-fv-split-button-anchor and maps trigger/toggle events to typed callback props.
packages/react-workspace/ok-react/src/fv/summary-panel/index.ts Adds React wrapper for ok-fv-summary-panel and maps the edit-items event to a typed callback prop.
packages/react-workspace/ok-react/src/fv/summary-panel-tile/index.ts Adds React wrapper entry point for ok-fv-summary-panel-tile and re-exports text-position API.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread packages/react-workspace/ok-react/src/fv/summary-panel/index.ts Outdated
Comment thread packages/react-workspace/ok-react/src/fv/split-button/index.ts Outdated
Comment thread packages/react-workspace/ok-react/src/fv/split-button-anchor/index.ts Outdated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants