@opalkelly/frontpanel-react-components 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@opalkelly/frontpanel-react-components",
-  "version": "0.1.0",
+  "type": "module",
+  "version": "0.1.2",
   "description": "React Component Library for OpalKelly FrontPanel Alloy",
   "keywords": [
     "FPGA",
@@ -27,15 +28,16 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.5",
-    "@storybook/addon-essentials": "^7.6.6",
-    "@storybook/addon-interactions": "^7.6.6",
-    "@storybook/addon-links": "^7.6.6",
-    "@storybook/blocks": "^7.6.6",
-    "@storybook/manager-api": "^8.0.8",
-    "@storybook/react": "^7.6.6",
-    "@storybook/react-webpack5": "^7.6.6",
-    "@storybook/test": "^7.6.6",
-    "@storybook/theming": "^8.0.8",
+    "@storybook/addon-essentials": "^8.1.6",
+    "@storybook/addon-interactions": "^8.1.6",
+    "@storybook/addon-links": "^8.1.6",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.3",
+    "@storybook/blocks": "^8.1.6",
+    "@storybook/manager-api": "^8.1.6",
+    "@storybook/react": "^8.1.6",
+    "@storybook/react-webpack5": "^8.1.6",
+    "@storybook/test": "^8.1.6",
+    "@storybook/theming": "^8.1.6",
     "@types/react": "^18.2.45",
     "@typescript-eslint/eslint-plugin": "^7.1.1",
     "@typescript-eslint/parser": "^7.1.1",
@@ -48,7 +50,7 @@
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^7.6.6",
+    "storybook": "^8.1.6",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3"
   },

package/src/primitives/Button/Button.stories.tsx

@@ -7,6 +7,8 @@
 
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { fn } from "@storybook/test";
+
 import withApplication from "../../stories/decorators/Application.decorator";
 
 import Button from "./Button";
@@ -49,6 +51,9 @@ export const Primary: Story = {
         // Optional Properties
         size: 1,
         disabled: false,
-        tooltip: "Button tooltip"
+        tooltip: "Button tooltip",
+        onButtonClick: fn(),
+        onButtonDown: fn(),
+        onButtonUp: fn()
     }
 };

package/src/primitives/DigitEntry/DigitEntry.stories.tsx

@@ -9,6 +9,8 @@ import React from "react";
 
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { fn } from "@storybook/test";
+
 import { useArgs } from "@storybook/preview-api";
 
 import DigitEntry from "./DigitEntry";
@@ -76,9 +78,10 @@ export const Primary: Story = {
         value: 8,
         // Optional Properties
         size: 1,
-        numeralSystem: NumeralSystem.Decimal,
         variant: "standard",
+        numeralSystem: NumeralSystem.Decimal,
         maximum: undefined,
-        minimum: undefined
+        minimum: undefined,
+        onValueChanged: fn()
     }
 };

package/src/primitives/NumberEntry/NumberEntry.stories.tsx

@@ -9,6 +9,8 @@ import React from "react";
 
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { fn } from "@storybook/test";
+
 import { useArgs } from "@storybook/preview-api";
 
 import withApplication from "../../stories/decorators/Application.decorator";
@@ -102,7 +104,8 @@ const ComponentTemplate: Story = {
         decimalScale: 3,
         valueString: "8000",
         maximumValueString: "1000000",
-        minimumValueString: "-1000000"
+        minimumValueString: "-1000000",
+        onValueChange: fn()
     }
 };
 

package/src/primitives/RangeSlider/RangeSlider.stories.tsx

@@ -9,6 +9,8 @@ import React from "react";
 
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { fn } from "@storybook/test";
+
 import withApplication from "../../stories/decorators/Application.decorator";
 
 import RangeSlider from "./RangeSlider";
@@ -71,6 +73,8 @@ export const Primary: Story = {
         showThumbLabel: true,
         disabled: false,
         label: { text: "RangeSlider" },
-        tooltip: "Set value within range"
+        tooltip: "Set value within range",
+        onValueChange: fn(),
+        onValueCommit: fn()
     }
 };

package/src/primitives/SelectEntry/SelectEntry.stories.tsx

@@ -9,6 +9,8 @@ import React from "react";
 
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { fn } from "@storybook/test";
+
 import { useArgs } from "@storybook/preview-api";
 
 import withApplication from "../../stories/decorators/Application.decorator";
@@ -81,6 +83,8 @@ export const Primary: Story = {
             horizontalPosition: "left"
         },
         size: 1,
-        tooltip: "Select an item from the list"
+        tooltip: "Select an item from the list",
+        onValueChange: fn(),
+        onOpenChange: fn()
     }
 };

package/src/primitives/Toggle/Toggle.stories.tsx

@@ -9,6 +9,8 @@ import React from "react";
 
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { fn } from "@storybook/test";
+
 import Toggle from "./Toggle";
 
 import { ToggleState } from "../../core";
@@ -56,6 +58,8 @@ export const Primary: Story = {
         state: ToggleState.Off,
         // Optional Properties
         disabled: false,
-        size: 1
+        size: 1,
+        tooltip: "Toggle tooltip",
+        onToggleStateChanged: fn()
     }
 };

package/src/primitives/ToggleSwitch/ToggleSwitch.stories.tsx

@@ -9,6 +9,8 @@ import React from "react";
 
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { fn } from "@storybook/test";
+
 import { useArgs } from "@storybook/preview-api";
 
 import withApplication from "../../stories/decorators/Application.decorator";
@@ -67,7 +69,8 @@ const ComponentTemplate: Story = {
         // Optional Properties
         disabled: false,
         size: 1,
-        tooltip: "Toggle switch tooltip"
+        tooltip: "Toggle switch tooltip",
+        onToggleStateChanged: fn()
     }
 };