Feature/logo building

.eslintrc.js

@@ -12,4 +12,13 @@ module.exports = {
     // this was disabled already in all the logo files
     "flowtype/require-exact-type": "off",
   },
+  overrides: [
+    {
+      files: ["scripts/*"],
+      rules: {
+        "flowtype/require-valid-file-annotation": "off",
+        "no-sync": "off",
+      },
+    },
+  ],
 };

.github/workflows/publish.yml

@@ -25,6 +25,10 @@ jobs:
         run: |
           git config --global user.email ${{ github.actor }}@users.noreply.github.com
           git config --global user.name ${{ github.actor }}
+
+      - name: Update cdn folder with new svg files
+        run: npm run build-logos -- --commit
+
       - name: Publish to npm
         run: npm run release
         env:

.nodeops

@@ -0,0 +1,8 @@
+{
+  "PROJECT_TYPE": "front-tier",
+  "web": {
+    "projectName": "@paypal/sdk-logos",
+    "staticDirectory": "cdn",
+    "staticNamespace": "js-sdk-logos"
+  }
+}

package.json

@@ -21,7 +21,8 @@
     "clean": "rimraf dist coverage",
     "reinstall": "rimraf flow-typed && rimraf node_modules && npm install && flow-typed install",
     "debug": "cross-env NODE_ENV=debug",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "build-logos": "babel-node --config-file './scripts/babel.config.json' --ignore ./fake --plugins=transform-es2015-modules-commonjs ./scripts/buildLogos.js"
   },
   "standard-version": {
     "types": [
@@ -95,7 +96,8 @@
     "lint-staged": "^13.0.3",
     "mocha": "9.2.0",
     "prettier": "2.7.1",
-    "standard-version": "^9.5.0"
+    "standard-version": "^9.5.0",
+    "zx": "^4.3.0"
   },
   "dependencies": {
     "@paypal/sdk-constants": "^1.0.128",

scripts/babel.config.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@krakenjs/babel-config-grumbler/babelrc-node"
+}

scripts/buildLogos.js

@@ -0,0 +1,170 @@
+/* @flow */
+
+import fs from "fs-extra";
+import { $ } from "zx";
+import { html } from "@krakenjs/jsx-pragmatic";
+
+import { getSVGFilename } from "../src/lib";
+import { LOGO } from "../src/constants";
+import {
+  APPLEPAY_LOGO_COLORS,
+  BANCONTACT_LOGO_COLORS,
+  BLIK_LOGO_COLORS,
+  BOLETO_LOGO_COLORS,
+  EPS_LOGO_COLORS,
+  getApplepaySVG,
+  getBancontactSVG,
+  getBlikSVG,
+  getBoletoSVG,
+  getEpsSVG,
+  getGiropaySVG,
+  getIdealSVG,
+  getItauSVG,
+  getMaximaSVG,
+  getMercadoPagoSVG,
+  getMultibancoSVG,
+  getMybankSVG,
+  getOxxoSVG,
+  getP24SVG,
+  getPaidySVG,
+  getPayuSVG,
+  getSatispaySVG,
+  getSepaSVG,
+  getSofortSVG,
+  getTrustlySVG,
+  getVerkkopankkiSVG,
+  getWechatpaySVG,
+  getZimplerSVG,
+  GIROPAY_LOGO_COLORS,
+  IDEAL_LOGO_COLORS,
+  ITAU_LOGO_COLORS,
+  MAXIMA_LOGO_COLORS,
+  MERCADOPAGO_LOGO_COLORS,
+  MULTIBANCO_LOGO_COLORS,
+  MYBANK_LOGO_COLORS,
+  OXXO_LOGO_COLORS,
+  P24_LOGO_COLORS,
+  PAIDY_LOGO_COLORS,
+  PAYU_LOGO_COLORS,
+  SATISPAY_LOGO_COLORS,
+  SEPA_LOGO_COLORS,
+  SOFORT_LOGO_COLORS,
+  TRUSTLY_LOGO_COLORS,
+  VERKKOPANKKI_LOGO_COLORS,
+  WECHATPAY_LOGO_COLORS,
+  ZIMPLER_LOGO_COLORS,
+} from "../src/logos";
+import { version } from "../package.json";
+
+import { getNodeOps, updateCDNUrl } from "./utils";
+
+const LOGO_GETTERS = {
+  [LOGO.APPLEPAY]: getApplepaySVG,
+  [LOGO.BANCONTACT]: getBancontactSVG,
+  [LOGO.BLIK]: getBlikSVG,
+  [LOGO.BOLETO]: getBoletoSVG,
+  [LOGO.EPS]: getEpsSVG,
+  [LOGO.GIROPAY]: getGiropaySVG,
+  [LOGO.IDEAL]: getIdealSVG,
+  [LOGO.ITAU]: getItauSVG,
+  [LOGO.MAXIMA]: getMaximaSVG,
+  [LOGO.MERCADOPAGO]: getMercadoPagoSVG,
+  [LOGO.MULTIBANCO]: getMultibancoSVG,
+  [LOGO.MYBANK]: getMybankSVG,
+  [LOGO.OXXO]: getOxxoSVG,
+  [LOGO.P24]: getP24SVG,
+  [LOGO.PAIDY]: getPaidySVG,
+  [LOGO.PAYU]: getPayuSVG,
+  [LOGO.SATISPAY]: getSatispaySVG,
+  [LOGO.SEPA]: getSepaSVG,
+  [LOGO.SOFORT]: getSofortSVG,
+  [LOGO.TRUSTLY]: getTrustlySVG,
+  [LOGO.VERKKOPANKKI]: getVerkkopankkiSVG,
+  [LOGO.WECHATPAY]: getWechatpaySVG,
+  [LOGO.ZIMPLER]: getZimplerSVG,
+};
+
+const LOGO_COLOR_MAPS = {
+  [LOGO.APPLEPAY]: APPLEPAY_LOGO_COLORS,
+  [LOGO.BANCONTACT]: BANCONTACT_LOGO_COLORS,
+  [LOGO.BLIK]: BLIK_LOGO_COLORS,
+  [LOGO.BOLETO]: BOLETO_LOGO_COLORS,
+  [LOGO.EPS]: EPS_LOGO_COLORS,
+  [LOGO.GIROPAY]: GIROPAY_LOGO_COLORS,
+  [LOGO.IDEAL]: IDEAL_LOGO_COLORS,
+  [LOGO.ITAU]: ITAU_LOGO_COLORS,
+  [LOGO.MAXIMA]: MAXIMA_LOGO_COLORS,
+  [LOGO.MERCADOPAGO]: MERCADOPAGO_LOGO_COLORS,
+  [LOGO.MULTIBANCO]: MULTIBANCO_LOGO_COLORS,
+  [LOGO.MYBANK]: MYBANK_LOGO_COLORS,
+  [LOGO.OXXO]: OXXO_LOGO_COLORS,
+  [LOGO.P24]: P24_LOGO_COLORS,
+  [LOGO.PAIDY]: PAIDY_LOGO_COLORS,
+  [LOGO.PAYU]: PAYU_LOGO_COLORS,
+  [LOGO.SATISPAY]: SATISPAY_LOGO_COLORS,
+  [LOGO.SEPA]: SEPA_LOGO_COLORS,
+  [LOGO.SOFORT]: SOFORT_LOGO_COLORS,
+  [LOGO.TRUSTLY]: TRUSTLY_LOGO_COLORS,
+  [LOGO.VERKKOPANKKI]: VERKKOPANKKI_LOGO_COLORS,
+  [LOGO.WECHATPAY]: WECHATPAY_LOGO_COLORS,
+  [LOGO.ZIMPLER]: ZIMPLER_LOGO_COLORS,
+};
+
+async function buildLogos() {
+  let shouldCommit = false;
+
+  if (process.argv.includes("--commit")) {
+    shouldCommit = true;
+  }
+
+  if (!version) {
+    throw new Error(`Package version required`);
+  }
+
+  const cdnNamespace = getNodeOps().web.staticNamespace;
+
+  if (!cdnNamespace) {
+    throw new Error(`CDN namespace required`);
+  }
+
+  if (cdnNamespace !== "js-sdk-logos") {
+    throw new Error("Expected cdnNamespace to be js-sdk-logos");
+  }
+
+  // updates CDN URL in src/constants.js with package version
+  updateCDNUrl(version);
+
+  const outdir = `cdn/${version}`;
+
+  await $`mkdir -p ${outdir}`;
+
+  const logoPromises = [];
+
+  for (const logoName of Object.keys(LOGO_GETTERS)) {
+    const logoGetter = LOGO_GETTERS[logoName];
+    const logoColorMap = LOGO_COLOR_MAPS[logoName];
+
+    for (const [colorName, logoColors] of Object.entries(logoColorMap)) {
+      // $FlowFixMe
+      const svg = logoGetter(logoColors);
+
+      // $FlowFixMe
+      const filename = getSVGFilename(logoName, colorName);
+      const filepath = `${outdir}/${filename}`;
+
+      // $FlowFixMe
+      logoPromises.push(fs.writeFile(filepath, svg.render(html())));
+    }
+  }
+
+  // eslint-disable-next-line no-restricted-globals,compat/compat,promise/no-native
+  await Promise.all(logoPromises);
+
+  if (shouldCommit) {
+    await $`git add cdn src/constants.js`;
+    await $`git commit -m "chore: generate CDN packages"`;
+    await $`git push`;
+  }
+}
+
+buildLogos();

scripts/utils.js

@@ -0,0 +1,30 @@
+/* @flow */
+
+// eslint-disable-next-line import/no-nodejs-modules
+import fs from "fs";
+
+type NodeOps = {|
+  web: {|
+    staticNamespace: string,
+  |},
+|};
+
+export function getNodeOps(): NodeOps {
+  if (!fs.existsSync("./.nodeops")) {
+    throw new Error(`Node Ops file not found`);
+  }
+  return JSON.parse(fs.readFileSync("./.nodeops", "utf-8"));
+}
+
+export function updateCDNUrl(packageVersion: string) {
+  const filepath = "src/constants.js";
+
+  let constantsFile = fs.readFileSync(filepath, "utf-8");
+
+  constantsFile = constantsFile.replace(
+    /const PACKAGE_VERSION = ".*";/,
+    `const PACKAGE_VERSION = "${packageVersion}";`
+  );
+
+  fs.writeFileSync(filepath, constantsFile);
+}

src/constants.js

@@ -47,3 +47,6 @@ export const LOGO_CLASS = {
   CARD: ("paypal-logo-card": "paypal-logo-card"),
   LOGO_COLOR: ("paypal-logo-color": "paypal-logo-color"),
 };
+
+const PACKAGE_VERSION = "2.1.1";
+export const CDN_BASE_URL = `https://www.paypalobjects.com/js-sdk-logos/${PACKAGE_VERSION}`;

src/lib/components.jsx

@@ -13,11 +13,19 @@ import { LOGO_CLASS, LOGO_COLOR } from "../constants";
 
 type SVGProps = {|
   svg: ElementNode,
+  cdnUrl?: string,
+  loadFromCDN?: boolean,
   [key: string]: mixed,
 |};
 
 export function SVG(props: SVGProps): ElementNode {
-  let { svg, ...otherProps } = props;
+  let { svg, cdnUrl, loadFromCDN, ...otherProps } = props;
+
+  if (loadFromCDN && cdnUrl) {
+    // $FlowFixMe
+    const svgProps: SVGProps = { src: cdnUrl, ...otherProps };
+    return <img {...svgProps} />;
+  }
 
   if (!svg) {
     throw new TypeError(`Expected svg prop`);
@@ -42,6 +50,8 @@ export type SVGLogoProps = {
   render: () => ElementNode,
   name: string,
   logoColor?: $Values<typeof LOGO_COLOR>,
+  cdnUrl?: string,
+  loadFromCDN?: boolean,
 };
 
 export function SVGLogo({

src/lib/util.js

@@ -1,6 +1,6 @@
 /* @flow */
 
-import { LOGO_COLOR } from "../constants";
+import { CDN_BASE_URL, LOGO, LOGO_COLOR } from "../constants";
 import type { LogoColorMap, LogoColors } from "../types";
 
 export function getLogoColors(
@@ -26,3 +26,24 @@ export function getLogoColors(
 
   return colors;
 }
+
+export function getSVGFilename(
+  logoName: $Values<typeof LOGO>,
+  logoColor: $Values<typeof LOGO_COLOR>
+): string {
+  return `${logoName}-${logoColor}.svg`;
+}
+
+export function getLogoCDNUrl(
+  logoName: $Values<typeof LOGO>,
+  logoColorMap: LogoColorMap,
+  logoColor: $Values<typeof LOGO_COLOR>
+): string {
+  if (!logoColorMap[logoColor]) {
+    logoColor = LOGO_COLOR.DEFAULT;
+  }
+
+  const svgFilename = getSVGFilename(logoName, logoColor);
+
+  return `${CDN_BASE_URL}/${svgFilename}`;
+}