From 8c6bef980d8afe2cac4931eadd39e8c105f08aaa Mon Sep 17 00:00:00 2001 From: Evan McLaughlin Date: Wed, 26 Oct 2022 14:55:08 -0400 Subject: [PATCH] Add default value documentation --- scripts/generate-mjml-react.ts | 12 +++++++++++- src/mjml/MjmlAccordion.tsx | 2 ++ src/mjml/MjmlAccordionText.tsx | 1 + src/mjml/MjmlAccordionTitle.tsx | 1 + src/mjml/MjmlBody.tsx | 1 + src/mjml/MjmlButton.tsx | 5 +++++ src/mjml/MjmlCarousel.tsx | 2 ++ src/mjml/MjmlCarouselImage.tsx | 1 + src/mjml/MjmlColumn.tsx | 1 + src/mjml/MjmlDivider.tsx | 3 +++ src/mjml/MjmlGroup.tsx | 1 + src/mjml/MjmlHero.tsx | 3 +++ src/mjml/MjmlImage.tsx | 5 +++++ src/mjml/MjmlNavbar.tsx | 1 + src/mjml/MjmlNavbarLink.tsx | 3 +++ src/mjml/MjmlSection.tsx | 2 ++ src/mjml/MjmlSocial.tsx | 4 ++++ src/mjml/MjmlSocialElement.tsx | 4 ++++ src/mjml/MjmlSpacer.tsx | 1 + src/mjml/MjmlTable.tsx | 7 +++++++ src/mjml/MjmlText.tsx | 3 +++ src/mjml/MjmlWrapper.tsx | 2 ++ 22 files changed, 64 insertions(+), 1 deletion(-) diff --git a/scripts/generate-mjml-react.ts b/scripts/generate-mjml-react.ts index b6c1ad7..42eff14 100755 --- a/scripts/generate-mjml-react.ts +++ b/scripts/generate-mjml-react.ts @@ -135,6 +135,7 @@ function buildTypesForComponent(mjmlComponent: IMjmlComponent): string { const { componentName, allowedAttributes, + defaultAttributes, endingTag: isEndingTag, } = mjmlComponent; const typesFromMjmlAttributes: Record = {}; @@ -179,7 +180,16 @@ function buildTypesForComponent(mjmlComponent: IMjmlComponent): string { } const typeStrings = Object.entries(typesFromMjmlAttributes).map( - ([attributes, type]) => `${attributes}?: ${type}` + ([attributes, type]) => { + const definition = `${attributes}?: ${type}`; + const defaultValue = + defaultAttributes && attributes in defaultAttributes + ? defaultAttributes[attributes] + : undefined; + return defaultValue + ? `/** MJML default value: ${defaultValue} */\n${definition}` + : definition; + } ); // allow any property diff --git a/src/mjml/MjmlAccordion.tsx b/src/mjml/MjmlAccordion.tsx index e907706..9f27244 100644 --- a/src/mjml/MjmlAccordion.tsx +++ b/src/mjml/MjmlAccordion.tsx @@ -13,6 +13,7 @@ import { export interface IMjmlAccordionProps { containerBackgroundColor?: string; + /** MJML default value: 2px solid black */ border?: React.CSSProperties["border"]; fontFamily?: string; iconAlign?: "top" | "middle" | "bottom"; @@ -27,6 +28,7 @@ export interface IMjmlAccordionProps { paddingLeft?: Pixel | Percentage; paddingRight?: Pixel | Percentage; paddingTop?: Pixel | Percentage; + /** MJML default value: 10px 25px */ padding?: Matrix; className?: string; cssClass?: string; diff --git a/src/mjml/MjmlAccordionText.tsx b/src/mjml/MjmlAccordionText.tsx index 43a1292..5c6cf82 100644 --- a/src/mjml/MjmlAccordionText.tsx +++ b/src/mjml/MjmlAccordionText.tsx @@ -24,6 +24,7 @@ export interface IMjmlAccordionTextProps { paddingLeft?: Pixel | Percentage; paddingRight?: Pixel | Percentage; paddingTop?: Pixel | Percentage; + /** MJML default value: 16px */ padding?: Matrix; className?: string; cssClass?: string; diff --git a/src/mjml/MjmlAccordionTitle.tsx b/src/mjml/MjmlAccordionTitle.tsx index 8df49e7..526b3d0 100644 --- a/src/mjml/MjmlAccordionTitle.tsx +++ b/src/mjml/MjmlAccordionTitle.tsx @@ -20,6 +20,7 @@ export interface IMjmlAccordionTitleProps { paddingLeft?: Pixel | Percentage; paddingRight?: Pixel | Percentage; paddingTop?: Pixel | Percentage; + /** MJML default value: 16px */ padding?: Matrix; className?: string; cssClass?: string; diff --git a/src/mjml/MjmlBody.tsx b/src/mjml/MjmlBody.tsx index b747465..fa44ba5 100644 --- a/src/mjml/MjmlBody.tsx +++ b/src/mjml/MjmlBody.tsx @@ -7,6 +7,7 @@ import React from "react"; import { convertPropsToMjmlAttributes, Pixel } from "../utils"; export interface IMjmlBodyProps { + /** MJML default value: 600px */ width?: Pixel; backgroundColor?: React.CSSProperties["backgroundColor"]; className?: string; diff --git a/src/mjml/MjmlButton.tsx b/src/mjml/MjmlButton.tsx index 928657b..a6ff7c5 100644 --- a/src/mjml/MjmlButton.tsx +++ b/src/mjml/MjmlButton.tsx @@ -13,6 +13,7 @@ import { } from "../utils"; export interface IMjmlButtonProps { + /** MJML default value: center */ align?: "left" | "center" | "right"; backgroundColor?: React.CSSProperties["backgroundColor"]; borderBottom?: string; @@ -20,7 +21,9 @@ export interface IMjmlButtonProps { borderRadius?: React.CSSProperties["borderRadius"]; borderRight?: string; borderTop?: string; + /** MJML default value: none */ border?: React.CSSProperties["border"]; + /** MJML default value: #ffffff */ color?: React.CSSProperties["color"]; containerBackgroundColor?: string; fontFamily?: string; @@ -38,8 +41,10 @@ export interface IMjmlButtonProps { paddingLeft?: Pixel | Percentage; paddingRight?: Pixel | Percentage; paddingTop?: Pixel | Percentage; + /** MJML default value: 10px 25px */ padding?: Matrix; rel?: string; + /** MJML default value: _blank */ target?: string; textDecoration?: React.CSSProperties["textDecoration"]; textTransform?: React.CSSProperties["textTransform"]; diff --git a/src/mjml/MjmlCarousel.tsx b/src/mjml/MjmlCarousel.tsx index 91fcf31..d7ddff9 100644 --- a/src/mjml/MjmlCarousel.tsx +++ b/src/mjml/MjmlCarousel.tsx @@ -12,6 +12,7 @@ import { } from "../utils"; export interface IMjmlCarouselProps { + /** MJML default value: center */ align?: "left" | "center" | "right"; borderRadius?: React.CSSProperties["borderRadius"]; containerBackgroundColor?: string; @@ -23,6 +24,7 @@ export interface IMjmlCarouselProps { paddingLeft?: Pixel | Percentage; paddingRight?: Pixel | Percentage; rightIcon?: string; + /** MJML default value: visible */ thumbnails?: "visible" | "hidden"; tbBorder?: string; tbBorderRadius?: Pixel | Percentage; diff --git a/src/mjml/MjmlCarouselImage.tsx b/src/mjml/MjmlCarouselImage.tsx index 6bdea90..0d53d10 100644 --- a/src/mjml/MjmlCarouselImage.tsx +++ b/src/mjml/MjmlCarouselImage.tsx @@ -15,6 +15,7 @@ export interface IMjmlCarouselImageProps { alt?: string; href?: string; rel?: string; + /** MJML default value: _blank */ target?: string; title?: string; src?: string; diff --git a/src/mjml/MjmlColumn.tsx b/src/mjml/MjmlColumn.tsx index ac8b48f..acafe2c 100644 --- a/src/mjml/MjmlColumn.tsx +++ b/src/mjml/MjmlColumn.tsx @@ -19,6 +19,7 @@ export interface IMjmlColumnProps { borderRadius?: React.CSSProperties["borderRadius"]; borderRight?: string; borderTop?: string; + /** MJML default value: ltr */ direction?: "ltr" | "rtl"; innerBackgroundColor?: string; paddingBottom?: Pixel | Percentage; diff --git a/src/mjml/MjmlDivider.tsx b/src/mjml/MjmlDivider.tsx index 4524662..4a2c7a8 100644 --- a/src/mjml/MjmlDivider.tsx +++ b/src/mjml/MjmlDivider.tsx @@ -16,12 +16,15 @@ export interface IMjmlDividerProps { borderStyle?: React.CSSProperties["borderStyle"]; borderWidth?: Pixel; containerBackgroundColor?: string; + /** MJML default value: 10px 25px */ padding?: Matrix; paddingBottom?: Pixel | Percentage; paddingLeft?: Pixel | Percentage; paddingRight?: Pixel | Percentage; paddingTop?: Pixel | Percentage; + /** MJML default value: 100% */ width?: Pixel | Percentage; + /** MJML default value: center */ align?: "left" | "center" | "right"; className?: string; cssClass?: string; diff --git a/src/mjml/MjmlGroup.tsx b/src/mjml/MjmlGroup.tsx index 789e7b7..aaa6afc 100644 --- a/src/mjml/MjmlGroup.tsx +++ b/src/mjml/MjmlGroup.tsx @@ -8,6 +8,7 @@ import { convertPropsToMjmlAttributes, Pixel, Percentage } from "../utils"; export interface IMjmlGroupProps { backgroundColor?: React.CSSProperties["backgroundColor"]; + /** MJML default value: ltr */ direction?: "ltr" | "rtl"; verticalAlign?: React.CSSProperties["verticalAlign"]; width?: Pixel | Percentage; diff --git a/src/mjml/MjmlHero.tsx b/src/mjml/MjmlHero.tsx index bbf845e..0646328 100644 --- a/src/mjml/MjmlHero.tsx +++ b/src/mjml/MjmlHero.tsx @@ -12,7 +12,9 @@ import { } from "../utils"; export interface IMjmlHeroProps { + /** MJML default value: fixed-height */ mode?: string; + /** MJML default value: 0px */ height?: Pixel | Percentage; backgroundUrl?: string; backgroundWidth?: Pixel | Percentage; @@ -26,6 +28,7 @@ export interface IMjmlHeroProps { innerPaddingLeft?: Pixel | Percentage; innerPaddingRight?: Pixel | Percentage; innerPaddingBottom?: Pixel | Percentage; + /** MJML default value: 0px */ padding?: Matrix; paddingBottom?: Pixel | Percentage; paddingLeft?: Pixel | Percentage; diff --git a/src/mjml/MjmlImage.tsx b/src/mjml/MjmlImage.tsx index 86dad07..f34950b 100644 --- a/src/mjml/MjmlImage.tsx +++ b/src/mjml/MjmlImage.tsx @@ -20,7 +20,9 @@ export interface IMjmlImageProps { sizes?: string; title?: string; rel?: string; + /** MJML default value: center */ align?: "left" | "center" | "right"; + /** MJML default value: 0 */ border?: React.CSSProperties["border"]; borderBottom?: string; borderLeft?: string; @@ -29,13 +31,16 @@ export interface IMjmlImageProps { borderRadius?: React.CSSProperties["borderRadius"]; containerBackgroundColor?: string; fluidOnMobile?: boolean; + /** MJML default value: 10px 25px */ padding?: Matrix; paddingBottom?: Pixel | Percentage; paddingLeft?: Pixel | Percentage; paddingRight?: Pixel | Percentage; paddingTop?: Pixel | Percentage; + /** MJML default value: _blank */ target?: string; width?: Pixel; + /** MJML default value: auto */ height?: Pixel; maxHeight?: Pixel | Percentage; fontSize?: Pixel; diff --git a/src/mjml/MjmlNavbar.tsx b/src/mjml/MjmlNavbar.tsx index 5920d2a..4541537 100644 --- a/src/mjml/MjmlNavbar.tsx +++ b/src/mjml/MjmlNavbar.tsx @@ -12,6 +12,7 @@ import { } from "../utils"; export interface IMjmlNavbarProps { + /** MJML default value: center */ align?: "left" | "center" | "right"; baseUrl?: string; hamburger?: string; diff --git a/src/mjml/MjmlNavbarLink.tsx b/src/mjml/MjmlNavbarLink.tsx index 884d3c8..75709e0 100644 --- a/src/mjml/MjmlNavbarLink.tsx +++ b/src/mjml/MjmlNavbarLink.tsx @@ -13,6 +13,7 @@ import { } from "../utils"; export interface IMjmlNavbarLinkProps { + /** MJML default value: #000000 */ color?: React.CSSProperties["color"]; fontFamily?: string; fontSize?: Pixel; @@ -20,6 +21,7 @@ export interface IMjmlNavbarLinkProps { fontWeight?: string; href?: string; name?: string; + /** MJML default value: _blank */ target?: string; rel?: string; letterSpacing?: Pixel | Ephemeral; @@ -28,6 +30,7 @@ export interface IMjmlNavbarLinkProps { paddingLeft?: Pixel | Percentage; paddingRight?: Pixel | Percentage; paddingTop?: Pixel | Percentage; + /** MJML default value: 15px 10px */ padding?: Matrix; textDecoration?: React.CSSProperties["textDecoration"]; textTransform?: React.CSSProperties["textTransform"]; diff --git a/src/mjml/MjmlSection.tsx b/src/mjml/MjmlSection.tsx index 1a4c692..2dac68a 100644 --- a/src/mjml/MjmlSection.tsx +++ b/src/mjml/MjmlSection.tsx @@ -25,8 +25,10 @@ export interface IMjmlSectionProps { borderRadius?: React.CSSProperties["borderRadius"]; borderRight?: string; borderTop?: string; + /** MJML default value: ltr */ direction?: "ltr" | "rtl"; fullWidth?: boolean; + /** MJML default value: 20px 0 */ padding?: Matrix; paddingTop?: Pixel | Percentage; paddingBottom?: Pixel | Percentage; diff --git a/src/mjml/MjmlSocial.tsx b/src/mjml/MjmlSocial.tsx index a337505..e4027f5 100644 --- a/src/mjml/MjmlSocial.tsx +++ b/src/mjml/MjmlSocial.tsx @@ -12,9 +12,11 @@ import { } from "../utils"; export interface IMjmlSocialProps { + /** MJML default value: center */ align?: "left" | "right" | "center"; borderRadius?: React.CSSProperties["borderRadius"]; containerBackgroundColor?: string; + /** MJML default value: #333333 */ color?: React.CSSProperties["color"]; fontFamily?: string; fontSize?: Pixel; @@ -25,11 +27,13 @@ export interface IMjmlSocialProps { iconPadding?: Matrix; innerPadding?: Matrix; lineHeight?: Pixel | Percentage; + /** MJML default value: horizontal */ mode?: "horizontal" | "vertical"; paddingBottom?: Pixel | Percentage; paddingLeft?: Pixel | Percentage; paddingRight?: Pixel | Percentage; paddingTop?: Pixel | Percentage; + /** MJML default value: 10px 25px */ padding?: Matrix; tableLayout?: "auto" | "fixed"; textPadding?: Matrix; diff --git a/src/mjml/MjmlSocialElement.tsx b/src/mjml/MjmlSocialElement.tsx index 93a42ae..4e19ef1 100644 --- a/src/mjml/MjmlSocialElement.tsx +++ b/src/mjml/MjmlSocialElement.tsx @@ -12,8 +12,10 @@ import { } from "../utils"; export interface IMjmlSocialElementProps { + /** MJML default value: left */ align?: "left" | "center" | "right"; backgroundColor?: React.CSSProperties["backgroundColor"]; + /** MJML default value: #000 */ color?: React.CSSProperties["color"]; borderRadius?: React.CSSProperties["borderRadius"]; fontFamily?: string; @@ -30,6 +32,7 @@ export interface IMjmlSocialElementProps { paddingLeft?: Pixel | Percentage; paddingRight?: Pixel | Percentage; paddingTop?: Pixel | Percentage; + /** MJML default value: 4px */ padding?: Matrix; textPadding?: Matrix; rel?: string; @@ -38,6 +41,7 @@ export interface IMjmlSocialElementProps { sizes?: string; alt?: string; title?: string; + /** MJML default value: _blank */ target?: string; textDecoration?: React.CSSProperties["textDecoration"]; verticalAlign?: React.CSSProperties["verticalAlign"]; diff --git a/src/mjml/MjmlSpacer.tsx b/src/mjml/MjmlSpacer.tsx index 9502b11..2e8d02a 100644 --- a/src/mjml/MjmlSpacer.tsx +++ b/src/mjml/MjmlSpacer.tsx @@ -23,6 +23,7 @@ export interface IMjmlSpacerProps { paddingRight?: Pixel | Percentage; paddingTop?: Pixel | Percentage; padding?: Matrix; + /** MJML default value: 20px */ height?: Pixel | Percentage; className?: string; cssClass?: string; diff --git a/src/mjml/MjmlTable.tsx b/src/mjml/MjmlTable.tsx index de90561..875dfbc 100644 --- a/src/mjml/MjmlTable.tsx +++ b/src/mjml/MjmlTable.tsx @@ -12,11 +12,16 @@ import { } from "../utils"; export interface IMjmlTableProps { + /** MJML default value: left */ align?: "left" | "right" | "center"; + /** MJML default value: none */ border?: React.CSSProperties["border"]; + /** MJML default value: 0 */ cellpadding?: string; + /** MJML default value: 0 */ cellspacing?: string; containerBackgroundColor?: string; + /** MJML default value: #000000 */ color?: React.CSSProperties["color"]; fontFamily?: string; fontSize?: Pixel; @@ -26,10 +31,12 @@ export interface IMjmlTableProps { paddingLeft?: Pixel | Percentage; paddingRight?: Pixel | Percentage; paddingTop?: Pixel | Percentage; + /** MJML default value: 10px 25px */ padding?: Matrix; role?: "none" | "presentation"; tableLayout?: "auto" | "fixed" | "initial" | "inherit"; verticalAlign?: React.CSSProperties["verticalAlign"]; + /** MJML default value: 100% */ width?: Pixel | Percentage; className?: string; cssClass?: string; diff --git a/src/mjml/MjmlText.tsx b/src/mjml/MjmlText.tsx index ac886dd..0f11178 100644 --- a/src/mjml/MjmlText.tsx +++ b/src/mjml/MjmlText.tsx @@ -13,8 +13,10 @@ import { } from "../utils"; export interface IMjmlTextProps { + /** MJML default value: left */ align?: "left" | "right" | "center" | "justify"; backgroundColor?: React.CSSProperties["backgroundColor"]; + /** MJML default value: #000000 */ color?: React.CSSProperties["color"]; containerBackgroundColor?: string; fontFamily?: string; @@ -28,6 +30,7 @@ export interface IMjmlTextProps { paddingLeft?: Pixel | Percentage; paddingRight?: Pixel | Percentage; paddingTop?: Pixel | Percentage; + /** MJML default value: 10px 25px */ padding?: Matrix; textDecoration?: React.CSSProperties["textDecoration"]; textTransform?: React.CSSProperties["textTransform"]; diff --git a/src/mjml/MjmlWrapper.tsx b/src/mjml/MjmlWrapper.tsx index f499715..e61431d 100644 --- a/src/mjml/MjmlWrapper.tsx +++ b/src/mjml/MjmlWrapper.tsx @@ -25,8 +25,10 @@ export interface IMjmlWrapperProps { borderRadius?: React.CSSProperties["borderRadius"]; borderRight?: string; borderTop?: string; + /** MJML default value: ltr */ direction?: "ltr" | "rtl"; fullWidth?: boolean; + /** MJML default value: 20px 0 */ padding?: Matrix; paddingTop?: Pixel | Percentage; paddingBottom?: Pixel | Percentage;