From 36fe2af972e4e62cf477ff3562c3bb96647f1dc4 Mon Sep 17 00:00:00 2001 From: Jarrett Croll Date: Thu, 12 Jun 2025 09:54:50 -0400 Subject: [PATCH 1/7] STATFLO-3091 [Widgets SDK] Update Docs --- .gitignore | 1 + README.md | 51 ++++- examples/react/package.json | 5 +- examples/react/src/App.tsx | 87 ++++----- examples/react/webpack.config.js | 4 +- examples/react/yarn.lock | 24 +-- examples/vanillajs/package.json | 2 +- examples/vanillajs/src/index.js | 60 +++--- examples/vanillajs/webpack.config.js | 4 +- examples/vanillajs/yarn.lock | 269 +++++++++++++++++++++++++-- 10 files changed, 402 insertions(+), 105 deletions(-) diff --git a/.gitignore b/.gitignore index d749bec..6b795e1 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,4 @@ dist coverage yarn-error.log +.idea diff --git a/README.md b/README.md index 505ca58..e0cffb6 100644 --- a/README.md +++ b/README.md @@ -22,6 +22,55 @@ npm install @statflo/widget-sdk # or yarn add @statflo/widget-sdk ``` +## Getting Started + +### Example Widgets + +Two example widgets are provided, one using React and one using vanilla javascript. + +#### React Example Widget + +1. Install the React example widget + ``` + yarn --cwd examples/react install + ``` +2. Start the React example widget + ``` + yarn --cwd examples/react start + ``` +3. View the React example widget at [http://localhost:3001](http://localhost:3001) + +#### Vanilla JS Example Widget + +1. Install the Vanilla JS example widget + ``` + yarn --cwd examples/vanillajs install + ``` +2. Start the Vanilla JS example widget + ``` + yarn --cwd examples/vanillajs start + ``` +3. View the Vanilla JS example widget at [http://localhost:3002](http://localhost:3002) + +### Widget Playground + +1. Install the Widget Playground + ``` + yarn --cwd docs install + ``` +2. Start the Widget Playground + ``` + yarn --cwd docs start + ``` +3. View the Widget Playground at [http://localhost:3000/widget-sdk/conversations](http://localhost:3000/widget-sdk/conversations) +4. Check out "Getting Started" guide in the left-hand navigation menu. +5. Click on "Widget Manager" in the left-hand navigation menu and try adding the example widgets above by clicking "Add Widget" in the top left. +6. Click on "Conversations" in the left-hand navigation to view your newly added widgets. +7. Click on "Event Manager" to simulate sending events to your widgets. + +We have provided a playground where you can test your widgets as you build them. We recommend building the example widgets +above and testing them in the playgound so you can get familiar with this project. + ## Creating a widget Please see our [Examples](https://github.com/Statflo/widget-sdk/tree/main/examples). @@ -230,4 +279,4 @@ By default, the target origin will be the url of the widget you register with th ## Adding a widget to Statflo -Once your widget has been deployed and is ready to be integrated into the application, please reach out to the Statflo team. \ No newline at end of file +Once your widget has been deployed and is ready to be integrated into the application, please reach out to the Statflo team. diff --git a/examples/react/package.json b/examples/react/package.json index f1810cd..134a1e7 100644 --- a/examples/react/package.json +++ b/examples/react/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { - "@statflo/widget-sdk": "./../../", + "@statflo/widget-sdk": "latest", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -21,8 +21,7 @@ "typescript": "^4.8.4", "web-vitals": "^2.1.4", "webpack-cli": "^4.10.0", - "webpack-dev-server": "^4.11.1", - "zustand": "^4.3.3" + "webpack-dev-server": "^4.11.1" }, "scripts": { "start": "webpack serve", diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx index 1478dcf..40aa6a9 100644 --- a/examples/react/src/App.tsx +++ b/examples/react/src/App.tsx @@ -1,37 +1,28 @@ import React, { useEffect, useState } from "react"; import "iframe-resizer-react"; -import { create } from "zustand"; +import { useStore } from "zustand"; import "./App.css"; -import useWidgetStore, { WidgetEvent } from "@statflo/widget-sdk"; +import useWidgetStore, {WidgetEvent, WidgetState} from "@statflo/widget-sdk"; -const useBoundWidgetStore = create(useWidgetStore); const App = () => { - const { events, publishEvent, getLatestEvent } = useBoundWidgetStore( - (state) => state - ); + const events = useStore(useWidgetStore, (state: WidgetState) => state.events) + const publishEvent = useStore(useWidgetStore, (state: WidgetState) => state.publishEvent) + const getLatestEvent = useStore(useWidgetStore, (state: WidgetState) => state.getLatestEvent) - const [token, setToken] = useState(""); - const [email, setEmail] = useState(""); + const [account, setAccount] = useState(""); + const [device, setDevice] = useState(""); - const fetchUser = (token: string) => { - fetch("https://app.statflo.com/v2/api/auth/me", { - headers: { authorization: `Bearer ${token}` }, - }) - .then((response) => response.json()) - .then((json) => { - setEmail(json.user.email); - }) - .catch(() => {}); - }; + const getDevice = () => { + const devices = [ + 'Samsung Galaxy S25 Ultra', + 'Apple iPhone 16 Pro Max', + 'Google Pixel 9a', + ]; - useEffect(() => { - // Simulate a token being emitted from the Statflo UI to this widget. - // If you'd like to test with a live token it can be acquired - // at https://app.statflo.com/v2/api/auth/me after first logging in. - publishEvent(new WidgetEvent("TOKEN_UPDATED", "")); - }, []); + return devices[Math.floor(Math.random() * devices.length)]; + } useEffect(() => { const latest = getLatestEvent(); @@ -41,36 +32,48 @@ const App = () => { } switch (latest.type) { - case "TOKEN_UPDATED": - setToken(latest.data); - break; - } - }, [events]); + case "CURRENT_ACCOUNT_ID": + setAccount(latest.data); + setDevice(getDevice()); - useEffect(() => { - if (!token) { - return; + publishEvent(new WidgetEvent("REPLACE_MESSAGE", `Hi, how are you enjoying your ${device}?`)); + break; } - - fetchUser(token); - }, [token]); + }, [device, events, getLatestEvent, publishEvent]); return (
-
React Widget
+
+ React Inventory Widget +
-
+
-
+
+ diff --git a/examples/react/webpack.config.js b/examples/react/webpack.config.js index 12eb845..9535c31 100644 --- a/examples/react/webpack.config.js +++ b/examples/react/webpack.config.js @@ -5,10 +5,10 @@ module.exports = { entry: "./src/index", mode: "development", output: { - publicPath: 'http://localhost:3000/' + publicPath: 'http://localhost:3001/' }, devServer: { - port: 3000, + port: 3001, allowedHosts: 'all' }, module: { diff --git a/examples/react/yarn.lock b/examples/react/yarn.lock index 333ca9b..e13cad4 100644 --- a/examples/react/yarn.lock +++ b/examples/react/yarn.lock @@ -1638,15 +1638,19 @@ dependencies: "@sinonjs/commons" "^1.7.0" -"@statflo/widget-sdk@./../../": - version "0.4.2" +"@statflo/widget-sdk@latest": + version "0.4.10" + resolved "https://registry.yarnpkg.com/@statflo/widget-sdk/-/widget-sdk-0.4.10.tgz#7d48e3a33eea8eabbe6763fe98432cd4590d7071" + integrity sha512-JEwQ/pLBSti5fUj831OfX1EYhj5wBZO2qZS9KzYJXxcdhipg4uDhkMdrAhdY0u+OdPluWUGEAzSBYIR1GK9BcQ== dependencies: iframe-resizer "^4.3.2" + iframe-resizer-react "^1.1.0" + react "^18.2.0" + react-error-boundary "^3.1.4" typescript "^4.9.3" uuid "^9.0.0" - zustand "^4.3.3" + zustand "^5.0.3" optionalDependencies: - react ">=16.8" use-sync-external-store "1.2.0" "@surma/rollup-plugin-off-main-thread@^2.2.3": @@ -7598,7 +7602,7 @@ react-scripts@5.0.1: optionalDependencies: fsevents "^2.3.2" -react@>=16.8, react@^18.2.0: +react@^18.2.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ== @@ -9374,9 +9378,7 @@ yocto-queue@^0.1.0: resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b" integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== -zustand@^4.3.3: - version "4.3.6" - resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.3.6.tgz#ce7804eb75361af0461a2d0536b65461ec5de86f" - integrity sha512-6J5zDxjxLE+yukC2XZWf/IyWVKnXT9b9HUv09VJ/bwGCpKNcaTqp7Ws28Xr8jnbvnZcdRaidztAPsXFBIqufiw== - dependencies: - use-sync-external-store "1.2.0" +zustand@^5.0.3: + version "5.0.5" + resolved "https://registry.yarnpkg.com/zustand/-/zustand-5.0.5.tgz#3e236f6a953142d975336d179bc735d97db17e84" + integrity sha512-mILtRfKW9xM47hqxGIxCv12gXusoY/xTSHBYApXozR0HmQv299whhBeeAcRy+KrPPybzosvJBCOmVjq6x12fCg== diff --git a/examples/vanillajs/package.json b/examples/vanillajs/package.json index b8f33fe..0e8fee0 100644 --- a/examples/vanillajs/package.json +++ b/examples/vanillajs/package.json @@ -9,7 +9,7 @@ "webpack-dev-server": "^4.11.1" }, "dependencies": { - "@statflo/widget-sdk": "./../../", + "@statflo/widget-sdk": "latest", "html-webpack-plugin": "^5.5.0", "webpack": "^5.75.0" }, diff --git a/examples/vanillajs/src/index.js b/examples/vanillajs/src/index.js index a2466d4..ccb9ebf 100644 --- a/examples/vanillajs/src/index.js +++ b/examples/vanillajs/src/index.js @@ -4,34 +4,29 @@ const root = document.getElementById("root"); const { publishEvent } = useWidgetStore.getState(); -// Simulate a token being emitted from the Statflo UI to this widget. -// If you'd like to test with a live token it can be acquired -// at https://app.statflo.com/v2/api/auth/me after first logging in. -publishEvent(new WidgetEvent("TOKEN_UPDATED", "")); +let account = ""; +let device = ""; -let token = ""; -let email = ""; +const getDevice = () => { + const devices = [ + 'Samsung Galaxy S25 Ultra', + 'Apple iPhone 16 Pro Max', + 'Google Pixel 9a', + ]; -const fetchUser = (token) => { - fetch("https://app.statflo.com/v2/api/auth/me", { - headers: { authorization: `Bearer ${token}` }, - }) - .then((response) => response.json()) - .then((json) => { - email = json.user.email; - render(useWidgetStore.getState()); - }) - .catch(() => {}); -}; + return devices[Math.floor(Math.random() * devices.length)]; +} const render = (state) => { const latest = state.getLatestEvent(); if (latest) { switch (latest.type) { - case "TOKEN_UPDATED": - token = latest.data; - fetchUser(token); + case "CURRENT_ACCOUNT_ID": + account = latest.data; + device = getDevice(); + + publishEvent(new WidgetEvent("REPLACE_MESSAGE", `Hi, how are you enjoying your ${device}?`)); break; } } @@ -40,7 +35,7 @@ const render = (state) => {
- Vanilla JS Widget + Vanilla JS Inventory Widget
{ >
-
+
+ diff --git a/examples/vanillajs/webpack.config.js b/examples/vanillajs/webpack.config.js index 0e6040b..7b1ac95 100644 --- a/examples/vanillajs/webpack.config.js +++ b/examples/vanillajs/webpack.config.js @@ -8,10 +8,10 @@ module.exports = { output: { path: path.resolve(__dirname, "./dist"), filename: "index.js", - publicPath: "http://localhost:3000/", + publicPath: "http://localhost:3002/", }, devServer: { - port: 3000, + port: 3002, allowedHosts: "all", }, plugins: [ diff --git a/examples/vanillajs/yarn.lock b/examples/vanillajs/yarn.lock index 772ca0c..fe0d9f4 100644 --- a/examples/vanillajs/yarn.lock +++ b/examples/vanillajs/yarn.lock @@ -2,6 +2,152 @@ # yarn lockfile v1 +"@babel/code-frame@^7.27.1": + version "7.27.1" + resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.27.1.tgz#200f715e66d52a23b221a9435534a91cc13ad5be" + integrity sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg== + dependencies: + "@babel/helper-validator-identifier" "^7.27.1" + js-tokens "^4.0.0" + picocolors "^1.1.1" + +"@babel/generator@^7.27.3": + version "7.27.5" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.27.5.tgz#3eb01866b345ba261b04911020cbe22dd4be8c8c" + integrity sha512-ZGhA37l0e/g2s1Cnzdix0O3aLYm66eF8aufiVteOgnwxgnRP8GoyMj7VWsgWnQbVKXyge7hqrFh2K2TQM6t1Hw== + dependencies: + "@babel/parser" "^7.27.5" + "@babel/types" "^7.27.3" + "@jridgewell/gen-mapping" "^0.3.5" + "@jridgewell/trace-mapping" "^0.3.25" + jsesc "^3.0.2" + +"@babel/helper-annotate-as-pure@^7.18.6", "@babel/helper-annotate-as-pure@^7.27.1": + version "7.27.3" + resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.27.3.tgz#f31fd86b915fc4daf1f3ac6976c59be7084ed9c5" + integrity sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg== + dependencies: + "@babel/types" "^7.27.3" + +"@babel/helper-create-class-features-plugin@^7.21.0": + version "7.27.1" + resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.27.1.tgz#5bee4262a6ea5ddc852d0806199eb17ca3de9281" + integrity sha512-QwGAmuvM17btKU5VqXfb+Giw4JcN0hjuufz3DYnpeVDvZLAObloM77bhMXiqry3Iio+Ai4phVRDwl6WU10+r5A== + dependencies: + "@babel/helper-annotate-as-pure" "^7.27.1" + "@babel/helper-member-expression-to-functions" "^7.27.1" + "@babel/helper-optimise-call-expression" "^7.27.1" + "@babel/helper-replace-supers" "^7.27.1" + "@babel/helper-skip-transparent-expression-wrappers" "^7.27.1" + "@babel/traverse" "^7.27.1" + semver "^6.3.1" + +"@babel/helper-member-expression-to-functions@^7.27.1": + version "7.27.1" + resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.27.1.tgz#ea1211276be93e798ce19037da6f06fbb994fa44" + integrity sha512-E5chM8eWjTp/aNoVpcbfM7mLxu9XGLWYise2eBKGQomAk/Mb4XoxyqXTZbuTohbsl8EKqdlMhnDI2CCLfcs9wA== + dependencies: + "@babel/traverse" "^7.27.1" + "@babel/types" "^7.27.1" + +"@babel/helper-optimise-call-expression@^7.27.1": + version "7.27.1" + resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.27.1.tgz#c65221b61a643f3e62705e5dd2b5f115e35f9200" + integrity sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw== + dependencies: + "@babel/types" "^7.27.1" + +"@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.20.2": + version "7.27.1" + resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz#ddb2f876534ff8013e6c2b299bf4d39b3c51d44c" + integrity sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw== + +"@babel/helper-replace-supers@^7.27.1": + version "7.27.1" + resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.27.1.tgz#b1ed2d634ce3bdb730e4b52de30f8cccfd692bc0" + integrity sha512-7EHz6qDZc8RYS5ElPoShMheWvEgERonFCs7IAonWLLUTXW59DP14bCZt89/GKyreYn8g3S83m21FelHKbeDCKA== + dependencies: + "@babel/helper-member-expression-to-functions" "^7.27.1" + "@babel/helper-optimise-call-expression" "^7.27.1" + "@babel/traverse" "^7.27.1" + +"@babel/helper-skip-transparent-expression-wrappers@^7.27.1": + version "7.27.1" + resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.27.1.tgz#62bb91b3abba8c7f1fec0252d9dbea11b3ee7a56" + integrity sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg== + dependencies: + "@babel/traverse" "^7.27.1" + "@babel/types" "^7.27.1" + +"@babel/helper-string-parser@^7.27.1": + version "7.27.1" + resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz#54da796097ab19ce67ed9f88b47bb2ec49367687" + integrity sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA== + +"@babel/helper-validator-identifier@^7.27.1": + version "7.27.1" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz#a7054dcc145a967dd4dc8fee845a57c1316c9df8" + integrity sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow== + +"@babel/parser@^7.27.2", "@babel/parser@^7.27.4", "@babel/parser@^7.27.5": + version "7.27.5" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.27.5.tgz#ed22f871f110aa285a6fd934a0efed621d118826" + integrity sha512-OsQd175SxWkGlzbny8J3K8TnnDD0N3lrIUtB92xwyRpzaenGZhxDvxN/JgU00U3CDZNj9tPuDJ5H0WS4Nt3vKg== + dependencies: + "@babel/types" "^7.27.3" + +"@babel/plugin-proposal-private-property-in-object@^7.21.11": + version "7.21.11" + resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz#69d597086b6760c4126525cfa154f34631ff272c" + integrity sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw== + dependencies: + "@babel/helper-annotate-as-pure" "^7.18.6" + "@babel/helper-create-class-features-plugin" "^7.21.0" + "@babel/helper-plugin-utils" "^7.20.2" + "@babel/plugin-syntax-private-property-in-object" "^7.14.5" + +"@babel/plugin-syntax-private-property-in-object@^7.14.5": + version "7.14.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz#0dc6671ec0ea22b6e94a1114f857970cd39de1ad" + integrity sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg== + dependencies: + "@babel/helper-plugin-utils" "^7.14.5" + +"@babel/runtime@^7.12.5": + version "7.27.6" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.27.6.tgz#ec4070a04d76bae8ddbb10770ba55714a417b7c6" + integrity sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q== + +"@babel/template@^7.27.2": + version "7.27.2" + resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.27.2.tgz#fa78ceed3c4e7b63ebf6cb39e5852fca45f6809d" + integrity sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw== + dependencies: + "@babel/code-frame" "^7.27.1" + "@babel/parser" "^7.27.2" + "@babel/types" "^7.27.1" + +"@babel/traverse@^7.27.1": + version "7.27.4" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.27.4.tgz#b0045ac7023c8472c3d35effd7cc9ebd638da6ea" + integrity sha512-oNcu2QbHqts9BtOWJosOVJapWjBDSxGCpFvikNR5TGDYDQf3JwpIoMzIKrvfoti93cLfPJEG4tH9SPVeyCGgdA== + dependencies: + "@babel/code-frame" "^7.27.1" + "@babel/generator" "^7.27.3" + "@babel/parser" "^7.27.4" + "@babel/template" "^7.27.2" + "@babel/types" "^7.27.3" + debug "^4.3.1" + globals "^11.1.0" + +"@babel/types@^7.27.1", "@babel/types@^7.27.3": + version "7.27.6" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.27.6.tgz#a434ca7add514d4e646c80f7375c0aa2befc5535" + integrity sha512-ETyHEk2VHHvl9b9jZP5IHPavHYk57EhanlRRuae9XCpb/j5bDCbPPMOBfCWhnl/7EDJz0jEMCi/RhccCE8r1+Q== + dependencies: + "@babel/helper-string-parser" "^7.27.1" + "@babel/helper-validator-identifier" "^7.27.1" + "@discoveryjs/json-ext@^0.5.0": version "0.5.7" resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70" @@ -16,16 +162,35 @@ "@jridgewell/sourcemap-codec" "^1.4.10" "@jridgewell/trace-mapping" "^0.3.9" +"@jridgewell/gen-mapping@^0.3.5": + version "0.3.8" + resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz#4f0e06362e01362f823d348f1872b08f666d8142" + integrity sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA== + dependencies: + "@jridgewell/set-array" "^1.2.1" + "@jridgewell/sourcemap-codec" "^1.4.10" + "@jridgewell/trace-mapping" "^0.3.24" + "@jridgewell/resolve-uri@3.1.0": version "3.1.0" resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78" integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w== +"@jridgewell/resolve-uri@^3.1.0": + version "3.1.2" + resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6" + integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw== + "@jridgewell/set-array@^1.0.1": version "1.1.2" resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72" integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw== +"@jridgewell/set-array@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.2.1.tgz#558fb6472ed16a4c850b889530e6b36438c49280" + integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A== + "@jridgewell/source-map@^0.3.2": version "0.3.2" resolved "https://registry.yarnpkg.com/@jridgewell/source-map/-/source-map-0.3.2.tgz#f45351aaed4527a298512ec72f81040c998580fb" @@ -39,6 +204,11 @@ resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24" integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw== +"@jridgewell/sourcemap-codec@^1.4.14": + version "1.5.0" + resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a" + integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ== + "@jridgewell/trace-mapping@^0.3.14", "@jridgewell/trace-mapping@^0.3.9": version "0.3.17" resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz#793041277af9073b0951a7fe0f0d8c4c98c36985" @@ -47,20 +217,32 @@ "@jridgewell/resolve-uri" "3.1.0" "@jridgewell/sourcemap-codec" "1.4.14" +"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25": + version "0.3.25" + resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0" + integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ== + dependencies: + "@jridgewell/resolve-uri" "^3.1.0" + "@jridgewell/sourcemap-codec" "^1.4.14" + "@leichtgewicht/ip-codec@^2.0.1": version "2.0.4" resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b" integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A== -"@statflo/widget-sdk@./../../": - version "0.4.0" +"@statflo/widget-sdk@latest": + version "0.4.10" + resolved "https://registry.yarnpkg.com/@statflo/widget-sdk/-/widget-sdk-0.4.10.tgz#7d48e3a33eea8eabbe6763fe98432cd4590d7071" + integrity sha512-JEwQ/pLBSti5fUj831OfX1EYhj5wBZO2qZS9KzYJXxcdhipg4uDhkMdrAhdY0u+OdPluWUGEAzSBYIR1GK9BcQ== dependencies: iframe-resizer "^4.3.2" + iframe-resizer-react "^1.1.0" + react "^18.2.0" + react-error-boundary "^3.1.4" typescript "^4.9.3" uuid "^9.0.0" - zustand "^4.1.4" + zustand "^5.0.3" optionalDependencies: - react ">=16.8" use-sync-external-store "1.2.0" "@types/body-parser@*": @@ -701,6 +883,13 @@ debug@^4.1.0: dependencies: ms "2.1.2" +debug@^4.3.1: + version "4.4.1" + resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.1.tgz#e5a8bc6cbc4c6cd3e64308b0693a3d4fa550189b" + integrity sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ== + dependencies: + ms "^2.1.3" + default-gateway@^6.0.3: version "6.0.3" resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-6.0.3.tgz#819494c888053bdb743edbf343d6cdf7f2943a71" @@ -1058,6 +1247,11 @@ glob@^7.1.3: once "^1.3.0" path-is-absolute "^1.0.0" +globals@^11.1.0: + version "11.12.0" + resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e" + integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA== + graceful-fs@^4.1.2, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9: version "4.2.10" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c" @@ -1202,11 +1396,25 @@ iconv-lite@0.4.24: dependencies: safer-buffer ">= 2.1.2 < 3" +iframe-resizer-react@^1.1.0: + version "1.1.1" + resolved "https://registry.yarnpkg.com/iframe-resizer-react/-/iframe-resizer-react-1.1.1.tgz#bb6482e420c612206298892cbbc0182eb76cbf9f" + integrity sha512-s0EUUekv58FGbuWBanSCVsEKmmyBdWmdwQ8qx8g04jlNlCR7pNuDz7fw7zo5T5sdssl6yRMDl97NBdwD1gfDyQ== + dependencies: + "@babel/plugin-proposal-private-property-in-object" "^7.21.11" + iframe-resizer "^4.4.4" + warning "^4.0.3" + iframe-resizer@^4.3.2: version "4.3.2" resolved "https://registry.yarnpkg.com/iframe-resizer/-/iframe-resizer-4.3.2.tgz#42dd88345d18b9e377b6044dddb98c664ab0ce6b" integrity sha512-gOWo2hmdPjMQsQ+zTKbses08mDfDEMh4NneGQNP4qwePYujY1lguqP6gnbeJkf154gojWlBhIltlgnMfYjGHWA== +iframe-resizer@^4.4.4: + version "4.4.5" + resolved "https://registry.yarnpkg.com/iframe-resizer/-/iframe-resizer-4.4.5.tgz#f5048636e7f2fb5d9a09cc2ae78eb2da55ad555c" + integrity sha512-U8bCywf/Gh07O69RXo6dXAzTtODQrxaHGHRI7Nt4ipXsuq6EMxVsOP/jjaP43YtXz/ibESS0uSVDN3sOGCzSmw== + import-local@^3.0.2: version "3.1.0" resolved "https://registry.yarnpkg.com/import-local/-/import-local-3.1.0.tgz#b4479df8a5fd44f6cdce24070675676063c95cb4" @@ -1339,11 +1547,16 @@ jest-worker@^27.4.5: merge-stream "^2.0.0" supports-color "^8.0.0" -"js-tokens@^3.0.0 || ^4.0.0": +"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== +jsesc@^3.0.2: + version "3.1.0" + resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.1.0.tgz#74d335a234f67ed19907fdadfac7ccf9d409825d" + integrity sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA== + json-parse-even-better-errors@^2.3.1: version "2.3.1" resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d" @@ -1381,7 +1594,7 @@ lodash@^4.17.20, lodash@^4.17.21: resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== -loose-envify@^1.1.0: +loose-envify@^1.0.0, loose-envify@^1.1.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== @@ -1474,7 +1687,7 @@ ms@2.1.2: resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009" integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w== -ms@2.1.3: +ms@2.1.3, ms@^2.1.3: version "2.1.3" resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2" integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA== @@ -1657,6 +1870,11 @@ picocolors@^1.0.0: resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c" integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== +picocolors@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b" + integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA== + picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1: version "2.3.1" resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" @@ -1724,10 +1942,17 @@ raw-body@2.5.1: iconv-lite "0.4.24" unpipe "1.0.0" -react@>=16.8: - version "18.2.0" - resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" - integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ== +react-error-boundary@^3.1.4: + version "3.1.4" + resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-3.1.4.tgz#255db92b23197108757a888b01e5b729919abde0" + integrity sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA== + dependencies: + "@babel/runtime" "^7.12.5" + +react@^18.2.0: + version "18.3.1" + resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891" + integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ== dependencies: loose-envify "^1.1.0" @@ -1872,6 +2097,11 @@ selfsigned@^2.1.1: dependencies: node-forge "^1" +semver@^6.3.1: + version "6.3.1" + resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4" + integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA== + send@0.18.0: version "0.18.0" resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be" @@ -2173,6 +2403,13 @@ vary@~1.1.2: resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc" integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg== +warning@^4.0.3: + version "4.0.3" + resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3" + integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w== + dependencies: + loose-envify "^1.0.0" + watchpack@^2.4.0: version "2.4.0" resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d" @@ -2332,9 +2569,7 @@ ws@^8.4.2: resolved "https://registry.yarnpkg.com/ws/-/ws-8.11.0.tgz#6a0d36b8edfd9f96d8b25683db2f8d7de6e8e143" integrity sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg== -zustand@^4.1.4: - version "4.1.5" - resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.1.5.tgz#7402b511f5b23ccb0f9ba6d20ae01ec817e16eb6" - integrity sha512-PsdRT8Bvq22Yyh1tvpgdHNE7OAeFKqJXUxtJvj1Ixw2B9O2YZ1M34ImQ+xyZah4wZrR4lENMoDUutKPpyXCQ/Q== - dependencies: - use-sync-external-store "1.2.0" +zustand@^5.0.3: + version "5.0.5" + resolved "https://registry.yarnpkg.com/zustand/-/zustand-5.0.5.tgz#3e236f6a953142d975336d179bc735d97db17e84" + integrity sha512-mILtRfKW9xM47hqxGIxCv12gXusoY/xTSHBYApXozR0HmQv299whhBeeAcRy+KrPPybzosvJBCOmVjq6x12fCg== From aa1e303437b09519ab775417754e88577957bb6a Mon Sep 17 00:00:00 2001 From: Jarrett Croll Date: Thu, 12 Jun 2025 13:48:04 -0400 Subject: [PATCH 2/7] doc fix --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index e0cffb6..f9ac211 100644 --- a/README.md +++ b/README.md @@ -54,6 +54,9 @@ Two example widgets are provided, one using React and one using vanilla javascri ### Widget Playground +We have provided a playground where you can test your widgets as you build them. We recommend building the example widgets +above and testing them in the playgound so you can get familiar with this project. + 1. Install the Widget Playground ``` yarn --cwd docs install @@ -68,9 +71,6 @@ Two example widgets are provided, one using React and one using vanilla javascri 6. Click on "Conversations" in the left-hand navigation to view your newly added widgets. 7. Click on "Event Manager" to simulate sending events to your widgets. -We have provided a playground where you can test your widgets as you build them. We recommend building the example widgets -above and testing them in the playgound so you can get familiar with this project. - ## Creating a widget Please see our [Examples](https://github.com/Statflo/widget-sdk/tree/main/examples). From f238041e1ffe3da86c94095d90009e5b028a0d4a Mon Sep 17 00:00:00 2001 From: Jarrett Croll Date: Thu, 12 Jun 2025 13:48:28 -0400 Subject: [PATCH 3/7] doc fix --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f9ac211..1c6de24 100644 --- a/README.md +++ b/README.md @@ -55,7 +55,7 @@ Two example widgets are provided, one using React and one using vanilla javascri ### Widget Playground We have provided a playground where you can test your widgets as you build them. We recommend building the example widgets -above and testing them in the playgound so you can get familiar with this project. +above and testing them in the playground so you can get familiar with this project. 1. Install the Widget Playground ``` From ef93c97e0d35d91373bae1a8bc4414fc9961fe44 Mon Sep 17 00:00:00 2001 From: Jarrett Croll Date: Thu, 12 Jun 2025 13:57:31 -0400 Subject: [PATCH 4/7] doc fix --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 1c6de24..26761a0 100644 --- a/README.md +++ b/README.md @@ -87,9 +87,9 @@ import useWidgetStore from "@statflo/widget-sdk"; ```typescript import useWidgetStore from "@statflo/widget-sdk"; -import { create } from "zustand"; +import { useStore } from "zustand"; -const useBoundWidgetStore = create(useWidgetStore); +const publishEvent = useStore(useWidgetStore, (state: WidgetState) => state.publishEvent); ``` ### Publishing an event @@ -109,7 +109,7 @@ publishEvent(new WidgetEvent("MESSAGE_UPDATED", "")); ```typescript import { WidgetEvent } from "@statflo/widget-sdk"; -const { publishEvent } = useBoundWidgetStore((state) => state); +const publishEvent = useStore(useWidgetStore, (state: WidgetState) => state.publishEvent); useEffect(() => { // This event only fires on component initialization From 1d5f85bf8f715dc7fb639895fa3bb432f7276fd9 Mon Sep 17 00:00:00 2001 From: Jarrett Croll Date: Thu, 12 Jun 2025 14:06:59 -0400 Subject: [PATCH 5/7] doc fix --- README.md | 22 ++++++++-------------- 1 file changed, 8 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 26761a0..c647961 100644 --- a/README.md +++ b/README.md @@ -54,22 +54,16 @@ Two example widgets are provided, one using React and one using vanilla javascri ### Widget Playground -We have provided a playground where you can test your widgets as you build them. We recommend building the example widgets +We have provided a live playground at [https://statflo.github.io/widget-sdk/conversations](https://statflo.github.io/widget-sdk/conversations) +where you can test your widgets as you build them. We recommend building the example widgets above and testing them in the playground so you can get familiar with this project. -1. Install the Widget Playground - ``` - yarn --cwd docs install - ``` -2. Start the Widget Playground - ``` - yarn --cwd docs start - ``` -3. View the Widget Playground at [http://localhost:3000/widget-sdk/conversations](http://localhost:3000/widget-sdk/conversations) -4. Check out "Getting Started" guide in the left-hand navigation menu. -5. Click on "Widget Manager" in the left-hand navigation menu and try adding the example widgets above by clicking "Add Widget" in the top left. -6. Click on "Conversations" in the left-hand navigation to view your newly added widgets. -7. Click on "Event Manager" to simulate sending events to your widgets. +#### Suggested Workflow + +1. Check out "Getting Started" guide in the left-hand navigation menu. +2. Click on "Widget Manager" in the left-hand navigation menu and try adding the example widgets above by clicking "Add Widget" in the top left. +3. Click on "Conversations" in the left-hand navigation to view your newly added widgets. +4. Click on "Event Manager" to simulate sending events to your widgets. ## Creating a widget From eefdf0c2ff7f38d53a97e0cf2d024019a8b2fb92 Mon Sep 17 00:00:00 2001 From: Jarrett Croll Date: Thu, 12 Jun 2025 14:43:02 -0400 Subject: [PATCH 6/7] Sendable support --- examples/react/src/App.tsx | 13 +++++++++---- examples/vanillajs/src/index.js | 25 ++++++++++++++++--------- 2 files changed, 25 insertions(+), 13 deletions(-) diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx index 40aa6a9..06fe6d2 100644 --- a/examples/react/src/App.tsx +++ b/examples/react/src/App.tsx @@ -24,6 +24,10 @@ const App = () => { return devices[Math.floor(Math.random() * devices.length)]; } + const sendFollowUp = () => { + publishEvent(new WidgetEvent("REPLACE_MESSAGE", `Hi, how are you enjoying your ${device}?`)); + } + useEffect(() => { const latest = getLatestEvent(); @@ -35,21 +39,19 @@ const App = () => { case "CURRENT_ACCOUNT_ID": setAccount(latest.data); setDevice(getDevice()); - - publishEvent(new WidgetEvent("REPLACE_MESSAGE", `Hi, how are you enjoying your ${device}?`)); break; } }, [device, events, getLatestEvent, publishEvent]); return ( -
+
React Inventory Widget
@@ -80,6 +82,9 @@ const App = () => {
+
); diff --git a/examples/vanillajs/src/index.js b/examples/vanillajs/src/index.js index ccb9ebf..77a4739 100644 --- a/examples/vanillajs/src/index.js +++ b/examples/vanillajs/src/index.js @@ -1,22 +1,26 @@ -import useWidgetStore, { WidgetEvent } from "@statflo/widget-sdk"; +import useWidgetStore, {WidgetEvent} from "@statflo/widget-sdk"; const root = document.getElementById("root"); -const { publishEvent } = useWidgetStore.getState(); +const {publishEvent} = useWidgetStore.getState(); let account = ""; let device = ""; const getDevice = () => { const devices = [ - 'Samsung Galaxy S25 Ultra', - 'Apple iPhone 16 Pro Max', - 'Google Pixel 9a', + "Samsung Galaxy S25 Ultra", + "Apple iPhone 16 Pro Max", + "Google Pixel 9a", ]; return devices[Math.floor(Math.random() * devices.length)]; } +const sendFollowUp = () => { + publishEvent(new WidgetEvent("REPLACE_MESSAGE", `Hi, how are you enjoying your ${device}?`)); +} + const render = (state) => { const latest = state.getLatestEvent(); @@ -25,21 +29,19 @@ const render = (state) => { case "CURRENT_ACCOUNT_ID": account = latest.data; device = getDevice(); - - publishEvent(new WidgetEvent("REPLACE_MESSAGE", `Hi, how are you enjoying your ${device}?`)); break; } } root.innerHTML = ` -
+
Vanilla JS Inventory Widget
@@ -70,9 +72,14 @@ const render = (state) => {
+
`; + + document.getElementById("send").addEventListener("click", sendFollowUp, false); }; render(useWidgetStore.getState()); From ffff722e433c5a0409231f123f826eb55bc89064 Mon Sep 17 00:00:00 2001 From: Jarrett Croll Date: Thu, 12 Jun 2025 14:58:46 -0400 Subject: [PATCH 7/7] formatting --- examples/react/src/App.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx index 06fe6d2..0d1022c 100644 --- a/examples/react/src/App.tsx +++ b/examples/react/src/App.tsx @@ -1,6 +1,6 @@ -import React, { useEffect, useState } from "react"; +import React, {useEffect, useState} from "react"; import "iframe-resizer-react"; -import { useStore } from "zustand"; +import {useStore} from "zustand"; import "./App.css"; import useWidgetStore, {WidgetEvent, WidgetState} from "@statflo/widget-sdk"; @@ -82,7 +82,8 @@ const App = () => {
-