npm package: @giaminh/sho-lpb-core
Description: A powerful React page builder library with drag-and-drop, resizable blocks, and visual editing capabilities
Latest version: 1.0.35

# @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.

[![npm version](https://img.shields.io/npm/v/@giaminh/sho-lpb-core.svg)](https://www.npmjs.com/package/@giaminh/sho-lpb-core)
[![npm downloads](https://img.shields.io/npm/dm/@giaminh/sho-lpb-core.svg)](https://www.npmjs.com/package/@giaminh/sho-lpb-core)

## 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 (
<div className="page-builder">
<Editor rootId="page" views={BLOCK_VIEWS} />
</div>
);
}

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](https://semver.org/):

-   **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](./LICENSE) file

## Links

-   [npm Package](https://www.npmjs.com/package/@giaminh/sho-lpb-core)
-   [Documentation](https://github.com/giaminhmedia/sho-lpb-core#readme)

---

Made with ❤️ by GiaMinh Media