From 32dc35f0242ef4872395dc43bf7645afc059ffa5 Mon Sep 17 00:00:00 2001 From: Fred Visser <1458528+fredvisser@users.noreply.github.com> Date: Fri, 10 Jul 2026 11:08:55 -0400 Subject: [PATCH 1/4] Add OK React component wrappers --- .../ok-react/src/fv/card/index.ts | 12 ++++++++ .../ok-react/src/fv/chip-selector/index.ts | 15 ++++++++++ .../ok-react/src/fv/context-help/index.ts | 9 ++++++ .../src/fv/master-detail-list-item/index.ts | 11 +++++++ .../src/fv/master-detail-list/index.ts | 19 ++++++++++++ .../src/fv/split-button-anchor/index.ts | 30 +++++++++++++++++++ .../ok-react/src/fv/split-button/index.ts | 27 +++++++++++++++++ .../src/fv/summary-panel-tile/index.ts | 12 ++++++++ .../ok-react/src/fv/summary-panel/index.ts | 15 ++++++++++ 9 files changed, 150 insertions(+) create mode 100644 packages/react-workspace/ok-react/src/fv/card/index.ts create mode 100644 packages/react-workspace/ok-react/src/fv/chip-selector/index.ts create mode 100644 packages/react-workspace/ok-react/src/fv/context-help/index.ts create mode 100644 packages/react-workspace/ok-react/src/fv/master-detail-list-item/index.ts create mode 100644 packages/react-workspace/ok-react/src/fv/master-detail-list/index.ts create mode 100644 packages/react-workspace/ok-react/src/fv/split-button-anchor/index.ts create mode 100644 packages/react-workspace/ok-react/src/fv/split-button/index.ts create mode 100644 packages/react-workspace/ok-react/src/fv/summary-panel-tile/index.ts create mode 100644 packages/react-workspace/ok-react/src/fv/summary-panel/index.ts diff --git a/packages/react-workspace/ok-react/src/fv/card/index.ts b/packages/react-workspace/ok-react/src/fv/card/index.ts new file mode 100644 index 0000000000..4c6efaf142 --- /dev/null +++ b/packages/react-workspace/ok-react/src/fv/card/index.ts @@ -0,0 +1,12 @@ +'use client'; + +import { FvCard, fvCardTag } from '@ni/ok-components/dist/esm/fv/card'; +import { + FvCardAppearance, + FvCardInteractionMode +} from '@ni/ok-components/dist/esm/fv/card/types'; +import { wrap } from '../../utilities/react-wrapper'; + +export { fvCardTag }; +export { type FvCard, FvCardAppearance, FvCardInteractionMode }; +export const OkFvCard = wrap(FvCard); \ No newline at end of file diff --git a/packages/react-workspace/ok-react/src/fv/chip-selector/index.ts b/packages/react-workspace/ok-react/src/fv/chip-selector/index.ts new file mode 100644 index 0000000000..1806b6d8ff --- /dev/null +++ b/packages/react-workspace/ok-react/src/fv/chip-selector/index.ts @@ -0,0 +1,15 @@ +'use client'; + +import { FvChipSelector, fvChipSelectorTag } from '@ni/ok-components/dist/esm/fv/chip-selector'; +import { wrap, type EventName } from '../../utilities/react-wrapper'; + +export { fvChipSelectorTag }; +export { type FvChipSelector }; +export const OkFvChipSelector = wrap(FvChipSelector, { + events: { + onChange: 'change' as EventName, + } +}); +export interface FvChipSelectorChangeEvent extends CustomEvent<{ selectedValues: string[] }> { + target: FvChipSelector; +} \ No newline at end of file diff --git a/packages/react-workspace/ok-react/src/fv/context-help/index.ts b/packages/react-workspace/ok-react/src/fv/context-help/index.ts new file mode 100644 index 0000000000..9a585f6480 --- /dev/null +++ b/packages/react-workspace/ok-react/src/fv/context-help/index.ts @@ -0,0 +1,9 @@ +'use client'; + +import { FvContextHelp, fvContextHelpTag } from '@ni/ok-components/dist/esm/fv/context-help'; +import type { FvContextHelpSeverity } from '@ni/ok-components/dist/esm/fv/context-help/types'; +import { wrap } from '../../utilities/react-wrapper'; + +export { fvContextHelpTag }; +export { type FvContextHelp, type FvContextHelpSeverity }; +export const OkFvContextHelp = wrap(FvContextHelp); \ No newline at end of file diff --git a/packages/react-workspace/ok-react/src/fv/master-detail-list-item/index.ts b/packages/react-workspace/ok-react/src/fv/master-detail-list-item/index.ts new file mode 100644 index 0000000000..30203a42f3 --- /dev/null +++ b/packages/react-workspace/ok-react/src/fv/master-detail-list-item/index.ts @@ -0,0 +1,11 @@ +'use client'; + +import { + FvMasterDetailListItem, + fvMasterDetailListItemTag +} from '@ni/ok-components/dist/esm/fv/master-detail-list-item'; +import { wrap } from '../../utilities/react-wrapper'; + +export { fvMasterDetailListItemTag }; +export { type FvMasterDetailListItem }; +export const OkFvMasterDetailListItem = wrap(FvMasterDetailListItem); \ No newline at end of file diff --git a/packages/react-workspace/ok-react/src/fv/master-detail-list/index.ts b/packages/react-workspace/ok-react/src/fv/master-detail-list/index.ts new file mode 100644 index 0000000000..1c8d1a8043 --- /dev/null +++ b/packages/react-workspace/ok-react/src/fv/master-detail-list/index.ts @@ -0,0 +1,19 @@ +'use client'; + +import { + FvMasterDetailList, + fvMasterDetailListTag, + type FvMasterDetailListChangeDetail +} from '@ni/ok-components/dist/esm/fv/master-detail-list'; +import { wrap, type EventName } from '../../utilities/react-wrapper'; + +export { fvMasterDetailListTag }; +export { type FvMasterDetailList, type FvMasterDetailListChangeDetail }; +export const OkFvMasterDetailList = wrap(FvMasterDetailList, { + events: { + onChange: 'change' as EventName, + } +}); +export interface FvMasterDetailListChangeEvent extends CustomEvent { + target: FvMasterDetailList; +} \ No newline at end of file diff --git a/packages/react-workspace/ok-react/src/fv/split-button-anchor/index.ts b/packages/react-workspace/ok-react/src/fv/split-button-anchor/index.ts new file mode 100644 index 0000000000..772f36e5ca --- /dev/null +++ b/packages/react-workspace/ok-react/src/fv/split-button-anchor/index.ts @@ -0,0 +1,30 @@ +'use client'; + +import { + FvSplitButtonAnchor, + fvSplitButtonAnchorTag +} from '@ni/ok-components/dist/esm/fv/split-button-anchor'; +import { + FvSplitButtonAnchorAppearance, + FvSplitButtonAnchorAppearanceVariant +} from '@ni/ok-components/dist/esm/fv/split-button-anchor/types'; +import { wrap, type EventName } from '../../utilities/react-wrapper'; + +export { fvSplitButtonAnchorTag }; +export { + type FvSplitButtonAnchor, + FvSplitButtonAnchorAppearance, + FvSplitButtonAnchorAppearanceVariant +}; +export const OkFvSplitButtonAnchor = wrap(FvSplitButtonAnchor, { + events: { + onTrigger: 'trigger' as EventName, + onToggle: 'toggle' as EventName, + } +}); +export interface FvSplitButtonAnchorTriggerEvent extends CustomEvent { + target: FvSplitButtonAnchor; +} +export interface FvSplitButtonAnchorToggleEvent extends CustomEvent<{ open: boolean }> { + target: FvSplitButtonAnchor; +} \ No newline at end of file diff --git a/packages/react-workspace/ok-react/src/fv/split-button/index.ts b/packages/react-workspace/ok-react/src/fv/split-button/index.ts new file mode 100644 index 0000000000..3f58bf3ace --- /dev/null +++ b/packages/react-workspace/ok-react/src/fv/split-button/index.ts @@ -0,0 +1,27 @@ +'use client'; + +import { FvSplitButton, fvSplitButtonTag } from '@ni/ok-components/dist/esm/fv/split-button'; +import { + FvSplitButtonAppearance, + FvSplitButtonAppearanceVariant +} from '@ni/ok-components/dist/esm/fv/split-button/types'; +import { wrap, type EventName } from '../../utilities/react-wrapper'; + +export { fvSplitButtonTag }; +export { + type FvSplitButton, + FvSplitButtonAppearance, + FvSplitButtonAppearanceVariant +}; +export const OkFvSplitButton = wrap(FvSplitButton, { + events: { + onTrigger: 'trigger' as EventName, + onToggle: 'toggle' as EventName, + } +}); +export interface FvSplitButtonTriggerEvent extends CustomEvent { + target: FvSplitButton; +} +export interface FvSplitButtonToggleEvent extends CustomEvent<{ open: boolean }> { + target: FvSplitButton; +} \ No newline at end of file diff --git a/packages/react-workspace/ok-react/src/fv/summary-panel-tile/index.ts b/packages/react-workspace/ok-react/src/fv/summary-panel-tile/index.ts new file mode 100644 index 0000000000..69844feb0f --- /dev/null +++ b/packages/react-workspace/ok-react/src/fv/summary-panel-tile/index.ts @@ -0,0 +1,12 @@ +'use client'; + +import { + FvSummaryPanelTile, + fvSummaryPanelTileTag +} from '@ni/ok-components/dist/esm/fv/summary-panel-tile'; +import { FvSummaryPanelTileTextPosition } from '@ni/ok-components/dist/esm/fv/summary-panel-tile/types'; +import { wrap } from '../../utilities/react-wrapper'; + +export { fvSummaryPanelTileTag }; +export { type FvSummaryPanelTile, FvSummaryPanelTileTextPosition }; +export const OkFvSummaryPanelTile = wrap(FvSummaryPanelTile); \ No newline at end of file diff --git a/packages/react-workspace/ok-react/src/fv/summary-panel/index.ts b/packages/react-workspace/ok-react/src/fv/summary-panel/index.ts new file mode 100644 index 0000000000..b229a59d7f --- /dev/null +++ b/packages/react-workspace/ok-react/src/fv/summary-panel/index.ts @@ -0,0 +1,15 @@ +'use client'; + +import { FvSummaryPanel, fvSummaryPanelTag } from '@ni/ok-components/dist/esm/fv/summary-panel'; +import { wrap, type EventName } from '../../utilities/react-wrapper'; + +export { fvSummaryPanelTag }; +export { type FvSummaryPanel }; +export const OkFvSummaryPanel = wrap(FvSummaryPanel, { + events: { + onEditItems: 'edit-items' as EventName, + } +}); +export interface FvSummaryPanelEditItemsEvent extends CustomEvent { + target: FvSummaryPanel; +} \ No newline at end of file From 586f034609368354cd825beededc2f49ab75608c Mon Sep 17 00:00:00 2001 From: Fred Visser <1458528+fredvisser@users.noreply.github.com> Date: Fri, 10 Jul 2026 11:27:45 -0400 Subject: [PATCH 2/4] Type payload-less React events --- .../ok-react/src/fv/split-button-anchor/index.ts | 2 +- packages/react-workspace/ok-react/src/fv/split-button/index.ts | 2 +- packages/react-workspace/ok-react/src/fv/summary-panel/index.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-workspace/ok-react/src/fv/split-button-anchor/index.ts b/packages/react-workspace/ok-react/src/fv/split-button-anchor/index.ts index 772f36e5ca..ac074bf2d2 100644 --- a/packages/react-workspace/ok-react/src/fv/split-button-anchor/index.ts +++ b/packages/react-workspace/ok-react/src/fv/split-button-anchor/index.ts @@ -22,7 +22,7 @@ export const OkFvSplitButtonAnchor = wrap(FvSplitButtonAnchor, { onToggle: 'toggle' as EventName, } }); -export interface FvSplitButtonAnchorTriggerEvent extends CustomEvent { +export interface FvSplitButtonAnchorTriggerEvent extends CustomEvent { target: FvSplitButtonAnchor; } export interface FvSplitButtonAnchorToggleEvent extends CustomEvent<{ open: boolean }> { diff --git a/packages/react-workspace/ok-react/src/fv/split-button/index.ts b/packages/react-workspace/ok-react/src/fv/split-button/index.ts index 3f58bf3ace..a81376a8e0 100644 --- a/packages/react-workspace/ok-react/src/fv/split-button/index.ts +++ b/packages/react-workspace/ok-react/src/fv/split-button/index.ts @@ -19,7 +19,7 @@ export const OkFvSplitButton = wrap(FvSplitButton, { onToggle: 'toggle' as EventName, } }); -export interface FvSplitButtonTriggerEvent extends CustomEvent { +export interface FvSplitButtonTriggerEvent extends CustomEvent { target: FvSplitButton; } export interface FvSplitButtonToggleEvent extends CustomEvent<{ open: boolean }> { diff --git a/packages/react-workspace/ok-react/src/fv/summary-panel/index.ts b/packages/react-workspace/ok-react/src/fv/summary-panel/index.ts index b229a59d7f..6bdaf6aa8e 100644 --- a/packages/react-workspace/ok-react/src/fv/summary-panel/index.ts +++ b/packages/react-workspace/ok-react/src/fv/summary-panel/index.ts @@ -10,6 +10,6 @@ export const OkFvSummaryPanel = wrap(FvSummaryPanel, { onEditItems: 'edit-items' as EventName, } }); -export interface FvSummaryPanelEditItemsEvent extends CustomEvent { +export interface FvSummaryPanelEditItemsEvent extends CustomEvent { target: FvSummaryPanel; } \ No newline at end of file From 35fc686aff25eb7de1e29d12b4a8a0c1e734e806 Mon Sep 17 00:00:00 2001 From: Fred Visser <1458528+fredvisser@users.noreply.github.com> Date: Fri, 10 Jul 2026 11:29:22 -0400 Subject: [PATCH 3/4] Update OK FV React component statuses --- .../src/docs/component-data/ok/fv/index.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/storybook/src/docs/component-data/ok/fv/index.ts b/packages/storybook/src/docs/component-data/ok/fv/index.ts index a1ee36776e..41dc9d0265 100644 --- a/packages/storybook/src/docs/component-data/ok/fv/index.ts +++ b/packages/storybook/src/docs/component-data/ok/fv/index.ts @@ -19,7 +19,7 @@ export const componentDataOkFv = [ componentStatus: ComponentFrameworkStatus.ready, angularStatus: ComponentFrameworkStatus.ready, blazorStatus: ComponentFrameworkStatus.doesNotExist, - reactStatus: ComponentFrameworkStatus.doesNotExist + reactStatus: ComponentFrameworkStatus.ready }, { componentName: 'Fv Chip Selector', @@ -28,7 +28,7 @@ export const componentDataOkFv = [ componentStatus: ComponentFrameworkStatus.ready, angularStatus: ComponentFrameworkStatus.ready, blazorStatus: ComponentFrameworkStatus.doesNotExist, - reactStatus: ComponentFrameworkStatus.doesNotExist + reactStatus: ComponentFrameworkStatus.ready }, { componentName: 'Fv Context Help', @@ -37,7 +37,7 @@ export const componentDataOkFv = [ componentStatus: ComponentFrameworkStatus.ready, angularStatus: ComponentFrameworkStatus.ready, blazorStatus: ComponentFrameworkStatus.doesNotExist, - reactStatus: ComponentFrameworkStatus.doesNotExist + reactStatus: ComponentFrameworkStatus.ready }, { componentName: 'Fv Master Detail List', @@ -46,7 +46,7 @@ export const componentDataOkFv = [ componentStatus: ComponentFrameworkStatus.ready, angularStatus: ComponentFrameworkStatus.ready, blazorStatus: ComponentFrameworkStatus.doesNotExist, - reactStatus: ComponentFrameworkStatus.doesNotExist + reactStatus: ComponentFrameworkStatus.ready }, { componentName: 'Fv Master Detail List Item', @@ -54,7 +54,7 @@ export const componentDataOkFv = [ componentStatus: ComponentFrameworkStatus.ready, angularStatus: ComponentFrameworkStatus.ready, blazorStatus: ComponentFrameworkStatus.doesNotExist, - reactStatus: ComponentFrameworkStatus.doesNotExist + reactStatus: ComponentFrameworkStatus.ready }, { componentName: 'Fv Search Input', @@ -74,7 +74,7 @@ export const componentDataOkFv = [ componentStatus: ComponentFrameworkStatus.ready, angularStatus: ComponentFrameworkStatus.ready, blazorStatus: ComponentFrameworkStatus.doesNotExist, - reactStatus: ComponentFrameworkStatus.doesNotExist + reactStatus: ComponentFrameworkStatus.ready }, { componentName: 'Fv Split Button Anchor', @@ -83,7 +83,7 @@ export const componentDataOkFv = [ componentStatus: ComponentFrameworkStatus.ready, angularStatus: ComponentFrameworkStatus.ready, blazorStatus: ComponentFrameworkStatus.doesNotExist, - reactStatus: ComponentFrameworkStatus.doesNotExist + reactStatus: ComponentFrameworkStatus.ready }, { componentName: 'Fv Summary Panel', @@ -92,7 +92,7 @@ export const componentDataOkFv = [ componentStatus: ComponentFrameworkStatus.ready, angularStatus: ComponentFrameworkStatus.ready, blazorStatus: ComponentFrameworkStatus.doesNotExist, - reactStatus: ComponentFrameworkStatus.doesNotExist + reactStatus: ComponentFrameworkStatus.ready }, { componentName: 'Fv Summary Panel Tile', @@ -100,6 +100,6 @@ export const componentDataOkFv = [ componentStatus: ComponentFrameworkStatus.ready, angularStatus: ComponentFrameworkStatus.ready, blazorStatus: ComponentFrameworkStatus.doesNotExist, - reactStatus: ComponentFrameworkStatus.doesNotExist + reactStatus: ComponentFrameworkStatus.ready } ] as const; From 0467b4e8928a8dc48ff3e3bf18cafa90f1acda6f Mon Sep 17 00:00:00 2001 From: Fred Visser <1458528+fredvisser@users.noreply.github.com> Date: Fri, 10 Jul 2026 12:06:25 -0400 Subject: [PATCH 4/4] Change files --- .../@ni-ok-react-3efacd84-3131-44b9-873e-86a4207f4377.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@ni-ok-react-3efacd84-3131-44b9-873e-86a4207f4377.json diff --git a/change/@ni-ok-react-3efacd84-3131-44b9-873e-86a4207f4377.json b/change/@ni-ok-react-3efacd84-3131-44b9-873e-86a4207f4377.json new file mode 100644 index 0000000000..894b4439b2 --- /dev/null +++ b/change/@ni-ok-react-3efacd84-3131-44b9-873e-86a4207f4377.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Add OK React component wrappers", + "packageName": "@ni/ok-react", + "email": "1458528+fredvisser@users.noreply.github.com", + "dependentChangeType": "patch" +}