task(libs/accounts): Port email rendering code to libs

.gitignore

@@ -87,6 +87,9 @@ Thumbs.db
 # command is called
 .venv
 
+## Lib Specific
+libs/accounts/email-renderer/public/locales
+
 ## Package-specific ##
 
 # circleci

libs/accounts/email-renderer/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

libs/accounts/email-renderer/.storybook/main.ts

@@ -0,0 +1,70 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const path = require('path');
+
+export default {
+  framework: {
+  name: '@storybook/html-webpack5',
+  options: {},
+},
+  stories: [
+    '../src/**/*.stories.ts'
+  ],
+  staticDirs: process.env.STORYBOOK_BUILD !== 'true' ? ['..'] : undefined,
+  addons: [
+    '@storybook/addon-webpack5-compiler-babel',
+    '@storybook/addon-docs',
+    '@storybook/addon-controls',
+    '@storybook/addon-toolbars',
+  ],
+  core: {
+    builder: 'webpack5',
+  },
+  babel: async (options) => {
+    const babelConfig = {
+      ...options,
+      "sourceType": "unambiguous",
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "targets": "> 0.25%, last 2 versions, not dead"
+          }
+        ],
+        "@babel/preset-typescript",
+      ],
+      "plugins": []
+    }
+    console.log('babel config!');
+
+    return babelConfig;
+  },
+
+  features: { storyStoreV7: true },
+  // Added to resolve path aliases set in <projectRoot>/tsconfig.base.json
+  // tsconfig.storybook.json is necessary to replace the *.ts extension in tsconfig.base.json
+  // with a *.js extension. Other than that it should remain the same.
+  async webpackFinal(config, { configType }) {
+    config.resolve.plugins = [
+      new TsconfigPathsPlugin({
+        configFile: path.resolve(__dirname, './tsconfig.storybook.json'),
+      }),
+    ];
+
+    config.resolve.fallback = {
+        // fs: false, // Keep this as it's the standard Storybook approach.
+
+        // // This is often needed when using internal Node libs in the browser:
+        // path: false,
+        // os: false,
+        // "http": require.resolve("stream-http"),
+        // "https": require.resolve("https-browserify"),
+
+        // // **Potential fix for fs** - by adding 'process' which is another common Node dependency
+        // process: require.resolve('process/browser'),
+    };
+    return config;
+  },
+};

libs/accounts/email-renderer/.storybook/preview.ts

@@ -0,0 +1,32 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import '../src/storybook.css';
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+};
+
+export const globalTypes = {
+  direction: {
+    name: 'Text directionality',
+    description: 'Set text to LTR or RTL direction',
+    defaultValue: 'ltr',
+    toolbar: {
+      icon: 'transfer',
+      items: [
+        {
+          value: 'ltr',
+          right: '➡️',
+          title: 'Left to Right',
+        },
+        {
+          value: 'rtl',
+          right: '⬅️',
+          title: 'Right to Left',
+        },
+      ],
+    },
+  },
+};

libs/accounts/email-renderer/.storybook/tsconfig.storybook.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../tsconfig.json"
+}

libs/accounts/email-renderer/README.md

@@ -0,0 +1,49 @@
+# account email renderer
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build accounts-email-renderer` to build the library.
+
+## Running unit tests
+
+Run `nx test accounts-email-renderer` to execute the unit tests via [Jest](https://jestjs.io).
+
+## Viewing Story Books
+
+Run `nx storybook accounts-email-renderer`
+
+## Using this library in your service
+
+The install is like most other libs, except there's a good chance you'll have to copy assests from this lib into your build's dist folder.
+
+The simplest way to do this is with the copyfiles utility. Here's an example gist, from admin-server's package.json
+
+    `"copy-email-assets": "copyfiles --up 1 '../../libs/accounts/email-renderer/**/*.{mjml,ftl,txt,css}' dist/libs/ ",`
+
+### Other Gotchas
+One tricky thing about how this project is crafted is that the lib is designed to be used in Node on the server server side, but the storybooks are
+run in a web browser context. Be careful not include the `node-bindings.ts` from storybook. Doing so will result in weird errors about missing
+polyfils! Don't simply try adding this polyfils. Instead, make sure `node-bindings.ts` isn't accidentally getting imported by storybook.
+
+### Adding a new Email
+
+To add a new email, do the following.
+
+1. Go to src/templates, and copy one of the exiting folders renaming it as desired.
+2. Next update the index.mjml to construct your template.
+3. Next update index.txt to construct your text version of the email.
+4. Next update en.ftl and make sure all l10n id's are in place.
+5. Next update index.ts. You should have:
+    a. Strongly typed `TemplateData` showing the property the template expected
+    b. A template const that reflects the template names, and matches the folder name.
+    c. A version const that reflects the current 'version' of the template
+    d. A layout const that reflects the intended layout.
+    d. Includes, which help us render a subject, action, or preview of the email
+6. Next create index.stories.ts filling out the various states and render states as needed.
+7. Next open the `fxa-email-render.ts` and follow the pattern there.
+    a. Import the new template folder
+    b. Create method corresponding to the template folder
+    c. Follow the established pattern to wire up the template and expose it.
+8. Finally run `nx storybook accounts-email-renderer` to preview what the email looks.

libs/accounts/email-renderer/jest.config.ts

@@ -0,0 +1,21 @@
+/* eslint-disable */
+export default {
+  displayName: 'accounts-email-renderer',
+  preset: '../../../jest.preset.js',
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
+  },
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  coverageDirectory: '../../../coverage/libs/accounts/email-renderer',
+  reporters: [
+    'default',
+    [
+      'jest-junit',
+      {
+        outputDirectory: 'artifacts/tests/lib/accounts/email-renderer',
+        outputName: 'accounts-email-renderer-jest-unit-results.xml',
+      },
+    ],
+  ],
+};

libs/accounts/email-renderer/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@fxa/accounts/email-renderer",
+  "version": "0.0.1",
+  "dependencies": {},
+  "type": "commonjs",
+  "main": "./index.cjs",
+  "types": "./index.d.ts",
+  "private": true
+}

libs/accounts/email-renderer/project.json

@@ -0,0 +1,58 @@
+{
+  "name": "accounts-email-renderer",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/accounts/email-renderer/src",
+  "projectType": "library",
+  "tags": ["scope:shared:lib"],
+  "targets": {
+    "build": {
+      "executor": "@nx/esbuild:esbuild",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/libs/accounts/email-renderer",
+        "main": "libs/accounts/email-renderer/src/index.ts",
+        "tsConfig": "libs/accounts/email-renderer/tsconfig.lib.json",
+        "assets": ["libs/accounts/email-renderer/*.md"],
+        "format": ["cjs"],
+        "generatePackageJson": true
+      }
+    },
+    "test-unit": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/accounts/email-renderer/jest.config.ts",
+        "testPathPattern": ["^(?!.*\\.in\\.spec\\.ts$).*$"]
+      }
+    },
+    "test-integration": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/accounts/email-renderer/jest.config.ts",
+        "testPathPattern": ["\\.in\\.spec\\.ts$"]
+      }
+    },
+     "build-storybook": {
+      "executor": "@nx/storybook:build",
+      "outputs": ["{options.outputDir}"],
+      "options": {
+        "outputDir": "dist/storybook/accounts/email-renderer",
+        "configDir": "libs/accounts/email-renderer/.storybook"
+      }
+    },
+    "storybook": {
+      "executor": "@nx/storybook:storybook",
+      "options": {
+        "port": 4400,
+        "configDir": "libs/accounts/email-renderer/.storybook",
+        "browserTarget": "accounts-email-renderer:build"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    }
+  }
+}