@crediblemark/build 0.22.0 → 0.22.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +213 -0
- package/package.json +29 -27
package/README.md
ADDED
|
@@ -0,0 +1,213 @@
|
|
|
1
|
+
# @crediblemark/build
|
|
2
|
+
|
|
3
|
+
The open-source visual editor for React. Build complex, high-performance page builders and CMS interfaces with ease.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@crediblemark/build)
|
|
6
|
+
[](https://opensource.org/licenses/MIT)
|
|
7
|
+
|
|
8
|
+
## Features
|
|
9
|
+
|
|
10
|
+
- **Drag & Drop**: Powered by `@dnd-kit` for smooth, accessible, and highly customizable layouts.
|
|
11
|
+
- **Rich Text Editing**: Integrated with `tiptap` for a seamless content editing experience.
|
|
12
|
+
- **Headless & Flexible**: Decouples logic from UI, allowing you to build your own custom blocks and components.
|
|
13
|
+
- **React Server Components (RSC) Support**: Optimized for modern Next.js applications.
|
|
14
|
+
- **High Performance**: Built with `zustand` for efficient state management and optimized rendering.
|
|
15
|
+
- **TypeScript First**: Fully typed API for a great developer experience.
|
|
16
|
+
|
|
17
|
+
## Installation
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm install @crediblemark/build
|
|
21
|
+
# or
|
|
22
|
+
yarn add @crediblemark/build
|
|
23
|
+
# or
|
|
24
|
+
pnpm add @crediblemark/build
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Quick Start
|
|
28
|
+
|
|
29
|
+
### 1. Setup the Editor
|
|
30
|
+
|
|
31
|
+
```tsx
|
|
32
|
+
import React from "react";
|
|
33
|
+
import { CredBuild } from "@crediblemark/build";
|
|
34
|
+
import "@crediblemark/build/dist/index.css";
|
|
35
|
+
|
|
36
|
+
const config = {
|
|
37
|
+
blocks: {
|
|
38
|
+
Hero: {
|
|
39
|
+
render: ({ title }) => <h1>{title}</h1>,
|
|
40
|
+
},
|
|
41
|
+
// Add more blocks here
|
|
42
|
+
},
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
const MyEditor = () => {
|
|
46
|
+
return (
|
|
47
|
+
<CredBuild
|
|
48
|
+
config={config}
|
|
49
|
+
data={{ content: [] }}
|
|
50
|
+
onChange={(newData) => console.log(newData)}
|
|
51
|
+
/>
|
|
52
|
+
);
|
|
53
|
+
};
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
### 2. Render the Content
|
|
57
|
+
|
|
58
|
+
```tsx
|
|
59
|
+
import { Render } from "@crediblemark/build";
|
|
60
|
+
|
|
61
|
+
const MyPage = ({ data }) => {
|
|
62
|
+
return <Render config={config} data={data} />;
|
|
63
|
+
};
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## Creating Custom Components
|
|
67
|
+
|
|
68
|
+
Adding new components (blocks) to your editor is straightforward. Follow this pattern:
|
|
69
|
+
|
|
70
|
+
### 1. Define your Props
|
|
71
|
+
|
|
72
|
+
```tsx
|
|
73
|
+
type HeroProps = {
|
|
74
|
+
title: string;
|
|
75
|
+
description: string;
|
|
76
|
+
buttonText: string;
|
|
77
|
+
};
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
### 2. Create the Component Config
|
|
81
|
+
|
|
82
|
+
The configuration defines how the component is rendered and which fields are editable in the sidebar.
|
|
83
|
+
|
|
84
|
+
```tsx
|
|
85
|
+
import { ComponentConfig } from "@crediblemark/build";
|
|
86
|
+
|
|
87
|
+
export const Hero: ComponentConfig<HeroProps> = {
|
|
88
|
+
label: "Hero Section",
|
|
89
|
+
fields: {
|
|
90
|
+
title: {
|
|
91
|
+
type: "text",
|
|
92
|
+
label: "📝 Title"
|
|
93
|
+
},
|
|
94
|
+
description: {
|
|
95
|
+
type: "textarea",
|
|
96
|
+
label: "📄 Description"
|
|
97
|
+
},
|
|
98
|
+
buttonText: {
|
|
99
|
+
type: "text",
|
|
100
|
+
label: "🔘 Button Label"
|
|
101
|
+
},
|
|
102
|
+
},
|
|
103
|
+
defaultProps: {
|
|
104
|
+
title: "Welcome to our site",
|
|
105
|
+
description: "Built with @crediblemark/build",
|
|
106
|
+
buttonText: "Get Started",
|
|
107
|
+
},
|
|
108
|
+
render: ({ title, description, buttonText }) => (
|
|
109
|
+
<section className="hero">
|
|
110
|
+
<h1>{title}</h1>
|
|
111
|
+
<p>{description}</p>
|
|
112
|
+
<button>{buttonText}</button>
|
|
113
|
+
</section>
|
|
114
|
+
),
|
|
115
|
+
};
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### 3. Register in the Editor Config
|
|
119
|
+
|
|
120
|
+
```tsx
|
|
121
|
+
const config = {
|
|
122
|
+
blocks: {
|
|
123
|
+
Hero,
|
|
124
|
+
// Add more blocks here
|
|
125
|
+
},
|
|
126
|
+
categories: {
|
|
127
|
+
"🎬 Hero Sections": {
|
|
128
|
+
components: ["Hero"],
|
|
129
|
+
},
|
|
130
|
+
},
|
|
131
|
+
};
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
## Organizing with Categories
|
|
135
|
+
|
|
136
|
+
You can group your components into categories to keep the sidebar organized.
|
|
137
|
+
|
|
138
|
+
```tsx
|
|
139
|
+
const config = {
|
|
140
|
+
categories: {
|
|
141
|
+
"🎬 Hero Sections": {
|
|
142
|
+
components: ["Hero", "Banner"],
|
|
143
|
+
},
|
|
144
|
+
"📦 Content Blocks": {
|
|
145
|
+
components: ["Text", "Image", "Video"],
|
|
146
|
+
},
|
|
147
|
+
},
|
|
148
|
+
blocks: {
|
|
149
|
+
// ... all blocks defined here
|
|
150
|
+
},
|
|
151
|
+
};
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
## Best Practices for Components
|
|
155
|
+
|
|
156
|
+
To create a premium editing experience, follow these patterns:
|
|
157
|
+
|
|
158
|
+
1. **Emoji Labels**: Use emojis in your field labels to make them more visual and easier to scan.
|
|
159
|
+
```tsx
|
|
160
|
+
title: { type: "text", label: "📝 Title" }
|
|
161
|
+
```
|
|
162
|
+
2. **Responsive Typography**: Use `clamp()` for fluid font sizes that work on all screens.
|
|
163
|
+
```tsx
|
|
164
|
+
<h1 style={{ fontSize: 'clamp(2rem, 5vw, 4rem)' }}>{title}</h1>
|
|
165
|
+
```
|
|
166
|
+
3. **Smart Fallbacks**: Always provide sensible `defaultProps` and handle missing images/content gracefully in your `render` function.
|
|
167
|
+
4. **Group Related Fields**: If a component has many fields, group them logically in the `fields` definition.
|
|
168
|
+
|
|
169
|
+
## Advanced Usage
|
|
170
|
+
|
|
171
|
+
|
|
172
|
+
### Array Fields (Multiple Items)
|
|
173
|
+
|
|
174
|
+
For repeating content like features, testimonials, or pricing plans:
|
|
175
|
+
|
|
176
|
+
```tsx
|
|
177
|
+
features: {
|
|
178
|
+
type: "array",
|
|
179
|
+
label: "✨ Features",
|
|
180
|
+
arrayFields: {
|
|
181
|
+
title: { type: "text", label: "Feature Title" },
|
|
182
|
+
description: { type: "textarea", label: "Description" },
|
|
183
|
+
},
|
|
184
|
+
getItemSummary: (item) => item.title || "Feature",
|
|
185
|
+
}
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
|
|
189
|
+
### Using Hooks
|
|
190
|
+
|
|
191
|
+
Access the editor state or trigger actions programmatically.
|
|
192
|
+
|
|
193
|
+
```tsx
|
|
194
|
+
import { useCredBuild } from "@crediblemark/build";
|
|
195
|
+
|
|
196
|
+
const CustomTool = () => {
|
|
197
|
+
const { appendBlock } = useCredBuild();
|
|
198
|
+
|
|
199
|
+
return (
|
|
200
|
+
<button onClick={() => appendBlock({ type: "Hero", props: { title: "New Hero" } })}>
|
|
201
|
+
Add Hero
|
|
202
|
+
</button>
|
|
203
|
+
);
|
|
204
|
+
};
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
## Documentation
|
|
208
|
+
|
|
209
|
+
For full documentation and examples, visit [build.crediblemark.com](https://build.crediblemark.com).
|
|
210
|
+
|
|
211
|
+
## License
|
|
212
|
+
|
|
213
|
+
MIT © [Rasyiqi Crediblemark](https://github.com/crediblemark-official)
|
package/package.json
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@crediblemark/build",
|
|
3
|
-
"version": "0.22.
|
|
3
|
+
"version": "0.22.2",
|
|
4
4
|
"description": "The open-source visual editor for React",
|
|
5
5
|
"author": "Rasyiqi Crediblemark",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
8
|
-
"url": "https://github.com/crediblemark-official/credbuild.git",
|
|
8
|
+
"url": "git+https://github.com/crediblemark-official/credbuild.git",
|
|
9
9
|
"directory": "."
|
|
10
10
|
},
|
|
11
|
-
"bugs": "https://
|
|
12
|
-
"homepage": "https://
|
|
11
|
+
"bugs": "https://crediblemark.com/id/contact",
|
|
12
|
+
"homepage": "https://blog.crediblemark.com/",
|
|
13
13
|
"keywords": [
|
|
14
14
|
"credbuild",
|
|
15
15
|
"visual",
|
|
@@ -75,30 +75,32 @@
|
|
|
75
75
|
"prepublishOnly": "npm run build"
|
|
76
76
|
},
|
|
77
77
|
"files": [
|
|
78
|
-
"dist"
|
|
78
|
+
"dist",
|
|
79
|
+
"README.md",
|
|
80
|
+
"LICENSE"
|
|
79
81
|
],
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
82
|
+
"devDependencies": {
|
|
83
|
+
"@juggle/resize-observer": "^3.4.0",
|
|
84
|
+
"@testing-library/jest-dom": "^6.6.3",
|
|
85
|
+
"@testing-library/react": "^16.1.0",
|
|
86
|
+
"@types/deep-diff": "^1.0.3",
|
|
87
|
+
"@types/flat": "^5.0.5",
|
|
88
|
+
"@types/jest": "^29.5.14",
|
|
89
|
+
"@types/node": "^24.12.2",
|
|
90
|
+
"@types/object-hash": "^3.0.6",
|
|
91
|
+
"@types/react": "^19.2.7",
|
|
92
|
+
"@types/react-dom": "^19.2.3",
|
|
93
|
+
"@types/uuid": "^10.0.0",
|
|
94
|
+
"css-box-model": "^1.2.1",
|
|
95
|
+
"eslint": "^8.57.0",
|
|
96
|
+
"identity-obj-proxy": "^3.0.0",
|
|
97
|
+
"jest": "^29.7.0",
|
|
98
|
+
"jest-environment-jsdom": "^30.0.0-beta.3",
|
|
99
|
+
"lucide-react": "^0.556.0",
|
|
100
|
+
"ts-jest": "^29.3.4",
|
|
101
|
+
"tsup": "^8.2.4",
|
|
102
|
+
"typescript": "^5.5.4"
|
|
103
|
+
},
|
|
102
104
|
"dependencies": {
|
|
103
105
|
"@dnd-kit/abstract": "0.1.21",
|
|
104
106
|
"@dnd-kit/collision": "0.1.21",
|