Skip to content

Commit

Permalink
[mjml-react] Add Explicit types for children
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@eps1lon
eps1lon committed Oct 6, 2021
1 parent 6586374 commit 26b264f
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 21 deletions.
15 changes: 15 additions & 0 deletions types/mjml-react/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ export interface HrefProps {

// mjml
export interface MjmlProps {
children: NonNullable<React.ReactNode>;
lang?: string | undefined;
owa?: string | undefined;
}
Expand All @@ -98,6 +99,7 @@ export class MjmlBreakpoint extends React.Component<MjmlBreakpointProps> { }

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

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

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

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

export interface MjmlNavbarLinkProps {
children: NonNullable<React.ReactNode>;
color?: React.CSSProperties['color'] | undefined;
fontFamily?: string | undefined;
fontSize?: string | number | undefined;
Expand All @@ -307,6 +316,7 @@ export class MjmlRaw extends React.Component { }

// mj-section
export interface MjmlSectionProps {
children?: React.ReactNode;
fullWidth?: boolean | undefined;
backgroundColor?: React.CSSProperties['backgroundColor'] | undefined;
backgroundUrl?: string | undefined;
Expand All @@ -322,6 +332,7 @@ export class MjmlSection extends React.Component<MjmlSectionProps & BorderProps
// mj-social
export interface MjmlSocialProps {
borderRadius?: string | number | undefined;
children: NonNullable<React.ReactNode>;
fontFamily?: string | undefined;
fontSize?: string | number | undefined;
iconSize?: string | undefined;
Expand All @@ -340,6 +351,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 +383,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 +403,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 +422,7 @@ export class MjmlText extends React.Component<MjmlTextProps & PaddingProps & Cla

// mj-wrapper
export interface MjmlWrapperProps {
children: NonNullable<React.ReactNode>;
fullWidth?: boolean | undefined;
backgroundColor?: React.CSSProperties['backgroundColor'] | undefined;
backgroundUrl?: string | undefined;
Expand Down
38 changes: 17 additions & 21 deletions types/mjml-react/mjml-react-tests.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ function renderOutTestEmail() {

// TestMjmlTag
{
const minProps: React.ReactNode = <Mjml />;
const minProps: React.ReactNode = <Mjml />; // $ExpectError
const maxProps: React.ReactNode = (
<Mjml lang="" owa="">
child
Expand Down Expand Up @@ -115,11 +115,11 @@ function renderOutTestEmail() {
// TestMjmlBreakpointTag
{
const minProps: React.ReactNode = <MjmlBreakpoint />;
const maxProps: React.ReactNode = <MjmlBreakpoint width="">child</MjmlBreakpoint>;
const maxProps: React.ReactNode = <MjmlBreakpoint width="" />;
}
// TestMjmlBodyTag
{
const minProps: React.ReactNode = <MjmlBody />;
const minProps: React.ReactNode = <MjmlBody />; // $ExpectError
const maxProps: React.ReactNode = (
<MjmlBody cssClass="" mjClass="" width={1} backgroundColor="">
child
Expand All @@ -129,11 +129,7 @@ function renderOutTestEmail() {
// TestMjmlFontTag
{
const minProps: React.ReactNode = <MjmlFont />;
const maxProps: React.ReactNode = (
<MjmlFont href="" name="">
child
</MjmlFont>
);
const maxProps: React.ReactNode = <MjmlFont href="" name="" />;
}
// TestMjmlPreviewTag
{
Expand Down Expand Up @@ -162,44 +158,44 @@ function renderOutTestEmail() {
}
// TestMjmlButtonTag
{
const minProps: React.ReactNode = <MjmlButton />;
const minProps: React.ReactNode = <MjmlButton />; // $ExpectError
const maxProps: React.ReactNode = <MjmlButton>child</MjmlButton>;
}
// TestMjmlColumnTag
{
const minProps: React.ReactNode = <MjmlColumn />;
const minProps: React.ReactNode = <MjmlColumn />; // $ExpectError
const maxProps: React.ReactNode = <MjmlColumn>child</MjmlColumn>;
const innerBackgroundColor: React.ReactNode = <MjmlColumn innerBackgroundColor="#BADA55">child</MjmlColumn>;
const innerBackgroundColorError: React.ReactNode = <MjmlColumn innerBackgroundColor={1}>child</MjmlColumn>; // $ExpectError
}
// TestMjmlDividerTag
{
const minProps: React.ReactNode = <MjmlDivider />;
const maxProps: React.ReactNode = <MjmlDivider>child</MjmlDivider>;
const maxProps: React.ReactNode = <MjmlDivider>child</MjmlDivider>; // $ExpectError
}
// TestMjmlGroupTag
{
const minProps: React.ReactNode = <MjmlGroup />;
const minProps: React.ReactNode = <MjmlGroup />; // $ExpectError
const maxProps: React.ReactNode = <MjmlGroup>child</MjmlGroup>;
}
// TestMjmlHeroTag
{
const minProps: React.ReactNode = <MjmlHero />;
const minProps: React.ReactNode = <MjmlHero />; // $ExpectError
const maxProps: React.ReactNode = <MjmlHero>child</MjmlHero>;
}
// TestMjmlImageTag
{
const minProps: React.ReactNode = <MjmlImage />;
const maxProps: React.ReactNode = <MjmlImage>child</MjmlImage>;
const maxProps: React.ReactNode = <MjmlImage>child</MjmlImage>; // $ExpectError
}
// TestMjmlNavbarTag
{
const minProps: React.ReactNode = <MjmlNavbar />;
const minProps: React.ReactNode = <MjmlNavbar />; // $ExpectError
const maxProps: React.ReactNode = <MjmlNavbar>child</MjmlNavbar>;
}
// TestMjmlNavbarLinkTag
{
const minProps: React.ReactNode = <MjmlNavbarLink />;
const minProps: React.ReactNode = <MjmlNavbarLink />; // $ExpectError
const maxProps: React.ReactNode = <MjmlNavbarLink>child</MjmlNavbarLink>;
}
// TestMjmlRawTag
Expand All @@ -215,7 +211,7 @@ function renderOutTestEmail() {
// TestMjmlSpacerTag
{
const minProps: React.ReactNode = <MjmlSpacer />;
const maxProps: React.ReactNode = <MjmlSpacer>child</MjmlSpacer>;
const maxProps: React.ReactNode = <MjmlSpacer>child</MjmlSpacer>; // $ExpectError
}
// TestMjmlTableTag
{
Expand All @@ -230,7 +226,7 @@ function renderOutTestEmail() {
}
// TestMjmlWrapperTag
{
const minProps: React.ReactNode = <MjmlWrapper />;
const minProps: React.ReactNode = <MjmlWrapper />; // $ExpectError
const maxProps: React.ReactNode = <MjmlWrapper>child</MjmlWrapper>;
}

Expand All @@ -256,13 +252,13 @@ function renderOutTestEmail() {
{
// MjmlCarousel
{
const minProps: React.ReactNode = <MjmlCarousel />;
const minProps: React.ReactNode = <MjmlCarousel />; // $ExpectError
const maxProps: React.ReactNode = <MjmlCarousel>child</MjmlCarousel>;
}
// MjmlCarouselImage
{
const minProps: React.ReactNode = <MjmlCarouselImage />;
const maxProps: React.ReactNode = <MjmlCarouselImage>child</MjmlCarouselImage>;
const maxProps: React.ReactNode = <MjmlCarouselImage>child</MjmlCarouselImage>; // $ExpectError
}
}
// TestMjmlSocialElementTag
Expand All @@ -274,7 +270,7 @@ function renderOutTestEmail() {
}
// MjmlSocial
{
const minProps: React.ReactNode = <MjmlSocial />;
const minProps: React.ReactNode = <MjmlSocial />; // $ExpectError
const maxProps: React.ReactNode = <MjmlSocial cssClass="">child</MjmlSocial>;
}
}

0 comments on commit 26b264f

Please sign in to comment.