Add React wrappers for OK FV components

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"
+}

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);

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<FvChipSelectorChangeEvent>,
+    }
+});
+export interface FvChipSelectorChangeEvent extends CustomEvent<{ selectedValues: string[] }> {
+    target: FvChipSelector;
+}

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);

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);

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<FvMasterDetailListChangeEvent>,
+    }
+});
+export interface FvMasterDetailListChangeEvent extends CustomEvent<FvMasterDetailListChangeDetail> {
+    target: FvMasterDetailList;
+}

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<FvSplitButtonAnchorTriggerEvent>,
+        onToggle: 'toggle' as EventName<FvSplitButtonAnchorToggleEvent>,
+    }
+});
+export interface FvSplitButtonAnchorTriggerEvent extends CustomEvent<void> {
+    target: FvSplitButtonAnchor;
+}
+export interface FvSplitButtonAnchorToggleEvent extends CustomEvent<{ open: boolean }> {
+    target: FvSplitButtonAnchor;
+}

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<FvSplitButtonTriggerEvent>,
+        onToggle: 'toggle' as EventName<FvSplitButtonToggleEvent>,
+    }
+});
+export interface FvSplitButtonTriggerEvent extends CustomEvent<void> {
+    target: FvSplitButton;
+}
+export interface FvSplitButtonToggleEvent extends CustomEvent<{ open: boolean }> {
+    target: FvSplitButton;
+}

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);

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<FvSummaryPanelEditItemsEvent>,
+    }
+});
+export interface FvSummaryPanelEditItemsEvent extends CustomEvent<void> {
+    target: FvSummaryPanel;
+}

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,15 +46,15 @@ export const componentDataOkFv = [
         componentStatus: ComponentFrameworkStatus.ready,
         angularStatus: ComponentFrameworkStatus.ready,
         blazorStatus: ComponentFrameworkStatus.doesNotExist,
-        reactStatus: ComponentFrameworkStatus.doesNotExist
+        reactStatus: ComponentFrameworkStatus.ready
     },
     {
         componentName: 'Fv Master Detail List Item',
         library: 'ok',
         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,14 +92,14 @@ export const componentDataOkFv = [
         componentStatus: ComponentFrameworkStatus.ready,
         angularStatus: ComponentFrameworkStatus.ready,
         blazorStatus: ComponentFrameworkStatus.doesNotExist,
-        reactStatus: ComponentFrameworkStatus.doesNotExist
+        reactStatus: ComponentFrameworkStatus.ready
     },
     {
         componentName: 'Fv Summary Panel Tile',
         library: 'ok',
         componentStatus: ComponentFrameworkStatus.ready,
         angularStatus: ComponentFrameworkStatus.ready,
         blazorStatus: ComponentFrameworkStatus.doesNotExist,
-        reactStatus: ComponentFrameworkStatus.doesNotExist
+        reactStatus: ComponentFrameworkStatus.ready
     }
 ] as const;