@digiforce-nc/plugin-block-multi-step-form

Plugin tạo form nhiều bước (wizard) - chia nhỏ form phức tạp thành các bước tuần tự với navigation, validation từng bước và drag & drop sắp xếp lại thứ tự.

Plugin này làm gì?

Form dài với nhiều field khiến người dùng choáng ngợp. Multi-step form chia form thành các bước nhỏ hơn - mỗi bước có nhóm field riêng, validation riêng, và action riêng (next, previous, submit). Phù hợp cho onboarding, đăng ký phức tạp, wizard cấu hình.

Ba nhiệm vụ chính

#	Nhiệm vụ	Chi tiết
1	Chia form thành bước	Mỗi step có grid layout riêng, chứa nhóm fields liên quan
2	Navigation giữa các bước	Actions next/previous với validation từng bước trước khi chuyển
3	Drag & drop reorder	Sắp xếp lại thứ tự các bước bằng DnD

Kiến trúc

Tổng quan

Plugin hoạt động hoàn toàn ở client - không có server component riêng. Dữ liệu form được gửi đến collection API khi submit.

Schema structure

Form nhiều bước sử dụng cấu trúc schema lồng nhau:

Cấp	Component	Vai trò
1	`FormBlockProvider`	Provider cung cấp form context, data source, mode
2	`StepsForm`	Container quản lý steps, state bước hiện tại
3	`StepsForm.Step`	Đại diện một bước, chứa title và nội dung
4	`StepForm`	Form thực tế trong mỗi bước với grid layout

Ba chế độ hoạt động

Mode	Mô tả	Use case
create	Tạo bản ghi mới	Form đăng ký, onboarding
edit	Chỉnh sửa bản ghi có sẵn	Cập nhật thông tin
addnew	Thêm mới với preset values	Tạo nhanh với giá trị mặc định

Luồng hoạt động

Tính năng

Tính năng	Mô tả
Multi-step navigation	Chuyển bước next/previous với animation
Per-step validation	Validate fields từng bước trước khi cho chuyển
DnD step reorder	Kéo thả sắp xếp lại thứ tự bước (DndContext)
Step title toolbar	Toolbar trên mỗi step title: rename, delete, move
Per-step grid	Mỗi bước có grid layout riêng
Custom actions	Ngoài next/prev/submit, hỗ trợ action tùy chỉnh
Step indicator	Hiển thị progress bar / step numbers
Create/Edit/AddNew	Ba chế độ form với luồng khác nhau

Thành phần client

Thành phần	Mô tả
`StepsForm`	Component chính quản lý steps state và navigation
`StepsForm.Step`	Component đại diện một bước trong wizard
`StepForm`	Form thực tế bên trong mỗi step
`StepsStepTitleToolbar`	Toolbar trên tiêu đề step: DnD handle, rename, delete
`MultiStepFormBlockInitializer`	Đăng ký block vào menu "Add block"
`multiStepFormActionInitializers`	Nhóm action: next, previous, submit, custom
`MultiStepFormDesigner`	Designer cấu hình steps, mode, data source

Dependencies

Package	Vai trò
`@digiforce-nc/client`	Client framework (peer)
`@digiforce-nc/server`	Server framework - chỉ dùng khi build (peer)
`@dnd-kit/core`	Drag & drop cho reorder steps
`antd`	Ant Design Steps component (peer)