@onepercentio/one-ui 0.1.2

package/WebpackConfigs/__snapshots__/email-templates.test.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Should warn the user when there are no templates mapped 1`] = `
+Array [
+  Array [
+    "No templates were found. If you want to create a static template, please create a file with name {htmlName}.static.tsx (ex: some-template.static.tsx)",
+  ],
+]
+`;

package/WebpackConfigs/email-templates.js

@@ -0,0 +1,251 @@
+process.env.NODE_ENV =
+  process.env.NODE_ENV ||
+  (process.env.npm_lifecycle_event.includes("start")
+    ? "development"
+    : "production");
+const Module = require("module").Module;
+function resolveFromMainContext(module) {
+  return Module._resolveFilename(module, require.main);
+}
+const { join, relative, resolve } = require("path");
+const HTMLPlugin = require.main.require("html-webpack-plugin");
+const { writeFileSync } = require("fs");
+const lodash = require("lodash");
+const { findPathDeep } = require("deepdash")(lodash);
+const chalk = require("chalk");
+
+function findAllStaticGeneration() {
+  const glob = require("glob");
+  const results = glob.sync("**/*.static.tsx", {
+    cwd: join(resolve("."), "src"),
+    absolute: true,
+  });
+
+  return results;
+}
+
+function parseResultsrToEntries(results) {
+  return results.reduce((entries, filePath) => {
+    const [_, fileName] = /[\\/]([^\\/]+).static.tsx/.exec(filePath);
+    entries[fileName] = filePath;
+    return entries;
+  }, {});
+}
+
+let configGenerator;
+async function loadGenerator() {
+  try {
+    configGenerator = require(resolve("./webpack-email-config-factory"));
+    return configGenerator(resolve("."), process.env.NODE_ENV);
+  } catch (e) {
+    switch (e.code) {
+      case "MODULE_NOT_FOUND":
+        const ans = await require("inquirer").prompt([
+          {
+            type: "confirm",
+            message:
+              "The email webpack config factory was not found. Would you like to create the file?",
+            name: "createFactory",
+            default: false,
+          },
+        ]);
+        if (ans.createFactory) {
+          writeFileSync(
+            "./webpack-email-config-factory.js",
+            `module.exports = function webpackConfigFactory(pathToRoot, environment) {
+  const config = /** Here you place the function that will create the base webpack config */;
+  const baseHtml = /** Here you place the path to the base html file */
+  return {
+    config,
+    baseHtml
+  }
+}`
+          );
+          console.log(require("chalk").green("File created"));
+        } else {
+          console.log(
+            require("chalk").yellow(
+              "This command will only work when there is a valid configuration"
+            )
+          );
+        }
+        process.exit(0);
+      default:
+        console.warn("An unexpected error has ocurred:", e);
+        process.exit(1);
+    }
+  }
+}
+
+function findFirstBabelLoaderConfigPath(config) {
+  const path = findPathDeep(config.module.rules, (v, k, par) => {
+    if (k === "loader" && typeof v === "string" && v.includes("babel-loader"))
+      return par;
+  });
+  return path.replace(".loader", "");
+}
+
+function prerenderRequire() {
+  try {
+    return resolveFromMainContext(
+      "@nettoolkit/prerender-loader" // This supports webpack 5
+    );
+  } catch (e) {
+    return resolveFromMainContext(
+      "prerender-loader" // This doesn't
+    );
+  }
+}
+
+function createConfig(
+  baseConfig,
+  mainHtml,
+  features = {
+    inlineCSS: true,
+  },
+  outputDir = join(resolve("."), "templates")
+) {
+  const results = findAllStaticGeneration();
+  const entries = parseResultsrToEntries(results);
+
+  baseConfig.entry = entries;
+  let resourcesPath = join(resolve("."), "build", "templates");
+  if (process.env.NODE_ENV === "production") {
+    baseConfig.output.path = resourcesPath;
+    baseConfig.output.publicPath =
+      (process.env.EMAIL_TEMPLATES_BASE_DOMAIN || "") + "/templates/";
+  } else {
+    baseConfig.output.publicPath = "/";
+  }
+
+  baseConfig.output.libraryTarget = "umd";
+  baseConfig.plugins = baseConfig.plugins.filter(
+    (a) =>
+      !["ManifestPlugin", "MiniCss"].find((pattern) =>
+        a.constructor.name.includes(pattern)
+      )
+  );
+  const babelLoaderPath = findFirstBabelLoaderConfigPath(baseConfig);
+  const babelLoader = lodash.get(baseConfig.module.rules, babelLoaderPath);
+  const indexOfOneOf = babelLoaderPath.indexOf("oneOf");
+  const whereToPlaceTheNewLoaderPath =
+    indexOfOneOf === -1
+      ? baseConfig.module.rules
+      : lodash.get(
+          baseConfig.module.rules,
+          babelLoaderPath.slice(0, indexOfOneOf + 5)
+        );
+
+  whereToPlaceTheNewLoaderPath.splice(1, 0, {
+    test: /\.static\.tsx/,
+    use: [
+      {
+        loader: babelLoader.loader,
+        options: babelLoader.options,
+      },
+      {
+        loader: join(__dirname, "loaders", "static-loader"),
+        options: {
+          features,
+        },
+      },
+    ],
+  });
+  const entryKeys = Object.keys(baseConfig.entry);
+  baseConfig.module.rules.unshift({
+    test: /\.svg$/,
+    use: [
+      {
+        loader: require.resolve(join(__dirname, "loaders", "svg-to-png.js")),
+        options: {
+          name: "static/media/[name].png",
+          resizeFactor: 10,
+        },
+      },
+    ],
+  });
+  entryKeys.map((i) => {
+    baseConfig.plugins.push(
+      new HTMLPlugin({
+        minify: false,
+        template:
+          process.env.NODE_ENV === "development"
+            ? mainHtml
+            : `!!${prerenderRequire()}?${JSON.stringify({
+                string: true,
+                documentUrl: `http://localhost/${i}.html`,
+                entry: relative(resolve("."), baseConfig.entry[i]),
+              })}!${mainHtml}`,
+        inject: process.env.NODE_ENV === "development",
+        filename:
+          process.env.NODE_ENV === "development"
+            ? `${i}.html`
+            : `${relative(resourcesPath, outputDir)}/${i}.html`,
+        excludeChunks: entryKeys
+          .filter((a) => a !== i)
+          .map((a) => {
+            return `${a}`;
+          }),
+        version: 5,
+      })
+    );
+  });
+
+  if (process.env.NODE_ENV === "production") {
+    const allLoadersThatContainMiniCSS = baseConfig.module.rules.filter((a) => {
+      return (
+        Array.isArray(a.use) &&
+        a.use.find((a) => (a.loader || a).includes("mini-css"))
+      );
+    });
+
+    allLoadersThatContainMiniCSS.forEach((l) => {
+      l.use[0] = require.resolve("style-loader");
+      l.use.splice(1, 0, join(__dirname, "loaders", "css-var-removal.js"));
+    });
+  }
+
+  if (!baseConfig.resolve.alias) baseConfig.resolve.alias = {};
+  baseConfig.resolve.alias.CSSInliner = require.resolve(
+    join(__dirname, "scripts", "css-inliner.ts")
+  );
+
+  baseConfig.output.filename = `[name].js`;
+
+  if (!baseConfig.optimization) baseConfig.optimization = {};
+  baseConfig.optimization.runtimeChunk = false;
+
+  baseConfig.plugins = baseConfig.plugins.filter(
+    (a) => a.constructor.name !== "ModuleFederationPlugin"
+  );
+  baseConfig.plugins.splice(0, 1);
+
+  return baseConfig;
+}
+
+function checkTemplatesCount(webpackEntry) {
+  if (Object.keys(webpackEntry).length === 0) {
+    console.log(
+      chalk.green(
+        `No templates were found. If you want to create a static template, please create a file with name ${chalk.white(
+          "{htmlName}.static.tsx"
+        )} (ex: some-template.static.tsx)`
+      )
+    );
+    process.exit(0);
+  }
+}
+
+module.exports = async function initEmailWebpack() {
+  const {
+    config: baseConfig,
+    mainHtml,
+    features,
+    outputDir,
+  } = await loadGenerator();
+  const config = createConfig(baseConfig, mainHtml, features, outputDir);
+  checkTemplatesCount(config.entry);
+  return config;
+};
+
+module.exports.checkTemplatesCount = checkTemplatesCount;

package/WebpackConfigs/email-templates.test.js

@@ -0,0 +1,53 @@
+jest.mock(
+  require("path").resolve("./webpack-email-config-factory"),
+  () => jest.fn(),
+  { virtual: true }
+);
+
+let logSpy;
+let processSpy;
+let promptSpy;
+beforeEach(() => {
+  jest.resetModules();
+  jest.clearAllMocks();
+  processSpy = jest.spyOn(process, "exit").mockImplementation(() => {});
+  promptSpy = jest
+    .spyOn(require("inquirer"), "prompt")
+    .mockImplementation(() => Promise.resolve());
+  logSpy = jest.spyOn(console, "log").mockImplementation(() => {});
+});
+
+it("Should generate the file correctly when using proprietary webpack config", async () => {
+  require(require("path").resolve(
+    "./webpack-email-config-factory"
+  )).mockImplementation((...args) => ({
+    config:
+      require("@muritavo/webpack-microfrontend-scripts/bin/react/scripts/_webpackConfiguration").createBaseConfiguration(
+        ...args
+      ),
+    baseHtml: "mock",
+  }));
+  await require("./email-templates")();
+});
+
+it.each(["development", "production"])(
+  "Should work when using a react-scripts config",
+  async (environment) => {
+    require(require("path").resolve(
+      "./webpack-email-config-factory"
+    )).mockImplementation(() => ({
+      config: require("react-scripts/config/webpack.config")(environment),
+    }));
+    await require("./email-templates")();
+  }
+);
+
+it("Should warn the user when there are no templates mapped", async () => {
+  require(require("path").resolve(
+    "./webpack-email-config-factory"
+  )).mockImplementation(() => ({
+    config: require("react-scripts/config/webpack.config")("development"),
+  }));
+  await require("./email-templates")();
+  expect(logSpy.mock.calls).toMatchSnapshot();
+});

package/WebpackConfigs/loaders/css-var-removal.js

@@ -0,0 +1,44 @@
+/**
+ * This loader works by removing the var calls by it's default value so they can be used on the email generation templates
+ */
+
+var allVarsContent = {};
+
+const extractVars = (cssContent) => {
+  let postProcessVars = {};
+  const cssVarDefRegex = /--([-a-zA-Z]+):([^;]+);/g;
+  let value = null;
+  do {
+    value = cssVarDefRegex.exec(cssContent);
+    if (value) {
+      const [_, varName, _varValue] = value;
+      const varValue = _varValue.trim();
+
+      if (varValue.startsWith("var(")) {
+        const [_, varNameDep] = /var\(([-a-zA-Z]+)/.exec(varValue);
+        postProcessVars[`--${varName}`] = varNameDep;
+      } else {
+        allVarsContent[`--${varName}`] = varValue.trim();
+      }
+    }
+  } while (value !== null);
+
+  Object.entries(postProcessVars).forEach(([varName, varNameDep]) => {
+    if (allVarsContent[varNameDep])
+      allVarsContent[varName] = allVarsContent[varNameDep];
+  });
+
+  return allVarsContent;
+};
+
+module.exports = (cssContent) => {
+  extractVars(cssContent);
+  return cssContent.replace(
+    /var\(([-a-zA-Z]+), ([^\)]+)\)/g,
+    (_, varName, defaultValue) => {
+      return allVarsContent[varName] || defaultValue;
+    }
+  );
+};
+
+module.exports.extractVars = extractVars;

package/WebpackConfigs/loaders/css-var-removal.test.ts

@@ -0,0 +1,17 @@
+const { extractVars } = require("./css-var-removal");
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+it("Should extract correct vars and values", () => {
+  const vars = extractVars(`--digital-blue: #6c4acc;--abc: var(--var-nao-definida);--var-nao-definida: red;`);
+
+  expect(vars).toEqual(
+    expect.objectContaining({
+      "--digital-blue": "#6c4acc",
+      "--var-nao-definida": "red",
+      "--abc": "red"
+    })
+  );
+});

package/WebpackConfigs/loaders/static-loader.js

@@ -0,0 +1,26 @@
+const { getOptions } = require("loader-utils");
+
+module.exports = function (content) {
+  const {
+    features: { inlineCSS },
+  } = getOptions(this);
+  content = content.replace("export default ", "");
+  const [_, functionName] = /function ([a-zA-Z]+)\(/.exec(content);
+  content = `import { render } from 'react-dom';
+import React from 'react';
+import InlineCSS from "CSSInliner";
+window.PRERENDER = window.PRERENDER || true
+
+${content}
+export default function Load() {
+return new Promise((r) => {
+    render(<${functionName}/>, document.body);
+    ${inlineCSS ? `InlineCSS();` : ""}
+    r();
+})
+}
+
+  ${process.env.NODE_ENV === "development" ? "Load()" : ""}`;
+
+  return content;
+};

package/WebpackConfigs/loaders/svg-to-png.js

@@ -0,0 +1,170 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = _default;
+
+var loaderUtils = _interopRequireWildcard(require("loader-utils"));
+
+var _path = _interopRequireDefault(require("path"));
+
+var _sharp = _interopRequireDefault(require("sharp"));
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+
+function _getRequireWildcardCache() {
+  if (typeof WeakMap !== "function") return null;
+  var cache = new WeakMap();
+  _getRequireWildcardCache = function () {
+    return cache;
+  };
+  return cache;
+}
+
+function _interopRequireWildcard(obj) {
+  if (obj && obj.__esModule) {
+    return obj;
+  }
+  if (obj === null || (typeof obj !== "object" && typeof obj !== "function")) {
+    return { default: obj };
+  }
+  var cache = _getRequireWildcardCache();
+  if (cache && cache.has(obj)) {
+    return cache.get(obj);
+  }
+  var newObj = {};
+  var hasPropertyDescriptor =
+    Object.defineProperty && Object.getOwnPropertyDescriptor;
+  for (var key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      var desc = hasPropertyDescriptor
+        ? Object.getOwnPropertyDescriptor(obj, key)
+        : null;
+      if (desc && (desc.get || desc.set)) {
+        Object.defineProperty(newObj, key, desc);
+      } else {
+        newObj[key] = obj[key];
+      }
+    }
+  }
+  newObj.default = obj;
+  if (cache) {
+    cache.set(obj, newObj);
+  }
+  return newObj;
+}
+
+const prepareSizes = (options) => {
+  const result = [
+    options.height
+      ? [
+          {
+            height: options.height,
+            width: options.width || options.height,
+          },
+        ]
+      : (options.sizes || [])
+          .map((val) => val.trim())
+          .map((val) => [val, /([0-9]+)([x,])?([0-9]+)?/.exec(val)])
+          .map((val) => val[1])
+          .map((val) => ({
+            height: val[1],
+            width: val[3] || val[1],
+          })),
+  ][0];
+
+  if (result.length === 0) {
+    return [
+      {
+        width: -1,
+        height: -1,
+      },
+    ];
+  }
+
+  return result.map((size) => ({
+    width: parseInt(`${size.width || 1}`),
+    height: parseInt(`${size.height || 1}`),
+  }));
+};
+
+function _default(content) {
+  const options = Object.assign(
+    {},
+    loaderUtils.getOptions(this),
+    loaderUtils.parseQuery(this.resourceQuery || "?")
+  );
+  const context = options.context || this.rootContext;
+  const callback = this.async();
+  options.resizeFactor = options.resizeFactor || 1;
+  options.name = options.name || "[contenthash].png";
+  options.name = options.name.replace(
+    "[name]",
+    _path.default.basename(this.resourcePath).replace(/\..*$/, "")
+  );
+  let outputPathBase = loaderUtils.interpolateName(this, options.name, {
+    context,
+    content,
+    regExp: options.regExp,
+  });
+
+  if (options.outputPath) {
+    outputPathBase = _path.default.join(options.outputPath, outputPathBase);
+  }
+
+  Promise.all(
+    prepareSizes(options).map((size) => {
+      return new Promise((resolve, reject) => {
+        let sharpInst = (0, _sharp.default)(this.resourcePath); // Do conversion
+
+        if (size.width > -1 && size.height > -1) {
+          sharpInst = sharpInst.resize(
+            size.width * options.resizeFactor,
+            size.height * options.resizeFactor
+          );
+        }
+
+        sharpInst
+          .sharpen()
+          .png({
+            compressionLevel: 0,
+            dither: 0,
+            progressive: true,
+          })
+          .toBuffer((err, data, info) => {
+            if (err) {
+              reject(err);
+            } else {
+              const finalSize = {
+                height: info.height,
+                width: info.width,
+              }; // Determine webpack output path
+
+              const outputPath = outputPathBase.replace(
+                /\[([^\]]+)]/g,
+                (match) => {
+                  match = match.replace(/^\[|]$/g, "");
+                  return finalSize[match] || finalSize[match] === 0
+                    ? finalSize[match]
+                    : match;
+                }
+              );
+              this.emitFile(outputPath, data);
+              resolve({
+                size: finalSize,
+                outputPath,
+              });
+            }
+          });
+      });
+    })
+  )
+    .then((results) => {
+      let output = `module.exports = __webpack_public_path__ + "${results[0].outputPath}";`;
+      callback(null, output);
+    })
+    .catch((error) => {
+      callback(error);
+    });
+}

package/WebpackConfigs/scripts/css-inliner.ts

@@ -0,0 +1,24 @@
+export default function inlineCSS() {
+  if (process.env.NODE_ENV === "development") return;
+  const allEls = Array.from(document.querySelectorAll("*")) as HTMLElement[];
+  const elstyles: [HTMLElement, string][] = [];
+
+  // First read the styles of each element
+  allEls.forEach((el) => {
+    const styles = window.getComputedStyle(el);
+
+    const inlined = Array.from(styles)
+      .map((k) => `${k}: ${styles.getPropertyValue(k)}`)
+      .join("; ")
+      .concat(";");
+    if (inlined !== ";") elstyles.push([el, inlined]);
+  });
+
+  // Then write it to the styles, so the update of previous elements does not affect the generation
+  elstyles.forEach(([el, s]) => {
+    el.setAttribute("style", s);
+  });
+
+  if (process.env.NODE_ENV !== "test")
+    document.querySelectorAll("style").forEach((e) => e.remove());
+}

package/dist/__test__/utils.d.ts

@@ -0,0 +1 @@
+export declare function WaitTimeout(ml?: number): Promise<void>;

package/dist/__test__/utils.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WaitTimeout = void 0;
+function WaitTimeout(ml = 200) {
+    return new Promise((r) => {
+        setTimeout(() => {
+            r();
+        }, ml);
+        if (jest.isMockFunction(setTimeout))
+            jest.advanceTimersByTime(ml);
+    });
+}
+exports.WaitTimeout = WaitTimeout;
+//# sourceMappingURL=utils.js.map

package/dist/__test__/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/__test__/utils.ts"],"names":[],"mappings":";;;AAAA,SAAgB,WAAW,CAAC,EAAE,GAAG,GAAG;IAClC,OAAO,IAAI,OAAO,CAAO,CAAC,CAAC,EAAE,EAAE;QAC7B,UAAU,CAAC,GAAG,EAAE;YACd,CAAC,EAAE,CAAC;QACN,CAAC,EAAE,EAAE,CAAC,CAAC;QACP,IAAI,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC;YAAE,IAAI,CAAC,mBAAmB,CAAC,EAAE,CAAC,CAAC;IACpE,CAAC,CAAC,CAAC;AACL,CAAC;AAPD,kCAOC"}

package/dist/assets/img/svg/checkbox.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-7 -7 38 38">
+    <path style="stroke: #EDEDED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3px" fill="none" d="M22.9 3.7l-15.2 16.6-6.6-7.1" />
+</svg>

package/dist/assets/styles/index.scss

@@ -0,0 +1,2 @@
+@import "./variables.scss";
+@import "./mixins.scss";

package/dist/assets/styles/mixins.scss

@@ -0,0 +1,12 @@
+@mixin iteractibleElement() {
+  & {
+    cursor: pointer;
+    transition: transform $fast;
+  }
+  &:hover {
+    transform: scale(1.2);
+  }
+  &:active {
+    transform: scale(1.1);
+  }
+}

package/dist/assets/styles/variables.scss

@@ -0,0 +1,49 @@
+$digitalBlue: var(--digital-blue, #558eff);
+$mediumGray: var(--medium-gray, #bababa);
+$lightGray: var(--light-gray, #d6d6d6);
+$spaceBlue: var(--space-blue, #0f113a);
+$warningRed: var(--warning-red, #e84b4b);
+$sunsetPink: var(--sunset-pink, #ff3e7d);
+$darkestGray: var(--darkest-gray, #727272);
+$gray: var(--gray, #0f113a);
+$success: var(--success, lightgreen);
+$mainBackgroundColor: var(--bg-color, white);
+
+//FONTS
+$mainFontFamily: var(--main-font, Roboto);
+$secondaryFontFamily: var(--second-font, Manrope);
+
+// Component specific variables on the format --<component>-<element>-<category>
+$headerFillBackgroundColor: var(--header-background-color, $digitalBlue);
+$headerBackgroundColor: var(--header-divider-bg-color, #467eea);
+$headerTextColor: var(--header-text-color, #94b8ff);
+$headerBrightColor: var(--header-bright-color, white);
+
+$tableRowBgColor: var(--table-row-bg-color, white);
+$tableRowBorderColor: var(--table-row-border-color, #bec1ca);
+
+$buttonMinHeight: var(--button-min-height, 62px);
+$buttonMinWidth: var(--button-min-width, 150px);
+
+$tooltipBackgroudColor: var(--tooltip-background-color, $digitalBlue);
+
+$checkboxBaseColor: var(--checkbox-base-color, $digitalBlue);
+
+$textDefaultColor: var(--text-default-color, $digitalBlue);
+
+$buttonPrimaryBackgroundColor: var(--button-primary-bg-color, #1e22aa);
+
+$fileInputBackgroundColor: var(--file-input-bg-color, #f2f6f7);
+$fileInputBorderColor: var(--file-input-border-color, #dce1e8);
+
+$avatarBackgroundColor: var(--avatar-bg-color, $lightGray);
+
+$pixelatedGuideBackground: var(--pixelated-scan-bg, var(--digital-blue));
+
+// Animation speed variables
+$almostInstant: var(--animation--speed-almostInstant, 50ms);
+$veryFast: var(--animation--speed-veryfast, 125ms);
+$fast: var(--animation--speed-fast, 250ms);
+$normal: var(--animation--speed-normal, 500ms);
+$slow: var(--animation--speed-slow, 1s);
+$verySlow: var(--animation--speed-veryslow, 2s);