{"_id":"@arskang/acornmail","name":"@arskang/acornmail","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@arskang/acornmail","version":"1.0.0","description":"Acorn email template framework","main":"lib/index.js","types":"lib/index.d.js","scripts":{"build":"tsc","build:pro":"npm run lint-staged && npm run build","format":"prettier --write \"src/**/*.{ts,js}\"","eslint":"eslint --ext .js,.ts src","test":"jest --config jestconfig.json","lint-staged":"lint-staged","prepare":"npm run build && husky install","prepublishOnly":"npm test && npm run eslint","preversion":"npm run eslint","version":"npm run format && git add -A src","postversion":"git push && git push --tags"},"husky":{"hooks":{"pre-commit":"npm run lint-staged"}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx}":["git add"],"src/**/*.{js,ts}":["eslint --fix"]},"keywords":["material-design-color-palette","email-template","acorn-email-framework","typescript","acornmail","email template"],"author":{"name":"@arskang"},"repository":{"type":"git","url":"git+https://github.com/arskang/acornmail.js.git"},"homepage":"https://github.com/arskang/acornmail.js","license":"ISC","devDependencies":{"@types/jest":"^27.5.0","@typescript-eslint/eslint-plugin":"^5.22.0","@typescript-eslint/parser":"^5.22.0","eslint":"^8.14.0","eslint-config-airbnb-base":"^15.0.0","eslint-config-airbnb-typescript":"^17.0.0","eslint-plugin-import":"^2.26.0","husky":"^7.0.4","jest":"^28.0.3","lint-staged":"^12.4.1","prettier":"^2.6.2","ts-jest":"^28.0.1","typescript":"^4.6.4"},"dependencies":{"handlebars":"^4.7.8","zod":"^3.23.8"},"_id":"@arskang/acornmail@1.0.0","gitHead":"24dd504fa3be23d9193e3d2dee999cc680a18f89","bugs":{"url":"https://github.com/arskang/acornmail.js/issues"},"_nodeVersion":"21.7.3","_npmVersion":"10.8.3","dist":{"integrity":"sha512-QYiOP5VtLGGyv2Dc7b3QYOsKZTMLMCdvGfacdYfL3r/PKqpFunyJStIeBMSjtjlIS847TZ8ZRTHrAfGLQGqnxQ==","shasum":"e0e2d1979fcbfd45ec656c99ea5d32f0c57f4dee","tarball":"https://registry.npmjs.org/@arskang/acornmail/-/acornmail-1.0.0.tgz","fileCount":71,"unpackedSize":158668,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICuF+pwYKUZpy9wnApW93plqbO/0Tv18pfoLi7XLu39sAiAs64sj7hEZr0dd0c6AtqdRqvpdZRhZH2EpstgJ/1/Jrg=="}]},"_npmUser":{"name":"arskang","email":"arskang@gmail.com"},"directories":{},"maintainers":[{"name":"arskang","email":"arskang@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/acornmail_1.0.0_1725229548114_0.22995736996929317"},"_hasShrinkwrap":false}},"time":{"created":"2024-09-01T22:25:48.044Z","1.0.0":"2024-09-01T22:25:48.338Z","modified":"2024-09-01T22:25:48.580Z"},"maintainers":[{"name":"arskang","email":"arskang@gmail.com"}],"description":"Acorn email template framework","homepage":"https://github.com/arskang/acornmail.js","keywords":["material-design-color-palette","email-template","acorn-email-framework","typescript","acornmail","email template"],"repository":{"type":"git","url":"git+https://github.com/arskang/acornmail.js.git"},"author":{"name":"@arskang"},"bugs":{"url":"https://github.com/arskang/acornmail.js/issues"},"license":"ISC","readme":"# Acorn Email Template\n\n<!-- img src=\"https://d3vv6lp55qjaqc.cloudfront.net/items/1L1w0v431V0d1K410f3Y/keepAChangelog-logo-dark.svg\" height=150 alt=\"Keep a Changelog\" / -->\n\n[![MIT License Badge](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)\n[![Keep a Changelog v1.1.0 badge](https://img.shields.io/badge/changelog-Keep%20a%20Changelog%20v1.1.0-%23E05735)](./CHANGELOG.md)\n\n### Contenido\n\n+ [Librerías](#librerías)\n+ [Instalación](#instalación)\n+ [Importación](#importación)\n+ [Ejemplo](#ejemplo)\n+ [Métodos](#métodos)\n+ [Componentes](#componentes)\n+ [Tipos](#tipos)\n+ [Estilos](#estilos)\n\n#### Librerías\nProyecto original:\n- [Acorn Email Framework](http://docs.thememountain.com/acorn/)\n\nDependencias:\n- [Zod](https://zod.dev/)\n- [Handlebars](https://handlebarsjs.com/)\n\nColores:\n- [Material design](https://material.io/resources/color/#!/?view.left=0&view.right=0)\n\n#### Instalación\n```\nnpm install acormail.js, zod\nyarn add acornmail.js, zod\n```\n\n#### Importación\n```js\nimport * as acornmail from 'acormail.js'\n```\n\n#### Ejemplo\nMás ejemplos [aquí](./_examples/)\n```js\nimport * as acornmail from 'acormail.js'\n\nfunc main() {\n\n    const acorn = acornmail.NewAcornEmailComponents();\n\n    const aligns = acornmail.acornStyles.align;\n    const { colors } = acornmail.acornStyles;\n\n    const variables = {\n      Name: 'Euclides Demóstenes',\n      Token: 'Q2FwZXJ1Y2l0YSByb2ph',\n    };\n\n    const image = acorn.NewImage({\n      Image: 'https://fastly.picsum.photos/id/284/536/354.jpg?hmac=e8lLizGxaVIQy3ILytDAkWUwFvYLGAzDiqQU20owvHY',\n      Alt: 'Logo',\n    });\n\n    const button = acorn.NewButton({\n      Text: 'Activar cuenta',\n      Link: 'https://www.example.com?t={{Token}}',\n      Styles: {\n        Align: aligns.Center,\n        Color: colors.Cyan.M700,\n        TextColor: colors.White,\n      },\n    });\n\n    const grid = acorn.NewGrid([\n      [{ Content: image }],\n      [\n        {\n          Content: '<h1>¡Bienvenido!</h1>',\n          Styles: {\n            Align: aligns.Center,\n          },\n        },\n      ],\n      [\n        {\n          Content: 'Hola <b>{{Name}}</b> gracias por registrarte en nuestro sitio web, para poder activar tu cuenta da click en el siguiente enlace:',\n          Styles: {\n            Align: aligns.Center,\n          },\n        },\n      ],\n      undefined,\n      [\n        {\n          Content: button,\n          Styles: {\n            Align: aligns.Center,\n          },\n        },\n      ],\n    ]);\n\n    const boilerplate = acorn.GetBoilerplate([grid]);\n\n    const html = acornmail.MergeVariables(boilerplate, variables);\n\n    console.log({ html });\n\n}\n```\n![Ejemplo 01](./_assets/example-01.png)\n\n#### Métodos\n\n- **MergeVariables**: Fusionar a un HTML variables (utiliza Handlebars)\n```js\nconst html = acornmail.MergeVariables(\n  '<div>{{Title}}</div>',\n  { Title: 'Hola mundo' },\n);\nconsole.log('MergeVariables', html);\n```\n\n- **NewAcornEmailComponents**: Obtener el tipo **acornEmail** para poder construir un template\n```js\nconst acorn = acornmail.NewAcornEmailComponents()\n```\n\n#### Componentes\n\n- **GetBoilerplate**\n```js\nconst boilerplate = acorn.GetBoilerplate([\n    \"Header\",\n    \"Body\",\n    \"Footer\",\n    // n componentes...\n])\nconsole.log({ boilerplate })\n```\n\n- **Spacer**\n```js\nconst acorn = acornmail.NewAcornEmailComponents();\nconst spacer = acorn.NewSpacer();\nconst boilerplate = acorn.GetBoilerplate([spacer], true);\n\nconsole.log({ boilerplate })\n```\n![Spacer](./_assets/components-spacer.png)\n\n- **Divider**\n```js\nconst acorn = acornmail.NewAcornEmailComponents();\nconst { colors } = acornmail.acornStyles;\nconst divider = acorn.NewDivider(colors.DeepPurple.M700);\nconst boilerplate = acorn.GetBoilerplate([divider], true);\n\nconsole.log({ boilerplate })\n```\n![Divider](./_assets/components-divider.png)\n\n- **Label**\n```js\nconst acorn = acornmail.NewAcornEmailComponents();\n\nconst labelFilled = acorn.NewLabel({\n  Text: 'filled label',\n});\n\nconst labelOutlined = acorn.NewLabel({\n  Text: 'outlined label',\n  Styles: {\n    Outlined: true,\n  },\n});\n\nconst boilerplate = acorn.GetBoilerplate([\n  labelFilled,\n  labelOutlined,\n]);\n\nconsole.log({ boilerplate })\n```\n![Label](./_assets/components-label.png)\n\n- **Image**\n```js\nconst acorn = acornmail.NewAcornEmailComponents();\n\nconst image = acorn.NewImage({\n  Image: 'https://fastly.picsum.photos/id/284/536/354.jpg?hmac=e8lLizGxaVIQy3ILytDAkWUwFvYLGAzDiqQU20owvHY',\n  Alt: 'Logo',\n});\n\nconst boilerplate = acorn.GetBoilerplate([image]);\n\nconsole.log({ boilerplate })\n```\n\n![Label](./_assets/components-image.png)\n\n- **Row**\n```js\nconst acorn = acornmail.NewAcornEmailComponents();\n\nconst widthColumns = acornmail.acornStyles.columns;\nconst { colors } = acornmail.acornStyles;\n\nconst row = acorn.NewRow([\n  {\n    Content: '1/4 de columna',\n    Styles: {\n      Width: widthColumns.Quarter,\n    },\n  },\n  {\n    Content: '1/2 de columna',\n    Styles: {\n      Width: widthColumns.Medium,\n      Color: colors.Purple.M700,\n      TextColor: colors.White,\n    },\n  },\n  {\n    Content: '1/4 de columna',\n    Styles: {\n      Width: widthColumns.Quarter,\n    },\n  },\n]);\n\nconst boilerplate = acorn.GetBoilerplate([row]);\n\nconsole.log({ boilerplate })\n```\n![Row](./_assets/components-row.png)\n\n- **Grid**\n```js\nconst acorn = acornmail.NewAcornEmailComponents();\n\nconst widthColumns = acornmail.acornStyles.columns;\nconst { colors } = acornmail.acornStyles;\n\nconst grid = acorn.NewGrid([\n  [\n    {\n      Content: '100%',\n      Styles: {\n        Width: widthColumns.Full,\n        Color: colors.Purple.M700,\n        TextColor: colors.White,\n      },\n    },\n  ],\n  undefined, // Add spacer\n  [\n    {\n      Content: '1/2 de columna',\n      Styles: {\n        Width: widthColumns.Medium,\n      },\n    },\n    {\n      Content: '1/2 de columna',\n      Styles: {\n        Width: widthColumns.Medium,\n      },\n    },\n  ],\n]);\n\nconsole.log({ boilerplate })\n```\n\n![Grid](./_assets/components-grid.png)\n\n- *Content*\n```js\nconst acorn = acornmail.NewAcornEmailComponents();\n\nconst widthColumns = acornmail.acornStyles.columns;\nconst { colors } = acornmail.acornStyles;\n\nconst row = acorn.NewRow([\n  {\n    Content: '1/4 de columna',\n    Styles: {\n      Width: widthColumns.Quarter,\n      TextColor: colors.White,\n    },\n  },\n  {\n    Content: '1/2 de columna',\n    Styles: {\n      Width: widthColumns.Medium,\n      Color: colors.Purple.M700,\n      TextColor: colors.White,\n    },\n  },\n  {\n    Content: '1/4 de columna',\n    Styles: {\n      Width: widthColumns.Quarter,\n      TextColor: colors.White,\n    },\n  },\n]);\n\nconst content = acorn.NewContent({\n  Content: row,\n  Image: 'https://picsum.photos/1200/800?image=837',\n});\n\nconst boilerplate = acorn.GetBoilerplate([content]);\n\nconsole.log({ boilerplate })\n```\n![Content](./_assets/components-content.png)\n\n```js\nconst acorn = acornmail.NewAcornEmailComponents();\n\nconst widthColumns = acornmail.acornStyles.columns;\nconst { colors } = acornmail.acornStyles;\n\nconst row = acorn.NewRow([\n  {\n    Content: '1/4 de columna',\n    Styles: {\n      Width: widthColumns.Quarter,\n      TextColor: colors.White,\n    },\n  },\n  {\n    Content: '1/2 de columna',\n    Styles: {\n      Width: widthColumns.Medium,\n      Color: colors.Purple.M700,\n      TextColor: colors.White,\n    },\n  },\n  {\n    Content: '1/4 de columna',\n    Styles: {\n      Width: widthColumns.Quarter,\n      TextColor: colors.White,\n    },\n  },\n]);\n\nconst content = acorn.NewContent({\n  Content: row,\n  // Image: 'https://picsum.photos/1200/800?image=837',\n});\n\nconst boilerplate = acorn.GetBoilerplate([content], true);\n\nconsole.log({ boilerplate })\n```\n![Content](./_assets/components-content-withoutimage.png)\n\n- **Alerts**\n```js\nconst acorn = acornmail.NewAcornEmailComponents();\n\nconst divider = acorn.NewDivider();\n\nconst alert = acorn.NewAlert({\n  Content: 'Alert',\n});\n\nconst alertOutlined = acorn.NewAlert({\n  Content: 'Alert',\n  Styles: {\n    Outlined: true,\n  },\n});\n\nconst boilerplate = acorn.GetBoilerplate([\n  alert,\n  divider,\n  alertOutlined,\n]);\n\nconsole.log({ boilerplate })\n```\n![Alert](./_assets/components-alert.png)\n\n- **Buttons**\n```js\nconst acorn = acornmail.NewAcornEmailComponents();\n\nconst { types } = acornmail.acornStyles;\nconst aligns = acornmail.acornStyles.align;\nconst widthColumns = acornmail.acornStyles.columns;\n\nconst buttonFilled = acorn.NewButton({\n  Text: 'Filled button',\n  Link: 'http://docs.thememountain.com/acorn/',\n  Styles: {\n    FullWidth: true,\n  },\n});\n\nconst buttonOutlined = acorn.NewButton({\n  Text: 'Outlined button',\n  Link: 'http://docs.thememountain.com/acorn/',\n  Styles: {\n    Type: types.Outlined,\n  },\n});\n\nconst buttonPhill = acorn.NewButton({\n  Text: 'Pill button',\n  Link: 'http://docs.thememountain.com/acorn/',\n  Styles: {\n    Type: types.Pill,\n    Align: aligns.Center,\n  },\n});\n\nconst grid = acorn.NewGrid([\n  [\n    {\n      Content: buttonFilled,\n      Styles: {\n        Width: widthColumns.Full,\n      },\n    },\n  ],\n  undefined, // Add spacer\n  [\n    {\n      Content: buttonOutlined,\n      Styles: {\n        Width: widthColumns.Medium,\n      },\n    },\n    {\n      Content: buttonPhill,\n      Styles: {\n        Width: widthColumns.Medium,\n      },\n    },\n  ],\n]);\n\nconsole.log({ boilerplate })\n```\n![Buttons](./_assets/components-buttons.png)\n\n- **Accordion**\n```js\nconst acorn = acornmail.NewAcornEmailComponents();\n\nconst { colors } = acornmail.acornStyles;\n\nconst accordion = acorn.NewAccordion([\n  {\n    Title: 'Panel 1',\n    Content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',\n  },\n  {\n    Title: 'Panel 2',\n    Content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',\n    Styles: {\n      Color: colors.Cyan.M300,\n      TitleColor: colors.White,\n      ContentColor: colors.Cyan.M300,\n    },\n  },\n]);\n\nconst boilerplate = acorn.GetBoilerplate([accordion]);\n\nconsole.log({ boilerplate })\n```\n![Accordion](./_assets/components-accordion.png)\n\n- **Timeline**\n```js\nconst acorn = acornmail.NewAcornEmailComponents();\n\n//== Limitaciones ==//\n// Time: Max 11 caracteres\n// Title: Max 37 caracteres\n// Content: Max 78 caracteres\n\nconst timeline = acorn.NewTimeline([\n  {\n    Time: '2007 - 2008',\n    Title: 'Massachusetts Institute of Technology',\n    Content: 'Co-wrote a book on the Semantic Web and Best Practices for Developers.',\n  },\n  {\n    Time: '2004 - 2006',\n    Title: 'Parsons School of Design',\n    Content: 'Awarded Best Designer of the Year voted by student and teacher body.',\n  },\n  {\n    Time: '2002 - 2004',\n    Title: 'Berkley College',\n    Content: 'Two year program with a focus on design principles and Javascript development.',\n  },\n]);\n\nconst boilerplate = acorn.GetBoilerplate([timeline]);\n\nconsole.log({ boilerplate })\n```\n![Timeline](./_assets/components-timeline.png)\n\n- **Testimonial**\n```js\nconst acorn = acornmail.NewAcornEmailComponents();\n\nconst aligns = acornmail.acornStyles.align;\nconst { colors } = acornmail.acornStyles;\n\nconst testimonialBorder = acorn.NewTestimonial({\n  Testimonial: 'Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.',\n  Author: 'Steve Jobs',\n  Styles: {\n    BorderColor: colors.Orange.M500,\n  },\n});\n\nconst testimonialIcon = acorn.NewTestimonial({\n  Testimonial: 'Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.',\n  Author: 'Steve Jobs',\n  Icon: true,\n});\n\nconst testimonialImage = acorn.NewTestimonial({\n  Testimonial: 'Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.',\n  Author: 'Steve Jobs',\n  Styles: {\n    Image: 'https://gravatar.com/avatar/5ad269974f4c69c9ff6eca2ad2d1d0b8?s=400&d=robohash&r=x',\n    Align: aligns.Center,\n  },\n});\n\nconst boilerplate = acorn.GetBoilerplate([\n  testimonialBorder,\n  testimonialIcon,\n  testimonialImage,\n]);\n\nconsole.log({ boilerplate })\n```\n![Testimonial](./_assets/components-testimonial.png)\n\n- **Promo**\n```js\nconst acorn = acornmail.NewAcornEmailComponents();\n\nconst promo = acorn.NewPromo({\n  Promo: { Value: '25' },\n  Symbol: { Value: '%' },\n  Description: { Value: 'OFF' },\n});\n\nconst boilerplate = acorn.GetBoilerplate([promo]);\n\nconsole.log({ boilerplate })\n```\n![Promo default](./_assets/components-promo01.png)\n\n```js\nconst acorn = acornmail.NewAcornEmailComponents();\n\nconst { sizes } = acornmail.acornStyles;\n\nconst promo = acorn.NewPromo({\n  Promo: { Value: '25', Size: sizes.Px108 },\n  Symbol: { Value: '%', Size: sizes.Px36 },\n  Description: { Value: 'OFF', Size: sizes.Px24 },\n});\n\nconst boilerplate = acorn.GetBoilerplate([promo]);\n\nconsole.log({ boilerplate })\n```\n![Promo custom](./_assets/components-promo02.png)\n\n- **Coupon**\n```js\nconst acorn = acornmail.NewAcornEmailComponents();\n\nconst color = acornmail.acornStyles.colors;\nconst aligns = acornmail.acornStyles.align;\n\nconst coupon = acorn.NewCoupon({\n  Content: acorn.NewGrid([\n    [{\n      Content: `\n      <div style=\"font-size: 13px; text-transform: uppercase;\">¡Gracias por registrarte!<br>Disfruta</div>\n      <div style=\"font-size: 72px; font-weight: 700; line-height: 100%;\">$10 DESC</div>\n      <div class=\"spacer py-sm-8\" style=\"line-height: 16px;\">‌</div>\n      <div style=\"font-size: 20px; letter-spacing: 2px; line-height: 100%; text-transform: uppercase;\">En tu primera compra</div>\n      `,\n      Styles: {\n        Align: aligns.Center,\n        TextColor: color.White,\n      },\n    }],\n    undefined,\n  ]),\n  Button: {\n    Link: 'https://www.example.com',\n    Text: 'COMPRA AHORA',\n    Styles: {\n      Color: color.White,\n      TextColor: color.Blue.M500,\n      Align: aligns.Center,\n    },\n  },\n});\n\nconst boilerplate = acorn.GetBoilerplate([coupon]);\n\nconsole.log({ boilerplate })\n```\n![Coupon default](./_assets/components-coupon01.png)\n\n```js\nconst acorn = acornmail.NewAcornEmailComponents();\n\nconst color = acornmail.acornStyles.colors;\nconst aligns = acornmail.acornStyles.align;\n\nconst promo = acorn.NewPromo({\n  Promo: { Value: '25' },\n  Symbol: { Value: '%' },\n  Description: { Value: 'DESC' },\n});\n\nconst label = acorn.NewLabel({\n  Text: '25OFFTODAY',\n  Styles: {\n    Outlined: true,\n    TextColor: color.Red.M500,\n    Color: color.Red.M500,\n  },\n});\n\nconst coupon = acorn.NewCoupon({\n  Content: acorn.NewGrid([\n    [{ Content: promo }],\n    [{\n      Content: `Con el cupón ${label}`,\n      Styles: {\n        Align: aligns.Center,\n        TextColor: color.Grey.M400,\n      },\n    }],\n    undefined,\n  ]),\n  Button: {\n    Link: 'https://www.example.com',\n    Text: 'Canjear cupón →',\n    Styles: {\n      Color: color.Black,\n      TextColor: color.White,\n      Align: aligns.Center,\n    },\n  },\n  Styles: {\n    Dashed: true,\n  },\n});\n\nconst boilerplate = acorn.GetBoilerplate([coupon]);\n\nconsole.log({ boilerplate })\n```\n![Coupon dashed](./_assets/components-coupon02.png)\n\n#### Estilos\n\n- *Tipo de botones*\n\n```js\nconst types = acornmail.acornStyles.type\nconsole.log({ types.Filled })\nconsole.log({ types.Outlined })\nconsole.log({ types.Pill })\n```\n\n- *Alineaciones*\n\n```js\nconst aligns = acornmail.acornStyles.align\nconsole.log({ aligns.Center })\nconsole.log({ aligns.Right })\nconsole.log({ aligns.Left })\n```\n\n- *Tamaños de letra*\n\n```js\nconst { sizes } = acornmail.acornStyles\nconsole.log({ sizes.Px12 })\nconsole.log({ sizes.Px24 })\nconsole.log({ sizes.Px36 })\nconsole.log({ sizes.Px48 })\nconsole.log({ sizes.Px60 })\nconsole.log({ sizes.Px72 })\nconsole.log({ sizes.Px84 })\nconsole.log({ sizes.Px96 })\nconsole.log({ sizes.Px108 })\nconsole.log({ sizes.Px120 })\n```\n\n- *Ancho de columnas*\n\n```js\nconst { columns } = acornmail.acornStyles\nconsole.log({ columns.Full }) // 100%\nconsole.log({ columns.Quarter }) // 1/4\nconsole.log({ columns.Medium }) // 1/2\nconsole.log({ columns.ThreeQuarters }) // 3/4\nconsole.log({ columns.OneThird }) // 1/3\nconsole.log({ columns.TwoThird }) // 2/3\n```\n\n![Grid three](./_assets/grid-three.png)\n![Grid four](./_assets/grid-four.png)\n\n- *Colores*\n\n```js\nconst { colors } = acornmail.acornStyles\nconst red50 = colors.Red.M50\nconsole.log({ red50 })\n\n// Only hexadecimal string\n```\n\n![Material color 01](./_assets/material-color-01.jpeg)\n![Material color 02](./_assets/material-color-02.jpeg)\n![Material color 03](./_assets/material-color-03.jpeg)\n","readmeFilename":"README.md"}