@phystack/signals-react 4.3.40-dev

package/README.md

@@ -0,0 +1,272 @@
+# @phystack/signals-react
+
+A React library for integrating Phygrid Signals into your react applications.
+
+## Installation
+
+Use either yarn or npm to install the package:
+
+```bash
+# Using yarn
+yarn install @phystack/signals-react
+
+# Using npm
+npm install @phystack/signals-react
+```
+
+## Usage
+
+### Basic Integration
+
+The simplest way to integrate Signals into your React application is using the `useGridSignals` hook:
+
+```jsx
+import React, { useEffect } from 'react';
+import './App.css';
+import { useGridSignals } from "@phystack/signals-react";
+
+function App() {
+  const { isReady, signalsService } = useGridSignals();
+
+  useEffect(() => {
+    if (isReady) {
+      // Example of sending an event
+      signalsService.sendEvent(...);
+    }
+  }, [isReady, signalsService]);
+
+  return (
+    <div className="App">
+      <p>Hello Signals</p>
+    </div>
+  );
+}
+
+export default App;
+```
+
+### Custom Parameters
+
+For more control, you can initialize the signals service with custom parameters using the `useGridSignalsWithExternalParams` hook:
+
+```jsx
+import React, { useEffect } from 'react';
+import './App.css';
+import { useGridSignalsWithExternalParams } from "@phystack/signals-react";
+
+function App() {
+  const initParams = {
+    "deviceId": "device-12345",
+    "installationId": "install-67890",
+    "spaceId": "space-abcdef",
+    "tenantId": "tenant-xyz",
+    "appVersion": "1.0.0",
+    "appId": "com.example.app",
+    "environment": "production",
+    "dataResidency": "EU",
+    "country": "SE",
+    "installationVersion": "2.3.4",
+    "accessToken": "eyJhbGciOiJIUzI1NiIsInR...",
+    "clientUserAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64)",
+    "ip": "192.168.1.100"
+  };
+
+  const { isReady, signalsService } = useGridSignalsWithExternalParams(initParams);
+
+  useEffect(() => {
+    if (isReady) {
+      // Example of sending an event
+      signalsService.sendEvent(...);
+    }
+  }, [isReady, signalsService]);
+
+  return (
+    <div className="App">
+      <p>Hello Signals</p>
+    </div>
+  );
+}
+
+export default App;
+```
+
+## API Reference
+
+### Hooks
+
+#### `useGridSignals()`
+
+Initializes the signals service with default parameters.
+
+**Returns:**
+- `isReady` (boolean): Indicates whether the signals service is initialized and ready to use
+- `signalsService` (object): The signals service instance for sending events
+
+#### `useGridSignalsWithExternalParams(initParams)`
+
+Initializes the signals service with custom parameters.
+
+**Parameters:**
+- `initParams` (object): Configuration object with the following properties:
+    - `deviceId` (string): Unique identifier for the device
+    - `installationId` (string): Unique identifier for the installation
+    - `spaceId` (string): Identifier for the space
+    - `tenantId` (string): Identifier for the tenant
+    - `appVersion` (string): Version of the application
+    - `appId` (string): Identifier for the application
+    - `environment` (string): Environment (e.g., "production", "development")
+    - `dataResidency` (string): Location for data residency
+    - `country` (string): Country code
+    - `installationVersion` (string): Version of the installation
+    - `accessToken` (string): JWT or other access token
+    - `clientUserAgent` (string): User agent string
+    - `ip` (string): IP address
+
+**Returns:**
+- `isReady` (boolean): Indicates whether the signals service is initialized and ready to use
+- `signalsService` (object): The signals service instance for sending events
+
+
+## Available Methods
+Complete details regarding the available methods in signalsService can be found in [here](https://www.npmjs.com/package/@phystack/hub-client)
+
+---
+## Troubleshooting
+If you find any errors when importing the package, make sure that
+1. `config-overrides.js` is setup properly, an example is given below:
+```javascript
+const webpack = require('webpack');
+const path = require('path');
+
+module.exports = function override(config, env) {
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    loader: 'ts-loader',
+    options: {
+      transpileOnly: true,
+      compilerOptions: {
+        module: 'esnext',
+        moduleResolution: 'node',
+      },
+    },
+    exclude: /node_modules/,
+  });
+
+  delete config.externals;
+
+  config.plugins.push(
+    new webpack.IgnorePlugin({ resourceRegExp: /^https-proxy-agent$/ }),
+    new webpack.IgnorePlugin({ resourceRegExp: /^http-proxy-agent$/ })
+  );
+
+  config.resolve.fallback = {
+    assert: require.resolve('assert/'),
+    buffer: require.resolve('buffer/'),
+    stream: require.resolve('stream-browserify'),
+    util: require.resolve('util/'),
+    net: false,
+    tls: false,
+    fs: false,
+    child_process: false,
+    http: false,
+    https: false,
+    os: false,
+    url: false,
+  };
+
+  config.module.rules.push({
+    test: /abort-controller/,
+    resolve: { fullySpecified: false },
+  });
+
+  config.resolve.alias = {
+    ...config.resolve.alias,
+    'react': path.resolve('./node_modules/react'),
+    'react-dom': path.resolve('./node_modules/react-dom')
+  };
+
+  return config;
+};
+
+```
+2. Make sure that your webpack.config.js is setup properly, for example:
+```javascript
+const webpack = require('webpack');
+const path = require('path');
+
+module.exports = function override(config, env) {
+  // Add React resolution alias
+  config.resolve.alias = {
+    ...config.resolve.alias,
+    'react': path.resolve('./node_modules/react'),
+    'react-dom': path.resolve('./node_modules/react-dom')
+  };
+
+  // Add externals configuration
+  config.externals = {
+    ...config.externals,
+    react: 'React',
+    'react-dom': 'ReactDOM'
+  };
+
+  // Existing fallbacks for node.js core modules
+  config.resolve.fallback = {
+    http: require.resolve('stream-http'),
+    https: require.resolve('https-browserify'),
+    stream: require.resolve('stream-browserify'),
+    util: require.resolve('util/'),
+    os: require.resolve('os-browserify/browser'),
+    assert: require.resolve('assert/'),
+    net: false,
+    tls: false,
+  };
+
+  config.plugins.push(
+    new webpack.ProvidePlugin({
+      process: 'process/browser',
+      Buffer: ['buffer', 'Buffer'],
+    })
+  );
+
+  return config;
+};
+```
+3. If you are using typescript, make sure you have tsconfig.json setup properly, for example:
+```json
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react",
+    "baseUrl": "src"
+  },
+  "include": [
+    "src"
+  ]
+}
+
+```
+4. For react version related issues, make sure you add following in your package.json file:
+```json
+{
+  "resolutions": {
+      "react": "^18.0.0",
+      "react-dom": "^18.0.0"
+    },
+}
+```

package/config-overrides.js

@@ -0,0 +1,91 @@
+/**
+ * config-overrides.js
+ */
+
+const { IgnoreAsyncImportsPlugin } = require('ignore-webpack-plugin');
+
+module.exports = function override(config, env) {
+  // 1. Configure ts-loader for NodeNext -> override to esnext
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    loader: 'ts-loader',
+    options: {
+      transpileOnly: true,
+      compilerOptions: {
+        module: 'esnext', // Overridden for browser usage
+        moduleResolution: 'node'
+      }
+    },
+    exclude: /node_modules/,
+  });
+
+  // 2. Ensure proper module resolution
+  config.resolve = {
+    ...config.resolve,
+    // Add .cjs to extensions to ensure Webpack will parse .cjs files as code
+    extensions: [
+      ...(config.resolve.extensions || []),
+      '.cjs',
+      '.ts',
+      '.tsx',
+      '.js',
+      '.jsx',
+      '.mjs',
+    ],
+    mainFields: ['browser', 'module', 'main'],
+  };
+
+  // 3. (Optional) IgnoreAsyncImportsPlugin if you truly need it
+  config.plugins.push(new IgnoreAsyncImportsPlugin());
+
+  // 4. Fallback for Node core modules
+  config.resolve.fallback = {
+    ...config.resolve.fallback,
+    assert: require.resolve('assert/'),
+    buffer: require.resolve('buffer/'),
+    crypto: require.resolve('crypto-browserify'),
+    stream: require.resolve('stream-browserify'),
+    util: require.resolve('util/'),
+    process: require.resolve('process/browser'),
+    zlib: require.resolve('browserify-zlib'),
+    path: require.resolve('path-browserify'),
+    http: require.resolve('stream-http'),
+    https: require.resolve('https-browserify'),
+    url: require.resolve('url/'),
+    os: require.resolve('os-browserify/browser'),
+    fs: false,
+    net: false,
+    tls: false,
+    child_process: false,
+  };
+
+  // 5. Exclude .cjs from file-loader or asset/resource so it won't be treated as a static file
+  // Note: The exact rule depends on your version of CRA. If you see multiple rules for images/assets,
+  // you'll need to locate the correct one. Usually, the first one has a test: /\.(bmp|gif|jpe?g|png|avif|webp)$/
+  // or similar. Another approach is to find the rule with type: 'asset/resource' or 'asset'.
+  const oneOfRule = config.module.rules.find((rule) => Array.isArray(rule.oneOf));
+  if (oneOfRule) {
+    oneOfRule.oneOf.forEach((r) => {
+      if (r.type === 'asset/resource' || r.loader?.includes('file-loader')) {
+        r.exclude = Array.isArray(r.exclude) ? r.exclude : (r.exclude ? [r.exclude] : []);
+        r.exclude.push(/\.cjs$/);
+      }
+    });
+  }
+
+  /**
+   * 6. Remove or modify the externals so Axios is properly bundled.
+   *    Externals are not commonly used for browser configs.
+   *    If you still need to treat some modules as external, do so carefully.
+   */
+  // comment out or remove the axios external
+  config.externals = {
+    "osx-temperature-sensor": "commonjs osx-temperature-sensor",
+    "process": false,
+    "child_process": false,
+    "http": false,
+    "https": false,
+  };
+
+  return config;
+};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './use-grid-signals';
+export * from './use-grid-signals-with-external-params';
+export * from './types/signal.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,yCAAyC,CAAC;AACxD,cAAc,sBAAsB,CAAC"}

package/dist/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./use-grid-signals"), exports);
+__exportStar(require("./use-grid-signals-with-external-params"), exports);
+__exportStar(require("./types/signal.types"), exports);

package/dist/types/signal.types.d.ts

@@ -0,0 +1,37 @@
+import { connectPhyClient } from '@phystack/hub-client';
+import { CheckoutProps, PurchaseProps } from '@phystack/hub-client/dist/types/signal.types';
+type PhyHubClient = Awaited<ReturnType<typeof connectPhyClient>>;
+export type SignalsService = Awaited<ReturnType<PhyHubClient['initializeSignals']>>;
+export type SignalInstance = Awaited<ReturnType<SignalsService['getInstanceProps']>>;
+export type { CheckoutProps, PurchaseProps };
+export interface InitSignalPayload {
+    tenantId: string;
+    environment: string;
+    dataResidency: string;
+    country: string;
+    locationAccuracy?: number;
+    latitude?: number;
+    longitude?: number;
+    spaceId: string;
+    appId: string;
+    appVersion: string;
+    installationId: string;
+    installationVersion: string;
+    lastActivity?: string;
+    clientUserAgent?: string;
+    clientScreenWidth?: number;
+    clientScreenHeight?: number;
+    clientScreenColorDepth?: number;
+    clientScreenPixelDepth?: number;
+    sessionId?: string;
+    sessionCreated?: string;
+    deviceId?: string;
+    accessId?: string;
+    accessToken?: string;
+    clientCreated?: string;
+    clientId?: string;
+    useValidCachedSessionOnInit?: boolean;
+    createNewSessionAfterLastActivityMins?: number;
+    ip?: string;
+}
+//# sourceMappingURL=signal.types.d.ts.map

package/dist/types/signal.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"signal.types.d.ts","sourceRoot":"","sources":["../../src/types/signal.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAE5F,KAAK,YAAY,GAAG,OAAO,CAAC,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC;AACjE,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,UAAU,CAAC,YAAY,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;AACpF,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,UAAU,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC;AACrF,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC;AAE7C,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,qCAAqC,CAAC,EAAE,MAAM,CAAC;IAC/C,EAAE,CAAC,EAAE,MAAM,CAAC;CACb"}

package/dist/types/signal.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/use-grid-signals-with-external-params.d.ts

@@ -0,0 +1,7 @@
+import { InitSignalPayload } from './types/signal.types';
+export declare function useGridSignalsWithExternalParams(externalParams: InitSignalPayload): {
+    isReady: boolean;
+    signalsService: import("@phystack/hub-client/dist/services/signals.service").SignalsService | null;
+};
+export default useGridSignalsWithExternalParams;
+//# sourceMappingURL=use-grid-signals-with-external-params.d.ts.map

package/dist/use-grid-signals-with-external-params.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-grid-signals-with-external-params.d.ts","sourceRoot":"","sources":["../src/use-grid-signals-with-external-params.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAkB,MAAM,sBAAsB,CAAC;AAEzE,wBAAgB,gCAAgC,CAC9C,cAAc,EAAE,iBAAiB;;;EAqBlC;AAED,eAAe,gCAAgC,CAAC"}

package/dist/use-grid-signals-with-external-params.js

@@ -0,0 +1,77 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGridSignalsWithExternalParams = useGridSignalsWithExternalParams;
+var react_1 = __importDefault(require("react"));
+var hub_client_1 = require("@phystack/hub-client");
+function useGridSignalsWithExternalParams(externalParams) {
+    var _this = this;
+    var _a = react_1.default.useState(false), isReady = _a[0], setIsReady = _a[1];
+    var _b = react_1.default.useState(null), signalsService = _b[0], setSignalsService = _b[1];
+    react_1.default.useEffect(function () {
+        var initGridSignals = function () { return __awaiter(_this, void 0, void 0, function () {
+            var client, signals, error_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 3, , 4]);
+                        return [4 /*yield*/, (0, hub_client_1.connectPhyClient)()];
+                    case 1:
+                        client = _a.sent();
+                        return [4 /*yield*/, client.initializeSignals(externalParams)];
+                    case 2:
+                        signals = _a.sent();
+                        setSignalsService(signals);
+                        setIsReady(true);
+                        return [3 /*break*/, 4];
+                    case 3:
+                        error_1 = _a.sent();
+                        console.error('Failed to initialize signals:', error_1);
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        }); };
+        initGridSignals();
+    }, []);
+    return { isReady: isReady, signalsService: signalsService };
+}
+exports.default = useGridSignalsWithExternalParams;

package/dist/use-grid-signals.d.ts

@@ -0,0 +1,6 @@
+export declare function useGridSignals(): {
+    isReady: boolean;
+    signalsService: import("@phystack/hub-client/dist/services/signals.service").SignalsService | null;
+};
+export default useGridSignals;
+//# sourceMappingURL=use-grid-signals.d.ts.map

package/dist/use-grid-signals.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-grid-signals.d.ts","sourceRoot":"","sources":["../src/use-grid-signals.tsx"],"names":[],"mappings":"AAIA,wBAAgB,cAAc;;;EAoB7B;AAED,eAAe,cAAc,CAAC"}

package/dist/use-grid-signals.js

@@ -0,0 +1,74 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGridSignals = useGridSignals;
+var react_1 = require("react");
+var hub_client_1 = require("@phystack/hub-client");
+function useGridSignals() {
+    var _this = this;
+    var _a = (0, react_1.useState)(false), isReady = _a[0], setIsReady = _a[1];
+    var _b = (0, react_1.useState)(null), signalsService = _b[0], setSignalsService = _b[1];
+    (0, react_1.useEffect)(function () {
+        var initGridSignals = function () { return __awaiter(_this, void 0, void 0, function () {
+            var client, signals, error_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 3, , 4]);
+                        return [4 /*yield*/, (0, hub_client_1.connectPhyClient)()];
+                    case 1:
+                        client = _a.sent();
+                        return [4 /*yield*/, client.initializeSignals()];
+                    case 2:
+                        signals = _a.sent();
+                        setSignalsService(signals);
+                        setIsReady(true);
+                        return [3 /*break*/, 4];
+                    case 3:
+                        error_1 = _a.sent();
+                        console.error('Failed to initialize signals:', error_1);
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        }); };
+        initGridSignals();
+    }, []);
+    return { isReady: isReady, signalsService: signalsService };
+}
+exports.default = useGridSignals;

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@phystack/signals-react",
+  "version": "4.3.40-dev",
+  "main": "dist/index.js",
+  "license": "UNLICENSED",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "rimraf ./dist && tsc",
+    "build:watch": "tsc -w"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.13.5",
+    "@types/react": "^18.0.10",
+    "@types/react-dom": "^18.0.4",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "typescript": "^5.4.5"
+  },
+  "dependencies": {
+    "@phystack/hub-client": "4.3.40-dev"
+  },
+  "gitHead": "53c505b3ecad47ebd4f38819c07b0ec1227214a6"
+}

package/src/index.tsx

@@ -0,0 +1,3 @@
+export * from './use-grid-signals';
+export * from './use-grid-signals-with-external-params';
+export * from './types/signal.types';

package/src/types/signal.types.ts

@@ -0,0 +1,38 @@
+import { connectPhyClient } from '@phystack/hub-client';
+import { CheckoutProps, PurchaseProps } from '@phystack/hub-client/dist/types/signal.types';
+
+type PhyHubClient = Awaited<ReturnType<typeof connectPhyClient>>;
+export type SignalsService = Awaited<ReturnType<PhyHubClient['initializeSignals']>>;
+export type SignalInstance = Awaited<ReturnType<SignalsService['getInstanceProps']>>;
+export type { CheckoutProps, PurchaseProps };
+
+export interface InitSignalPayload {
+  tenantId: string;
+  environment: string;
+  dataResidency: string;
+  country: string;
+  locationAccuracy?: number;
+  latitude?: number;
+  longitude?: number;
+  spaceId: string;
+  appId: string;
+  appVersion: string;
+  installationId: string;
+  installationVersion: string;
+  lastActivity?: string;
+  clientUserAgent?: string;
+  clientScreenWidth?: number;
+  clientScreenHeight?: number;
+  clientScreenColorDepth?: number;
+  clientScreenPixelDepth?: number;
+  sessionId?: string;
+  sessionCreated?: string;
+  deviceId?: string;
+  accessId?: string;
+  accessToken?: string;
+  clientCreated?: string;
+  clientId?: string;
+  useValidCachedSessionOnInit?: boolean;
+  createNewSessionAfterLastActivityMins?: number;
+  ip?: string;
+}

package/src/use-grid-signals-with-external-params.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { connectPhyClient } from '@phystack/hub-client';
+import { InitSignalPayload, SignalsService } from './types/signal.types';
+
+export function useGridSignalsWithExternalParams(
+  externalParams: InitSignalPayload,
+) {
+  const [isReady, setIsReady] = React.useState(false);
+  const [signalsService, setSignalsService] = React.useState<SignalsService | null>(null);
+
+  React.useEffect(() => {
+    const initGridSignals = async () => {
+      try {
+        const client = await connectPhyClient();
+        const signals = await client.initializeSignals(externalParams);
+        setSignalsService(signals);
+        setIsReady(true);
+      } catch (error) {
+        console.error('Failed to initialize signals:', error);
+      }
+    };
+
+    initGridSignals();
+  }, []);
+
+  return { isReady, signalsService };
+}
+
+export default useGridSignalsWithExternalParams;

package/src/use-grid-signals.tsx

@@ -0,0 +1,27 @@
+import { useState, useEffect } from 'react';
+import { connectPhyClient } from '@phystack/hub-client';
+import { SignalsService } from './types/signal.types';
+
+export function useGridSignals() {
+  const [isReady, setIsReady] = useState<boolean>(false);
+  const [signalsService, setSignalsService] = useState<SignalsService | null>(null);
+
+  useEffect(() => {
+    const initGridSignals = async () => {
+        try {
+          const client = await connectPhyClient();
+          const signals = await client.initializeSignals();
+          setSignalsService(signals);
+          setIsReady(true);
+        } catch (error) {
+          console.error('Failed to initialize signals:', error);
+        }
+    };
+
+    initGridSignals();
+  }, []);
+
+  return { isReady, signalsService };
+}
+
+export default useGridSignals;

package/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react",
+    "outDir": "dist",
+    "rootDir": "src",
+    "declarationDir": "dist",
+    "declarationMap": true,
+    "declaration": true,
+    "alwaysStrict": true
+  },
+  "include": [
+    "src"
+  ]
+}