Sync Templates (#379)

* sync ts to js template files on commit

* generate js templates

* generate js templates

* test precommit hook

* test precommit hook

* revert precommit test

* add newline

* add eslint rule

* add newlines after imports

* commit

* save

.eslintignore

@@ -2,3 +2,4 @@ node_modules
 **/dist/**
 **/generated/**
 **/runs/**
+.mailing

.eslintrc.json

@@ -69,13 +69,20 @@
         "@next/next/no-html-link-for-pages": "error",
         "@next/next/no-img-element": "error"
       }
+    },
+    {
+      "files": ["**/moduleManifest.js"],
+      "rules": {
+        "import/newline-after-import": "off"
+      }
     }
   ],
   "rules": {
     "semi": "off",
     "@next/next/google-font-display": "off",
     "@next/next/no-html-link-for-pages": "off",
     "@next/next/no-img-element": "off",
+    "import/newline-after-import": ["error", { "count": 1 }],
     "import/no-anonymous-default-export": [
       "error",
       {

.lintstagedrc

@@ -1,4 +1,6 @@
 {
   "*.{js,jsx,ts,tsx}": "eslint --fix",
-  "*.rb": "rubocop --autocorrect"
+  "*.rb": "rubocop --autocorrect",
+  "packages/cli/src/generator_templates/ts/**/*.{ts,tsx}": "scripts/build-js-templates"
 }
+

package.json

@@ -28,7 +28,7 @@
     "ci:cli": "cd packages/cli && yarn ci:server",
     "ci:web": "cd packages/web && yarn ci:server",
     "test:e2e": "bundle && bundle exec ruby e2e/cli.rb run-all",
-    "test:servers:start": "./scripts/assert-free-ports.sh && MAILING_API_KEY=testApiKey MAILING_API_URL=http://localhost:3883 MAILING_DATABASE_URL=$MAILING_DATABASE_URL_TEST WEB_DATABASE_URL=$WEB_DATABASE_URL_TEST start-test ci:cli :3883 ci:web :3000",
+    "test:servers:start": "./scripts/assert-free-ports && MAILING_API_KEY=testApiKey MAILING_API_URL=http://localhost:3883 MAILING_DATABASE_URL=$MAILING_DATABASE_URL_TEST WEB_DATABASE_URL=$WEB_DATABASE_URL_TEST start-test ci:cli :3883 ci:web :3000",
     "integration:servers:start": "MAILING_INTEGRATION_TEST=true yarn test:servers:start",
     "prepublish": "yarn build",
     "postinstall": "husky install && preconstruct dev",

packages/cli/src/commands/preview/server/templates/feModuleManifest.template.ejs

@@ -1,4 +1,5 @@
 import config from "../../mailing.config.json";
-export { config };
+
 const feManifest = { config };
+export { config };
 export default feManifest;

packages/cli/src/commands/preview/server/templates/moduleManifest.template.ejs

@@ -9,7 +9,7 @@ import sendMail from "<%= relativePathToEmailsDir %>";
 
 const previews = { <%= previewConsts.join(", ") %> };
 const templates = { <%= templateModuleNames.join(", ") %> };
+const moduleManifest = { sendMail, templates, previews };
 
 export { sendMail, config, templates, previews };
-const moduleManifest = { sendMail, templates, previews };
 export default moduleManifest;

packages/cli/src/components/MobileHeader.tsx

@@ -1,8 +1,8 @@
 import { useContext } from "react";
 import cx from "classnames";
-
 import { HamburgerContext } from "./HamburgerContext";
 import LogoMarkSmall from "./icons/LogoMarkSmall";
+
 type MobileHeaderProps = {
   title: string;
 };

packages/cli/src/generator_templates/js/emails/AccountCreated.jsx

@@ -71,9 +71,9 @@ const AccountCreated = ({ name }) => (
           </MjmlText>
         </MjmlColumn>
       </MjmlSection>
-      <Footer includeUnsubscribe/>
+      <Footer includeUnsubscribe />
     </MjmlBody>
   </Mjml>
 );
-
+AccountCreated.subject = ({ name }) => `Welcome to BookBook, ${name}!`;
 export default AccountCreated;

packages/cli/src/generator_templates/js/emails/NewSignIn.jsx

@@ -1,14 +1,12 @@
 import Head from "./components/Head";
 import Header from "./components/Header";
 import Footer from "./components/Footer";
-import ButtonPrimary from "./components/ButtonPrimary";
 import {
   leadingTight,
   leadingRelaxed,
   textBase,
   textLg,
 } from "./components/theme";
-
 import {
   Mjml,
   MjmlBody,
@@ -82,5 +80,4 @@ const NewSignIn = ({ name, headline, body, bulletedList }) => {
     </Mjml>
   );
 };
-
 export default NewSignIn;

packages/cli/src/generator_templates/js/emails/Reservation.jsx

@@ -8,7 +8,6 @@ import {
   textBase,
   textLg,
 } from "./components/theme";
-
 import {
   Mjml,
   MjmlBody,
@@ -74,5 +73,4 @@ const Reservation = ({ headline, body, bulletedList, ctaText }) => {
     </Mjml>
   );
 };
-
 export default Reservation;

packages/cli/src/generator_templates/js/emails/ResetPassword.jsx

@@ -3,7 +3,6 @@ import Header from "./components/Header";
 import Footer from "./components/Footer";
 import ButtonPrimary from "./components/ButtonPrimary";
 import { leadingRelaxed, textBase } from "./components/theme";
-
 import {
   Mjml,
   MjmlBody,
@@ -70,5 +69,4 @@ const ResetPassword = ({ name, body, ctaText }) => {
     </Mjml>
   );
 };
-
 export default ResetPassword;

packages/cli/src/generator_templates/js/emails/components/BulletedList.jsx

@@ -18,5 +18,4 @@ const BulletedList = ({ items }) => {
     </>
   );
 };
-
 export default BulletedList;

packages/cli/src/generator_templates/js/emails/components/ButtonPrimary.jsx

@@ -8,7 +8,7 @@ const ButtonPrimary = ({ link, uiText }) => {
       <MjmlButton
         lineHeight={leadingTight}
         fontSize={textBase}
-        height={52}
+        height={32}
         padding="0"
         align="left"
         href={link}
@@ -22,7 +22,7 @@ const ButtonPrimary = ({ link, uiText }) => {
       <MjmlButton
         lineHeight={leadingTight}
         fontSize={textBase}
-        height={52}
+        height={32}
         padding="0"
         align="left"
         href={link}
@@ -36,5 +36,4 @@ const ButtonPrimary = ({ link, uiText }) => {
     </>
   );
 };
-
 export default ButtonPrimary;

packages/cli/src/generator_templates/js/emails/components/Footer.jsx

@@ -15,8 +15,8 @@ export default function Footer({ includeUnsubscribe }) {
           © {new Date().getFullYear()} BookBook  ·  
           {includeUnsubscribe ? (
             <a href={EMAIL_PREFERENCES_URL} target="_blank" rel="noreferrer">
-            Unsubscribe
-          </a>
+              Unsubscribe
+            </a>
           ) : null}
         </MjmlText>
       </MjmlColumn>

packages/cli/src/generator_templates/js/emails/components/Head.jsx

@@ -1,3 +1,4 @@
+import React from "react";
 import {
   MjmlHead,
   MjmlFont,
@@ -11,18 +12,19 @@ import { black, grayDark } from "./theme";
 const Head = ({ children }) => {
   return (
     <MjmlHead>
-      <MjmlRaw>
-        <meta name="color-scheme" content="light dark" />
-        <meta name="supported-color-schemes" content="light dark" />
-      </MjmlRaw>
-      <MjmlFont
-        name="Inter"
-        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700"
-      />
-      <MjmlStyle>{`
-       strong {
-        font-weight: 700;
-      }
+      <>
+        <MjmlRaw>
+          <meta name="color-scheme" content="light dark" />
+          <meta name="supported-color-schemes" content="light dark" />
+        </MjmlRaw>
+        <MjmlFont
+          name="Inter"
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700"
+        />
+        <MjmlStyle>{`
+        strong {
+          font-weight: 700;
+        }
         .smooth {
           -webkit-font-smoothing: antialiased;
         }
@@ -48,6 +50,9 @@ const Head = ({ children }) => {
           }
         }
         @media (prefers-color-scheme: dark) {
+          body {
+            background: ${black};
+          }
           .logo > * {
             filter: invert(1) !important;
           }
@@ -62,15 +67,15 @@ const Head = ({ children }) => {
           }
         }
       `}</MjmlStyle>
-      <MjmlAttributes>
-        <MjmlAll
-          font-family='Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
-          font-weight="400"
-        />
-      </MjmlAttributes>
-      {children}
+        <MjmlAttributes>
+          <MjmlAll
+            font-family='Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+            font-weight="400"
+          />
+        </MjmlAttributes>
+        {children}
+      </>
     </MjmlHead>
   );
 };
-
 export default Head;

packages/cli/src/generator_templates/js/emails/components/Header.jsx

@@ -16,5 +16,4 @@ const Header = ({ loose }) => {
     </MjmlSection>
   );
 };
-
 export default Header;

packages/cli/src/generator_templates/js/emails/components/theme.js

@@ -1,16 +1,14 @@
 // Colors
 export const black = "#000";
 export const gold = "#fadf98";
-export const grayDark = "#777";
+export const grayDark = "#888";
 export const grayLight = "#f5f5f5";
-
 // Typography
 export const textSm = 14;
 export const textBase = 16;
 export const textLg = 24;
 export const textXl = 30;
 export const leadingTight = "120%";
 export const leadingRelaxed = "160%";
-
 // Borders
 export const borderBase = 100;

packages/cli/src/generator_templates/js/emails/index.js

@@ -5,17 +5,15 @@ const transport = nodemailer.createTransport({
   pool: true,
   host: "smtp.example.com",
   port: 465,
-  secure: true, // use TLS
+  secure: true,
   auth: {
     user: "username",
     pass: "password",
   },
 });
-
 const sendMail = buildSendMail({
   transport,
   defaultFrom: "[email protected]",
   configPath: "./mailing.config.json",
 });
-
 export default sendMail;

packages/cli/src/generator_templates/js/emails/previews/Reservation.jsx

@@ -25,7 +25,6 @@ export async function reservationWithError() {
     />
   );
 }
-
 export function reservationConfirmed() {
   return (
     <Reservation
@@ -49,7 +48,6 @@ export function reservationConfirmed() {
     />
   );
 }
-
 export function reservationChanged() {
   return (
     <Reservation

packages/cli/src/pages/api/__integration__/util/apiKeys.ts

@@ -1,5 +1,6 @@
 import { Api } from "./index";
 import { assertIntegrationTestEnv } from "./assertIntegrationTestEnv";
+
 assertIntegrationTestEnv();
 
 export async function apiCreateApiKey() {

packages/cli/src/pages/api/__integration__/util/index.ts

@@ -1,5 +1,6 @@
 import nodeFetch from "node-fetch";
 import fetchCookie from "fetch-cookie";
+
 export const fetch: any = fetchCookie(nodeFetch);
 
 export function cliUrl(path: string) {

packages/cli/src/util/config/__test__/anonymousId.test.ts

@@ -2,6 +2,7 @@ import {
   getOrSetGeneratedAnonymousId,
   getGeneratedAnonymousId,
 } from "../anonymousId";
+
 describe("anonymousId", () => {
   it("read and write anonymouse id's", () => {
     // before getOrSetGeneratedAnonymousId has been called, getGeneratedAnonymousId should return undefined

scripts/assert-free-ports.sh → scripts/assert-free-ports

@@ -1,4 +1,4 @@
-#!/bin/bash
+#!/usr/bin/env bash
 
 lsof -i :3000 > /dev/null && echo 'Refusing to run because port 3000 is already in use' && exit 1
 lsof -i :3883 > /dev/null && echo 'Refusing to run because port 3883 is already in use' && exit 1

scripts/build-js-templates

@@ -0,0 +1,15 @@
+#!/usr/bin/env bash
+
+npx tsc \
+--allowSyntheticDefaultImports true \
+--moduleResolution node \
+--jsx preserve \
+--target es2020 \
+--outDir packages/cli/src/generator_templates/js/emails \
+--noEmit false \
+packages/cli/src/generator_templates/ts/emails/**/*.tsx packages/cli/src/generator_templates/ts/emails/*.ts
+
+npx prettier --write packages/cli/src/generator_templates/js/*
+yarn eslint --fix --ext .jsx,.js packages/cli/src/generator_templates/js/*
+
+git add packages/cli/src/generator_templates/js/*

yarn.lock

@@ -9993,7 +9993,7 @@ tapable@^2.2.0:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
   integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
 
-tar-fs@*:
+tar-fs@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.1.1.tgz#489a15ab85f1f0befabb370b7de4f9eb5cbe8784"
   integrity sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==