@giaminh/sho-lpb-core

A powerful React page builder library with drag-and-drop, resizable blocks, and visual editing capabilities. Build landing pages and web interfaces with an intuitive visual editor.

Features

• ✨ Visual Editor - Drag-and-drop interface for building pages visually
• 🎯 Block System - Pre-built blocks (Container, Section, Column, Text, Button, etc.)
• 📐 Resizable Blocks - Interactive resizing with visual guidelines
• 🎨 Style Management - Built-in CSS property management and styling
• 🔄 Undo/Redo - Full history support with temporal state management
• 🎭 Responsive - Breakpoint-based responsive design support
• ⚡ Performance - Optimized with Zustand for state management

Installation

```bash

With Bun (recommended)

bun add @giaminh/sho-lpb-core

With npm

npm install @giaminh/sho-lpb-core

With yarn

yarn add @giaminh/sho-lpb-core

With pnpm

pnpm add @giaminh/sho-lpb-core ```

Peer Dependencies

This library requires React 18+:

```json { "react": "^18.3.1", "react-dom": "^18.3.1" } ```

Quick Start

```tsx import { Editor } from '@giaminh/sho-lpb-core'; import { PageViewer, SectionViewer, ColViewer, ButtonViewer, TextViewer, ContainerViewer } from '@giaminh/sho-lpb-core';

// Define your block views const BLOCK_VIEWS = { page: PageViewer, section: SectionViewer, col: ColViewer, button: ButtonViewer, text: TextViewer, container: ContainerViewer, };

function App() { return (

export default App; ```

State Management

useBlockStore

Manages block data and hierarchy.

```tsx import { useBlockStore } from '@giaminh/sho-lpb-core';

const blocks = useBlockStore((state) => state.blocks); const addBlock = useBlockStore((state) => state.addBlock); const removeBlock = useBlockStore((state) => state.removeBlock); ```

useBuilderStore

Manages editor UI state.

```tsx import { useBuilderStore } from '@giaminh/sho-lpb-core';

const selectedBlockId = useBuilderStore((state) => state.selectedBlockId); const selectBlock = useBuilderStore((state) => state.selectBlock); ```

Development Scripts

For contributors and maintainers:

Version Management

```bash

Increment PATCH version (1.0.1 → 1.0.2)

Use for bug fixes

bun run version:patch

Increment MINOR version (1.0.1 → 1.1.0)

Use for new features (backward compatible)

bun run version:minor

Increment MAJOR version (1.0.1 → 2.0.0)

Use for breaking changes

bun run version:major ```

Release & Publish

```bash

Release PATCH (bug fixes)

- Bump version

- Build library

- Publish to npm

- Push git tags

bun run release:patch

Release MINOR (new features)

bun run release:minor

Release MAJOR (breaking changes)

bun run release:major

Quick release (defaults to patch)

bun run release ```

Manual Publish

```bash

Build library only

bun run build:lib

Publish without version bump

bun run pub ```

Release Workflow Examples

Fix a Bug

```bash

1. Fix the bug

2. Release patch version

bun run release:patch

Output: 1.0.1 → 1.0.2 → published ✅

```

Add New Feature

```bash

1. Implement feature

2. Release minor version

bun run release:minor

Output: 1.0.1 → 1.1.0 → published ✅

```

Breaking Changes

```bash

1. Make breaking changes

2. Release major version

bun run release:major

Output: 1.0.1 → 2.0.0 → published ✅

```

Controlled Release

```bash

Step 1: Update version only

bun run version:minor

Step 2: Test build

bun run build:lib

Step 3: Verify & publish when ready

bun run pub ```

Semantic Versioning

We follow Semantic Versioning:

• PATCH (1.0.1 → 1.0.2): Bug fixes, no API changes
• MINOR (1.0.1 → 1.1.0): New features, backward compatible
• MAJOR (1.0.1 → 2.0.0): Breaking changes

TypeScript Support

Full TypeScript support with type definitions included.

```tsx import type { Auto_BlockData, Auto_BlockType } from '@giaminh/sho-lpb-core'; ```

License

MIT License - see LICENSE file

Links

• npm Package
• Documentation

Made with ❤️ by GiaMinh Media