Skip to content

Commit 34c7870

Browse files
gabrielmferngabrielmfern
authored
fix: linting issues for "welcome" emails (#1990)
1 parent cc72e3e commit 34c7870

File tree

4 files changed

+82
-61
lines changed

4 files changed

+82
-61
lines changed

‎apps/demo/emails/welcome/netlify-welcome.tsx

Lines changed: 66 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -17,66 +17,23 @@ import {
1717
import type * as React from 'react';
1818

1919
interface NetlifyWelcomeEmailProps {
20-
steps?: {
20+
steps: {
2121
id: number;
2222
Description: React.ReactNode;
2323
}[];
24-
links?: string[];
24+
links: {
25+
title: string;
26+
href: string;
27+
}[];
2528
}
2629

2730
const baseUrl = process.env.VERCEL_URL
2831
? `https://${process.env.VERCEL_URL}`
2932
: '';
3033

31-
const PropDefaults: NetlifyWelcomeEmailProps = {
32-
steps: [
33-
{
34-
id: 1,
35-
Description: (
36-
<li className="mb-20" key={1}>
37-
<strong>Deploy your first project.</strong>{' '}
38-
<Link>Connect to Git, choose a template</Link>, or manually deploy a
39-
project you've been working on locally.
40-
</li>
41-
),
42-
},
43-
{
44-
id: 2,
45-
Description: (
46-
<li className="mb-20" key={2}>
47-
<strong>Check your deploy logs.</strong> Find out what's included in
48-
your build and watch for errors or failed deploys.{' '}
49-
<Link>Learn how to read your deploy logs</Link>.
50-
</li>
51-
),
52-
},
53-
{
54-
id: 3,
55-
Description: (
56-
<li className="mb-20" key={3}>
57-
<strong>Choose an integration.</strong> Quickly discover, connect, and
58-
configure the right tools for your project with 150+ integrations to
59-
choose from. <Link>Explore the Integrations Hub</Link>.
60-
</li>
61-
),
62-
},
63-
{
64-
id: 4,
65-
Description: (
66-
<li className="mb-20" key={4}>
67-
<strong>Set up a custom domain.</strong> You can register a new domain
68-
and buy it through Netlify or assign a domain you already own to your
69-
site. <Link>Add a custom domain</Link>.
70-
</li>
71-
),
72-
},
73-
],
74-
links: ['Visit the forums', 'Read the docs', 'Contact an expert'],
75-
};
76-
7734
export const NetlifyWelcomeEmail = ({
78-
steps = PropDefaults.steps,
79-
links = PropDefaults.links,
35+
steps,
36+
links,
8037
}: NetlifyWelcomeEmailProps) => {
8138
return (
8239
<Html>
@@ -135,9 +92,12 @@ export const NetlifyWelcomeEmail = ({
13592
<Section className="mt-45">
13693
<Row>
13794
{links?.map((link) => (
138-
<Column key={link}>
139-
<Link className="text-black underline font-bold">
140-
{link}
95+
<Column key={link.title}>
96+
<Link
97+
className="text-black underline font-bold"
98+
href={link.href}
99+
>
100+
{link.title}
141101
</Link>{' '}
142102
<span className="text-green-500">→</span>
143103
</Column>
@@ -167,4 +127,57 @@ export const NetlifyWelcomeEmail = ({
167127
);
168128
};
169129

130+
NetlifyWelcomeEmail.PreviewProps = {
131+
steps: [
132+
{
133+
id: 1,
134+
Description: (
135+
<li className="mb-20" key={1}>
136+
<strong>Deploy your first project.</strong>{' '}
137+
<Link>Connect to Git, choose a template</Link>, or manually deploy a
138+
project you've been working on locally.
139+
</li>
140+
),
141+
},
142+
{
143+
id: 2,
144+
Description: (
145+
<li className="mb-20" key={2}>
146+
<strong>Check your deploy logs.</strong> Find out what's included in
147+
your build and watch for errors or failed deploys.{' '}
148+
<Link>Learn how to read your deploy logs</Link>.
149+
</li>
150+
),
151+
},
152+
{
153+
id: 3,
154+
Description: (
155+
<li className="mb-20" key={3}>
156+
<strong>Choose an integration.</strong> Quickly discover, connect, and
157+
configure the right tools for your project with 150+ integrations to
158+
choose from. <Link>Explore the Integrations Hub</Link>.
159+
</li>
160+
),
161+
},
162+
{
163+
id: 4,
164+
Description: (
165+
<li className="mb-20" key={4}>
166+
<strong>Set up a custom domain.</strong> You can register a new domain
167+
and buy it through Netlify or assign a domain you already own to your
168+
site. <Link>Add a custom domain</Link>.
169+
</li>
170+
),
171+
},
172+
],
173+
links: [
174+
{
175+
title: 'Visit the forums',
176+
href: 'https://www.netlify.com',
177+
},
178+
{ title: 'Read the docs', href: 'https://www.netlify.com' },
179+
{ title: 'Contact an expert', href: 'https://www.netlify.com' },
180+
],
181+
} satisfies NetlifyWelcomeEmailProps;
182+
170183
export default NetlifyWelcomeEmail;

‎apps/demo/emails/welcome/stripe-welcome.tsx

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,10 @@ export const StripeWelcomeEmail = () => (
4444
<Hr style={hr} />
4545
<Text style={paragraph}>
4646
If you haven't finished your integration, you might find our{' '}
47-
<Link style={anchor} href="https://stripe.com/docs">
47+
<Link
48+
style={anchor}
49+
href="https://docs.stripe.com/dashboard/basics"
50+
>
4851
docs
4952
</Link>{' '}
5053
handy.
@@ -61,7 +64,10 @@ export const StripeWelcomeEmail = () => (
6164
instead of your test API keys. Your account can simultaneously be
6265
used for both test and live requests, so you can continue testing
6366
while accepting live payments. Check out our{' '}
64-
<Link style={anchor} href="https://stripe.com/docs/dashboard">
67+
<Link
68+
style={anchor}
69+
href="https://docs.stripe.com/dashboard/basics"
70+
>
6571
tutorial about account basics
6672
</Link>
6773
.
@@ -70,7 +76,7 @@ export const StripeWelcomeEmail = () => (
7076
Finally, we've put together a{' '}
7177
<Link
7278
style={anchor}
73-
href="https://stripe.com/docs/checklist/website"
79+
href="https://docs.stripe.com/get-started/checklist/website"
7480
>
7581
quick checklist
7682
</Link>{' '}
@@ -79,7 +85,7 @@ export const StripeWelcomeEmail = () => (
7985
<Text style={paragraph}>
8086
We'll be here to help you with any step along the way. You can find
8187
answers to most questions and get in touch with us on our{' '}
82-
<Link style={anchor} href="https://support.stripe.com/">
88+
<Link style={anchor} href="https://support.stripe.com">
8389
support site
8490
</Link>
8591
.

‎packages/react-email/src/actions/email-validation/check-compatibility.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -278,7 +278,8 @@ export const checkCompatibility = async (
278278

279279
if (cssEntryType === 'full property') {
280280
if (
281-
snakeToCamel(property.name) === snakeToCamel(entryFullProperty!.name) &&
281+
snakeToCamel(property.name) ===
282+
snakeToCamel(entryFullProperty!.name) &&
282283
property.value === entryFullProperty!.value
283284
) {
284285
addToInsights(property);
@@ -306,7 +307,8 @@ export const checkCompatibility = async (
306307
}
307308
} else if (
308309
entryProperties.some(
309-
(propertyName) => snakeToCamel(property.name) === snakeToCamel(propertyName),
310+
(propertyName) =>
311+
snakeToCamel(property.name) === snakeToCamel(propertyName),
310312
)
311313
) {
312314
addToInsights(property);

‎packages/react-email/src/utils/caniemail/ast/get-object-variables.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { parse } from "@babel/parser";
2-
import { getObjectVariables } from "./get-object-variables";
1+
import { parse } from '@babel/parser';
2+
import { getObjectVariables } from './get-object-variables';
33

44
test('getObjectVariables()', () => {
55
const reactCode = `

0 commit comments

Comments
 (0)