@damarkuncoro/landing-page 0.1.3 → 0.1.4
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 +16 -0
- package/{dist → lib/cjs}/index.d.ts +234 -102
- package/{dist → lib/cjs}/index.js +496 -371
- package/lib/cjs/index.js.map +1 -0
- package/{dist → lib/esm}/index.d.mts +234 -102
- package/{dist → lib/esm}/index.mjs +482 -357
- package/lib/esm/index.mjs.map +1 -0
- package/package.json +18 -16
- package/dist/index.js.map +0 -1
- package/dist/index.mjs.map +0 -1
package/README.md
CHANGED
|
@@ -323,12 +323,28 @@ interface ThemeConfig {
|
|
|
323
323
|
body: string
|
|
324
324
|
mono: string
|
|
325
325
|
}
|
|
326
|
+
typography: {
|
|
327
|
+
h1: string
|
|
328
|
+
h2: string
|
|
329
|
+
h3: string
|
|
330
|
+
body: string
|
|
331
|
+
small: string
|
|
332
|
+
}
|
|
333
|
+
fontWeights: {
|
|
334
|
+
normal: string | number
|
|
335
|
+
medium: string | number
|
|
336
|
+
bold: string | number
|
|
337
|
+
}
|
|
326
338
|
breakpoints: {
|
|
327
339
|
sm: string
|
|
328
340
|
md: string
|
|
329
341
|
lg: string
|
|
330
342
|
xl: string
|
|
331
343
|
}
|
|
344
|
+
sizes?: {
|
|
345
|
+
subtitleMaxWidth?: string
|
|
346
|
+
containerMaxWidth?: string
|
|
347
|
+
}
|
|
332
348
|
}
|
|
333
349
|
```
|
|
334
350
|
|
|
@@ -1,94 +1,14 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
type ComponentType = "button" | "card" | "image" | "text" | "video";
|
|
5
|
-
interface BaseConfig {
|
|
6
|
-
id?: string;
|
|
7
|
-
className?: string;
|
|
8
|
-
}
|
|
9
|
-
interface LandingPageConfig extends BaseConfig {
|
|
10
|
-
title: string;
|
|
11
|
-
description: string;
|
|
12
|
-
sections: SectionConfig[];
|
|
13
|
-
theme?: Partial<ThemeConfig>;
|
|
14
|
-
}
|
|
15
|
-
interface ThemeConfig {
|
|
16
|
-
colors: {
|
|
17
|
-
primary: string;
|
|
18
|
-
secondary: string;
|
|
19
|
-
accent: string;
|
|
20
|
-
background: string;
|
|
21
|
-
text: string;
|
|
22
|
-
muted: string;
|
|
23
|
-
};
|
|
24
|
-
spacing: {
|
|
25
|
-
xs: string;
|
|
26
|
-
sm: string;
|
|
27
|
-
md: string;
|
|
28
|
-
lg: string;
|
|
29
|
-
xl: string;
|
|
30
|
-
};
|
|
31
|
-
fonts: {
|
|
32
|
-
heading: string;
|
|
33
|
-
body: string;
|
|
34
|
-
mono: string;
|
|
35
|
-
};
|
|
36
|
-
typography: {
|
|
37
|
-
h1: string;
|
|
38
|
-
h2: string;
|
|
39
|
-
h3: string;
|
|
40
|
-
body: string;
|
|
41
|
-
small: string;
|
|
42
|
-
};
|
|
43
|
-
fontWeights: {
|
|
44
|
-
normal: string;
|
|
45
|
-
medium: string;
|
|
46
|
-
bold: string;
|
|
47
|
-
};
|
|
48
|
-
breakpoints: {
|
|
49
|
-
sm: string;
|
|
50
|
-
md: string;
|
|
51
|
-
lg: string;
|
|
52
|
-
xl: string;
|
|
53
|
-
};
|
|
54
|
-
}
|
|
55
|
-
interface SectionConfig extends BaseConfig {
|
|
56
|
-
type: SectionType;
|
|
57
|
-
config: any;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
declare function defineLandingPage(config: LandingPageConfig): {
|
|
61
|
-
theme: ThemeConfig;
|
|
62
|
-
getSection(id: string): SectionConfig | undefined;
|
|
63
|
-
addSection(section: SectionConfig): /*elided*/ any;
|
|
64
|
-
removeSection(id: string): /*elided*/ any;
|
|
65
|
-
updateSection(id: string, updates: Partial<SectionConfig>): /*elided*/ any;
|
|
66
|
-
toJSON(): {
|
|
67
|
-
id: any;
|
|
68
|
-
className: any;
|
|
69
|
-
title: any;
|
|
70
|
-
description: any;
|
|
71
|
-
sections: any;
|
|
72
|
-
theme: any;
|
|
73
|
-
};
|
|
74
|
-
validate(): string[];
|
|
75
|
-
getSectionsByType(type: string): SectionConfig[];
|
|
76
|
-
isValid(): boolean;
|
|
77
|
-
title: string;
|
|
78
|
-
description: string;
|
|
79
|
-
sections: SectionConfig[];
|
|
80
|
-
id?: string;
|
|
81
|
-
className?: string;
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
interface ButtonConfig extends BaseConfig {
|
|
3
|
+
interface ButtonConfig extends WithBaseConfig<{
|
|
85
4
|
text: string;
|
|
86
5
|
url: string;
|
|
87
6
|
variant: "primary" | "secondary" | "outline" | "ghost";
|
|
88
7
|
size: "sm" | "md" | "lg";
|
|
89
8
|
target?: "_blank" | "_self";
|
|
9
|
+
}> {
|
|
90
10
|
}
|
|
91
|
-
interface HeaderConfig extends
|
|
11
|
+
interface HeaderConfig extends WithBaseConfig<{
|
|
92
12
|
logo?: string;
|
|
93
13
|
title?: string;
|
|
94
14
|
links: {
|
|
@@ -97,29 +17,35 @@ interface HeaderConfig extends BaseConfig {
|
|
|
97
17
|
url: string;
|
|
98
18
|
target?: "_blank" | "_self";
|
|
99
19
|
}[];
|
|
20
|
+
}> {
|
|
100
21
|
}
|
|
101
|
-
interface HeroConfig extends
|
|
22
|
+
interface HeroConfig extends WithBaseConfig<{
|
|
102
23
|
title: string;
|
|
103
|
-
subtitle
|
|
24
|
+
subtitle?: string;
|
|
104
25
|
image?: string;
|
|
26
|
+
imageAlt?: string;
|
|
105
27
|
video?: string;
|
|
28
|
+
captionsSrc?: string;
|
|
106
29
|
buttons: ButtonConfig[];
|
|
107
30
|
alignment?: "left" | "center" | "right";
|
|
108
31
|
skin?: "default" | "skin2" | "skin3" | "skin4" | "skin5" | "skin6" | "skin7" | "skin8" | "skin9" | "skin10";
|
|
32
|
+
}> {
|
|
109
33
|
}
|
|
110
|
-
interface FeatureConfig extends
|
|
34
|
+
interface FeatureConfig extends WithBaseConfig<{
|
|
111
35
|
title: string;
|
|
112
36
|
description: string;
|
|
113
37
|
icon?: string;
|
|
114
38
|
image?: string;
|
|
39
|
+
}> {
|
|
115
40
|
}
|
|
116
|
-
interface TestimonialConfig extends
|
|
41
|
+
interface TestimonialConfig extends WithBaseConfig<{
|
|
117
42
|
quote: string;
|
|
118
43
|
author: string;
|
|
119
44
|
role?: string;
|
|
120
45
|
avatar?: string;
|
|
46
|
+
}> {
|
|
121
47
|
}
|
|
122
|
-
interface PricingConfig extends
|
|
48
|
+
interface PricingConfig extends WithBaseConfig<{
|
|
123
49
|
plans: {
|
|
124
50
|
id?: string;
|
|
125
51
|
title: string;
|
|
@@ -130,8 +56,9 @@ interface PricingConfig extends BaseConfig {
|
|
|
130
56
|
button: ButtonConfig;
|
|
131
57
|
featured?: boolean;
|
|
132
58
|
}[];
|
|
59
|
+
}> {
|
|
133
60
|
}
|
|
134
|
-
interface FooterConfig extends
|
|
61
|
+
interface FooterConfig extends WithBaseConfig<{
|
|
135
62
|
logo?: string;
|
|
136
63
|
title?: string;
|
|
137
64
|
description?: string;
|
|
@@ -149,41 +76,173 @@ interface FooterConfig extends BaseConfig {
|
|
|
149
76
|
icon?: string;
|
|
150
77
|
}[];
|
|
151
78
|
copyright?: string;
|
|
79
|
+
}> {
|
|
152
80
|
}
|
|
153
|
-
interface CtaConfig extends
|
|
81
|
+
interface CtaConfig extends WithBaseConfig<{
|
|
154
82
|
title: string;
|
|
155
83
|
description: string;
|
|
156
84
|
button: ButtonConfig;
|
|
157
85
|
image?: string;
|
|
86
|
+
}> {
|
|
158
87
|
}
|
|
159
|
-
interface StatConfig extends
|
|
88
|
+
interface StatConfig extends WithBaseConfig<{
|
|
160
89
|
number: string;
|
|
161
90
|
label: string;
|
|
162
91
|
icon?: string;
|
|
163
92
|
prefix?: string;
|
|
164
93
|
suffix?: string;
|
|
94
|
+
}> {
|
|
165
95
|
}
|
|
166
|
-
interface FaqConfig extends
|
|
96
|
+
interface FaqConfig extends WithBaseConfig<{
|
|
167
97
|
items: {
|
|
168
98
|
id?: string;
|
|
169
99
|
question: string;
|
|
170
100
|
answer: string;
|
|
171
101
|
}[];
|
|
102
|
+
}> {
|
|
172
103
|
}
|
|
173
104
|
|
|
174
|
-
|
|
105
|
+
type SectionType = "hero" | "features" | "testimonials" | "pricing" | "cta" | "footer" | "stats" | "faq" | "header";
|
|
106
|
+
type ComponentType = "button" | "card" | "image" | "text" | "video";
|
|
107
|
+
type WithBaseConfig<T> = T & {
|
|
108
|
+
id?: string;
|
|
109
|
+
className?: string;
|
|
110
|
+
};
|
|
111
|
+
type DeepPartial<T> = {
|
|
112
|
+
[K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
|
|
113
|
+
};
|
|
114
|
+
interface ThemeConfig {
|
|
115
|
+
colors: {
|
|
116
|
+
primary: string;
|
|
117
|
+
secondary: string;
|
|
118
|
+
accent: string;
|
|
119
|
+
background: string;
|
|
120
|
+
text: string;
|
|
121
|
+
muted: string;
|
|
122
|
+
};
|
|
123
|
+
spacing: {
|
|
124
|
+
xs: string;
|
|
125
|
+
sm: string;
|
|
126
|
+
md: string;
|
|
127
|
+
lg: string;
|
|
128
|
+
xl: string;
|
|
129
|
+
};
|
|
130
|
+
fonts: {
|
|
131
|
+
heading: string;
|
|
132
|
+
body: string;
|
|
133
|
+
mono: string;
|
|
134
|
+
};
|
|
135
|
+
typography: {
|
|
136
|
+
h1: string;
|
|
137
|
+
h2: string;
|
|
138
|
+
h3: string;
|
|
139
|
+
body: string;
|
|
140
|
+
small: string;
|
|
141
|
+
};
|
|
142
|
+
fontWeights: {
|
|
143
|
+
normal: string | number;
|
|
144
|
+
medium: string | number;
|
|
145
|
+
bold: string | number;
|
|
146
|
+
};
|
|
147
|
+
breakpoints: {
|
|
148
|
+
sm: string;
|
|
149
|
+
md: string;
|
|
150
|
+
lg: string;
|
|
151
|
+
xl: string;
|
|
152
|
+
};
|
|
153
|
+
sizes?: {
|
|
154
|
+
subtitleMaxWidth?: string;
|
|
155
|
+
containerMaxWidth?: string;
|
|
156
|
+
};
|
|
157
|
+
}
|
|
158
|
+
interface BaseSectionConfig {
|
|
159
|
+
type: SectionType;
|
|
160
|
+
id?: string;
|
|
161
|
+
className?: string;
|
|
162
|
+
label?: string;
|
|
163
|
+
}
|
|
164
|
+
type SectionConfig = WithBaseConfig<{
|
|
165
|
+
type: "hero";
|
|
166
|
+
config: HeroConfig;
|
|
167
|
+
label?: string;
|
|
168
|
+
}> | WithBaseConfig<{
|
|
169
|
+
type: "features";
|
|
170
|
+
config: FeatureConfig[];
|
|
171
|
+
label?: string;
|
|
172
|
+
}> | WithBaseConfig<{
|
|
173
|
+
type: "testimonials";
|
|
174
|
+
config: TestimonialConfig[];
|
|
175
|
+
label?: string;
|
|
176
|
+
}> | WithBaseConfig<{
|
|
177
|
+
type: "pricing";
|
|
178
|
+
config: PricingConfig;
|
|
179
|
+
label?: string;
|
|
180
|
+
}> | WithBaseConfig<{
|
|
181
|
+
type: "cta";
|
|
182
|
+
config: CtaConfig;
|
|
183
|
+
label?: string;
|
|
184
|
+
}> | WithBaseConfig<{
|
|
185
|
+
type: "footer";
|
|
186
|
+
config: FooterConfig;
|
|
187
|
+
label?: string;
|
|
188
|
+
}> | WithBaseConfig<{
|
|
189
|
+
type: "stats";
|
|
190
|
+
config: StatConfig[];
|
|
191
|
+
label?: string;
|
|
192
|
+
}> | WithBaseConfig<{
|
|
193
|
+
type: "faq";
|
|
194
|
+
config: FaqConfig;
|
|
195
|
+
label?: string;
|
|
196
|
+
}> | WithBaseConfig<{
|
|
197
|
+
type: "header";
|
|
198
|
+
config: HeaderConfig;
|
|
199
|
+
label?: string;
|
|
200
|
+
}>;
|
|
201
|
+
interface LandingPageConfig extends WithBaseConfig<{
|
|
202
|
+
title: string;
|
|
203
|
+
description: string;
|
|
204
|
+
sections: readonly SectionConfig[];
|
|
205
|
+
theme?: DeepPartial<ThemeConfig>;
|
|
206
|
+
}> {
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
declare function defineLandingPage(config: LandingPageConfig): {
|
|
210
|
+
sections: SectionConfig[];
|
|
211
|
+
theme: ThemeConfig;
|
|
212
|
+
getSection(id: string): SectionConfig | undefined;
|
|
213
|
+
addSection(section: SectionConfig): /*elided*/ any;
|
|
214
|
+
removeSection(id: string): /*elided*/ any;
|
|
215
|
+
updateSection(id: string, updates: Partial<SectionConfig>): /*elided*/ any;
|
|
216
|
+
toJSON(): {
|
|
217
|
+
id: any;
|
|
218
|
+
className: any;
|
|
219
|
+
title: any;
|
|
220
|
+
description: any;
|
|
221
|
+
sections: any;
|
|
222
|
+
theme: any;
|
|
223
|
+
};
|
|
224
|
+
validate(): string[];
|
|
225
|
+
getSectionsByType(type: string): SectionConfig[];
|
|
226
|
+
isValid(): boolean;
|
|
227
|
+
title: string;
|
|
228
|
+
description: string;
|
|
229
|
+
id?: string;
|
|
230
|
+
className?: string;
|
|
231
|
+
};
|
|
232
|
+
|
|
233
|
+
interface HeaderSection extends BaseSectionConfig {
|
|
175
234
|
type: "header";
|
|
176
235
|
config: HeaderConfig;
|
|
177
236
|
}
|
|
178
237
|
declare function createHeaderSection(config: HeaderConfig, id?: string, className?: string): HeaderSection;
|
|
179
238
|
|
|
180
|
-
interface HeroSection extends
|
|
239
|
+
interface HeroSection extends BaseSectionConfig {
|
|
181
240
|
type: "hero";
|
|
182
241
|
config: HeroConfig;
|
|
183
242
|
}
|
|
184
243
|
declare function createHeroSection(config: HeroConfig, id?: string, className?: string): HeroSection;
|
|
185
244
|
|
|
186
|
-
interface FeaturesSection extends
|
|
245
|
+
interface FeaturesSection extends BaseSectionConfig {
|
|
187
246
|
type: "features";
|
|
188
247
|
config: {
|
|
189
248
|
features: FeatureConfig[];
|
|
@@ -193,7 +252,7 @@ declare function createFeaturesSection(config: {
|
|
|
193
252
|
features: FeatureConfig[];
|
|
194
253
|
}, id?: string, className?: string): FeaturesSection;
|
|
195
254
|
|
|
196
|
-
interface TestimonialsSection extends
|
|
255
|
+
interface TestimonialsSection extends BaseSectionConfig {
|
|
197
256
|
type: "testimonials";
|
|
198
257
|
config: {
|
|
199
258
|
testimonials: TestimonialConfig[];
|
|
@@ -203,25 +262,25 @@ declare function createTestimonialsSection(config: {
|
|
|
203
262
|
testimonials: TestimonialConfig[];
|
|
204
263
|
}, id?: string, className?: string): TestimonialsSection;
|
|
205
264
|
|
|
206
|
-
interface PricingSection extends
|
|
265
|
+
interface PricingSection extends BaseSectionConfig {
|
|
207
266
|
type: "pricing";
|
|
208
267
|
config: PricingConfig;
|
|
209
268
|
}
|
|
210
269
|
declare function createPricingSection(config: PricingConfig, id?: string, className?: string): PricingSection;
|
|
211
270
|
|
|
212
|
-
interface CtaSection extends
|
|
271
|
+
interface CtaSection extends BaseSectionConfig {
|
|
213
272
|
type: "cta";
|
|
214
273
|
config: CtaConfig;
|
|
215
274
|
}
|
|
216
275
|
declare function createCtaSection(config: CtaConfig, id?: string, className?: string): CtaSection;
|
|
217
276
|
|
|
218
|
-
interface FooterSection extends
|
|
277
|
+
interface FooterSection extends BaseSectionConfig {
|
|
219
278
|
type: "footer";
|
|
220
279
|
config: FooterConfig;
|
|
221
280
|
}
|
|
222
281
|
declare function createFooterSection(config: FooterConfig, id?: string, className?: string): FooterSection;
|
|
223
282
|
|
|
224
|
-
interface StatsSection extends
|
|
283
|
+
interface StatsSection extends BaseSectionConfig {
|
|
225
284
|
type: "stats";
|
|
226
285
|
config: {
|
|
227
286
|
stats: StatConfig[];
|
|
@@ -231,7 +290,7 @@ declare function createStatsSection(config: {
|
|
|
231
290
|
stats: StatConfig[];
|
|
232
291
|
}, id?: string, className?: string): StatsSection;
|
|
233
292
|
|
|
234
|
-
interface FaqSection extends
|
|
293
|
+
interface FaqSection extends BaseSectionConfig {
|
|
235
294
|
type: "faq";
|
|
236
295
|
config: FaqConfig;
|
|
237
296
|
}
|
|
@@ -316,9 +375,75 @@ declare const landingPageSchema: {
|
|
|
316
375
|
fonts: {
|
|
317
376
|
$ref: string;
|
|
318
377
|
};
|
|
378
|
+
typography: {
|
|
379
|
+
$ref: string;
|
|
380
|
+
};
|
|
381
|
+
fontWeights: {
|
|
382
|
+
$ref: string;
|
|
383
|
+
};
|
|
319
384
|
breakpoints: {
|
|
320
385
|
$ref: string;
|
|
321
386
|
};
|
|
387
|
+
sizes: {
|
|
388
|
+
$ref: string;
|
|
389
|
+
};
|
|
390
|
+
};
|
|
391
|
+
};
|
|
392
|
+
Typography: {
|
|
393
|
+
type: string;
|
|
394
|
+
properties: {
|
|
395
|
+
h1: {
|
|
396
|
+
type: string;
|
|
397
|
+
description: string;
|
|
398
|
+
};
|
|
399
|
+
h2: {
|
|
400
|
+
type: string;
|
|
401
|
+
description: string;
|
|
402
|
+
};
|
|
403
|
+
h3: {
|
|
404
|
+
type: string;
|
|
405
|
+
description: string;
|
|
406
|
+
};
|
|
407
|
+
body: {
|
|
408
|
+
type: string;
|
|
409
|
+
description: string;
|
|
410
|
+
};
|
|
411
|
+
small: {
|
|
412
|
+
type: string;
|
|
413
|
+
description: string;
|
|
414
|
+
};
|
|
415
|
+
};
|
|
416
|
+
required: string[];
|
|
417
|
+
};
|
|
418
|
+
FontWeights: {
|
|
419
|
+
type: string;
|
|
420
|
+
properties: {
|
|
421
|
+
normal: {
|
|
422
|
+
type: string[];
|
|
423
|
+
description: string;
|
|
424
|
+
};
|
|
425
|
+
medium: {
|
|
426
|
+
type: string[];
|
|
427
|
+
description: string;
|
|
428
|
+
};
|
|
429
|
+
bold: {
|
|
430
|
+
type: string[];
|
|
431
|
+
description: string;
|
|
432
|
+
};
|
|
433
|
+
};
|
|
434
|
+
required: string[];
|
|
435
|
+
};
|
|
436
|
+
Sizes: {
|
|
437
|
+
type: string;
|
|
438
|
+
properties: {
|
|
439
|
+
subtitleMaxWidth: {
|
|
440
|
+
type: string;
|
|
441
|
+
description: string;
|
|
442
|
+
};
|
|
443
|
+
containerMaxWidth: {
|
|
444
|
+
type: string;
|
|
445
|
+
description: string;
|
|
446
|
+
};
|
|
322
447
|
};
|
|
323
448
|
};
|
|
324
449
|
Colors: {
|
|
@@ -465,10 +590,17 @@ declare const sectionConfigSchemas: {
|
|
|
465
590
|
type: string;
|
|
466
591
|
format: string;
|
|
467
592
|
};
|
|
593
|
+
imageAlt: {
|
|
594
|
+
type: string;
|
|
595
|
+
};
|
|
468
596
|
video: {
|
|
469
597
|
type: string;
|
|
470
598
|
format: string;
|
|
471
599
|
};
|
|
600
|
+
captionsSrc: {
|
|
601
|
+
type: string;
|
|
602
|
+
format: string;
|
|
603
|
+
};
|
|
472
604
|
buttons: {
|
|
473
605
|
type: string;
|
|
474
606
|
items: {
|
|
@@ -772,6 +904,6 @@ declare const sectionConfigSchemas: {
|
|
|
772
904
|
};
|
|
773
905
|
|
|
774
906
|
declare function validateConfig(config: Partial<LandingPageConfig>): string[];
|
|
775
|
-
declare function validateSection(section:
|
|
907
|
+
declare function validateSection(section: any): string[];
|
|
776
908
|
|
|
777
909
|
export { ButtonConfig, ComponentType, CtaConfig, FaqConfig, FeatureConfig, FooterConfig, HeaderConfig, HeroConfig, LandingPageConfig, PricingConfig, SectionType, StatConfig, TestimonialConfig, ThemeConfig, createCtaSection, createFaqSection, createFeaturesSection, createFooterSection, createHeaderSection, createHeroSection, createPricingSection, createReactRenderer, createStatsSection, createTestimonialsSection, defaultTheme, defineLandingPage, landingPageSchema, sectionConfigSchemas, validateConfig, validateSection };
|