space-react-client 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Alejandro García Fernández
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# space-react-client

package/dist/index.d.ts

@@ -0,0 +1,136 @@
+import React, { JSX } from 'react';
+
+declare class TokenService$1 {
+    private tokenPayload;
+    /**
+     * Retrieves the stored pricing token's payload.
+     * @returns The stored pricing token payload.
+     */
+    getPricingToken(): Record<string, any> | null;
+    /**
+     * Retrieves an attribute from the stored pricing token payload and returns it.
+     * @param key - A key of the stored pricing token whose is going to be retrieved.
+     * @return The value of the key in the stored pricing token payload.
+     */
+    getFromToken(key: string): any;
+    /**
+     * Updates the stored pricing token with the payload of a new one.
+     * @param token - Pricing token string
+     */
+    updatePricingToken(token: string): void;
+    evaluateFeature(featureId: string): boolean | null;
+    private _validToken;
+}
+
+/**
+ * SpaceClient handles API and WebSocket communication with SPACE.
+ * It allows event subscription and provides feature evaluation methods.
+ */
+declare class SpaceClient$1 {
+    private readonly httpUrl;
+    private readonly wsUrl;
+    private readonly socketClient;
+    /**
+     * The WebSocket namespace specifically for pricing-related events.
+     */
+    private readonly pricingSocketNamespace;
+    private readonly apiKey;
+    private readonly axios;
+    private readonly emitter;
+    readonly tokenService: TokenService$1;
+    private userId;
+    constructor(config: SpaceConfiguration);
+    /**
+     * Connects to the SPACE WebSocket and handles incoming events.
+     */
+    private connectWebSocket;
+    /**
+     * Listen to SPACE and connection events.
+     * @param event The event key to listen for.
+     * @param callback The callback function to execute when the event is emitted.
+     * @example
+     * ```typescript
+     * spaceClient.on('pricing_created', (data) => {
+     *   console.log('Pricing created:', data);
+     * });
+     * ```
+     * @throws Will throw an error if the event is not recognized.
+     * @throws Will throw an error if the callback is not a function.
+     */
+    on(event: SpaceEvents, callback: (data: any) => void): void;
+    /**
+     * Sets the user ID for the client and loads the pricing token for that user.
+     * @param userId The user ID to set for the client.
+     * @returns A promise that resolves when the user ID is set and the pricing token is generated.
+     * @throws Will throw an error if the user ID is not a non-empty string.
+     * @example
+     * ```typescript
+     * await spaceClient.setUserId('user123');
+     * ```
+     */
+    setUserId(userId: string): Promise<void>;
+    /**
+     * Performs a request to SPACE to retrieve a new pricing token for the user with the given userId.
+     * @param userId The user ID for which to evaluate the feature.
+     * @returns A promise that resolves to the pricing token.
+     * @throws Will throw an error if the request fails.
+     */
+    generateUserPricingToken(): Promise<string>;
+}
+
+interface EventMessage {
+    code: string;
+    details: {
+        serviceName: string;
+        pricingVersion?: string;
+    };
+}
+
+type SpaceEvents =
+  | 'synchronized'
+  | 'pricing_created'
+  | 'pricing_archived'
+  | 'pricing_actived'
+  | 'service_disabled'
+  | 'error';
+
+interface SpaceConfiguration {
+  url: string;
+  apiKey: string;
+  allowConnectionWithSpace: boolean
+}
+
+interface SpaceClientContext{
+  client?: SpaceClient;
+  tokenService: TokenService;
+}
+
+/**
+ * SpaceProvider initializes and provides the SpaceClient instance to children.
+ */
+declare const SpaceProvider: ({ config, loader, children, }: {
+    config: SpaceConfiguration;
+    loader?: React.ReactNode;
+    children: React.ReactNode;
+}) => JSX.Element;
+
+/**
+ * Custom hook to access the SpaceClient instance from context.
+ * Throws an error if used outside of SpaceProvider.
+ */
+declare function useSpaceClient(): any;
+
+/**
+ * Custom hook to access the service that manages the pricing token.
+ * Throws an error if used outside of SpaceProvider.
+ */
+declare function usePricingToken(): TokenService;
+
+interface FeatureProps {
+    id: string;
+    children: React.ReactNode;
+}
+declare const Feature: ({ id, children }: FeatureProps) => JSX.Element;
+
+export { Feature, SpaceClient$1 as SpaceClient, SpaceProvider, TokenService$1 as TokenService, usePricingToken, useSpaceClient };
+export type { EventMessage, SpaceClientContext, SpaceConfiguration, SpaceEvents };

package/dist/index.js

@@ -0,0 +1,317 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React, { createContext, useMemo, useContext, useState, useEffect } from 'react';
+import { TinyEmitter } from 'tiny-emitter';
+import axios from 'axios';
+import { io } from 'socket.io-client';
+
+function parseJwt(token) {
+    return JSON.parse(atob(token.split('.')[1]));
+}
+/**
+ * Checks if the current pricing token is expired based on the 'exp' claim.
+ * @returns True if the token is expired or not set, false otherwise.
+ */
+function isTokenExpired(tokenPayload) {
+    if (typeof tokenPayload.exp !== 'number') {
+        return true;
+    }
+    // 'exp' is in seconds since epoch
+    const now = Math.floor(Date.now() / 1000);
+    return now >= tokenPayload.exp;
+}
+class TokenService {
+    constructor() {
+        this.tokenPayload = null;
+    }
+    /**
+     * Retrieves the stored pricing token's payload.
+     * @returns The stored pricing token payload.
+     */
+    getPricingToken() {
+        if (!this._validToken()) {
+            return null;
+        }
+        return this.tokenPayload;
+    }
+    /**
+     * Retrieves an attribute from the stored pricing token payload and returns it.
+     * @param key - A key of the stored pricing token whose is going to be retrieved.
+     * @return The value of the key in the stored pricing token payload.
+     */
+    getFromToken(key) {
+        if (!this._validToken()) {
+            return null;
+        }
+        return this.tokenPayload[key];
+    }
+    /**
+     * Updates the stored pricing token with the payload of a new one.
+     * @param token - Pricing token string
+     */
+    updatePricingToken(token) {
+        const parsedToken = parseJwt(token);
+        this.tokenPayload = parsedToken;
+    }
+    evaluateFeature(featureId) {
+        if (!this._validToken()) {
+            return false;
+        }
+        // Check if the feature exists in the token payload
+        if (this.tokenPayload?.features?.[featureId]) {
+            return this.tokenPayload.features[featureId].eval;
+        }
+        else {
+            console.warn(`Feature '${featureId}' not found in token payload.`);
+            return null;
+        }
+    }
+    _validToken() {
+        if (!this.tokenPayload) {
+            console.warn('Token payload is not set. Please call updateLocalPricingToken first.');
+            return false;
+        }
+        if (isTokenExpired(this.tokenPayload)) {
+            console.warn('Pricing token is expired. Please update it the pricing token.');
+            return false;
+        }
+        return true;
+    }
+}
+
+/**
+ * SpaceClient handles API and WebSocket communication with SPACE.
+ * It allows event subscription and provides feature evaluation methods.
+ */
+class SpaceClient {
+    constructor(config) {
+        this.userId = null;
+        this.httpUrl = config.url.endsWith('/')
+            ? config.url.slice(0, -1) + '/api/v1'
+            : config.url + '/api/v1';
+        this.wsUrl = config.url.replace(/^http/, 'ws') + '/events/pricings';
+        this.socketClient = io(this.wsUrl, {
+            path: '/events',
+        });
+        this.pricingSocketNamespace = this.socketClient.io.socket('/pricings');
+        this.apiKey = config.apiKey;
+        this.emitter = new TinyEmitter();
+        this.tokenService = new TokenService();
+        this.axios = axios.create({
+            baseURL: this.httpUrl,
+            headers: {
+                'Content-Type': 'application/json',
+                'x-api-key': `${this.apiKey}`,
+            },
+        });
+        this.connectWebSocket();
+    }
+    /**
+     * Connects to the SPACE WebSocket and handles incoming events.
+     */
+    connectWebSocket() {
+        this.pricingSocketNamespace.on('connect', () => {
+            console.log('Connected to SPACE');
+            this.emitter.emit('synchronized', 'WebSocket connection established');
+        });
+        this.pricingSocketNamespace.on('message', data => {
+            const event = data.code.toLowerCase();
+            this.emitter.emit(event, data.details);
+        });
+        this.pricingSocketNamespace.on('connect_error', error => {
+            this.emitter.emit('error', error);
+        });
+    }
+    /**
+     * Listen to SPACE and connection events.
+     * @param event The event key to listen for.
+     * @param callback The callback function to execute when the event is emitted.
+     * @example
+     * ```typescript
+     * spaceClient.on('pricing_created', (data) => {
+     *   console.log('Pricing created:', data);
+     * });
+     * ```
+     * @throws Will throw an error if the event is not recognized.
+     * @throws Will throw an error if the callback is not a function.
+     */
+    on(event, callback) {
+        if (typeof callback !== 'function') {
+            throw new Error(`Callback for event '${event}' must be a function.`);
+        }
+        if ([
+            'synchronized',
+            'pricing_created',
+            'pricing_archived',
+            'pricing_actived',
+            'service_disabled',
+            'error',
+        ].indexOf(event) === -1) {
+            throw new Error(`Event '${event}' is not recognized.`);
+        }
+        this.emitter.on(event, callback);
+    }
+    /**
+     * Sets the user ID for the client and loads the pricing token for that user.
+     * @param userId The user ID to set for the client.
+     * @returns A promise that resolves when the user ID is set and the pricing token is generated.
+     * @throws Will throw an error if the user ID is not a non-empty string.
+     * @example
+     * ```typescript
+     * await spaceClient.setUserId('user123');
+     * ```
+     */
+    async setUserId(userId) {
+        if (typeof userId !== 'string' || userId.trim() === '') {
+            throw new Error('User ID must be a non-empty string.');
+        }
+        this.userId = userId;
+        this.tokenService.updatePricingToken(await this.generateUserPricingToken());
+    }
+    /**
+     * Performs a request to SPACE to retrieve a new pricing token for the user with the given userId.
+     * @param userId The user ID for which to evaluate the feature.
+     * @returns A promise that resolves to the pricing token.
+     * @throws Will throw an error if the request fails.
+     */
+    async generateUserPricingToken() {
+        if (!this.userId) {
+            throw new Error('User ID is not set. Please set the user ID with `setUserId(userId)` before trying to generate a pricing token.');
+        }
+        return this.axios
+            .post(`/features/${this.userId}`)
+            .then((response) => {
+            return response.data.pricingToken;
+        })
+            .catch((error) => {
+            console.error(`Error generating pricing token for user ${this.userId}:`, error);
+            throw error;
+        });
+    }
+}
+
+// Context provides the SpaceClient instance
+const SpaceContext = createContext(undefined);
+/**
+ * SpaceProvider initializes and provides the SpaceClient instance to children.
+ */
+const SpaceProvider = ({ config, loader, children, }) => {
+    // Memorize the client to avoid unnecessary re-instantiation
+    const context = useMemo(() => {
+        const client = config.allowConnectionWithSpace ? new SpaceClient(config) : undefined;
+        let tokenService;
+        if (!client) {
+            tokenService = new TokenService();
+        }
+        else {
+            tokenService = client.tokenService;
+        }
+        return {
+            client: client,
+            tokenService: tokenService,
+        };
+    }, [config.url, config.apiKey]);
+    const [connected, setConnected] = React.useState(false);
+    React.useEffect(() => {
+        if (!context.client) {
+            setConnected(true); // No connection needed if client is undefined
+            return;
+        }
+        const handleSync = () => setConnected(true);
+        context.client.on('synchronized', handleSync);
+    }, [context.client]);
+    if (!connected)
+        return (jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', width: '100%' }, children: [loader ?? (jsx("div", { style: {
+                        border: '4px solid #e0e0e0',
+                        borderTop: '4px solid #1976d2',
+                        borderRadius: '50%',
+                        width: 48,
+                        height: 48,
+                        animation: 'spin 1s linear infinite',
+                    } })), jsx("style", { children: `
+        @keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+      ` })] }));
+    return jsx(SpaceContext.Provider, { value: context, children: children });
+};
+
+/**
+ * Custom hook to access the SpaceClient instance from context.
+ * Throws an error if used outside of SpaceProvider.
+ */
+function useSpaceClient() {
+    const spaceContext = useContext(SpaceContext);
+    if (!spaceContext) {
+        throw new Error('useSpaceClient must be used within a SpaceProvider');
+    }
+    if (!spaceContext.client) {
+        throw new Error(`SpaceClient is not initialized, so it cannot be instanciated. 
+      If you want to allow direct connection with the SPACE instance, 
+      ensure that you configuration has allowConnectionWithSpace = true, 
+      and url and apiKey provided.`);
+    }
+    return spaceContext.client;
+}
+
+/**
+ * Custom hook to access the service that manages the pricing token.
+ * Throws an error if used outside of SpaceProvider.
+ */
+function usePricingToken() {
+    const spaceContext = useContext(SpaceContext);
+    if (!spaceContext) {
+        throw new Error('usePricingToken must be used within a SpaceProvider');
+    }
+    return spaceContext.tokenService;
+}
+
+// Helper to get a child by type name
+function getChildByType(children, typeName) {
+    const arr = React.Children.toArray(children);
+    return arr.find(child => child.type && child.type.name === typeName) || null;
+}
+const Feature = ({ id, children }) => {
+    const tokenService = usePricingToken();
+    const [status, setStatus] = useState('loading');
+    const [result, setResult] = useState(null);
+    // Validate id
+    const isValidId = useMemo(() => id.includes('-'), [id]);
+    useEffect(() => {
+        if (!isValidId) {
+            console.error(`Invalid feature ID: ‘${id}’. A valid feature ID must contain a hyphen (’-’) and follow the format: ‘{serviceName in lowercase}-{featureName as defined in the pricing}’.`);
+            setStatus('error');
+            return;
+        }
+        if (tokenService.getPricingToken() === null) {
+            console.error(`Pricing token is either not set or expired. Please ensure the token is initialized and not expired before using the Feature component.`);
+            setStatus('error');
+            return;
+        }
+        setStatus('loading');
+        setResult(null);
+        const evaluationResult = tokenService.evaluateFeature(id);
+        if (evaluationResult === null || evaluationResult === undefined) {
+            setStatus('error');
+        }
+        else {
+            setResult(evaluationResult);
+            setStatus('success');
+        }
+    }, [id, isValidId]);
+    if (status === 'loading') {
+        return getChildByType(children, 'Loading') || jsx(Fragment, {});
+    }
+    if (status === 'error') {
+        return getChildByType(children, 'ErrorFallback') || jsx(Fragment, {});
+    }
+    if (status === 'success' && result === true) {
+        return getChildByType(children, 'On') || jsx(Fragment, {});
+    }
+    if (status === 'success' && result === false) {
+        return getChildByType(children, 'Default') || jsx(Fragment, {});
+    }
+    return jsx(Fragment, {});
+};
+
+export { Feature, SpaceProvider, usePricingToken, useSpaceClient };

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "space-react-client",
+  "type": "module",
+  "version": "0.1.0",
+  "description": "",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c --watch",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "format": "prettier --write .",
+    "test": "vitest run"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "packageManager": "pnpm@10.10.0",
+  "peerDependencies": {
+    "react": "^19.1.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-alias": "^5.1.1",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.1.6",
+    "@vitejs/plugin-react": "^4.5.0",
+    "eslint": "^9.28.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "jiti": "^2.4.2",
+    "jsdom": "^26.1.0",
+    "prettier": "^3.5.3",
+    "rollup": "^4.41.1",
+    "rollup-plugin-dts": "^6.2.1",
+    "tslib": "^2.8.1",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.33.0",
+    "vitest": "^3.2.0"
+  },
+  "dependencies": {
+    "axios": "^1.9.0",
+    "socket.io-client": "^4.8.1",
+    "tiny-emitter": "^2.1.0"
+  }
+}