@ubidots/react-html-canvas 0.2.1

package/README.md

@@ -0,0 +1,218 @@
+# @ubidots/react-html-canvas
+
+React library to interact with Ubidots dashboards from HTML Canvas widgets.
+
+## Instalación
+
+```bash
+pnpm add @ubidots/react-html-canvas
+```
+
+### Peer Dependencies
+
+- react >= 16.8
+- react-dom >= 16.8
+
+## Basic Usage
+
+Wrap your app with the Provider and use hooks to access dashboard data/events:
+
+```tsx
+import {
+  UbidotsProvider,
+  useUbidotsReady,
+  useUbidotsSelectedDevice,
+  useUbidotsActions,
+} from '@ubidots/react-html-canvas';
+
+function DeviceInfo() {
+  const ready = useUbidotsReady();
+  const device = useUbidotsSelectedDevice();
+  const { setDashboardDevice } = useUbidotsActions();
+
+  if (!ready) return <span>Loading...</span>;
+  return (
+    <div>
+      <pre>{JSON.stringify(device, null, 2)}</pre>
+      <button onClick={() => setDashboardDevice('device-id')}>
+        Select Device
+      </button>
+    </div>
+  );
+}
+
+export default function App() {
+  return (
+    <UbidotsProvider readyEvents={['receivedToken']}>
+      <DeviceInfo />
+    </UbidotsProvider>
+  );
+}
+```
+
+## API
+
+- Provider
+  - UbidotsProvider(props)
+    - props:
+      - onReady?: () => void
+      - readyEvents?: ("receivedToken" | "receivedJWTToken" | "selectedDevice" | ...)[]
+      - validateOrigin?: (origin: string) => boolean
+      - initialStateOverride?: Partial<State>
+
+- Hooks
+  - useUbidotsReady(): boolean
+  - useUbidotsToken(): string | null
+  - useUbidotsSelectedDevice(): Device | null
+  - useUbidotsSelectedDevices(): Device[] | null
+  - useUbidotsDashboardDateRange(): DateRange | null
+  - useUbidotsRealTimeStatus(): boolean | null
+  - useUbidotsDeviceObject(): DeviceObject | null
+  - useUbidotsDashboardObject(): DashboardObject | null
+  - useUbidotsSelectedFilters(): Filter[] | null
+  - useUbidotsWidget(): { settings: object; id: string } | null
+  - useUbidotsActions(): Actions
+  - useUbidotsAPI(): Ubidots API client (autenticado con token)
+
+- Acciones (useUbidotsActions)
+  - setDashboardDevice(deviceId: string)
+  - setDashboardMultipleDevices(deviceIds: string[])
+  - setDashboardDateRange(range: { startTime: number; endTime: number })
+  - setDashboardLayer(layerId: string)
+  - setRealTime(rt: boolean)
+  - refreshDashboard()
+  - openDrawer({ url: string; width: number })
+  - setFullScreen('toggle' | 'enable' | 'disable')
+  - getHeaders(): { Authorization | X-Auth-Token, Content-type }
+
+## Examples & Documentation
+
+### 📚 Complete Documentation
+
+See the [docs/](./docs/) folder for comprehensive API documentation:
+
+- **Provider**: [UbidotsProvider](./docs/UbidotsProvider.md)
+- **Hooks**: Individual documentation for each hook
+- **Types**: TypeScript interfaces and types
+- **Guides**: Setup, patterns, and best practices
+
+### 🎯 Working Examples
+
+See the [examples/](./examples/) folder for complete working examples:
+
+- **[Basic Usage](./examples/basic-usage/)** - Simple setup and device display
+- **[Device Selector](./examples/device-selector/)** - Interactive device selection with single/multi-select
+- **[Real-time Dashboard](./examples/real-time-dashboard/)** - Live data streaming and controls
+- **[Complete Widget](./examples/complete-widget/)** - Comprehensive example testing all features
+- **[With HOCs](./examples/with-hocs/)** - Higher-Order Components usage
+
+## Configurable Ready State
+
+You can control which events must occur before considering the system "ready":
+
+```tsx
+<UbidotsProvider readyEvents={['receivedToken', 'selectedDevice']} />
+```
+
+## Notes
+
+- The vanilla library (ubidots-html-canvas) was used as reference for events/methods. It's not a runtime dependency.
+- The useUbidotsAPI hook exposes an SDK client and authenticates it when the token arrives.
+
+## Development
+
+### Code Quality
+
+This project uses ESLint for linting and Prettier for code formatting to ensure consistent code style.
+
+#### Available Scripts
+
+```bash
+
+# Install dependencies
+pnpm install
+
+# Run linter
+pnpm run lint
+
+# Run linter with automatic fixes
+pnpm run lint:fix
+
+# Format code with Prettier
+pnpm run format
+
+# Check if code is properly formatted
+pnpm run format:check
+```
+
+#### VS Code Integration
+
+If you're using VS Code, the project includes settings that will:
+
+- Format code automatically on save
+- Run ESLint fixes on save
+- Show linting errors and warnings inline
+
+Make sure you have the following VS Code extensions installed:
+
+- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+
+#### Configuration Files
+
+- `eslint.config.js` - ESLint configuration with React, TypeScript, and accessibility rules
+- `.prettierrc` - Prettier formatting configuration
+- `.editorconfig` - Editor configuration for consistent coding styles
+- `.vscode/settings.json` - VS Code specific settings
+
+### CI/CD Pipelines
+
+This project uses GitHub Actions for continuous integration and deployment:
+
+#### Pull Request Checks (`.github/workflows/pr-checks.yml`)
+
+Runs on every PR and push to main/develop branches:
+
+- **Code Quality & Tests**: Runs on Node.js 18 and 20
+  - TypeScript compilation check
+  - ESLint code quality check
+  - Prettier formatting verification
+  - Unit tests execution
+  - Build verification
+- **Security Audit**: Checks for vulnerabilities in dependencies
+- **PR Summary**: Posts automated summary comment on PRs
+
+#### Deployment Pipeline (`.github/workflows/deploy.yml`)
+
+Manual deployment workflow with the following features:
+
+- **Manual Trigger**: Only runs when manually triggered from GitHub Actions
+- **Version Selection**: Choose patch, minor, or major version bump
+- **Pre-release Support**: Optional tag for beta/alpha releases
+- **Quality Checks**: Full linting, testing, and build verification
+- **Automated Versioning**: Bumps version and creates git tags
+- **NPM Publishing**: Publishes to NPM with appropriate tags
+- **GitHub Release**: Creates release with installation instructions
+
+### How to Deploy
+
+To deploy a new version:
+
+1. Go to the **Actions** tab in GitHub
+2. Select the **Deploy** workflow
+3. Click **Run workflow**
+4. Choose the version bump type (patch/minor/major)
+5. Optionally add a pre-release tag (e.g., "beta")
+6. Click **Run workflow**
+
+The deployment will:
+
+- Run all quality checks
+- Bump the version in package.json
+- Create a git tag
+- Publish to NPM
+- Create a GitHub release
+
+## License
+
+MIT

package/dist/context/UbidotsReducer.d.ts

@@ -0,0 +1,3 @@
+import { UbidotsAction, UbidotsState } from '../types/index.ts';
+export declare const initialState: UbidotsState;
+export declare function ubidotsReducer(state: UbidotsState, action: UbidotsAction): UbidotsState;

package/dist/context/__tests__/UbidotsProvider.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/context/__tests__/UbidotsReducer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/context/__tests__/messageHandlers.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/context/actions.d.ts

@@ -0,0 +1,5 @@
+import { OutboundActions } from '../types/index.ts';
+/**
+ * Create actions object with header generation
+ */
+export declare function createActions(jwtToken: string | null, token: string | null): OutboundActions;

package/dist/context/constants.d.ts

@@ -0,0 +1,38 @@
+import { ReadyEvent } from '../types/index.ts';
+export declare const INBOUND_EVENTS: {
+    readonly RECEIVED_TOKEN: "receivedToken";
+    readonly RECEIVED_JWT_TOKEN: "receivedJWTToken";
+    readonly SELECTED_DEVICE: "selectedDevice";
+    readonly SELECTED_DEVICES: "selectedDevices";
+    readonly SELECTED_DASHBOARD_DATE_RANGE: "selectedDashboardDateRange";
+    readonly SELECTED_DASHBOARD_OBJECT: "selectedDashboardObject";
+    readonly SELECTED_DEVICE_OBJECT: "selectedDeviceObject";
+    readonly SELECTED_DEVICE_OBJECTS: "selectedDeviceObjects";
+    readonly SELECTED_FILTERS: "selectedFilters";
+    readonly IS_REAL_TIME_ACTIVE: "isRealTimeActive";
+};
+export declare const OUTBOUND_EVENTS: {
+    readonly SET_DASHBOARD_DEVICE: "setDashboardDevice";
+    readonly SET_DASHBOARD_MULTIPLE_DEVICES: "setDashboardMultipleDevices";
+    readonly SET_DASHBOARD_DATE_RANGE: "setDashboardDateRange";
+    readonly SET_DASHBOARD_LAYER: "setDashboardLayer";
+    readonly SET_REAL_TIME: "setRealTime";
+    readonly REFRESH_DASHBOARD: "refreshDashboard";
+    readonly OPEN_DRAWER: "openDrawer";
+    readonly SET_FULL_SCREEN: "setFullScreen";
+};
+export declare const ACTION_TYPES: {
+    readonly RECEIVED_TOKEN: "RECEIVED_TOKEN";
+    readonly RECEIVED_JWT_TOKEN: "RECEIVED_JWT_TOKEN";
+    readonly SELECTED_DEVICE: "SELECTED_DEVICE";
+    readonly SELECTED_DEVICES: "SELECTED_DEVICES";
+    readonly SELECTED_DASHBOARD_DATE_RANGE: "SELECTED_DASHBOARD_DATE_RANGE";
+    readonly SELECTED_DASHBOARD_OBJECT: "SELECTED_DASHBOARD_OBJECT";
+    readonly SELECTED_DEVICE_OBJECT: "SELECTED_DEVICE_OBJECT";
+    readonly SELECTED_DEVICE_OBJECTS: "SELECTED_DEVICE_OBJECTS";
+    readonly SELECTED_FILTERS: "SELECTED_FILTERS";
+    readonly REAL_TIME_STATUS: "REAL_TIME_STATUS";
+    readonly SET_READY: "SET_READY";
+    readonly SET_WIDGET: "SET_WIDGET";
+};
+export declare const DEFAULT_READY_EVENTS: ReadyEvent[];

package/dist/context/messageHandlers.d.ts

@@ -0,0 +1,14 @@
+import { Dispatch } from 'react';
+import { UbidotsAction, UbidotsState, ReadyEvent } from '../types/index.ts';
+/**
+ * Main message handler that uses object mapping instead of switch
+ */
+export declare function handleInboundMessage(event: string, payload: unknown, dispatch: Dispatch<UbidotsAction>, satisfiedEventsRef: React.MutableRefObject<Set<ReadyEvent>>): void;
+/**
+ * Check if all required events are satisfied and update ready state
+ *
+ * This function checks two conditions:
+ * 1. All required events from readyEvents array have been satisfied
+ * 2. OR the state has all required values defined (for public dashboards)
+ */
+export declare function checkReadyState(readyEvents: ReadyEvent[], satisfiedEventsRef: React.MutableRefObject<Set<ReadyEvent>>, readyRef: React.MutableRefObject<boolean>, dispatch: Dispatch<UbidotsAction>, state: UbidotsState, onReady?: () => void): void;

package/dist/context/ubidots.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+import { UbidotsState, UbidotsActions, ReadyEvent } from '../types/index.ts';
+import { initialState } from './UbidotsReducer';
+export interface UbidotsContextValue {
+    state: UbidotsState;
+    actions: UbidotsActions;
+}
+/**
+ * Main hook for accessing Ubidots context
+ *
+ * This hook provides access to the Ubidots state and actions.
+ * Must be used within a UbidotsProvider component.
+ *
+ * @returns The context value containing state and actions
+ * @throws If used outside of UbidotsProvider
+ */
+export declare function useUbidots(): UbidotsContextValue;
+export interface UbidotsProviderProps {
+    children: React.ReactNode;
+    onReady?: () => void;
+    readyEvents?: ReadyEvent[];
+    validateOrigin?: (origin: string) => boolean;
+    initialStateOverride?: Partial<typeof initialState>;
+}
+export declare function UbidotsProvider({ children, onReady, readyEvents, validateOrigin, initialStateOverride, }: UbidotsProviderProps): React.JSX.Element;

package/dist/hocs/compose.d.ts

@@ -0,0 +1 @@
+export declare function compose<T>(...fns: Array<(c: T) => T>): (c: T) => T;

package/dist/hocs/index.d.ts

@@ -0,0 +1,3 @@
+export * from './withSelectedDevice';
+export * from './withUbidotsActions';
+export * from './compose';

package/dist/hocs/withSelectedDevice.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { Device } from '../types/index.ts';
+export declare function withSelectedDevice<P extends {
+    selectedDevice?: Device | null;
+}>(Component: React.ComponentType<P>): (props: Omit<P, "selectedDevice">) => React.JSX.Element;

package/dist/hocs/withUbidotsActions.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { UbidotsActions } from '../types/index.ts';
+export declare function withUbidotsActions<P extends {
+    ubidotsActions?: UbidotsActions;
+}>(Component: React.ComponentType<P>): (props: Omit<P, "ubidotsActions">) => React.JSX.Element;

package/dist/hooks/__tests__/useUbidotsActions.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export * from './useUbidotsReady';
+export * from './useUbidotsSelections';
+export * from './useUbidotsActions';
+export * from './useUbidotsAPI';

package/dist/hooks/useUbidotsAPI.d.ts

@@ -0,0 +1,6 @@
+export interface UbidotsJSClient extends Record<string, unknown> {
+    Auth: {
+        authenticate: (token: string) => void;
+    };
+}
+export declare function useUbidotsAPI(): UbidotsJSClient | null;

package/dist/hooks/useUbidotsActions.d.ts

@@ -0,0 +1 @@
+export declare function useUbidotsActions(): import('..').OutboundActions;

package/dist/hooks/useUbidotsReady.d.ts

@@ -0,0 +1 @@
+export declare function useUbidotsReady(): boolean;

package/dist/hooks/useUbidotsSelections.d.ts

@@ -0,0 +1,11 @@
+export declare function useUbidotsToken(): string | null;
+export declare function useUbidotsJWT(): string | null;
+export declare function useUbidotsSelectedDevice(): import('..').Device | null;
+export declare function useUbidotsSelectedDevices(): import('..').Device[] | null;
+export declare function useUbidotsDashboardDateRange(): import('..').DateRange | null;
+export declare function useUbidotsRealTimeStatus(): boolean | null;
+export declare function useUbidotsDeviceObject(): import('..').DeviceObject | null;
+export declare function useUbidotsDashboardObject(): import('..').DashboardObject | null;
+export declare function useUbidotsWidget(): import('..').WidgetInfo | null;
+export declare function useUbidotsSelectedDeviceObjects(): import('..').DeviceObject[] | null;
+export declare function useUbidotsSelectedFilters(): import('..').FilterValue[] | null;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { useUbidots, UbidotsProvider } from './context/ubidots';
+export * from './hooks';
+export * from './hocs';
+export * from './types';

package/dist/react-html-canvas.cjs.js

@@ -0,0 +1 @@
+"use strict";var g=Object.defineProperty,w=Object.defineProperties;var m=Object.getOwnPropertyDescriptors;var O=Object.getOwnPropertySymbols;var j=Object.prototype.hasOwnProperty,N=Object.prototype.propertyIsEnumerable;var I=(e,t,E)=>t in e?g(e,t,{enumerable:!0,configurable:!0,writable:!0,value:E}):e[t]=E,c=(e,t)=>{for(var E in t||(t={}))j.call(t,E)&&I(e,E,t[E]);if(O)for(var E of O(t))N.call(t,E)&&I(e,E,t[E]);return e},r=(e,t)=>w(e,m(t));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),L=require("@ubidots/ubidots-javascript-library"),D={RECEIVED_TOKEN:"receivedToken",RECEIVED_JWT_TOKEN:"receivedJWTToken",SELECTED_DEVICE:"selectedDevice",SELECTED_DEVICES:"selectedDevices",SELECTED_DASHBOARD_DATE_RANGE:"selectedDashboardDateRange",SELECTED_DASHBOARD_OBJECT:"selectedDashboardObject",SELECTED_DEVICE_OBJECT:"selectedDeviceObject",SELECTED_DEVICE_OBJECTS:"selectedDeviceObjects",SELECTED_FILTERS:"selectedFilters",IS_REAL_TIME_ACTIVE:"isRealTimeActive"},u={SET_DASHBOARD_DEVICE:"setDashboardDevice",SET_DASHBOARD_MULTIPLE_DEVICES:"setDashboardMultipleDevices",SET_DASHBOARD_DATE_RANGE:"setDashboardDateRange",SET_DASHBOARD_LAYER:"setDashboardLayer",SET_REAL_TIME:"setRealTime",REFRESH_DASHBOARD:"refreshDashboard",OPEN_DRAWER:"openDrawer",SET_FULL_SCREEN:"setFullScreen"},s={RECEIVED_TOKEN:"RECEIVED_TOKEN",RECEIVED_JWT_TOKEN:"RECEIVED_JWT_TOKEN",SELECTED_DEVICE:"SELECTED_DEVICE",SELECTED_DEVICES:"SELECTED_DEVICES",SELECTED_DASHBOARD_DATE_RANGE:"SELECTED_DASHBOARD_DATE_RANGE",SELECTED_DASHBOARD_OBJECT:"SELECTED_DASHBOARD_OBJECT",SELECTED_DEVICE_OBJECT:"SELECTED_DEVICE_OBJECT",SELECTED_DEVICE_OBJECTS:"SELECTED_DEVICE_OBJECTS",SELECTED_FILTERS:"SELECTED_FILTERS",REAL_TIME_STATUS:"REAL_TIME_STATUS",SET_READY:"SET_READY",SET_WIDGET:"SET_WIDGET"},J=["receivedToken"],H={ready:!1,token:null,jwtToken:null,selectedDevice:null,selectedDevices:null,dateRange:null,dashboardObject:null,deviceObject:null,selectedDeviceObjects:null,selectedFilters:null,realTime:null,widget:null},k={[s.RECEIVED_TOKEN]:(e,t)=>r(c({},e),{token:t.payload}),[s.RECEIVED_JWT_TOKEN]:(e,t)=>r(c({},e),{jwtToken:t.payload}),[s.SELECTED_DEVICE]:(e,t)=>r(c({},e),{selectedDevice:t.payload}),[s.SELECTED_DEVICES]:(e,t)=>r(c({},e),{selectedDevices:t.payload}),[s.SELECTED_DASHBOARD_DATE_RANGE]:(e,t)=>r(c({},e),{dateRange:t.payload}),[s.SELECTED_DASHBOARD_OBJECT]:(e,t)=>r(c({},e),{dashboardObject:t.payload}),[s.SELECTED_DEVICE_OBJECT]:(e,t)=>r(c({},e),{deviceObject:t.payload}),[s.SELECTED_DEVICE_OBJECTS]:(e,t)=>r(c({},e),{selectedDeviceObjects:t.payload}),[s.SELECTED_FILTERS]:(e,t)=>r(c({},e),{selectedFilters:t.payload}),[s.REAL_TIME_STATUS]:(e,t)=>r(c({},e),{realTime:t.payload}),[s.SET_READY]:(e,t)=>r(c({},e),{ready:t.payload}),[s.SET_WIDGET]:(e,t)=>r(c({},e),{widget:t.payload})};function F(e,t){const E=k[t.type];return E?E(e,t):e}const M={[D.RECEIVED_TOKEN]:(e,t,E)=>{t({type:s.RECEIVED_TOKEN,payload:e}),E.current.add("receivedToken")},[D.RECEIVED_JWT_TOKEN]:(e,t,E)=>{t({type:s.RECEIVED_JWT_TOKEN,payload:e}),E.current.add("receivedJWTToken")},[D.SELECTED_DEVICE]:(e,t,E)=>{let n=null;if(typeof e=="string"){const d=e.split(",")[0].trim();d&&(n={id:d})}t({type:s.SELECTED_DEVICE,payload:n}),E.current.add("selectedDevice")},[D.SELECTED_DEVICES]:(e,t,E)=>{t({type:s.SELECTED_DEVICES,payload:e}),E.current.add("selectedDevices")},[D.SELECTED_DASHBOARD_DATE_RANGE]:(e,t,E)=>{t({type:s.SELECTED_DASHBOARD_DATE_RANGE,payload:e}),E.current.add("selectedDashboardDateRange")},[D.SELECTED_DASHBOARD_OBJECT]:(e,t,E)=>{t({type:s.SELECTED_DASHBOARD_OBJECT,payload:e}),E.current.add("selectedDashboardObject")},[D.SELECTED_DEVICE_OBJECT]:(e,t,E)=>{t({type:s.SELECTED_DEVICE_OBJECT,payload:e}),E.current.add("selectedDeviceObject")},[D.SELECTED_DEVICE_OBJECTS]:(e,t,E)=>{t({type:s.SELECTED_DEVICE_OBJECTS,payload:e}),E.current.add("selectedDeviceObjects")},[D.SELECTED_FILTERS]:(e,t,E)=>{t({type:s.SELECTED_FILTERS,payload:e}),E.current.add("selectedFilters")},[D.IS_REAL_TIME_ACTIVE]:(e,t,E)=>{t({type:s.REAL_TIME_STATUS,payload:e}),E.current.add("isRealTimeActive")}};function W(e,t,E,n){const d=M[e];d&&d(t,E,n)}function P(e){const t=e.token!==null||e.jwtToken!==null,E=e.selectedDevice!==null,n=e.dateRange!==null,d=e.dashboardObject!==null;return t&&E&&n&&d}function p(e,t,E,n,d,i){if(!E.current){const l=e.every(_=>t.current.has(_)),S=P(d);(l||S)&&(E.current=!0,n({type:s.SET_READY,payload:!0}),i==null||i())}}function T(e,t){typeof window!="undefined"&&window.parent&&window.parent.postMessage({event:e,payload:t},"*")}function K(e,t){return e?{Authorization:`Bearer ${e}`,"Content-type":"application/json"}:t?{"X-Auth-Token":t,"Content-type":"application/json"}:{"Content-type":"application/json"}}function G(e){if(!e||typeof e!="object")return console.error("[setDashboardDateRange] Invalid date range: must be an object"),!1;const{startTime:t,endTime:E}=e;return typeof t!="number"||typeof E!="number"?(console.error("[setDashboardDateRange] Invalid date range: startTime and endTime must be numbers"),!1):t>=E?(console.error(`[setDashboardDateRange] Invalid date range: startTime (${new Date(t).toISOString()}) must be before endTime (${new Date(E).toISOString()})`),!1):!0}const Y={setDashboardDevice:e=>T(u.SET_DASHBOARD_DEVICE,e),setDashboardMultipleDevices:e=>T(u.SET_DASHBOARD_MULTIPLE_DEVICES,e),setDashboardDateRange:e=>{G(e)&&T(u.SET_DASHBOARD_DATE_RANGE,e)},setDashboardLayer:e=>T(u.SET_DASHBOARD_LAYER,e),setRealTime:e=>T(u.SET_REAL_TIME,e),refreshDashboard:()=>T(u.REFRESH_DASHBOARD),openDrawer:e=>{const t=typeof window!="undefined"?window.widgetId:"react-widget";T(u.OPEN_DRAWER,{drawerInfo:e,id:t})},setFullScreen:e=>T(u.SET_FULL_SCREEN,e)};function x(e,t){return r(c({},Y),{getHeaders:()=>K(e,t)})}const v=o.createContext(void 0);function a(){const e=o.useContext(v);if(!e)throw new Error("useUbidots must be used within UbidotsProvider");return e}function $({children:e,onReady:t,readyEvents:E=J,validateOrigin:n,initialStateOverride:d}){const[i,l]=o.useReducer(F,c(c({},H),d)),S=o.useRef(!1),_=o.useRef(new Set),b=o.useCallback(C=>n?n(C):!0,[n]);o.useEffect(()=>{function C(A){if(!b(A.origin))return;const{event:f,payload:y}=A.data||{};f&&(W(f,y,l,_),p(E,_,S,l,i,t))}return window.addEventListener("message",C),()=>window.removeEventListener("message",C)},[b,t,E,i]),o.useEffect(()=>{p(E,_,S,l,i,t)},[i,E,t]);const R=o.useMemo(()=>x(i.jwtToken,i.token),[i.jwtToken,i.token]),B=o.useMemo(()=>({state:i,actions:R}),[i,R]);return o.createElement(v.Provider,{value:B},e)}function q(){const{state:e}=a();return e.ready}function h(){const{state:e}=a();return e.token}function z(){const{state:e}=a();return e.jwtToken}function U(){const{state:e}=a();return e.selectedDevice}function X(){const{state:e}=a();return e.selectedDevices}function Q(){const{state:e}=a();return e.dateRange}function Z(){const{state:e}=a();return e.realTime}function ee(){const{state:e}=a();return e.deviceObject}function te(){const{state:e}=a();return e.dashboardObject}function Ee(){const{state:e}=a();return e.widget}function se(){const{state:e}=a();return e.selectedDeviceObjects}function ne(){const{state:e}=a();return e.selectedFilters}function V(){return a().actions}function ce(){const e=h(),t=o.useRef(null),[E,n]=o.useState(!1);return o.useEffect(()=>{!t.current&&L.Ubidots&&(t.current=L.Ubidots)},[]),o.useEffect(()=>{t.current&&e&&!E&&(t.current.Auth.authenticate(e),n(!0))},[e,E]),!E||!t.current?null:t.current}function oe(e){return function(E){const n=U();return o.createElement(e,r(c({},E),{selectedDevice:n}))}}function re(e){return function(E){const n=V();return o.createElement(e,r(c({},E),{ubidotsActions:n}))}}function ie(...e){return t=>e.reduceRight((E,n)=>n(E),t)}exports.UbidotsProvider=$;exports.compose=ie;exports.useUbidots=a;exports.useUbidotsAPI=ce;exports.useUbidotsActions=V;exports.useUbidotsDashboardDateRange=Q;exports.useUbidotsDashboardObject=te;exports.useUbidotsDeviceObject=ee;exports.useUbidotsJWT=z;exports.useUbidotsReady=q;exports.useUbidotsRealTimeStatus=Z;exports.useUbidotsSelectedDevice=U;exports.useUbidotsSelectedDeviceObjects=se;exports.useUbidotsSelectedDevices=X;exports.useUbidotsSelectedFilters=ne;exports.useUbidotsToken=h;exports.useUbidotsWidget=Ee;exports.withSelectedDevice=oe;exports.withUbidotsActions=re;

package/dist/react-html-canvas.es.js

@@ -0,0 +1,370 @@
+var w = Object.defineProperty, g = Object.defineProperties;
+var U = Object.getOwnPropertyDescriptors;
+var L = Object.getOwnPropertySymbols;
+var N = Object.prototype.hasOwnProperty, j = Object.prototype.propertyIsEnumerable;
+var p = (e, t, E) => t in e ? w(e, t, { enumerable: !0, configurable: !0, writable: !0, value: E }) : e[t] = E, r = (e, t) => {
+  for (var E in t || (t = {}))
+    N.call(t, E) && p(e, E, t[E]);
+  if (L)
+    for (var E of L(t))
+      j.call(t, E) && p(e, E, t[E]);
+  return e;
+}, c = (e, t) => g(e, U(t));
+import R, { createContext as H, useContext as J, useReducer as k, useRef as A, useCallback as F, useEffect as C, useMemo as v, useState as M } from "react";
+import { Ubidots as h } from "@ubidots/ubidots-javascript-library";
+const i = {
+  RECEIVED_TOKEN: "receivedToken",
+  RECEIVED_JWT_TOKEN: "receivedJWTToken",
+  SELECTED_DEVICE: "selectedDevice",
+  SELECTED_DEVICES: "selectedDevices",
+  SELECTED_DASHBOARD_DATE_RANGE: "selectedDashboardDateRange",
+  SELECTED_DASHBOARD_OBJECT: "selectedDashboardObject",
+  SELECTED_DEVICE_OBJECT: "selectedDeviceObject",
+  SELECTED_DEVICE_OBJECTS: "selectedDeviceObjects",
+  SELECTED_FILTERS: "selectedFilters",
+  IS_REAL_TIME_ACTIVE: "isRealTimeActive"
+}, d = {
+  SET_DASHBOARD_DEVICE: "setDashboardDevice",
+  SET_DASHBOARD_MULTIPLE_DEVICES: "setDashboardMultipleDevices",
+  SET_DASHBOARD_DATE_RANGE: "setDashboardDateRange",
+  SET_DASHBOARD_LAYER: "setDashboardLayer",
+  SET_REAL_TIME: "setRealTime",
+  REFRESH_DASHBOARD: "refreshDashboard",
+  OPEN_DRAWER: "openDrawer",
+  SET_FULL_SCREEN: "setFullScreen"
+}, n = {
+  RECEIVED_TOKEN: "RECEIVED_TOKEN",
+  RECEIVED_JWT_TOKEN: "RECEIVED_JWT_TOKEN",
+  SELECTED_DEVICE: "SELECTED_DEVICE",
+  SELECTED_DEVICES: "SELECTED_DEVICES",
+  SELECTED_DASHBOARD_DATE_RANGE: "SELECTED_DASHBOARD_DATE_RANGE",
+  SELECTED_DASHBOARD_OBJECT: "SELECTED_DASHBOARD_OBJECT",
+  SELECTED_DEVICE_OBJECT: "SELECTED_DEVICE_OBJECT",
+  SELECTED_DEVICE_OBJECTS: "SELECTED_DEVICE_OBJECTS",
+  SELECTED_FILTERS: "SELECTED_FILTERS",
+  REAL_TIME_STATUS: "REAL_TIME_STATUS",
+  SET_READY: "SET_READY",
+  SET_WIDGET: "SET_WIDGET"
+}, W = ["receivedToken"], K = {
+  ready: !1,
+  token: null,
+  jwtToken: null,
+  selectedDevice: null,
+  selectedDevices: null,
+  dateRange: null,
+  dashboardObject: null,
+  deviceObject: null,
+  selectedDeviceObjects: null,
+  selectedFilters: null,
+  realTime: null,
+  widget: null
+}, G = {
+  [n.RECEIVED_TOKEN]: (e, t) => c(r({}, e), {
+    token: t.payload
+  }),
+  [n.RECEIVED_JWT_TOKEN]: (e, t) => c(r({}, e), {
+    jwtToken: t.payload
+  }),
+  [n.SELECTED_DEVICE]: (e, t) => c(r({}, e), {
+    selectedDevice: t.payload
+  }),
+  [n.SELECTED_DEVICES]: (e, t) => c(r({}, e), {
+    selectedDevices: t.payload
+  }),
+  [n.SELECTED_DASHBOARD_DATE_RANGE]: (e, t) => c(r({}, e), {
+    dateRange: t.payload
+  }),
+  [n.SELECTED_DASHBOARD_OBJECT]: (e, t) => c(r({}, e), {
+    dashboardObject: t.payload
+  }),
+  [n.SELECTED_DEVICE_OBJECT]: (e, t) => c(r({}, e), {
+    deviceObject: t.payload
+  }),
+  [n.SELECTED_DEVICE_OBJECTS]: (e, t) => c(r({}, e), {
+    selectedDeviceObjects: t.payload
+  }),
+  [n.SELECTED_FILTERS]: (e, t) => c(r({}, e), {
+    selectedFilters: t.payload
+  }),
+  [n.REAL_TIME_STATUS]: (e, t) => c(r({}, e), {
+    realTime: t.payload
+  }),
+  [n.SET_READY]: (e, t) => c(r({}, e), {
+    ready: t.payload
+  }),
+  [n.SET_WIDGET]: (e, t) => c(r({}, e), {
+    widget: t.payload
+  })
+};
+function P(e, t) {
+  const E = G[t.type];
+  return E ? E(e, t) : e;
+}
+const Y = {
+  [i.RECEIVED_TOKEN]: (e, t, E) => {
+    t({ type: n.RECEIVED_TOKEN, payload: e }), E.current.add("receivedToken");
+  },
+  [i.RECEIVED_JWT_TOKEN]: (e, t, E) => {
+    t({
+      type: n.RECEIVED_JWT_TOKEN,
+      payload: e
+    }), E.current.add("receivedJWTToken");
+  },
+  [i.SELECTED_DEVICE]: (e, t, E) => {
+    let s = null;
+    if (typeof e == "string") {
+      const D = e.split(",")[0].trim();
+      D && (s = { id: D });
+    }
+    t({ type: n.SELECTED_DEVICE, payload: s }), E.current.add("selectedDevice");
+  },
+  [i.SELECTED_DEVICES]: (e, t, E) => {
+    t({
+      type: n.SELECTED_DEVICES,
+      payload: e
+    }), E.current.add("selectedDevices");
+  },
+  [i.SELECTED_DASHBOARD_DATE_RANGE]: (e, t, E) => {
+    t({
+      type: n.SELECTED_DASHBOARD_DATE_RANGE,
+      payload: e
+    }), E.current.add("selectedDashboardDateRange");
+  },
+  [i.SELECTED_DASHBOARD_OBJECT]: (e, t, E) => {
+    t({
+      type: n.SELECTED_DASHBOARD_OBJECT,
+      payload: e
+    }), E.current.add("selectedDashboardObject");
+  },
+  [i.SELECTED_DEVICE_OBJECT]: (e, t, E) => {
+    t({
+      type: n.SELECTED_DEVICE_OBJECT,
+      payload: e
+    }), E.current.add("selectedDeviceObject");
+  },
+  [i.SELECTED_DEVICE_OBJECTS]: (e, t, E) => {
+    t({
+      type: n.SELECTED_DEVICE_OBJECTS,
+      payload: e
+    }), E.current.add("selectedDeviceObjects");
+  },
+  [i.SELECTED_FILTERS]: (e, t, E) => {
+    t({
+      type: n.SELECTED_FILTERS,
+      payload: e
+    }), E.current.add("selectedFilters");
+  },
+  [i.IS_REAL_TIME_ACTIVE]: (e, t, E) => {
+    t({
+      type: n.REAL_TIME_STATUS,
+      payload: e
+    }), E.current.add("isRealTimeActive");
+  }
+};
+function x(e, t, E, s) {
+  const D = Y[e];
+  D && D(t, E, s);
+}
+function $(e) {
+  const t = e.token !== null || e.jwtToken !== null, E = e.selectedDevice !== null, s = e.dateRange !== null, D = e.dashboardObject !== null;
+  return t && E && s && D;
+}
+function V(e, t, E, s, D, a) {
+  if (!E.current) {
+    const u = e.every(
+      (_) => t.current.has(_)
+    ), l = $(D);
+    (u || l) && (E.current = !0, s({ type: n.SET_READY, payload: !0 }), a == null || a());
+  }
+}
+function T(e, t) {
+  typeof window != "undefined" && window.parent && window.parent.postMessage({ event: e, payload: t }, "*");
+}
+function z(e, t) {
+  return e ? {
+    Authorization: `Bearer ${e}`,
+    "Content-type": "application/json"
+  } : t ? {
+    "X-Auth-Token": t,
+    "Content-type": "application/json"
+  } : { "Content-type": "application/json" };
+}
+function X(e) {
+  if (!e || typeof e != "object")
+    return console.error(
+      "[setDashboardDateRange] Invalid date range: must be an object"
+    ), !1;
+  const { startTime: t, endTime: E } = e;
+  return typeof t != "number" || typeof E != "number" ? (console.error(
+    "[setDashboardDateRange] Invalid date range: startTime and endTime must be numbers"
+  ), !1) : t >= E ? (console.error(
+    `[setDashboardDateRange] Invalid date range: startTime (${new Date(t).toISOString()}) must be before endTime (${new Date(E).toISOString()})`
+  ), !1) : !0;
+}
+const q = {
+  setDashboardDevice: (e) => T(d.SET_DASHBOARD_DEVICE, e),
+  setDashboardMultipleDevices: (e) => T(d.SET_DASHBOARD_MULTIPLE_DEVICES, e),
+  setDashboardDateRange: (e) => {
+    X(e) && T(d.SET_DASHBOARD_DATE_RANGE, e);
+  },
+  setDashboardLayer: (e) => T(d.SET_DASHBOARD_LAYER, e),
+  setRealTime: (e) => T(d.SET_REAL_TIME, e),
+  refreshDashboard: () => T(d.REFRESH_DASHBOARD),
+  openDrawer: (e) => {
+    const t = typeof window != "undefined" ? window.widgetId : "react-widget";
+    T(d.OPEN_DRAWER, { drawerInfo: e, id: t });
+  },
+  setFullScreen: (e) => T(d.SET_FULL_SCREEN, e)
+};
+function Q(e, t) {
+  return c(r({}, q), {
+    getHeaders: () => z(e, t)
+  });
+}
+const B = H(
+  void 0
+);
+function o() {
+  const e = J(B);
+  if (!e) throw new Error("useUbidots must be used within UbidotsProvider");
+  return e;
+}
+function re({
+  children: e,
+  onReady: t,
+  readyEvents: E = W,
+  validateOrigin: s,
+  initialStateOverride: D
+}) {
+  const [a, u] = k(P, r(r({}, K), D)), l = A(!1), _ = A(/* @__PURE__ */ new Set()), b = F(
+    (S) => s ? s(S) : !0,
+    [s]
+  );
+  C(() => {
+    function S(f) {
+      if (!b(f.origin)) return;
+      const { event: I, payload: m } = f.data || {};
+      I && (x(I, m, u, _), V(
+        E,
+        _,
+        l,
+        u,
+        a,
+        t
+      ));
+    }
+    return window.addEventListener("message", S), () => window.removeEventListener("message", S);
+  }, [b, t, E, a]), C(() => {
+    V(
+      E,
+      _,
+      l,
+      u,
+      a,
+      t
+    );
+  }, [a, E, t]);
+  const O = v(
+    () => Q(a.jwtToken, a.token),
+    [a.jwtToken, a.token]
+  ), y = v(
+    () => ({ state: a, actions: O }),
+    [a, O]
+  );
+  return /* @__PURE__ */ R.createElement(B.Provider, { value: y }, e);
+}
+function ce() {
+  const { state: e } = o();
+  return e.ready;
+}
+function Z() {
+  const { state: e } = o();
+  return e.token;
+}
+function ae() {
+  const { state: e } = o();
+  return e.jwtToken;
+}
+function ee() {
+  const { state: e } = o();
+  return e.selectedDevice;
+}
+function oe() {
+  const { state: e } = o();
+  return e.selectedDevices;
+}
+function De() {
+  const { state: e } = o();
+  return e.dateRange;
+}
+function ie() {
+  const { state: e } = o();
+  return e.realTime;
+}
+function de() {
+  const { state: e } = o();
+  return e.deviceObject;
+}
+function Te() {
+  const { state: e } = o();
+  return e.dashboardObject;
+}
+function ue() {
+  const { state: e } = o();
+  return e.widget;
+}
+function _e() {
+  const { state: e } = o();
+  return e.selectedDeviceObjects;
+}
+function le() {
+  const { state: e } = o();
+  return e.selectedFilters;
+}
+function te() {
+  return o().actions;
+}
+function Se() {
+  const e = Z(), t = A(null), [E, s] = M(!1);
+  return C(() => {
+    !t.current && h && (t.current = h);
+  }, []), C(() => {
+    t.current && e && !E && (t.current.Auth.authenticate(e), s(!0));
+  }, [e, E]), !E || !t.current ? null : t.current;
+}
+function Ce(e) {
+  return function(E) {
+    const s = ee();
+    return /* @__PURE__ */ R.createElement(e, c(r({}, E), { selectedDevice: s }));
+  };
+}
+function Ae(e) {
+  return function(E) {
+    const s = te();
+    return /* @__PURE__ */ R.createElement(e, c(r({}, E), { ubidotsActions: s }));
+  };
+}
+function Re(...e) {
+  return (t) => e.reduceRight((E, s) => s(E), t);
+}
+export {
+  re as UbidotsProvider,
+  Re as compose,
+  o as useUbidots,
+  Se as useUbidotsAPI,
+  te as useUbidotsActions,
+  De as useUbidotsDashboardDateRange,
+  Te as useUbidotsDashboardObject,
+  de as useUbidotsDeviceObject,
+  ae as useUbidotsJWT,
+  ce as useUbidotsReady,
+  ie as useUbidotsRealTimeStatus,
+  ee as useUbidotsSelectedDevice,
+  _e as useUbidotsSelectedDeviceObjects,
+  oe as useUbidotsSelectedDevices,
+  le as useUbidotsSelectedFilters,
+  Z as useUbidotsToken,
+  ue as useUbidotsWidget,
+  Ce as withSelectedDevice,
+  Ae as withUbidotsActions
+};

package/dist/react-html-canvas.umd.js

@@ -0,0 +1 @@
+(function(n,s){typeof exports=="object"&&typeof module!="undefined"?s(exports,require("react"),require("@ubidots/ubidots-javascript-library")):typeof define=="function"&&define.amd?define(["exports","react","@ubidots/ubidots-javascript-library"],s):(n=typeof globalThis!="undefined"?globalThis:n||self,s(n.UbidotsReactHtmlCanvas={},n.React,n.UbidotsJS))})(this,function(n,s,D){"use strict";var ie=Object.defineProperty,oe=Object.defineProperties;var ce=Object.getOwnPropertyDescriptors;var p=Object.getOwnPropertySymbols;var de=Object.prototype.hasOwnProperty,re=Object.prototype.propertyIsEnumerable;var B=(n,s,D)=>s in n?ie(n,s,{enumerable:!0,configurable:!0,writable:!0,value:D}):n[s]=D,c=(n,s)=>{for(var D in s||(s={}))de.call(s,D)&&B(n,D,s[D]);if(p)for(var D of p(s))re.call(s,D)&&B(n,D,s[D]);return n},d=(n,s)=>oe(n,ce(s));const T={RECEIVED_TOKEN:"receivedToken",RECEIVED_JWT_TOKEN:"receivedJWTToken",SELECTED_DEVICE:"selectedDevice",SELECTED_DEVICES:"selectedDevices",SELECTED_DASHBOARD_DATE_RANGE:"selectedDashboardDateRange",SELECTED_DASHBOARD_OBJECT:"selectedDashboardObject",SELECTED_DEVICE_OBJECT:"selectedDeviceObject",SELECTED_DEVICE_OBJECTS:"selectedDeviceObjects",SELECTED_FILTERS:"selectedFilters",IS_REAL_TIME_ACTIVE:"isRealTimeActive"},l={SET_DASHBOARD_DEVICE:"setDashboardDevice",SET_DASHBOARD_MULTIPLE_DEVICES:"setDashboardMultipleDevices",SET_DASHBOARD_DATE_RANGE:"setDashboardDateRange",SET_DASHBOARD_LAYER:"setDashboardLayer",SET_REAL_TIME:"setRealTime",REFRESH_DASHBOARD:"refreshDashboard",OPEN_DRAWER:"openDrawer",SET_FULL_SCREEN:"setFullScreen"},i={RECEIVED_TOKEN:"RECEIVED_TOKEN",RECEIVED_JWT_TOKEN:"RECEIVED_JWT_TOKEN",SELECTED_DEVICE:"SELECTED_DEVICE",SELECTED_DEVICES:"SELECTED_DEVICES",SELECTED_DASHBOARD_DATE_RANGE:"SELECTED_DASHBOARD_DATE_RANGE",SELECTED_DASHBOARD_OBJECT:"SELECTED_DASHBOARD_OBJECT",SELECTED_DEVICE_OBJECT:"SELECTED_DEVICE_OBJECT",SELECTED_DEVICE_OBJECTS:"SELECTED_DEVICE_OBJECTS",SELECTED_FILTERS:"SELECTED_FILTERS",REAL_TIME_STATUS:"REAL_TIME_STATUS",SET_READY:"SET_READY",SET_WIDGET:"SET_WIDGET"},y=["receivedToken"],m={ready:!1,token:null,jwtToken:null,selectedDevice:null,selectedDevices:null,dateRange:null,dashboardObject:null,deviceObject:null,selectedDeviceObjects:null,selectedFilters:null,realTime:null,widget:null},j={[i.RECEIVED_TOKEN]:(e,t)=>d(c({},e),{token:t.payload}),[i.RECEIVED_JWT_TOKEN]:(e,t)=>d(c({},e),{jwtToken:t.payload}),[i.SELECTED_DEVICE]:(e,t)=>d(c({},e),{selectedDevice:t.payload}),[i.SELECTED_DEVICES]:(e,t)=>d(c({},e),{selectedDevices:t.payload}),[i.SELECTED_DASHBOARD_DATE_RANGE]:(e,t)=>d(c({},e),{dateRange:t.payload}),[i.SELECTED_DASHBOARD_OBJECT]:(e,t)=>d(c({},e),{dashboardObject:t.payload}),[i.SELECTED_DEVICE_OBJECT]:(e,t)=>d(c({},e),{deviceObject:t.payload}),[i.SELECTED_DEVICE_OBJECTS]:(e,t)=>d(c({},e),{selectedDeviceObjects:t.payload}),[i.SELECTED_FILTERS]:(e,t)=>d(c({},e),{selectedFilters:t.payload}),[i.REAL_TIME_STATUS]:(e,t)=>d(c({},e),{realTime:t.payload}),[i.SET_READY]:(e,t)=>d(c({},e),{ready:t.payload}),[i.SET_WIDGET]:(e,t)=>d(c({},e),{widget:t.payload})};function w(e,t){const E=j[t.type];return E?E(e,t):e}const g={[T.RECEIVED_TOKEN]:(e,t,E)=>{t({type:i.RECEIVED_TOKEN,payload:e}),E.current.add("receivedToken")},[T.RECEIVED_JWT_TOKEN]:(e,t,E)=>{t({type:i.RECEIVED_JWT_TOKEN,payload:e}),E.current.add("receivedJWTToken")},[T.SELECTED_DEVICE]:(e,t,E)=>{let o=null;if(typeof e=="string"){const u=e.split(",")[0].trim();u&&(o={id:u})}t({type:i.SELECTED_DEVICE,payload:o}),E.current.add("selectedDevice")},[T.SELECTED_DEVICES]:(e,t,E)=>{t({type:i.SELECTED_DEVICES,payload:e}),E.current.add("selectedDevices")},[T.SELECTED_DASHBOARD_DATE_RANGE]:(e,t,E)=>{t({type:i.SELECTED_DASHBOARD_DATE_RANGE,payload:e}),E.current.add("selectedDashboardDateRange")},[T.SELECTED_DASHBOARD_OBJECT]:(e,t,E)=>{t({type:i.SELECTED_DASHBOARD_OBJECT,payload:e}),E.current.add("selectedDashboardObject")},[T.SELECTED_DEVICE_OBJECT]:(e,t,E)=>{t({type:i.SELECTED_DEVICE_OBJECT,payload:e}),E.current.add("selectedDeviceObject")},[T.SELECTED_DEVICE_OBJECTS]:(e,t,E)=>{t({type:i.SELECTED_DEVICE_OBJECTS,payload:e}),E.current.add("selectedDeviceObjects")},[T.SELECTED_FILTERS]:(e,t,E)=>{t({type:i.SELECTED_FILTERS,payload:e}),E.current.add("selectedFilters")},[T.IS_REAL_TIME_ACTIVE]:(e,t,E)=>{t({type:i.REAL_TIME_STATUS,payload:e}),E.current.add("isRealTimeActive")}};function N(e,t,E,o){const u=g[e];u&&u(t,E,o)}function H(e){const t=e.token!==null||e.jwtToken!==null,E=e.selectedDevice!==null,o=e.dateRange!==null,u=e.dashboardObject!==null;return t&&E&&o&&u}function f(e,t,E,o,u,a){if(!E.current){const _=e.every(C=>t.current.has(C)),b=H(u);(_||b)&&(E.current=!0,o({type:i.SET_READY,payload:!0}),a==null||a())}}function S(e,t){typeof window!="undefined"&&window.parent&&window.parent.postMessage({event:e,payload:t},"*")}function J(e,t){return e?{Authorization:`Bearer ${e}`,"Content-type":"application/json"}:t?{"X-Auth-Token":t,"Content-type":"application/json"}:{"Content-type":"application/json"}}function k(e){if(!e||typeof e!="object")return console.error("[setDashboardDateRange] Invalid date range: must be an object"),!1;const{startTime:t,endTime:E}=e;return typeof t!="number"||typeof E!="number"?(console.error("[setDashboardDateRange] Invalid date range: startTime and endTime must be numbers"),!1):t>=E?(console.error(`[setDashboardDateRange] Invalid date range: startTime (${new Date(t).toISOString()}) must be before endTime (${new Date(E).toISOString()})`),!1):!0}const F={setDashboardDevice:e=>S(l.SET_DASHBOARD_DEVICE,e),setDashboardMultipleDevices:e=>S(l.SET_DASHBOARD_MULTIPLE_DEVICES,e),setDashboardDateRange:e=>{k(e)&&S(l.SET_DASHBOARD_DATE_RANGE,e)},setDashboardLayer:e=>S(l.SET_DASHBOARD_LAYER,e),setRealTime:e=>S(l.SET_REAL_TIME,e),refreshDashboard:()=>S(l.REFRESH_DASHBOARD),openDrawer:e=>{const t=typeof window!="undefined"?window.widgetId:"react-widget";S(l.OPEN_DRAWER,{drawerInfo:e,id:t})},setFullScreen:e=>S(l.SET_FULL_SCREEN,e)};function M(e,t){return d(c({},F),{getHeaders:()=>J(e,t)})}const R=s.createContext(void 0);function r(){const e=s.useContext(R);if(!e)throw new Error("useUbidots must be used within UbidotsProvider");return e}function W({children:e,onReady:t,readyEvents:E=y,validateOrigin:o,initialStateOverride:u}){const[a,_]=s.useReducer(w,c(c({},m),u)),b=s.useRef(!1),C=s.useRef(new Set),v=s.useCallback(A=>o?o(A):!0,[o]);s.useEffect(()=>{function A(U){if(!v(U.origin))return;const{event:V,payload:se}=U.data||{};V&&(N(V,se,_,C),f(E,C,b,_,a,t))}return window.addEventListener("message",A),()=>window.removeEventListener("message",A)},[v,t,E,a]),s.useEffect(()=>{f(E,C,b,_,a,t)},[a,E,t]);const h=s.useMemo(()=>M(a.jwtToken,a.token),[a.jwtToken,a.token]),ne=s.useMemo(()=>({state:a,actions:h}),[a,h]);return s.createElement(R.Provider,{value:ne},e)}function P(){const{state:e}=r();return e.ready}function O(){const{state:e}=r();return e.token}function K(){const{state:e}=r();return e.jwtToken}function I(){const{state:e}=r();return e.selectedDevice}function G(){const{state:e}=r();return e.selectedDevices}function Y(){const{state:e}=r();return e.dateRange}function $(){const{state:e}=r();return e.realTime}function q(){const{state:e}=r();return e.deviceObject}function z(){const{state:e}=r();return e.dashboardObject}function X(){const{state:e}=r();return e.widget}function Q(){const{state:e}=r();return e.selectedDeviceObjects}function Z(){const{state:e}=r();return e.selectedFilters}function L(){return r().actions}function x(){const e=O(),t=s.useRef(null),[E,o]=s.useState(!1);return s.useEffect(()=>{!t.current&&D.Ubidots&&(t.current=D.Ubidots)},[]),s.useEffect(()=>{t.current&&e&&!E&&(t.current.Auth.authenticate(e),o(!0))},[e,E]),!E||!t.current?null:t.current}function ee(e){return function(E){const o=I();return s.createElement(e,d(c({},E),{selectedDevice:o}))}}function te(e){return function(E){const o=L();return s.createElement(e,d(c({},E),{ubidotsActions:o}))}}function Ee(...e){return t=>e.reduceRight((E,o)=>o(E),t)}n.UbidotsProvider=W,n.compose=Ee,n.useUbidots=r,n.useUbidotsAPI=x,n.useUbidotsActions=L,n.useUbidotsDashboardDateRange=Y,n.useUbidotsDashboardObject=z,n.useUbidotsDeviceObject=q,n.useUbidotsJWT=K,n.useUbidotsReady=P,n.useUbidotsRealTimeStatus=$,n.useUbidotsSelectedDevice=I,n.useUbidotsSelectedDeviceObjects=Q,n.useUbidotsSelectedDevices=G,n.useUbidotsSelectedFilters=Z,n.useUbidotsToken=O,n.useUbidotsWidget=X,n.withSelectedDevice=ee,n.withUbidotsActions=te,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});

package/dist/types/index.d.ts

@@ -0,0 +1,96 @@
+export type ReadyEvent = 'receivedToken' | 'receivedJWTToken' | 'selectedDevice' | 'selectedDevices' | 'selectedDashboardDateRange' | 'selectedDashboardObject' | 'selectedDeviceObject' | 'selectedDeviceObjects' | 'selectedFilters' | 'isRealTimeActive';
+export interface Device {
+    id: string;
+    name?: string;
+    label?: string;
+    description?: string;
+    [k: string]: unknown;
+}
+export interface DateRange {
+    startTime: number;
+    endTime: number;
+}
+export interface DashboardObject {
+    id?: string;
+    name?: string;
+    [k: string]: unknown;
+}
+export interface DeviceObject {
+    id?: string;
+    name?: string;
+    label?: string;
+    [k: string]: unknown;
+}
+export interface WidgetInfo {
+    id?: string;
+    settings?: Record<string, unknown>;
+}
+export interface FilterValue {
+    [k: string]: unknown;
+}
+export interface UbidotsState {
+    ready: boolean;
+    token: string | null;
+    jwtToken: string | null;
+    selectedDevice: Device | null;
+    selectedDevices: Device[] | null;
+    dateRange: DateRange | null;
+    dashboardObject: DashboardObject | null;
+    deviceObject: DeviceObject | null;
+    selectedDeviceObjects: DeviceObject[] | null;
+    selectedFilters: FilterValue[] | null;
+    realTime: boolean | null;
+    widget: WidgetInfo | null;
+}
+export type UbidotsAction = {
+    type: 'RECEIVED_TOKEN';
+    payload: string;
+} | {
+    type: 'RECEIVED_JWT_TOKEN';
+    payload: string;
+} | {
+    type: 'SELECTED_DEVICE';
+    payload: Device | null;
+} | {
+    type: 'SELECTED_DEVICES';
+    payload: Device[] | null;
+} | {
+    type: 'SELECTED_DASHBOARD_DATE_RANGE';
+    payload: DateRange | null;
+} | {
+    type: 'SELECTED_DASHBOARD_OBJECT';
+    payload: DashboardObject | null;
+} | {
+    type: 'SELECTED_DEVICE_OBJECT';
+    payload: DeviceObject | null;
+} | {
+    type: 'SELECTED_DEVICE_OBJECTS';
+    payload: DeviceObject[] | null;
+} | {
+    type: 'SELECTED_FILTERS';
+    payload: FilterValue[] | null;
+} | {
+    type: 'REAL_TIME_STATUS';
+    payload: boolean | null;
+} | {
+    type: 'SET_READY';
+    payload: boolean;
+} | {
+    type: 'SET_WIDGET';
+    payload: WidgetInfo | null;
+};
+export interface OutboundActions {
+    setDashboardDevice: (deviceId: string) => void;
+    setDashboardMultipleDevices: (deviceIds: string[]) => void;
+    setDashboardDateRange: (range: DateRange) => void;
+    setDashboardLayer: (layerId: string) => void;
+    setRealTime: (rt: boolean) => void;
+    refreshDashboard: () => void;
+    openDrawer: (opts: {
+        url: string;
+        width: number;
+    }) => void;
+    setFullScreen: (setting: 'toggle' | 'enable' | 'disable') => void;
+    getHeaders: () => Record<string, string>;
+}
+export type UbidotsActions = OutboundActions;

package/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "@ubidots/react-html-canvas",
+  "version": "0.2.1",
+  "description": "React library to interact with Ubidots Dashboards from HTML Canvas widgets (Provider + hooks + actions)",
+  "license": "MIT",
+  "author": "Ubidots",
+  "private": false,
+  "type": "module",
+  "main": "dist/react-html-canvas.cjs.js",
+  "module": "dist/react-html-canvas.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/react-html-canvas.es.js",
+      "require": "./dist/react-html-canvas.cjs.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "@ubidots/ubidots-javascript-library": ">=1.2.1",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "9.33.0",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^16.3.0",
+    "@types/jsdom": "^21.1.7",
+    "@types/node": "^24.3.0",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@ubidots/ubidots-javascript-library": "^1.2.1",
+    "@vitejs/plugin-react": "^5.0.1",
+    "concurrently": "9.2.1",
+    "eslint": "9.33.0",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-prettier": "5.5.4",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "5.2.0",
+    "jsdom": "^26.1.0",
+    "prettier": "3.6.2",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "rimraf": "^5.0.5",
+    "typescript": "^5.4.0",
+    "typescript-eslint": "8.40.0",
+    "vite": "^5.2.0",
+    "vite-plugin-dts": "^4.3.0",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.2.4"
+  },
+  "keywords": [
+    "ubidots",
+    "react",
+    "html-canvas",
+    "dashboard",
+    "widgets"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ubidots/react-html-canvas.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ubidots/react-html-canvas/issues"
+  },
+  "homepage": "https://github.com/ubidots/react-html-canvas#readme",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "engines": {
+    "node": ">=16.0.0",
+    "pnpm": ">=8.0.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "build:watch": "vite build --watch",
+    "dev": "vite",
+    "serve": "python3 -m http.server 8080 --directory dist",
+    "serve:tunnel": "pnpm run serve & cloudflared tunnel --url http://localhost:8080",
+    "dev:cdn": "concurrently \"pnpm run build:watch\" \"pnpm run serve\"",
+    "dev:cdn:tunnel": "concurrently \"pnpm run build:watch\" \"pnpm run serve:tunnel\"",
+    "test": "vitest run --reporter=verbose",
+    "test:ui": "vitest --ui",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "clean": "rimraf dist",
+    "publish:dry": "pnpm publish --dry-run",
+    "publish:beta": "pnpm publish --tag beta",
+    "version:patch": "npm version patch",
+    "version:minor": "npm version minor",
+    "version:major": "npm version major"
+  }
+}