npm - @diffsome/react - Versions diffs - 1.1.0 → 1.1.2 - Mend

@diffsome/react 1.1.0 → 1.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -8,25 +8,91 @@ Headless React hooks and providers for Diffsome SDK. Build any e-commerce or CMS
 npm install @diffsome/react @diffsome/sdk
 # or
 yarn add @diffsome/react @diffsome/sdk
+# or
+pnpm add @diffsome/react @diffsome/sdk
 ```
-## Quick Start
+## Configuration
+### Option 1: Environment Variables (Recommended)
+**Next.js** (`.env.local`)
+```bash
+NEXT_PUBLIC_DIFFSOME_TENANT_ID=my-store
+NEXT_PUBLIC_DIFFSOME_API_KEY=pky_xxx        # optional
+NEXT_PUBLIC_DIFFSOME_BASE_URL=https://api.diffsome.com  # optional
+```
+**Create React App** (`.env`)
+```bash
+REACT_APP_DIFFSOME_TENANT_ID=my-store
+REACT_APP_DIFFSOME_API_KEY=pky_xxx
+```
+Then simply wrap your app:
 ```tsx
-import { DiffsomeProvider, useAuth, useCart, useProducts } from '@diffsome/react';
+import { DiffsomeProvider } from '@diffsome/react';
 function App() {
   return (
-    <DiffsomeProvider
-      config={{
-        tenantId: 'my-store',
-        apiKey: 'pky_your_api_key',
-      }}
-    >
-      <Shop />
+    <DiffsomeProvider>
+      <YourApp />
     </DiffsomeProvider>
   );
 }
+```
+### Option 2: Direct Config
+```tsx
+<DiffsomeProvider
+  config={{
+    tenantId: 'my-store',           // required
+    apiKey: 'pky_xxx',              // optional
+    baseUrl: 'https://api.diffsome.com',  // optional
+    persistToken: true,             // default: true
+    storageType: 'localStorage',    // 'localStorage' | 'sessionStorage'
+  }}
+>
+  <YourApp />
+</DiffsomeProvider>
+```
+### Next.js App Router Setup
+```tsx
+// app/providers.tsx
+'use client';
+import { DiffsomeProvider } from '@diffsome/react';
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <DiffsomeProvider>
+      {children}
+    </DiffsomeProvider>
+  );
+}
+// app/layout.tsx
+import { Providers } from './providers';
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}
+```
+## Quick Start
+```tsx
+import { DiffsomeProvider, useAuth, useCart, useProducts } from '@diffsome/react';
 function Shop() {
   const { user, login, logout } = useAuth();
@@ -62,29 +128,34 @@ function Shop() {
 ## Available Hooks
 ### Authentication
-- `useAuth()` - Login, register, logout, profile management
+- `useAuth()` - Login, register, logout, profile, password reset
 - `useSocialAuth()` - Social login (Google, Kakao, Naver, etc.)
 ### E-commerce
 - `useCart()` - Cart management (add, update, remove items)
-- `useWishlist()` - Wishlist management
-- `useProducts()` - Product listing with pagination
+- `useWishlist()` - Wishlist management with toggle
+- `useProducts(options?)` - Product listing with pagination & search
 - `useProduct(slug)` - Single product details
 - `useCategories()` - Product categories
-- `useFeaturedProducts()` - Featured products
+- `useFeaturedProducts(limit?)` - Featured products
+- `useProductsByType(type)` - Products by type (digital, subscription, bundle)
+- `useDigitalProducts()` - Digital products shorthand
+- `useSubscriptionProducts()` - Subscription products shorthand
+- `useBundleProducts()` - Bundle products shorthand
+- `useBundleItems(slug)` - Bundle items with pricing
 - `useOrders()` - Order history
 - `useOrder(id)` - Single order details
 - `useCreateOrder()` - Create new order
 ### Payment
-- `usePaymentStatus()` - Check available payment methods (Toss, Stripe)
+- `usePaymentStatus()` - Check available payment methods
 - `useTossPayment()` - Toss Payments (Korea)
 - `useStripePayment()` - Stripe Payments (Global)
 - `useCoupons()` - User's available coupons
 - `useValidateCoupon()` - Validate coupon code
 ### Subscriptions
-- `useSubscriptions()` - User's subscriptions
+- `useSubscriptions()` - User's subscriptions list
 - `useSubscription(id)` - Single subscription with cancel/pause/resume
 - `useCreateSubscription()` - Create subscription via Stripe
@@ -93,15 +164,18 @@ function Shop() {
 - `useOrderDownloads(orderNumber)` - Downloads for specific order
 ### Reviews
-- `useProductReviews(slug)` - Product reviews
+- `useProductReviews(slug)` - Product reviews with stats
 - `useMyReviews()` - User's reviews
 - `useCanReview(slug)` - Check review eligibility
 - `useCreateReview()` - Create product review
 ### Content
-- `useBlog()` - Blog posts with pagination
+- `useBlog(options?)` - Blog posts with pagination
 - `useBlogPost(slug)` - Single blog post
 - `useBlogCategories()` - Blog categories
+- `useBlogTags()` - Blog tags
+- `useFeaturedBlog(limit?)` - Featured blog posts
+- `useBlogSearch()` - Blog search
 - `useBoards()` - Board listing
 - `useBoard(slug)` - Single board
 - `useBoardPosts(slug)` - Board posts
@@ -112,8 +186,8 @@ function Shop() {
 ### Reservations
 - `useReservationServices()` - Available services
-- `useReservationStaffs()` - Staff members
-- `useAvailableSlots(serviceId, date)` - Time slots
+- `useReservationStaffs(serviceId?)` - Staff members
+- `useAvailableSlots(serviceId, staffId?, date)` - Available time slots
 - `useMyReservations()` - User's reservations
 - `useCreateReservation()` - Create reservation
 - `useReservationSettings()` - Reservation settings
@@ -134,7 +208,7 @@ function Shop() {
 ```tsx
 function LoginForm() {
-  const { user, login, logout, loading, error } = useAuth();
+  const { user, login, logout, forgotPassword, loading, error } = useAuth();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
@@ -143,6 +217,11 @@ function LoginForm() {
     await login({ email, password });
   };
+  const handleForgotPassword = async () => {
+    await forgotPassword(email);
+    alert('Password reset email sent!');
+  };
   if (user) {
     return (
       <div>
@@ -157,17 +236,53 @@ function LoginForm() {
       <input value={email} onChange={(e) => setEmail(e.target.value)} />
       <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
       <button disabled={loading}>Login</button>
+      <button type="button" onClick={handleForgotPassword}>Forgot Password</button>
       {error && <p>{error.message}</p>}
     </form>
   );
 }
 ```
+### useProducts with Filters
+```tsx
+function ProductGrid() {
+  const { products, loading, hasMore, loadMore, search } = useProducts({
+    per_page: 12,
+    category: 'electronics',
+  });
+  const [query, setQuery] = useState('');
+  return (
+    <div>
+      <input
+        placeholder="Search products..."
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        onKeyDown={(e) => e.key === 'Enter' && search(query)}
+      />
+      <div className="grid grid-cols-4 gap-4">
+        {products.map(product => (
+          <ProductCard key={product.id} product={product} />
+        ))}
+      </div>
+      {hasMore && (
+        <button onClick={loadMore} disabled={loading}>
+          Load More
+        </button>
+      )}
+    </div>
+  );
+}
+```
 ### useCart
 ```tsx
 function Cart() {
-  const { items, total, updateItem, removeItem, clearCart } = useCart();
+  const { items, total, updateItem, removeItem, clearCart, applyCoupon } = useCart();
   return (
     <div>
@@ -193,12 +308,17 @@ function Cart() {
 ```tsx
 function WishlistButton({ productId }) {
-  const { isInWishlist, toggleWishlist } = useWishlist();
+  const { isInWishlist, toggleWishlist, getProductWishlistCount } = useWishlist();
+  const [count, setCount] = useState(0);
   const inWishlist = isInWishlist(productId);
+  useEffect(() => {
+    getProductWishlistCount(productId).then(setCount);
+  }, [productId]);
   return (
     <button onClick={() => toggleWishlist(productId)}>
-      {inWishlist ? '❤️' : '🤍'}
+      {inWishlist ? '❤️' : '🤍'} {count}
     </button>
   );
 }
@@ -227,6 +347,65 @@ function CheckoutButton({ orderNumber }) {
 }
 ```
+### useSubscription
+```tsx
+function SubscriptionManager({ subscriptionId }) {
+  const { subscription, cancel, pause, resume, loading } = useSubscription(subscriptionId);
+  if (!subscription) return null;
+  return (
+    <div>
+      <p>Plan: {subscription.plan.name}</p>
+      <p>Status: {subscription.status}</p>
+      <p>Next billing: {subscription.current_period_end}</p>
+      {subscription.status === 'active' && (
+        <>
+          <button onClick={pause}>Pause</button>
+          <button onClick={cancel}>Cancel</button>
+        </>
+      )}
+      {subscription.status === 'paused' && (
+        <button onClick={resume}>Resume</button>
+      )}
+    </div>
+  );
+}
+```
+### useBlogSearch
+```tsx
+function BlogSearch() {
+  const { results, search, loading } = useBlogSearch();
+  const [query, setQuery] = useState('');
+  const handleSearch = () => {
+    search(query);
+  };
+  return (
+    <div>
+      <input
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        placeholder="Search blog..."
+      />
+      <button onClick={handleSearch} disabled={loading}>Search</button>
+      {results.map(post => (
+        <article key={post.id}>
+          <h3>{post.title}</h3>
+          <p>{post.excerpt}</p>
+        </article>
+      ))}
+    </div>
+  );
+}
+```
 ### useComments
 ```tsx
@@ -345,9 +524,24 @@ function CustomComponent() {
 All types are re-exported from `@diffsome/sdk`:
 ```tsx
-import type { Product, Cart, Order, Member, CustomEntity, EntityRecord } from '@diffsome/react';
+import type {
+  Product,
+  Cart,
+  Order,
+  Member,
+  CustomEntity,
+  EntityRecord,
+  BlogPost,
+  Reservation,
+  // ... and more
+} from '@diffsome/react';
 ```
+## Requirements
+- React 18.0+
+- @diffsome/sdk 3.2.0+
 ## License
 MIT

package/dist/index.d.mts CHANGED Viewed

@@ -11,7 +11,7 @@ interface DiffsomeContextValue {
 declare const DiffsomeContext: react.Context<DiffsomeContextValue | null>;
 interface DiffsomeProviderProps {
     children: ReactNode;
-    config: DiffsomeConfig;
+    config?: Partial<DiffsomeConfig>;
 }
 declare function DiffsomeProvider({ children, config }: DiffsomeProviderProps): react_jsx_runtime.JSX.Element;
 declare function useDiffsome(): DiffsomeContextValue;

package/dist/index.d.ts CHANGED Viewed

@@ -11,7 +11,7 @@ interface DiffsomeContextValue {
 declare const DiffsomeContext: react.Context<DiffsomeContextValue | null>;
 interface DiffsomeProviderProps {
     children: ReactNode;
-    config: DiffsomeConfig;
+    config?: Partial<DiffsomeConfig>;
 }
 declare function DiffsomeProvider({ children, config }: DiffsomeProviderProps): react_jsx_runtime.JSX.Element;
 declare function useDiffsome(): DiffsomeContextValue;

package/dist/index.js CHANGED Viewed

@@ -87,15 +87,34 @@ var import_react = require("react");
 var import_sdk = require("@diffsome/sdk");
 var import_jsx_runtime = require("react/jsx-runtime");
 var DiffsomeContext = (0, import_react.createContext)(null);
-function DiffsomeProvider({ children, config }) {
+var getEnvVar = (key) => {
+  if (typeof window !== "undefined" && window.__DIFFSOME_ENV__?.[key]) {
+    return window.__DIFFSOME_ENV__[key];
+  }
+  if (typeof process !== "undefined" && process?.env) {
+    return process.env[`NEXT_PUBLIC_${key}`] || process.env[`REACT_APP_${key}`] || process.env[key];
+  }
+  return void 0;
+};
+function DiffsomeProvider({ children, config = {} }) {
   const [isReady, setIsReady] = (0, import_react.useState)(false);
+  const tenantId = config.tenantId || getEnvVar("DIFFSOME_TENANT_ID");
+  const apiKey = config.apiKey || getEnvVar("DIFFSOME_API_KEY");
+  const baseUrl = config.baseUrl || getEnvVar("DIFFSOME_BASE_URL");
+  if (!tenantId) {
+    throw new Error(
+      "DiffsomeProvider: tenantId is required. Provide it via config prop or set NEXT_PUBLIC_DIFFSOME_TENANT_ID / VITE_DIFFSOME_TENANT_ID environment variable."
+    );
+  }
   const client = (0, import_react.useMemo)(() => {
     return new import_sdk.Diffsome({
-      ...config,
+      tenantId,
+      apiKey,
+      baseUrl,
       persistToken: config.persistToken ?? true,
       storageType: config.storageType ?? "localStorage"
     });
-  }, [config.tenantId, config.baseUrl, config.apiKey]);
+  }, [tenantId, baseUrl, apiKey, config.persistToken, config.storageType]);
   (0, import_react.useEffect)(() => {
     setIsReady(true);
   }, []);

package/dist/index.mjs CHANGED Viewed

@@ -3,15 +3,34 @@ import { createContext, useContext, useState, useEffect, useMemo } from "react";
 import { Diffsome } from "@diffsome/sdk";
 import { jsx } from "react/jsx-runtime";
 var DiffsomeContext = createContext(null);
-function DiffsomeProvider({ children, config }) {
+var getEnvVar = (key) => {
+  if (typeof window !== "undefined" && window.__DIFFSOME_ENV__?.[key]) {
+    return window.__DIFFSOME_ENV__[key];
+  }
+  if (typeof process !== "undefined" && process?.env) {
+    return process.env[`NEXT_PUBLIC_${key}`] || process.env[`REACT_APP_${key}`] || process.env[key];
+  }
+  return void 0;
+};
+function DiffsomeProvider({ children, config = {} }) {
   const [isReady, setIsReady] = useState(false);
+  const tenantId = config.tenantId || getEnvVar("DIFFSOME_TENANT_ID");
+  const apiKey = config.apiKey || getEnvVar("DIFFSOME_API_KEY");
+  const baseUrl = config.baseUrl || getEnvVar("DIFFSOME_BASE_URL");
+  if (!tenantId) {
+    throw new Error(
+      "DiffsomeProvider: tenantId is required. Provide it via config prop or set NEXT_PUBLIC_DIFFSOME_TENANT_ID / VITE_DIFFSOME_TENANT_ID environment variable."
+    );
+  }
   const client = useMemo(() => {
     return new Diffsome({
-      ...config,
+      tenantId,
+      apiKey,
+      baseUrl,
       persistToken: config.persistToken ?? true,
       storageType: config.storageType ?? "localStorage"
     });
-  }, [config.tenantId, config.baseUrl, config.apiKey]);
+  }, [tenantId, baseUrl, apiKey, config.persistToken, config.storageType]);
   useEffect(() => {
     setIsReady(true);
   }, []);

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@diffsome/react",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "React hooks and providers for Diffsome SDK - Headless e-commerce & CMS",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -37,11 +37,12 @@
     "url": "https://github.com/diffsome/diffsome-react.git"
   },
   "peerDependencies": {
-    "react": ">=18.0.0",
-    "@diffsome/sdk": ">=3.2.0"
+    "@diffsome/sdk": ">=3.2.0",
+    "react": ">=18.0.0"
   },
   "devDependencies": {
     "@diffsome/sdk": "^3.2.7",
+    "@types/node": "^25.0.10",
     "@types/react": "^18.2.0",
     "react": "^18.2.0",
     "tsup": "^8.0.0",