@reiwuzen/blocky-react 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Rei WuZen
+
+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/README.md

@@ -0,0 +1,163 @@
+# @reiwuzen/blocky-react
+
+React UI layer for **@reiwuzen/blocky** — a composable, headless block editor engine.
+
+This package provides React components, hooks, and store bindings for building Notion-style editors while keeping core logic framework-agnostic.
+
+---
+
+## ✨ Features
+
+- Composable block components
+- Controlled & uncontrolled modes
+- Zustand-based state isolation
+- Headless engine separation (`@reiwuzen/blocky`)
+- Fully testable
+- No CSS framework required
+- ESM + CJS support
+
+---
+
+## 📦 Installation
+
+```bash
+pnpm add @reiwuzen/blocky-react @reiwuzen/blocky
+# or
+npm install @reiwuzen/blocky-react @reiwuzen/blocky
+```
+
+Peer dependencies:
+
+```bash
+react >= 18
+react-dom >= 18
+```
+
+---
+
+## 🚀 Basic Usage (Uncontrolled)
+
+```tsx
+import { Editor } from "@reiwuzen/blocky-react";
+import "@reiwuzen/blocky-react/styles.css";
+
+export default function App() {
+  return (
+    <Editor />
+  );
+}
+```
+
+The editor will initialize with a single empty paragraph block.
+
+---
+
+## 🎯 Controlled Mode
+
+```tsx
+import { useState } from "react";
+import { Editor } from "@reiwuzen/blocky-react";
+import type { AnyBlock } from "@reiwuzen/blocky";
+
+export default function App() {
+  const [blocks, setBlocks] = useState<AnyBlock[]>([]);
+
+  return (
+    <Editor
+      blocks={blocks}
+      onChange={setBlocks}
+    />
+  );
+}
+```
+
+You now own the editor state.
+
+---
+
+## 🧱 Available Components
+
+You can build your own layout using individual components:
+
+```tsx
+import {
+  BlockList,
+  Block,
+  FormatToolbar,
+  BlockTypeSwitcher
+} from "@reiwuzen/blocky-react";
+```
+
+---
+
+## 🪝 Hooks
+
+```tsx
+import {
+  useBlocks,
+  useActiveBlockId,
+  useEditorActions
+} from "@reiwuzen/blocky-react";
+```
+
+Example:
+
+```tsx
+const blocks = useBlocks();
+const { insertBlockAfter } = useEditorActions();
+```
+
+---
+
+## 🏗 Architecture
+
+```
+@reiwuzen/blocky        → Headless editor engine
+@reiwuzen/blocky-react  → React UI adapter
+```
+
+Core editing logic lives in `blocky`.  
+React layer only handles rendering and interaction.
+
+This separation ensures:
+
+- Framework independence
+- Testability
+- Predictable state updates
+- Clean packaging
+
+---
+
+## 🎨 Styling
+
+Basic styles are included:
+
+```tsx
+import "@reiwuzen/blocky-react/styles.css";
+```
+
+You may fully override styles or ignore them entirely.
+
+---
+
+## 🧪 Testing
+
+This package uses:
+
+- Vitest
+- React Testing Library
+- jsdom
+
+All components are fully testable without a browser.
+
+---
+
+## 📄 License
+
+ISC
+
+---
+
+## 👤 Author
+
+Rei WuZen