@kerne/react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Kerne
+
+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/dist/index.cjs

@@ -0,0 +1,238 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  KerneClient: () => KerneClient,
+  KerneProvider: () => KerneProvider,
+  createKerneClient: () => createKerneClient,
+  useAuth: () => useAuth,
+  useBilling: () => useBilling,
+  useKerne: () => useKerne
+});
+module.exports = __toCommonJS(index_exports);
+var import_react = require("react");
+var import_server = require("@kerne/server");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_STORAGE_KEY = "kerne_auth";
+var KerneClient = class {
+  kerne;
+  storage;
+  storageKey;
+  onAuthChange;
+  currentUser = null;
+  currentToken = null;
+  constructor(config) {
+    this.storage = config.storage ?? (typeof window !== "undefined" ? localStorage : null);
+    this.storageKey = config.storageKey ?? DEFAULT_STORAGE_KEY;
+    this.onAuthChange = config.onAuthChange;
+    this.kerne = new import_server.Kerne({
+      baseUrl: config.baseUrl,
+      appId: config.appId,
+      timeout: config.timeout
+    });
+    this.loadSession();
+  }
+  loadSession() {
+    if (!this.storage) return;
+    try {
+      const data = this.storage.getItem(this.storageKey);
+      if (data) {
+        const { user, token, expires_at } = JSON.parse(data);
+        if (new Date(expires_at) > /* @__PURE__ */ new Date()) {
+          this.currentUser = user;
+          this.currentToken = token;
+          this.kerne = this.kerne.withToken(token);
+        } else {
+          this.storage.removeItem(this.storageKey);
+        }
+      }
+    } catch {
+      this.storage.removeItem(this.storageKey);
+    }
+  }
+  saveSession(response) {
+    this.currentUser = response.user;
+    this.currentToken = response.token;
+    this.kerne = this.kerne.withToken(response.token);
+    if (this.storage) {
+      this.storage.setItem(this.storageKey, JSON.stringify(response));
+    }
+    this.onAuthChange?.(response.user);
+  }
+  clearSession() {
+    this.currentUser = null;
+    this.currentToken = null;
+    if (this.storage) {
+      this.storage.removeItem(this.storageKey);
+    }
+    this.onAuthChange?.(null);
+  }
+  get user() {
+    return this.currentUser;
+  }
+  get token() {
+    return this.currentToken;
+  }
+  get isAuthenticated() {
+    return this.currentToken !== null;
+  }
+  get client() {
+    return this.kerne;
+  }
+  get projects() {
+    return this.kerne.projects;
+  }
+  async register(params) {
+    const [firstName, ...lastNameParts] = (params.name || "").split(" ");
+    const lastName = lastNameParts.join(" ");
+    const response = await this.kerne.auth.signup({
+      email: params.email,
+      password: params.password,
+      first_name: firstName,
+      last_name: lastName || void 0
+    });
+    this.saveSession(response);
+    return response;
+  }
+  async login(params) {
+    const response = await this.kerne.auth.login({
+      email: params.email,
+      password: params.password
+    });
+    this.saveSession(response);
+    return response;
+  }
+  async refreshToken() {
+    if (!this.currentToken) return null;
+    const response = await this.kerne.auth.refreshToken({
+      refresh_token: this.currentToken
+    });
+    this.saveSession(response);
+    return response;
+  }
+  logout() {
+    this.clearSession();
+  }
+  async refreshUser() {
+    if (!this.currentToken) return null;
+    try {
+      const user = await this.kerne.users.me();
+      this.currentUser = user;
+      this.onAuthChange?.(user);
+      return user;
+    } catch {
+      this.clearSession();
+      return null;
+    }
+  }
+  async checkEntitlement(featureKey, requested) {
+    try {
+      const check = await this.kerne.billing.checkEntitlement(featureKey, requested);
+      return check.has_access;
+    } catch {
+      return false;
+    }
+  }
+  async createCheckout(planId, options) {
+    const { url } = await this.kerne.billing.createCheckout(planId, {
+      success_url: options?.successUrl,
+      cancel_url: options?.cancelUrl
+    });
+    return url;
+  }
+  async openCheckout(planId, options) {
+    const url = await this.createCheckout(planId, options);
+    if (typeof window !== "undefined") {
+      window.location.href = url;
+    }
+  }
+  async createPortal(returnUrl) {
+    const { url } = await this.kerne.billing.createPortal({ return_url: returnUrl });
+    return url;
+  }
+  async openPortal(returnUrl) {
+    const url = await this.createPortal(returnUrl);
+    if (typeof window !== "undefined") {
+      window.location.href = url;
+    }
+  }
+};
+function createKerneClient(config) {
+  return new KerneClient(config);
+}
+var KerneContext = (0, import_react.createContext)(null);
+function KerneProvider({ children, ...config }) {
+  const [user, setUser] = (0, import_react.useState)(null);
+  const client = (0, import_react.useMemo)(() => {
+    return new KerneClient({
+      ...config,
+      onAuthChange: (u) => {
+        setUser(u);
+        config.onAuthChange?.(u);
+      }
+    });
+  }, [config.appId, config.baseUrl]);
+  (0, import_react.useEffect)(() => {
+    setUser(client.user);
+  }, [client]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(KerneContext.Provider, { value: client, children });
+}
+function useKerne() {
+  const context = (0, import_react.useContext)(KerneContext);
+  if (!context) {
+    throw new Error("useKerne must be used within a KerneProvider");
+  }
+  return context;
+}
+function useAuth() {
+  const client = useKerne();
+  const [user, setUser] = (0, import_react.useState)(client.user);
+  (0, import_react.useEffect)(() => {
+    setUser(client.user);
+  }, [client.user]);
+  return {
+    user,
+    isAuthenticated: client.isAuthenticated,
+    login: client.login.bind(client),
+    register: client.register.bind(client),
+    logout: client.logout.bind(client),
+    refreshUser: client.refreshUser.bind(client)
+  };
+}
+function useBilling() {
+  const client = useKerne();
+  return {
+    checkEntitlement: client.checkEntitlement.bind(client),
+    createCheckout: client.createCheckout.bind(client),
+    openCheckout: client.openCheckout.bind(client),
+    createPortal: client.createPortal.bind(client),
+    openPortal: client.openPortal.bind(client)
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  KerneClient,
+  KerneProvider,
+  createKerneClient,
+  useAuth,
+  useBilling,
+  useKerne
+});

package/dist/index.d.cts

@@ -0,0 +1,87 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as _kerne_server from '@kerne/server';
+import { KerneConfig, Kerne } from '@kerne/server';
+import React from 'react';
+import { User, AuthResponse } from '@kerne/types';
+
+interface KerneReactConfig extends Omit<KerneConfig, 'secretKey'> {
+    storage?: Storage;
+    storageKey?: string;
+    onAuthChange?: (user: User | null) => void;
+}
+declare class KerneClient {
+    private kerne;
+    private storage;
+    private storageKey;
+    private onAuthChange?;
+    private currentUser;
+    private currentToken;
+    constructor(config: KerneReactConfig);
+    private loadSession;
+    private saveSession;
+    private clearSession;
+    get user(): User | null;
+    get token(): string | null;
+    get isAuthenticated(): boolean;
+    get client(): Kerne;
+    get projects(): _kerne_server.ProjectsResource;
+    register(params: {
+        email: string;
+        password: string;
+        name?: string;
+    }): Promise<AuthResponse>;
+    login(params: {
+        email: string;
+        password: string;
+    }): Promise<AuthResponse>;
+    refreshToken(): Promise<AuthResponse | null>;
+    logout(): void;
+    refreshUser(): Promise<User | null>;
+    checkEntitlement(featureKey: string, requested?: number): Promise<boolean>;
+    createCheckout(planId: string, options?: {
+        successUrl?: string;
+        cancelUrl?: string;
+    }): Promise<string>;
+    openCheckout(planId: string, options?: {
+        successUrl?: string;
+        cancelUrl?: string;
+    }): Promise<void>;
+    createPortal(returnUrl?: string): Promise<string>;
+    openPortal(returnUrl?: string): Promise<void>;
+}
+declare function createKerneClient(config: KerneReactConfig): KerneClient;
+interface KerneProviderProps extends KerneReactConfig {
+    children: React.ReactNode;
+}
+declare function KerneProvider({ children, ...config }: KerneProviderProps): react_jsx_runtime.JSX.Element;
+declare function useKerne(): KerneClient;
+declare function useAuth(): {
+    user: User | null;
+    isAuthenticated: boolean;
+    login: (params: {
+        email: string;
+        password: string;
+    }) => Promise<AuthResponse>;
+    register: (params: {
+        email: string;
+        password: string;
+        name?: string;
+    }) => Promise<AuthResponse>;
+    logout: () => void;
+    refreshUser: () => Promise<User | null>;
+};
+declare function useBilling(): {
+    checkEntitlement: (featureKey: string, requested?: number) => Promise<boolean>;
+    createCheckout: (planId: string, options?: {
+        successUrl?: string;
+        cancelUrl?: string;
+    }) => Promise<string>;
+    openCheckout: (planId: string, options?: {
+        successUrl?: string;
+        cancelUrl?: string;
+    }) => Promise<void>;
+    createPortal: (returnUrl?: string) => Promise<string>;
+    openPortal: (returnUrl?: string) => Promise<void>;
+};
+
+export { KerneClient, KerneProvider, type KerneProviderProps, type KerneReactConfig, createKerneClient, useAuth, useBilling, useKerne };

package/dist/index.d.ts

@@ -0,0 +1,87 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as _kerne_server from '@kerne/server';
+import { KerneConfig, Kerne } from '@kerne/server';
+import React from 'react';
+import { User, AuthResponse } from '@kerne/types';
+
+interface KerneReactConfig extends Omit<KerneConfig, 'secretKey'> {
+    storage?: Storage;
+    storageKey?: string;
+    onAuthChange?: (user: User | null) => void;
+}
+declare class KerneClient {
+    private kerne;
+    private storage;
+    private storageKey;
+    private onAuthChange?;
+    private currentUser;
+    private currentToken;
+    constructor(config: KerneReactConfig);
+    private loadSession;
+    private saveSession;
+    private clearSession;
+    get user(): User | null;
+    get token(): string | null;
+    get isAuthenticated(): boolean;
+    get client(): Kerne;
+    get projects(): _kerne_server.ProjectsResource;
+    register(params: {
+        email: string;
+        password: string;
+        name?: string;
+    }): Promise<AuthResponse>;
+    login(params: {
+        email: string;
+        password: string;
+    }): Promise<AuthResponse>;
+    refreshToken(): Promise<AuthResponse | null>;
+    logout(): void;
+    refreshUser(): Promise<User | null>;
+    checkEntitlement(featureKey: string, requested?: number): Promise<boolean>;
+    createCheckout(planId: string, options?: {
+        successUrl?: string;
+        cancelUrl?: string;
+    }): Promise<string>;
+    openCheckout(planId: string, options?: {
+        successUrl?: string;
+        cancelUrl?: string;
+    }): Promise<void>;
+    createPortal(returnUrl?: string): Promise<string>;
+    openPortal(returnUrl?: string): Promise<void>;
+}
+declare function createKerneClient(config: KerneReactConfig): KerneClient;
+interface KerneProviderProps extends KerneReactConfig {
+    children: React.ReactNode;
+}
+declare function KerneProvider({ children, ...config }: KerneProviderProps): react_jsx_runtime.JSX.Element;
+declare function useKerne(): KerneClient;
+declare function useAuth(): {
+    user: User | null;
+    isAuthenticated: boolean;
+    login: (params: {
+        email: string;
+        password: string;
+    }) => Promise<AuthResponse>;
+    register: (params: {
+        email: string;
+        password: string;
+        name?: string;
+    }) => Promise<AuthResponse>;
+    logout: () => void;
+    refreshUser: () => Promise<User | null>;
+};
+declare function useBilling(): {
+    checkEntitlement: (featureKey: string, requested?: number) => Promise<boolean>;
+    createCheckout: (planId: string, options?: {
+        successUrl?: string;
+        cancelUrl?: string;
+    }) => Promise<string>;
+    openCheckout: (planId: string, options?: {
+        successUrl?: string;
+        cancelUrl?: string;
+    }) => Promise<void>;
+    createPortal: (returnUrl?: string) => Promise<string>;
+    openPortal: (returnUrl?: string) => Promise<void>;
+};
+
+export { KerneClient, KerneProvider, type KerneProviderProps, type KerneReactConfig, createKerneClient, useAuth, useBilling, useKerne };

package/dist/index.js

@@ -0,0 +1,208 @@
+// src/index.tsx
+import { createContext, useContext, useEffect, useState, useMemo } from "react";
+import { Kerne } from "@kerne/server";
+import { jsx } from "react/jsx-runtime";
+var DEFAULT_STORAGE_KEY = "kerne_auth";
+var KerneClient = class {
+  kerne;
+  storage;
+  storageKey;
+  onAuthChange;
+  currentUser = null;
+  currentToken = null;
+  constructor(config) {
+    this.storage = config.storage ?? (typeof window !== "undefined" ? localStorage : null);
+    this.storageKey = config.storageKey ?? DEFAULT_STORAGE_KEY;
+    this.onAuthChange = config.onAuthChange;
+    this.kerne = new Kerne({
+      baseUrl: config.baseUrl,
+      appId: config.appId,
+      timeout: config.timeout
+    });
+    this.loadSession();
+  }
+  loadSession() {
+    if (!this.storage) return;
+    try {
+      const data = this.storage.getItem(this.storageKey);
+      if (data) {
+        const { user, token, expires_at } = JSON.parse(data);
+        if (new Date(expires_at) > /* @__PURE__ */ new Date()) {
+          this.currentUser = user;
+          this.currentToken = token;
+          this.kerne = this.kerne.withToken(token);
+        } else {
+          this.storage.removeItem(this.storageKey);
+        }
+      }
+    } catch {
+      this.storage.removeItem(this.storageKey);
+    }
+  }
+  saveSession(response) {
+    this.currentUser = response.user;
+    this.currentToken = response.token;
+    this.kerne = this.kerne.withToken(response.token);
+    if (this.storage) {
+      this.storage.setItem(this.storageKey, JSON.stringify(response));
+    }
+    this.onAuthChange?.(response.user);
+  }
+  clearSession() {
+    this.currentUser = null;
+    this.currentToken = null;
+    if (this.storage) {
+      this.storage.removeItem(this.storageKey);
+    }
+    this.onAuthChange?.(null);
+  }
+  get user() {
+    return this.currentUser;
+  }
+  get token() {
+    return this.currentToken;
+  }
+  get isAuthenticated() {
+    return this.currentToken !== null;
+  }
+  get client() {
+    return this.kerne;
+  }
+  get projects() {
+    return this.kerne.projects;
+  }
+  async register(params) {
+    const [firstName, ...lastNameParts] = (params.name || "").split(" ");
+    const lastName = lastNameParts.join(" ");
+    const response = await this.kerne.auth.signup({
+      email: params.email,
+      password: params.password,
+      first_name: firstName,
+      last_name: lastName || void 0
+    });
+    this.saveSession(response);
+    return response;
+  }
+  async login(params) {
+    const response = await this.kerne.auth.login({
+      email: params.email,
+      password: params.password
+    });
+    this.saveSession(response);
+    return response;
+  }
+  async refreshToken() {
+    if (!this.currentToken) return null;
+    const response = await this.kerne.auth.refreshToken({
+      refresh_token: this.currentToken
+    });
+    this.saveSession(response);
+    return response;
+  }
+  logout() {
+    this.clearSession();
+  }
+  async refreshUser() {
+    if (!this.currentToken) return null;
+    try {
+      const user = await this.kerne.users.me();
+      this.currentUser = user;
+      this.onAuthChange?.(user);
+      return user;
+    } catch {
+      this.clearSession();
+      return null;
+    }
+  }
+  async checkEntitlement(featureKey, requested) {
+    try {
+      const check = await this.kerne.billing.checkEntitlement(featureKey, requested);
+      return check.has_access;
+    } catch {
+      return false;
+    }
+  }
+  async createCheckout(planId, options) {
+    const { url } = await this.kerne.billing.createCheckout(planId, {
+      success_url: options?.successUrl,
+      cancel_url: options?.cancelUrl
+    });
+    return url;
+  }
+  async openCheckout(planId, options) {
+    const url = await this.createCheckout(planId, options);
+    if (typeof window !== "undefined") {
+      window.location.href = url;
+    }
+  }
+  async createPortal(returnUrl) {
+    const { url } = await this.kerne.billing.createPortal({ return_url: returnUrl });
+    return url;
+  }
+  async openPortal(returnUrl) {
+    const url = await this.createPortal(returnUrl);
+    if (typeof window !== "undefined") {
+      window.location.href = url;
+    }
+  }
+};
+function createKerneClient(config) {
+  return new KerneClient(config);
+}
+var KerneContext = createContext(null);
+function KerneProvider({ children, ...config }) {
+  const [user, setUser] = useState(null);
+  const client = useMemo(() => {
+    return new KerneClient({
+      ...config,
+      onAuthChange: (u) => {
+        setUser(u);
+        config.onAuthChange?.(u);
+      }
+    });
+  }, [config.appId, config.baseUrl]);
+  useEffect(() => {
+    setUser(client.user);
+  }, [client]);
+  return /* @__PURE__ */ jsx(KerneContext.Provider, { value: client, children });
+}
+function useKerne() {
+  const context = useContext(KerneContext);
+  if (!context) {
+    throw new Error("useKerne must be used within a KerneProvider");
+  }
+  return context;
+}
+function useAuth() {
+  const client = useKerne();
+  const [user, setUser] = useState(client.user);
+  useEffect(() => {
+    setUser(client.user);
+  }, [client.user]);
+  return {
+    user,
+    isAuthenticated: client.isAuthenticated,
+    login: client.login.bind(client),
+    register: client.register.bind(client),
+    logout: client.logout.bind(client),
+    refreshUser: client.refreshUser.bind(client)
+  };
+}
+function useBilling() {
+  const client = useKerne();
+  return {
+    checkEntitlement: client.checkEntitlement.bind(client),
+    createCheckout: client.createCheckout.bind(client),
+    openCheckout: client.openCheckout.bind(client),
+    createPortal: client.createPortal.bind(client),
+    openPortal: client.openPortal.bind(client)
+  };
+}
+export {
+  KerneClient,
+  KerneProvider,
+  createKerneClient,
+  useAuth,
+  useBilling,
+  useKerne
+};

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@kerne/react",
+  "version": "0.1.0",
+  "description": "Kerne React SDK",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "license": "MIT",
+  "author": {
+    "name": "Kerne",
+    "url": "https://kerne.io"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kerne-io/kerne.git"
+  },
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.tsx --format cjs,esm --dts --clean",
+    "dev": "tsup src/index.tsx --format cjs,esm --dts --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@kerne/server": "workspace:*",
+    "@kerne/types": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0 || ^19.0.0",
+    "react": "^19.0.0",
+    "tsup": "^8.3.0",
+    "typescript": "^5.7.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}