@techrox/page-studio-blocks 1.0.0
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/LICENSE +21 -0
- package/README.md +141 -0
- package/dist/index.cjs +5819 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.js +5765 -0
- package/dist/index.js.map +1 -0
- package/package.json +72 -0
- package/src/styles.css +165 -0
package/package.json
ADDED
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@techrox/page-studio-blocks",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "50 production-ready content blocks (Hero, Pricing, FAQ, Contact, …) plus the Puck config builder for @techrox/page-studio. SSR-safe, brand-themable via CSS variables, host-extensible.",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"author": "techrox",
|
|
7
|
+
"homepage": "https://github.com/techrox/page-studio#readme",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "git+https://github.com/techrox/page-studio.git",
|
|
11
|
+
"directory": "packages/blocks"
|
|
12
|
+
},
|
|
13
|
+
"bugs": {
|
|
14
|
+
"url": "https://github.com/techrox/page-studio/issues"
|
|
15
|
+
},
|
|
16
|
+
"type": "module",
|
|
17
|
+
"main": "./dist/index.cjs",
|
|
18
|
+
"module": "./dist/index.js",
|
|
19
|
+
"exports": {
|
|
20
|
+
".": {
|
|
21
|
+
"import": "./dist/index.js",
|
|
22
|
+
"require": "./dist/index.cjs"
|
|
23
|
+
},
|
|
24
|
+
"./styles.css": "./src/styles.css"
|
|
25
|
+
},
|
|
26
|
+
"files": [
|
|
27
|
+
"dist",
|
|
28
|
+
"src/styles.css",
|
|
29
|
+
"README.md",
|
|
30
|
+
"LICENSE"
|
|
31
|
+
],
|
|
32
|
+
"sideEffects": [
|
|
33
|
+
"*.css"
|
|
34
|
+
],
|
|
35
|
+
"peerDependencies": {
|
|
36
|
+
"@ant-design/icons": ">=5",
|
|
37
|
+
"@puckeditor/core": ">=0.21",
|
|
38
|
+
"antd": ">=5",
|
|
39
|
+
"react": ">=18",
|
|
40
|
+
"react-dom": ">=18"
|
|
41
|
+
},
|
|
42
|
+
"devDependencies": {
|
|
43
|
+
"@ant-design/icons": "^5.4.0",
|
|
44
|
+
"@puckeditor/core": "^0.21.2",
|
|
45
|
+
"antd": "^5.19.0",
|
|
46
|
+
"react": "^18.3.1",
|
|
47
|
+
"react-dom": "^18.3.1"
|
|
48
|
+
},
|
|
49
|
+
"publishConfig": {
|
|
50
|
+
"access": "public"
|
|
51
|
+
},
|
|
52
|
+
"keywords": [
|
|
53
|
+
"blocks",
|
|
54
|
+
"content-blocks",
|
|
55
|
+
"page-builder",
|
|
56
|
+
"puck",
|
|
57
|
+
"puckeditor",
|
|
58
|
+
"cms",
|
|
59
|
+
"react",
|
|
60
|
+
"ssr",
|
|
61
|
+
"page-studio"
|
|
62
|
+
],
|
|
63
|
+
"engines": {
|
|
64
|
+
"node": ">=18"
|
|
65
|
+
},
|
|
66
|
+
"scripts": {
|
|
67
|
+
"build": "tsup",
|
|
68
|
+
"dev": "tsup --watch",
|
|
69
|
+
"test": "vitest run",
|
|
70
|
+
"test:watch": "vitest"
|
|
71
|
+
}
|
|
72
|
+
}
|
package/src/styles.css
ADDED
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
/* @techrox/page-studio-blocks — minimal CSS the picker UI + reveal animations
|
|
2
|
+
* need at runtime. Block typography classes (.tps-h1, .tps-section, etc.) are
|
|
3
|
+
* NOT shipped here — host applications provide them via their own stylesheet.
|
|
4
|
+
* See README "Required host CSS" for the list of classes blocks reference.
|
|
5
|
+
*
|
|
6
|
+
* All CSS variables are defaulted to neutral values so the package looks
|
|
7
|
+
* sane without theming. Override at :root in your host to rebrand. */
|
|
8
|
+
|
|
9
|
+
:root {
|
|
10
|
+
--tps-primary: #0b60d8;
|
|
11
|
+
--tps-primary-dark: #0848a3;
|
|
12
|
+
--tps-accent: #f59e0b;
|
|
13
|
+
--tps-ink: #0f172a;
|
|
14
|
+
--tps-muted: #64748b;
|
|
15
|
+
--tps-line: #e2e8f0;
|
|
16
|
+
--tps-bg: #fafaf7;
|
|
17
|
+
--tps-bg-soft: #f8fafc;
|
|
18
|
+
--tps-radius: 8px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/* --- Picker block-card (drawerItem override) ---------------------------- */
|
|
22
|
+
/* Lay the picker out as a 2-column grid so each tile gets a generous icon
|
|
23
|
+
* area without forcing the user to scroll a long single-column list. Puck
|
|
24
|
+
* renders the Drawer as a flex column by default; we override via the
|
|
25
|
+
* stable `data-puck-drawer` attribute (the underlying class hash changes
|
|
26
|
+
* between Puck minor versions). */
|
|
27
|
+
[data-puck-drawer] {
|
|
28
|
+
display: grid !important;
|
|
29
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
30
|
+
gap: 10px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.tps-block-card {
|
|
34
|
+
width: 100%;
|
|
35
|
+
/* Cap during the @dnd-kit drag overlay so the cloned tile can't grow past
|
|
36
|
+
* its picker-cell size when Puck re-parents it under <body> at the cursor.
|
|
37
|
+
* 220px ≈ the widest a single picker column gets at the AntD breakpoints
|
|
38
|
+
* we render the sidebar at. */
|
|
39
|
+
max-width: 220px;
|
|
40
|
+
min-width: 0;
|
|
41
|
+
box-sizing: border-box;
|
|
42
|
+
display: flex;
|
|
43
|
+
flex-direction: column;
|
|
44
|
+
gap: 0;
|
|
45
|
+
padding: 0;
|
|
46
|
+
border: 1px solid var(--tps-line);
|
|
47
|
+
border-radius: var(--tps-radius);
|
|
48
|
+
background: #fff;
|
|
49
|
+
overflow: hidden;
|
|
50
|
+
transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
|
|
51
|
+
}
|
|
52
|
+
.tps-block-card:hover {
|
|
53
|
+
border-color: var(--tps-primary);
|
|
54
|
+
transform: translateY(-1px);
|
|
55
|
+
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
|
|
56
|
+
}
|
|
57
|
+
/* Preview is flush to the card edges and uses the full tile width. The
|
|
58
|
+
* SVG inside is `width: 100%; height: auto`, so its rendered height
|
|
59
|
+
* tracks the tile width — wider tiles make the icon visibly larger. */
|
|
60
|
+
.tps-block-card__preview {
|
|
61
|
+
width: 85%;
|
|
62
|
+
margin: 16px auto 0;
|
|
63
|
+
overflow: hidden;
|
|
64
|
+
border-radius: var(--tps-radius);
|
|
65
|
+
background: var(--tps-bg-soft);
|
|
66
|
+
/* Lock the slot to the thumbnail's natural ratio so the SVG can't
|
|
67
|
+
* collapse to a default height when the inline `height="auto"`
|
|
68
|
+
* attribute is ignored (it's not a valid SVG length). The slot's height
|
|
69
|
+
* derives from `width × 70/120` — deterministic regardless of context.
|
|
70
|
+
* Don't add `height: 100%` here: under the @dnd-kit drag overlay the
|
|
71
|
+
* cloned card lives in a fixed-height wrapper, and `height: 100%` would
|
|
72
|
+
* blow the slot up to fill it. */
|
|
73
|
+
aspect-ratio: 120 / 70;
|
|
74
|
+
}
|
|
75
|
+
.tps-block-card__preview > svg {
|
|
76
|
+
display: block;
|
|
77
|
+
width: 100%;
|
|
78
|
+
height: 100%;
|
|
79
|
+
}
|
|
80
|
+
.tps-block-card__text {
|
|
81
|
+
display: flex;
|
|
82
|
+
flex-direction: column;
|
|
83
|
+
gap: 3px;
|
|
84
|
+
width: 100%;
|
|
85
|
+
max-width: 100%;
|
|
86
|
+
min-width: 0;
|
|
87
|
+
padding: 8px 10px 10px;
|
|
88
|
+
box-sizing: border-box;
|
|
89
|
+
}
|
|
90
|
+
.tps-block-card__name,
|
|
91
|
+
.tps-block-card__desc {
|
|
92
|
+
width: 100%;
|
|
93
|
+
max-width: 100%;
|
|
94
|
+
min-width: 0;
|
|
95
|
+
white-space: normal;
|
|
96
|
+
word-break: break-word;
|
|
97
|
+
overflow-wrap: anywhere;
|
|
98
|
+
}
|
|
99
|
+
.tps-block-card__name {
|
|
100
|
+
font-size: 12px;
|
|
101
|
+
font-weight: 600;
|
|
102
|
+
color: var(--tps-ink);
|
|
103
|
+
/* Keep names to a single line so the grid stays visually aligned —
|
|
104
|
+
* fall back to the `title` attribute on the card for the full label. */
|
|
105
|
+
white-space: nowrap;
|
|
106
|
+
overflow: hidden;
|
|
107
|
+
text-overflow: ellipsis;
|
|
108
|
+
}
|
|
109
|
+
.tps-block-card__desc {
|
|
110
|
+
font-size: 11px;
|
|
111
|
+
color: var(--tps-muted);
|
|
112
|
+
line-height: 1.35;
|
|
113
|
+
/* Cap at 2 lines so every tile in the grid has predictable height. The
|
|
114
|
+
* full description still surfaces on hover via the parent's `title`. */
|
|
115
|
+
display: -webkit-box;
|
|
116
|
+
-webkit-line-clamp: 2;
|
|
117
|
+
-webkit-box-orient: vertical;
|
|
118
|
+
overflow: hidden;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/* --- Scroll-reveal animations (withReveal) ------------------------------ */
|
|
122
|
+
/* SSR-safe: opaque by default. Animation only engages once <html> has
|
|
123
|
+
* .tps-anim, which the host adds after hydration. This avoids any FOUC
|
|
124
|
+
* for above-the-fold content. */
|
|
125
|
+
.tps-reveal {
|
|
126
|
+
opacity: 1;
|
|
127
|
+
}
|
|
128
|
+
.tps-anim .tps-reveal:not(.is-in-view) {
|
|
129
|
+
opacity: 0;
|
|
130
|
+
transform: translateY(16px);
|
|
131
|
+
}
|
|
132
|
+
.tps-anim .tps-reveal--scale-in:not(.is-in-view) {
|
|
133
|
+
opacity: 0;
|
|
134
|
+
transform: scale(0.96);
|
|
135
|
+
}
|
|
136
|
+
.tps-anim .tps-reveal.is-in-view {
|
|
137
|
+
opacity: 1;
|
|
138
|
+
transform: none;
|
|
139
|
+
transition:
|
|
140
|
+
opacity 480ms ease,
|
|
141
|
+
transform 480ms cubic-bezier(0.2, 0.7, 0.2, 1);
|
|
142
|
+
}
|
|
143
|
+
@media (prefers-reduced-motion: reduce) {
|
|
144
|
+
.tps-reveal {
|
|
145
|
+
opacity: 1 !important;
|
|
146
|
+
transform: none !important;
|
|
147
|
+
transition: none !important;
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
/* Collapses a fixed-column grid to a single column on narrow viewports.
|
|
152
|
+
Blocks that ship a multi-column row (e.g. date + content + cta) opt in
|
|
153
|
+
so the row stacks vertically below ~640 px instead of forcing a
|
|
154
|
+
horizontal scroll. The `dd` rule drops the stacked-row double-border
|
|
155
|
+
for definition lists (KeyValueList). */
|
|
156
|
+
@media (max-width: 640px) {
|
|
157
|
+
.tps-row-stack {
|
|
158
|
+
grid-template-columns: 1fr !important;
|
|
159
|
+
row-gap: 8px !important;
|
|
160
|
+
}
|
|
161
|
+
.tps-row-stack dd {
|
|
162
|
+
border-top: none !important;
|
|
163
|
+
padding-top: 0 !important;
|
|
164
|
+
}
|
|
165
|
+
}
|