@pagenflow/email 1.1.12 β†’ 1.1.14

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.
Files changed (3) hide show
  1. package/README.md +112 -0
  2. package/package.json +9 -2
  3. package/repo-header-image.png +0 -0
package/README.md CHANGED
@@ -0,0 +1,112 @@
1
+ ![Builder Introduction](./repo-header-image.png)
2
+
3
+ **The bridge between visual email building and high-performance React code.**
4
+
5
+ `@pagenflow/email` is a collection of high-quality, pre-tested React components designed to build beautiful, responsive emails. Built for 100% compatibility with [React Email](https://react.email/), our package allows you to take designs from the [Pagenflow Visual Builder](https://email.pagenflow.com) and drop them directly into your codebase.
6
+
7
+ ---
8
+
9
+ ## πŸš€ Why Pagenflow?
10
+
11
+ Email development shouldn't feel like it’s stuck in 1999. While `react-email` revolutionized the "code-first" approach, Pagenflow bridges the gap for teams that want both **visual speed** and **developer-grade code**.
12
+
13
+ * **Drag, Drop, and Develop:** Design visually at [email.pagenflow.com](https://email.pagenflow.com) and export clean, semantic React code.
14
+ * **React Email Compatible:** Every component in this package works seamlessly with `@react-email/render` and the React Email preview server.
15
+ * **Prop-Driven Configuration:** Instead of messy inline styles, we use a structured `config` prop to manage all styling and layout logic.
16
+
17
+ ## πŸ“¦ Installation
18
+
19
+ ```bash
20
+ npm install @pagenflow/email
21
+ # or
22
+ yarn add @pagenflow/email
23
+
24
+ ```
25
+
26
+ ## 🧩 Components Reference
27
+
28
+ Pagenflow components use a consistent `config` prop pattern to handle styling and behavior.
29
+
30
+ ### Layout & Structure
31
+
32
+ * **`Html`**: The root wrapper. Accepts a `backgroundColor` prop to set the global email background.
33
+ * **`Head`**: Manages metadata, titles, and critical MSO reset styles for Outlook.
34
+ * **`Body`**: The main content area. Uses a `config` prop for global colors, font sizes, and background images.
35
+ * **`Section`**: A structural block used to group content vertically.
36
+ * **`Container`**: A centered wrapper with sophisticated layout controls including `widthType`, `gap`, and child width distributions (`equals`, `ratio`, `manual`).
37
+ * **`Row` & `Column**`: Our powerful grid system. `Row` handles horizontal spacing and alignment, while `Column` manages internal padding and vertical alignment through their respective `config` objects.
38
+
39
+ ### Content & UI
40
+
41
+ * **`Heading`**: Semantic tags (`h1`-`h6`) with a `config` prop for fine-tuning padding, typography, and text-alignment.
42
+ * **`Text`**: The workhorse for paragraphs. Supports line-height, letter-spacing, and custom typography through its `config`.
43
+ * **`Image`**: Responsive images with `config` support for `maxWidth`, `borderRadius`, and clickable `href` links.
44
+ * **`Button`**: High-conversion CTA buttons with built-in VML support for Outlook. Configurable `backgroundColor`, `borderRadius`, and `padding`.
45
+ * **`Divider`**: A customizable horizontal rule with `config` for height, color, and vertical margins.
46
+ * **`Spacer`**: Fine-tuned vertical control to create exactly the right amount of breathing room.
47
+
48
+ ## πŸ›  Usage Example
49
+
50
+ Notice that all styling and layout properties are passed through the **`config`** prop.
51
+
52
+ ```tsx
53
+ import {
54
+ Html, Head, Body, Container, Section,
55
+ Heading, Button, Image
56
+ } from '@pagenflow/email';
57
+
58
+ export default function WelcomeEmail() {
59
+ return (
60
+ <Html backgroundColor="#f6f9fc">
61
+ <Head title="Welcome to Pagenflow" />
62
+ <Body config={{ color: '#333333', fontSize: '16px' }}>
63
+ <Container config={{
64
+ widthType: 'fixed',
65
+ width: '600px',
66
+ childrenConstraints: { widthDistributionType: 'equals' }
67
+ }}>
68
+ <Section>
69
+ <Image config={{
70
+ src: "https://example.com/logo.png",
71
+ alt: "Pagenflow Logo",
72
+ width: "150px",
73
+ padding: "20px 0"
74
+ }} />
75
+
76
+ <Heading config={{
77
+ level: 'h1',
78
+ textAlign: 'center',
79
+ text: 'Welcome aboard!'
80
+ }} />
81
+
82
+ <Button config={{
83
+ href: "https://email.pagenflow.com",
84
+ backgroundColor: "#007bff",
85
+ color: "#ffffff",
86
+ padding: "12px 24px",
87
+ borderRadius: "4px"
88
+ }}>
89
+ Get Started
90
+ </Button>
91
+ </Section>
92
+ </Container>
93
+ </Body>
94
+ </Html>
95
+ );
96
+ }
97
+
98
+ ```
99
+
100
+ ## 🎨 Visual Builder
101
+
102
+ Stop guessing how your padding looks. Use our **Visual Email Editor** to build your templates:
103
+
104
+ πŸ‘‰ **[Launch the Pagenflow Builder](https://email.pagenflow.com)**
105
+
106
+ 1. Drag components onto the canvas.
107
+ 2. Customize styles with the sidebar.
108
+ 3. **Copy the React code** and paste it into your project using this package.
109
+
110
+ ## πŸ“„ License
111
+
112
+ MIT Β© [Pagenflow](https://email.pagenflow.com)
package/package.json CHANGED
@@ -1,13 +1,20 @@
1
1
  {
2
2
  "name": "@pagenflow/email",
3
- "version": "1.1.12",
3
+ "version": "1.1.14",
4
4
  "description": "Free Email Compatible Components",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.esm.js",
7
7
  "types": "dist/index.d.ts",
8
8
  "files": [
9
- "dist"
9
+ "dist",
10
+ "README.md",
11
+ "repo-header-image.png"
10
12
  ],
13
+ "homepage": "https://email.pagenflow.com",
14
+ "repository": {
15
+ "type": "git",
16
+ "url": "https://github.com/pagenflow/email.git"
17
+ },
11
18
  "scripts": {
12
19
  "build": "rollup -c",
13
20
  "watch": "rollup -c -w",
package/repo-header-image.png ADDED
Binary file