Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[mjml-react] Add Explicit types for children #56254

Merged
merged 4 commits into from
Nov 8, 2021
Merged

[mjml-react] Add Explicit types for children #56254

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f952f49
[mjml-react] Add Explicit types for children
eps1lon Oct 4, 2021
c498255
Will only throw once we remove implicit children
eps1lon Oct 14, 2021
89bc1fc
Adjust children after propTypes changes
eps1lon Nov 5, 2021
a4ed8d5
Revert MjmlFont test changes
eps1lon Nov 5, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
31 changes: 25 additions & 6 deletions types/mjml-react/index.d.ts
View file
Open in desktop
Expand Up @@ -75,17 +75,18 @@ export interface HrefProps {

// mjml
export interface MjmlProps {
children?: React.ReactNode;
lang?: string | undefined;
owa?: string | undefined;
}

export class Mjml extends React.Component<MjmlProps> { }

// mj-head
export class MjmlHead extends React.Component { }
export class MjmlHead extends React.Component<{ children?: React.ReactNode }> { }

// mj-attributes
export class MjmlAttributes extends React.Component { }
export class MjmlAttributes extends React.Component<{ children?: React.ReactNode }> { }
export class MjmlAll extends React.Component<{ [key: string]: any; children?: React.ReactNode | undefined }> { }
export class MjmlClass extends React.Component<{ [key: string]: any; children?: React.ReactNode | undefined; name: string }> { }

Expand All @@ -98,6 +99,7 @@ export class MjmlBreakpoint extends React.Component<MjmlBreakpointProps> { }

// mj-body
export interface MjmlBodyProps {
children?: React.ReactNode;
width ?: number | undefined;
backgroundColor?: React.CSSProperties['backgroundColor'] | undefined;
}
Expand All @@ -106,25 +108,27 @@ export class MjmlBody extends React.Component<MjmlBodyProps & ClassNameProps> {

// mj-font
export interface MjmlFontProps {
children?: React.ReactNode;
href?: string | undefined;
name?: string | undefined;
}

export class MjmlFont extends React.Component<MjmlFontProps> { }

// mj-preview
export class MjmlPreview extends React.Component<{ children: string }> { }
export class MjmlPreview extends React.Component<{ children?: string | undefined }> { }

// mj-style
export class MjmlStyle extends React.Component<{ children: string, inline?: boolean | undefined }> { }
export class MjmlStyle extends React.Component<{ children?: string | undefined, inline?: boolean | undefined }> { }

// mj-title
export class MjmlTitle extends React.Component<{ children: string }> { }
export class MjmlTitle extends React.Component<{ children?: string | undefined }> { }

// mj-accordion
export class MjmlAccordion extends React.Component<MjmlAccordionElementProps> { }

export interface MjmlAccordionElementProps {
children?: React.ReactNode;
fontFamily?: string | undefined;
iconAlign?: string | undefined;
iconWrappedUrl?: string | undefined;
Expand All @@ -140,6 +144,7 @@ export interface MjmlAccordionElementProps {
export class MjmlAccordionElement extends React.Component<MjmlAccordionElementProps & ClassNameProps> { }

export interface MjmlAccordionTextProps {
children?: React.ReactNode;
color?: React.CSSProperties['color'] | undefined;
fontFamily?: string | undefined;
fontSize?: string | number | undefined;
Expand All @@ -149,6 +154,7 @@ export interface MjmlAccordionTextProps {
export class MjmlAccordionText extends React.Component<MjmlAccordionTextProps & PaddingProps & ClassNameProps> { }

export interface MjmlAccordionTitleProps {
children?: React.ReactNode;
color?: React.CSSProperties['color'] | undefined;
backgroundColor?: React.CSSProperties['backgroundColor'] | undefined;
fontFamily?: string | undefined;
Expand All @@ -160,6 +166,7 @@ export class MjmlAccordionTitle extends React.Component<MjmlAccordionTitleProps
// mj-button
export interface MjmlButtonProps {
backgroundColor?: React.CSSProperties['backgroundColor'] | undefined;
children?: React.ReactNode;
containerBackgroundColor?: React.CSSProperties['backgroundColor'] | undefined;
fontStyle?: string | undefined;
fontSize?: string | number | undefined;
Expand All @@ -184,6 +191,7 @@ export interface MjmlCarouselProps {
backgroundColor?: React.CSSProperties['backgroundColor'] | undefined;
align?: string | undefined;
borderRadius?: string | number | undefined;
children?: React.ReactNode;
thumbnails?: 'hidden' | 'visible' | undefined;
tbBorder?: React.CSSProperties['border'] | undefined;
tbBorderRadius?: React.CSSProperties['borderRadius'] | undefined;
Expand All @@ -207,6 +215,7 @@ export interface MjmlCarouselImageProps {
export class MjmlCarouselImage extends React.Component<MjmlCarouselImageProps & ClassNameProps & HrefProps> { }

export interface MjmlColumnProps {
children?: React.ReactNode;
width?: string | number | undefined;
verticalAlign?: React.CSSProperties['verticalAlign'] | undefined;
backgroundColor?: React.CSSProperties['backgroundColor'] | undefined;
Expand All @@ -228,6 +237,7 @@ export class MjmlDivider extends React.Component<MjmlDividerProps & ClassNamePro

// mj-group
export interface MjmlGroupProps {
children?: React.ReactNode;
width?: string | number | undefined;
verticalAlign?: React.CSSProperties['verticalAlign'] | undefined;
backgroundColor?: React.CSSProperties['backgroundColor'] | undefined;
Expand All @@ -237,6 +247,7 @@ export class MjmlGroup extends React.Component<MjmlGroupProps & ClassNameProps>

// mj-hero
export interface MjmlHeroProps {
children?: React.ReactNode;
width?: string | number | undefined;
height?: string | number | undefined;
mode?: 'fluid-height' | 'fixed-height' | undefined;
Expand Down Expand Up @@ -270,6 +281,7 @@ export class MjmlImage extends React.Component<MjmlImageProps & PaddingProps & C
// mj-navbar
export interface MjmlNavbarProps {
baseUrl?: string | undefined;
children?: React.ReactNode;
hamburger?: 'hamburger' | undefined;
align?: string | undefined;
icoOpen?: string | undefined;
Expand All @@ -290,6 +302,7 @@ export interface MjmlNavbarProps {
export class MjmlNavbar extends React.Component<MjmlNavbarProps> { }

export interface MjmlNavbarLinkProps {
children?: React.ReactNode;
color?: React.CSSProperties['color'] | undefined;
fontFamily?: string | undefined;
fontSize?: string | number | undefined;
Expand All @@ -303,10 +316,11 @@ export interface MjmlNavbarLinkProps {
export class MjmlNavbarLink extends React.Component<MjmlNavbarLinkProps & HrefProps & PaddingProps> { }

// mj-raw
export class MjmlRaw extends React.Component { }
export class MjmlRaw extends React.Component<{ children?: React.ReactNode }> { }

// mj-section
export interface MjmlSectionProps {
children?: React.ReactNode;
fullWidth?: boolean | undefined;
backgroundColor?: React.CSSProperties['backgroundColor'] | undefined;
backgroundUrl?: string | undefined;
Expand All @@ -322,6 +336,7 @@ export class MjmlSection extends React.Component<MjmlSectionProps & BorderProps
// mj-social
export interface MjmlSocialProps {
borderRadius?: string | number | undefined;
children?: React.ReactNode;
fontFamily?: string | undefined;
fontSize?: string | number | undefined;
iconSize?: string | undefined;
Expand All @@ -340,6 +355,7 @@ export class MjmlSocial extends React.Component<MjmlSocialProps & PaddingProps &
export interface MjmlSocialElementProps {
borderRadius?: string | number | undefined;
backgroundColor?: React.CSSProperties['backgroundColor'] | undefined;
children?: React.ReactNode;
fontFamily?: string | undefined;
fontSize?: string | number | undefined;
iconSize?: string | undefined;
Expand Down Expand Up @@ -371,6 +387,7 @@ export class MjmlSpacer extends React.Component<MjmlSpacerProps & BorderProps &

// mj-table
export interface MjmlTableProps {
children?: React.ReactNode;
color?: React.CSSProperties['color'] | undefined;
cellpadding?: string | undefined;
cellspacing?: string | undefined;
Expand All @@ -390,6 +407,7 @@ export class MjmlTable extends React.Component<MjmlTableProps & PaddingProps & C

// mj-text
export interface MjmlTextProps {
children?: React.ReactNode;
color?: React.CSSProperties['color'] | undefined;
fontFamily?: string | undefined;
fontSize?: string | number | undefined;
Expand All @@ -408,6 +426,7 @@ export class MjmlText extends React.Component<MjmlTextProps & PaddingProps & Cla

// mj-wrapper
export interface MjmlWrapperProps {
children?: React.ReactNode;
fullWidth?: boolean | undefined;
backgroundColor?: React.CSSProperties['backgroundColor'] | undefined;
backgroundUrl?: string | undefined;
Expand Down
14 changes: 10 additions & 4 deletions types/mjml-react/mjml-react-tests.tsx
View file
Open in desktop
Expand Up @@ -115,7 +115,7 @@ function renderOutTestEmail() {
// TestMjmlBreakpointTag
{
const minProps: React.ReactNode = <MjmlBreakpoint />;
const maxProps: React.ReactNode = <MjmlBreakpoint width="">child</MjmlBreakpoint>;
const maxProps: React.ReactNode = <MjmlBreakpoint width="" />;
}
// TestMjmlBodyTag
{
Expand All @@ -137,15 +137,16 @@ function renderOutTestEmail() {
}
// TestMjmlPreviewTag
{
const minMaxProps: React.ReactNode = <MjmlPreview>""</MjmlPreview>;
const minProps: React.ReactNode = <MjmlPreview />;
const maxProps: React.ReactNode = <MjmlPreview>""</MjmlPreview>;

// children cannot be anything other than string
// prettier-ignore
const childError: React.ReactNode = <MjmlPreview><p>""</p></MjmlPreview>; // $ExpectError
}
// TestMjmlStyleTag
{
const minProps: React.ReactNode = <MjmlStyle>""</MjmlStyle>;
const minProps: React.ReactNode = <MjmlStyle />;
const maxProps: React.ReactNode = <MjmlStyle inline>child</MjmlStyle>;

// children cannot be anything other than string
Expand All @@ -154,7 +155,8 @@ function renderOutTestEmail() {
}
// TestMjmlTitleTag
{
const minMaxProps: React.ReactNode = <MjmlTitle>""</MjmlTitle>;
const minProps: React.ReactNode = <MjmlTitle />;
const maxProps: React.ReactNode = <MjmlTitle>""</MjmlTitle>;

// children cannot be anything other than string
// prettier-ignore
Expand Down Expand Up @@ -238,18 +240,22 @@ function renderOutTestEmail() {
{
{
const minProps: React.ReactNode = <MjmlAccordion />;
const maxProps: React.ReactNode = <MjmlAccordion>child</MjmlAccordion>;
}
// MjmlAccordionElement
{
const minProps: React.ReactNode = <MjmlAccordionElement />;
const maxProps: React.ReactNode = <MjmlAccordionElement>child</MjmlAccordionElement>;
}
// MjmlAccordionText
{
const minProps: React.ReactNode = <MjmlAccordionText />;
const maxProps: React.ReactNode = <MjmlAccordionText>child</MjmlAccordionText>;
}
// TestMjmlAccordionTitleTag
{
const minProps: React.ReactNode = <MjmlAccordionTitle />;
const maxProps: React.ReactNode = <MjmlAccordionTitle>child</MjmlAccordionTitle>;
}
}
// TestMjmlCarouselTag
Expand Down