Skip to content

Commit

Permalink
🤖 Merge PR #56254 [mjml-react] Add Explicit types for children by @ep…
Browse files Browse the repository at this point in the history 
…s1lon

* [mjml-react] Add Explicit types for children

https://github.com/wix-incubator/mjml-react/blob/7894e20e52db6340e8bad2cbb731f6a3f2430db4/src/mjml-wrapper.js#L8
https://github.com/wix-incubator/mjml-react/blob/7894e20e52db6340e8bad2cbb731f6a3f2430db4/src/mjml-breakpoint.js#L10
https://github.com/wix-incubator/mjml-react/blob/7894e20e52db6340e8bad2cbb731f6a3f2430db4/src/mjml-font.js#L7
https://github.com/wix-incubator/mjml-react/blob/7894e20e52db6340e8bad2cbb731f6a3f2430db4/src/mjml-button.js#L8
https://github.com/wix-incubator/mjml-react/blob/7894e20e52db6340e8bad2cbb731f6a3f2430db4/src/mjml-column.js#L8
https://github.com/wix-incubator/mjml-react/blob/7894e20e52db6340e8bad2cbb731f6a3f2430db4/src/mjml-divider.js#L7
https://github.com/wix-incubator/mjml-react/blob/7894e20e52db6340e8bad2cbb731f6a3f2430db4/src/mjml-group.js#L8
https://github.com/wix-incubator/mjml-react/blob/7894e20e52db6340e8bad2cbb731f6a3f2430db4/src/mjml-hero.js#L8
https://github.com/wix-incubator/mjml-react/blob/7894e20e52db6340e8bad2cbb731f6a3f2430db4/src/mjml-image.js#L7
https://github.com/wix-incubator/mjml-react/blob/7894e20e52db6340e8bad2cbb731f6a3f2430db4/src/mjml-navbar.js#L8
https://github.com/wix-incubator/mjml-react/blob/7894e20e52db6340e8bad2cbb731f6a3f2430db4/src/mjml-navbar-link.js#L8
https://github.com/wix-incubator/mjml-react/blob/7894e20e52db6340e8bad2cbb731f6a3f2430db4/src/mjml-spacer.js#L7
https://github.com/wix-incubator/mjml-react/blob/7894e20e52db6340e8bad2cbb731f6a3f2430db4/src/mjml-table.js#L8
https://github.com/wix-incubator/mjml-react/blob/7894e20e52db6340e8bad2cbb731f6a3f2430db4/src/mjml-wrapper.js#L8
https://github.com/wix-incubator/mjml-react/blob/7894e20e52db6340e8bad2cbb731f6a3f2430db4/src/mjml-carousel.js#L8
https://github.com/wix-incubator/mjml-react/blob/7894e20e52db6340e8bad2cbb731f6a3f2430db4/src/mjml-carousel-image.js#L10
https://github.com/wix-incubator/mjml-react/blob/7894e20e52db6340e8bad2cbb731f6a3f2430db4/src/mjml-social-element.js#L8
https://github.com/wix-incubator/mjml-react/blob/7894e20e52db6340e8bad2cbb731f6a3f2430db4/src/mjml-social.js#L8
https://github.com/wix-incubator/mjml-react/blob/7894e20e52db6340e8bad2cbb731f6a3f2430db4/src/mjml-section.js#L8
https://github.com/wix-incubator/mjml-react/blob/7894e20e52db6340e8bad2cbb731f6a3f2430db4/src/mjml-column.js#L8
https://github.com/wix-incubator/mjml-react/blob/7894e20e52db6340e8bad2cbb731f6a3f2430db4/src/mjml-button.js#L8
https://github.com/wix-incubator/mjml-react/blob/7894e20e52db6340e8bad2cbb731f6a3f2430db4/src/mjml-text.js#L8
https://github.com/wix-incubator/mjml-react/blob/7894e20e52db6340e8bad2cbb731f6a3f2430db4/src/mjml-body.js#L8

* Will only throw once we remove implicit children

* Adjust children after propTypes changes

* Revert MjmlFont test changes
  • Loading branch information
@eps1lon
eps1lon committed Nov 8, 2021
1 parent a3cdd59 commit b5c13be
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 10 deletions.
31 changes: 25 additions & 6 deletions types/mjml-react/index.d.ts
View file
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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

0 comments on commit b5c13be

Please sign in to comment.