@seriphxyz/react 0.1.2

package/dist/index.d.ts

@@ -0,0 +1,152 @@
+/**
+ * @seriphxyz/react - React hooks for Seriph widgets
+ *
+ * @example Subscribe form
+ * ```tsx
+ * import { useSubscribe } from '@seriphxyz/react';
+ *
+ * function Newsletter() {
+ *   const { subscribe, status, error } = useSubscribe({
+ *     siteKey: 'your-site-key',
+ *   });
+ *
+ *   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+ *     e.preventDefault();
+ *     const email = new FormData(e.currentTarget).get('email') as string;
+ *     subscribe(email);
+ *   };
+ *
+ *   return (
+ *     <form onSubmit={handleSubmit}>
+ *       <input type="email" name="email" required />
+ *       <button disabled={status === 'loading'}>
+ *         {status === 'loading' ? 'Subscribing...' : 'Subscribe'}
+ *       </button>
+ *       {status === 'success' && <p>Thanks for subscribing!</p>}
+ *       {status === 'error' && <p>Error: {error?.message}</p>}
+ *     </form>
+ *   );
+ * }
+ * ```
+ */
+import { type SeriphConfig, type Comment, type ControllerStatus } from "@seriphxyz/core";
+export type { SeriphConfig, SubscribeState, FormState, ReactionsState, CommentsState, Comment, ReactionCounts, SeriphPost, FetchPostsOptions, FetchPostOptions, ControllerStatus, } from "@seriphxyz/core";
+export { fetchPosts, fetchPost, DEFAULT_ENDPOINT, API_PATH, } from "@seriphxyz/core";
+export interface UseSubscribeOptions extends SeriphConfig {
+}
+export interface UseSubscribeReturn {
+    status: ControllerStatus;
+    message: string | null;
+    error: Error | null;
+    subscribe: (email: string) => Promise<void>;
+    reset: () => void;
+}
+/**
+ * Hook for handling email subscriptions.
+ *
+ * @example
+ * ```tsx
+ * const { subscribe, status, message, error } = useSubscribe({
+ *   siteKey: 'your-site-key',
+ * });
+ *
+ * <button onClick={() => subscribe('user@example.com')}>Subscribe</button>
+ * ```
+ */
+export declare function useSubscribe(options: UseSubscribeOptions): UseSubscribeReturn;
+export interface UseFormOptions extends SeriphConfig {
+    /** Form slug/identifier */
+    formSlug: string;
+}
+export interface UseFormReturn {
+    status: ControllerStatus;
+    message: string | null;
+    error: Error | null;
+    submit: (data: Record<string, unknown>) => Promise<void>;
+    reset: () => void;
+}
+/**
+ * Hook for handling form submissions.
+ *
+ * @example
+ * ```tsx
+ * const { submit, status, error } = useForm({
+ *   siteKey: 'your-site-key',
+ *   formSlug: 'contact',
+ * });
+ *
+ * const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+ *   e.preventDefault();
+ *   const formData = new FormData(e.currentTarget);
+ *   submit(Object.fromEntries(formData));
+ * };
+ * ```
+ */
+export declare function useForm(options: UseFormOptions): UseFormReturn;
+export interface UseReactionsOptions extends SeriphConfig {
+    /** Content identifier (e.g., post slug) */
+    contentId: string;
+    /** Auto-fetch reactions on mount (default: true) */
+    autoFetch?: boolean;
+}
+export interface UseReactionsReturn {
+    counts: Record<string, number>;
+    userReactions: string[];
+    status: ControllerStatus;
+    error: Error | null;
+    addReaction: (type: string) => Promise<void>;
+    removeReaction: (type: string) => Promise<void>;
+    refresh: () => Promise<void>;
+}
+/**
+ * Hook for handling reactions (likes, claps, etc.).
+ *
+ * @example
+ * ```tsx
+ * const { counts, userReactions, addReaction, removeReaction } = useReactions({
+ *   siteKey: 'your-site-key',
+ *   contentId: 'my-post-slug',
+ * });
+ *
+ * <button onClick={() => addReaction('like')}>
+ *   Like ({counts.like || 0})
+ * </button>
+ * ```
+ */
+export declare function useReactions(options: UseReactionsOptions): UseReactionsReturn;
+export interface UseCommentsOptions extends SeriphConfig {
+    /** Content identifier (e.g., post slug) */
+    contentId: string;
+    /** Auto-fetch comments on mount (default: true) */
+    autoFetch?: boolean;
+}
+export interface UseCommentsReturn {
+    comments: Comment[];
+    status: ControllerStatus;
+    error: Error | null;
+    postComment: (author: string, content: string) => Promise<void>;
+    refresh: () => Promise<void>;
+}
+/**
+ * Hook for handling comments.
+ *
+ * @example
+ * ```tsx
+ * const { comments, status, postComment } = useComments({
+ *   siteKey: 'your-site-key',
+ *   contentId: 'my-post-slug',
+ * });
+ *
+ * {comments.map(comment => (
+ *   <div key={comment.id}>
+ *     <strong>{comment.authorName}</strong>: {comment.content}
+ *   </div>
+ * ))}
+ *
+ * <button onClick={() => postComment('Anonymous', 'Great post!')}>
+ *   Add Comment
+ * </button>
+ * ```
+ */
+export declare function useComments(options: UseCommentsOptions): UseCommentsReturn;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,196 @@
+/**
+ * @seriphxyz/react - React hooks for Seriph widgets
+ *
+ * @example Subscribe form
+ * ```tsx
+ * import { useSubscribe } from '@seriphxyz/react';
+ *
+ * function Newsletter() {
+ *   const { subscribe, status, error } = useSubscribe({
+ *     siteKey: 'your-site-key',
+ *   });
+ *
+ *   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+ *     e.preventDefault();
+ *     const email = new FormData(e.currentTarget).get('email') as string;
+ *     subscribe(email);
+ *   };
+ *
+ *   return (
+ *     <form onSubmit={handleSubmit}>
+ *       <input type="email" name="email" required />
+ *       <button disabled={status === 'loading'}>
+ *         {status === 'loading' ? 'Subscribing...' : 'Subscribe'}
+ *       </button>
+ *       {status === 'success' && <p>Thanks for subscribing!</p>}
+ *       {status === 'error' && <p>Error: {error?.message}</p>}
+ *     </form>
+ *   );
+ * }
+ * ```
+ */
+import { useState, useCallback, useEffect, useRef } from "react";
+import { SubscribeController, FormController, ReactionsController, CommentsController, } from "@seriphxyz/core";
+// Re-export API functions from core
+export { fetchPosts, fetchPost, DEFAULT_ENDPOINT, API_PATH, } from "@seriphxyz/core";
+/**
+ * Hook for handling email subscriptions.
+ *
+ * @example
+ * ```tsx
+ * const { subscribe, status, message, error } = useSubscribe({
+ *   siteKey: 'your-site-key',
+ * });
+ *
+ * <button onClick={() => subscribe('user@example.com')}>Subscribe</button>
+ * ```
+ */
+export function useSubscribe(options) {
+    const controllerRef = useRef(null);
+    const [state, setState] = useState({
+        status: "idle",
+        message: null,
+        error: null,
+    });
+    useEffect(() => {
+        const controller = new SubscribeController(options);
+        controllerRef.current = controller;
+        const unsubscribe = controller.subscribe(setState);
+        return unsubscribe;
+    }, [options.siteKey, options.endpoint]);
+    const subscribe = useCallback(async (email) => {
+        await controllerRef.current?.submit(email);
+    }, []);
+    const reset = useCallback(() => {
+        controllerRef.current?.reset();
+    }, []);
+    return { ...state, subscribe, reset };
+}
+/**
+ * Hook for handling form submissions.
+ *
+ * @example
+ * ```tsx
+ * const { submit, status, error } = useForm({
+ *   siteKey: 'your-site-key',
+ *   formSlug: 'contact',
+ * });
+ *
+ * const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+ *   e.preventDefault();
+ *   const formData = new FormData(e.currentTarget);
+ *   submit(Object.fromEntries(formData));
+ * };
+ * ```
+ */
+export function useForm(options) {
+    const controllerRef = useRef(null);
+    const [state, setState] = useState({
+        status: "idle",
+        message: null,
+        error: null,
+    });
+    useEffect(() => {
+        const controller = new FormController(options, options.formSlug);
+        controllerRef.current = controller;
+        const unsubscribe = controller.subscribe(setState);
+        return unsubscribe;
+    }, [options.siteKey, options.endpoint, options.formSlug]);
+    const submit = useCallback(async (data) => {
+        await controllerRef.current?.submit(data);
+    }, []);
+    const reset = useCallback(() => {
+        controllerRef.current?.reset();
+    }, []);
+    return { ...state, submit, reset };
+}
+/**
+ * Hook for handling reactions (likes, claps, etc.).
+ *
+ * @example
+ * ```tsx
+ * const { counts, userReactions, addReaction, removeReaction } = useReactions({
+ *   siteKey: 'your-site-key',
+ *   contentId: 'my-post-slug',
+ * });
+ *
+ * <button onClick={() => addReaction('like')}>
+ *   Like ({counts.like || 0})
+ * </button>
+ * ```
+ */
+export function useReactions(options) {
+    const controllerRef = useRef(null);
+    const [state, setState] = useState({
+        counts: {},
+        userReactions: [],
+        status: "idle",
+        error: null,
+    });
+    useEffect(() => {
+        const controller = new ReactionsController(options, options.contentId);
+        controllerRef.current = controller;
+        const unsubscribe = controller.subscribe(setState);
+        // Auto-fetch on mount (default: true)
+        if (options.autoFetch !== false) {
+            controller.fetch();
+        }
+        return unsubscribe;
+    }, [options.siteKey, options.endpoint, options.contentId]);
+    const addReaction = useCallback(async (type) => {
+        await controllerRef.current?.add(type);
+    }, []);
+    const removeReaction = useCallback(async (type) => {
+        await controllerRef.current?.remove(type);
+    }, []);
+    const refresh = useCallback(async () => {
+        await controllerRef.current?.fetch();
+    }, []);
+    return { ...state, addReaction, removeReaction, refresh };
+}
+/**
+ * Hook for handling comments.
+ *
+ * @example
+ * ```tsx
+ * const { comments, status, postComment } = useComments({
+ *   siteKey: 'your-site-key',
+ *   contentId: 'my-post-slug',
+ * });
+ *
+ * {comments.map(comment => (
+ *   <div key={comment.id}>
+ *     <strong>{comment.authorName}</strong>: {comment.content}
+ *   </div>
+ * ))}
+ *
+ * <button onClick={() => postComment('Anonymous', 'Great post!')}>
+ *   Add Comment
+ * </button>
+ * ```
+ */
+export function useComments(options) {
+    const controllerRef = useRef(null);
+    const [state, setState] = useState({
+        comments: [],
+        status: "idle",
+        error: null,
+    });
+    useEffect(() => {
+        const controller = new CommentsController(options, options.contentId);
+        controllerRef.current = controller;
+        const unsubscribe = controller.subscribe(setState);
+        // Auto-fetch on mount (default: true)
+        if (options.autoFetch !== false) {
+            controller.fetch();
+        }
+        return unsubscribe;
+    }, [options.siteKey, options.endpoint, options.contentId]);
+    const postComment = useCallback(async (author, content) => {
+        await controllerRef.current?.post(author, content);
+    }, []);
+    const refresh = useCallback(async () => {
+        await controllerRef.current?.fetch();
+    }, []);
+    return { ...state, postComment, refresh };
+}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@seriphxyz/react",
+  "version": "0.1.2",
+  "description": "React hooks for Seriph widgets (forms, comments, reactions, subscriptions)",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/seriphxyz/react.git"
+  },
+  "homepage": "https://seriph.xyz",
+  "author": "Tim Shedor",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "react",
+    "seriph",
+    "forms",
+    "comments",
+    "reactions",
+    "subscribe",
+    "hooks"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@seriphxyz/core": "0.1.2"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "react": "^18.3.0",
+    "typescript": "^5.7.3"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch"
+  }
+}