@quantabit/cms-sdk

QuantaBit CMS Content Management SDK - Reusable content, categories, tags, and media management features

📦 Installation

npm install @quantabit/cms-sdk
# or
yarn add @quantabit/cms-sdk

🚀 Quick Start

1. Setup Provider

import { CMSProvider } from "@quantabit/cms-sdk";
import "@quantabit/cms-sdk/styles.css";

function App() {
  return (
    <CMSProvider
      apiUrl="https://api.example.com/v1"
      token="your-auth-token"
      language="en"
    >
      <YourComponent />
    </CMSProvider>
  );
}

2. Using Components

import { ContentEditor, ContentList, MediaLibrary } from '@quantabit/cms-sdk';

// Content editor
<ContentEditor
  onSave={(content) => console.log('Saved:', content)}
  onPublish={(content) => console.log('Published:', content)}
/>

// Content list
<ContentList
  onEdit={(content) => console.log('Edit:', content)}
  onDelete={(content) => console.log('Delete:', content)}
/>

// Media library
<MediaLibrary
  onSelect={(file) => console.log('Selected:', file)}
  selectable
/>

3. Using Hooks

import {
  useContent,
  useCategories,
  useTags,
  useMedia,
} from "@quantabit/cms-sdk";

function MyComponent() {
  // Content management
  const { content, loading, create, update, publish } = useContent();

  // Category management
  const { categories, loadCategories, createCategory } = useCategories();

  // Tag management
  const { tags, loadTags, createTag } = useTags();

  // Media management
  const { files, upload, deleteFile } = useMedia();

  return <div>...</div>;
}

📚 Components

| Component | Description | | ----------------- | ----------------------------------------------------------------- | | ContentEditor | Content editor with rich text, category selection, tag management | | ContentList | Content list with search, filtering, and pagination | | ContentCard | Content card showing single content summary | | MediaLibrary | Media library management, supports upload, preview, selection | | CategoryManager | Category management with tree structure display |

🪝 Hooks

| Hook | Description | | --------------- | ----------------------------------------------------------- | | useCMS | Get CMS Context | | useContent | Single content management (create, update, publish, delete) | | useContents | Content list management (pagination, filter, batch actions) | | useCategories | Category management | | useTags | Tag management | | useMedia | Media file management | | useVersions | Content version management |

⚙️ CMSProvider Configuration

| Prop | Type | Required | Description | | ---------- | ----------------- | -------- | ------------------------------ | | apiUrl | string | Yes | API base URL | | token | string | No | Auth Token | | language | 'zh' \| 'en' | No | Language setting, default zh | | onError | (error) => void | No | Error callback |

🌍 i18n

SDK has built-in multi-language support:

import { setLanguage, t } from "@quantabit/cms-sdk";

// Switch language
setLanguage("en");

// Get translation
console.log(t("save")); // "Save"

📖 API Types

// Content type
interface Content {
  id: string;
  title: string;
  content: string;
  type: "article" | "page" | "image" | "video" | "audio";
  status: "draft" | "pending" | "published" | "archived";
  category_id?: string;
  tags?: string[];
  cover_url?: string;
  created_at: string;
  updated_at: string;
}

// Category type
interface Category {
  id: string;
  name: string;
  slug: string;
  parent_id?: string;
  children?: Category[];
}

// Tag type
interface Tag {
  id: string;
  name: string;
  slug: string;
  count?: number;
}

📄 License

MIT License

🌐 Brand & Links

• Official Mainnet: QuantaBit Chain
• Developer Platform: Developer Platform
• Open Platform: Open Platform
• Payment Platform: Pay Platform
• Feedback: Feedback