@json-render/react-email 0.8.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 +201 -0
- package/README.md +147 -0
- package/dist/catalog-types-Dh9gul8V.d.mts +17 -0
- package/dist/catalog-types-Dh9gul8V.d.ts +17 -0
- package/dist/catalog.d.mts +216 -0
- package/dist/catalog.d.ts +216 -0
- package/dist/catalog.js +203 -0
- package/dist/catalog.js.map +1 -0
- package/dist/catalog.mjs +7 -0
- package/dist/catalog.mjs.map +1 -0
- package/dist/chunk-3YN5NZJ7.mjs +44 -0
- package/dist/chunk-3YN5NZJ7.mjs.map +1 -0
- package/dist/chunk-GXJW4OIL.mjs +179 -0
- package/dist/chunk-GXJW4OIL.mjs.map +1 -0
- package/dist/chunk-MPWIHNXF.mjs +253 -0
- package/dist/chunk-MPWIHNXF.mjs.map +1 -0
- package/dist/index.d.mts +114 -0
- package/dist/index.d.ts +114 -0
- package/dist/index.js +1298 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +847 -0
- package/dist/index.mjs.map +1 -0
- package/dist/render-DFHuQRW0.d.ts +80 -0
- package/dist/render-kNHi7tZ2.d.mts +80 -0
- package/dist/render.d.mts +5 -0
- package/dist/render.d.ts +5 -0
- package/dist/render.js +259 -0
- package/dist/render.js.map +1 -0
- package/dist/render.mjs +11 -0
- package/dist/render.mjs.map +1 -0
- package/dist/server.d.mts +43 -0
- package/dist/server.d.ts +43 -0
- package/dist/server.js +247 -0
- package/dist/server.js.map +1 -0
- package/dist/server.mjs +11 -0
- package/dist/server.mjs.map +1 -0
- package/package.json +78 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/catalog.ts"],"sourcesContent":["import { z } from \"zod\";\n\nconst styleSchema = z.record(z.string(), z.any()).nullable();\n\n/**\n * Standard component definitions for React Email catalogs.\n *\n * These define the available email components with their Zod prop schemas.\n * All components render using @react-email/components primitives.\n */\nexport const standardComponentDefinitions = {\n // ==========================================================================\n // Document Structure\n // ==========================================================================\n\n Html: {\n props: z.object({\n lang: z.string().nullable(),\n dir: z.enum([\"ltr\", \"rtl\"]).nullable(),\n }),\n slots: [\"default\"],\n description:\n \"Top-level HTML email wrapper. Must be the root element. Children should include Head and Body.\",\n example: { lang: \"en\", dir: \"ltr\" },\n },\n\n Head: {\n props: z.object({}),\n slots: [\"default\"],\n description:\n \"Email head section. Place inside Html. Can contain metadata but typically left empty.\",\n example: {},\n },\n\n Body: {\n props: z.object({\n style: styleSchema,\n }),\n slots: [\"default\"],\n description:\n \"Email body wrapper. Place inside Html after Head. Contains all visible email content.\",\n example: { style: { backgroundColor: \"#f6f9fc\" } },\n },\n\n Container: {\n props: z.object({\n style: styleSchema,\n }),\n slots: [\"default\"],\n description:\n \"Constrains content width for email clients. Place inside Body. Typically max-width 600px.\",\n example: {\n style: {\n maxWidth: \"600px\",\n margin: \"0 auto\",\n padding: \"20px 0 48px\",\n },\n },\n },\n\n Section: {\n props: z.object({\n style: styleSchema,\n }),\n slots: [\"default\"],\n description:\n \"Groups related content. Renders as a table-based section for email compatibility.\",\n example: { style: { padding: \"24px\", backgroundColor: \"#ffffff\" } },\n },\n\n Row: {\n props: z.object({\n style: styleSchema,\n }),\n slots: [\"default\"],\n description:\n \"Horizontal layout row. Use inside Section for multi-column layouts.\",\n example: { style: {} },\n },\n\n Column: {\n props: z.object({\n style: styleSchema,\n }),\n slots: [\"default\"],\n description:\n \"Column within a Row. Set width via style for proportional layouts.\",\n example: { style: { width: \"50%\" } },\n },\n\n // ==========================================================================\n // Content Components\n // ==========================================================================\n\n Heading: {\n props: z.object({\n text: z.string(),\n as: z.enum([\"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\"]).nullable(),\n style: styleSchema,\n }),\n slots: [],\n description:\n \"Heading text at various levels. h1 is largest, h6 is smallest.\",\n example: { text: \"Welcome!\", as: \"h1\" },\n },\n\n Text: {\n props: z.object({\n text: z.string(),\n style: styleSchema,\n }),\n slots: [],\n description:\n \"Body text paragraph. Use style for font size, color, weight, and alignment.\",\n example: { text: \"Thank you for signing up.\" },\n },\n\n Link: {\n props: z.object({\n text: z.string(),\n href: z.string(),\n style: styleSchema,\n }),\n slots: [],\n description: \"Hyperlink with visible text and a URL.\",\n example: {\n text: \"Visit our website\",\n href: \"https://example.com\",\n style: { color: \"#2563eb\" },\n },\n },\n\n Button: {\n props: z.object({\n text: z.string(),\n href: z.string(),\n style: styleSchema,\n }),\n slots: [],\n description:\n \"Call-to-action button rendered as a link styled as a button. Provide text and href.\",\n example: {\n text: \"Get Started\",\n href: \"https://example.com\",\n style: {\n backgroundColor: \"#5F51E8\",\n borderRadius: \"3px\",\n color: \"#fff\",\n padding: \"12px 20px\",\n },\n },\n },\n\n Image: {\n props: z.object({\n src: z.string(),\n alt: z.string().nullable(),\n width: z.number().nullable(),\n height: z.number().nullable(),\n style: styleSchema,\n }),\n slots: [],\n description:\n \"Image from a URL. src must be a fully qualified URL. Specify width and height for consistent rendering.\",\n example: {\n src: \"https://picsum.photos/400/200?random=1\",\n alt: \"Hero image\",\n width: 400,\n height: 200,\n },\n },\n\n Hr: {\n props: z.object({\n style: styleSchema,\n }),\n slots: [],\n description: \"Horizontal rule separator between content sections.\",\n example: {\n style: { borderColor: \"#e6ebf1\", margin: \"20px 0\" },\n },\n },\n\n // ==========================================================================\n // Utility Components\n // ==========================================================================\n\n Preview: {\n props: z.object({\n text: z.string(),\n }),\n slots: [],\n description:\n \"Preview text shown in email client inboxes before the email is opened. Place inside Html.\",\n example: { text: \"You have a new message from Acme Corp\" },\n },\n\n Markdown: {\n props: z.object({\n content: z.string(),\n markdownContainerStyles: styleSchema,\n markdownCustomStyles: z.record(z.string(), z.any()).nullable(),\n }),\n slots: [],\n description:\n \"Renders markdown content as email-safe HTML. Supports headings, paragraphs, lists, links, bold, italic, and code.\",\n example: {\n content: \"# Hello\\n\\nThis is **bold** and *italic* text.\",\n },\n },\n};\n\nexport type StandardComponentDefinitions = typeof standardComponentDefinitions;\n\nexport type StandardComponentProps<\n K extends keyof StandardComponentDefinitions,\n> = StandardComponentDefinitions[K][\"props\"] extends { _output: infer O }\n ? O\n : z.output<StandardComponentDefinitions[K][\"props\"]>;\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,253 @@
|
|
|
1
|
+
// src/render.tsx
|
|
2
|
+
import { render } from "@react-email/render";
|
|
3
|
+
import {
|
|
4
|
+
resolveElementProps,
|
|
5
|
+
evaluateVisibility,
|
|
6
|
+
getByPath
|
|
7
|
+
} from "@json-render/core";
|
|
8
|
+
|
|
9
|
+
// src/components/standard.tsx
|
|
10
|
+
import {
|
|
11
|
+
Html as EmailHtml,
|
|
12
|
+
Head as EmailHead,
|
|
13
|
+
Body as EmailBody,
|
|
14
|
+
Container as EmailContainer,
|
|
15
|
+
Section as EmailSection,
|
|
16
|
+
Row as EmailRow,
|
|
17
|
+
Column as EmailColumn,
|
|
18
|
+
Heading as EmailHeading,
|
|
19
|
+
Text as EmailText,
|
|
20
|
+
Link as EmailLink,
|
|
21
|
+
Button as EmailButton,
|
|
22
|
+
Img as EmailImg,
|
|
23
|
+
Hr as EmailHr,
|
|
24
|
+
Preview as EmailPreview,
|
|
25
|
+
Markdown as EmailMarkdown
|
|
26
|
+
} from "@react-email/components";
|
|
27
|
+
import { jsx } from "react/jsx-runtime";
|
|
28
|
+
function HtmlComponent({
|
|
29
|
+
element,
|
|
30
|
+
children
|
|
31
|
+
}) {
|
|
32
|
+
const p = element.props;
|
|
33
|
+
return /* @__PURE__ */ jsx(EmailHtml, { lang: p.lang ?? void 0, dir: p.dir ?? void 0, children });
|
|
34
|
+
}
|
|
35
|
+
function HeadComponent({
|
|
36
|
+
children
|
|
37
|
+
}) {
|
|
38
|
+
return /* @__PURE__ */ jsx(EmailHead, { children });
|
|
39
|
+
}
|
|
40
|
+
function BodyComponent({
|
|
41
|
+
element,
|
|
42
|
+
children
|
|
43
|
+
}) {
|
|
44
|
+
const p = element.props;
|
|
45
|
+
return /* @__PURE__ */ jsx(EmailBody, { style: p.style ?? void 0, children });
|
|
46
|
+
}
|
|
47
|
+
function ContainerComponent({
|
|
48
|
+
element,
|
|
49
|
+
children
|
|
50
|
+
}) {
|
|
51
|
+
const p = element.props;
|
|
52
|
+
return /* @__PURE__ */ jsx(EmailContainer, { style: p.style ?? void 0, children });
|
|
53
|
+
}
|
|
54
|
+
function SectionComponent({
|
|
55
|
+
element,
|
|
56
|
+
children
|
|
57
|
+
}) {
|
|
58
|
+
const p = element.props;
|
|
59
|
+
return /* @__PURE__ */ jsx(EmailSection, { style: p.style ?? void 0, children });
|
|
60
|
+
}
|
|
61
|
+
function RowComponent({
|
|
62
|
+
element,
|
|
63
|
+
children
|
|
64
|
+
}) {
|
|
65
|
+
const p = element.props;
|
|
66
|
+
return /* @__PURE__ */ jsx(EmailRow, { style: p.style ?? void 0, children });
|
|
67
|
+
}
|
|
68
|
+
function ColumnComponent({
|
|
69
|
+
element,
|
|
70
|
+
children
|
|
71
|
+
}) {
|
|
72
|
+
const p = element.props;
|
|
73
|
+
return /* @__PURE__ */ jsx(EmailColumn, { style: p.style ?? void 0, children });
|
|
74
|
+
}
|
|
75
|
+
function HeadingComponent({
|
|
76
|
+
element
|
|
77
|
+
}) {
|
|
78
|
+
const p = element.props;
|
|
79
|
+
return /* @__PURE__ */ jsx(EmailHeading, { as: p.as ?? "h2", style: p.style ?? void 0, children: p.text });
|
|
80
|
+
}
|
|
81
|
+
function TextComponent({
|
|
82
|
+
element
|
|
83
|
+
}) {
|
|
84
|
+
const p = element.props;
|
|
85
|
+
return /* @__PURE__ */ jsx(EmailText, { style: p.style ?? void 0, children: p.text });
|
|
86
|
+
}
|
|
87
|
+
function LinkComponent({
|
|
88
|
+
element
|
|
89
|
+
}) {
|
|
90
|
+
const p = element.props;
|
|
91
|
+
return /* @__PURE__ */ jsx(EmailLink, { href: p.href, style: p.style ?? void 0, children: p.text });
|
|
92
|
+
}
|
|
93
|
+
function ButtonComponent({
|
|
94
|
+
element
|
|
95
|
+
}) {
|
|
96
|
+
const p = element.props;
|
|
97
|
+
return /* @__PURE__ */ jsx(EmailButton, { href: p.href, style: p.style ?? void 0, children: p.text });
|
|
98
|
+
}
|
|
99
|
+
function ImageComponent({
|
|
100
|
+
element
|
|
101
|
+
}) {
|
|
102
|
+
const p = element.props;
|
|
103
|
+
return /* @__PURE__ */ jsx(
|
|
104
|
+
EmailImg,
|
|
105
|
+
{
|
|
106
|
+
src: p.src,
|
|
107
|
+
alt: p.alt ?? void 0,
|
|
108
|
+
width: p.width ?? void 0,
|
|
109
|
+
height: p.height ?? void 0,
|
|
110
|
+
style: p.style ?? void 0
|
|
111
|
+
}
|
|
112
|
+
);
|
|
113
|
+
}
|
|
114
|
+
function HrComponent({
|
|
115
|
+
element
|
|
116
|
+
}) {
|
|
117
|
+
const p = element.props;
|
|
118
|
+
return /* @__PURE__ */ jsx(EmailHr, { style: p.style ?? void 0 });
|
|
119
|
+
}
|
|
120
|
+
function PreviewComponent({
|
|
121
|
+
element
|
|
122
|
+
}) {
|
|
123
|
+
const p = element.props;
|
|
124
|
+
return /* @__PURE__ */ jsx(EmailPreview, { children: p.text });
|
|
125
|
+
}
|
|
126
|
+
function MarkdownComponent({
|
|
127
|
+
element
|
|
128
|
+
}) {
|
|
129
|
+
const p = element.props;
|
|
130
|
+
return /* @__PURE__ */ jsx(
|
|
131
|
+
EmailMarkdown,
|
|
132
|
+
{
|
|
133
|
+
markdownContainerStyles: p.markdownContainerStyles ?? void 0,
|
|
134
|
+
markdownCustomStyles: p.markdownCustomStyles ?? void 0,
|
|
135
|
+
children: p.content
|
|
136
|
+
}
|
|
137
|
+
);
|
|
138
|
+
}
|
|
139
|
+
var standardComponents = {
|
|
140
|
+
Html: HtmlComponent,
|
|
141
|
+
Head: HeadComponent,
|
|
142
|
+
Body: BodyComponent,
|
|
143
|
+
Container: ContainerComponent,
|
|
144
|
+
Section: SectionComponent,
|
|
145
|
+
Row: RowComponent,
|
|
146
|
+
Column: ColumnComponent,
|
|
147
|
+
Heading: HeadingComponent,
|
|
148
|
+
Text: TextComponent,
|
|
149
|
+
Link: LinkComponent,
|
|
150
|
+
Button: ButtonComponent,
|
|
151
|
+
Image: ImageComponent,
|
|
152
|
+
Hr: HrComponent,
|
|
153
|
+
Preview: PreviewComponent,
|
|
154
|
+
Markdown: MarkdownComponent
|
|
155
|
+
};
|
|
156
|
+
|
|
157
|
+
// src/render.tsx
|
|
158
|
+
import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
|
|
159
|
+
var noopEmit = () => {
|
|
160
|
+
};
|
|
161
|
+
function renderElement(elementKey, spec, registry, stateModel, repeatItem, repeatIndex, repeatBasePath) {
|
|
162
|
+
const element = spec.elements[elementKey];
|
|
163
|
+
if (!element) return null;
|
|
164
|
+
const ctx = {
|
|
165
|
+
stateModel,
|
|
166
|
+
repeatItem,
|
|
167
|
+
repeatIndex,
|
|
168
|
+
repeatBasePath
|
|
169
|
+
};
|
|
170
|
+
if (element.visible !== void 0) {
|
|
171
|
+
if (!evaluateVisibility(element.visible, ctx)) {
|
|
172
|
+
return null;
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
const resolvedProps = resolveElementProps(
|
|
176
|
+
element.props,
|
|
177
|
+
ctx
|
|
178
|
+
);
|
|
179
|
+
const resolvedElement = { ...element, props: resolvedProps };
|
|
180
|
+
const Component = registry[resolvedElement.type];
|
|
181
|
+
if (!Component) return null;
|
|
182
|
+
if (resolvedElement.repeat) {
|
|
183
|
+
const items = getByPath(stateModel, resolvedElement.repeat.statePath) ?? [];
|
|
184
|
+
const repeat = resolvedElement.repeat;
|
|
185
|
+
const fragments = items.map((item, index) => {
|
|
186
|
+
const repeatKey = repeat.key;
|
|
187
|
+
const key = repeatKey && typeof item === "object" && item !== null ? String(item[repeatKey] ?? index) : String(index);
|
|
188
|
+
const childPath = `${repeat.statePath}/${index}`;
|
|
189
|
+
const children2 = resolvedElement.children?.map(
|
|
190
|
+
(childKey) => renderElement(
|
|
191
|
+
childKey,
|
|
192
|
+
spec,
|
|
193
|
+
registry,
|
|
194
|
+
stateModel,
|
|
195
|
+
item,
|
|
196
|
+
index,
|
|
197
|
+
childPath
|
|
198
|
+
)
|
|
199
|
+
);
|
|
200
|
+
return /* @__PURE__ */ jsx2(Component, { element: resolvedElement, emit: noopEmit, children: children2 }, key);
|
|
201
|
+
});
|
|
202
|
+
return /* @__PURE__ */ jsx2(Fragment, { children: fragments });
|
|
203
|
+
}
|
|
204
|
+
const children = resolvedElement.children?.map(
|
|
205
|
+
(childKey) => renderElement(
|
|
206
|
+
childKey,
|
|
207
|
+
spec,
|
|
208
|
+
registry,
|
|
209
|
+
stateModel,
|
|
210
|
+
repeatItem,
|
|
211
|
+
repeatIndex,
|
|
212
|
+
repeatBasePath
|
|
213
|
+
)
|
|
214
|
+
);
|
|
215
|
+
return /* @__PURE__ */ jsx2(Component, { element: resolvedElement, emit: noopEmit, children: children && children.length > 0 ? children : void 0 }, elementKey);
|
|
216
|
+
}
|
|
217
|
+
function buildDocument(spec, options = {}) {
|
|
218
|
+
const {
|
|
219
|
+
registry: customRegistry,
|
|
220
|
+
includeStandard = true,
|
|
221
|
+
state = {}
|
|
222
|
+
} = options;
|
|
223
|
+
const mergedState = {
|
|
224
|
+
...spec.state,
|
|
225
|
+
...state
|
|
226
|
+
};
|
|
227
|
+
const registry = {
|
|
228
|
+
...includeStandard ? standardComponents : {},
|
|
229
|
+
...customRegistry
|
|
230
|
+
};
|
|
231
|
+
const root = renderElement(spec.root, spec, registry, mergedState);
|
|
232
|
+
if (!root) {
|
|
233
|
+
console.warn(
|
|
234
|
+
`[json-render/react-email] Root element "${spec.root}" not found in spec.elements`
|
|
235
|
+
);
|
|
236
|
+
}
|
|
237
|
+
return root ?? /* @__PURE__ */ jsx2(Fragment, {});
|
|
238
|
+
}
|
|
239
|
+
async function renderToHtml(spec, options) {
|
|
240
|
+
const document = buildDocument(spec, options);
|
|
241
|
+
return render(document);
|
|
242
|
+
}
|
|
243
|
+
async function renderToPlainText(spec, options) {
|
|
244
|
+
const document = buildDocument(spec, options);
|
|
245
|
+
return render(document, { plainText: true });
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
export {
|
|
249
|
+
standardComponents,
|
|
250
|
+
renderToHtml,
|
|
251
|
+
renderToPlainText
|
|
252
|
+
};
|
|
253
|
+
//# sourceMappingURL=chunk-MPWIHNXF.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/render.tsx","../src/components/standard.tsx"],"sourcesContent":["import React from \"react\";\nimport { render } from \"@react-email/render\";\nimport type { Spec, UIElement } from \"@json-render/core\";\nimport {\n resolveElementProps,\n evaluateVisibility,\n getByPath,\n type PropResolutionContext,\n} from \"@json-render/core\";\nimport { standardComponents } from \"./components/standard\";\n\n// Re-export the standard components for use in custom registries\nexport { standardComponents };\n\nexport type RenderComponentRegistry = Record<string, React.ComponentType<any>>;\n\nexport interface RenderOptions {\n registry?: RenderComponentRegistry;\n includeStandard?: boolean;\n state?: Record<string, unknown>;\n}\n\nconst noopEmit = () => {};\n\nfunction renderElement(\n elementKey: string,\n spec: Spec,\n registry: RenderComponentRegistry,\n stateModel: Record<string, unknown>,\n repeatItem?: unknown,\n repeatIndex?: number,\n repeatBasePath?: string,\n): React.ReactElement | null {\n const element = spec.elements[elementKey];\n if (!element) return null;\n\n const ctx: PropResolutionContext = {\n stateModel,\n repeatItem,\n repeatIndex,\n repeatBasePath,\n };\n\n if (element.visible !== undefined) {\n if (!evaluateVisibility(element.visible, ctx)) {\n return null;\n }\n }\n\n const resolvedProps = resolveElementProps(\n element.props as Record<string, unknown>,\n ctx,\n );\n const resolvedElement: UIElement = { ...element, props: resolvedProps };\n\n const Component = registry[resolvedElement.type];\n if (!Component) return null;\n\n if (resolvedElement.repeat) {\n const items =\n (getByPath(stateModel, resolvedElement.repeat.statePath) as\n | unknown[]\n | undefined) ?? [];\n\n const repeat = resolvedElement.repeat!;\n const fragments = items.map((item, index) => {\n const repeatKey = repeat.key;\n const key =\n repeatKey && typeof item === \"object\" && item !== null\n ? String((item as Record<string, unknown>)[repeatKey] ?? index)\n : String(index);\n\n const childPath = `${repeat.statePath}/${index}`;\n const children = resolvedElement.children?.map((childKey) =>\n renderElement(\n childKey,\n spec,\n registry,\n stateModel,\n item,\n index,\n childPath,\n ),\n );\n\n return (\n <Component key={key} element={resolvedElement} emit={noopEmit}>\n {children}\n </Component>\n );\n });\n\n return <>{fragments}</>;\n }\n\n const children = resolvedElement.children?.map((childKey) =>\n renderElement(\n childKey,\n spec,\n registry,\n stateModel,\n repeatItem,\n repeatIndex,\n repeatBasePath,\n ),\n );\n\n return (\n <Component key={elementKey} element={resolvedElement} emit={noopEmit}>\n {children && children.length > 0 ? children : undefined}\n </Component>\n );\n}\n\nfunction buildDocument(\n spec: Spec,\n options: RenderOptions = {},\n): React.ReactElement {\n const {\n registry: customRegistry,\n includeStandard = true,\n state = {},\n } = options;\n\n const mergedState: Record<string, unknown> = {\n ...spec.state,\n ...state,\n };\n\n const registry: RenderComponentRegistry = {\n ...(includeStandard ? standardComponents : {}),\n ...customRegistry,\n };\n\n const root = renderElement(spec.root, spec, registry, mergedState);\n if (!root) {\n console.warn(\n `[json-render/react-email] Root element \"${spec.root}\" not found in spec.elements`,\n );\n }\n return root ?? <></>;\n}\n\n/**\n * Render a json-render spec to an HTML email string.\n *\n * This is a standalone server-side function that resolves the spec tree\n * without React hooks or contexts, making it safe to import in Next.js\n * route handlers and other server-only environments.\n */\nexport async function renderToHtml(\n spec: Spec,\n options?: RenderOptions,\n): Promise<string> {\n const document = buildDocument(spec, options);\n return render(document);\n}\n\n/**\n * Render a json-render spec to a plain text email string.\n */\nexport async function renderToPlainText(\n spec: Spec,\n options?: RenderOptions,\n): Promise<string> {\n const document = buildDocument(spec, options);\n return render(document, { plainText: true });\n}\n","import React from \"react\";\nimport {\n Html as EmailHtml,\n Head as EmailHead,\n Body as EmailBody,\n Container as EmailContainer,\n Section as EmailSection,\n Row as EmailRow,\n Column as EmailColumn,\n Heading as EmailHeading,\n Text as EmailText,\n Link as EmailLink,\n Button as EmailButton,\n Img as EmailImg,\n Hr as EmailHr,\n Preview as EmailPreview,\n Markdown as EmailMarkdown,\n} from \"@react-email/components\";\nimport type { ComponentRenderProps } from \"../renderer\";\nimport type { ComponentRegistry } from \"../renderer\";\nimport type { StandardComponentProps } from \"../catalog\";\n\n// =============================================================================\n// Document Structure\n// =============================================================================\n\nfunction HtmlComponent({\n element,\n children,\n}: ComponentRenderProps<StandardComponentProps<\"Html\">>) {\n const p = element.props;\n\n return (\n <EmailHtml lang={p.lang ?? undefined} dir={p.dir ?? undefined}>\n {children}\n </EmailHtml>\n );\n}\n\nfunction HeadComponent({\n children,\n}: ComponentRenderProps<StandardComponentProps<\"Head\">>) {\n return <EmailHead>{children}</EmailHead>;\n}\n\nfunction BodyComponent({\n element,\n children,\n}: ComponentRenderProps<StandardComponentProps<\"Body\">>) {\n const p = element.props;\n\n return <EmailBody style={p.style ?? undefined}>{children}</EmailBody>;\n}\n\nfunction ContainerComponent({\n element,\n children,\n}: ComponentRenderProps<StandardComponentProps<\"Container\">>) {\n const p = element.props;\n\n return (\n <EmailContainer style={p.style ?? undefined}>{children}</EmailContainer>\n );\n}\n\nfunction SectionComponent({\n element,\n children,\n}: ComponentRenderProps<StandardComponentProps<\"Section\">>) {\n const p = element.props;\n\n return <EmailSection style={p.style ?? undefined}>{children}</EmailSection>;\n}\n\nfunction RowComponent({\n element,\n children,\n}: ComponentRenderProps<StandardComponentProps<\"Row\">>) {\n const p = element.props;\n\n return <EmailRow style={p.style ?? undefined}>{children}</EmailRow>;\n}\n\nfunction ColumnComponent({\n element,\n children,\n}: ComponentRenderProps<StandardComponentProps<\"Column\">>) {\n const p = element.props;\n\n return <EmailColumn style={p.style ?? undefined}>{children}</EmailColumn>;\n}\n\n// =============================================================================\n// Content Components\n// =============================================================================\n\nfunction HeadingComponent({\n element,\n}: ComponentRenderProps<StandardComponentProps<\"Heading\">>) {\n const p = element.props;\n\n return (\n <EmailHeading as={p.as ?? \"h2\"} style={p.style ?? undefined}>\n {p.text}\n </EmailHeading>\n );\n}\n\nfunction TextComponent({\n element,\n}: ComponentRenderProps<StandardComponentProps<\"Text\">>) {\n const p = element.props;\n\n return <EmailText style={p.style ?? undefined}>{p.text}</EmailText>;\n}\n\nfunction LinkComponent({\n element,\n}: ComponentRenderProps<StandardComponentProps<\"Link\">>) {\n const p = element.props;\n\n return (\n <EmailLink href={p.href} style={p.style ?? undefined}>\n {p.text}\n </EmailLink>\n );\n}\n\nfunction ButtonComponent({\n element,\n}: ComponentRenderProps<StandardComponentProps<\"Button\">>) {\n const p = element.props;\n\n return (\n <EmailButton href={p.href} style={p.style ?? undefined}>\n {p.text}\n </EmailButton>\n );\n}\n\nfunction ImageComponent({\n element,\n}: ComponentRenderProps<StandardComponentProps<\"Image\">>) {\n const p = element.props;\n\n return (\n <EmailImg\n src={p.src}\n alt={p.alt ?? undefined}\n width={p.width ?? undefined}\n height={p.height ?? undefined}\n style={p.style ?? undefined}\n />\n );\n}\n\nfunction HrComponent({\n element,\n}: ComponentRenderProps<StandardComponentProps<\"Hr\">>) {\n const p = element.props;\n\n return <EmailHr style={p.style ?? undefined} />;\n}\n\n// =============================================================================\n// Utility Components\n// =============================================================================\n\nfunction PreviewComponent({\n element,\n}: ComponentRenderProps<StandardComponentProps<\"Preview\">>) {\n const p = element.props;\n\n return <EmailPreview>{p.text}</EmailPreview>;\n}\n\nfunction MarkdownComponent({\n element,\n}: ComponentRenderProps<StandardComponentProps<\"Markdown\">>) {\n const p = element.props;\n\n return (\n <EmailMarkdown\n markdownContainerStyles={p.markdownContainerStyles ?? undefined}\n markdownCustomStyles={p.markdownCustomStyles ?? undefined}\n >\n {p.content}\n </EmailMarkdown>\n );\n}\n\n// =============================================================================\n// Registry\n// =============================================================================\n\nexport const standardComponents: ComponentRegistry = {\n Html: HtmlComponent,\n Head: HeadComponent,\n Body: BodyComponent,\n Container: ContainerComponent,\n Section: SectionComponent,\n Row: RowComponent,\n Column: ColumnComponent,\n Heading: HeadingComponent,\n Text: TextComponent,\n Link: LinkComponent,\n Button: ButtonComponent,\n Image: ImageComponent,\n Hr: HrComponent,\n Preview: PreviewComponent,\n Markdown: MarkdownComponent,\n};\n"],"mappings":";AACA,SAAS,cAAc;AAEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;;;ACPP;AAAA,EACE,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,WAAW;AAAA,EACX,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AAAA,EACP,MAAM;AAAA,EACN,WAAW;AAAA,EACX,YAAY;AAAA,OACP;AAgBH;AAPJ,SAAS,cAAc;AAAA,EACrB;AAAA,EACA;AACF,GAAyD;AACvD,QAAM,IAAI,QAAQ;AAElB,SACE,oBAAC,aAAU,MAAM,EAAE,QAAQ,QAAW,KAAK,EAAE,OAAO,QACjD,UACH;AAEJ;AAEA,SAAS,cAAc;AAAA,EACrB;AACF,GAAyD;AACvD,SAAO,oBAAC,aAAW,UAAS;AAC9B;AAEA,SAAS,cAAc;AAAA,EACrB;AAAA,EACA;AACF,GAAyD;AACvD,QAAM,IAAI,QAAQ;AAElB,SAAO,oBAAC,aAAU,OAAO,EAAE,SAAS,QAAY,UAAS;AAC3D;AAEA,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA;AACF,GAA8D;AAC5D,QAAM,IAAI,QAAQ;AAElB,SACE,oBAAC,kBAAe,OAAO,EAAE,SAAS,QAAY,UAAS;AAE3D;AAEA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AACF,GAA4D;AAC1D,QAAM,IAAI,QAAQ;AAElB,SAAO,oBAAC,gBAAa,OAAO,EAAE,SAAS,QAAY,UAAS;AAC9D;AAEA,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AACF,GAAwD;AACtD,QAAM,IAAI,QAAQ;AAElB,SAAO,oBAAC,YAAS,OAAO,EAAE,SAAS,QAAY,UAAS;AAC1D;AAEA,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AACF,GAA2D;AACzD,QAAM,IAAI,QAAQ;AAElB,SAAO,oBAAC,eAAY,OAAO,EAAE,SAAS,QAAY,UAAS;AAC7D;AAMA,SAAS,iBAAiB;AAAA,EACxB;AACF,GAA4D;AAC1D,QAAM,IAAI,QAAQ;AAElB,SACE,oBAAC,gBAAa,IAAI,EAAE,MAAM,MAAM,OAAO,EAAE,SAAS,QAC/C,YAAE,MACL;AAEJ;AAEA,SAAS,cAAc;AAAA,EACrB;AACF,GAAyD;AACvD,QAAM,IAAI,QAAQ;AAElB,SAAO,oBAAC,aAAU,OAAO,EAAE,SAAS,QAAY,YAAE,MAAK;AACzD;AAEA,SAAS,cAAc;AAAA,EACrB;AACF,GAAyD;AACvD,QAAM,IAAI,QAAQ;AAElB,SACE,oBAAC,aAAU,MAAM,EAAE,MAAM,OAAO,EAAE,SAAS,QACxC,YAAE,MACL;AAEJ;AAEA,SAAS,gBAAgB;AAAA,EACvB;AACF,GAA2D;AACzD,QAAM,IAAI,QAAQ;AAElB,SACE,oBAAC,eAAY,MAAM,EAAE,MAAM,OAAO,EAAE,SAAS,QAC1C,YAAE,MACL;AAEJ;AAEA,SAAS,eAAe;AAAA,EACtB;AACF,GAA0D;AACxD,QAAM,IAAI,QAAQ;AAElB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,EAAE;AAAA,MACP,KAAK,EAAE,OAAO;AAAA,MACd,OAAO,EAAE,SAAS;AAAA,MAClB,QAAQ,EAAE,UAAU;AAAA,MACpB,OAAO,EAAE,SAAS;AAAA;AAAA,EACpB;AAEJ;AAEA,SAAS,YAAY;AAAA,EACnB;AACF,GAAuD;AACrD,QAAM,IAAI,QAAQ;AAElB,SAAO,oBAAC,WAAQ,OAAO,EAAE,SAAS,QAAW;AAC/C;AAMA,SAAS,iBAAiB;AAAA,EACxB;AACF,GAA4D;AAC1D,QAAM,IAAI,QAAQ;AAElB,SAAO,oBAAC,gBAAc,YAAE,MAAK;AAC/B;AAEA,SAAS,kBAAkB;AAAA,EACzB;AACF,GAA6D;AAC3D,QAAM,IAAI,QAAQ;AAElB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,yBAAyB,EAAE,2BAA2B;AAAA,MACtD,sBAAsB,EAAE,wBAAwB;AAAA,MAE/C,YAAE;AAAA;AAAA,EACL;AAEJ;AAMO,IAAM,qBAAwC;AAAA,EACnD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,WAAW;AAAA,EACX,SAAS;AAAA,EACT,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,UAAU;AACZ;;;AD7HQ,SAMG,UANH,OAAAA,YAAA;AAhER,IAAM,WAAW,MAAM;AAAC;AAExB,SAAS,cACP,YACA,MACA,UACA,YACA,YACA,aACA,gBAC2B;AAC3B,QAAM,UAAU,KAAK,SAAS,UAAU;AACxC,MAAI,CAAC,QAAS,QAAO;AAErB,QAAM,MAA6B;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,MAAI,QAAQ,YAAY,QAAW;AACjC,QAAI,CAAC,mBAAmB,QAAQ,SAAS,GAAG,GAAG;AAC7C,aAAO;AAAA,IACT;AAAA,EACF;AAEA,QAAM,gBAAgB;AAAA,IACpB,QAAQ;AAAA,IACR;AAAA,EACF;AACA,QAAM,kBAA6B,EAAE,GAAG,SAAS,OAAO,cAAc;AAEtE,QAAM,YAAY,SAAS,gBAAgB,IAAI;AAC/C,MAAI,CAAC,UAAW,QAAO;AAEvB,MAAI,gBAAgB,QAAQ;AAC1B,UAAM,QACH,UAAU,YAAY,gBAAgB,OAAO,SAAS,KAErC,CAAC;AAErB,UAAM,SAAS,gBAAgB;AAC/B,UAAM,YAAY,MAAM,IAAI,CAAC,MAAM,UAAU;AAC3C,YAAM,YAAY,OAAO;AACzB,YAAM,MACJ,aAAa,OAAO,SAAS,YAAY,SAAS,OAC9C,OAAQ,KAAiC,SAAS,KAAK,KAAK,IAC5D,OAAO,KAAK;AAElB,YAAM,YAAY,GAAG,OAAO,SAAS,IAAI,KAAK;AAC9C,YAAMC,YAAW,gBAAgB,UAAU;AAAA,QAAI,CAAC,aAC9C;AAAA,UACE;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAEA,aACE,gBAAAC,KAAC,aAAoB,SAAS,iBAAiB,MAAM,UAClD,UAAAD,aADa,GAEhB;AAAA,IAEJ,CAAC;AAED,WAAO,gBAAAC,KAAA,YAAG,qBAAU;AAAA,EACtB;AAEA,QAAM,WAAW,gBAAgB,UAAU;AAAA,IAAI,CAAC,aAC9C;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SACE,gBAAAA,KAAC,aAA2B,SAAS,iBAAiB,MAAM,UACzD,sBAAY,SAAS,SAAS,IAAI,WAAW,UADhC,UAEhB;AAEJ;AAEA,SAAS,cACP,MACA,UAAyB,CAAC,GACN;AACpB,QAAM;AAAA,IACJ,UAAU;AAAA,IACV,kBAAkB;AAAA,IAClB,QAAQ,CAAC;AAAA,EACX,IAAI;AAEJ,QAAM,cAAuC;AAAA,IAC3C,GAAG,KAAK;AAAA,IACR,GAAG;AAAA,EACL;AAEA,QAAM,WAAoC;AAAA,IACxC,GAAI,kBAAkB,qBAAqB,CAAC;AAAA,IAC5C,GAAG;AAAA,EACL;AAEA,QAAM,OAAO,cAAc,KAAK,MAAM,MAAM,UAAU,WAAW;AACjE,MAAI,CAAC,MAAM;AACT,YAAQ;AAAA,MACN,2CAA2C,KAAK,IAAI;AAAA,IACtD;AAAA,EACF;AACA,SAAO,QAAQ,gBAAAA,KAAA,YAAE;AACnB;AASA,eAAsB,aACpB,MACA,SACiB;AACjB,QAAM,WAAW,cAAc,MAAM,OAAO;AAC5C,SAAO,OAAO,QAAQ;AACxB;AAKA,eAAsB,kBACpB,MACA,SACiB;AACjB,QAAM,WAAW,cAAc,MAAM,OAAO;AAC5C,SAAO,OAAO,UAAU,EAAE,WAAW,KAAK,CAAC;AAC7C;","names":["jsx","children","jsx"]}
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
export { ReactEmailSchema, ReactEmailSpec, schema } from './server.mjs';
|
|
2
|
+
import { StateModel, VisibilityCondition, VisibilityContext, ActionHandler, ResolvedAction, ActionBinding, ActionConfirm, ValidationFunction, ValidationResult, ValidationConfig } from '@json-render/core';
|
|
3
|
+
export { Spec, StateModel } from '@json-render/core';
|
|
4
|
+
export { a as ComponentContext, b as ComponentFn, C as Components, S as SetState } from './catalog-types-Dh9gul8V.mjs';
|
|
5
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
6
|
+
import { ReactNode } from 'react';
|
|
7
|
+
export { a as ComponentMap, f as ComponentRegistry, b as ComponentRenderProps, e as ComponentRenderer, C as CreateRendererProps, D as DefineRegistryResult, J as JSONUIProvider, h as JSONUIProviderProps, j as RenderOptions, R as Renderer, g as RendererProps, c as createRenderer, d as defineRegistry, r as renderToHtml, i as renderToPlainText, s as standardComponents } from './render-kNHi7tZ2.mjs';
|
|
8
|
+
export { StandardComponentDefinitions, StandardComponentProps, standardComponentDefinitions } from './catalog.mjs';
|
|
9
|
+
import 'zod';
|
|
10
|
+
|
|
11
|
+
interface StateContextValue {
|
|
12
|
+
state: StateModel;
|
|
13
|
+
get: (path: string) => unknown;
|
|
14
|
+
set: (path: string, value: unknown) => void;
|
|
15
|
+
update: (updates: Record<string, unknown>) => void;
|
|
16
|
+
}
|
|
17
|
+
interface StateProviderProps {
|
|
18
|
+
initialState?: StateModel;
|
|
19
|
+
onStateChange?: (path: string, value: unknown) => void;
|
|
20
|
+
children: ReactNode;
|
|
21
|
+
}
|
|
22
|
+
declare function StateProvider({ initialState, onStateChange, children, }: StateProviderProps): react_jsx_runtime.JSX.Element;
|
|
23
|
+
declare function useStateStore(): StateContextValue;
|
|
24
|
+
declare function useStateValue<T>(path: string): T | undefined;
|
|
25
|
+
declare function useStateBinding<T>(path: string): [T | undefined, (value: T) => void];
|
|
26
|
+
|
|
27
|
+
interface VisibilityContextValue {
|
|
28
|
+
isVisible: (condition: VisibilityCondition | undefined) => boolean;
|
|
29
|
+
ctx: VisibilityContext;
|
|
30
|
+
}
|
|
31
|
+
interface VisibilityProviderProps {
|
|
32
|
+
children: ReactNode;
|
|
33
|
+
}
|
|
34
|
+
declare function VisibilityProvider({ children }: VisibilityProviderProps): react_jsx_runtime.JSX.Element;
|
|
35
|
+
declare function useVisibility(): VisibilityContextValue;
|
|
36
|
+
declare function useIsVisible(condition: VisibilityCondition | undefined): boolean;
|
|
37
|
+
|
|
38
|
+
interface PendingConfirmation {
|
|
39
|
+
action: ResolvedAction;
|
|
40
|
+
handler: ActionHandler;
|
|
41
|
+
resolve: () => void;
|
|
42
|
+
reject: () => void;
|
|
43
|
+
}
|
|
44
|
+
interface ActionContextValue {
|
|
45
|
+
handlers: Record<string, ActionHandler>;
|
|
46
|
+
loadingActions: Set<string>;
|
|
47
|
+
pendingConfirmation: PendingConfirmation | null;
|
|
48
|
+
execute: (binding: ActionBinding) => Promise<void>;
|
|
49
|
+
confirm: () => void;
|
|
50
|
+
cancel: () => void;
|
|
51
|
+
registerHandler: (name: string, handler: ActionHandler) => void;
|
|
52
|
+
}
|
|
53
|
+
interface ActionProviderProps {
|
|
54
|
+
handlers?: Record<string, ActionHandler>;
|
|
55
|
+
navigate?: (path: string) => void;
|
|
56
|
+
children: ReactNode;
|
|
57
|
+
}
|
|
58
|
+
declare function ActionProvider({ handlers: initialHandlers, navigate, children, }: ActionProviderProps): react_jsx_runtime.JSX.Element;
|
|
59
|
+
declare function useActions(): ActionContextValue;
|
|
60
|
+
declare function useAction(binding: ActionBinding): {
|
|
61
|
+
execute: () => Promise<void>;
|
|
62
|
+
isLoading: boolean;
|
|
63
|
+
};
|
|
64
|
+
interface ConfirmDialogProps {
|
|
65
|
+
confirm: ActionConfirm;
|
|
66
|
+
onConfirm: () => void;
|
|
67
|
+
onCancel: () => void;
|
|
68
|
+
}
|
|
69
|
+
/**
|
|
70
|
+
* No-op confirm dialog for email context. Emails are non-interactive,
|
|
71
|
+
* so confirmations are not rendered.
|
|
72
|
+
*/
|
|
73
|
+
declare function ConfirmDialog(_props: ConfirmDialogProps): null;
|
|
74
|
+
|
|
75
|
+
interface FieldValidationState {
|
|
76
|
+
touched: boolean;
|
|
77
|
+
validated: boolean;
|
|
78
|
+
result: ValidationResult | null;
|
|
79
|
+
}
|
|
80
|
+
interface ValidationContextValue {
|
|
81
|
+
customFunctions: Record<string, ValidationFunction>;
|
|
82
|
+
fieldStates: Record<string, FieldValidationState>;
|
|
83
|
+
validate: (path: string, config: ValidationConfig) => ValidationResult;
|
|
84
|
+
touch: (path: string) => void;
|
|
85
|
+
clear: (path: string) => void;
|
|
86
|
+
validateAll: () => boolean;
|
|
87
|
+
registerField: (path: string, config: ValidationConfig) => void;
|
|
88
|
+
}
|
|
89
|
+
interface ValidationProviderProps {
|
|
90
|
+
customFunctions?: Record<string, ValidationFunction>;
|
|
91
|
+
children: ReactNode;
|
|
92
|
+
}
|
|
93
|
+
declare function ValidationProvider({ customFunctions, children, }: ValidationProviderProps): react_jsx_runtime.JSX.Element;
|
|
94
|
+
declare function useValidation(): ValidationContextValue;
|
|
95
|
+
declare function useFieldValidation(path: string, config?: ValidationConfig): {
|
|
96
|
+
state: FieldValidationState;
|
|
97
|
+
validate: () => ValidationResult;
|
|
98
|
+
touch: () => void;
|
|
99
|
+
clear: () => void;
|
|
100
|
+
errors: string[];
|
|
101
|
+
isValid: boolean;
|
|
102
|
+
};
|
|
103
|
+
|
|
104
|
+
interface RepeatScopeValue {
|
|
105
|
+
item: unknown;
|
|
106
|
+
index: number;
|
|
107
|
+
basePath: string;
|
|
108
|
+
}
|
|
109
|
+
declare function RepeatScopeProvider({ item, index, basePath, children, }: RepeatScopeValue & {
|
|
110
|
+
children: ReactNode;
|
|
111
|
+
}): react_jsx_runtime.JSX.Element;
|
|
112
|
+
declare function useRepeatScope(): RepeatScopeValue | null;
|
|
113
|
+
|
|
114
|
+
export { type ActionContextValue, ActionProvider, type ActionProviderProps, ConfirmDialog, type ConfirmDialogProps, type FieldValidationState, type PendingConfirmation, RepeatScopeProvider, type RepeatScopeValue, type StateContextValue, StateProvider, type StateProviderProps, type ValidationContextValue, ValidationProvider, type ValidationProviderProps, type VisibilityContextValue, VisibilityProvider, type VisibilityProviderProps, useAction, useActions, useFieldValidation, useIsVisible, useRepeatScope, useStateBinding, useStateStore, useStateValue, useValidation, useVisibility };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
export { ReactEmailSchema, ReactEmailSpec, schema } from './server.js';
|
|
2
|
+
import { StateModel, VisibilityCondition, VisibilityContext, ActionHandler, ResolvedAction, ActionBinding, ActionConfirm, ValidationFunction, ValidationResult, ValidationConfig } from '@json-render/core';
|
|
3
|
+
export { Spec, StateModel } from '@json-render/core';
|
|
4
|
+
export { a as ComponentContext, b as ComponentFn, C as Components, S as SetState } from './catalog-types-Dh9gul8V.js';
|
|
5
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
6
|
+
import { ReactNode } from 'react';
|
|
7
|
+
export { a as ComponentMap, f as ComponentRegistry, b as ComponentRenderProps, e as ComponentRenderer, C as CreateRendererProps, D as DefineRegistryResult, J as JSONUIProvider, h as JSONUIProviderProps, j as RenderOptions, R as Renderer, g as RendererProps, c as createRenderer, d as defineRegistry, r as renderToHtml, i as renderToPlainText, s as standardComponents } from './render-DFHuQRW0.js';
|
|
8
|
+
export { StandardComponentDefinitions, StandardComponentProps, standardComponentDefinitions } from './catalog.js';
|
|
9
|
+
import 'zod';
|
|
10
|
+
|
|
11
|
+
interface StateContextValue {
|
|
12
|
+
state: StateModel;
|
|
13
|
+
get: (path: string) => unknown;
|
|
14
|
+
set: (path: string, value: unknown) => void;
|
|
15
|
+
update: (updates: Record<string, unknown>) => void;
|
|
16
|
+
}
|
|
17
|
+
interface StateProviderProps {
|
|
18
|
+
initialState?: StateModel;
|
|
19
|
+
onStateChange?: (path: string, value: unknown) => void;
|
|
20
|
+
children: ReactNode;
|
|
21
|
+
}
|
|
22
|
+
declare function StateProvider({ initialState, onStateChange, children, }: StateProviderProps): react_jsx_runtime.JSX.Element;
|
|
23
|
+
declare function useStateStore(): StateContextValue;
|
|
24
|
+
declare function useStateValue<T>(path: string): T | undefined;
|
|
25
|
+
declare function useStateBinding<T>(path: string): [T | undefined, (value: T) => void];
|
|
26
|
+
|
|
27
|
+
interface VisibilityContextValue {
|
|
28
|
+
isVisible: (condition: VisibilityCondition | undefined) => boolean;
|
|
29
|
+
ctx: VisibilityContext;
|
|
30
|
+
}
|
|
31
|
+
interface VisibilityProviderProps {
|
|
32
|
+
children: ReactNode;
|
|
33
|
+
}
|
|
34
|
+
declare function VisibilityProvider({ children }: VisibilityProviderProps): react_jsx_runtime.JSX.Element;
|
|
35
|
+
declare function useVisibility(): VisibilityContextValue;
|
|
36
|
+
declare function useIsVisible(condition: VisibilityCondition | undefined): boolean;
|
|
37
|
+
|
|
38
|
+
interface PendingConfirmation {
|
|
39
|
+
action: ResolvedAction;
|
|
40
|
+
handler: ActionHandler;
|
|
41
|
+
resolve: () => void;
|
|
42
|
+
reject: () => void;
|
|
43
|
+
}
|
|
44
|
+
interface ActionContextValue {
|
|
45
|
+
handlers: Record<string, ActionHandler>;
|
|
46
|
+
loadingActions: Set<string>;
|
|
47
|
+
pendingConfirmation: PendingConfirmation | null;
|
|
48
|
+
execute: (binding: ActionBinding) => Promise<void>;
|
|
49
|
+
confirm: () => void;
|
|
50
|
+
cancel: () => void;
|
|
51
|
+
registerHandler: (name: string, handler: ActionHandler) => void;
|
|
52
|
+
}
|
|
53
|
+
interface ActionProviderProps {
|
|
54
|
+
handlers?: Record<string, ActionHandler>;
|
|
55
|
+
navigate?: (path: string) => void;
|
|
56
|
+
children: ReactNode;
|
|
57
|
+
}
|
|
58
|
+
declare function ActionProvider({ handlers: initialHandlers, navigate, children, }: ActionProviderProps): react_jsx_runtime.JSX.Element;
|
|
59
|
+
declare function useActions(): ActionContextValue;
|
|
60
|
+
declare function useAction(binding: ActionBinding): {
|
|
61
|
+
execute: () => Promise<void>;
|
|
62
|
+
isLoading: boolean;
|
|
63
|
+
};
|
|
64
|
+
interface ConfirmDialogProps {
|
|
65
|
+
confirm: ActionConfirm;
|
|
66
|
+
onConfirm: () => void;
|
|
67
|
+
onCancel: () => void;
|
|
68
|
+
}
|
|
69
|
+
/**
|
|
70
|
+
* No-op confirm dialog for email context. Emails are non-interactive,
|
|
71
|
+
* so confirmations are not rendered.
|
|
72
|
+
*/
|
|
73
|
+
declare function ConfirmDialog(_props: ConfirmDialogProps): null;
|
|
74
|
+
|
|
75
|
+
interface FieldValidationState {
|
|
76
|
+
touched: boolean;
|
|
77
|
+
validated: boolean;
|
|
78
|
+
result: ValidationResult | null;
|
|
79
|
+
}
|
|
80
|
+
interface ValidationContextValue {
|
|
81
|
+
customFunctions: Record<string, ValidationFunction>;
|
|
82
|
+
fieldStates: Record<string, FieldValidationState>;
|
|
83
|
+
validate: (path: string, config: ValidationConfig) => ValidationResult;
|
|
84
|
+
touch: (path: string) => void;
|
|
85
|
+
clear: (path: string) => void;
|
|
86
|
+
validateAll: () => boolean;
|
|
87
|
+
registerField: (path: string, config: ValidationConfig) => void;
|
|
88
|
+
}
|
|
89
|
+
interface ValidationProviderProps {
|
|
90
|
+
customFunctions?: Record<string, ValidationFunction>;
|
|
91
|
+
children: ReactNode;
|
|
92
|
+
}
|
|
93
|
+
declare function ValidationProvider({ customFunctions, children, }: ValidationProviderProps): react_jsx_runtime.JSX.Element;
|
|
94
|
+
declare function useValidation(): ValidationContextValue;
|
|
95
|
+
declare function useFieldValidation(path: string, config?: ValidationConfig): {
|
|
96
|
+
state: FieldValidationState;
|
|
97
|
+
validate: () => ValidationResult;
|
|
98
|
+
touch: () => void;
|
|
99
|
+
clear: () => void;
|
|
100
|
+
errors: string[];
|
|
101
|
+
isValid: boolean;
|
|
102
|
+
};
|
|
103
|
+
|
|
104
|
+
interface RepeatScopeValue {
|
|
105
|
+
item: unknown;
|
|
106
|
+
index: number;
|
|
107
|
+
basePath: string;
|
|
108
|
+
}
|
|
109
|
+
declare function RepeatScopeProvider({ item, index, basePath, children, }: RepeatScopeValue & {
|
|
110
|
+
children: ReactNode;
|
|
111
|
+
}): react_jsx_runtime.JSX.Element;
|
|
112
|
+
declare function useRepeatScope(): RepeatScopeValue | null;
|
|
113
|
+
|
|
114
|
+
export { type ActionContextValue, ActionProvider, type ActionProviderProps, ConfirmDialog, type ConfirmDialogProps, type FieldValidationState, type PendingConfirmation, RepeatScopeProvider, type RepeatScopeValue, type StateContextValue, StateProvider, type StateProviderProps, type ValidationContextValue, ValidationProvider, type ValidationProviderProps, type VisibilityContextValue, VisibilityProvider, type VisibilityProviderProps, useAction, useActions, useFieldValidation, useIsVisible, useRepeatScope, useStateBinding, useStateStore, useStateValue, useValidation, useVisibility };
|