@ph-cms/client-sdk 0.1.3 → 0.1.4

package/README.md

@@ -8,6 +8,7 @@ This package provides:
 - Auth provider interfaces and implementations
 - React context and hooks for consuming the client in UI code
 - **Integrated React Query support** (from v0.1.1)
+- **Automatic Auth State Management** (from v0.1.3)
 
 ## Installation
 
@@ -15,46 +16,21 @@ This package provides:
 npm install @ph-cms/client-sdk
 ```
 
-> **Note:** `@tanstack/react-query` is a direct dependency from v0.1.1. You no longer need to install it manually unless you use it in your own application code.
+> **Note:** `@tanstack/react-query` is a direct dependency. You no longer need to install it manually unless you use it in your own application code.
 
-If you use the React bindings, ensure you have `react` installed:
+## React Usage
 
-```bash
-npm install react react-dom
-```
-
-If you use Firebase auth integration:
+`PHCMSProvider` automatically includes a `QueryClientProvider` and manages the global authentication state.
 
-```bash
-npm install firebase
-```
-
-## Usage (Core SDK)
+### Basic Setup
 
-```ts
-import { PHCMSClient } from '@ph-cms/client-sdk';
+```tsx
+import { PHCMSClient, PHCMSProvider } from '@ph-cms/client-sdk';
 
 const client = new PHCMSClient({
   baseURL: 'https://api.example.com',
 });
 
-// Use the modules directly
-const contents = await client.content.list({
-  page: 1,
-  limit: 20,
-});
-```
-
-## React Usage (v0.1.1+)
-
-From version 0.1.1, `PHCMSProvider` automatically includes a `QueryClientProvider`. You don't need to wrap your app with `QueryClientProvider` manually to use PH-CMS hooks.
-
-### Basic Setup
-
-```tsx
-import { PHCMSClient, PHCMSProvider } from '@ph-cms/client-sdk';
-import { client } from './lib/sdk'; // Your pre-configured client
-
 export function App() {
   return (
     <PHCMSProvider client={client}>
@@ -64,73 +40,62 @@ export function App() {
 }
 ```
 
-### Using Hooks
+### Authentication State (`useAuth`)
+
+From v0.1.3, the `useAuth` hook provides a unified interface for both authentication state and actions.
 
 ```tsx
-import { useContent, useUser } from '@ph-cms/client-sdk';
+import { useAuth } from '@ph-cms/client-sdk';
+
+function ProfileComponent() {
+  const { 
+    user, 
+    isAuthenticated, 
+    isLoading, 
+    login, 
+    logout 
+  } = useAuth();
 
-function MyComponent() {
-  const { data: user, isLoading: userLoading } = useUser();
-  const { data: contents, isLoading: contentLoading } = useContent();
+  if (isLoading) return <div>Checking auth...</div>;
 
-  if (userLoading || contentLoading) return <div>Loading...</div>;
+  if (!isAuthenticated) {
+    return <button onClick={() => login({ email: '...', password: '...' })}>Login</button>;
+  }
 
   return (
     <div>
-      <h1>Hello, {user?.email}</h1>
-      <ul>
-        {contents?.items.map(item => (
-          <li key={item.uid}>{item.title}</li>
-        ))}
-      </ul>
+      <h1>Welcome, {user?.display_name}</h1>
+      <button onClick={() => logout()}>Logout</button>
     </div>
   );
 }
 ```
 
-### Custom QueryClient (Optional)
-
-If your application already uses React Query and you want to share the cache/settings:
+### Using Data Hooks
 
 ```tsx
-import { QueryClient } from '@tanstack/react-query';
-import { PHCMSClient, PHCMSProvider } from '@ph-cms/client-sdk';
-
-const queryClient = new QueryClient();
-const client = new PHCMSClient({ baseURL: '...' });
-
-export function App() {
-  return (
-    <PHCMSProvider client={client} queryClient={queryClient}>
-      {/* Both your app and PH-CMS hooks will use the same queryClient */}
-      <YourComponents />
-    </PHCMSProvider>
-  );
-}
-```
+import { useContentList, useContentDetail } from '@ph-cms/client-sdk';
 
-## Admin SDK (@ph-cms/client-sdk-admin)
+function ContentList() {
+  const { data, isLoading } = useContentList({ limit: 10 });
 
-For administrative tasks, use `@ph-cms/client-sdk-admin`. It follows the same provider pattern:
+  if (isLoading) return <div>Loading...</div>;
 
-```tsx
-import { PHCMSAdminProvider } from '@ph-cms/client-sdk-admin';
-import { adminClient } from './lib/sdk';
-
-export function App() {
   return (
-    <PHCMSAdminProvider client={adminClient}>
-      <AdminComponents />
-    </PHCMSAdminProvider>
+    <ul>
+      {data?.content.map(item => (
+        <li key={item.uid}>{item.title}</li>
+      ))}
+    </ul>
   );
 }
 ```
 
-## Media & File Upload (v0.1.2+)
+## Media & File Upload
 
 Uploading media files follows a 3-step process: Request a Ticket -> Upload to S3 -> Create/Update Content.
 
-### 1. Simple Workflow Example
+### Simple Workflow Example
 
 ```tsx
 import { useMediaUploadTickets, useUploadToS3, useCreateContent } from '@ph-cms/client-sdk';
@@ -149,8 +114,6 @@ function MediaUploader() {
       filename: file.name,
       contentType: file.type,
       fileSize: file.size,
-      // width: 1024, (optional)
-      // height: 768   (optional)
     }]);
 
     const { mediaUid, uploadUrl } = tickets[0];
@@ -160,7 +123,6 @@ function MediaUploader() {
 
     // Step 3: Use the mediaUid to create content
     await createContent({
-      channelSlug: 'my-channel',
       type: 'post',
       title: 'Post with image',
       mediaAttachments: [mediaUid]
@@ -171,14 +133,6 @@ function MediaUploader() {
 }
 ```
 
-### 2. Supported Media Types
-The system automatically classifies media based on the `contentType`:
-- `image/*` -> `image`
-- `video/*` -> `video`
-- `audio/*` -> `audio`
-- `application/pdf`, `.docx`, etc. -> `document`
-- Others -> `file`
-
 ## License
 
 MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ph-cms/client-sdk",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Unified PH-CMS Client SDK (React + Core)",
   "keywords": [],
   "license": "MIT",