From 43eedb8bbaf29657907024f54e56e0f67624527b Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 9 Dec 2024 14:42:13 -0300 Subject: [PATCH 01/12] chore(deps): bump next from 14.2.3 to 15.0.4 (#1810) Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> From 8e1a7931eeb45ca147a539b46e40230a670af3dc Mon Sep 17 00:00:00 2001 From: Bu Kinoshita Date: Wed, 18 Dec 2024 22:40:21 +0000 Subject: [PATCH 02/12] chore(all): Use `biome` --- .changeset/config.json | 4 +- .prettierignore | 1 - .prettierrc | 1 - biome.json | 34 ++++++++++++++++ package.json | 6 +-- pnpm-lock.yaml | 91 ++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 129 insertions(+), 8 deletions(-) delete mode 100644 .prettierignore delete mode 100644 .prettierrc create mode 100644 biome.json diff --git a/.changeset/config.json b/.changeset/config.json index 9f58ed45f8..46fa368d8c 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -2,9 +2,7 @@ "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json", "changelog": "@changesets/cli/changelog", "commit": false, - "fixed": [ - ["react-email-starter", "create-email"] - ], + "fixed": [["react-email-starter", "create-email"]], "linked": [], "access": "public", "baseBranch": "main", diff --git a/.prettierignore b/.prettierignore deleted file mode 100644 index 849ddff3b7..0000000000 --- a/.prettierignore +++ /dev/null @@ -1 +0,0 @@ -dist/ diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index 0967ef424b..0000000000 --- a/.prettierrc +++ /dev/null @@ -1 +0,0 @@ -{} diff --git a/biome.json b/biome.json new file mode 100644 index 0000000000..c97483d2a0 --- /dev/null +++ b/biome.json @@ -0,0 +1,34 @@ +{ + "$schema": "https://biomejs.dev/schemas/1.7.1/schema.json", + "organizeImports": { + "enabled": true + }, + "formatter": { + "indentStyle": "space", + "indentWidth": 2, + "lineWidth": 80 + }, + "javascript": { + "formatter": { + "quoteStyle": "single" + } + }, + "linter": { + "enabled": true, + "rules": { + "recommended": true + } + }, + "files": { + "ignore": [ + "dist", + "pnpm-lock.yaml", + ".next", + "public", + "./**/.react-email/**/*", + "./**/node_modules/**/*", + "./**/*.d.ts", + "**/**/prism.ts" + ] + } +} diff --git a/package.json b/package.json index df6edd3231..9f8b17e19d 100644 --- a/package.json +++ b/package.json @@ -5,17 +5,17 @@ "scripts": { "build": "turbo run build --filter=!react-email-starter", "dev": "turbo run dev --filter=!react-email-starter --parallel --concurrency 25", - "format": "prettier --write \"**/*.{ts,tsx,md}\"", - "format:check": "prettier --check \"**/*.{ts,tsx,md}\"", "release": "turbo run build --filter=./packages/* --filter=!react-email-starter && pnpm changeset publish", "canary:enter": "changeset pre enter canary", "canary:exit": "changeset pre exit", "version": "changeset version && pnpm install --no-frozen-lockfile", - "lint": "turbo run lint", + "lint": "biome check", + "lint:apply": "biome check --write .", "test": "turbo run test", "test:watch": "turbo run test:watch" }, "devDependencies": { + "@biomejs/biome": "1.9.4", "@changesets/cli": "2.27.11", "@types/node": "22.10.2", "@types/react": "19.0.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 64a2441d88..dda7d3e4a3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ importers: .: devDependencies: + '@biomejs/biome': + specifier: 1.9.4 + version: 1.9.4 '@changesets/cli': specifier: 2.27.11 version: 2.27.11 @@ -1719,6 +1722,59 @@ packages: resolution: {integrity: sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==} engines: {node: '>=6.9.0'} + '@biomejs/biome@1.9.4': + resolution: {integrity: sha512-1rkd7G70+o9KkTn5KLmDYXihGoTaIGO9PIIN2ZB7UJxFrWw04CZHPYiMRjYsaDvVV7hP1dYNRLxSANLaBFGpog==} + engines: {node: '>=14.21.3'} + hasBin: true + + '@biomejs/cli-darwin-arm64@1.9.4': + resolution: {integrity: sha512-bFBsPWrNvkdKrNCYeAp+xo2HecOGPAy9WyNyB/jKnnedgzl4W4Hb9ZMzYNbf8dMCGmUdSavlYHiR01QaYR58cw==} + engines: {node: '>=14.21.3'} + cpu: [arm64] + os: [darwin] + + '@biomejs/cli-darwin-x64@1.9.4': + resolution: {integrity: sha512-ngYBh/+bEedqkSevPVhLP4QfVPCpb+4BBe2p7Xs32dBgs7rh9nY2AIYUL6BgLw1JVXV8GlpKmb/hNiuIxfPfZg==} + engines: {node: '>=14.21.3'} + cpu: [x64] + os: [darwin] + + '@biomejs/cli-linux-arm64-musl@1.9.4': + resolution: {integrity: sha512-v665Ct9WCRjGa8+kTr0CzApU0+XXtRgwmzIf1SeKSGAv+2scAlW6JR5PMFo6FzqqZ64Po79cKODKf3/AAmECqA==} + engines: {node: '>=14.21.3'} + cpu: [arm64] + os: [linux] + + '@biomejs/cli-linux-arm64@1.9.4': + resolution: {integrity: sha512-fJIW0+LYujdjUgJJuwesP4EjIBl/N/TcOX3IvIHJQNsAqvV2CHIogsmA94BPG6jZATS4Hi+xv4SkBBQSt1N4/g==} + engines: {node: '>=14.21.3'} + cpu: [arm64] + os: [linux] + + '@biomejs/cli-linux-x64-musl@1.9.4': + resolution: {integrity: sha512-gEhi/jSBhZ2m6wjV530Yy8+fNqG8PAinM3oV7CyO+6c3CEh16Eizm21uHVsyVBEB6RIM8JHIl6AGYCv6Q6Q9Tg==} + engines: {node: '>=14.21.3'} + cpu: [x64] + os: [linux] + + '@biomejs/cli-linux-x64@1.9.4': + resolution: {integrity: sha512-lRCJv/Vi3Vlwmbd6K+oQ0KhLHMAysN8lXoCI7XeHlxaajk06u7G+UsFSO01NAs5iYuWKmVZjmiOzJ0OJmGsMwg==} + engines: {node: '>=14.21.3'} + cpu: [x64] + os: [linux] + + '@biomejs/cli-win32-arm64@1.9.4': + resolution: {integrity: sha512-tlbhLk+WXZmgwoIKwHIHEBZUwxml7bRJgk0X2sPyNR3S93cdRq6XulAZRQJ17FYGGzWne0fgrXBKpl7l4M87Hg==} + engines: {node: '>=14.21.3'} + cpu: [arm64] + os: [win32] + + '@biomejs/cli-win32-x64@1.9.4': + resolution: {integrity: sha512-8Y5wMhVIPaWe6jw2H+KlEm4wP/f7EW3810ZLmDlrEEy5KvBsb9ECEfu/kMWD484ijfQ8+nIi0giMgu9g1UAuuA==} + engines: {node: '>=14.21.3'} + cpu: [x64] + os: [win32] + '@changesets/apply-release-plan@7.0.7': resolution: {integrity: sha512-qnPOcmmmnD0MfMg9DjU1/onORFyRpDXkMMl2IJg9mECY6RnxL3wN0TCCc92b2sXt1jt8DgjAUUsZYGUGTdYIXA==} @@ -8989,6 +9045,41 @@ snapshots: '@babel/helper-string-parser': 7.25.9 '@babel/helper-validator-identifier': 7.25.9 + '@biomejs/biome@1.9.4': + optionalDependencies: + '@biomejs/cli-darwin-arm64': 1.9.4 + '@biomejs/cli-darwin-x64': 1.9.4 + '@biomejs/cli-linux-arm64': 1.9.4 + '@biomejs/cli-linux-arm64-musl': 1.9.4 + '@biomejs/cli-linux-x64': 1.9.4 + '@biomejs/cli-linux-x64-musl': 1.9.4 + '@biomejs/cli-win32-arm64': 1.9.4 + '@biomejs/cli-win32-x64': 1.9.4 + + '@biomejs/cli-darwin-arm64@1.9.4': + optional: true + + '@biomejs/cli-darwin-x64@1.9.4': + optional: true + + '@biomejs/cli-linux-arm64-musl@1.9.4': + optional: true + + '@biomejs/cli-linux-arm64@1.9.4': + optional: true + + '@biomejs/cli-linux-x64-musl@1.9.4': + optional: true + + '@biomejs/cli-linux-x64@1.9.4': + optional: true + + '@biomejs/cli-win32-arm64@1.9.4': + optional: true + + '@biomejs/cli-win32-x64@1.9.4': + optional: true + '@changesets/apply-release-plan@7.0.7': dependencies: '@changesets/config': 3.0.5 From 30ed6b98649ccb23f38c26b5cd2b96d391a26812 Mon Sep 17 00:00:00 2001 From: Bu Kinoshita Date: Thu, 19 Dec 2024 12:38:17 +0000 Subject: [PATCH 03/12] fix: Minor tweak --- apps/web/src/app/not-found.tsx | 4 +- .../src/benchmark-0.0.12-vs-local-version.ts | 12 +- biome.json | 106 +++++++++++++++++- package.json | 2 +- 4 files changed, 113 insertions(+), 11 deletions(-) diff --git a/apps/web/src/app/not-found.tsx b/apps/web/src/app/not-found.tsx index da60431134..3b82ebcb9e 100644 --- a/apps/web/src/app/not-found.tsx +++ b/apps/web/src/app/not-found.tsx @@ -1,9 +1,9 @@ import PageTransition from "@/components/page-transition"; export const metadata = { - title: "404 Not found", + title: '404 Not found', alternates: { - canonical: "/not-found", + canonical: '/not-found', }, }; diff --git a/benchmarks/tailwind-component/src/benchmark-0.0.12-vs-local-version.ts b/benchmarks/tailwind-component/src/benchmark-0.0.12-vs-local-version.ts index 32f6e31860..6760b5839f 100644 --- a/benchmarks/tailwind-component/src/benchmark-0.0.12-vs-local-version.ts +++ b/benchmarks/tailwind-component/src/benchmark-0.0.12-vs-local-version.ts @@ -1,9 +1,9 @@ -import { render } from "@react-email/render"; -import { writeFileSync } from "node:fs"; -import { Bench } from "tinybench"; -import EmailWithTailwind from "./emails/with-tailwind.js"; -import { Tailwind as LocalTailwind } from "@react-email/tailwind"; -import { Tailwind as VersionTwelveTailwind } from "tailwind-0.0.12"; +import { writeFileSync } from 'node:fs'; +import { render } from '@react-email/render'; +import { Tailwind as LocalTailwind } from '@react-email/tailwind'; +import { Tailwind as VersionTwelveTailwind } from 'tailwind-0.0.12'; +import { Bench } from 'tinybench'; +import EmailWithTailwind from './emails/with-tailwind.js'; const main = async () => { const bench = new Bench({ diff --git a/biome.json b/biome.json index c97483d2a0..1844057ee3 100644 --- a/biome.json +++ b/biome.json @@ -16,7 +16,109 @@ "linter": { "enabled": true, "rules": { - "recommended": true + "recommended": true, + "a11y": { + "noSvgWithoutTitle": "off", + "noAutofocus": "off" + }, + "suspicious": { + "noArrayIndexKey": "off", + "noExplicitAny": "off", + "noAssignInExpressions": "off", + "noGlobalIsNan": "off" + }, + "correctness": { + "useExhaustiveDependencies": "off", + "useJsxKeyInIterable": "off", + "noChildrenProp": "off", + "noConstantCondition": "off", + "noConstAssign": "off", + "noConstructorReturn": "off", + "noEmptyCharacterClassInRegex": "off", + "noEmptyPattern": "off", + "noGlobalObjectCalls": "off", + "noInnerDeclarations": "off", + "noInvalidConstructorSuper": "off", + "noInvalidNewBuiltin": "off", + "noInvalidUseBeforeDeclaration": "off", + "noNewSymbol": "off", + "noNonoctalDecimalEscape": "off", + "noPrecisionLoss": "off", + "noRenderReturnValue": "off", + "noSelfAssign": "off", + "noSetterReturn": "off", + "noStringCaseMismatch": "off", + "noSwitchDeclarations": "off", + "noUndeclaredVariables": "off", + "noUnnecessaryContinue": "off", + "noUnreachable": "off", + "noUnreachableSuper": "off", + "noUnsafeFinally": "off", + "noUnsafeOptionalChaining": "off", + "noUnusedImports": "off", + "noUnusedLabels": "off", + "noUnusedPrivateClassMembers": "off", + "noUnusedVariables": "off", + "noVoidElementsWithChildren": "off", + "noVoidTypeReturn": "off", + "useHookAtTopLevel": "off", + "useIsNan": "off", + "useValidForDirection": "off", + "useYield": "off" + }, + "complexity": { + "noUselessFragments": "off", + "noForEach": "off", + "useArrowFunction": "off", + "useOptionalChain": "off" + }, + "style": { + "noUselessElse": "off", + "noNonNullAssertion": "off", + "useConst": "off", + "useNodejsImportProtocol": "off", + "useSelfClosingElements": "off", + "noArguments": "off", + "noCommaOperator": "off", + "noDefaultExport": "off", + "noImplicitBoolean": "off", + "noInferrableTypes": "off", + "noNamespace": "off", + "noNamespaceImport": "off", + "noNegationElse": "off", + "noParameterAssign": "off", + "noParameterProperties": "off", + "noRestrictedGlobals": "off", + "noShoutyConstants": "off", + "noUnusedTemplateLiteral": "off", + "noVar": "off", + "useAsConstAssertion": "off", + "useBlockStatements": "off", + "useCollapsedElseIf": "off", + "useConsistentArrayType": "off", + "useDefaultParameterLast": "off", + "useEnumInitializers": "off", + "useExponentiationOperator": "off", + "useExportType": "off", + "useFilenamingConvention": "off", + "useForOf": "off", + "useFragmentSyntax": "off", + "useLiteralEnumMembers": "off", + "useNamingConvention": "off", + "useNodeAssertStrict": "off", + "useNumberNamespace": "off", + "useNumericLiterals": "off", + "useShorthandArrayType": "off", + "useSingleVarDeclarator": "off", + "useTemplate": "off" + }, + "security": { + "noDangerouslySetInnerHtml": "off" + }, + "performance": { + "noAccumulatingSpread": "off", + "noDelete": "off" + } } }, "files": { @@ -28,7 +130,7 @@ "./**/.react-email/**/*", "./**/node_modules/**/*", "./**/*.d.ts", - "**/**/prism.ts" + "./**/**/prism.ts" ] } } diff --git a/package.json b/package.json index 9f8b17e19d..322c3f6fc3 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "canary:exit": "changeset pre exit", "version": "changeset version && pnpm install --no-frozen-lockfile", "lint": "biome check", - "lint:apply": "biome check --write .", + "lint:fix": "biome check --write .", "test": "turbo run test", "test:watch": "turbo run test:watch" }, From 2e73f2b743a3c4780ad3cd44857fc2a96924ebfc Mon Sep 17 00:00:00 2001 From: Bu Kinoshita Date: Thu, 19 Dec 2024 12:46:19 +0000 Subject: [PATCH 04/12] fix: Minor tweak --- biome.json | 85 ++----------------- packages/button/src/utils/parse-padding.ts | 3 +- packages/button/src/utils/px-to-pt.ts | 2 +- packages/code-block/src/code-block.tsx | 3 +- packages/create-email/src/tree.js | 3 +- packages/heading/src/utils/spaces.ts | 2 +- .../src/actions/get-email-path-from-slug.ts | 9 +- .../hot-reloading/create-dependency-graph.ts | 5 +- 8 files changed, 21 insertions(+), 91 deletions(-) diff --git a/biome.json b/biome.json index 1844057ee3..d091abe9ea 100644 --- a/biome.json +++ b/biome.json @@ -24,93 +24,19 @@ "suspicious": { "noArrayIndexKey": "off", "noExplicitAny": "off", - "noAssignInExpressions": "off", - "noGlobalIsNan": "off" + "noAssignInExpressions": "off" }, "correctness": { "useExhaustiveDependencies": "off", "useJsxKeyInIterable": "off", - "noChildrenProp": "off", - "noConstantCondition": "off", - "noConstAssign": "off", - "noConstructorReturn": "off", - "noEmptyCharacterClassInRegex": "off", - "noEmptyPattern": "off", - "noGlobalObjectCalls": "off", - "noInnerDeclarations": "off", - "noInvalidConstructorSuper": "off", - "noInvalidNewBuiltin": "off", - "noInvalidUseBeforeDeclaration": "off", - "noNewSymbol": "off", - "noNonoctalDecimalEscape": "off", - "noPrecisionLoss": "off", - "noRenderReturnValue": "off", - "noSelfAssign": "off", - "noSetterReturn": "off", - "noStringCaseMismatch": "off", - "noSwitchDeclarations": "off", - "noUndeclaredVariables": "off", - "noUnnecessaryContinue": "off", - "noUnreachable": "off", - "noUnreachableSuper": "off", - "noUnsafeFinally": "off", - "noUnsafeOptionalChaining": "off", - "noUnusedImports": "off", - "noUnusedLabels": "off", - "noUnusedPrivateClassMembers": "off", - "noUnusedVariables": "off", - "noVoidElementsWithChildren": "off", - "noVoidTypeReturn": "off", - "useHookAtTopLevel": "off", - "useIsNan": "off", - "useValidForDirection": "off", - "useYield": "off" + "noChildrenProp": "off" }, "complexity": { "noUselessFragments": "off", - "noForEach": "off", - "useArrowFunction": "off", - "useOptionalChain": "off" + "noForEach": "off" }, "style": { - "noUselessElse": "off", - "noNonNullAssertion": "off", - "useConst": "off", - "useNodejsImportProtocol": "off", - "useSelfClosingElements": "off", - "noArguments": "off", - "noCommaOperator": "off", - "noDefaultExport": "off", - "noImplicitBoolean": "off", - "noInferrableTypes": "off", - "noNamespace": "off", - "noNamespaceImport": "off", - "noNegationElse": "off", - "noParameterAssign": "off", - "noParameterProperties": "off", - "noRestrictedGlobals": "off", - "noShoutyConstants": "off", - "noUnusedTemplateLiteral": "off", - "noVar": "off", - "useAsConstAssertion": "off", - "useBlockStatements": "off", - "useCollapsedElseIf": "off", - "useConsistentArrayType": "off", - "useDefaultParameterLast": "off", - "useEnumInitializers": "off", - "useExponentiationOperator": "off", - "useExportType": "off", - "useFilenamingConvention": "off", - "useForOf": "off", - "useFragmentSyntax": "off", - "useLiteralEnumMembers": "off", - "useNamingConvention": "off", - "useNodeAssertStrict": "off", - "useNumberNamespace": "off", - "useNumericLiterals": "off", - "useShorthandArrayType": "off", - "useSingleVarDeclarator": "off", - "useTemplate": "off" + "noNonNullAssertion": "off" }, "security": { "noDangerouslySetInnerHtml": "off" @@ -130,7 +56,8 @@ "./**/.react-email/**/*", "./**/node_modules/**/*", "./**/*.d.ts", - "./**/**/prism.ts" + "./**/**/prism.ts", + ".turbo" ] } } diff --git a/packages/button/src/utils/parse-padding.ts b/packages/button/src/utils/parse-padding.ts index 5c3bb0e14f..7d47c77824 100644 --- a/packages/button/src/utils/parse-padding.ts +++ b/packages/button/src/utils/parse-padding.ts @@ -42,9 +42,8 @@ export function convertToPx(value: PaddingType) { default: return numValue; } - } else { - return 0; } + return 0; } /** diff --git a/packages/button/src/utils/px-to-pt.ts b/packages/button/src/utils/px-to-pt.ts index 30b602eb54..df8dbfb9bd 100644 --- a/packages/button/src/utils/px-to-pt.ts +++ b/packages/button/src/utils/px-to-pt.ts @@ -1,2 +1,2 @@ export const pxToPt = (px: number): number | null => - typeof px === "number" && !isNaN(Number(px)) ? (px * 3) / 4 : null; + typeof px === 'number' && !Number.isNaN(Number(px)) ? (px * 3) / 4 : null; diff --git a/packages/code-block/src/code-block.tsx b/packages/code-block/src/code-block.tsx index c559a99e03..8bf82b41df 100644 --- a/packages/code-block/src/code-block.tsx +++ b/packages/code-block/src/code-block.tsx @@ -53,7 +53,8 @@ const CodeBlockLine = ({ ); - } else if (typeof token.content === "string") { + } + if (typeof token.content === 'string') { return {token.content}; } return ( diff --git a/packages/create-email/src/tree.js b/packages/create-email/src/tree.js index 246e2c1284..548fa43fbb 100644 --- a/packages/create-email/src/tree.js +++ b/packages/create-email/src/tree.js @@ -30,7 +30,8 @@ const getTreeLines = async ( // orders directories before files if (a.isDirectory() && b.isFile()) { return -1; - } else if (a.isFile() && b.isDirectory()) { + } + if (a.isFile() && b.isDirectory()) { return 1; } diff --git a/packages/heading/src/utils/spaces.ts b/packages/heading/src/utils/spaces.ts index 43bfc8b5ab..ab1e6be556 100644 --- a/packages/heading/src/utils/spaces.ts +++ b/packages/heading/src/utils/spaces.ts @@ -40,7 +40,7 @@ export const withSpace = ( ) => { return properties.reduce((styles, property) => { // Check to ensure string value is a valid number - if (!isNaN(Number.parseFloat(value as string))) { + if (!Number.isNaN(Number.parseFloat(value as string))) { return { ...styles, [property as keyof MarginCSSProperty]: `${value}px` }; } return styles; diff --git a/packages/react-email/src/actions/get-email-path-from-slug.ts b/packages/react-email/src/actions/get-email-path-from-slug.ts index 190cab3879..27f15bd3fe 100644 --- a/packages/react-email/src/actions/get-email-path-from-slug.ts +++ b/packages/react-email/src/actions/get-email-path-from-slug.ts @@ -13,11 +13,14 @@ export const getEmailPathFromSlug = cache(async (slug: string) => { if (fs.existsSync(`${pathWithoutExtension}.tsx`)) { return `${pathWithoutExtension}.tsx`; - } else if (fs.existsSync(`${pathWithoutExtension}.jsx`)) { + } + if (fs.existsSync(`${pathWithoutExtension}.jsx`)) { return `${pathWithoutExtension}.jsx`; - } else if (fs.existsSync(`${pathWithoutExtension}.ts`)) { + } + if (fs.existsSync(`${pathWithoutExtension}.ts`)) { return `${pathWithoutExtension}.ts`; - } else if (fs.existsSync(`${pathWithoutExtension}.js`)) { + } + if (fs.existsSync(`${pathWithoutExtension}.js`)) { return `${pathWithoutExtension}.js`; } diff --git a/packages/react-email/src/cli/utils/preview/hot-reloading/create-dependency-graph.ts b/packages/react-email/src/cli/utils/preview/hot-reloading/create-dependency-graph.ts index 7bec85ab34..ecaf5779cc 100644 --- a/packages/react-email/src/cli/utils/preview/hot-reloading/create-dependency-graph.ts +++ b/packages/react-email/src/cli/utils/preview/hot-reloading/create-dependency-graph.ts @@ -156,10 +156,9 @@ export const createDependencyGraph = async (directory: string) => { } return pathToDependencyFromDirectory; - } else { - // when either the path is a module or is absolute - return dependencyPath; } + // when either the path is a module or is absolute + return dependencyPath; }, ); From 1d3f4bfe2ba7cbe0ce16ef4b76f9f59c3e662558 Mon Sep 17 00:00:00 2001 From: Bu Kinoshita Date: Thu, 19 Dec 2024 13:01:11 +0000 Subject: [PATCH 05/12] fix: Minor tweak --- .github/workflows/tests.yml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index 8cac9b50e5..7647b5a04f 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -5,7 +5,7 @@ on: - main pull_request: jobs: - format: + lint: runs-on: buildjet-4vcpu-ubuntu-2204 container: image: node:18 @@ -32,8 +32,8 @@ jobs: - name: Install packages run: pnpm install --frozen-lockfile - - name: Run Format Check - run: pnpm format:check + - name: Run Lint + run: pnpm lint test: runs-on: buildjet-4vcpu-ubuntu-2204 From f492d1b99f52b6045417b4754fd544fbe4a36ccd Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Thu, 16 Jan 2025 11:34:26 -0300 Subject: [PATCH 06/12] simplify with an early return --- .../hot-reloading/create-dependency-graph.ts | 99 ++++++++++--------- 1 file changed, 50 insertions(+), 49 deletions(-) diff --git a/packages/react-email/src/cli/utils/preview/hot-reloading/create-dependency-graph.ts b/packages/react-email/src/cli/utils/preview/hot-reloading/create-dependency-graph.ts index ecaf5779cc..8c2e01a360 100644 --- a/packages/react-email/src/cli/utils/preview/hot-reloading/create-dependency-graph.ts +++ b/packages/react-email/src/cli/utils/preview/hot-reloading/create-dependency-graph.ts @@ -98,67 +98,68 @@ export const createDependencyGraph = async (directory: string) => { const importedPathsRelativeToDirectory = importedPaths.map( (dependencyPath) => { const isModulePath = !dependencyPath.startsWith('.'); + /* path.isAbsolute will return false if the path looks like JavaScript module imports e.g. path.isAbsolute('react-dom/server') will return false, but for our purposes this path is not a relative one. */ - if (!isModulePath && !path.isAbsolute(dependencyPath)) { - let pathToDependencyFromDirectory = path.resolve( - /* - path.resolve resolves paths differently from what imports on javascript do. - - So if we wouldn't do this, for an email at "/path/to/email.tsx" with a dependecy path of "./other-email" - would end up going into /path/to/email.tsx/other-email instead of /path/to/other-email which is the - one the import is meant to go to - */ - path.dirname(filePath), - dependencyPath, - ); - - let isDirectory = false; - try { - // will throw if the the file is not existant - isDirectory = statSync(pathToDependencyFromDirectory).isDirectory(); - } catch (_) {} - if (isDirectory) { - const pathToSubDirectory = pathToDependencyFromDirectory; - const pathWithExtension = checkFileExtensionsUntilItExists( - `${pathToSubDirectory}/index`, - ); - if (pathWithExtension) { - pathToDependencyFromDirectory = pathWithExtension; - } else if (isDev) { - // only warn about this on development as it is probably going to be irrelevant otherwise - console.warn( - `Could not find index file for directory at ${pathToDependencyFromDirectory}. This is probably going to cause issues with both hot reloading and your code.`, - ); - } - } + if (isModulePath || path.isAbsolute(dependencyPath)) { + return dependencyPath; + } + let pathToDependencyFromDirectory = path.resolve( /* - If the path to the dependency does not include a file extension, such that our check - for it being a javascript module fails, then we can assume it has the same as the `filePath` + path.resolve resolves paths differently from what imports on javascript do. + + So if we wouldn't do this, for an email at "/path/to/email.tsx" with a dependecy path of "./other-email" + would end up going into /path/to/email.tsx/other-email instead of /path/to/other-email which is the + one the import is meant to go to */ - if (!isJavascriptModule(pathToDependencyFromDirectory)) { - const pathWithExtension = checkFileExtensionsUntilItExists( - pathToDependencyFromDirectory, + path.dirname(filePath), + dependencyPath, + ); + + let isDirectory = false; + try { + // will throw if the the file is not existant + isDirectory = statSync(pathToDependencyFromDirectory).isDirectory(); + } catch (_) {} + if (isDirectory) { + const pathToSubDirectory = pathToDependencyFromDirectory; + const pathWithExtension = checkFileExtensionsUntilItExists( + `${pathToSubDirectory}/index`, + ); + if (pathWithExtension) { + pathToDependencyFromDirectory = pathWithExtension; + } else if (isDev) { + // only warn about this on development as it is probably going to be irrelevant otherwise + console.warn( + `Could not find index file for directory at ${pathToDependencyFromDirectory}. This is probably going to cause issues with both hot reloading and your code.`, ); - - if (pathWithExtension) { - pathToDependencyFromDirectory = pathWithExtension; - } else if (isDev) { - // only warn about this on development as it is probably going to be irrelevant otherwise - console.warn( - `Could not determine the file extension for the file at ${pathToDependencyFromDirectory}`, - ); - } } + } + + /* + If the path to the dependency does not include a file extension, such that our check + for it being a javascript module fails, then we can assume it has the same as the `filePath` + */ + if (!isJavascriptModule(pathToDependencyFromDirectory)) { + const pathWithExtension = checkFileExtensionsUntilItExists( + pathToDependencyFromDirectory, + ); - return pathToDependencyFromDirectory; + if (pathWithExtension) { + pathToDependencyFromDirectory = pathWithExtension; + } else if (isDev) { + // only warn about this on development as it is probably going to be irrelevant otherwise + console.warn( + `Could not determine the file extension for the file at ${pathToDependencyFromDirectory}`, + ); + } } - // when either the path is a module or is absolute - return dependencyPath; + + return pathToDependencyFromDirectory; }, ); From 9b9d72cf6e9f2bd4f6a41a700cca67094a99bc8f Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Thu, 16 Jan 2025 11:34:37 -0300 Subject: [PATCH 07/12] linted --- .../emails/magic-links/aws-verify-email.tsx | 88 +- .../magic-links/jobaccepted-magic-link.tsx | 100 +- .../emails/magic-links/linear-login-code.tsx | 80 +- .../emails/magic-links/notion-magic-link.tsx | 82 +- .../magic-links/plaid-verify-identity.tsx | 138 +- .../emails/magic-links/raycast-magic-link.tsx | 48 +- .../demo/emails/magic-links/slack-confirm.tsx | 86 +- .../newsletters/codepen-challengers.tsx | 252 +- .../newsletters/google-play-policy-update.tsx | 84 +- .../newsletters/stack-overflow-tips.tsx | 160 +- .../notifications/github-access-token.tsx | 58 +- .../papermark-year-in-review.tsx | 16 +- .../notifications/vercel-invite-user.tsx | 34 +- .../notifications/yelp-recent-login.tsx | 76 +- apps/demo/emails/receipts/apple-receipt.tsx | 266 +- apps/demo/emails/receipts/nike-receipt.tsx | 202 +- .../reset-password/dropbox-reset-password.tsx | 50 +- .../reset-password/twitch-reset-password.tsx | 70 +- apps/demo/emails/reviews/airbnb-review.tsx | 90 +- apps/demo/emails/reviews/amazon-review.tsx | 90 +- apps/demo/emails/welcome/koala-welcome.tsx | 46 +- apps/demo/emails/welcome/netlify-welcome.tsx | 26 +- apps/demo/emails/welcome/stripe-welcome.tsx | 74 +- apps/docs/mint.json | 256 +- apps/web/components/_components/layout.tsx | 34 +- .../inline-styles.tsx | 32 +- .../tailwind.tsx | 8 +- .../inline-styles.tsx | 42 +- .../article-with-image-on-right/tailwind.tsx | 4 +- .../article-with-image/inline-styles.tsx | 26 +- .../article-with-image/tailwind.tsx | 4 +- .../inline-styles.tsx | 96 +- .../tailwind.tsx | 18 +- .../inline-styles.tsx | 78 +- .../article-with-single-author/tailwind.tsx | 8 +- .../article-with-two-cards/inline-styles.tsx | 66 +- .../article-with-two-cards/tailwind.tsx | 4 +- .../web/components/checkout/inline-styles.tsx | 108 +- apps/web/components/checkout/tailwind.tsx | 4 +- .../code-block-with-custom-theme/index.tsx | 120 +- .../code-block-with-line-numbers/index.tsx | 8 +- .../index.tsx | 8 +- .../code-block-without-theme/index.tsx | 8 +- .../inline-styles.tsx | 12 +- .../tailwind.tsx | 8 +- .../inline-styles.tsx | 6 +- .../tailwind.tsx | 4 +- .../download-buttons/inline-styles.tsx | 10 +- .../components/download-buttons/tailwind.tsx | 4 +- .../ensure-matching-variants.spec.tsx | 34 +- .../footer-with-one-column/inline-styles.tsx | 36 +- .../footer-with-one-column/tailwind.tsx | 4 +- .../footer-with-two-columns/inline-styles.tsx | 30 +- .../footer-with-two-columns/tailwind.tsx | 4 +- .../four-images-in-a-grid/inline-styles.tsx | 44 +- .../four-images-in-a-grid/tailwind.tsx | 4 +- .../inline-styles.tsx | 82 +- .../tailwind.tsx | 4 +- .../inline-styles.tsx | 74 +- .../header-and-four-paragraphs/tailwind.tsx | 4 +- .../header-and-list-items/inline-styles.tsx | 74 +- .../header-and-list-items/tailwind.tsx | 4 +- .../inline-styles.tsx | 168 +- .../tailwind.tsx | 4 +- .../inline-styles.tsx | 62 +- .../tailwind.tsx | 4 +- .../inline-styles.tsx | 20 +- .../header-with-centered-menu/tailwind.tsx | 4 +- .../header-with-side-menu/inline-styles.tsx | 12 +- .../header-with-side-menu/tailwind.tsx | 4 +- .../inline-styles.tsx | 6 +- .../header-with-social-icons/tailwind.tsx | 4 +- .../inline-styles.tsx | 10 +- .../image-with-varying-sizes/tailwind.tsx | 4 +- .../inline-styles.tsx | 36 +- .../images-on-horizontal-grid/tailwind.tsx | 4 +- .../images-on-vertical-grid/inline-styles.tsx | 30 +- .../images-on-vertical-grid/tailwind.tsx | 4 +- .../link-inline-with-text/index.tsx | 4 +- .../markdown-with-container-styles/index.tsx | 4 +- .../markdown-with-custom-styles/index.tsx | 10 +- .../multiple-headings/inline-styles.tsx | 16 +- .../components/multiple-headings/tailwind.tsx | 4 +- .../inline-styles.tsx | 42 +- .../tailwind.tsx | 4 +- .../components/one-product/inline-styles.tsx | 30 +- apps/web/components/one-product/tailwind.tsx | 4 +- .../one-row-three-columns/inline-styles.tsx | 16 +- .../one-row-three-columns/tailwind.tsx | 4 +- .../one-row-two-columns/inline-styles.tsx | 20 +- .../one-row-two-columns/tailwind.tsx | 4 +- .../rounded-image/inline-styles.tsx | 6 +- .../web/components/rounded-image/tailwind.tsx | 4 +- .../section-with-rows-and-columns/index.tsx | 4 +- .../simple-code-inline/inline-styles.tsx | 12 +- .../simple-code-inline/tailwind.tsx | 8 +- .../simple-container/inline-styles.tsx | 8 +- .../components/simple-container/tailwind.tsx | 4 +- .../simple-divider/inline-styles.tsx | 6 +- .../components/simple-divider/tailwind.tsx | 4 +- .../simple-heading/inline-styles.tsx | 6 +- .../components/simple-heading/tailwind.tsx | 4 +- .../components/simple-image/inline-styles.tsx | 6 +- apps/web/components/simple-image/tailwind.tsx | 4 +- apps/web/components/simple-link/index.tsx | 4 +- apps/web/components/simple-markdown/index.tsx | 4 +- apps/web/components/simple-section/index.tsx | 4 +- apps/web/components/simple-text/index.tsx | 4 +- .../single-button/inline-styles.tsx | 14 +- .../web/components/single-button/tailwind.tsx | 4 +- apps/web/components/structure.ts | 224 +- apps/web/components/survey/inline-styles.tsx | 26 +- apps/web/components/survey/tailwind.tsx | 4 +- .../text-with-styling/inline-styles.tsx | 8 +- .../components/text-with-styling/tailwind.tsx | 4 +- .../inline-styles.tsx | 38 +- .../three-columns-with-images/tailwind.tsx | 4 +- .../title-four-cards/inline-styles.tsx | 140 +- .../components/title-four-cards/tailwind.tsx | 8 +- .../inline-styles.tsx | 100 +- .../title-three-cards-in-a-row/tailwind.tsx | 6 +- .../components/two-buttons/inline-styles.tsx | 32 +- apps/web/components/two-buttons/tailwind.tsx | 4 +- apps/web/next.config.js | 32 +- apps/web/src/app/api/send/test/route.ts | 30 +- apps/web/src/app/components/[slug]/page.tsx | 20 +- .../get-imported-components-for.tsx | 50 +- apps/web/src/app/components/page.tsx | 46 +- apps/web/src/app/layout.tsx | 78 +- apps/web/src/app/not-found.tsx | 2 +- apps/web/src/app/page.tsx | 14 +- apps/web/src/app/robots.ts | 8 +- apps/web/src/app/sitemap.ts | 4 +- apps/web/src/app/templates/page.tsx | 140 +- apps/web/src/components/anchor.tsx | 14 +- apps/web/src/components/button.tsx | 56 +- apps/web/src/components/code-block.tsx | 44 +- apps/web/src/components/code.tsx | 54 +- .../src/components/component-code-view.tsx | 64 +- apps/web/src/components/component-preview.tsx | 12 +- apps/web/src/components/component-view.tsx | 34 +- apps/web/src/components/components-view.tsx | 6 +- apps/web/src/components/footer.tsx | 10 +- apps/web/src/components/heading.tsx | 84 +- apps/web/src/components/icon-button.tsx | 8 +- .../src/components/icons/icon-arrow-left.tsx | 8 +- apps/web/src/components/icons/icon-base.tsx | 6 +- .../web/src/components/icons/icon-monitor.tsx | 8 +- apps/web/src/components/icons/icon-phone.tsx | 8 +- apps/web/src/components/icons/icon-source.tsx | 8 +- apps/web/src/components/logo.tsx | 2 +- apps/web/src/components/menu.tsx | 18 +- apps/web/src/components/page-transition.tsx | 16 +- apps/web/src/components/spotlight.tsx | 10 +- apps/web/src/components/tab-trigger.tsx | 18 +- apps/web/src/components/template.tsx | 30 +- apps/web/src/components/text.tsx | 66 +- apps/web/src/components/tooltip-content.tsx | 8 +- apps/web/src/components/tooltip.tsx | 6 +- apps/web/src/components/topbar.tsx | 14 +- apps/web/src/hooks/use-stored-state.ts | 2 +- apps/web/src/illustrations/buttons.tsx | 2 +- apps/web/src/illustrations/code-inline.tsx | 2 +- apps/web/src/illustrations/container.tsx | 2 +- apps/web/src/illustrations/ecommerce.tsx | 2 +- apps/web/src/illustrations/gallery.tsx | 2 +- apps/web/src/illustrations/grid.tsx | 2 +- apps/web/src/illustrations/image.tsx | 2 +- apps/web/src/illustrations/marketing.tsx | 2 +- .../src/utils/convert-uris-into-urls.spec.ts | 8 +- apps/web/src/utils/slugify.ts | 6 +- apps/web/src/utils/unreachable.ts | 2 +- apps/web/tailwind.config.js | 36 +- .../bench-results-30-iterations.json | 65 +- .../src/local-vs-2.1.7-canary.2-on-startup.ts | 26 +- .../src/local-vs-2.1.7-canary.2.ts | 26 +- .../run-server-and-fetch-preview-page.ts | 14 +- .../preview-server/src/utils/run-server.ts | 14 +- .../startup-bench-results-30-iterations.json | 78 +- .../bench-results-100-iterations.json | 113 +- .../src/benchmark-0.0.12-vs-local-version.ts | 8 +- .../src/benchmark-0.0.15-vs-local-version.ts | 20 +- .../src/benchmark-with-vs-without.ts | 14 +- .../src/emails/with-tailwind.tsx | 28 +- .../src/emails/without-tailwind.tsx | 82 +- .../tailwind-component/src/tailwind-render.ts | 6 +- examples/aws-ses/package.json | 4 +- examples/aws-ses/src/email.tsx | 4 +- examples/aws-ses/src/index.tsx | 18 +- examples/mailersend/package.json | 4 +- examples/mailersend/src/email.tsx | 2 +- examples/mailersend/src/index.tsx | 14 +- examples/nodemailer/package.json | 4 +- examples/nodemailer/src/email.tsx | 2 +- examples/nodemailer/src/index.tsx | 18 +- examples/plunk/package.json | 4 +- examples/plunk/src/email.tsx | 2 +- examples/plunk/src/index.tsx | 12 +- examples/postmark/package.json | 4 +- examples/postmark/src/email.tsx | 2 +- examples/postmark/src/index.tsx | 14 +- examples/resend/.eslintrc.cjs | 2 +- examples/resend/src/lib/resend.ts | 2 +- examples/resend/src/pages/api/send.ts | 18 +- .../resend/transactional/emails/waitlist.tsx | 28 +- examples/resend/tsconfig.json | 16 +- examples/scaleway/next/src/lib/scaleway.ts | 6 +- examples/scaleway/next/src/pages/api/send.tsx | 26 +- .../next/transactional/emails/waitlist.tsx | 28 +- examples/scaleway/next/tsconfig.json | 16 +- examples/scaleway/node/package.json | 4 +- examples/scaleway/node/src/email.tsx | 12 +- examples/scaleway/node/src/index.tsx | 30 +- examples/sendgrid/package.json | 4 +- examples/sendgrid/src/email.tsx | 2 +- examples/sendgrid/src/index.tsx | 14 +- packages/body/.eslintrc.js | 2 +- packages/body/package.json | 4 +- packages/body/src/body.spec.tsx | 16 +- packages/body/src/body.tsx | 4 +- packages/body/src/index.ts | 2 +- packages/button/.eslintrc.js | 2 +- packages/button/package.json | 9 +- packages/button/src/button.spec.tsx | 32 +- packages/button/src/button.tsx | 34 +- packages/button/src/index.ts | 2 +- packages/button/src/utils/parse-padding.ts | 14 +- packages/button/src/utils/utils.spec.ts | 54 +- packages/code-block/.eslintrc.js | 2 +- packages/code-block/package.json | 9 +- packages/code-block/src/code-block.tsx | 20 +- packages/code-block/src/index.ts | 6 +- .../code-block/src/languages-available.ts | 802 +-- packages/code-block/src/themes.ts | 4606 ++++++++--------- packages/code-inline/.eslintrc.js | 2 +- packages/code-inline/package.json | 4 +- packages/code-inline/src/code-inline.tsx | 14 +- packages/code-inline/src/index.ts | 2 +- packages/column/.eslintrc.js | 2 +- packages/column/package.json | 9 +- packages/column/src/column.spec.tsx | 16 +- packages/column/src/column.tsx | 6 +- packages/column/src/index.ts | 2 +- packages/components/.eslintrc.js | 2 +- packages/components/package.json | 9 +- packages/components/src/index.ts | 40 +- packages/container/.eslintrc.js | 2 +- packages/container/package.json | 9 +- packages/container/src/container.spec.tsx | 18 +- packages/container/src/container.tsx | 10 +- packages/container/src/index.ts | 2 +- packages/create-email/.eslintrc.cjs | 2 +- packages/create-email/package.json | 5 +- packages/create-email/src/index.js | 47 +- packages/create-email/src/tree.js | 6 +- .../template/emails/notion-magic-link.tsx | 82 +- .../template/emails/plaid-verify-identity.tsx | 138 +- .../template/emails/stripe-welcome.tsx | 74 +- .../template/emails/vercel-invite-user.tsx | 34 +- packages/eslint-config-custom/library.js | 16 +- packages/eslint-config-custom/next.js | 40 +- .../eslint-config-custom/react-internal.js | 34 +- packages/font/.eslintrc.js | 2 +- packages/font/package.json | 4 +- packages/font/src/font.spec.tsx | 24 +- packages/font/src/font.tsx | 44 +- packages/font/src/index.ts | 2 +- packages/head/.eslintrc.js | 2 +- packages/head/package.json | 9 +- packages/head/src/head.spec.tsx | 14 +- packages/head/src/head.tsx | 6 +- packages/head/src/index.ts | 2 +- packages/heading/.eslintrc.js | 2 +- packages/heading/package.json | 9 +- packages/heading/src/heading.spec.tsx | 18 +- packages/heading/src/heading.tsx | 14 +- packages/heading/src/index.ts | 2 +- packages/heading/src/utils/spaces.ts | 26 +- packages/heading/src/utils/utils.spec.ts | 64 +- packages/hr/.eslintrc.js | 2 +- packages/hr/package.json | 9 +- packages/hr/src/hr.spec.tsx | 18 +- packages/hr/src/hr.tsx | 12 +- packages/hr/src/index.ts | 2 +- packages/html/.eslintrc.js | 2 +- packages/html/package.json | 9 +- packages/html/src/html.spec.tsx | 14 +- packages/html/src/html.tsx | 8 +- packages/html/src/index.ts | 2 +- packages/img/.eslintrc.js | 2 +- packages/img/package.json | 9 +- packages/img/src/img.spec.tsx | 16 +- packages/img/src/img.tsx | 14 +- packages/img/src/index.ts | 2 +- packages/link/.eslintrc.js | 2 +- packages/link/package.json | 9 +- packages/link/src/index.ts | 2 +- packages/link/src/link.spec.tsx | 20 +- packages/link/src/link.tsx | 12 +- packages/markdown/.eslintrc.js | 2 +- packages/markdown/package.json | 10 +- packages/markdown/src/index.ts | 2 +- packages/markdown/src/markdown.spec.tsx | 16 +- packages/markdown/src/markdown.tsx | 8 +- packages/preview/.eslintrc.js | 2 +- packages/preview/package.json | 9 +- packages/preview/src/index.ts | 2 +- packages/preview/src/preview.spec.tsx | 26 +- packages/preview/src/preview.tsx | 18 +- packages/react-email/.eslintrc.js | 36 +- packages/react-email/package.json | 5 +- packages/react-email/postcss.config.js | 2 +- .../src/actions/get-email-path-from-slug.ts | 2 +- .../src/actions/render-email-by-path.tsx | 6 +- packages/react-email/src/app/layout.tsx | 2 +- packages/react-email/src/app/page.tsx | 2 +- .../src/app/preview/[...slug]/page.tsx | 4 +- .../src/app/preview/[...slug]/preview.tsx | 4 +- .../react-email/src/cli/commands/build.ts | 6 +- packages/react-email/src/cli/commands/dev.ts | 2 +- .../react-email/src/cli/commands/export.ts | 16 +- .../react-email/src/cli/commands/start.ts | 2 +- .../src/cli/commands/testing/export.spec.ts | 2 +- packages/react-email/src/cli/index.ts | 2 +- .../create-dependency-graph.spec.ts | 4 +- .../hot-reloading/create-dependency-graph.ts | 6 +- .../hot-reloading/setup-hot-reloading.ts | 2 +- .../cli/utils/preview/serve-static-file.ts | 4 +- .../src/cli/utils/preview/start-dev-server.ts | 12 +- .../react-email/src/components/button.tsx | 2 +- .../src/components/code-container.tsx | 2 +- .../react-email/src/components/heading.tsx | 2 +- .../sidebar/sidebar-directory-children.tsx | 6 +- .../components/sidebar/sidebar-directory.tsx | 4 +- .../src/components/sidebar/sidebar.tsx | 2 +- packages/react-email/src/components/text.tsx | 2 +- .../src/components/tooltip-content.tsx | 2 +- .../react-email/src/components/tooltip.tsx | 2 +- .../react-email/src/components/topbar.tsx | 2 +- .../src/hooks/use-email-rendering-result.ts | 4 +- packages/react-email/src/utils/cn.ts | 2 +- .../esbuild/renderring-utilities-exporter.ts | 2 +- .../src/utils/get-email-component.ts | 12 +- .../src/utils/improve-error-with-sourcemap.ts | 2 +- .../src/utils/static-node-modules-for-vm.ts | 12 +- packages/react-email/tsconfig.json | 7 +- packages/render/.eslintrc.js | 8 +- packages/render/package.json | 9 +- packages/render/src/browser/index.ts | 8 +- packages/render/src/browser/read-stream.ts | 10 +- .../src/browser/render-async-web.spec.tsx | 34 +- packages/render/src/browser/render-async.tsx | 18 +- .../render/src/browser/render-web.spec.tsx | 34 +- packages/render/src/browser/render.tsx | 24 +- packages/render/src/node/index.ts | 8 +- packages/render/src/node/read-stream.ts | 16 +- .../src/node/render-async-edge.spec.tsx | 32 +- .../src/node/render-async-node.spec.tsx | 40 +- packages/render/src/node/render-async.tsx | 18 +- packages/render/src/node/render-edge.spec.tsx | 32 +- packages/render/src/node/render-node.spec.tsx | 40 +- packages/render/src/node/render.tsx | 18 +- packages/render/src/shared/options.ts | 2 +- .../render/src/shared/plain-text-selectors.ts | 8 +- packages/render/src/shared/utils/pretty.ts | 10 +- packages/render/src/shared/utils/preview.tsx | 2 +- packages/render/src/shared/utils/template.tsx | 2 +- packages/render/tsup.config.ts | 14 +- packages/row/.eslintrc.js | 2 +- packages/row/package.json | 9 +- packages/row/src/index.ts | 2 +- packages/row/src/row.spec.tsx | 16 +- packages/row/src/row.tsx | 10 +- packages/section/.eslintrc.js | 2 +- packages/section/package.json | 9 +- packages/section/src/index.ts | 2 +- packages/section/src/section.spec.tsx | 26 +- packages/section/src/section.tsx | 6 +- packages/tailwind/.eslintrc.js | 27 +- packages/tailwind/copy-tailwind-types.mjs | 14 +- .../integrations/_tests/nextjs.spec.ts | 10 +- .../_tests/utils/run-testing-command.ts | 6 +- .../tailwind/integrations/_tests/vite.spec.ts | 10 +- .../nextjs/emails/vercel-invite-user.tsx | 34 +- .../integrations/nextjs/src/app/layout.tsx | 10 +- .../integrations/nextjs/src/app/page.tsx | 4 +- .../tailwind/integrations/vite/.eslintrc.cjs | 2 +- .../vite/emails/vercel-invite-user.tsx | 32 +- .../tailwind/integrations/vite/src/App.tsx | 4 +- .../tailwind/integrations/vite/src/main.tsx | 8 +- .../tailwind/integrations/vite/vite.config.ts | 4 +- packages/tailwind/package.json | 10 +- .../src/hooks/use-suspensed-promise.ts | 4 +- packages/tailwind/src/index.ts | 2 +- packages/tailwind/src/tailwind.spec.tsx | 138 +- packages/tailwind/src/tailwind.tsx | 44 +- .../convert-css-property-to-react-property.ts | 6 +- .../compatibility/escape-class-name.spec.ts | 18 +- .../utils/compatibility/escape-class-name.ts | 2 +- .../compatibility/sanitize-class-name.spec.ts | 8 +- .../compatibility/sanitize-class-name.ts | 42 +- .../src/utils/compatibility/unescape-class.ts | 2 +- .../utils/css/make-inline-styles-for.spec.ts | 14 +- .../src/utils/css/make-inline-styles-for.ts | 16 +- .../sanitize-media-queries.spec.ts | 16 +- .../media-queries/sanitize-media-queries.ts | 6 +- packages/tailwind/src/utils/css/minify-css.ts | 18 +- .../utils/css/remove-if-empty-recursively.ts | 2 +- .../css/remove-rule-duplicates-from-root.ts | 4 +- .../css/resolve-all-css-variables.spec.ts | 19 +- .../utils/css/resolve-all-css-variables.ts | 16 +- .../src/utils/css/sanitize-declarations.ts | 4 +- .../tailwind/src/utils/react/is-component.ts | 2 +- .../src/utils/react/map-react-tree.spec.tsx | 10 +- .../src/utils/react/map-react-tree.ts | 8 +- .../clone-element-with-inlined-styles.ts | 20 +- .../tailwindcss/setup-tailwind-context.ts | 6 +- .../utils/tailwindcss/setup-tailwind.spec.ts | 8 +- .../src/utils/tailwindcss/setup-tailwind.ts | 28 +- packages/tailwind/tsconfig.json | 8 +- packages/tailwind/vite.config.ts | 22 +- packages/tailwind/vitest.config.ts | 8 +- packages/text/.eslintrc.js | 2 +- packages/text/package.json | 9 +- packages/text/src/index.ts | 2 +- packages/text/src/text.spec.tsx | 18 +- packages/text/src/text.tsx | 12 +- vitest.config.ts | 4 +- vitest.workspace.ts | 2 +- 429 files changed, 7442 insertions(+), 7446 deletions(-) diff --git a/apps/demo/emails/magic-links/aws-verify-email.tsx b/apps/demo/emails/magic-links/aws-verify-email.tsx index 551f59086d..893a5c2a3f 100644 --- a/apps/demo/emails/magic-links/aws-verify-email.tsx +++ b/apps/demo/emails/magic-links/aws-verify-email.tsx @@ -10,8 +10,8 @@ import { Preview, Section, Text, -} from "@react-email/components"; -import * as React from "react"; +} from '@react-email/components'; +import * as React from 'react'; interface AWSVerifyEmailProps { verificationCode?: string; @@ -19,10 +19,10 @@ interface AWSVerifyEmailProps { const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` - : ""; + : ''; export default function AWSVerifyEmail({ - verificationCode = "596853", + verificationCode = '596853', }: AWSVerifyEmailProps) { return ( @@ -68,11 +68,11 @@ export default function AWSVerifyEmail({ This message was produced and distributed by Amazon Web Services, Inc., 410 Terry Ave. North, Seattle, WA 98109. © 2022, Amazon Web Services, Inc.. All rights reserved. AWS is a registered trademark - of{" "} + of{' '} Amazon.com - , Inc. View our{" "} + , Inc. View our{' '} privacy policy @@ -85,88 +85,88 @@ export default function AWSVerifyEmail({ } const main = { - backgroundColor: "#fff", - color: "#212121", + backgroundColor: '#fff', + color: '#212121', }; const container = { - padding: "20px", - margin: "0 auto", - backgroundColor: "#eee", + padding: '20px', + margin: '0 auto', + backgroundColor: '#eee', }; const h1 = { - color: "#333", + color: '#333', fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif", - fontSize: "20px", - fontWeight: "bold", - marginBottom: "15px", + fontSize: '20px', + fontWeight: 'bold', + marginBottom: '15px', }; const link = { - color: "#2754C5", + color: '#2754C5', fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif", - fontSize: "14px", - textDecoration: "underline", + fontSize: '14px', + textDecoration: 'underline', }; const text = { - color: "#333", + color: '#333', fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif", - fontSize: "14px", - margin: "24px 0", + fontSize: '14px', + margin: '24px 0', }; const imageSection = { - backgroundColor: "#252f3d", - display: "flex", - padding: "20px 0", - alignItems: "center", - justifyContent: "center", + backgroundColor: '#252f3d', + display: 'flex', + padding: '20px 0', + alignItems: 'center', + justifyContent: 'center', }; -const coverSection = { backgroundColor: "#fff" }; +const coverSection = { backgroundColor: '#fff' }; -const upperSection = { padding: "25px 35px" }; +const upperSection = { padding: '25px 35px' }; -const lowerSection = { padding: "25px 35px" }; +const lowerSection = { padding: '25px 35px' }; const footerText = { ...text, - fontSize: "12px", - padding: "0 20px", + fontSize: '12px', + padding: '0 20px', }; const verifyText = { ...text, margin: 0, - fontWeight: "bold", - textAlign: "center" as const, + fontWeight: 'bold', + textAlign: 'center' as const, }; const codeText = { ...text, - fontWeight: "bold", - fontSize: "36px", - margin: "10px 0", - textAlign: "center" as const, + fontWeight: 'bold', + fontSize: '36px', + margin: '10px 0', + textAlign: 'center' as const, }; const validityText = { ...text, - margin: "0px", - textAlign: "center" as const, + margin: '0px', + textAlign: 'center' as const, }; const verificationSection = { - display: "flex", - alignItems: "center", - justifyContent: "center", + display: 'flex', + alignItems: 'center', + justifyContent: 'center', }; -const mainText = { ...text, marginBottom: "14px" }; +const mainText = { ...text, marginBottom: '14px' }; -const cautionText = { ...text, margin: "0px" }; +const cautionText = { ...text, margin: '0px' }; diff --git a/apps/demo/emails/magic-links/jobaccepted-magic-link.tsx b/apps/demo/emails/magic-links/jobaccepted-magic-link.tsx index 06ef388250..5167a2bfbf 100644 --- a/apps/demo/emails/magic-links/jobaccepted-magic-link.tsx +++ b/apps/demo/emails/magic-links/jobaccepted-magic-link.tsx @@ -1,5 +1,6 @@ import { Body, + Button, Container, Head, Heading, @@ -8,8 +9,7 @@ import { Preview, Section, Text, - Button, -} from "@react-email/components"; +} from '@react-email/components'; const MagicCodeEmail = () => { return ( @@ -34,10 +34,10 @@ const MagicCodeEmail = () => { Not expecting this email? - Contact{" "} + Contact{' '} support@jobaccepted.com - {" "} + {' '} if you did not request this code. @@ -49,80 +49,80 @@ const MagicCodeEmail = () => { export default MagicCodeEmail; const main = { - backgroundColor: "#ffffff", - fontFamily: "HelveticaNeue,Helvetica,Arial,sans-serif", - textAlign: "center" as const, + backgroundColor: '#ffffff', + fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif', + textAlign: 'center' as const, }; const container = { - backgroundColor: "#ffffff", - border: "1px solid #ddd", - borderRadius: "5px", - marginTop: "20px", - width: "480px", - maxWidth: "100%", - margin: "0 auto", - padding: "12% 6%", + backgroundColor: '#ffffff', + border: '1px solid #ddd', + borderRadius: '5px', + marginTop: '20px', + width: '480px', + maxWidth: '100%', + margin: '0 auto', + padding: '12% 6%', }; const company = { - fontWeight: "bold", - fontSize: "18px", - textAlign: "center" as const, + fontWeight: 'bold', + fontSize: '18px', + textAlign: 'center' as const, }; const codeTitle = { - textAlign: "center" as const, + textAlign: 'center' as const, }; const codeDescription = { - textAlign: "center" as const, + textAlign: 'center' as const, }; const codeContainer = { - background: "rgba(0,0,0,.05)", - borderRadius: "4px", - margin: "16px auto 14px", - verticalAlign: "middle", - width: "280px", - maxWidth: "100%", + background: 'rgba(0,0,0,.05)', + borderRadius: '4px', + margin: '16px auto 14px', + verticalAlign: 'middle', + width: '280px', + maxWidth: '100%', }; const codeStyle = { - color: "#000", - display: "inline-block", - paddingBottom: "8px", - paddingTop: "8px", - margin: "0 auto", - width: "100%", - textAlign: "center" as const, - letterSpacing: "8px", + color: '#000', + display: 'inline-block', + paddingBottom: '8px', + paddingTop: '8px', + margin: '0 auto', + width: '100%', + textAlign: 'center' as const, + letterSpacing: '8px', }; const buttonContainer = { - margin: "27px auto", - width: "auto", + margin: '27px auto', + width: 'auto', }; const button = { - backgroundColor: "#5e6ad2", - borderRadius: "3px", - fontWeight: "600", - color: "#fff", - textAlign: "center" as const, - padding: "12px 24px", - margin: "0 auto", + backgroundColor: '#5e6ad2', + borderRadius: '3px', + fontWeight: '600', + color: '#fff', + textAlign: 'center' as const, + padding: '12px 24px', + margin: '0 auto', }; const paragraph = { - color: "#444", - letterSpacing: "0", - padding: "0 40px", - margin: "0", - textAlign: "center" as const, + color: '#444', + letterSpacing: '0', + padding: '0 40px', + margin: '0', + textAlign: 'center' as const, }; const link = { - color: "#444", - textDecoration: "underline", + color: '#444', + textDecoration: 'underline', }; diff --git a/apps/demo/emails/magic-links/linear-login-code.tsx b/apps/demo/emails/magic-links/linear-login-code.tsx index e4b520526c..320db1c003 100644 --- a/apps/demo/emails/magic-links/linear-login-code.tsx +++ b/apps/demo/emails/magic-links/linear-login-code.tsx @@ -11,8 +11,8 @@ import { Preview, Section, Text, -} from "@react-email/components"; -import * as React from "react"; +} from '@react-email/components'; +import * as React from 'react'; interface LinearLoginCodeEmailProps { validationCode?: string; @@ -20,7 +20,7 @@ interface LinearLoginCodeEmailProps { const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` - : ""; + : ''; export const LinearLoginCodeEmail = ({ validationCode, @@ -58,7 +58,7 @@ export const LinearLoginCodeEmail = ({ ); LinearLoginCodeEmail.PreviewProps = { - validationCode: "tt226-5398x", + validationCode: 'tt226-5398x', } as LinearLoginCodeEmailProps; export default LinearLoginCodeEmail; @@ -70,66 +70,66 @@ const logo = { }; const main = { - backgroundColor: "#ffffff", + backgroundColor: '#ffffff', fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', }; const container = { - margin: "0 auto", - padding: "20px 0 48px", - maxWidth: "560px", + margin: '0 auto', + padding: '20px 0 48px', + maxWidth: '560px', }; const heading = { - fontSize: "24px", - letterSpacing: "-0.5px", - lineHeight: "1.3", - fontWeight: "400", - color: "#484848", - padding: "17px 0 0", + fontSize: '24px', + letterSpacing: '-0.5px', + lineHeight: '1.3', + fontWeight: '400', + color: '#484848', + padding: '17px 0 0', }; const paragraph = { - margin: "0 0 15px", - fontSize: "15px", - lineHeight: "1.4", - color: "#3c4149", + margin: '0 0 15px', + fontSize: '15px', + lineHeight: '1.4', + color: '#3c4149', }; const buttonContainer = { - padding: "27px 0 27px", + padding: '27px 0 27px', }; const button = { - backgroundColor: "#5e6ad2", - borderRadius: "3px", - fontWeight: "600", - color: "#fff", - fontSize: "15px", - textDecoration: "none", - textAlign: "center" as const, - display: "block", - padding: "11px 23px", + backgroundColor: '#5e6ad2', + borderRadius: '3px', + fontWeight: '600', + color: '#fff', + fontSize: '15px', + textDecoration: 'none', + textAlign: 'center' as const, + display: 'block', + padding: '11px 23px', }; const reportLink = { - fontSize: "14px", - color: "#b4becc", + fontSize: '14px', + color: '#b4becc', }; const hr = { - borderColor: "#dfe1e4", - margin: "42px 0 26px", + borderColor: '#dfe1e4', + margin: '42px 0 26px', }; const code = { - fontFamily: "monospace", - fontWeight: "700", - padding: "1px 4px", - backgroundColor: "#dfe1e4", - letterSpacing: "-0.3px", - fontSize: "21px", - borderRadius: "4px", - color: "#3c4149", + fontFamily: 'monospace', + fontWeight: '700', + padding: '1px 4px', + backgroundColor: '#dfe1e4', + letterSpacing: '-0.3px', + fontSize: '21px', + borderRadius: '4px', + color: '#3c4149', }; diff --git a/apps/demo/emails/magic-links/notion-magic-link.tsx b/apps/demo/emails/magic-links/notion-magic-link.tsx index 7386794972..1e00ac2b29 100644 --- a/apps/demo/emails/magic-links/notion-magic-link.tsx +++ b/apps/demo/emails/magic-links/notion-magic-link.tsx @@ -8,8 +8,8 @@ import { Link, Preview, Text, -} from "@react-email/components"; -import * as React from "react"; +} from '@react-email/components'; +import * as React from 'react'; interface NotionMagicLinkEmailProps { loginCode?: string; @@ -17,7 +17,7 @@ interface NotionMagicLinkEmailProps { const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` - : ""; + : ''; export const NotionMagicLinkEmail = ({ loginCode, @@ -33,22 +33,22 @@ export const NotionMagicLinkEmail = ({ target="_blank" style={{ ...link, - display: "block", - marginBottom: "16px", + display: 'block', + marginBottom: '16px', }} > Click here to log in with this magic link - + Or, copy and paste this temporary login code: {loginCode} If you didn't try to login, you can safely ignore this email. @@ -56,9 +56,9 @@ export const NotionMagicLinkEmail = ({ Hint: You can set a permanent password in Settings & members → My @@ -74,7 +74,7 @@ export const NotionMagicLinkEmail = ({ Notion.so @@ -88,63 +88,63 @@ export const NotionMagicLinkEmail = ({ ); NotionMagicLinkEmail.PreviewProps = { - loginCode: "sparo-ndigo-amurt-secan", + loginCode: 'sparo-ndigo-amurt-secan', } as NotionMagicLinkEmailProps; export default NotionMagicLinkEmail; const main = { - backgroundColor: "#ffffff", + backgroundColor: '#ffffff', }; const container = { - paddingLeft: "12px", - paddingRight: "12px", - margin: "0 auto", + paddingLeft: '12px', + paddingRight: '12px', + margin: '0 auto', }; const h1 = { - color: "#333", + color: '#333', fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif", - fontSize: "24px", - fontWeight: "bold", - margin: "40px 0", - padding: "0", + fontSize: '24px', + fontWeight: 'bold', + margin: '40px 0', + padding: '0', }; const link = { - color: "#2754C5", + color: '#2754C5', fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif", - fontSize: "14px", - textDecoration: "underline", + fontSize: '14px', + textDecoration: 'underline', }; const text = { - color: "#333", + color: '#333', fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif", - fontSize: "14px", - margin: "24px 0", + fontSize: '14px', + margin: '24px 0', }; const footer = { - color: "#898989", + color: '#898989', fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif", - fontSize: "12px", - lineHeight: "22px", - marginTop: "12px", - marginBottom: "24px", + fontSize: '12px', + lineHeight: '22px', + marginTop: '12px', + marginBottom: '24px', }; const code = { - display: "inline-block", - padding: "16px 4.5%", - width: "90.5%", - backgroundColor: "#f4f4f4", - borderRadius: "5px", - border: "1px solid #eee", - color: "#333", + display: 'inline-block', + padding: '16px 4.5%', + width: '90.5%', + backgroundColor: '#f4f4f4', + borderRadius: '5px', + border: '1px solid #eee', + color: '#333', }; diff --git a/apps/demo/emails/magic-links/plaid-verify-identity.tsx b/apps/demo/emails/magic-links/plaid-verify-identity.tsx index 877162d14e..cdcd26cf72 100644 --- a/apps/demo/emails/magic-links/plaid-verify-identity.tsx +++ b/apps/demo/emails/magic-links/plaid-verify-identity.tsx @@ -8,8 +8,8 @@ import { Link, Section, Text, -} from "@react-email/components"; -import * as React from "react"; +} from '@react-email/components'; +import * as React from 'react'; interface PlaidVerifyIdentityEmailProps { validationCode?: string; @@ -17,7 +17,7 @@ interface PlaidVerifyIdentityEmailProps { const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` - : ""; + : ''; export const PlaidVerifyIdentityEmail = ({ validationCode, @@ -42,10 +42,10 @@ export const PlaidVerifyIdentityEmail = ({ Not expecting this email? - Contact{" "} + Contact{' '} login@plaid.com - {" "} + {' '} if you did not request this code. @@ -55,104 +55,104 @@ export const PlaidVerifyIdentityEmail = ({ ); PlaidVerifyIdentityEmail.PreviewProps = { - validationCode: "144833", + validationCode: '144833', } as PlaidVerifyIdentityEmailProps; export default PlaidVerifyIdentityEmail; const main = { - backgroundColor: "#ffffff", - fontFamily: "HelveticaNeue,Helvetica,Arial,sans-serif", + backgroundColor: '#ffffff', + fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif', }; const container = { - backgroundColor: "#ffffff", - border: "1px solid #eee", - borderRadius: "5px", - boxShadow: "0 5px 10px rgba(20,50,70,.2)", - marginTop: "20px", - maxWidth: "360px", - margin: "0 auto", - padding: "68px 0 130px", + backgroundColor: '#ffffff', + border: '1px solid #eee', + borderRadius: '5px', + boxShadow: '0 5px 10px rgba(20,50,70,.2)', + marginTop: '20px', + maxWidth: '360px', + margin: '0 auto', + padding: '68px 0 130px', }; const logo = { - margin: "0 auto", + margin: '0 auto', }; const tertiary = { - color: "#0a85ea", - fontSize: "11px", + color: '#0a85ea', + fontSize: '11px', fontWeight: 700, - fontFamily: "HelveticaNeue,Helvetica,Arial,sans-serif", - height: "16px", - letterSpacing: "0", - lineHeight: "16px", - margin: "16px 8px 8px 8px", - textTransform: "uppercase" as const, - textAlign: "center" as const, + fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif', + height: '16px', + letterSpacing: '0', + lineHeight: '16px', + margin: '16px 8px 8px 8px', + textTransform: 'uppercase' as const, + textAlign: 'center' as const, }; const secondary = { - color: "#000", - display: "inline-block", - fontFamily: "HelveticaNeue-Medium,Helvetica,Arial,sans-serif", - fontSize: "20px", + color: '#000', + display: 'inline-block', + fontFamily: 'HelveticaNeue-Medium,Helvetica,Arial,sans-serif', + fontSize: '20px', fontWeight: 500, - lineHeight: "24px", - marginBottom: "0", - marginTop: "0", - textAlign: "center" as const, + lineHeight: '24px', + marginBottom: '0', + marginTop: '0', + textAlign: 'center' as const, }; const codeContainer = { - background: "rgba(0,0,0,.05)", - borderRadius: "4px", - margin: "16px auto 14px", - verticalAlign: "middle", - width: "280px", + background: 'rgba(0,0,0,.05)', + borderRadius: '4px', + margin: '16px auto 14px', + verticalAlign: 'middle', + width: '280px', }; const code = { - color: "#000", - display: "inline-block", - fontFamily: "HelveticaNeue-Bold", - fontSize: "32px", + color: '#000', + display: 'inline-block', + fontFamily: 'HelveticaNeue-Bold', + fontSize: '32px', fontWeight: 700, - letterSpacing: "6px", - lineHeight: "40px", - paddingBottom: "8px", - paddingTop: "8px", - margin: "0 auto", - width: "100%", - textAlign: "center" as const, + letterSpacing: '6px', + lineHeight: '40px', + paddingBottom: '8px', + paddingTop: '8px', + margin: '0 auto', + width: '100%', + textAlign: 'center' as const, }; const paragraph = { - color: "#444", - fontSize: "15px", - fontFamily: "HelveticaNeue,Helvetica,Arial,sans-serif", - letterSpacing: "0", - lineHeight: "23px", - padding: "0 40px", - margin: "0", - textAlign: "center" as const, + color: '#444', + fontSize: '15px', + fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif', + letterSpacing: '0', + lineHeight: '23px', + padding: '0 40px', + margin: '0', + textAlign: 'center' as const, }; const link = { - color: "#444", - textDecoration: "underline", + color: '#444', + textDecoration: 'underline', }; const footer = { - color: "#000", - fontSize: "12px", + color: '#000', + fontSize: '12px', fontWeight: 800, - letterSpacing: "0", - lineHeight: "23px", - margin: "0", - marginTop: "20px", - fontFamily: "HelveticaNeue,Helvetica,Arial,sans-serif", - textAlign: "center" as const, - textTransform: "uppercase" as const, + letterSpacing: '0', + lineHeight: '23px', + margin: '0', + marginTop: '20px', + fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif', + textAlign: 'center' as const, + textTransform: 'uppercase' as const, }; diff --git a/apps/demo/emails/magic-links/raycast-magic-link.tsx b/apps/demo/emails/magic-links/raycast-magic-link.tsx index 3b49182426..b552cc7940 100644 --- a/apps/demo/emails/magic-links/raycast-magic-link.tsx +++ b/apps/demo/emails/magic-links/raycast-magic-link.tsx @@ -10,8 +10,8 @@ import { Preview, Section, Text, -} from "@react-email/components"; -import * as React from "react"; +} from '@react-email/components'; +import * as React from 'react'; interface RaycastMagicLinkEmailProps { magicLink?: string; @@ -19,7 +19,7 @@ interface RaycastMagicLinkEmailProps { const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` - : ""; + : ''; export const RaycastMagicLinkEmail = ({ magicLink, @@ -56,9 +56,9 @@ export const RaycastMagicLinkEmail = ({ width={32} height={32} style={{ - WebkitFilter: "grayscale(100%)", - filter: "grayscale(100%)", - margin: "20px 0", + WebkitFilter: 'grayscale(100%)', + filter: 'grayscale(100%)', + margin: '20px 0', }} /> Raycast Technologies Inc. @@ -71,51 +71,51 @@ export const RaycastMagicLinkEmail = ({ ); RaycastMagicLinkEmail.PreviewProps = { - magicLink: "https://raycast.com", + magicLink: 'https://raycast.com', } as RaycastMagicLinkEmailProps; export default RaycastMagicLinkEmail; const main = { - backgroundColor: "#ffffff", + backgroundColor: '#ffffff', fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', }; const container = { - margin: "0 auto", - padding: "20px 25px 48px", + margin: '0 auto', + padding: '20px 25px 48px', backgroundImage: 'url("/static/raycast-bg.png")', - backgroundPosition: "bottom", - backgroundRepeat: "no-repeat, no-repeat", + backgroundPosition: 'bottom', + backgroundRepeat: 'no-repeat, no-repeat', }; const heading = { - fontSize: "28px", - fontWeight: "bold", - marginTop: "48px", + fontSize: '28px', + fontWeight: 'bold', + marginTop: '48px', }; const body = { - margin: "24px 0", + margin: '24px 0', }; const paragraph = { - fontSize: "16px", - lineHeight: "26px", + fontSize: '16px', + lineHeight: '26px', }; const link = { - color: "#FF6363", + color: '#FF6363', }; const hr = { - borderColor: "#dddddd", - marginTop: "48px", + borderColor: '#dddddd', + marginTop: '48px', }; const footer = { - color: "#8898aa", - fontSize: "12px", - marginLeft: "4px", + color: '#8898aa', + fontSize: '12px', + marginLeft: '4px', }; diff --git a/apps/demo/emails/magic-links/slack-confirm.tsx b/apps/demo/emails/magic-links/slack-confirm.tsx index aea983929a..0a7a662ee5 100644 --- a/apps/demo/emails/magic-links/slack-confirm.tsx +++ b/apps/demo/emails/magic-links/slack-confirm.tsx @@ -1,7 +1,7 @@ import { Body, - Container, Column, + Container, Head, Heading, Html, @@ -11,8 +11,8 @@ import { Row, Section, Text, -} from "@react-email/components"; -import * as React from "react"; +} from '@react-email/components'; +import * as React from 'react'; interface SlackConfirmEmailProps { validationCode?: string; @@ -20,7 +20,7 @@ interface SlackConfirmEmailProps { const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` - : ""; + : ''; export const SlackConfirmEmail = ({ validationCode, @@ -55,7 +55,7 @@ export const SlackConfirmEmail = ({
- + ( @@ -38,7 +38,7 @@ export const CodepenChallengersEmail = () => ( - This week: #CodePenChallenge:{" "} + This week: #CodePenChallenge:{' '} Cubes @@ -47,7 +47,7 @@ export const CodepenChallengersEmail = () => ( Last week, we kicked things off with round shapes. We "rounded" up - the Pens from week one in our{" "} + the Pens from week one in our{' '} #CodePenChallenge: Round collection. @@ -73,7 +73,7 @@ export const CodepenChallengersEmail = () => ( - 💪 Your Challenge:{" "} + 💪 Your Challenge:{' '} create a Pen that includes cube shapes. @@ -106,18 +106,18 @@ export const CodepenChallengersEmail = () => (
- To participate:{" "} - Create a Pen → and tag it{" "} + To participate:{' '} + Create a Pen → and tag it{' '} codepenchallenge - {" "} + {' '} and - {" "} + {' '} cpc-cubes . We'll be watching and gathering the Pens into a Collection, and - sharing on Twitter and{" "} + sharing on Twitter and{' '} Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well). @@ -154,7 +154,7 @@ export const CodepenChallengersEmail = () => ( 🌟 Here's a mind-bending idea that can combine the round shapes - from week one with this week's cube theme:{" "} + from week one with this week's cube theme:{' '} Spherical Cubes 😳 Solving longstanding mathematical mysteries is probably outside the scope of a CodePen challenge, but you could use front-end @@ -168,12 +168,12 @@ export const CodepenChallengersEmail = () => (
📖 - Learn all about{" "} + Learn all about{' '} How CSS Perspective Works and how to build a 3D CSS cube from scratch in Amit Sheen's in-depth tutorial for CSS-Tricks. Or, check out stunning - examples of WebGL cubes from Matthias Hurrle:{" "} - Just Ice and{" "} + examples of WebGL cubes from Matthias Hurrle:{' '} + Just Ice and{' '} Posing.
@@ -182,10 +182,10 @@ export const CodepenChallengersEmail = () => ( 📖 Want to go beyond the square cube? Draw inspiration from - EntropyReversed's{" "} - Pulsating Tesseract, Josetxu's{" "} + EntropyReversed's{' '} + Pulsating Tesseract, Josetxu's{' '} Rainbow Cuboid Loader, or Ana - Tudor's{" "} + Tudor's{' '} Pure CSS cuboid jellyfish. @@ -195,11 +195,11 @@ export const CodepenChallengersEmail = () => ( Did that spherical cubes concept pique your interest? Explore Ryan Mulligan's Cube Sphere, - Munir Safi's{" "} + Munir Safi's{' '} 3D Sphere to Cube Animation With Virtual Trackball - {" "} - and Ana Tudor's{" "} + {' '} + and Ana Tudor's{' '} Infinitely unpack prism for more mindbending cube concepts that test the boundaries of how shapes interact with each other. @@ -215,10 +215,10 @@ export const CodepenChallengersEmail = () => (
- You can adjust your{" "} - email preferences any time, or{" "} + You can adjust your{' '} + email preferences any time, or{' '} instantly opt out of emails of this - kind. Need help with anything? Hit up{" "} + kind. Need help with anything? Hit up{' '} support.
@@ -231,189 +231,189 @@ export default CodepenChallengersEmail; const main = { fontFamily: '"Google Sans",Roboto,RobotoDraft,Helvetica,Arial,sans-serif', - backgroundColor: "#505050", - margin: "0", + backgroundColor: '#505050', + margin: '0', }; const imgHeader = { - margin: "auto", - maxWidth: "100%", + margin: 'auto', + maxWidth: '100%', }; const imgCube = { - maxWidth: "100%", + maxWidth: '100%', }; const header = { - width: "100%", - backgroundColor: "#191919", - margin: "0 auto", - paddingBottom: "30px", - zIndex: "999", + width: '100%', + backgroundColor: '#191919', + margin: '0 auto', + paddingBottom: '30px', + zIndex: '999', }; const container = { - margin: "0 auto", - width: "648px", - maxWidth: "100%", - position: "relative" as const, + margin: '0 auto', + width: '648px', + maxWidth: '100%', + position: 'relative' as const, }; const challengeLink = { - backgroundColor: "#505050", - textAlign: "center" as const, - padding: "10px 0", - fontSize: "13px", - position: "absolute" as const, - width: "648px", - maxWidth: "100%", - top: "-28px", - margin: "0 0 16px 0", + backgroundColor: '#505050', + textAlign: 'center' as const, + padding: '10px 0', + fontSize: '13px', + position: 'absolute' as const, + width: '648px', + maxWidth: '100%', + top: '-28px', + margin: '0 0 16px 0', }; const link = { - color: "#fff", - cursor: "pointer", + color: '#fff', + cursor: 'pointer', }; const blueLink = { - color: "#15c", - cursor: "pointer", + color: '#15c', + cursor: 'pointer', }; const heading = { - background: "#f0d361", - padding: "30px", - color: "#191919", - fontWeight: "400", - marginBottom: "0", + background: '#f0d361', + padding: '30px', + color: '#191919', + fontWeight: '400', + marginBottom: '0', }; const section = { - margin: "0", - background: "#fff", - padding: "0 24px", + margin: '0', + background: '#fff', + padding: '0 24px', }; const yellowSection = { - background: "#f5d247", - padding: "30px", - fontSize: "18px", - lineHeight: "1.5", + background: '#f5d247', + padding: '30px', + fontSize: '18px', + lineHeight: '1.5', }; const text = { - fontSize: "16px", + fontSize: '16px', }; -const cubeText = { fontSize: "32px", margin: "4px 0 0 0" }; +const cubeText = { fontSize: '32px', margin: '4px 0 0 0' }; const yourChallenge = { - fontSize: "16px", - border: "6px solid #ebd473", - padding: "20px", - margin: "0 0 40px 0", + fontSize: '16px', + border: '6px solid #ebd473', + padding: '20px', + margin: '0 0 40px 0', }; const sectionPro = { - marginTop: "40px", - marginBottom: "24px", - textAlign: "center" as const, - background: "#0b112a", - color: "#fff", - padding: "35px 20px 30px 20px", - border: "6px solid #2138c6", + marginTop: '40px', + marginBottom: '24px', + textAlign: 'center' as const, + background: '#0b112a', + color: '#fff', + padding: '35px 20px 30px 20px', + border: '6px solid #2138c6', }; -const imagePro = { margin: "0 auto 30px auto" }; +const imagePro = { margin: '0 auto 30px auto' }; const button = { - background: "#2138c6", - color: "#fff", - border: "0", - fontSize: "15px", - lineHeight: "18px", - cursor: "pointer", - borderRadius: "4px", - padding: "12px", + background: '#2138c6', + color: '#fff', + border: '0', + fontSize: '15px', + lineHeight: '18px', + cursor: 'pointer', + borderRadius: '4px', + padding: '12px', }; const resourcesTitle = { - fontWeight: "900", - lineHeight: "1.1", - marginTop: "-40px", - fontSize: "18px", + fontWeight: '900', + lineHeight: '1.1', + marginTop: '-40px', + fontSize: '18px', }; const ideasTitle = { - fontWeight: "900", - lineHeight: "1.1", - fontSize: "18px", + fontWeight: '900', + lineHeight: '1.1', + fontSize: '18px', }; const ideas = { - width: "50%", - paddingRight: "10px", + width: '50%', + paddingRight: '10px', }; const resources = { - width: "50%", - paddingLeft: "10px", + width: '50%', + paddingLeft: '10px', }; const card = { - padding: "20px", - margin: "0 0 20px 0", - borderRadius: "10px", - fontSize: "36px", - textAlign: "center" as const, + padding: '20px', + margin: '0 0 20px 0', + borderRadius: '10px', + fontSize: '36px', + textAlign: 'center' as const, }; const yellowCard = { ...card, - background: "#fff4c8", - border: "1px solid #f4d247", + background: '#fff4c8', + border: '1px solid #f4d247', }; const blueCard = { ...card, - background: "#d9f6ff", - border: "1px solid #92bfd0", + background: '#d9f6ff', + border: '1px solid #92bfd0', }; const textCard = { - fontSize: "13px", - textAlign: "left" as const, + fontSize: '13px', + textAlign: 'left' as const, }; const goToChallenge = { - margin: "40px 0 120px 0", - textAlign: "center" as const, + margin: '40px 0 120px 0', + textAlign: 'center' as const, }; const footerButton = { - fontSize: "26px", - color: "#15c", - background: "#222", - borderRadius: "4px", - fontWeight: "bold", - cursor: "pointer", - padding: "15px 30px", + fontSize: '26px', + color: '#15c', + background: '#222', + borderRadius: '4px', + fontWeight: 'bold', + cursor: 'pointer', + padding: '15px 30px', }; const footer = { - background: "#fff", - color: "#505050", - padding: "0 24px", - marginBottom: "48px", + background: '#fff', + color: '#505050', + padding: '0 24px', + marginBottom: '48px', }; const footerText = { - fontSize: "13px", + fontSize: '13px', }; const footerLink = { - textDecoration: "underline", - color: "#505050", - cursor: "pointer", + textDecoration: 'underline', + color: '#505050', + cursor: 'pointer', }; diff --git a/apps/demo/emails/newsletters/google-play-policy-update.tsx b/apps/demo/emails/newsletters/google-play-policy-update.tsx index a2ed0b1d66..fa36bb1651 100644 --- a/apps/demo/emails/newsletters/google-play-policy-update.tsx +++ b/apps/demo/emails/newsletters/google-play-policy-update.tsx @@ -1,7 +1,7 @@ import { Body, - Container, Column, + Container, Head, Hr, Html, @@ -11,12 +11,12 @@ import { Row, Section, Text, -} from "@react-email/components"; -import * as React from "react"; +} from '@react-email/components'; +import * as React from 'react'; const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` - : ""; + : ''; export const GooglePlayPolicyUpdateEmail = () => ( @@ -54,7 +54,7 @@ export const GooglePlayPolicyUpdateEmail = () => ( users. - We've added clarifications to our{" "} + We've added clarifications to our{' '} Target API Level policy @@ -64,17 +64,17 @@ export const GooglePlayPolicyUpdateEmail = () => (
- We’re noting exceptions to the{" "} + We’re noting exceptions to the{' '} Target API Level policy - , which can be found in our updated{" "} + , which can be found in our updated{' '} Help Center article. These exceptions include permanently private apps and apps that target automotive or wearables form factors and are bundled within - the same package.{" "} + the same package.{' '} Learn more @@ -84,7 +84,7 @@ export const GooglePlayPolicyUpdateEmail = () => ( We’re also extending the deadline to give you more time to adjust to these changes. Now, apps that target API level 29 or below will - start experiencing reduced distribution starting Jan 31, 2023{" "} + start experiencing reduced distribution starting Jan 31, 2023{' '} instead of Nov 1, 2022. If you need more time to update your app, you can request an extension to keep your app discoverable to all users until May 1, 2023. @@ -94,7 +94,7 @@ export const GooglePlayPolicyUpdateEmail = () => (
Thank you, - + The Google Play team
@@ -106,11 +106,11 @@ export const GooglePlayPolicyUpdateEmail = () => ( - + ( /> - + ( /> - + ( @@ -163,8 +163,8 @@ export const GooglePlayPolicyUpdateEmail = () => ( @@ -181,43 +181,43 @@ export const GooglePlayPolicyUpdateEmail = () => ( export default GooglePlayPolicyUpdateEmail; const main = { - backgroundColor: "#dbddde", + backgroundColor: '#dbddde', fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', }; const sectionLogo = { - padding: "0 40px", + padding: '0 40px', }; const headerBlue = { - marginTop: "-1px", + marginTop: '-1px', }; const container = { - margin: "30px auto", - backgroundColor: "#fff", + margin: '30px auto', + backgroundColor: '#fff', borderRadius: 5, - overflow: "hidden", + overflow: 'hidden', }; const containerContact = { - backgroundColor: "#f0fcff", - width: "90%", - borderRadius: "5px", - overflow: "hidden", - paddingLeft: "20px", + backgroundColor: '#f0fcff', + width: '90%', + borderRadius: '5px', + overflow: 'hidden', + paddingLeft: '20px', }; const heading = { - fontSize: "14px", - lineHeight: "26px", - fontWeight: "700", - color: "#004dcf", + fontSize: '14px', + lineHeight: '26px', + fontWeight: '700', + color: '#004dcf', }; const paragraphContent = { - padding: "0 40px", + padding: '0 40px', }; const paragraphList = { @@ -225,21 +225,21 @@ const paragraphList = { }; const paragraph = { - fontSize: "14px", - lineHeight: "22px", - color: "#3c4043", + fontSize: '14px', + lineHeight: '22px', + color: '#3c4043', }; const link = { ...paragraph, - color: "#004dcf", + color: '#004dcf', }; const hr = { - borderColor: "#e8eaed", - margin: "20px 0", + borderColor: '#e8eaed', + margin: '20px 0', }; const footer = { - maxWidth: "100%", + maxWidth: '100%', }; diff --git a/apps/demo/emails/newsletters/stack-overflow-tips.tsx b/apps/demo/emails/newsletters/stack-overflow-tips.tsx index 8910f85136..42d8b913a9 100644 --- a/apps/demo/emails/newsletters/stack-overflow-tips.tsx +++ b/apps/demo/emails/newsletters/stack-overflow-tips.tsx @@ -9,11 +9,11 @@ import { Img, Link, Preview, + Row, Section, Text, - Row, -} from "@react-email/components"; -import * as React from "react"; +} from '@react-email/components'; +import * as React from 'react'; interface StackOverflowTipsEmailProps { tips?: { id: number; description: string }[]; @@ -21,7 +21,7 @@ interface StackOverflowTipsEmailProps { const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` - : ""; + : ''; const PropDefaults: StackOverflowTipsEmailProps = { tips: [ @@ -33,7 +33,7 @@ const PropDefaults: StackOverflowTipsEmailProps = { { id: 1, description: - "To search within specific tag(s), enter them in square brackets: [javascript]", + 'To search within specific tag(s), enter them in square brackets: [javascript]', }, { id: 1, @@ -81,7 +81,7 @@ export const StackOverflowTipsEmail = ({ With more than 18 million questions, it's possible that someone has - already provided a solution to the problem you're facing.{" "} + already provided a solution to the problem you're facing.{' '}
@@ -127,10 +127,10 @@ export const StackOverflowTipsEmail = ({ - Unsubscribe from emails like this{" "} + Unsubscribe from emails like this{' '} - Edit email settings{" "} + Edit email settings{' '} Contact us @@ -146,7 +146,7 @@ export const StackOverflowTipsEmail = ({ Stack Overflow, 110 William Street, 28th Floor, New York, NY 10038 - {"<3"} + {'<3'}
@@ -159,134 +159,134 @@ StackOverflowTipsEmail.PreviewProps = { export default StackOverflowTipsEmail; const main = { - backgroundColor: "#f3f3f5", - fontFamily: "HelveticaNeue,Helvetica,Arial,sans-serif", + backgroundColor: '#f3f3f5', + fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif', }; -const headerContent = { padding: "20px 30px 15px" }; +const headerContent = { padding: '20px 30px 15px' }; const headerContentTitle = { - color: "#fff", - fontSize: "27px", - fontWeight: "bold", - lineHeight: "27px", + color: '#fff', + fontSize: '27px', + fontWeight: 'bold', + lineHeight: '27px', }; const headerContentSubtitle = { - color: "#fff", - fontSize: "17px", + color: '#fff', + fontSize: '17px', }; const headerImageContainer = { - padding: "30px 10px", + padding: '30px 10px', }; const headerImage = { - maxWidth: "100%", + maxWidth: '100%', }; const title = { - margin: "0 0 15px", - fontWeight: "bold", - fontSize: "21px", - lineHeight: "21px", - color: "#0c0d0e", + margin: '0 0 15px', + fontWeight: 'bold', + fontSize: '21px', + lineHeight: '21px', + color: '#0c0d0e', }; const paragraph = { - fontSize: "15px", - lineHeight: "21px", - color: "#3c3f44", + fontSize: '15px', + lineHeight: '21px', + color: '#3c3f44', }; const divider = { - margin: "30px 0", + margin: '30px 0', }; const container = { - width: "680px", - maxWidth: "100%", - margin: "0 auto", - backgroundColor: "#ffffff", + width: '680px', + maxWidth: '100%', + margin: '0 auto', + backgroundColor: '#ffffff', }; const footer = { - width: "680px", - maxWidth: "100%", - margin: "32px auto 0 auto", - padding: "0 30px", + width: '680px', + maxWidth: '100%', + margin: '32px auto 0 auto', + padding: '0 30px', }; const content = { - padding: "30px 30px 40px 30px", + padding: '30px 30px 40px 30px', }; const logo = { - display: "flex", - background: "#f3f3f5", - padding: "20px 30px", + display: 'flex', + background: '#f3f3f5', + padding: '20px 30px', }; const header = { - borderRadius: "5px 5px 0 0", - display: "flex", - flexDireciont: "column", - backgroundColor: "#2b2d6e", + borderRadius: '5px 5px 0 0', + display: 'flex', + flexDireciont: 'column', + backgroundColor: '#2b2d6e', }; const buttonContainer = { - marginTop: "24px", - display: "block", + marginTop: '24px', + display: 'block', }; const button = { - backgroundColor: "#0095ff", - border: "1px solid #0077cc", - fontSize: "17px", - lineHeight: "17px", - padding: "13px 17px", - borderRadius: "4px", - maxWidth: "120px", - color: "#fff", + backgroundColor: '#0095ff', + border: '1px solid #0077cc', + fontSize: '17px', + lineHeight: '17px', + padding: '13px 17px', + borderRadius: '4px', + maxWidth: '120px', + color: '#fff', }; const footerDivider = { ...divider, - borderColor: "#d6d8db", + borderColor: '#d6d8db', }; const footerText = { - fontSize: "12px", - lineHeight: "15px", - color: "#9199a1", - margin: "0", + fontSize: '12px', + lineHeight: '15px', + color: '#9199a1', + margin: '0', }; const footerLink = { - display: "inline-block", - color: "#9199a1", - textDecoration: "underline", - fontSize: "12px", - marginRight: "10px", - marginBottom: "0", - marginTop: "8px", + display: 'inline-block', + color: '#9199a1', + textDecoration: 'underline', + fontSize: '12px', + marginRight: '10px', + marginBottom: '0', + marginTop: '8px', }; const footerAddress = { - margin: "4px 0", - fontSize: "12px", - lineHeight: "15px", - color: "#9199a1", + margin: '4px 0', + fontSize: '12px', + lineHeight: '15px', + color: '#9199a1', }; const footerHeart = { - borderRadius: "1px", - border: "1px solid #d6d9dc", - padding: "4px 6px 3px 6px", - fontSize: "11px", - lineHeight: "11px", - fontFamily: "Consolas,monospace", - color: "#e06c77", - maxWidth: "min-content", - margin: "0 0 32px 0", + borderRadius: '1px', + border: '1px solid #d6d9dc', + padding: '4px 6px 3px 6px', + fontSize: '11px', + lineHeight: '11px', + fontFamily: 'Consolas,monospace', + color: '#e06c77', + maxWidth: 'min-content', + margin: '0 0 32px 0', }; diff --git a/apps/demo/emails/notifications/github-access-token.tsx b/apps/demo/emails/notifications/github-access-token.tsx index 8e14f9a41e..48df0c522e 100644 --- a/apps/demo/emails/notifications/github-access-token.tsx +++ b/apps/demo/emails/notifications/github-access-token.tsx @@ -9,8 +9,8 @@ import { Preview, Section, Text, -} from "@react-email/components"; -import * as React from "react"; +} from '@react-email/components'; +import * as React from 'react'; interface GithubAccessTokenEmailProps { username?: string; @@ -18,7 +18,7 @@ interface GithubAccessTokenEmailProps { const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` - : ""; + : ''; export const GithubAccessTokenEmail = ({ username, @@ -54,7 +54,7 @@ export const GithubAccessTokenEmail = ({ - Your security audit log ・{" "} + Your security audit log ・{' '} Contact support @@ -67,62 +67,62 @@ export const GithubAccessTokenEmail = ({ ); GithubAccessTokenEmail.PreviewProps = { - username: "alanturing", + username: 'alanturing', } as GithubAccessTokenEmailProps; export default GithubAccessTokenEmail; const main = { - backgroundColor: "#ffffff", - color: "#24292e", + backgroundColor: '#ffffff', + color: '#24292e', fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"', }; const container = { - maxWidth: "480px", - margin: "0 auto", - padding: "20px 0 48px", + maxWidth: '480px', + margin: '0 auto', + padding: '20px 0 48px', }; const title = { - fontSize: "24px", + fontSize: '24px', lineHeight: 1.25, }; const section = { - padding: "24px", - border: "solid 1px #dedede", - borderRadius: "5px", - textAlign: "center" as const, + padding: '24px', + border: 'solid 1px #dedede', + borderRadius: '5px', + textAlign: 'center' as const, }; const text = { - margin: "0 0 10px 0", - textAlign: "left" as const, + margin: '0 0 10px 0', + textAlign: 'left' as const, }; const button = { - fontSize: "14px", - backgroundColor: "#28a745", - color: "#fff", + fontSize: '14px', + backgroundColor: '#28a745', + color: '#fff', lineHeight: 1.5, - borderRadius: "0.5em", - padding: "12px 24px", + borderRadius: '0.5em', + padding: '12px 24px', }; const links = { - textAlign: "center" as const, + textAlign: 'center' as const, }; const link = { - color: "#0366d6", - fontSize: "12px", + color: '#0366d6', + fontSize: '12px', }; const footer = { - color: "#6a737d", - fontSize: "12px", - textAlign: "center" as const, - marginTop: "60px", + color: '#6a737d', + fontSize: '12px', + textAlign: 'center' as const, + marginTop: '60px', }; diff --git a/apps/demo/emails/notifications/papermark-year-in-review.tsx b/apps/demo/emails/notifications/papermark-year-in-review.tsx index 2a06b30558..a7097e6f10 100644 --- a/apps/demo/emails/notifications/papermark-year-in-review.tsx +++ b/apps/demo/emails/notifications/papermark-year-in-review.tsx @@ -12,7 +12,7 @@ import { Section, Tailwind, Text, -} from "@react-email/components"; +} from '@react-email/components'; interface PapermarkYearInReviewEmailProps { year?: number; @@ -85,7 +85,7 @@ export default function PapermarkYearInReviewEmail({ with your visitors. -
+
Your activity @@ -150,7 +150,7 @@ export default function PapermarkYearInReviewEmail({ that got so much attention? -
+
You're in the top @@ -177,8 +177,8 @@ export default function PapermarkYearInReviewEmail({ key={index} className="rounded-full bg-[#10b981] px-3 py-1 text-sm font-medium text-white" style={{ - margin: "4px 4px", - display: "inline-block", + margin: '4px 4px', + display: 'inline-block', }} > {location} @@ -222,10 +222,10 @@ PapermarkYearInReviewEmail.PreviewProps = { uploadedDocuments: 25, sharedLinks: 50, receivedViews: 500, - topDocumentName: "Q4 Financial Report", + topDocumentName: 'Q4 Financial Report', topDocumentViews: 150, - mostActiveMonth: "September", + mostActiveMonth: 'September', mostActiveMonthViews: 200, sharerPercentile: 95, - viewingLocations: ["United States", "United Kingdom", "Germany", "Japan"], + viewingLocations: ['United States', 'United Kingdom', 'Germany', 'Japan'], } satisfies PapermarkYearInReviewEmailProps; diff --git a/apps/demo/emails/notifications/vercel-invite-user.tsx b/apps/demo/emails/notifications/vercel-invite-user.tsx index a7a82a997b..af7380f680 100644 --- a/apps/demo/emails/notifications/vercel-invite-user.tsx +++ b/apps/demo/emails/notifications/vercel-invite-user.tsx @@ -1,8 +1,8 @@ import { Body, Button, - Container, Column, + Container, Head, Heading, Hr, @@ -12,10 +12,10 @@ import { Preview, Row, Section, - Text, Tailwind, -} from "@react-email/components"; -import * as React from "react"; + Text, +} from '@react-email/components'; +import * as React from 'react'; interface VercelInviteUserEmailProps { username?: string; @@ -31,7 +31,7 @@ interface VercelInviteUserEmailProps { const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` - : ""; + : ''; export const VercelInviteUserEmail = ({ username, @@ -76,7 +76,7 @@ export const VercelInviteUserEmail = ({ > {invitedByEmail} - ) has invited you to the {teamName} team on{" "} + ) has invited you to the {teamName} team on{' '} Vercel.
@@ -116,17 +116,17 @@ export const VercelInviteUserEmail = ({
- or copy and paste this URL into your browser:{" "} + or copy and paste this URL into your browser:{' '} {inviteLink}
- This invitation was intended for{" "} + This invitation was intended for{' '} {username}. This invite was - sent from {inviteFromIp}{" "} - located in{" "} + sent from {inviteFromIp}{' '} + located in{' '} {inviteFromLocation}. If you were not expecting this invitation, you can ignore this email. If you are concerned about your account's safety, please reply to @@ -140,15 +140,15 @@ export const VercelInviteUserEmail = ({ }; VercelInviteUserEmail.PreviewProps = { - username: "alanturing", + username: 'alanturing', userImage: `${baseUrl}/static/vercel-user.png`, - invitedByUsername: "Alan", - invitedByEmail: "alan.turing@example.com", - teamName: "Enigma", + invitedByUsername: 'Alan', + invitedByEmail: 'alan.turing@example.com', + teamName: 'Enigma', teamImage: `${baseUrl}/static/vercel-team.png`, - inviteLink: "https://vercel.com/teams/invite/foo", - inviteFromIp: "204.13.186.218", - inviteFromLocation: "São Paulo, Brazil", + inviteLink: 'https://vercel.com/teams/invite/foo', + inviteFromIp: '204.13.186.218', + inviteFromLocation: 'São Paulo, Brazil', } as VercelInviteUserEmailProps; export default VercelInviteUserEmail; diff --git a/apps/demo/emails/notifications/yelp-recent-login.tsx b/apps/demo/emails/notifications/yelp-recent-login.tsx index 4a3ec1ebae..0b2f9818f0 100644 --- a/apps/demo/emails/notifications/yelp-recent-login.tsx +++ b/apps/demo/emails/notifications/yelp-recent-login.tsx @@ -1,8 +1,8 @@ import { Body, Button, - Container, Column, + Container, Head, Heading, Html, @@ -11,8 +11,8 @@ import { Row, Section, Text, -} from "@react-email/components"; -import * as React from "react"; +} from '@react-email/components'; +import * as React from 'react'; interface YelpRecentLoginEmailProps { userFirstName?: string; @@ -24,7 +24,7 @@ interface YelpRecentLoginEmailProps { const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` - : ""; + : ''; export const YelpRecentLoginEmail = ({ userFirstName, @@ -33,9 +33,9 @@ export const YelpRecentLoginEmail = ({ loginLocation, loginIp, }: YelpRecentLoginEmailProps) => { - const formattedDate = new Intl.DateTimeFormat("en", { - dateStyle: "long", - timeStyle: "short", + const formattedDate = new Intl.DateTimeFormat('en', { + dateStyle: 'long', + timeStyle: 'short', }).format(loginDate); return ( @@ -57,13 +57,13 @@ export const YelpRecentLoginEmail = ({ /> - + Hi {userFirstName}, @@ -72,8 +72,8 @@ export const YelpRecentLoginEmail = ({ as="h2" style={{ fontSize: 26, - fontWeight: "bold", - textAlign: "center", + fontWeight: 'bold', + textAlign: 'center', }} > We noticed a recent login to your Yelp account. @@ -93,7 +93,7 @@ export const YelpRecentLoginEmail = ({ - + @@ -128,9 +128,9 @@ export const YelpRecentLoginEmail = ({ © 2022 | Yelp Inc., 350 Mission Street, San Francisco, CA 94105, @@ -143,17 +143,17 @@ export const YelpRecentLoginEmail = ({ }; YelpRecentLoginEmail.PreviewProps = { - userFirstName: "Alan", - loginDate: new Date("September 7, 2022, 10:58 am"), - loginDevice: "Chrome on Mac OS X", - loginLocation: "Upland, California, United States", - loginIp: "47.149.53.167", + userFirstName: 'Alan', + loginDate: new Date('September 7, 2022, 10:58 am'), + loginDevice: 'Chrome on Mac OS X', + loginLocation: 'Upland, California, United States', + loginIp: '47.149.53.167', } as YelpRecentLoginEmailProps; export default YelpRecentLoginEmail; const main = { - backgroundColor: "#fff", + backgroundColor: '#fff', fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', }; @@ -163,39 +163,39 @@ const paragraph = { }; const logo = { - padding: "30px 20px", + padding: '30px 20px', }; const containerButton = { - display: "flex", - justifyContent: "center", - width: "100%", + display: 'flex', + justifyContent: 'center', + width: '100%', }; const button = { - backgroundColor: "#e00707", + backgroundColor: '#e00707', borderRadius: 3, - color: "#FFF", - fontWeight: "bold", - border: "1px solid rgb(0,0,0, 0.1)", - cursor: "pointer", - padding: "12px 30px", + color: '#FFF', + fontWeight: 'bold', + border: '1px solid rgb(0,0,0, 0.1)', + cursor: 'pointer', + padding: '12px 30px', }; const content = { - border: "1px solid rgb(0,0,0, 0.1)", - borderRadius: "3px", - overflow: "hidden", + border: '1px solid rgb(0,0,0, 0.1)', + borderRadius: '3px', + overflow: 'hidden', }; const image = { - maxWidth: "100%", + maxWidth: '100%', }; const boxInfos = { - padding: "20px", + padding: '20px', }; const containerImageFooter = { - padding: "45px 0 0 0", + padding: '45px 0 0 0', }; diff --git a/apps/demo/emails/receipts/apple-receipt.tsx b/apps/demo/emails/receipts/apple-receipt.tsx index 5e5d9a20e6..9f4938a0b8 100644 --- a/apps/demo/emails/receipts/apple-receipt.tsx +++ b/apps/demo/emails/receipts/apple-receipt.tsx @@ -1,7 +1,7 @@ import { Body, - Container, Column, + Container, Head, Hr, Html, @@ -11,12 +11,12 @@ import { Row, Section, Text, -} from "@react-email/components"; -import * as React from "react"; +} from '@react-email/components'; +import * as React from 'react'; const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` - : ""; + : ''; export const AppleReceiptEmail = () => ( @@ -44,7 +44,7 @@ export const AppleReceiptEmail = () => (
Save 3% on all your Apple purchases with Apple Card. - 1{" "} + 1{' '} Apply and use in minutes @@ -61,8 +61,8 @@ export const AppleReceiptEmail = () => ( alan.turing@gmail.com @@ -83,8 +83,8 @@ export const AppleReceiptEmail = () => ( ML4F5L8522 @@ -114,7 +114,7 @@ export const AppleReceiptEmail = () => (
- + ( style={productIcon} /> - + HBO Max: Stream TV & Movies HBO Max Ad-Free (Monthly) Renews Aug 20, 2023 @@ -229,8 +229,8 @@ export const AppleReceiptEmail = () => ( Privacy: We use a - {" "} - Subscriber ID{" "} + {' '} + Subscriber ID{' '} to provide reports to developers. @@ -244,19 +244,19 @@ export const AppleReceiptEmail = () => ( - Learn how to{" "} + Learn how to{' '} manage your password preferences - {" "} + {' '} for iTunes, Apple Books, and App Store purchases. - {" "} + {' '} You have the option to stop receiving email receipts for your subscription renewals. If you have opted out, you can still view your receipts in your account under Purchase History. To manage receipts or - to opt in again, go to{" "} + to opt in again, go to{' '} Account Settings. @@ -276,18 +276,18 @@ export const AppleReceiptEmail = () => ( Account Settings - {" "} - •{" "} + {' '} + •{' '} Terms of Sale - {" "} - •{" "} + {' '} + •{' '} - Privacy Policy{" "} + Privacy Policy{' '} - Copyright © 2023 Apple Inc.
{" "} + Copyright © 2023 Apple Inc.
{' '} All rights reserved @@ -299,216 +299,216 @@ export default AppleReceiptEmail; const main = { fontFamily: '"Helvetica Neue",Helvetica,Arial,sans-serif', - backgroundColor: "#ffffff", + backgroundColor: '#ffffff', }; const resetText = { - margin: "0", - padding: "0", + margin: '0', + padding: '0', lineHeight: 1.4, }; const container = { - margin: "0 auto", - padding: "20px 0 48px", - width: "660px", - maxWidth: "100%", + margin: '0 auto', + padding: '20px 0 48px', + width: '660px', + maxWidth: '100%', }; -const tableCell = { display: "table-cell" }; +const tableCell = { display: 'table-cell' }; const heading = { - fontSize: "32px", - fontWeight: "300", - color: "#888888", + fontSize: '32px', + fontWeight: '300', + color: '#888888', }; const cupomText = { - textAlign: "center" as const, - margin: "36px 0 40px 0", - fontSize: "14px", - fontWeight: "500", - color: "#111111", + textAlign: 'center' as const, + margin: '36px 0 40px 0', + fontSize: '14px', + fontWeight: '500', + color: '#111111', }; const supStyle = { - fontWeight: "300", + fontWeight: '300', }; const informationTable = { - borderCollapse: "collapse" as const, - borderSpacing: "0px", - color: "rgb(51,51,51)", - backgroundColor: "rgb(250,250,250)", - borderRadius: "3px", - fontSize: "12px", + borderCollapse: 'collapse' as const, + borderSpacing: '0px', + color: 'rgb(51,51,51)', + backgroundColor: 'rgb(250,250,250)', + borderRadius: '3px', + fontSize: '12px', }; const informationTableRow = { - height: "46px", + height: '46px', }; const informationTableColumn = { - paddingLeft: "20px", - borderStyle: "solid", - borderColor: "white", - borderWidth: "0px 1px 1px 0px", - height: "44px", + paddingLeft: '20px', + borderStyle: 'solid', + borderColor: 'white', + borderWidth: '0px 1px 1px 0px', + height: '44px', }; const informationTableLabel = { ...resetText, - color: "rgb(102,102,102)", - fontSize: "10px", + color: 'rgb(102,102,102)', + fontSize: '10px', }; const informationTableValue = { - fontSize: "12px", - margin: "0", - padding: "0", + fontSize: '12px', + margin: '0', + padding: '0', lineHeight: 1.4, }; const productTitleTable = { ...informationTable, - margin: "30px 0 15px 0", - height: "24px", + margin: '30px 0 15px 0', + height: '24px', }; const productsTitle = { - background: "#fafafa", - paddingLeft: "10px", - fontSize: "14px", - fontWeight: "500", - margin: "0", + background: '#fafafa', + paddingLeft: '10px', + fontSize: '14px', + fontWeight: '500', + margin: '0', }; const productIcon = { - margin: "0 0 0 20px", - borderRadius: "14px", - border: "1px solid rgba(128,128,128,0.2)", + margin: '0 0 0 20px', + borderRadius: '14px', + border: '1px solid rgba(128,128,128,0.2)', }; -const productTitle = { fontSize: "12px", fontWeight: "600", ...resetText }; +const productTitle = { fontSize: '12px', fontWeight: '600', ...resetText }; const productDescription = { - fontSize: "12px", - color: "rgb(102,102,102)", + fontSize: '12px', + color: 'rgb(102,102,102)', ...resetText, }; const productLink = { - fontSize: "12px", - color: "rgb(0,112,201)", - textDecoration: "none", + fontSize: '12px', + color: 'rgb(0,112,201)', + textDecoration: 'none', }; const divisor = { - marginLeft: "4px", - marginRight: "4px", - color: "rgb(51,51,51)", + marginLeft: '4px', + marginRight: '4px', + color: 'rgb(51,51,51)', fontWeight: 200, }; const productPriceTotal = { - margin: "0", - color: "rgb(102,102,102)", - fontSize: "10px", - fontWeight: "600", - padding: "0px 30px 0px 0px", - textAlign: "right" as const, + margin: '0', + color: 'rgb(102,102,102)', + fontSize: '10px', + fontWeight: '600', + padding: '0px 30px 0px 0px', + textAlign: 'right' as const, }; const productPrice = { - fontSize: "12px", - fontWeight: "600", - margin: "0", + fontSize: '12px', + fontWeight: '600', + margin: '0', }; const productPriceLarge = { - margin: "0px 20px 0px 0px", - fontSize: "16px", - fontWeight: "600", - whiteSpace: "nowrap" as const, - textAlign: "right" as const, + margin: '0px 20px 0px 0px', + fontSize: '16px', + fontWeight: '600', + whiteSpace: 'nowrap' as const, + textAlign: 'right' as const, }; const productPriceWrapper = { - display: "table-cell", - padding: "0px 20px 0px 0px", - width: "100px", - verticalAlign: "top", + display: 'table-cell', + padding: '0px 20px 0px 0px', + width: '100px', + verticalAlign: 'top', }; -const productPriceLine = { margin: "30px 0 0 0" }; +const productPriceLine = { margin: '30px 0 0 0' }; const productPriceVerticalLine = { - height: "48px", - borderLeft: "1px solid", - borderColor: "rgb(238,238,238)", + height: '48px', + borderLeft: '1px solid', + borderColor: 'rgb(238,238,238)', }; -const productPriceLargeWrapper = { display: "table-cell", width: "90px" }; +const productPriceLargeWrapper = { display: 'table-cell', width: '90px' }; -const productPriceLineBottom = { margin: "0 0 75px 0" }; +const productPriceLineBottom = { margin: '0 0 75px 0' }; -const block = { display: "block" }; +const block = { display: 'block' }; const ctaTitle = { - display: "block", - margin: "15px 0 0 0", + display: 'block', + margin: '15px 0 0 0', }; -const ctaText = { fontSize: "24px", fontWeight: "500" }; +const ctaText = { fontSize: '24px', fontWeight: '500' }; -const walletWrapper = { display: "table-cell", margin: "10px 0 0 0" }; +const walletWrapper = { display: 'table-cell', margin: '10px 0 0 0' }; -const walletLink = { color: "rgb(0,126,255)", textDecoration: "none" }; +const walletLink = { color: 'rgb(0,126,255)', textDecoration: 'none' }; const walletImage = { - display: "inherit", - paddingRight: "8px", - verticalAlign: "middle", + display: 'inherit', + paddingRight: '8px', + verticalAlign: 'middle', }; -const walletBottomLine = { margin: "65px 0 20px 0" }; +const walletBottomLine = { margin: '65px 0 20px 0' }; const footerText = { - fontSize: "12px", - color: "rgb(102,102,102)", - margin: "0", - lineHeight: "auto", - marginBottom: "16px", + fontSize: '12px', + color: 'rgb(102,102,102)', + margin: '0', + lineHeight: 'auto', + marginBottom: '16px', }; const footerTextCenter = { - fontSize: "12px", - color: "rgb(102,102,102)", - margin: "20px 0", - lineHeight: "auto", - textAlign: "center" as const, + fontSize: '12px', + color: 'rgb(102,102,102)', + margin: '20px 0', + lineHeight: 'auto', + textAlign: 'center' as const, }; -const footerLink = { color: "rgb(0,115,255)" }; +const footerLink = { color: 'rgb(0,115,255)' }; -const footerIcon = { display: "block", margin: "40px 0 0 0" }; +const footerIcon = { display: 'block', margin: '40px 0 0 0' }; const footerLinksWrapper = { - margin: "8px 0 0 0", - textAlign: "center" as const, - fontSize: "12px", - color: "rgb(102,102,102)", + margin: '8px 0 0 0', + textAlign: 'center' as const, + fontSize: '12px', + color: 'rgb(102,102,102)', }; const footerCopyright = { - margin: "25px 0 0 0", - textAlign: "center" as const, - fontSize: "12px", - color: "rgb(102,102,102)", + margin: '25px 0 0 0', + textAlign: 'center' as const, + fontSize: '12px', + color: 'rgb(102,102,102)', }; const walletLinkText = { - fontSize: "14px", - fontWeight: "400", - textDecoration: "none", + fontSize: '14px', + fontWeight: '400', + textDecoration: 'none', }; diff --git a/apps/demo/emails/receipts/nike-receipt.tsx b/apps/demo/emails/receipts/nike-receipt.tsx index 2a1f45217c..834b51199d 100644 --- a/apps/demo/emails/receipts/nike-receipt.tsx +++ b/apps/demo/emails/receipts/nike-receipt.tsx @@ -1,7 +1,7 @@ import { Body, - Container, Column, + Container, Head, Heading, Hr, @@ -12,12 +12,12 @@ import { Row, Section, Text, -} from "@react-email/components"; -import * as React from "react"; +} from '@react-email/components'; +import type * as React from 'react'; const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` - : ""; + : ''; export const NikeReceiptEmail = () => ( @@ -43,7 +43,7 @@ export const NikeReceiptEmail = () => ( width="66" height="22" alt="Nike" - style={{ margin: "auto" }} + style={{ margin: 'auto' }} /> It's On Its Way. @@ -64,19 +64,19 @@ export const NikeReceiptEmail = () => (
Brazil 2022/23 Stadium Away Women's Nike Dri-FIT Soccer Jersey - - + + Brazil 2022/23 Stadium Away Women's Nike Dri-FIT Soccer Jersey Size L (12–14) @@ -85,8 +85,8 @@ export const NikeReceiptEmail = () => (
- - + + Order Number C0106373851 @@ -108,7 +108,7 @@ export const NikeReceiptEmail = () => ( ( Women's Soccer Jacket ( Get Help - + Shipping Status - + Shipping & Delivery - + Returns & Exchanges - - + + How to Return - + Contact Options @@ -199,16 +199,16 @@ export const NikeReceiptEmail = () => ( - + - + 1-800-806-6453 @@ -218,7 +218,7 @@ export const NikeReceiptEmail = () => ( 4 am - 11 pm PT @@ -254,7 +254,7 @@ export const NikeReceiptEmail = () => (
-
+
@@ -289,18 +289,18 @@ export const NikeReceiptEmail = () => ( export default NikeReceiptEmail; const paddingX = { - paddingLeft: "40px", - paddingRight: "40px", + paddingLeft: '40px', + paddingRight: '40px', }; const paddingY = { - paddingTop: "22px", - paddingBottom: "22px", + paddingTop: '22px', + paddingBottom: '22px', }; const paragraph = { - margin: "0", - lineHeight: "2", + margin: '0', + lineHeight: '2', }; const global = { @@ -310,151 +310,151 @@ const global = { ...paddingX, ...paddingY, }, - paragraphWithBold: { ...paragraph, fontWeight: "bold" }, + paragraphWithBold: { ...paragraph, fontWeight: 'bold' }, heading: { - fontSize: "32px", - lineHeight: "1.3", - fontWeight: "700", - textAlign: "center", - letterSpacing: "-1px", + fontSize: '32px', + lineHeight: '1.3', + fontWeight: '700', + textAlign: 'center', + letterSpacing: '-1px', } as React.CSSProperties, text: { ...paragraph, - color: "#747474", - fontWeight: "500", + color: '#747474', + fontWeight: '500', }, button: { - border: "1px solid #929292", - fontSize: "16px", - textDecoration: "none", - padding: "10px 0px", - width: "220px", - display: "block", - textAlign: "center", + border: '1px solid #929292', + fontSize: '16px', + textDecoration: 'none', + padding: '10px 0px', + width: '220px', + display: 'block', + textAlign: 'center', fontWeight: 500, - color: "#000", + color: '#000', } as React.CSSProperties, hr: { - borderColor: "#E5E5E5", - margin: "0", + borderColor: '#E5E5E5', + margin: '0', }, }; const main = { - backgroundColor: "#ffffff", + backgroundColor: '#ffffff', fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', }; const container = { - margin: "10px auto", - width: "600px", - maxWidth: "100%", - border: "1px solid #E5E5E5", + margin: '10px auto', + width: '600px', + maxWidth: '100%', + border: '1px solid #E5E5E5', }; const track = { container: { - padding: "22px 40px", - backgroundColor: "#F7F7F7", + padding: '22px 40px', + backgroundColor: '#F7F7F7', }, number: { - margin: "12px 0 0 0", + margin: '12px 0 0 0', fontWeight: 500, - lineHeight: "1.4", - color: "#6F6F6F", + lineHeight: '1.4', + color: '#6F6F6F', }, }; const message = { - padding: "40px 74px", - textAlign: "center", + padding: '40px 74px', + textAlign: 'center', } as React.CSSProperties; const adressTitle = { ...paragraph, - fontSize: "15px", - fontWeight: "bold", + fontSize: '15px', + fontWeight: 'bold', }; const recomendationsText = { - margin: "0", - fontSize: "15px", - lineHeight: "1", - paddingLeft: "10px", - paddingRight: "10px", + margin: '0', + fontSize: '15px', + lineHeight: '1', + paddingLeft: '10px', + paddingRight: '10px', }; const recomendations = { container: { - padding: "20px 0", + padding: '20px 0', }, product: { - verticalAlign: "top", - textAlign: "left" as const, - paddingLeft: "2px", - paddingRight: "2px", + verticalAlign: 'top', + textAlign: 'left' as const, + paddingLeft: '2px', + paddingRight: '2px', }, - title: { ...recomendationsText, paddingTop: "12px", fontWeight: "500" }, + title: { ...recomendationsText, paddingTop: '12px', fontWeight: '500' }, text: { ...recomendationsText, - paddingTop: "4px", - color: "#747474", + paddingTop: '4px', + color: '#747474', }, }; const menu = { container: { - paddingLeft: "20px", - paddingRight: "20px", - paddingTop: "20px", - backgroundColor: "#F7F7F7", + paddingLeft: '20px', + paddingRight: '20px', + paddingTop: '20px', + backgroundColor: '#F7F7F7', }, content: { ...paddingY, - paddingLeft: "20px", - paddingRight: "20px", + paddingLeft: '20px', + paddingRight: '20px', }, title: { - paddingLeft: "20px", - paddingRight: "20px", - fontWeight: "bold", + paddingLeft: '20px', + paddingRight: '20px', + fontWeight: 'bold', }, text: { - fontSize: "13.5px", + fontSize: '13.5px', marginTop: 0, fontWeight: 500, - color: "#000", + color: '#000', }, tel: { - paddingLeft: "20px", - paddingRight: "20px", - paddingTop: "32px", - paddingBottom: "22px", + paddingLeft: '20px', + paddingRight: '20px', + paddingTop: '32px', + paddingBottom: '22px', }, }; const categories = { container: { - width: "370px", - margin: "auto", - paddingTop: "12px", + width: '370px', + margin: 'auto', + paddingTop: '12px', }, text: { - fontWeight: "500", - color: "#000", + fontWeight: '500', + color: '#000', }, }; const footer = { policy: { - width: "166px", - margin: "auto", + width: '166px', + margin: 'auto', }, text: { - margin: "0", - color: "#AFAFAF", - fontSize: "13px", - textAlign: "center", + margin: '0', + color: '#AFAFAF', + fontSize: '13px', + textAlign: 'center', } as React.CSSProperties, }; diff --git a/apps/demo/emails/reset-password/dropbox-reset-password.tsx b/apps/demo/emails/reset-password/dropbox-reset-password.tsx index 2b8894fe3f..f9d35ef168 100644 --- a/apps/demo/emails/reset-password/dropbox-reset-password.tsx +++ b/apps/demo/emails/reset-password/dropbox-reset-password.tsx @@ -9,8 +9,8 @@ import { Preview, Section, Text, -} from "@react-email/components"; -import * as React from "react"; +} from '@react-email/components'; +import * as React from 'react'; interface DropboxResetPasswordEmailProps { userFirstname?: string; @@ -19,7 +19,7 @@ interface DropboxResetPasswordEmailProps { const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` - : ""; + : ''; export const DropboxResetPasswordEmail = ({ userFirstname, @@ -52,7 +52,7 @@ export const DropboxResetPasswordEmail = ({ To keep your account secure, please don't forward this email - to anyone. See our Help Center for{" "} + to anyone. See our Help Center for{' '} more security tips. @@ -66,45 +66,45 @@ export const DropboxResetPasswordEmail = ({ }; DropboxResetPasswordEmail.PreviewProps = { - userFirstname: "Alan", - resetPasswordLink: "https://dropbox.com", + userFirstname: 'Alan', + resetPasswordLink: 'https://dropbox.com', } as DropboxResetPasswordEmailProps; export default DropboxResetPasswordEmail; const main = { - backgroundColor: "#f6f9fc", - padding: "10px 0", + backgroundColor: '#f6f9fc', + padding: '10px 0', }; const container = { - backgroundColor: "#ffffff", - border: "1px solid #f0f0f0", - padding: "45px", + backgroundColor: '#ffffff', + border: '1px solid #f0f0f0', + padding: '45px', }; const text = { - fontSize: "16px", + fontSize: '16px', fontFamily: "'Open Sans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif", - fontWeight: "300", - color: "#404040", - lineHeight: "26px", + fontWeight: '300', + color: '#404040', + lineHeight: '26px', }; const button = { - backgroundColor: "#007ee6", - borderRadius: "4px", - color: "#fff", + backgroundColor: '#007ee6', + borderRadius: '4px', + color: '#fff', fontFamily: "'Open Sans', 'Helvetica Neue', Arial", - fontSize: "15px", - textDecoration: "none", - textAlign: "center" as const, - display: "block", - width: "210px", - padding: "14px 7px", + fontSize: '15px', + textDecoration: 'none', + textAlign: 'center' as const, + display: 'block', + width: '210px', + padding: '14px 7px', }; const anchor = { - textDecoration: "underline", + textDecoration: 'underline', }; diff --git a/apps/demo/emails/reset-password/twitch-reset-password.tsx b/apps/demo/emails/reset-password/twitch-reset-password.tsx index ae0e35aa8b..32a0289842 100644 --- a/apps/demo/emails/reset-password/twitch-reset-password.tsx +++ b/apps/demo/emails/reset-password/twitch-reset-password.tsx @@ -1,7 +1,7 @@ import { Body, - Container, Column, + Container, Head, Html, Img, @@ -10,8 +10,8 @@ import { Row, Section, Text, -} from "@react-email/components"; -import * as React from "react"; +} from '@react-email/components'; +import * as React from 'react'; interface TwitchResetPasswordEmailProps { username?: string; @@ -20,15 +20,15 @@ interface TwitchResetPasswordEmailProps { const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` - : ""; + : ''; export const TwitchResetPasswordEmail = ({ username, updatedDate, }: TwitchResetPasswordEmailProps) => { - const formattedDate = new Intl.DateTimeFormat("en", { - dateStyle: "medium", - timeStyle: "medium", + const formattedDate = new Intl.DateTimeFormat('en', { + dateStyle: 'medium', + timeStyle: 'medium', }).format(updatedDate); return ( @@ -50,27 +50,27 @@ export const TwitchResetPasswordEmail = ({
Hi {username}, - You updated the password for your Twitch account on{" "} + You updated the password for your Twitch account on{' '} {formattedDate}. If this was you, then no further action is required. - However if you did NOT perform this password change, please{" "} + However if you did NOT perform this password change, please{' '} reset your account password - {" "} + {' '} immediately. Remember to use a password that is both strong and unique to your Twitch account. To learn more about how to create a strong and - unique password,{" "} + unique password,{' '} click here. - Still have questions? Please contact{" "} + Still have questions? Please contact{' '} Twitch Support @@ -85,15 +85,15 @@ export const TwitchResetPasswordEmail = ({
- + - + - + © 2022 Twitch, All Rights Reserved
350 Bush Street, 2nd Floor, San Francisco, CA, 94104 - USA @@ -105,16 +105,16 @@ export const TwitchResetPasswordEmail = ({ }; TwitchResetPasswordEmail.PreviewProps = { - username: "alanturing", - updatedDate: new Date("June 23, 2022 4:06:00 pm UTC"), + username: 'alanturing', + updatedDate: new Date('June 23, 2022 4:06:00 pm UTC'), } as TwitchResetPasswordEmailProps; export default TwitchResetPasswordEmail; -const fontFamily = "HelveticaNeue,Helvetica,Arial,sans-serif"; +const fontFamily = 'HelveticaNeue,Helvetica,Arial,sans-serif'; const main = { - backgroundColor: "#efeef1", + backgroundColor: '#efeef1', fontFamily, }; @@ -124,42 +124,42 @@ const paragraph = { }; const container = { - maxWidth: "580px", - margin: "30px auto", - backgroundColor: "#ffffff", + maxWidth: '580px', + margin: '30px auto', + backgroundColor: '#ffffff', }; const footer = { - maxWidth: "580px", - margin: "0 auto", + maxWidth: '580px', + margin: '0 auto', }; const content = { - padding: "5px 20px 10px 20px", + padding: '5px 20px 10px 20px', }; const logo = { - display: "flex", - justifyContent: "center", - alingItems: "center", + display: 'flex', + justifyContent: 'center', + alingItems: 'center', padding: 30, }; const sectionsBorders = { - width: "100%", - display: "flex", + width: '100%', + display: 'flex', }; const sectionBorder = { - borderBottom: "1px solid rgb(238,238,238)", - width: "249px", + borderBottom: '1px solid rgb(238,238,238)', + width: '249px', }; const sectionCenter = { - borderBottom: "1px solid rgb(145,71,255)", - width: "102px", + borderBottom: '1px solid rgb(145,71,255)', + width: '102px', }; const link = { - textDecoration: "underline", + textDecoration: 'underline', }; diff --git a/apps/demo/emails/reviews/airbnb-review.tsx b/apps/demo/emails/reviews/airbnb-review.tsx index 07386ffa8a..607e18c64d 100644 --- a/apps/demo/emails/reviews/airbnb-review.tsx +++ b/apps/demo/emails/reviews/airbnb-review.tsx @@ -11,8 +11,8 @@ import { Row, Section, Text, -} from "@react-email/components"; -import * as React from "react"; +} from '@react-email/components'; +import * as React from 'react'; interface AirbnbReviewEmailProps { authorName?: string; @@ -22,7 +22,7 @@ interface AirbnbReviewEmailProps { const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` - : ""; + : ''; export const AirbnbReviewEmail = ({ authorName, @@ -55,7 +55,7 @@ export const AirbnbReviewEmail = ({ style={userImage} />
-
+
Here's what {authorName} wrote {reviewText} @@ -63,7 +63,7 @@ export const AirbnbReviewEmail = ({ Now that the review period is over, we’ve posted {authorName} ’s review to your Airbnb profile. - + While it’s too late to write a review of your own, you can send your feedback to {authorName} using your Airbnb message thread. @@ -78,7 +78,7 @@ export const AirbnbReviewEmail = ({
- + Common questions @@ -112,7 +112,7 @@ export const AirbnbReviewEmail = ({ }; AirbnbReviewEmail.PreviewProps = { - authorName: "Alex", + authorName: 'Alex', authorImage: `${baseUrl}/static/airbnb-review-user.jpg`, reviewText: `“Alan was a great guest! Easy communication, the apartment was left in great condition, very polite, and respectful of all house rules. @@ -123,76 +123,76 @@ AirbnbReviewEmail.PreviewProps = { export default AirbnbReviewEmail; const main = { - backgroundColor: "#ffffff", + backgroundColor: '#ffffff', fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', }; const container = { - margin: "0 auto", - padding: "20px 0 48px", - width: "580px", - maxWidth: "100%", + margin: '0 auto', + padding: '20px 0 48px', + width: '580px', + maxWidth: '100%', }; const userImage = { - margin: "0 auto", - marginBottom: "16px", - borderRadius: "50%", + margin: '0 auto', + marginBottom: '16px', + borderRadius: '50%', }; const heading = { - fontSize: "32px", - lineHeight: "1.3", - fontWeight: "700", - color: "#484848", + fontSize: '32px', + lineHeight: '1.3', + fontWeight: '700', + color: '#484848', }; const paragraph = { - fontSize: "18px", - lineHeight: "1.4", - color: "#484848", + fontSize: '18px', + lineHeight: '1.4', + color: '#484848', }; const review = { ...paragraph, - padding: "24px", - backgroundColor: "#f2f3f3", - borderRadius: "4px", + padding: '24px', + backgroundColor: '#f2f3f3', + borderRadius: '4px', }; const button = { - backgroundColor: "#ff5a5f", - borderRadius: "3px", - color: "#fff", - fontSize: "18px", - paddingTop: "19px", - paddingBottom: "19px", - textDecoration: "none", - textAlign: "center" as const, - display: "block", - width: "100%", + backgroundColor: '#ff5a5f', + borderRadius: '3px', + color: '#fff', + fontSize: '18px', + paddingTop: '19px', + paddingBottom: '19px', + textDecoration: 'none', + textAlign: 'center' as const, + display: 'block', + width: '100%', }; const link = { ...paragraph, - color: "#ff5a5f", - display: "block", + color: '#ff5a5f', + display: 'block', }; const reportLink = { - fontSize: "14px", - color: "#9ca299", - textDecoration: "underline", + fontSize: '14px', + color: '#9ca299', + textDecoration: 'underline', }; const hr = { - borderColor: "#cccccc", - margin: "20px 0", + borderColor: '#cccccc', + margin: '20px 0', }; const footer = { - color: "#9ca299", - fontSize: "14px", - marginBottom: "10px", + color: '#9ca299', + fontSize: '14px', + marginBottom: '10px', }; diff --git a/apps/demo/emails/reviews/amazon-review.tsx b/apps/demo/emails/reviews/amazon-review.tsx index a5f07194bf..f3715644e8 100644 --- a/apps/demo/emails/reviews/amazon-review.tsx +++ b/apps/demo/emails/reviews/amazon-review.tsx @@ -1,7 +1,7 @@ import { Body, - Container, Column, + Container, Head, Hr, Html, @@ -11,8 +11,8 @@ import { Row, Section, Text, -} from "@react-email/components"; -import * as React from "react"; +} from '@react-email/components'; +import * as React from 'react'; interface AmazonReviewEmailProps { titleText?: string; @@ -23,11 +23,11 @@ interface AmazonReviewEmailProps { const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` - : ""; + : ''; export const AmazonReviewEmail = ({ - titleText = "Your opinion is important!", - reviewText = "Alan Turing, do you have a moment? We would like to know if everything went well for you. Take a moment to review your most recent purchases.", + titleText = 'Your opinion is important!', + reviewText = 'Alan Turing, do you have a moment? We would like to know if everything went well for you. Take a moment to review your most recent purchases.', reviwStars = Array(5).fill(`${baseUrl}/static/amazon-rating.gif`), socialMediaIcons = [ `${baseUrl}/static/amazon-instagram.jpg`, @@ -104,14 +104,14 @@ export const AmazonReviewEmail = ({ - How about evaluating a previous purchase?{" "} + How about evaluating a previous purchase?{' '} View more
-
+
@@ -142,14 +142,14 @@ export const AmazonReviewEmail = ({
- Customer reviews must adhere to the{" "} + Customer reviews must adhere to the{' '} Community Guidelines . We hope this message was helpful to you. However, if you prefer - not to receive this type of communication from{" "} - Amazon.com at{" "} - alanturing@gmail.com ,{" "} + not to receive this type of communication from{' '} + Amazon.com at{' '} + alanturing@gmail.com ,{' '} click here . @@ -173,70 +173,70 @@ export const AmazonReviewEmail = ({ export default AmazonReviewEmail; const main = { - fontFamily: "Ember,Helvetica,Arial,sans-seri", - backgroundColor: "#ffffff", + fontFamily: 'Ember,Helvetica,Arial,sans-seri', + backgroundColor: '#ffffff', }; const container = { - borderTop: "4px solid #FF9900", - margin: "0 auto", - padding: "20px", - width: "640px", + borderTop: '4px solid #FF9900', + margin: '0 auto', + padding: '20px', + width: '640px', }; const title = { - color: "#232f3e", - fontSize: "36px", - lineHeight: "38px", - fontWeight: "400", - margin: "20px 0", + color: '#232f3e', + fontSize: '36px', + lineHeight: '38px', + fontWeight: '400', + margin: '20px 0', }; const ratingContent = { - paddingLeft: "30px", + paddingLeft: '30px', }; const rating = { - display: "inline-block", + display: 'inline-block', }; const previewPurchase = { - background: "#008296", - color: "#ffffff", - padding: "8px 0", + background: '#008296', + color: '#ffffff', + padding: '8px 0', }; const previewPurchaseLink = { - color: "#ffffff", - textDecoration: "underline", - cursor: "pointer", + color: '#ffffff', + textDecoration: 'underline', + cursor: 'pointer', }; const socialMedia = { - display: "inline-block", - marginLeft: "10px", + display: 'inline-block', + marginLeft: '10px', }; const communityLink = { - color: "#666666", - textDecoration: "underline", - cursor: "pointer", + color: '#666666', + textDecoration: 'underline', + cursor: 'pointer', }; const clickHereLink = { - color: "#999999", - textDecoration: "underline", - cursor: "pointer", + color: '#999999', + textDecoration: 'underline', + cursor: 'pointer', }; const urlLink = { - color: "#1155cc", - textDecoration: "underline", - cursor: "pointer", + color: '#1155cc', + textDecoration: 'underline', + cursor: 'pointer', }; const footerText = { - fontSize: "10px", - color: "#666666", - margin: "8px 0", + fontSize: '10px', + color: '#666666', + margin: '8px 0', }; diff --git a/apps/demo/emails/welcome/koala-welcome.tsx b/apps/demo/emails/welcome/koala-welcome.tsx index 44dce55594..cf21f30dd4 100644 --- a/apps/demo/emails/welcome/koala-welcome.tsx +++ b/apps/demo/emails/welcome/koala-welcome.tsx @@ -9,8 +9,8 @@ import { Preview, Section, Text, -} from "@react-email/components"; -import * as React from "react"; +} from '@react-email/components'; +import * as React from 'react'; interface KoalaWelcomeEmailProps { userFirstname: string; @@ -18,7 +18,7 @@ interface KoalaWelcomeEmailProps { const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` - : ""; + : ''; export const KoalaWelcomeEmail = ({ userFirstname, @@ -62,52 +62,52 @@ export const KoalaWelcomeEmail = ({ ); KoalaWelcomeEmail.PreviewProps = { - userFirstname: "Alan", + userFirstname: 'Alan', } as KoalaWelcomeEmailProps; export default KoalaWelcomeEmail; const main = { - backgroundColor: "#ffffff", + backgroundColor: '#ffffff', fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', }; const container = { - margin: "0 auto", - padding: "20px 0 48px", + margin: '0 auto', + padding: '20px 0 48px', }; const logo = { - margin: "0 auto", + margin: '0 auto', }; const paragraph = { - fontSize: "16px", - lineHeight: "26px", + fontSize: '16px', + lineHeight: '26px', }; const btnContainer = { - textAlign: "center" as const, + textAlign: 'center' as const, }; const button = { - backgroundColor: "#5F51E8", - borderRadius: "3px", - color: "#fff", - fontSize: "16px", - textDecoration: "none", - textAlign: "center" as const, - display: "block", - padding: "12px", + backgroundColor: '#5F51E8', + borderRadius: '3px', + color: '#fff', + fontSize: '16px', + textDecoration: 'none', + textAlign: 'center' as const, + display: 'block', + padding: '12px', }; const hr = { - borderColor: "#cccccc", - margin: "20px 0", + borderColor: '#cccccc', + margin: '20px 0', }; const footer = { - color: "#8898aa", - fontSize: "12px", + color: '#8898aa', + fontSize: '12px', }; diff --git a/apps/demo/emails/welcome/netlify-welcome.tsx b/apps/demo/emails/welcome/netlify-welcome.tsx index faa029c440..2b8dc6db3b 100644 --- a/apps/demo/emails/welcome/netlify-welcome.tsx +++ b/apps/demo/emails/welcome/netlify-welcome.tsx @@ -11,10 +11,10 @@ import { Preview, Row, Section, - Text, Tailwind, -} from "@react-email/components"; -import * as React from "react"; + Text, +} from '@react-email/components'; +import type * as React from 'react'; interface NetlifyWelcomeEmailProps { steps?: { @@ -26,7 +26,7 @@ interface NetlifyWelcomeEmailProps { const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` - : ""; + : ''; const PropDefaults: NetlifyWelcomeEmailProps = { steps: [ @@ -34,7 +34,7 @@ const PropDefaults: NetlifyWelcomeEmailProps = { id: 1, Description: (
  • - Deploy your first project.{" "} + Deploy your first project.{' '} Connect to Git, choose a template, or manually deploy a project you've been working on locally.
    • @@ -45,7 +45,7 @@ const PropDefaults: NetlifyWelcomeEmailProps = { Description: (
  • Check your deploy logs. Find out what's included in - your build and watch for errors or failed deploys.{" "} + your build and watch for errors or failed deploys.{' '} Learn how to read your deploy logs.
    • ), @@ -71,7 +71,7 @@ const PropDefaults: NetlifyWelcomeEmailProps = { ), }, ], - links: ["Visit the forums", "Read the docs", "Contact an expert"], + links: ['Visit the forums', 'Read the docs', 'Contact an expert'], }; export const NetlifyWelcomeEmail = ({ @@ -87,13 +87,13 @@ export const NetlifyWelcomeEmail = ({ theme: { extend: { colors: { - brand: "#2250f4", - offwhite: "#fafbfb", + brand: '#2250f4', + offwhite: '#fafbfb', }, spacing: { - 0: "0px", - 20: "20px", - 45: "45px", + 0: '0px', + 20: '20px', + 45: '45px', }, }, }, @@ -138,7 +138,7 @@ export const NetlifyWelcomeEmail = ({ {link} - {" "} + {' '} → ))} diff --git a/apps/demo/emails/welcome/stripe-welcome.tsx b/apps/demo/emails/welcome/stripe-welcome.tsx index 17a41b8230..cfff102d9f 100644 --- a/apps/demo/emails/welcome/stripe-welcome.tsx +++ b/apps/demo/emails/welcome/stripe-welcome.tsx @@ -10,12 +10,12 @@ import { Preview, Section, Text, -} from "@react-email/components"; -import * as React from "react"; +} from '@react-email/components'; +import * as React from 'react'; const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` - : ""; + : ''; export const StripeWelcomeEmail = () => ( @@ -44,42 +44,42 @@ export const StripeWelcomeEmail = () => (
    - If you haven't finished your integration, you might find our{" "} + If you haven't finished your integration, you might find our{' '} docs - {" "} + {' '} handy. Once you're ready to start accepting payments, you'll just need to - use your live{" "} + use your live{' '} API keys - {" "} + {' '} instead of your test API keys. Your account can simultaneously be used for both test and live requests, so you can continue testing - while accepting live payments. Check out our{" "} + while accepting live payments. Check out our{' '} tutorial about account basics . - Finally, we've put together a{" "} + Finally, we've put together a{' '} quick checklist - {" "} + {' '} to ensure your website conforms to card network standards. We'll be here to help you with any step along the way. You can find - answers to most questions and get in touch with us on our{" "} + answers to most questions and get in touch with us on our{' '} support site @@ -99,54 +99,54 @@ export const StripeWelcomeEmail = () => ( export default StripeWelcomeEmail; const main = { - backgroundColor: "#f6f9fc", + backgroundColor: '#f6f9fc', fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif', }; const container = { - backgroundColor: "#ffffff", - margin: "0 auto", - padding: "20px 0 48px", - marginBottom: "64px", + backgroundColor: '#ffffff', + margin: '0 auto', + padding: '20px 0 48px', + marginBottom: '64px', }; const box = { - padding: "0 48px", + padding: '0 48px', }; const hr = { - borderColor: "#e6ebf1", - margin: "20px 0", + borderColor: '#e6ebf1', + margin: '20px 0', }; const paragraph = { - color: "#525f7f", + color: '#525f7f', - fontSize: "16px", - lineHeight: "24px", - textAlign: "left" as const, + fontSize: '16px', + lineHeight: '24px', + textAlign: 'left' as const, }; const anchor = { - color: "#556cd6", + color: '#556cd6', }; const button = { - backgroundColor: "#656ee8", - borderRadius: "5px", - color: "#fff", - fontSize: "16px", - fontWeight: "bold", - textDecoration: "none", - textAlign: "center" as const, - display: "block", - width: "100%", - padding: "10px", + backgroundColor: '#656ee8', + borderRadius: '5px', + color: '#fff', + fontSize: '16px', + fontWeight: 'bold', + textDecoration: 'none', + textAlign: 'center' as const, + display: 'block', + width: '100%', + padding: '10px', }; const footer = { - color: "#8898aa", - fontSize: "12px", - lineHeight: "16px", + color: '#8898aa', + fontSize: '12px', + lineHeight: '16px', }; diff --git a/apps/docs/mint.json b/apps/docs/mint.json index 84fedba053..b9338164b1 100644 --- a/apps/docs/mint.json +++ b/apps/docs/mint.json @@ -1,130 +1,130 @@ { - "$schema": "https://mintlify.com/schema.json", - "name": "React Email", - "logo": { - "light": "/logo/light.svg", - "dark": "/logo/dark.svg" - }, - "favicon": "/favicon.png", - "colors": { - "primary": "#06BCEE", - "light": "#81D7F7", - "dark": "#06A6D1", - "ultraLight": "#F2F8FB", - "ultraDark": "#0B0101", - "background": { - "dark": "#111111" - } - }, - "modeToggle": { - "default": "dark", - "isHidden": true - }, - "topbarCtaButton": { - "type": "github", - "url": "https://github.com/resend/react-email" - }, - "anchors": [ - { - "name": "Components", - "icon": "grid-2-plus", - "url": "https://react.email/components" - }, - { - "name": "Templates", - "icon": "arrow-pointer", - "url": "https://demo.react.email/preview/notifications/vercel-invite-user" - }, - { - "name": "Discord", - "icon": "discord", - "url": "https://react.email/discord" - }, - { - "name": "GitHub", - "icon": "github", - "url": "https://github.com/resend/react-email" - } - ], - "navigation": [ - { - "group": "Overview", - "pages": [ - "introduction", - "contributing", - "changelog", - "roadmap", - "cli", - "deployment" - ] - }, - { - "group": "Getting Started", - "pages": [ - "getting-started/automatic-setup", - "getting-started/manual-setup", - { - "group": "Monorepo Setup", - "icon": "diagram-project", - "pages": [ - "getting-started/monorepo-setup/npm", - "getting-started/monorepo-setup/pnpm", - "getting-started/monorepo-setup/yarn", - "getting-started/monorepo-setup/bun" - ] - }, - "getting-started/migrating-to-react-email" - ] - }, - { - "group": "Internal components", - "pages": [ - "components/html", - "components/head", - "components/button", - "components/container", - "components/code-block", - "components/code-inline", - "components/column", - "components/row", - "components/font", - "components/heading", - "components/hr", - "components/image", - "components/link", - "components/markdown", - "components/preview", - "components/section", - "components/tailwind", - "components/text" - ] - }, - { - "group": "Utilities", - "pages": ["utilities/render"] - }, - { - "group": "Integrations", - "pages": [ - "integrations/overview", - "integrations/resend", - "integrations/nodemailer", - "integrations/sendgrid", - "integrations/postmark", - "integrations/aws-ses", - "integrations/mailersend", - "integrations/plunk" - ] - } - ], - "classes": { - "anchors": "group-hover:bg-gradient-to-tr from-primary to-primary-dark dark:from-[#61DAFB] dark:to-[#06BCEE]", - "activeAnchors": "bg-gradient-to-tr" - }, - "backgroundImage": "/images/background.png", - "analytics": { - "ga4": { - "measurementId": "G-2LXLLQLM5D" - } - } + "$schema": "https://mintlify.com/schema.json", + "name": "React Email", + "logo": { + "light": "/logo/light.svg", + "dark": "/logo/dark.svg" + }, + "favicon": "/favicon.png", + "colors": { + "primary": "#06BCEE", + "light": "#81D7F7", + "dark": "#06A6D1", + "ultraLight": "#F2F8FB", + "ultraDark": "#0B0101", + "background": { + "dark": "#111111" + } + }, + "modeToggle": { + "default": "dark", + "isHidden": true + }, + "topbarCtaButton": { + "type": "github", + "url": "https://github.com/resend/react-email" + }, + "anchors": [ + { + "name": "Components", + "icon": "grid-2-plus", + "url": "https://react.email/components" + }, + { + "name": "Templates", + "icon": "arrow-pointer", + "url": "https://demo.react.email/preview/notifications/vercel-invite-user" + }, + { + "name": "Discord", + "icon": "discord", + "url": "https://react.email/discord" + }, + { + "name": "GitHub", + "icon": "github", + "url": "https://github.com/resend/react-email" + } + ], + "navigation": [ + { + "group": "Overview", + "pages": [ + "introduction", + "contributing", + "changelog", + "roadmap", + "cli", + "deployment" + ] + }, + { + "group": "Getting Started", + "pages": [ + "getting-started/automatic-setup", + "getting-started/manual-setup", + { + "group": "Monorepo Setup", + "icon": "diagram-project", + "pages": [ + "getting-started/monorepo-setup/npm", + "getting-started/monorepo-setup/pnpm", + "getting-started/monorepo-setup/yarn", + "getting-started/monorepo-setup/bun" + ] + }, + "getting-started/migrating-to-react-email" + ] + }, + { + "group": "Internal components", + "pages": [ + "components/html", + "components/head", + "components/button", + "components/container", + "components/code-block", + "components/code-inline", + "components/column", + "components/row", + "components/font", + "components/heading", + "components/hr", + "components/image", + "components/link", + "components/markdown", + "components/preview", + "components/section", + "components/tailwind", + "components/text" + ] + }, + { + "group": "Utilities", + "pages": ["utilities/render"] + }, + { + "group": "Integrations", + "pages": [ + "integrations/overview", + "integrations/resend", + "integrations/nodemailer", + "integrations/sendgrid", + "integrations/postmark", + "integrations/aws-ses", + "integrations/mailersend", + "integrations/plunk" + ] + } + ], + "classes": { + "anchors": "group-hover:bg-gradient-to-tr from-primary to-primary-dark dark:from-[#61DAFB] dark:to-[#06BCEE]", + "activeAnchors": "bg-gradient-to-tr" + }, + "backgroundImage": "/images/background.png", + "analytics": { + "ga4": { + "measurementId": "G-2LXLLQLM5D" + } + } } diff --git a/apps/web/components/_components/layout.tsx b/apps/web/components/_components/layout.tsx index 028d4f10fe..10a7f42f83 100644 --- a/apps/web/components/_components/layout.tsx +++ b/apps/web/components/_components/layout.tsx @@ -1,12 +1,12 @@ import { - Html, - Head, - Tailwind, Body, Container, Font, -} from "@react-email/components"; -import tailwindConfig from "../tailwind.config"; + Head, + Html, + Tailwind, +} from '@react-email/components'; +import tailwindConfig from '../tailwind.config'; export const Layout = ({ children, @@ -24,8 +24,8 @@ export const Layout = ({ fontStyle="normal" fontWeight={400} webFont={{ - url: "https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hiA.woff2", - format: "woff2", + url: 'https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hiA.woff2', + format: 'woff2', }} /> @@ -55,12 +55,12 @@ export const Layout = ({ const container = ( {children} diff --git a/apps/web/components/article-with-image-as-background/inline-styles.tsx b/apps/web/components/article-with-image-as-background/inline-styles.tsx index bc00c369a5..70b7e30181 100644 --- a/apps/web/components/article-with-image-as-background/inline-styles.tsx +++ b/apps/web/components/article-with-image-as-background/inline-styles.tsx @@ -1,5 +1,5 @@ -import { Button, Heading, Text } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Button, Heading, Text } from '@react-email/components'; +import { Layout } from '../_components/layout'; // Notes for future exploration on finding a way to do this inside of // Desktop Outlook: @@ -18,21 +18,21 @@ export const component = ( marginTop: 16, marginBottom: 16, borderRadius: 12, - backgroundColor: "rgb(37,99,235)", + backgroundColor: 'rgb(37,99,235)', // This url must be in quotes for Yahoo backgroundImage: "url('/static/my-image.png')", - backgroundSize: "100% 100%", + backgroundSize: '100% 100%', }} width="100%" > - + New article @@ -40,21 +40,21 @@ export const component = ( Artful Accents Uncover the power of accent furniture in transforming your space @@ -67,15 +67,15 @@ export const component = ( marginTop: 24, borderRadius: 8, borderWidth: 1, - borderStyle: "solid", - borderColor: "rgb(229,231,235)", - backgroundColor: "rgb(255,255,255)", + borderStyle: 'solid', + borderColor: 'rgb(229,231,235)', + backgroundColor: 'rgb(255,255,255)', paddingLeft: 40, paddingRight: 40, paddingTop: 12, paddingBottom: 12, fontWeight: 600, - color: "rgb(17,24,39)", + color: 'rgb(17,24,39)', }} > Read more diff --git a/apps/web/components/article-with-image-as-background/tailwind.tsx b/apps/web/components/article-with-image-as-background/tailwind.tsx index 457b46850a..ccb9a7db17 100644 --- a/apps/web/components/article-with-image-as-background/tailwind.tsx +++ b/apps/web/components/article-with-image-as-background/tailwind.tsx @@ -1,7 +1,7 @@ -import { Button, Heading, Text } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Button, Heading, Text } from '@react-email/components'; +import { Layout } from '../_components/layout'; -export const title = "Article with image as background"; +export const title = 'Article with image as background'; // Notes for future exploration on finding a way to do this inside of // Desktop Outlook: @@ -19,7 +19,7 @@ export const component = ( style={{ // This url must be in quotes for Yahoo backgroundImage: "url('/static/my-image.png')", - backgroundSize: "100% 100%", + backgroundSize: '100% 100%', }} width="100%" > diff --git a/apps/web/components/article-with-image-on-right/inline-styles.tsx b/apps/web/components/article-with-image-on-right/inline-styles.tsx index 771fbbdd93..58350f8f14 100644 --- a/apps/web/components/article-with-image-on-right/inline-styles.tsx +++ b/apps/web/components/article-with-image-on-right/inline-styles.tsx @@ -1,39 +1,39 @@ /* eslint-disable react/no-unescaped-entities */ -import { Img, Link, Section, Text } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Img, Link, Section, Text } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = (
    What's new Versatile Comfort @@ -42,8 +42,8 @@ export const component = ( style={{ marginTop: 8, fontSize: 16, - lineHeight: "24px", - color: "rgb(107,114,128)", + lineHeight: '24px', + color: 'rgb(107,114,128)', }} > Experience ultimate comfort and versatility with our furniture @@ -51,19 +51,19 @@ export const component = ( Read more
    diff --git a/apps/web/components/article-with-image-on-right/tailwind.tsx b/apps/web/components/article-with-image-on-right/tailwind.tsx index bf792872cc..a1cbf85aec 100644 --- a/apps/web/components/article-with-image-on-right/tailwind.tsx +++ b/apps/web/components/article-with-image-on-right/tailwind.tsx @@ -1,6 +1,6 @@ /* eslint-disable react/no-unescaped-entities */ -import { Img, Link, Section, Text } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Img, Link, Section, Text } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = (
    diff --git a/apps/web/components/article-with-image/inline-styles.tsx b/apps/web/components/article-with-image/inline-styles.tsx index d1f57f57c6..e50657c7fd 100644 --- a/apps/web/components/article-with-image/inline-styles.tsx +++ b/apps/web/components/article-with-image/inline-styles.tsx @@ -1,5 +1,5 @@ -import { Button, Heading, Img, Section, Text } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Button, Heading, Img, Section, Text } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = (
    @@ -8,15 +8,15 @@ export const component = ( height="320" src="/static/herman-miller-chair.jpg" style={{ - width: "100%", + width: '100%', borderRadius: 12, - objectFit: "cover", + objectFit: 'cover', }} />
    Our new article @@ -34,18 +34,18 @@ export const component = ( Designing with Furniture Unleash your inner designer as we explore how furniture plays a vital role in creating stunning interiors, offering insights into choosing the @@ -57,13 +57,13 @@ export const component = ( style={{ marginTop: 16, borderRadius: 8, - backgroundColor: "rgb(79,70,229)", + backgroundColor: 'rgb(79,70,229)', paddingLeft: 40, paddingRight: 40, paddingTop: 12, paddingBottom: 12, fontWeight: 600, - color: "rgb(255,255,255)", + color: 'rgb(255,255,255)', }} > Read more diff --git a/apps/web/components/article-with-image/tailwind.tsx b/apps/web/components/article-with-image/tailwind.tsx index a244723735..5acd576a30 100644 --- a/apps/web/components/article-with-image/tailwind.tsx +++ b/apps/web/components/article-with-image/tailwind.tsx @@ -1,5 +1,5 @@ -import { Button, Heading, Img, Section, Text } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Button, Heading, Img, Section, Text } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = (
    diff --git a/apps/web/components/article-with-multiple-authors/inline-styles.tsx b/apps/web/components/article-with-multiple-authors/inline-styles.tsx index 4286995e7a..c870a67347 100644 --- a/apps/web/components/article-with-multiple-authors/inline-styles.tsx +++ b/apps/web/components/article-with-multiple-authors/inline-styles.tsx @@ -6,30 +6,30 @@ import { Row, Section, Text, -} from "@react-email/components"; -import { Layout } from "../_components/layout"; +} from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = (
    {[ { - name: "Steve Jobs", - title: "Co-Founder & CEO", - imgSrc: "/static/steve-jobs.jpg", + name: 'Steve Jobs', + title: 'Co-Founder & CEO', + imgSrc: '/static/steve-jobs.jpg', showDivider: true, }, { - name: "Steve Wozniak", - title: "Co-Founder & CTO", - imgSrc: "/static/steve-wozniak.jpg", + name: 'Steve Wozniak', + title: 'Co-Founder & CTO', + imgSrc: '/static/steve-wozniak.jpg', showDivider: false, }, ].map((author, index) => ( @@ -37,15 +37,15 @@ export const component = (
    {author.name} {author.title} -
    +
    ) : null} diff --git a/apps/web/components/article-with-multiple-authors/tailwind.tsx b/apps/web/components/article-with-multiple-authors/tailwind.tsx index 8cdc04a935..2db0b4737f 100644 --- a/apps/web/components/article-with-multiple-authors/tailwind.tsx +++ b/apps/web/components/article-with-multiple-authors/tailwind.tsx @@ -6,8 +6,8 @@ import { Row, Section, Text, -} from "@react-email/components"; -import { Layout } from "../_components/layout"; +} from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = ( @@ -15,15 +15,15 @@ export const component = (
    {[ { - name: "Steve Jobs", - title: "Co-Founder & CEO", - imgSrc: "/static/steve-jobs.jpg", + name: 'Steve Jobs', + title: 'Co-Founder & CEO', + imgSrc: '/static/steve-jobs.jpg', showDivider: true, }, { - name: "Steve Wozniak", - title: "Co-Founder & CTO", - imgSrc: "/static/steve-wozniak.jpg", + name: 'Steve Wozniak', + title: 'Co-Founder & CTO', + imgSrc: '/static/steve-wozniak.jpg', showDivider: false, }, ].map((author, index) => ( @@ -74,7 +74,7 @@ export const component = ( {author.showDivider ? (
    ) : null} diff --git a/apps/web/components/article-with-single-author/inline-styles.tsx b/apps/web/components/article-with-single-author/inline-styles.tsx index c6a7104c16..8de2f6e45a 100644 --- a/apps/web/components/article-with-single-author/inline-styles.tsx +++ b/apps/web/components/article-with-single-author/inline-styles.tsx @@ -6,25 +6,25 @@ import { Row, Section, Text, -} from "@react-email/components"; -import { Layout } from "../_components/layout"; +} from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = (
    Steve Jobs Co-Founder & CEO
    X LinkedIn
    diff --git a/apps/web/components/article-with-single-author/tailwind.tsx b/apps/web/components/article-with-single-author/tailwind.tsx index a4d55b8517..c665e65e40 100644 --- a/apps/web/components/article-with-single-author/tailwind.tsx +++ b/apps/web/components/article-with-single-author/tailwind.tsx @@ -6,8 +6,8 @@ import { Row, Section, Text, -} from "@react-email/components"; -import { Layout } from "../_components/layout"; +} from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = ( @@ -36,14 +36,14 @@ export const component = ( X LinkedIn
    diff --git a/apps/web/components/article-with-two-cards/inline-styles.tsx b/apps/web/components/article-with-two-cards/inline-styles.tsx index 6ea29d1ef0..82014a214d 100644 --- a/apps/web/components/article-with-two-cards/inline-styles.tsx +++ b/apps/web/components/article-with-two-cards/inline-styles.tsx @@ -1,6 +1,6 @@ /* eslint-disable react/no-unescaped-entities */ -import { Column, Img, Row, Section, Text } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Column, Img, Row, Section, Text } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = (
    Elevate Outdoor Living @@ -25,8 +25,8 @@ export const component = ( style={{ marginTop: 8, fontSize: 16, - lineHeight: "24px", - color: "rgb(107,114,128)", + lineHeight: '24px', + color: 'rgb(107,114,128)', }} > Take your outdoor space to new heights with our premium outdoor @@ -41,10 +41,10 @@ export const component = ( What's new Multifunctional Marvels Discover the innovative world of multifunctional furniture, where @@ -95,10 +95,10 @@ export const component = ( What's new Timeless Classics Step into the world of timeless classics as we explore iconic diff --git a/apps/web/components/article-with-two-cards/tailwind.tsx b/apps/web/components/article-with-two-cards/tailwind.tsx index e52378e65b..8b5b0f7bb7 100644 --- a/apps/web/components/article-with-two-cards/tailwind.tsx +++ b/apps/web/components/article-with-two-cards/tailwind.tsx @@ -1,6 +1,6 @@ /* eslint-disable react/no-unescaped-entities */ -import { Column, Img, Row, Section, Text } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Column, Img, Row, Section, Text } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = (
    diff --git a/apps/web/components/checkout/inline-styles.tsx b/apps/web/components/checkout/inline-styles.tsx index c8457f9a16..cd6e56f378 100644 --- a/apps/web/components/checkout/inline-styles.tsx +++ b/apps/web/components/checkout/inline-styles.tsx @@ -6,17 +6,17 @@ import { Row, Section, Text, -} from "@react-email/components"; -import { Layout } from "../_components/layout"; +} from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = ( -
    +
    @@ -25,13 +25,13 @@ export const component = (
    @@ -40,10 +40,10 @@ export const component = ( style={{ paddingTop: 8, paddingBottom: 8, - borderWidth: "0px", + borderWidth: '0px', borderBottomWidth: 1, - borderStyle: "solid", - borderColor: "rgb(229,231,235)", + borderStyle: 'solid', + borderColor: 'rgb(229,231,235)', }} >   @@ -54,11 +54,11 @@ export const component = ( style={{ paddingTop: 8, paddingBottom: 8, - color: "rgb(107,114,128)", - borderWidth: "0px", + color: 'rgb(107,114,128)', + borderWidth: '0px', borderBottomWidth: 1, - borderStyle: "solid", - borderColor: "rgb(229,231,235)", + borderStyle: 'solid', + borderColor: 'rgb(229,231,235)', }} > Product @@ -68,11 +68,11 @@ export const component = ( style={{ paddingTop: 8, paddingBottom: 8, - color: "rgb(107,114,128)", - borderWidth: "0px", + color: 'rgb(107,114,128)', + borderWidth: '0px', borderBottomWidth: 1, - borderStyle: "solid", - borderColor: "rgb(229,231,235)", + borderStyle: 'solid', + borderColor: 'rgb(229,231,235)', }} > Quantity @@ -82,11 +82,11 @@ export const component = ( style={{ paddingTop: 8, paddingBottom: 8, - color: "rgb(107,114,128)", - borderWidth: "0px", + color: 'rgb(107,114,128)', + borderWidth: '0px', borderBottomWidth: 1, - borderStyle: "solid", - borderColor: "rgb(229,231,235)", + borderStyle: 'solid', + borderColor: 'rgb(229,231,235)', }} > Price @@ -97,10 +97,10 @@ export const component = ( style={{ paddingTop: 8, paddingBottom: 8, - borderWidth: "0px", + borderWidth: '0px', borderBottomWidth: 1, - borderStyle: "solid", - borderColor: "rgb(229,231,235)", + borderStyle: 'solid', + borderColor: 'rgb(229,231,235)', }} > @@ -119,10 +119,10 @@ export const component = ( style={{ paddingTop: 8, paddingBottom: 8, - borderWidth: "0px", + borderWidth: '0px', borderBottomWidth: 1, - borderStyle: "solid", - borderColor: "rgb(229,231,235)", + borderStyle: 'solid', + borderColor: 'rgb(229,231,235)', }} > Classic Watch @@ -132,10 +132,10 @@ export const component = ( style={{ paddingTop: 8, paddingBottom: 8, - borderWidth: "0px", + borderWidth: '0px', borderBottomWidth: 1, - borderStyle: "solid", - borderColor: "rgb(229,231,235)", + borderStyle: 'solid', + borderColor: 'rgb(229,231,235)', }} > 1 @@ -145,10 +145,10 @@ export const component = ( style={{ paddingTop: 8, paddingBottom: 8, - borderWidth: "0px", + borderWidth: '0px', borderBottomWidth: 1, - borderStyle: "solid", - borderColor: "rgb(229,231,235)", + borderStyle: 'solid', + borderColor: 'rgb(229,231,235)', }} > $210.00 @@ -159,10 +159,10 @@ export const component = ( style={{ paddingTop: 8, paddingBottom: 8, - borderWidth: "0px", + borderWidth: '0px', borderBottomWidth: 1, - borderStyle: "solid", - borderColor: "rgb(229,231,235)", + borderStyle: 'solid', + borderColor: 'rgb(229,231,235)', }} > @@ -181,10 +181,10 @@ export const component = ( style={{ paddingTop: 8, paddingBottom: 8, - borderWidth: "0px", + borderWidth: '0px', borderBottomWidth: 1, - borderStyle: "solid", - borderColor: "rgb(229,231,235)", + borderStyle: 'solid', + borderColor: 'rgb(229,231,235)', }} > Analogue Clock @@ -194,10 +194,10 @@ export const component = ( style={{ paddingTop: 8, paddingBottom: 8, - borderWidth: "0px", + borderWidth: '0px', borderBottomWidth: 1, - borderStyle: "solid", - borderColor: "rgb(229,231,235)", + borderStyle: 'solid', + borderColor: 'rgb(229,231,235)', }} > 1 @@ -207,10 +207,10 @@ export const component = ( style={{ paddingTop: 8, paddingBottom: 8, - borderWidth: "0px", + borderWidth: '0px', borderBottomWidth: 1, - borderStyle: "solid", - borderColor: "rgb(229,231,235)", + borderStyle: 'solid', + borderColor: 'rgb(229,231,235)', }} > $40.00 @@ -222,17 +222,17 @@ export const component = (
    - +
    +
    + - +
    React Email logo
    Acme corporation @@ -30,10 +30,10 @@ export const component = ( Think different @@ -44,10 +44,10 @@ export const component = ( @@ -85,9 +85,9 @@ export const component = ( marginTop: 8, marginBottom: 8, fontSize: 16, - lineHeight: "24px", + lineHeight: '24px', fontWeight: 600, - color: "rgb(107,114,128)", + color: 'rgb(107,114,128)', }} > 123 Main Street Anytown, CA 12345 @@ -95,11 +95,11 @@ export const component = ( mail@example.com +123456789 diff --git a/apps/web/components/footer-with-one-column/tailwind.tsx b/apps/web/components/footer-with-one-column/tailwind.tsx index 3d2e5532af..e2b1562514 100644 --- a/apps/web/components/footer-with-one-column/tailwind.tsx +++ b/apps/web/components/footer-with-one-column/tailwind.tsx @@ -1,5 +1,5 @@ -import { Column, Link, Img, Row, Section, Text } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Column, Img, Link, Row, Section, Text } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = (
    diff --git a/apps/web/components/footer-with-two-columns/inline-styles.tsx b/apps/web/components/footer-with-two-columns/inline-styles.tsx index bcb141430f..8bab47077a 100644 --- a/apps/web/components/footer-with-two-columns/inline-styles.tsx +++ b/apps/web/components/footer-with-two-columns/inline-styles.tsx @@ -1,5 +1,5 @@ -import { Column, Link, Img, Row, Section, Text } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Column, Img, Link, Row, Section, Text } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = (
    @@ -15,9 +15,9 @@ export const component = ( marginTop: 8, marginBottom: 8, fontSize: 16, - lineHeight: "24px", + lineHeight: '24px', fontWeight: 600, - color: "rgb(17,24,39)", + color: 'rgb(17,24,39)', }} > Acme corporation @@ -25,10 +25,10 @@ export const component = ( Think different @@ -36,14 +36,14 @@ export const component = ( @@ -78,9 +78,9 @@ export const component = ( marginTop: 8, marginBottom: 8, fontSize: 16, - lineHeight: "24px", + lineHeight: '24px', fontWeight: 600, - color: "rgb(107,114,128)", + color: 'rgb(107,114,128)', }} > 123 Main Street Anytown, CA 12345 @@ -88,11 +88,11 @@ export const component = ( mail@example.com +123456789 diff --git a/apps/web/components/footer-with-two-columns/tailwind.tsx b/apps/web/components/footer-with-two-columns/tailwind.tsx index f0db51d24f..58609b78bd 100644 --- a/apps/web/components/footer-with-two-columns/tailwind.tsx +++ b/apps/web/components/footer-with-two-columns/tailwind.tsx @@ -1,5 +1,5 @@ -import { Column, Link, Img, Row, Section, Text } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Column, Img, Link, Row, Section, Text } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = (
    diff --git a/apps/web/components/four-images-in-a-grid/inline-styles.tsx b/apps/web/components/four-images-in-a-grid/inline-styles.tsx index 64bc6930c5..d9d564355e 100644 --- a/apps/web/components/four-images-in-a-grid/inline-styles.tsx +++ b/apps/web/components/four-images-in-a-grid/inline-styles.tsx @@ -1,5 +1,5 @@ -import { Column, Link, Img, Row, Section, Text } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Column, Img, Link, Row, Section, Text } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = (
    @@ -7,23 +7,23 @@ export const component = ( Our products Elegant Style @@ -32,8 +32,8 @@ export const component = ( style={{ marginTop: 8, fontSize: 16, - lineHeight: "24px", - color: "rgb(107,114,128)", + lineHeight: '24px', + color: 'rgb(107,114,128)', }} > We spent two years in development to bring you the next generation of @@ -44,60 +44,60 @@ export const component = (
    - + Stagg Electric Kettle - + Ode Grinder - + Atmos Vacuum Canister - + Clyde Electric Kettle diff --git a/apps/web/components/four-images-in-a-grid/tailwind.tsx b/apps/web/components/four-images-in-a-grid/tailwind.tsx index 4dda2fda3e..a4fd96783f 100644 --- a/apps/web/components/four-images-in-a-grid/tailwind.tsx +++ b/apps/web/components/four-images-in-a-grid/tailwind.tsx @@ -1,5 +1,5 @@ -import { Column, Link, Img, Row, Section, Text } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Column, Img, Link, Row, Section, Text } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = (
    diff --git a/apps/web/components/header-and-four-paragraphs-and-two-columns/inline-styles.tsx b/apps/web/components/header-and-four-paragraphs-and-two-columns/inline-styles.tsx index 7a438bd177..7acbbf8e17 100644 --- a/apps/web/components/header-and-four-paragraphs-and-two-columns/inline-styles.tsx +++ b/apps/web/components/header-and-four-paragraphs-and-two-columns/inline-styles.tsx @@ -1,16 +1,16 @@ -import { Img, Row, Section, Text } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Img, Row, Section, Text } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = (
    Modern Comfort @@ -19,8 +19,8 @@ export const component = ( style={{ marginTop: 8, fontSize: 16, - lineHeight: "24px", - color: "rgb(107,114,128)", + lineHeight: '24px', + color: 'rgb(107,114,128)', }} > Experience contemporary bliss with our sleek and cozy furniture @@ -28,13 +28,13 @@ export const component = ( - + - +
    Timeless Beauty Indulge in the enduring beauty of our furniture pieces, crafted with @@ -71,9 +71,9 @@ export const component = ( Effortless Function Discover furniture that seamlessly combines form and function, @@ -108,13 +108,13 @@ export const component = (
    Customize Your Space Personalize your living environment with our customizable furniture @@ -151,9 +151,9 @@ export const component = ( Outdoor Serenity Create a tranquil outdoor retreat with our premium outdoor diff --git a/apps/web/components/header-and-four-paragraphs-and-two-columns/tailwind.tsx b/apps/web/components/header-and-four-paragraphs-and-two-columns/tailwind.tsx index 7f2fd964c9..bc0703d0d3 100644 --- a/apps/web/components/header-and-four-paragraphs-and-two-columns/tailwind.tsx +++ b/apps/web/components/header-and-four-paragraphs-and-two-columns/tailwind.tsx @@ -1,5 +1,5 @@ -import { Img, Row, Section, Text } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Img, Row, Section, Text } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = (
    diff --git a/apps/web/components/header-and-four-paragraphs/inline-styles.tsx b/apps/web/components/header-and-four-paragraphs/inline-styles.tsx index 3986ed9677..f8af8f80ef 100644 --- a/apps/web/components/header-and-four-paragraphs/inline-styles.tsx +++ b/apps/web/components/header-and-four-paragraphs/inline-styles.tsx @@ -1,17 +1,17 @@ /* eslint-disable react/no-unescaped-entities */ -import { Column, Img, Row, Section, Text } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Column, Img, Row, Section, Text } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = (
    Unleash Timeless Comfort in Your Home @@ -20,8 +20,8 @@ export const component = ( style={{ marginTop: 8, fontSize: 16, - lineHeight: "24px", - color: "rgb(107,114,128)", + lineHeight: '24px', + color: 'rgb(107,114,128)', }} > Elevate your space with impeccable quality, and versatile styles. @@ -31,9 +31,9 @@ export const component = ( Multifunctional Marvels Discover comfort and style with our exquisite furniture collection at @@ -71,7 +71,7 @@ export const component = ( rocket icon Impeccable Quality Quality is our priority. Our furniture is meticulously crafted by @@ -111,9 +111,9 @@ export const component = ( Versatile Styles Express your unique style with our diverse range of furniture options. @@ -151,7 +151,7 @@ export const component = ( cube icon Personalized Service Experience personalised service at Acme. Our friendly team is diff --git a/apps/web/components/header-and-four-paragraphs/tailwind.tsx b/apps/web/components/header-and-four-paragraphs/tailwind.tsx index 40fba29f6d..3a912b6fd4 100644 --- a/apps/web/components/header-and-four-paragraphs/tailwind.tsx +++ b/apps/web/components/header-and-four-paragraphs/tailwind.tsx @@ -1,6 +1,6 @@ /* eslint-disable react/no-unescaped-entities */ -import { Column, Img, Row, Section, Text } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Column, Img, Row, Section, Text } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = (
    diff --git a/apps/web/components/header-and-list-items/inline-styles.tsx b/apps/web/components/header-and-list-items/inline-styles.tsx index 415b99cc69..0182f81837 100644 --- a/apps/web/components/header-and-list-items/inline-styles.tsx +++ b/apps/web/components/header-and-list-items/inline-styles.tsx @@ -1,5 +1,5 @@ -import { Column, Hr, Img, Row, Section, Text } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Column, Hr, Img, Row, Section, Text } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = (
    @@ -7,11 +7,11 @@ export const component = ( Functional Style @@ -20,8 +20,8 @@ export const component = ( style={{ marginTop: 8, fontSize: 16, - lineHeight: "24px", - color: "rgb(107,114,128)", + lineHeight: '24px', + color: 'rgb(107,114,128)', }} > Combine practicality and style effortlessly with our furniture, @@ -32,19 +32,19 @@ export const component = (
    - + heart icon - + Versatile Comfort Experience ultimate comfort and versatility with our furniture @@ -81,19 +81,19 @@ export const component = (
    - + rocket icon - + Luxurious Retreat Transform your space into a haven of relaxation with our indulgent @@ -130,13 +130,13 @@ export const component = (
    diff --git a/apps/web/components/header-and-list-items/tailwind.tsx b/apps/web/components/header-and-list-items/tailwind.tsx index e7d875b095..9be3de6740 100644 --- a/apps/web/components/header-and-list-items/tailwind.tsx +++ b/apps/web/components/header-and-list-items/tailwind.tsx @@ -1,5 +1,5 @@ -import { Column, Hr, Img, Row, Section, Text } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Column, Hr, Img, Row, Section, Text } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = (
    diff --git a/apps/web/components/header-and-numbered-list-items/inline-styles.tsx b/apps/web/components/header-and-numbered-list-items/inline-styles.tsx index b6e3a2e6fc..4c1c43fc32 100644 --- a/apps/web/components/header-and-numbered-list-items/inline-styles.tsx +++ b/apps/web/components/header-and-numbered-list-items/inline-styles.tsx @@ -1,5 +1,5 @@ -import { Column, Hr, Row, Section, Text } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Column, Hr, Row, Section, Text } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = (
    @@ -7,11 +7,11 @@ export const component = ( Functional Style @@ -20,8 +20,8 @@ export const component = ( style={{ marginTop: 8, fontSize: 16, - lineHeight: "24px", - color: "rgb(107,114,128)", + lineHeight: '24px', + color: 'rgb(107,114,128)', }} > Combine practicality and style effortlessly with our furniture, @@ -31,35 +31,35 @@ export const component = (
    - - + +
    1 @@ -67,25 +67,25 @@ export const component = (
    - + Versatile Comfort Experience ultimate comfort and versatility with our furniture @@ -96,35 +96,35 @@ export const component = (
    - - + +
    2 @@ -132,25 +132,25 @@ export const component = (
    - + Luxurious Retreat Transform your space into a haven of relaxation with our indulgent @@ -161,35 +161,35 @@ export const component = (
    - - + +
    3 @@ -197,25 +197,25 @@ export const component = (
    - + Unleash Creativity Unleash your inner designer with our customizable furniture options, @@ -226,35 +226,35 @@ export const component = (
    - - + +
    4 @@ -262,25 +262,25 @@ export const component = (
    - + Elevate Outdoor Living Take your outdoor space to new heights with our premium outdoor @@ -291,14 +291,14 @@ export const component = (
    diff --git a/apps/web/components/header-and-numbered-list-items/tailwind.tsx b/apps/web/components/header-and-numbered-list-items/tailwind.tsx index 2ce1688840..c57738608b 100644 --- a/apps/web/components/header-and-numbered-list-items/tailwind.tsx +++ b/apps/web/components/header-and-numbered-list-items/tailwind.tsx @@ -1,5 +1,5 @@ -import { Column, Hr, Row, Section, Text } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Column, Hr, Row, Section, Text } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = (
    diff --git a/apps/web/components/header-and-three-centered-paragraphs/inline-styles.tsx b/apps/web/components/header-and-three-centered-paragraphs/inline-styles.tsx index 450819eda0..8eb6fb62aa 100644 --- a/apps/web/components/header-and-three-centered-paragraphs/inline-styles.tsx +++ b/apps/web/components/header-and-three-centered-paragraphs/inline-styles.tsx @@ -1,5 +1,5 @@ -import { Column, Img, Row, Section, Text } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Column, Img, Row, Section, Text } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = (
    Modern Comfort @@ -24,8 +24,8 @@ export const component = ( style={{ marginTop: 8, fontSize: 16, - lineHeight: "24px", - color: "rgb(107,114,128)", + lineHeight: '24px', + color: 'rgb(107,114,128)', }} > Experience contemporary bliss with our sleek and cozy furniture @@ -36,9 +36,9 @@ export const component = ( Timeless Charm Classic designs that never go out of style. Experience enduring @@ -75,9 +75,9 @@ export const component = ( Functional Beauty Seamlessly blending form and function. Furniture that enhances your @@ -114,9 +114,9 @@ export const component = ( Endless Comfort Sink into pure relaxation. Discover furniture that embraces your diff --git a/apps/web/components/header-and-three-centered-paragraphs/tailwind.tsx b/apps/web/components/header-and-three-centered-paragraphs/tailwind.tsx index 0c87735b2c..f80d4214d1 100644 --- a/apps/web/components/header-and-three-centered-paragraphs/tailwind.tsx +++ b/apps/web/components/header-and-three-centered-paragraphs/tailwind.tsx @@ -1,5 +1,5 @@ -import { Column, Img, Row, Section, Text } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Column, Img, Row, Section, Text } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = (
    diff --git a/apps/web/components/header-with-centered-menu/inline-styles.tsx b/apps/web/components/header-with-centered-menu/inline-styles.tsx index 780591046f..b144784361 100644 --- a/apps/web/components/header-with-centered-menu/inline-styles.tsx +++ b/apps/web/components/header-with-centered-menu/inline-styles.tsx @@ -1,5 +1,5 @@ -import { Column, Link, Img, Row, Section } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Column, Img, Link, Row, Section } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = (
    About @@ -40,8 +40,8 @@ export const component = ( Blog @@ -51,8 +51,8 @@ export const component = ( Company @@ -62,8 +62,8 @@ export const component = ( Features diff --git a/apps/web/components/header-with-centered-menu/tailwind.tsx b/apps/web/components/header-with-centered-menu/tailwind.tsx index 22a26c7d7e..3db2a06a76 100644 --- a/apps/web/components/header-with-centered-menu/tailwind.tsx +++ b/apps/web/components/header-with-centered-menu/tailwind.tsx @@ -1,5 +1,5 @@ -import { Column, Link, Img, Row, Section } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Column, Img, Link, Row, Section } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = (
    diff --git a/apps/web/components/header-with-side-menu/inline-styles.tsx b/apps/web/components/header-with-side-menu/inline-styles.tsx index aa1ed23ea9..8798902b20 100644 --- a/apps/web/components/header-with-side-menu/inline-styles.tsx +++ b/apps/web/components/header-with-side-menu/inline-styles.tsx @@ -1,5 +1,5 @@ -import { Column, Link, Img, Row, Section } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Column, Img, Link, Row, Section } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = (
    - + React Email logo About @@ -33,7 +33,7 @@ export const component = ( Company @@ -41,7 +41,7 @@ export const component = ( Blog diff --git a/apps/web/components/header-with-side-menu/tailwind.tsx b/apps/web/components/header-with-side-menu/tailwind.tsx index 8dfbc69ec5..ec66219348 100644 --- a/apps/web/components/header-with-side-menu/tailwind.tsx +++ b/apps/web/components/header-with-side-menu/tailwind.tsx @@ -1,5 +1,5 @@ -import { Column, Link, Img, Row, Section } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Column, Img, Link, Row, Section } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = (
    diff --git a/apps/web/components/header-with-social-icons/inline-styles.tsx b/apps/web/components/header-with-social-icons/inline-styles.tsx index 0443d3cf31..e380d36b27 100644 --- a/apps/web/components/header-with-social-icons/inline-styles.tsx +++ b/apps/web/components/header-with-social-icons/inline-styles.tsx @@ -1,5 +1,5 @@ -import { Column, Img, Link, Row, Section } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Column, Img, Link, Row, Section } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = (
    - + React Email logo diff --git a/apps/web/components/image-with-varying-sizes/inline-styles.tsx b/apps/web/components/image-with-varying-sizes/inline-styles.tsx index e68d4a33a4..246501d490 100644 --- a/apps/web/components/image-with-varying-sizes/inline-styles.tsx +++ b/apps/web/components/image-with-varying-sizes/inline-styles.tsx @@ -1,5 +1,5 @@ -import { Img } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Img } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = ( <> @@ -7,19 +7,19 @@ export const component = ( alt="Atoms Vacuum Canister" height={150} src="/static/atmos-vacuum-canister.jpg" - style={{ borderRadius: 12, margin: "12px auto 12px" }} + style={{ borderRadius: 12, margin: '12px auto 12px' }} /> Atoms Vacuum Canister Atoms Vacuum Canister ); diff --git a/apps/web/components/image-with-varying-sizes/tailwind.tsx b/apps/web/components/image-with-varying-sizes/tailwind.tsx index 810aa33ef2..2a32c6267c 100644 --- a/apps/web/components/image-with-varying-sizes/tailwind.tsx +++ b/apps/web/components/image-with-varying-sizes/tailwind.tsx @@ -1,5 +1,5 @@ -import { Img } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Img } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = ( <> diff --git a/apps/web/components/images-on-horizontal-grid/inline-styles.tsx b/apps/web/components/images-on-horizontal-grid/inline-styles.tsx index 3800482b82..c369c51897 100644 --- a/apps/web/components/images-on-horizontal-grid/inline-styles.tsx +++ b/apps/web/components/images-on-horizontal-grid/inline-styles.tsx @@ -1,5 +1,5 @@ -import { Column, Link, Img, Row, Section, Text } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Column, Img, Link, Row, Section, Text } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = (
    @@ -7,23 +7,23 @@ export const component = ( Collections Bundle & Save @@ -32,8 +32,8 @@ export const component = ( style={{ marginTop: 8, fontSize: 16, - lineHeight: "24px", - color: "rgb(107,114,128)", + lineHeight: '24px', + color: 'rgb(107,114,128)', }} > Award-winning grinders and burrs for brewing like a barista at home. @@ -42,7 +42,7 @@ export const component = (
    - +
    		@@ -51,9 +51,9 @@ export const component = ( height={152} src="/static/grinder-collection.jpg" style={{ - width: "100%", + width: '100%', borderRadius: 12, - objectFit: "cover", + objectFit: 'cover', }} /> @@ -67,9 +67,9 @@ export const component = ( height={152} src="/static/bundle-collection.jpg" style={{ - width: "100%", + width: '100%', borderRadius: 12, - objectFit: "cover", + objectFit: 'cover', }} /> @@ -78,7 +78,7 @@ export const component = ( diff --git a/apps/web/components/images-on-horizontal-grid/tailwind.tsx b/apps/web/components/images-on-horizontal-grid/tailwind.tsx index 1410622b0f..c9e94f6d22 100644 --- a/apps/web/components/images-on-horizontal-grid/tailwind.tsx +++ b/apps/web/components/images-on-horizontal-grid/tailwind.tsx @@ -1,5 +1,5 @@ -import { Column, Link, Img, Row, Section, Text } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Column, Img, Link, Row, Section, Text } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = (
    diff --git a/apps/web/components/images-on-vertical-grid/inline-styles.tsx b/apps/web/components/images-on-vertical-grid/inline-styles.tsx index 99017ecdc5..1be53c30a8 100644 --- a/apps/web/components/images-on-vertical-grid/inline-styles.tsx +++ b/apps/web/components/images-on-vertical-grid/inline-styles.tsx @@ -1,5 +1,5 @@ -import { Column, Link, Img, Row, Section, Text } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Column, Img, Link, Row, Section, Text } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = (
    @@ -7,23 +7,23 @@ export const component = ( Drinkware Ceramic Mugs @@ -32,8 +32,8 @@ export const component = ( style={{ marginTop: 8, fontSize: 16, - lineHeight: "24px", - color: "rgb(107,114,128)", + lineHeight: '24px', + color: 'rgb(107,114,128)', }} > Picasso your pour with a sleek ceramic cup designed for beautiful @@ -48,23 +48,23 @@ export const component = ( alt="Mugs Collection" height={288} src="/static/mugs-collection.jpg" - style={{ borderRadius: 12, objectFit: "cover" }} + style={{ borderRadius: 12, objectFit: 'cover' }} width="100%" /> - + Monty Art Cup - 1 - + Monty Art Cup - 2 diff --git a/apps/web/components/images-on-vertical-grid/tailwind.tsx b/apps/web/components/images-on-vertical-grid/tailwind.tsx index c7b626438e..c7b8a8edf5 100644 --- a/apps/web/components/images-on-vertical-grid/tailwind.tsx +++ b/apps/web/components/images-on-vertical-grid/tailwind.tsx @@ -1,5 +1,5 @@ -import { Column, Link, Img, Row, Section, Text } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Column, Img, Link, Row, Section, Text } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = (
    diff --git a/apps/web/components/link-inline-with-text/index.tsx b/apps/web/components/link-inline-with-text/index.tsx index 1f065371ac..4de022200a 100644 --- a/apps/web/components/link-inline-with-text/index.tsx +++ b/apps/web/components/link-inline-with-text/index.tsx @@ -1,5 +1,5 @@ -import { Link, Text } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Link, Text } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = ( diff --git a/apps/web/components/markdown-with-container-styles/index.tsx b/apps/web/components/markdown-with-container-styles/index.tsx index d91b39cd8c..ca63991058 100644 --- a/apps/web/components/markdown-with-container-styles/index.tsx +++ b/apps/web/components/markdown-with-container-styles/index.tsx @@ -1,5 +1,5 @@ -import { Markdown } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Markdown } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = ( {`## Hello, this is my email template diff --git a/apps/web/components/multiple-headings/inline-styles.tsx b/apps/web/components/multiple-headings/inline-styles.tsx index 6c8db98e2f..d46f2f48c6 100644 --- a/apps/web/components/multiple-headings/inline-styles.tsx +++ b/apps/web/components/multiple-headings/inline-styles.tsx @@ -1,24 +1,24 @@ -import { Heading } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Heading } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = ( <> - + Jordan Walke - + Andrew Clark - + Dan Abramov - + Jason Bonta - + Joe Savona - + Josh Story diff --git a/apps/web/components/multiple-headings/tailwind.tsx b/apps/web/components/multiple-headings/tailwind.tsx index 0f2d006dd3..4186149440 100644 --- a/apps/web/components/multiple-headings/tailwind.tsx +++ b/apps/web/components/multiple-headings/tailwind.tsx @@ -1,5 +1,5 @@ -import { Heading } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Heading } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = ( <> diff --git a/apps/web/components/one-product-with-image-on-the-left/inline-styles.tsx b/apps/web/components/one-product-with-image-on-the-left/inline-styles.tsx index 571d87a6ca..c03b234eed 100644 --- a/apps/web/components/one-product-with-image-on-the-left/inline-styles.tsx +++ b/apps/web/components/one-product-with-image-on-the-left/inline-styles.tsx @@ -1,16 +1,16 @@ -import { Button, Img, Section, Text } from "@react-email/components"; -import { Layout } from "../_components/layout"; +import { Button, Img, Section, Text } from '@react-email/components'; +import { Layout } from '../_components/layout'; export const component = (
    - - - +
    + + -
    + Great Timepiece @@ -41,8 +41,8 @@ export const component = ( style={{ marginTop: 8, fontSize: 16, - lineHeight: "24px", - color: "rgb(107,114,128)", + lineHeight: '24px', + color: 'rgb(107,114,128)', }} > Renowned for their minimalist design and high functionality, @@ -52,9 +52,9 @@ export const component = ( style={{ marginTop: 8, fontSize: 18, - lineHeight: "28px", + lineHeight: '28px', fontWeight: 600, - color: "rgb(17,24,39)", + color: 'rgb(17,24,39)', }} > $120.00 @@ -62,16 +62,16 @@ export const component = (