mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-06-28 22:30:01 +00:00
Add types for mjml-react
This commit is contained in:
Henri Normak
413
types/mjml-react/index.d.ts
vendored
Normal file
413
types/mjml-react/index.d.ts
vendored
Normal file
@@ -0,0 +1,413 @@
|
||||
// Type definitions for mjml-react 1.0
|
||||
// Project: https://github.com/wix-incubator/mjml-react
|
||||
// Definitions by: Henri Normak <https://github.com/henrinormak>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.3
|
||||
|
||||
import * as React from 'react';
|
||||
|
||||
export namespace extensions {
|
||||
class MjmlComment extends React.Component<{ children: string }> { }
|
||||
class MjmlConditionalComment extends React.Component<{ children: string; condition: string }> { }
|
||||
class MjmlTrackingPixel extends React.Component<{ src: string }> { }
|
||||
class MjmlYahooStyle extends React.Component<{ children: string }> { }
|
||||
}
|
||||
|
||||
export namespace utils {
|
||||
function namedEntityToHexCode(html: string): string;
|
||||
function fixConditionalComment(html: string, havingContent: string, newCondition: string): string;
|
||||
function useHttps(url?: string): string | undefined;
|
||||
function toMobileFontSize(sizeWithUnit: string): number;
|
||||
function addQueryParams(url: string, params: { [key: string]: any }): string;
|
||||
|
||||
type TextAlignment = 'left' | 'right' | 'center' | 'justify' | 'inherit';
|
||||
function getTextAlign(value: string, fallback?: TextAlignment): TextAlignment;
|
||||
}
|
||||
|
||||
export function renderToMjml(email: React.ReactElement<any>): string;
|
||||
|
||||
export interface Mjml2HtmlOptions {
|
||||
fonts?: { [key: string]: string };
|
||||
keepComments?: boolean;
|
||||
beautify?: boolean;
|
||||
minify?: boolean;
|
||||
validationLevel?: 'strict' | 'soft' | 'skip';
|
||||
filePath?: string;
|
||||
}
|
||||
|
||||
export function render(email: React.ReactElement<any>, options?: Mjml2HtmlOptions): { html: string; errors: Error[] };
|
||||
|
||||
// Components
|
||||
|
||||
export interface RequiredChildrenProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export interface PaddingProps {
|
||||
padding?: string | number;
|
||||
paddingTop?: string | number;
|
||||
paddingRight?: string | number;
|
||||
paddingBottom?: string | number;
|
||||
paddingLeft?: string | number;
|
||||
}
|
||||
|
||||
export interface BorderProps {
|
||||
border?: string;
|
||||
borderBottom?: string;
|
||||
borderLeft?: string;
|
||||
borderTop?: string;
|
||||
borderRight?: string;
|
||||
borderRadius?: string | number;
|
||||
}
|
||||
|
||||
export interface ClassNameProps {
|
||||
cssClass?: string;
|
||||
}
|
||||
|
||||
export interface HrefProps {
|
||||
href?: string;
|
||||
target?: string;
|
||||
rel?: string;
|
||||
}
|
||||
|
||||
// mjml
|
||||
export interface MjmlProps {
|
||||
lang?: string;
|
||||
owa?: string;
|
||||
}
|
||||
|
||||
export class Mjml extends React.Component<MjmlProps & RequiredChildrenProps> { }
|
||||
|
||||
// mj-head
|
||||
export class MjmlHead extends React.Component<RequiredChildrenProps> { }
|
||||
|
||||
// mj-attributes
|
||||
export class MjmlAttributes extends React.Component<RequiredChildrenProps> { }
|
||||
export class MjmlAll extends React.Component<{ [key: string]: any; children?: React.ReactNode }> { }
|
||||
export class MjmlClass extends React.Component<{ [key: string]: any; children?: React.ReactNode; name: string }> { }
|
||||
|
||||
// mj-breakpoint
|
||||
export interface MjmlBreakpointProps {
|
||||
width?: string | number;
|
||||
}
|
||||
|
||||
export class MjmlBreakpoint extends React.Component<MjmlBreakpointProps> { }
|
||||
|
||||
// mj-body
|
||||
export interface MjmlBodyProps {
|
||||
width ?: number;
|
||||
backgroundColor?: React.CSSProperties['backgroundColor'];
|
||||
}
|
||||
|
||||
export class MjmlBody extends React.Component<RequiredChildrenProps & MjmlBodyProps & ClassNameProps> { }
|
||||
|
||||
// mj-font
|
||||
export interface MjmlFontProps {
|
||||
href?: string;
|
||||
name?: string;
|
||||
}
|
||||
|
||||
export class MjmlFont extends React.Component<MjmlFontProps> { }
|
||||
|
||||
// mj-preview
|
||||
export class MjmlPreview extends React.Component<{ children: string }> { }
|
||||
|
||||
// mj-style
|
||||
export class MjmlStyle extends React.Component<{ children: string, inline?: boolean }> { }
|
||||
|
||||
// mj-title
|
||||
export class MjmlTitle extends React.Component<{ children: string }> { }
|
||||
|
||||
// mj-accordion
|
||||
export class MjmlAccordion extends React.Component<RequiredChildrenProps & MjmlAccordionElementProps> { }
|
||||
|
||||
export interface MjmlAccordionElementProps {
|
||||
fontFamily?: string;
|
||||
iconAlign?: string;
|
||||
iconWrappedUrl?: string;
|
||||
iconWrappedAlt?: string;
|
||||
iconUnwrappedAlt?: string;
|
||||
iconUnwrappedUrl?: string;
|
||||
iconPosition?: 'left' | 'right';
|
||||
iconHeight?: string;
|
||||
iconWidth?: string;
|
||||
backgroundColor?: React.CSSProperties['backgroundColor'];
|
||||
}
|
||||
|
||||
export class MjmlAccordionElement extends React.Component<RequiredChildrenProps & MjmlAccordionElementProps & ClassNameProps> { }
|
||||
|
||||
export interface MjmlAccordionTextProps {
|
||||
color?: React.CSSProperties['color'];
|
||||
fontFamily?: string;
|
||||
fontSize?: string | number;
|
||||
backgroundColor?: React.CSSProperties['backgroundColor'];
|
||||
}
|
||||
|
||||
export class MjmlAccordionText extends React.Component<RequiredChildrenProps & MjmlAccordionTextProps & PaddingProps & ClassNameProps> { }
|
||||
|
||||
export interface MjmlAccordionTitleProps {
|
||||
color?: React.CSSProperties['color'];
|
||||
backgroundColor?: React.CSSProperties['backgroundColor'];
|
||||
fontFamily?: string;
|
||||
fontSize?: string | number;
|
||||
}
|
||||
|
||||
export class MjmlAccordionTitle extends React.Component<RequiredChildrenProps & MjmlAccordionTitleProps & PaddingProps & ClassNameProps> { }
|
||||
|
||||
// mj-button
|
||||
export interface MjmlButtonProps {
|
||||
backgroundColor?: React.CSSProperties['backgroundColor'];
|
||||
containerBackgroundColor?: React.CSSProperties['backgroundColor'];
|
||||
fontStyle?: string;
|
||||
fontSize?: string | number;
|
||||
fontWeight?: number;
|
||||
fontFamily?: string;
|
||||
color?: React.CSSProperties['color'];
|
||||
textAlign?: React.CSSProperties['textAlign'];
|
||||
textDecoration?: string;
|
||||
textTransform?: string;
|
||||
align?: string;
|
||||
verticalAlign?: React.CSSProperties['verticalAlign'];
|
||||
lineHeight?: string | number;
|
||||
innerPadding?: string;
|
||||
width?: string | number;
|
||||
height?: string | number;
|
||||
}
|
||||
|
||||
export class MjmlButton extends React.Component<RequiredChildrenProps & MjmlButtonProps & PaddingProps & ClassNameProps & HrefProps & BorderProps> { }
|
||||
|
||||
// mj-carousel
|
||||
export interface MjmlCarouselProps {
|
||||
backgroundColor?: React.CSSProperties['backgroundColor'];
|
||||
align?: string;
|
||||
borderRadius?: string | number;
|
||||
thumbnails?: 'hidden' | 'visible';
|
||||
tbBorder?: React.CSSProperties['border'];
|
||||
tbBorderRadius?: React.CSSProperties['borderRadius'];
|
||||
tbHoverBorderColor?: string;
|
||||
tbSelectedBorderColor?: string;
|
||||
tbWidth?: string;
|
||||
leftIcon?: string;
|
||||
rightIcon?: string;
|
||||
iconWidth?: string;
|
||||
}
|
||||
|
||||
export class MjmlCarousel extends React.Component<RequiredChildrenProps & MjmlCarouselProps & ClassNameProps> {}
|
||||
|
||||
export interface MjmlCarouselImageProps {
|
||||
src?: string;
|
||||
thumbnailsSrc?: string;
|
||||
alt?: string;
|
||||
title?: string;
|
||||
}
|
||||
|
||||
export class MjmlCarouselImage extends React.Component<MjmlCarouselImageProps & ClassNameProps & HrefProps> { }
|
||||
|
||||
// mj-carousel
|
||||
export interface MjmlColumnProps {
|
||||
width?: string | number;
|
||||
verticalAlign?: React.CSSProperties['verticalAlign'];
|
||||
backgroundColor?: React.CSSProperties['backgroundColor'];
|
||||
}
|
||||
|
||||
export class MjmlColumn extends React.Component<RequiredChildrenProps & MjmlColumnProps & PaddingProps & ClassNameProps & BorderProps> { }
|
||||
|
||||
// mj-divider
|
||||
export interface MjmlDividerProps {
|
||||
borderColor?: React.CSSProperties['borderColor'];
|
||||
borderStyle?: React.CSSProperties['borderStyle'];
|
||||
borderWidth?: string | number;
|
||||
width?: string | number;
|
||||
containerBackgroundColor?: React.CSSProperties['backgroundColor'];
|
||||
}
|
||||
|
||||
export class MjmlDivider extends React.Component<MjmlDividerProps & ClassNameProps & PaddingProps> { }
|
||||
|
||||
// mj-group
|
||||
export interface MjmlGroupProps {
|
||||
width?: string | number;
|
||||
verticalAlign?: React.CSSProperties['verticalAlign'];
|
||||
backgroundColor?: React.CSSProperties['backgroundColor'];
|
||||
}
|
||||
|
||||
export class MjmlGroup extends React.Component<MjmlGroupProps & RequiredChildrenProps & ClassNameProps> { }
|
||||
|
||||
// mj-hero
|
||||
export interface MjmlHeroProps {
|
||||
width?: string | number;
|
||||
height?: string | number;
|
||||
mode?: 'fluid-height' | 'fixed-height';
|
||||
backgroundWidth?: string;
|
||||
backgroundHeight?: string;
|
||||
backgroundUrl?: string;
|
||||
backgroundPosition?: React.CSSProperties['backgroundPosition'];
|
||||
verticalAlign?: React.CSSProperties['verticalAlign'];
|
||||
backgroundColor?: React.CSSProperties['backgroundColor'];
|
||||
}
|
||||
|
||||
export class MjmlHero extends React.Component<MjmlHeroProps & ClassNameProps & PaddingProps> { }
|
||||
|
||||
// mj-image
|
||||
export interface MjmlImageProps {
|
||||
containerBackgroundColor?: React.CSSProperties['backgroundColor'];
|
||||
border?: React.CSSProperties['border'];
|
||||
borderRadius?: string | number;
|
||||
width?: string | number;
|
||||
height?: string | number;
|
||||
src?: string;
|
||||
srcset?: string;
|
||||
alt?: string;
|
||||
align?: string;
|
||||
title?: string;
|
||||
fluidOnMobile?: string;
|
||||
}
|
||||
|
||||
export class MjmlImage extends React.Component<MjmlImageProps & PaddingProps & ClassNameProps & HrefProps> { }
|
||||
|
||||
// mj-navbar
|
||||
export interface MjmlNavbarProps {
|
||||
baseUrl?: string;
|
||||
hamburger?: 'hamburger';
|
||||
align?: string;
|
||||
icoOpen?: string;
|
||||
icoClose?: string;
|
||||
icoPadding?: string;
|
||||
icoPaddingTop?: string;
|
||||
icoPaddingRight?: string;
|
||||
icoPaddingBottom?: string;
|
||||
icoPaddingLeft?: string;
|
||||
icoAlign?: string;
|
||||
icoColor?: React.CSSProperties['color'];
|
||||
icoFontSize?: string;
|
||||
icoTextTransform?: string;
|
||||
icoTextDecoration?: string;
|
||||
icoLineHeight?: string;
|
||||
}
|
||||
|
||||
export class MjmlNavbar extends React.Component<MjmlNavbarProps & RequiredChildrenProps> { }
|
||||
|
||||
export interface MjmlNavbarLinkProps {
|
||||
color?: React.CSSProperties['color'];
|
||||
fontFamily?: string;
|
||||
fontSize?: string | number;
|
||||
fontStyle?: string;
|
||||
fontWeight?: number;
|
||||
lineHeight?: string | number;
|
||||
textDecoration?: string;
|
||||
textTransform?: string;
|
||||
}
|
||||
|
||||
export class MjmlNavbarLink extends React.Component<MjmlNavbarLinkProps & HrefProps & PaddingProps> { }
|
||||
|
||||
// mj-raw
|
||||
export class MjmlRaw extends React.Component<RequiredChildrenProps> { }
|
||||
|
||||
// mj-section
|
||||
export interface MjmlSectionProps {
|
||||
fullWidth?: boolean;
|
||||
backgroundColor?: React.CSSProperties['backgroundColor'];
|
||||
backgroundUrl?: string;
|
||||
backgroundRepeat?: React.CSSProperties['backgroundRepeat'];
|
||||
backgroundSize?: React.CSSProperties['backgroundSize'];
|
||||
verticalAlign?: React.CSSProperties['verticalAlign'];
|
||||
textAlign?: React.CSSProperties['textAlign'];
|
||||
direction?: 'ltr' | 'rtl';
|
||||
}
|
||||
|
||||
export class MjmlSection extends React.Component<MjmlSectionProps & RequiredChildrenProps & BorderProps & PaddingProps & ClassNameProps> { }
|
||||
|
||||
// mj-social
|
||||
export interface MjmlSocialProps {
|
||||
borderRadius?: string | number;
|
||||
fontFamily?: string;
|
||||
fontSize?: string | number;
|
||||
iconSize?: string;
|
||||
iconHeight?: string;
|
||||
lineHeight?: string | number;
|
||||
mode?: 'vertical' | 'horizontal';
|
||||
textDecoration?: string;
|
||||
align?: string;
|
||||
color?: React.CSSProperties['color'];
|
||||
innerPadding?: string;
|
||||
containerBackgroundColor?: React.CSSProperties['backgroundColor'];
|
||||
}
|
||||
|
||||
export class MjmlSocial extends React.Component<MjmlSocialProps & PaddingProps> { }
|
||||
|
||||
export interface MjmlSocialElementProps {
|
||||
borderRadius?: string | number;
|
||||
backgroundColor?: React.CSSProperties['backgroundColor'];
|
||||
fontFamily?: string;
|
||||
fontSize?: string | number;
|
||||
iconSize?: string;
|
||||
iconHeight?: string;
|
||||
lineHeight?: string | number;
|
||||
mode?: 'vertical' | 'horizontal';
|
||||
textDecoration?: string;
|
||||
align?: string;
|
||||
color?: React.CSSProperties['color'];
|
||||
name?: 'facebook' | 'facebook-noshare' | 'twitter' | 'twitter-noshare' | 'google' | 'google-noshare' | 'pinterest' | 'pinterest-noshare' |
|
||||
'linkedin' | 'linkedin-noshare' | 'tumblr' | 'tumblr-noshare' | 'xing' | 'xing-noshare' |
|
||||
'github' | 'instagram' | 'web' | 'snapchat' | 'youtube' | 'vimeo' | 'medium' | 'soundcloud' | 'dribbble';
|
||||
src?: string;
|
||||
alt?: string;
|
||||
}
|
||||
|
||||
export class MjmlSocialElement extends React.Component<MjmlSocialElementProps & RequiredChildrenProps & HrefProps & PaddingProps> { }
|
||||
|
||||
// mj-spacer
|
||||
export interface MjmlSpacerProps {
|
||||
height?: string | number;
|
||||
width?: string | number;
|
||||
containerBackgroundColor?: React.CSSProperties['backgroundColor'];
|
||||
verticalAlign?: React.CSSProperties['verticalAlign'];
|
||||
}
|
||||
|
||||
export class MjmlSpacer extends React.Component<MjmlSpacerProps & BorderProps & PaddingProps & ClassNameProps> { }
|
||||
|
||||
// mj-table
|
||||
export interface MjmlTableProps {
|
||||
color?: React.CSSProperties['color'];
|
||||
cellpadding?: string;
|
||||
cellspacing?: string;
|
||||
fontFamily?: string;
|
||||
fontSize?: string | number;
|
||||
fontStyle?: string;
|
||||
lineHeight?: string | number;
|
||||
containerBackgroundColor?: React.CSSProperties['backgroundColor'];
|
||||
width?: string | number;
|
||||
tableLayout?: 'auto' | 'fixed' | 'initial' | 'inherit';
|
||||
}
|
||||
|
||||
export class MjmlTable extends React.Component<MjmlTableProps & RequiredChildrenProps & PaddingProps> { }
|
||||
|
||||
// mj-text
|
||||
export interface MjmlTextProps {
|
||||
color?: React.CSSProperties['color'];
|
||||
fontFamily?: string;
|
||||
fontSize?: string | number;
|
||||
fontStyle?: string;
|
||||
fontWeight?: number;
|
||||
lineHeight?: string;
|
||||
letterSpacing?: string;
|
||||
height?: string | number;
|
||||
textDecoration?: string;
|
||||
textTransform?: string;
|
||||
align?: string;
|
||||
containerBackgroundColor?: React.CSSProperties['backgroundColor'];
|
||||
}
|
||||
|
||||
export class MjmlText extends React.Component<MjmlTextProps & RequiredChildrenProps & PaddingProps & ClassNameProps> { }
|
||||
|
||||
// mj-wrapper
|
||||
export interface MjmlWrapperProps {
|
||||
fullWidth?: boolean;
|
||||
backgroundColor?: React.CSSProperties['backgroundColor'];
|
||||
backgroundUrl?: string;
|
||||
backgroundRepeat?: React.CSSProperties['backgroundRepeat'];
|
||||
backgroundSize?: React.CSSProperties['backgroundSize'];
|
||||
verticalAlign?: React.CSSProperties['verticalAlign'];
|
||||
textAlign?: React.CSSProperties['textAlign'];
|
||||
}
|
||||
|
||||
export class MjmlWrapper extends React.Component<MjmlWrapperProps & RequiredChildrenProps & BorderProps & PaddingProps & ClassNameProps> { }
|
||||
40
types/mjml-react/mjml-react-tests.tsx
Normal file
40
types/mjml-react/mjml-react-tests.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
import * as React from 'react';
|
||||
import {
|
||||
render,
|
||||
Mjml,
|
||||
MjmlHead,
|
||||
MjmlTitle,
|
||||
MjmlPreview,
|
||||
MjmlBody,
|
||||
MjmlSection,
|
||||
MjmlColumn,
|
||||
MjmlButton,
|
||||
MjmlImage
|
||||
} from 'mjml-react';
|
||||
|
||||
function renderOutTestEmail() {
|
||||
// $ExpectType { html: string; errors: Error[]; }
|
||||
const result = render((
|
||||
<Mjml>
|
||||
<MjmlHead>
|
||||
<MjmlTitle>Last Minute Offer</MjmlTitle>
|
||||
<MjmlPreview>Last Minute Offer...</MjmlPreview>
|
||||
</MjmlHead>
|
||||
|
||||
<MjmlBody width={500}>
|
||||
<MjmlSection fullWidth backgroundColor="#efefef">
|
||||
<MjmlColumn>
|
||||
<MjmlImage src="https://static.wixstatic.com/media/5cb24728abef45dabebe7edc1d97ddd2.jpg" />
|
||||
</MjmlColumn>
|
||||
</MjmlSection>
|
||||
<MjmlSection>
|
||||
<MjmlColumn>
|
||||
<MjmlButton padding="20px" backgroundColor="#346DB7" href="https://www.wix.com/">
|
||||
I like it!
|
||||
</MjmlButton>
|
||||
</MjmlColumn>
|
||||
</MjmlSection>
|
||||
</MjmlBody>
|
||||
</Mjml>
|
||||
), { validationLevel: 'soft' });
|
||||
}
|
||||
24
types/mjml-react/tsconfig.json
Normal file
24
types/mjml-react/tsconfig.json
Normal file
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"es6"
|
||||
],
|
||||
"jsx": "react",
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": true,
|
||||
"baseUrl": "../",
|
||||
"typeRoots": [
|
||||
"../"
|
||||
],
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"strictFunctionTypes": true
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"mjml-react-tests.tsx"
|
||||
]
|
||||
}
|
||||
1
types/mjml-react/tslint.json
Normal file
1
types/mjml-react/tslint.json
Normal file
@@ -0,0 +1 @@
|
||||
{ "extends": "dtslint/dt.json" }
|
||||
Reference in New Issue
Block a user