123

html-typography-tags/.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": {}
+    }
+  ]
+}

html-typography-tags/README.md

@@ -0,0 +1,104 @@
+# html-typography-tags
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build html-typography-tags` to build the library.
+
+## Running unit tests
+
+Run `nx test html-typography-tags` to execute the unit tests via [Jest](https://jestjs.io).
+
+
+- [ ] TODO: To add examples from the past version to the readme 
+
+
+button.js
+
+div.js
+
+heading-nmtg.js
+
+heading.js
+
+headingOne.js
+
+image.js
+
+imageLink.js
+
+italic.js
+
+link.js
+
+list.js
+
+listItem.js
+
+paragraph.js
+
+strong.js
+
+https://github.com/sindresorhus/create-html-element
+
+
+```
+
+const paragraphComponent = (params) => {
+  if (typeof params != 'object') {
+    customError.add('"params" is not "object"');
+  }
+
+  if (typeof params.attributes == '') {
+    customError.add('empty attributes');
+  }
+
+  if (typeof params.content == '') {
+    customError.add('empty content');
+  }
+
+  const { attributes, content } = params;
+
+  return `<p ${attributes}>${content}</p>`;
+};
+```
+
+```
+const buttonComponent = (params) => {
+  const { id, href, text } = params;
+  const error = new Errors('contentButton');
+
+  if (id == '') {
+    error.add('No id button');
+  }
+  if (href == '') {
+    error.add('No href button');
+  }
+  if (text == '') {
+    error.add('No text button');
+  }
+
+  return buttonMainBlock(id, href, text);
+};
+```
+
+```
+export default function (params) {
+  const { hrefTitle, idTitle, textTitle } = params;
+  const error = new Errors('contentTitleText');
+
+  if (hrefTitle == '') {
+    error.add('No hrefTitle');
+  }
+  if (idTitle == '') {
+    error.add('No idTitle');
+  }
+  if (textTitle == '') {
+    error.add('No textTitle');
+  }
+
+  return headingMainBlock(hrefTitle, idTitle, textTitle);
+}
+```
+

html-typography-tags/jest.config.ts

@@ -0,0 +1,15 @@
+/* eslint-disable */
+export default {
+  displayName: 'html-typography-tags',
+  preset: '../../jest.preset.js',
+  globals: {
+    'ts-jest': {
+      tsconfig: '<rootDir>/tsconfig.spec.json',
+    },
+  },
+  transform: {
+    '^.+\\.[tj]s$': 'ts-jest',
+  },
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  coverageDirectory: '../../coverage/packages/html-typography-tags',
+};

html-typography-tags/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@template/html-typography-tags",
+  "version": "4.2.2",
+  "type": "commonjs",
+  "dependencies": {
+    "stringify-attributes": "^3.0.0"
+  },
+  "author": "Arthur Tkachenko, Yuriy",
+  "license": "MIT",
+  "private": false,
+  "release": {
+    "publishDir": "dist"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

html-typography-tags/project.json

@@ -0,0 +1,40 @@
+{
+  "name": "html-typography-tags",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/html-typography-tags/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nrwl/js:tsc",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/packages/html-typography-tags",
+        "main": "packages/html-typography-tags/src/index.ts",
+        "tsConfig": "packages/html-typography-tags/tsconfig.lib.json",
+        "assets": ["packages/html-typography-tags/*.md"]
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["packages/html-typography-tags/**/*.ts"]
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "packages/html-typography-tags/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    }
+  },
+  "tags": []
+}

html-typography-tags/src/components/button.ts

@@ -0,0 +1,49 @@
+// import Errors from './Errors';
+import linkComponent from './link';
+import stringifyAttributes from 'stringify-attributes';
+
+// import stringifyAttributes from '../../node_modules/stringify-attributes';
+
+// stringifyAttributes({
+//   rainbow: true,
+//   number: 1,
+//   multiple: ['a', 'b'],
+// });
+
+// function printToConsole(s: string) {
+//   console.log(s);
+// }
+
+
+function buttonComponent(params: { id: string, href: string, text: string }) {
+   const attributes = {
+    id: params.id,
+    class: `mlContentButton`,
+    href: params.href,
+    'data-link-id': params.id,
+    style: `font-family: "Poppins", sans-serif; background-color: #d6685e; border-radius: 3px; color: #ffffff; display: inline-block; font-size: 17px; font-weight: 400; line-height: 23px; padding: 15px 0 15px 0; text-align: center; text-decoration: none; width: 260px;`,
+  };
+
+  const attributesStr = stringifyAttributes(attributes);
+
+  console.log(attributesStr);
+
+  const linkObject = {
+    attributes: attributesStr,
+    content: params.text
+  }
+
+  console.log(linkObject);
+
+  return linkComponent(linkObject);
+}
+
+// // we will probably loose id param during changes that Arthur is doing.
+// const bottonTwoMainBlock = (id, href, text) => {
+//   return `<a class="mlContentButton" href="${href}" data-link-id="${id}"
+//   style="font-family: "Poppins", sans-serif; background-color: #d6685e; border-radius: 3px; color: #ffffff; display: inline-block; font-size: 17px; font-weight: 400; line-height: 23px; padding: 15px 0 15px 0; text-align: center; text-decoration: none; width: 260px;" target="_self">
+//   ${text}
+//   </a>`;
+// };
+
+export default buttonComponent;

html-typography-tags/src/components/config.ts

@@ -0,0 +1,20 @@
+// Create config file
+const contact = "xxx";
+const mailingAddress = "[email protected]";
+const unsubscribe =
+  "https://click.mailerlite.com/link/c/YT0xOTM0MzU4ODYxNzU0NDA1OTgyJmM9bDhuNSZiPTk2MDM1NzY2OSZkPWo3eTJlNHY=.Ec_fY2NpMcOTAMs-XIr1n9exawt8fd3IsksWtSJ2kak";
+const pathToImages = "../data/images/";
+const pathMainLogo = "../data/images/logo.jpeg";
+const pathSocialIcons = "../data/images/";
+const titleHead =
+  "Korean Barbecue Beef | Pork Schnitzel | Bahn Mi Meatball Skewers";
+
+export {
+  contact,
+  mailingAddress,
+  unsubscribe,
+  pathToImages,
+  pathMainLogo,
+  pathSocialIcons,
+  titleHead,
+};

html-typography-tags/src/components/div.ts

@@ -0,0 +1,32 @@
+import stringifyAttributes from 'stringify-attributes';
+// import stringifyAttributes from '../../node_modules/stringify-attributes';
+
+// TODO think about renaming content into children
+
+// params: { id: string, href: string, text: string }
+function divComponent (params: any) {
+
+
+
+    const { attributes, content } = params;
+
+    const attributesStr = stringifyAttributes(attributes);
+
+
+    return `<div ${attributesStr}>${content}</div>`;
+  }
+
+  export default divComponent;
+
+
+      // if (typeof params != 'object') {
+    //   customError.add('"params" is not "object"');
+    // }
+
+    // if (typeof params.attributes == '') {
+    //   customError.add('empty attributes');
+    // }
+
+    // if (typeof params.content == '') {
+    //   customError.add('empty content');
+    // }

html-typography-tags/src/components/image.ts

@@ -0,0 +1,87 @@
+// Error
+// import Errors from './Errors';
+// Config file
+// import { pathToImages } from '../config.js';
+
+// TODO to solve everything related to image component
+// passing src, width, error handling, etc
+// plus to move it later between other templates
+
+import stringifyAttributes from 'stringify-attributes';
+// import stringifyAttributes from '../../node_modules/stringify-attributes';
+
+function imageComponent (params: { src: string, width: string }) {
+
+
+  const attributes = {
+    src: params.src,
+    style: `display: block;`,
+    border:"0",
+    alt:"",
+    width: params.width, // TODO test if it can work withot width param or not
+  };
+
+
+  const attributesStr = stringifyAttributes(attributes);
+
+  // console.log(attributesStr);
+
+  return  `<img ${attributesStr} >`;
+
+}
+
+
+export default imageComponent;
+
+
+//------------------------------------------
+//------------------------------------------
+
+//   const { id, href, src, width } = params;
+
+//   const error = new Errors('image');
+
+//   if (id == '') {
+//     error.add('No id');
+//   }
+//   if (href == '') {
+//     error.add('No href');
+//   }
+//   if (src == '') {
+//     error.add('No src');
+//   }
+
+//------------------------------------------
+//------------------------------------------
+
+// import linkComponent from './link';
+
+
+
+// const imageComponentOld = (attributes) => {
+//   const { src, width } = attributes;
+
+//   if(!width){
+//     return  `<img src="${src}" border="0" alt=""  style="display: block;">`;
+//   }
+
+//   return `<img src="${src}" border="0" alt="" width="${width}" style="display: block;">`;
+// } 
+
+// if (typeof params != 'object') {
+//   customError.add('"params" is not "object"');
+// }
+
+// if (typeof params.attributes == '') {
+//   customError.add('empty attributes');
+// }
+
+
+  // const { src, width } = attributes;
+
+  // if(!width){
+  //   return  `<img src="${src}" border="0" alt=""  style="display: block;">`;
+  // }
+
+
+  // return `<img src="${src}" border="0" alt="" width="${width}" style="display: block;">`;