@react-email/row 0.0.5 → 0.0.7
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/dist/index.d.mts +9 -0
- package/dist/index.d.ts +2 -2
- package/dist/index.js +52 -28
- package/dist/index.mjs +55 -22
- package/package.json +31 -23
- package/readme.md +10 -6
package/dist/index.d.mts
ADDED
package/dist/index.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
type RootProps = React.ComponentPropsWithoutRef<"table">;
|
|
4
4
|
interface RowProps extends RootProps {
|
|
5
5
|
children: React.ReactNode;
|
|
6
6
|
}
|
|
7
|
-
declare const Row: React.
|
|
7
|
+
declare const Row: React.FC<Readonly<RowProps>>;
|
|
8
8
|
|
|
9
9
|
export { Row, RowProps };
|
package/dist/index.js
CHANGED
|
@@ -1,10 +1,37 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
2
|
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
4
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
5
6
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var
|
|
7
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
7
8
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
10
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
11
|
+
var __spreadValues = (a, b) => {
|
|
12
|
+
for (var prop in b || (b = {}))
|
|
13
|
+
if (__hasOwnProp.call(b, prop))
|
|
14
|
+
__defNormalProp(a, prop, b[prop]);
|
|
15
|
+
if (__getOwnPropSymbols)
|
|
16
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
17
|
+
if (__propIsEnum.call(b, prop))
|
|
18
|
+
__defNormalProp(a, prop, b[prop]);
|
|
19
|
+
}
|
|
20
|
+
return a;
|
|
21
|
+
};
|
|
22
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
23
|
+
var __objRest = (source, exclude) => {
|
|
24
|
+
var target = {};
|
|
25
|
+
for (var prop in source)
|
|
26
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
27
|
+
target[prop] = source[prop];
|
|
28
|
+
if (source != null && __getOwnPropSymbols)
|
|
29
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
30
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
31
|
+
target[prop] = source[prop];
|
|
32
|
+
}
|
|
33
|
+
return target;
|
|
34
|
+
};
|
|
8
35
|
var __export = (target, all) => {
|
|
9
36
|
for (var name in all)
|
|
10
37
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -17,10 +44,6 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
44
|
}
|
|
18
45
|
return to;
|
|
19
46
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
-
mod
|
|
23
|
-
));
|
|
24
47
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
25
48
|
|
|
26
49
|
// src/index.ts
|
|
@@ -31,29 +54,30 @@ __export(src_exports, {
|
|
|
31
54
|
module.exports = __toCommonJS(src_exports);
|
|
32
55
|
|
|
33
56
|
// src/row.tsx
|
|
34
|
-
var React = __toESM(require("react"));
|
|
35
57
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
-
var Row =
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
)
|
|
56
|
-
|
|
58
|
+
var Row = (_a) => {
|
|
59
|
+
var _b = _a, {
|
|
60
|
+
children,
|
|
61
|
+
style
|
|
62
|
+
} = _b, props = __objRest(_b, [
|
|
63
|
+
"children",
|
|
64
|
+
"style"
|
|
65
|
+
]);
|
|
66
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
67
|
+
"table",
|
|
68
|
+
__spreadProps(__spreadValues({
|
|
69
|
+
align: "center",
|
|
70
|
+
width: "100%"
|
|
71
|
+
}, props), {
|
|
72
|
+
border: 0,
|
|
73
|
+
cellPadding: "0",
|
|
74
|
+
cellSpacing: "0",
|
|
75
|
+
role: "presentation",
|
|
76
|
+
style,
|
|
77
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { style: { width: "100%" }, children }) })
|
|
78
|
+
})
|
|
79
|
+
);
|
|
80
|
+
};
|
|
57
81
|
// Annotate the CommonJS export names for ESM import in node:
|
|
58
82
|
0 && (module.exports = {
|
|
59
83
|
Row
|
package/dist/index.mjs
CHANGED
|
@@ -1,27 +1,60 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
var __objRest = (source, exclude) => {
|
|
21
|
+
var target = {};
|
|
22
|
+
for (var prop in source)
|
|
23
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
+
target[prop] = source[prop];
|
|
25
|
+
if (source != null && __getOwnPropSymbols)
|
|
26
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
+
target[prop] = source[prop];
|
|
29
|
+
}
|
|
30
|
+
return target;
|
|
31
|
+
};
|
|
32
|
+
|
|
1
33
|
// src/row.tsx
|
|
2
|
-
import * as React from "react";
|
|
3
34
|
import { jsx } from "react/jsx-runtime";
|
|
4
|
-
var Row =
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
)
|
|
24
|
-
|
|
35
|
+
var Row = (_a) => {
|
|
36
|
+
var _b = _a, {
|
|
37
|
+
children,
|
|
38
|
+
style
|
|
39
|
+
} = _b, props = __objRest(_b, [
|
|
40
|
+
"children",
|
|
41
|
+
"style"
|
|
42
|
+
]);
|
|
43
|
+
return /* @__PURE__ */ jsx(
|
|
44
|
+
"table",
|
|
45
|
+
__spreadProps(__spreadValues({
|
|
46
|
+
align: "center",
|
|
47
|
+
width: "100%"
|
|
48
|
+
}, props), {
|
|
49
|
+
border: 0,
|
|
50
|
+
cellPadding: "0",
|
|
51
|
+
cellSpacing: "0",
|
|
52
|
+
role: "presentation",
|
|
53
|
+
style,
|
|
54
|
+
children: /* @__PURE__ */ jsx("tbody", { style: { width: "100%" }, children: /* @__PURE__ */ jsx("tr", { style: { width: "100%" }, children }) })
|
|
55
|
+
})
|
|
56
|
+
);
|
|
57
|
+
};
|
|
25
58
|
export {
|
|
26
59
|
Row
|
|
27
60
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-email/row",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.7",
|
|
4
4
|
"description": "A React row component",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -9,16 +9,19 @@
|
|
|
9
9
|
"files": [
|
|
10
10
|
"dist/**"
|
|
11
11
|
],
|
|
12
|
-
"
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
12
|
+
"exports": {
|
|
13
|
+
".": {
|
|
14
|
+
"import": {
|
|
15
|
+
"types": "./dist/index.d.mts",
|
|
16
|
+
"default": "./dist/index.mjs"
|
|
17
|
+
},
|
|
18
|
+
"require": {
|
|
19
|
+
"types": "./dist/index.d.ts",
|
|
20
|
+
"default": "./dist/index.js"
|
|
21
|
+
}
|
|
22
|
+
}
|
|
21
23
|
},
|
|
24
|
+
"license": "MIT",
|
|
22
25
|
"repository": {
|
|
23
26
|
"type": "git",
|
|
24
27
|
"url": "https://github.com/resendlabs/react-email.git",
|
|
@@ -29,22 +32,27 @@
|
|
|
29
32
|
"email"
|
|
30
33
|
],
|
|
31
34
|
"engines": {
|
|
32
|
-
"node": ">=
|
|
35
|
+
"node": ">=18.0.0"
|
|
36
|
+
},
|
|
37
|
+
"peerDependencies": {
|
|
38
|
+
"react": "18.2.0"
|
|
33
39
|
},
|
|
34
40
|
"devDependencies": {
|
|
35
|
-
"@babel/preset-react": "7.
|
|
36
|
-
"
|
|
37
|
-
"@
|
|
38
|
-
"
|
|
39
|
-
"eslint": "
|
|
40
|
-
"jest": "28.1.3",
|
|
41
|
-
"prettier": "2.8.4",
|
|
42
|
-
"react": "18.2.0",
|
|
43
|
-
"ts-jest": "28.0.8",
|
|
44
|
-
"tsup": "6.2.3",
|
|
45
|
-
"typescript": "4.8.3"
|
|
41
|
+
"@babel/preset-react": "7.22.5",
|
|
42
|
+
"typescript": "5.1.6",
|
|
43
|
+
"@react-email/render": "0.0.10",
|
|
44
|
+
"tsconfig": "0.0.0",
|
|
45
|
+
"eslint-config-custom": "0.0.0"
|
|
46
46
|
},
|
|
47
47
|
"publishConfig": {
|
|
48
48
|
"access": "public"
|
|
49
|
+
},
|
|
50
|
+
"scripts": {
|
|
51
|
+
"build": "tsup src/index.ts --format esm,cjs --dts --external react",
|
|
52
|
+
"clean": "rm -rf dist",
|
|
53
|
+
"dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
|
|
54
|
+
"lint": "eslint .",
|
|
55
|
+
"test:watch": "vitest",
|
|
56
|
+
"test": "vitest run"
|
|
49
57
|
}
|
|
50
|
-
}
|
|
58
|
+
}
|
package/readme.md
CHANGED
|
@@ -32,19 +32,23 @@ npm install @react-email/row -E
|
|
|
32
32
|
Add the component to your email template. Include styles where needed.
|
|
33
33
|
|
|
34
34
|
```jsx
|
|
35
|
-
import {
|
|
35
|
+
import { Section } from "@react-email/section";
|
|
36
36
|
import { Row } from "@react-email/row";
|
|
37
|
+
import { Column } from "@react-email/column";
|
|
37
38
|
|
|
38
39
|
const Email = () => {
|
|
39
40
|
return (
|
|
40
|
-
|
|
41
|
-
...
|
|
41
|
+
<Section>
|
|
42
42
|
<Row>
|
|
43
43
|
<Column>A</Column>
|
|
44
|
+
</Row>
|
|
45
|
+
<Row>
|
|
44
46
|
<Column>B</Column>
|
|
45
47
|
</Row>
|
|
46
|
-
|
|
47
|
-
|
|
48
|
+
<Row>
|
|
49
|
+
<Column>C</Column>
|
|
50
|
+
</Row>
|
|
51
|
+
</Section>
|
|
48
52
|
);
|
|
49
53
|
};
|
|
50
54
|
```
|
|
@@ -55,7 +59,7 @@ This component was tested using the most popular email clients.
|
|
|
55
59
|
|
|
56
60
|
| <img src="https://react.email/static/icons/gmail.svg" width="48px" height="48px" alt="Gmail logo"> | <img src="https://react.email/static/icons/apple-mail.svg" width="48px" height="48px" alt="Apple Mail"> | <img src="https://react.email/static/icons/outlook.svg" width="48px" height="48px" alt="Outlook logo"> | <img src="https://react.email/static/icons/yahoo-mail.svg" width="48px" height="48px" alt="Yahoo! Mail logo"> | <img src="https://react.email/static/icons/hey.svg" width="48px" height="48px" alt="HEY logo"> | <img src="https://react.email/static/icons/superhuman.svg" width="48px" height="48px" alt="Superhuman logo"> |
|
|
57
61
|
| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
|
|
58
|
-
| Gmail ✔
|
|
62
|
+
| Gmail ✔ | Apple Mail ✔ | Outlook ✔ | Yahoo! Mail ✔ | HEY ✔ | Superhuman ✔ |
|
|
59
63
|
|
|
60
64
|
## License
|
|
61
65
|
|