From 42185983248caa28b00ffe13fed65fcf8be2d90c Mon Sep 17 00:00:00 2001 From: Dustin Jones Date: Thu, 5 Jan 2023 17:51:59 -0500 Subject: [PATCH 01/13] feat: create ugly but mostly functional buld script --- .eslintrc.js | 9 +++ .nodeops | 8 +++ package.json | 8 ++- scripts/babel.config.json | 3 + scripts/buildLogos.js | 45 ++++++++++++++ scripts/utils.js | 36 ++++++++++++ src/lib/components.jsx | 9 ++- src/lib/util.js | 25 +++++++- src/logos/ideal/logo.jsx | 119 ++++++++++++++++++++------------------ src/types.js | 8 +++ 10 files changed, 209 insertions(+), 61 deletions(-) create mode 100644 .nodeops create mode 100644 scripts/babel.config.json create mode 100644 scripts/buildLogos.js create mode 100644 scripts/utils.js diff --git a/.eslintrc.js b/.eslintrc.js index d437d82..0151cac 100644 --- a/.eslintrc.js +++ b/.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", + }, + }, + ], }; diff --git a/.nodeops b/.nodeops new file mode 100644 index 0000000..2f3bf2f --- /dev/null +++ b/.nodeops @@ -0,0 +1,8 @@ +{ + "PROJECT_TYPE": "front-tier", + "web": { + "projectName": "@paypal/sdk-logos", + "staticDirectory": "cdn", + "staticNamespace": "js-sdk-logos" + } +} diff --git a/package.json b/package.json index 79a7e78..44637fd 100644 --- a/package.json +++ b/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": [ @@ -86,16 +87,19 @@ "devDependencies": { "@commitlint/cli": "^17.1.2", "@commitlint/config-conventional": "^17.1.0", + "@krakenjs/grabthar-release": "^3.8.0", "@krakenjs/grumbler-scripts": "^8.0.4", "cross-env": "^7.0.3", "flow-bin": "0.155.0", "flow-typed": "^3.8.0", + "fs-extra": "^11.1.0", "husky": "^8.0.1", "jest": "^29.3.0", "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", diff --git a/scripts/babel.config.json b/scripts/babel.config.json new file mode 100644 index 0000000..5227cd7 --- /dev/null +++ b/scripts/babel.config.json @@ -0,0 +1,3 @@ +{ + "extends": "@krakenjs/babel-config-grumbler/babelrc-node" +} diff --git a/scripts/buildLogos.js b/scripts/buildLogos.js new file mode 100644 index 0000000..8170f67 --- /dev/null +++ b/scripts/buildLogos.js @@ -0,0 +1,45 @@ +/* @flow */ + +import fs from "fs-extra"; +import { $ } from "zx"; +import { html } from "@krakenjs/jsx-pragmatic"; + +// eslint-disable-next-line import/no-namespace +import * as logos from "../src/logos"; + +import { getPackage, getSVGFilename } from "./utils"; + +async function buildLogos() { + const version = getPackage().version; + + if (!version) { + throw new Error(`Package version required`); + } + + const outdir = `cdn/${version}`; + + await $`mkdir -p ${outdir}`; + + const logoPromises = []; + + for (const [name, value] of Object.entries(logos)) { + if (!name.includes("SVGs")) { + continue; + } + + // $FlowFixMe + for (const [logoColor, svg] of Object.entries(value())) { + // $FlowFixMe + const filename = getSVGFilename(name, logoColor); + 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); +} + +buildLogos(); diff --git a/scripts/utils.js b/scripts/utils.js new file mode 100644 index 0000000..e8101d1 --- /dev/null +++ b/scripts/utils.js @@ -0,0 +1,36 @@ +/* @flow */ + +import fs from "fs-extra"; +import { LOGO_COLOR } from "../src/constants"; + +type Package = {| + name: string, + version: string, +|}; + +type NodeOps = {| + web: {| + staticNamespace: string, + |}, +|}; + +export function getPackage(): Package { + if (!fs.existsSync("./package.json")) { + throw new Error(`Package file not found`); + } + return JSON.parse(fs.readFileSync("./package.json", "utf-8")); +} + +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 getSVGFilename( + name: string, + logoColor: $Values +): string { + return `${name}-${logoColor}.svg`; +} diff --git a/src/lib/components.jsx b/src/lib/components.jsx index cf8d5f7..b1f890e 100644 --- a/src/lib/components.jsx +++ b/src/lib/components.jsx @@ -13,11 +13,18 @@ import { LOGO_CLASS, LOGO_COLOR } from "../constants"; type SVGProps = {| svg: ElementNode, + cdnUrl?: string, [key: string]: mixed, |}; export function SVG(props: SVGProps): ElementNode { - let { svg, ...otherProps } = props; + let { svg, cdnUrl, ...otherProps } = props; + + if (cdnUrl) { + // $FlowFixMe + const svgProps: SVGProps = { src: cdnUrl, ...otherProps }; + return ; + } if (!svg) { throw new TypeError(`Expected svg prop`); diff --git a/src/lib/util.js b/src/lib/util.js index 705a659..6ca17cb 100644 --- a/src/lib/util.js +++ b/src/lib/util.js @@ -1,7 +1,12 @@ /* @flow */ -import { LOGO_COLOR } from "../constants"; -import type { LogoColorMap, LogoColors } from "../types"; +import { LOGO, LOGO_COLOR } from "../constants"; +import type { + LogoColorMap, + LogoColors, + LogoColorSVGMap, + SVGGetter, +} from "../types"; export function getLogoColors( name: string, @@ -26,3 +31,19 @@ export function getLogoColors( return colors; } + +export function getSVGs( + logoName: $Values, + svgGetter: SVGGetter, + logoColorMap: LogoColorMap +): LogoColorSVGMap { + const svgs = {}; + + for (const logoColor of Object.keys(logoColorMap)) { + const logoColors = getLogoColors(logoName, logoColorMap, logoColor); + + svgs[logoColor] = svgGetter(logoColors); + } + + return svgs; +} diff --git a/src/logos/ideal/logo.jsx b/src/logos/ideal/logo.jsx index e1379c7..515cd81 100644 --- a/src/logos/ideal/logo.jsx +++ b/src/logos/ideal/logo.jsx @@ -3,9 +3,9 @@ import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { getSVGs, SVGLogo, type SVGLogoProps } from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColorMap, LogoColorSVGMap } from "../../types"; const LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { @@ -22,72 +22,79 @@ const LOGO_COLORS: LogoColorMap = { }, }; +const svgGetter = ({ primary, secondary }) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export const getIdealSVGs = (): LogoColorSVGMap => + getSVGs(LOGO.IDEAL, svgGetter, LOGO_COLORS); + export function IdealLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary, secondary } = getLogoColors( - LOGO.IDEAL, - LOGO_COLORS, - logoColor - ); + const CDN_URL = + "https://www.paypalobjects.com/images/checkout/latinum/Altpay_logo_iDEAL.svg"; + + const svg = getIdealSVGs()[logoColor]; return ( { - return ( - - - - - - - - - - - - - - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/types.js b/src/types.js index 076a3aa..cc69ba9 100644 --- a/src/types.js +++ b/src/types.js @@ -1,5 +1,7 @@ /* @flow */ +import { ElementNode } from "@krakenjs/jsx-pragmatic/src"; + import { LOGO_COLOR } from "./constants"; export type LogoColors = { @@ -9,3 +11,9 @@ export type LogoColors = { export type LogoColorMap = { [$Values]: LogoColors, }; + +export type LogoColorSVGMap = { + [$Values]: ElementNode, +}; + +export type SVGGetter = (LogoColors) => ElementNode; From cdcf8285a4e74ecdb45669f550f86ad7d384f5d1 Mon Sep 17 00:00:00 2001 From: prashantjagasia <108553844+prashantjagasia@users.noreply.github.com> Date: Fri, 27 Jan 2023 12:36:36 -0800 Subject: [PATCH 02/13] feat: added flag for optional commiting. (#86) * feat: flag for committing * feat: adding cdn/2.2.0-alpha.1 * chore: added commit variable and adressed review comments * chore: addressing PR comments * chore: dropped -a flag * chore: updated commit to a chore * feat: updated workflow to run buildscript --- .github/workflows/publish.yml | 4 ++++ cdn/2.2.0-alpha.1/getIdealSVGs-black.svg | 1 + cdn/2.2.0-alpha.1/getIdealSVGs-default.svg | 1 + cdn/2.2.0-alpha.1/getIdealSVGs-white.svg | 1 + scripts/buildLogos.js | 12 ++++++++++++ 5 files changed, 19 insertions(+) create mode 100644 cdn/2.2.0-alpha.1/getIdealSVGs-black.svg create mode 100644 cdn/2.2.0-alpha.1/getIdealSVGs-default.svg create mode 100644 cdn/2.2.0-alpha.1/getIdealSVGs-white.svg diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 63b7163..59a7c5b 100644 --- a/.github/workflows/publish.yml +++ b/.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: Run buildLogos script + run: npm run build-logos -- --commit + - name: Publish to npm run: npm run release env: diff --git a/cdn/2.2.0-alpha.1/getIdealSVGs-black.svg b/cdn/2.2.0-alpha.1/getIdealSVGs-black.svg new file mode 100644 index 0000000..1f2ce73 --- /dev/null +++ b/cdn/2.2.0-alpha.1/getIdealSVGs-black.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cdn/2.2.0-alpha.1/getIdealSVGs-default.svg b/cdn/2.2.0-alpha.1/getIdealSVGs-default.svg new file mode 100644 index 0000000..1f2ce73 --- /dev/null +++ b/cdn/2.2.0-alpha.1/getIdealSVGs-default.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cdn/2.2.0-alpha.1/getIdealSVGs-white.svg b/cdn/2.2.0-alpha.1/getIdealSVGs-white.svg new file mode 100644 index 0000000..1f2ce73 --- /dev/null +++ b/cdn/2.2.0-alpha.1/getIdealSVGs-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/scripts/buildLogos.js b/scripts/buildLogos.js index 8170f67..d39d80c 100644 --- a/scripts/buildLogos.js +++ b/scripts/buildLogos.js @@ -12,6 +12,12 @@ import { getPackage, getSVGFilename } from "./utils"; async function buildLogos() { const version = getPackage().version; + let shouldCommit = false; + + if (process.argv.includes("--commit")) { + shouldCommit = true; + } + if (!version) { throw new Error(`Package version required`); } @@ -40,6 +46,12 @@ async function buildLogos() { // eslint-disable-next-line no-restricted-globals,compat/compat,promise/no-native await Promise.all(logoPromises); + + if (shouldCommit) { + await $`git add cdn`; + await $`git commit -m "chore: generate CDN packages"`; + await $`git push`; + } } buildLogos(); From 60aec4778a0b1c33a340fae2558b71547dc73c2a Mon Sep 17 00:00:00 2001 From: Dustin Jones Date: Fri, 27 Jan 2023 16:42:23 -0500 Subject: [PATCH 03/13] feat: enable serving SVGs from CDN --- cdn/2.2.0-alpha.1/getIdealSVGs-black.svg | 1 - cdn/2.2.0-alpha.1/getIdealSVGs-default.svg | 1 - cdn/2.2.0-alpha.1/getIdealSVGs-white.svg | 1 - scripts/buildLogos.js | 123 ++++- scripts/utils.js | 8 - src/constants.js | 3 + src/lib/components.jsx | 7 +- src/lib/util.js | 34 +- src/logos/applepay/logo.jsx | 53 +- src/logos/bancontact/logo.jsx | 126 +++-- src/logos/blik/logo.jsx | 177 +++--- src/logos/boleto/logo.jsx | 59 +- src/logos/eps/logo.jsx | 229 ++++---- src/logos/giropay/logo.jsx | 183 ++++--- src/logos/ideal/logo.jsx | 35 +- src/logos/itau/logo.jsx | 273 ++++----- src/logos/maxima/logo.jsx | 171 +++--- src/logos/mercadopago/logo.jsx | 258 +++++---- src/logos/multibanco/logo.jsx | 220 ++++---- src/logos/mybank/logo.jsx | 154 +++--- src/logos/oxxo/logo.jsx | 109 ++-- src/logos/p24/logo.jsx | 229 ++++---- src/logos/paidy/logo.jsx | 195 ++++--- src/logos/payu/logo.jsx | 67 ++- src/logos/satispay/logo.jsx | 73 ++- src/logos/sepa/logo.jsx | 201 +++---- src/logos/sofort/logo.jsx | 102 ++-- src/logos/trustly/logo.jsx | 143 ++--- src/logos/verkkopankki/logo.jsx | 609 +++++++++++---------- src/logos/wechatpay/logo.jsx | 172 +++--- src/logos/zimpler/logo.jsx | 67 ++- src/types.js | 8 - 32 files changed, 2280 insertions(+), 1811 deletions(-) delete mode 100644 cdn/2.2.0-alpha.1/getIdealSVGs-black.svg delete mode 100644 cdn/2.2.0-alpha.1/getIdealSVGs-default.svg delete mode 100644 cdn/2.2.0-alpha.1/getIdealSVGs-white.svg diff --git a/cdn/2.2.0-alpha.1/getIdealSVGs-black.svg b/cdn/2.2.0-alpha.1/getIdealSVGs-black.svg deleted file mode 100644 index 1f2ce73..0000000 --- a/cdn/2.2.0-alpha.1/getIdealSVGs-black.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/cdn/2.2.0-alpha.1/getIdealSVGs-default.svg b/cdn/2.2.0-alpha.1/getIdealSVGs-default.svg deleted file mode 100644 index 1f2ce73..0000000 --- a/cdn/2.2.0-alpha.1/getIdealSVGs-default.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/cdn/2.2.0-alpha.1/getIdealSVGs-white.svg b/cdn/2.2.0-alpha.1/getIdealSVGs-white.svg deleted file mode 100644 index 1f2ce73..0000000 --- a/cdn/2.2.0-alpha.1/getIdealSVGs-white.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/scripts/buildLogos.js b/scripts/buildLogos.js index d39d80c..e0e5d0d 100644 --- a/scripts/buildLogos.js +++ b/scripts/buildLogos.js @@ -4,10 +4,110 @@ import fs from "fs-extra"; import { $ } from "zx"; import { html } from "@krakenjs/jsx-pragmatic"; -// eslint-disable-next-line import/no-namespace -import * as logos from "../src/logos"; - -import { getPackage, getSVGFilename } from "./utils"; +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 { getPackage } 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() { const version = getPackage().version; @@ -28,15 +128,16 @@ async function buildLogos() { const logoPromises = []; - for (const [name, value] of Object.entries(logos)) { - if (!name.includes("SVGs")) { - continue; - } + 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 - for (const [logoColor, svg] of Object.entries(value())) { // $FlowFixMe - const filename = getSVGFilename(name, logoColor); + const filename = getSVGFilename(logoName, colorName); const filepath = `${outdir}/${filename}`; // $FlowFixMe diff --git a/scripts/utils.js b/scripts/utils.js index e8101d1..e3fccfe 100644 --- a/scripts/utils.js +++ b/scripts/utils.js @@ -1,7 +1,6 @@ /* @flow */ import fs from "fs-extra"; -import { LOGO_COLOR } from "../src/constants"; type Package = {| name: string, @@ -27,10 +26,3 @@ export function getNodeOps(): NodeOps { } return JSON.parse(fs.readFileSync("./.nodeops", "utf-8")); } - -export function getSVGFilename( - name: string, - logoColor: $Values -): string { - return `${name}-${logoColor}.svg`; -} diff --git a/src/constants.js b/src/constants.js index 586d3e4..eae3b66 100644 --- a/src/constants.js +++ b/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"), }; + +// TODO: get namespace and version dynamically +export const CDN_BASE_URL = "https://www.paypalobjects.com/js-sdk-logos/2.1.1"; diff --git a/src/lib/components.jsx b/src/lib/components.jsx index b1f890e..b1dcd65 100644 --- a/src/lib/components.jsx +++ b/src/lib/components.jsx @@ -14,13 +14,14 @@ 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, cdnUrl, ...otherProps } = props; + let { svg, cdnUrl, loadFromCDN, ...otherProps } = props; - if (cdnUrl) { + if (loadFromCDN && cdnUrl) { // $FlowFixMe const svgProps: SVGProps = { src: cdnUrl, ...otherProps }; return ; @@ -49,6 +50,8 @@ export type SVGLogoProps = { render: () => ElementNode, name: string, logoColor?: $Values, + cdnUrl?: string, + loadFromCDN?: boolean, }; export function SVGLogo({ diff --git a/src/lib/util.js b/src/lib/util.js index 6ca17cb..3f9d960 100644 --- a/src/lib/util.js +++ b/src/lib/util.js @@ -1,12 +1,7 @@ /* @flow */ -import { LOGO, LOGO_COLOR } from "../constants"; -import type { - LogoColorMap, - LogoColors, - LogoColorSVGMap, - SVGGetter, -} from "../types"; +import { CDN_BASE_URL, LOGO, LOGO_COLOR } from "../constants"; +import type { LogoColorMap, LogoColors } from "../types"; export function getLogoColors( name: string, @@ -32,18 +27,23 @@ export function getLogoColors( return colors; } -export function getSVGs( +export function getSVGFilename( logoName: $Values, - svgGetter: SVGGetter, - logoColorMap: LogoColorMap -): LogoColorSVGMap { - const svgs = {}; - - for (const logoColor of Object.keys(logoColorMap)) { - const logoColors = getLogoColors(logoName, logoColorMap, logoColor); + logoColor: $Values +): string { + return `${logoName}-${logoColor}.svg`; +} - svgs[logoColor] = svgGetter(logoColors); +export function getLogoCDNUrl( + logoName: $Values, + logoColorMap: LogoColorMap, + logoColor: $Values +): string { + if (!logoColorMap[logoColor]) { + logoColor = LOGO_COLOR.DEFAULT; } - return svgs; + const svgFilename = getSVGFilename(logoName, logoColor); + + return `${CDN_BASE_URL}/${svgFilename}`; } diff --git a/src/logos/applepay/logo.jsx b/src/logos/applepay/logo.jsx index 0932b64..bc081ac 100644 --- a/src/logos/applepay/logo.jsx +++ b/src/logos/applepay/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const APPLEPAY_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#ffffff", secondary: "#ffffff", @@ -22,13 +31,32 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getApplepaySVG = ({ primary }: LogoColors): ElementNode => { + return ( + + + + ); +}; + export function ApplePayLogo({ logoColor = LOGO_COLOR.DEFAULT, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary } = getLogoColors(LOGO.APPLEPAY, LOGO_COLORS, logoColor); + const svg = getApplepaySVG( + getLogoColors(LOGO.APPLEPAY, APPLEPAY_LOGO_COLORS, logoColor) + ); + const cdnUrl = getLogoCDNUrl(LOGO.APPLEPAY, APPLEPAY_LOGO_COLORS, logoColor); return ( { - return ( - - - - ); + return svg; }} /> ); diff --git a/src/logos/bancontact/logo.jsx b/src/logos/bancontact/logo.jsx index 0ca6ab2..f2c7364 100644 --- a/src/logos/bancontact/logo.jsx +++ b/src/logos/bancontact/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const BANCONTACT_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#FFFFFF", secondary: "#FFFFFF", @@ -28,15 +37,72 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getBancontactSVG = ({ + primary, + secondary, + tertiary, + quaternary, +}: LogoColors): ElementNode => { + return ( + + + + + + + + + + + + + + + + ); +}; + export function BancontactLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary, secondary, tertiary, quaternary } = getLogoColors( + const svg = getBancontactSVG( + getLogoColors(LOGO.BANCONTACT, BANCONTACT_LOGO_COLORS, logoColor) + ); + const cdnUrl = getLogoCDNUrl( LOGO.BANCONTACT, - LOGO_COLORS, + BANCONTACT_LOGO_COLORS, logoColor ); @@ -45,53 +111,9 @@ export function BancontactLogo({ {...props} name={LOGO.BANCONTACT} logoColor={logoColor} + cdnUrl={cdnUrl} render={() => { - return ( - - - - - - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/blik/logo.jsx b/src/logos/blik/logo.jsx index 53707c5..1e0d2e3 100644 --- a/src/logos/blik/logo.jsx +++ b/src/logos/blik/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const BLIK_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#FF0000", secondary: "#E83E49", @@ -31,94 +40,102 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getBlikSVG = ({ + primary, + secondary, + tertiary, + quaternary, + senary, +}: LogoColors): ElementNode => { + return ( + + + + + + + + + + + + + + + + + + + + ); +}; + export function BlikLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary, secondary, tertiary, quaternary, senary } = getLogoColors( - LOGO.BLIK, - LOGO_COLORS, - logoColor - ); + const svg = getBlikSVG(getLogoColors(LOGO.BLIK, BLIK_LOGO_COLORS, logoColor)); + const cdnUrl = getLogoCDNUrl(LOGO.BLIK, BLIK_LOGO_COLORS, logoColor); return ( { - return ( - - - - - - - - - - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/boleto/logo.jsx b/src/logos/boleto/logo.jsx index addd4d7..4239a31 100644 --- a/src/logos/boleto/logo.jsx +++ b/src/logos/boleto/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const BOLETO_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#FFFFFF", }, @@ -19,36 +28,44 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getBoletoSVG = ({ primary }: LogoColors): ElementNode => { + return ( + + + + ); +}; + export function BoletoLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary } = getLogoColors(LOGO.BOLETO, LOGO_COLORS, logoColor); + const svg = getBoletoSVG( + getLogoColors(LOGO.BOLETO, BOLETO_LOGO_COLORS, logoColor) + ); + const cdnUrl = getLogoCDNUrl(LOGO.BOLETO, BOLETO_LOGO_COLORS, logoColor); return ( { - return ( - - - - ); + return svg; }} /> ); diff --git a/src/logos/eps/logo.jsx b/src/logos/eps/logo.jsx index 0a11834..ebc6080 100644 --- a/src/logos/eps/logo.jsx +++ b/src/logos/eps/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const EPS_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#FFFFFF", secondary: "#FFFFFF", @@ -22,124 +31,126 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getEpsSVG = ({ primary, secondary }: LogoColors): ElementNode => { + return ( + + + + + + + + + + + + + + + + + + ); +}; + export function EpsLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary, secondary } = getLogoColors( - LOGO.EPS, - LOGO_COLORS, - logoColor - ); + const svg = getEpsSVG(getLogoColors(LOGO.EPS, EPS_LOGO_COLORS, logoColor)); + const cdnUrl = getLogoCDNUrl(LOGO.EPS, EPS_LOGO_COLORS, logoColor); return ( { - return ( - - - - - - - - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/giropay/logo.jsx b/src/logos/giropay/logo.jsx index 94f1ddf..334e59e 100644 --- a/src/logos/giropay/logo.jsx +++ b/src/logos/giropay/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const GIROPAY_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#FFFFFF", secondary: "#003A7D", @@ -31,98 +40,108 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getGiropaySVG = ({ + primary, + secondary, + tertiary, + quaternary, + quinary, +}: LogoColors): ElementNode => { + return ( + + + + + + + + + + + + + + ); +}; + export function GiropayLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary, secondary, tertiary, quaternary, quinary } = getLogoColors( - LOGO.GIROPAY, - LOGO_COLORS, - logoColor + const svg = getGiropaySVG( + getLogoColors(LOGO.GIROPAY, GIROPAY_LOGO_COLORS, logoColor) ); + const cdnUrl = getLogoCDNUrl(LOGO.GIROPAY, GIROPAY_LOGO_COLORS, logoColor); return ( { - return ( - - - - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/ideal/logo.jsx b/src/logos/ideal/logo.jsx index 515cd81..ffdf1cb 100644 --- a/src/logos/ideal/logo.jsx +++ b/src/logos/ideal/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { getSVGs, SVGLogo, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import type { LogoColorMap, LogoColorSVGMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const IDEAL_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#FFFFFF", secondary: "#CC0066", @@ -22,7 +31,10 @@ const LOGO_COLORS: LogoColorMap = { }, }; -const svgGetter = ({ primary, secondary }) => { +export const getIdealSVG = ({ + primary, + secondary, +}: LogoColors): ElementNode => { return ( { ); }; -export const getIdealSVGs = (): LogoColorSVGMap => - getSVGs(LOGO.IDEAL, svgGetter, LOGO_COLORS); - export function IdealLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const CDN_URL = - "https://www.paypalobjects.com/images/checkout/latinum/Altpay_logo_iDEAL.svg"; - - const svg = getIdealSVGs()[logoColor]; + const svg = getIdealSVG( + getLogoColors(LOGO.IDEAL, IDEAL_LOGO_COLORS, logoColor) + ); + const cdnUrl = getLogoCDNUrl(LOGO.IDEAL, IDEAL_LOGO_COLORS, logoColor); return ( { return svg; }} diff --git a/src/logos/itau/logo.jsx b/src/logos/itau/logo.jsx index b410434..c031ce3 100644 --- a/src/logos/itau/logo.jsx +++ b/src/logos/itau/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const ITAU_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#ffffff", }, @@ -22,144 +31,150 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getItauSVG = ({ primary }: LogoColors): ElementNode => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + export function ItauLogo({ logoColor = LOGO_COLOR.DEFAULT, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary } = getLogoColors(LOGO.SOFORT, LOGO_COLORS, logoColor); + const svg = getItauSVG(getLogoColors(LOGO.ITAU, ITAU_LOGO_COLORS, logoColor)); + const cdnUrl = getLogoCDNUrl(LOGO.ITAU, ITAU_LOGO_COLORS, logoColor); return ( { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/maxima/logo.jsx b/src/logos/maxima/logo.jsx index 9fe850e..8493768 100644 --- a/src/logos/maxima/logo.jsx +++ b/src/logos/maxima/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const MAXIMA_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#004A91", secondary: "#ED1921", @@ -22,95 +31,99 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getMaximaSVG = ({ + primary, + secondary, +}: LogoColors): ElementNode => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + export function MaximaLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary, secondary } = getLogoColors( - LOGO.MAXIMA, - LOGO_COLORS, - logoColor + const svg = getMaximaSVG( + getLogoColors(LOGO.MAXIMA, MAXIMA_LOGO_COLORS, logoColor) ); + const cdnUrl = getLogoCDNUrl(LOGO.MAXIMA, MAXIMA_LOGO_COLORS, logoColor); return ( { - return ( - - - - - - - - - - - - - - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/mercadopago/logo.jsx b/src/logos/mercadopago/logo.jsx index 4c381c9..07e6c64 100644 --- a/src/logos/mercadopago/logo.jsx +++ b/src/logos/mercadopago/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const MERCADOPAGO_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#009EE3", secondary: "#FFFFFF", @@ -28,15 +37,138 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getMercadoPagoSVG = ({ + primary, + secondary, + tertiary, + quaternary, +}: LogoColors): ElementNode => { + return ( + + + + + + + + + + + + + + + + + + + + ); +}; + export function MercadoPagoLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary, secondary, tertiary, quaternary } = getLogoColors( + const svg = getMercadoPagoSVG( + getLogoColors(LOGO.MERCADOPAGO, MERCADOPAGO_LOGO_COLORS, logoColor) + ); + const cdnUrl = getLogoCDNUrl( LOGO.MERCADOPAGO, - LOGO_COLORS, + MERCADOPAGO_LOGO_COLORS, logoColor ); @@ -45,119 +177,9 @@ export function MercadoPagoLogo({ {...props} name={LOGO.MERCADOPAGO} logoColor={logoColor} + cdnUrl={cdnUrl} render={() => { - return ( - - - - - - - - - - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/multibanco/logo.jsx b/src/logos/multibanco/logo.jsx index 82dca98..f344b56 100644 --- a/src/logos/multibanco/logo.jsx +++ b/src/logos/multibanco/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const MULTIBANCO_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#FFFFFF", secondary: "#FFFFFF", @@ -22,15 +31,118 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getMultibancoSVG = ({ + primary, + secondary, +}: LogoColors): ElementNode => { + return ( + + + + + + + + + + + + + + + + + ); +}; + export function MultibancoLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary, secondary } = getLogoColors( + const svg = getMultibancoSVG( + getLogoColors(LOGO.MULTIBANCO, MULTIBANCO_LOGO_COLORS, logoColor) + ); + const cdnUrl = getLogoCDNUrl( LOGO.MULTIBANCO, - LOGO_COLORS, + MULTIBANCO_LOGO_COLORS, logoColor ); @@ -39,101 +151,9 @@ export function MultibancoLogo({ {...props} name={LOGO.MULTIBANCO} logoColor={logoColor} + cdnUrl={cdnUrl} render={() => { - return ( - - - - - - - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/mybank/logo.jsx b/src/logos/mybank/logo.jsx index 00ee6c6..662c5ba 100644 --- a/src/logos/mybank/logo.jsx +++ b/src/logos/mybank/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const MYBANK_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#00C0EE", secondary: "#FFFFFF", @@ -22,85 +31,92 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getMybankSVG = ({ + primary, + secondary, +}: LogoColors): ElementNode => { + return ( + + + + + + + + + + + + ); +}; + export function MybankLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary, secondary } = getLogoColors( - LOGO.MYBANK, - LOGO_COLORS, - logoColor + const svg = getMybankSVG( + getLogoColors(LOGO.MYBANK, MYBANK_LOGO_COLORS, logoColor) ); + const cdnUrl = getLogoCDNUrl(LOGO.MYBANK, MYBANK_LOGO_COLORS, logoColor); return ( { - return ( - - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/oxxo/logo.jsx b/src/logos/oxxo/logo.jsx index d062776..9dcbdb1 100644 --- a/src/logos/oxxo/logo.jsx +++ b/src/logos/oxxo/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const OXXO_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#FFFFFF", secondary: "#FFFFFF", @@ -22,64 +31,66 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getOxxoSVG = ({ primary, secondary }: LogoColors): ElementNode => { + return ( + + + + + + + + ); +}; + export function OxxoLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary, secondary } = getLogoColors( - LOGO.OXXO, - LOGO_COLORS, - logoColor - ); + const svg = getOxxoSVG(getLogoColors(LOGO.OXXO, OXXO_LOGO_COLORS, logoColor)); + const cdnUrl = getLogoCDNUrl(LOGO.OXXO, OXXO_LOGO_COLORS, logoColor); return ( { - return ( - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/p24/logo.jsx b/src/logos/p24/logo.jsx index a5c11bc..b3f5db6 100644 --- a/src/logos/p24/logo.jsx +++ b/src/logos/p24/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const P24_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#FFFFFF", secondary: "#FFFFFF", @@ -22,124 +31,126 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getP24SVG = ({ primary, secondary }: LogoColors): ElementNode => { + return ( + + + + + + + + + + + + + + + + + + ); +}; + export function P24Logo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary, secondary } = getLogoColors( - LOGO.P24, - LOGO_COLORS, - logoColor - ); + const svg = getP24SVG(getLogoColors(LOGO.P24, P24_LOGO_COLORS, logoColor)); + const cdnUrl = getLogoCDNUrl(LOGO.P24, P24_LOGO_COLORS, logoColor); return ( { - return ( - - - - - - - - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/paidy/logo.jsx b/src/logos/paidy/logo.jsx index cca2545..085b3bb 100644 --- a/src/logos/paidy/logo.jsx +++ b/src/logos/paidy/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const PAIDY_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#FFFFFF", secondary: "#FFFFFF", @@ -25,105 +34,113 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getPaidySVG = ({ + primary, + secondary, + tertiary, +}: LogoColors): ElementNode => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + export function PaidyLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary, secondary, tertiary } = getLogoColors( - LOGO.PAIDY, - LOGO_COLORS, - logoColor + const svg = getPaidySVG( + getLogoColors(LOGO.PAIDY, PAIDY_LOGO_COLORS, logoColor) ); + const cdnUrl = getLogoCDNUrl(LOGO.PAIDY, PAIDY_LOGO_COLORS, logoColor); return ( { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/payu/logo.jsx b/src/logos/payu/logo.jsx index 2facc77..7b0941f 100644 --- a/src/logos/payu/logo.jsx +++ b/src/logos/payu/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const PAYU_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#A6C307", }, @@ -19,41 +28,47 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getPayuSVG = ({ primary }: LogoColors): ElementNode => { + return ( + + + + + + + + + + + ); +}; + export function PayuLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary } = getLogoColors(LOGO.PAYU, LOGO_COLORS, logoColor); + const svg = getPayuSVG(getLogoColors(LOGO.PAYU, PAYU_LOGO_COLORS, logoColor)); + const cdnUrl = getLogoCDNUrl(LOGO.PAYU, PAYU_LOGO_COLORS, logoColor); return ( { - return ( - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/satispay/logo.jsx b/src/logos/satispay/logo.jsx index c0e94e1..c706b83 100644 --- a/src/logos/satispay/logo.jsx +++ b/src/logos/satispay/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const SATISPAY_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#FFFFFF", }, @@ -19,43 +28,51 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getSatispaySVG = ({ primary }: LogoColors): ElementNode => { + return ( + + + + + + + + + + + ); +}; + export function SatispayLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary } = getLogoColors(LOGO.SATISPAY, LOGO_COLORS, logoColor); + const svg = getSatispaySVG( + getLogoColors(LOGO.SATISPAY, SATISPAY_LOGO_COLORS, logoColor) + ); + const cdnUrl = getLogoCDNUrl(LOGO.SATISPAY, SATISPAY_LOGO_COLORS, logoColor); return ( { - return ( - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/sepa/logo.jsx b/src/logos/sepa/logo.jsx index c6e8954..dcbd90e 100644 --- a/src/logos/sepa/logo.jsx +++ b/src/logos/sepa/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const SEPA_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { main: "#005DA0", card: "#AEB1BC", @@ -22,108 +31,114 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getSepaSVG = ({ main, card }: LogoColors): ElementNode => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + export function SepaLogo({ logoColor = LOGO_COLOR.DEFAULT, ...props }: { logoColor?: $Values, }): ComponentNode { - const { main, card } = getLogoColors(LOGO.SEPA, LOGO_COLORS, logoColor); + const svg = getSepaSVG(getLogoColors(LOGO.SEPA, SEPA_LOGO_COLORS, logoColor)); + const cdnUrl = getLogoCDNUrl(LOGO.SEPA, SEPA_LOGO_COLORS, logoColor); return ( { - return ( - - - - - - - - - - - - - - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/sofort/logo.jsx b/src/logos/sofort/logo.jsx index 60d0368..70e8fe1 100644 --- a/src/logos/sofort/logo.jsx +++ b/src/logos/sofort/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const SOFORT_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#EDEDED", secondary: "#393A41", @@ -22,59 +31,66 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getSofortSVG = ({ + primary, + secondary, +}: LogoColors): ElementNode => { + return ( + + + + + + + + + + ); +}; + export function SofortLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary, secondary } = getLogoColors( - LOGO.SOFORT, - LOGO_COLORS, - logoColor + const svg = getSofortSVG( + getLogoColors(LOGO.SOFORT, SOFORT_LOGO_COLORS, logoColor) ); + const cdnUrl = getLogoCDNUrl(LOGO.SOFORT, SOFORT_LOGO_COLORS, logoColor); return ( { - return ( - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/trustly/logo.jsx b/src/logos/trustly/logo.jsx index b35509b..4bba879 100644 --- a/src/logos/trustly/logo.jsx +++ b/src/logos/trustly/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const TRUSTLY_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#0EE06E", }, @@ -19,77 +28,85 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getTrustlySVG = ({ primary }: LogoColors): ElementNode => { + return ( + + + + + + + + + + + ); +}; + export function TrustlyLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary } = getLogoColors(LOGO.TRUSTLY, LOGO_COLORS, logoColor); + const svg = getTrustlySVG( + getLogoColors(LOGO.TRUSTLY, TRUSTLY_LOGO_COLORS, logoColor) + ); + const cdnUrl = getLogoCDNUrl(LOGO.TRUSTLY, TRUSTLY_LOGO_COLORS, logoColor); return ( { - return ( - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/verkkopankki/logo.jsx b/src/logos/verkkopankki/logo.jsx index b8402e0..87aed01 100644 --- a/src/logos/verkkopankki/logo.jsx +++ b/src/logos/verkkopankki/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const VERKKOPANKKI_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#2D59A1", secondary: "#1F3364", @@ -34,306 +43,324 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getVerkkopankkiSVG = ({ + primary, + secondary, + tertiary, + quaternary, + quinary, + senary, +}: LogoColors): ElementNode => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + export function VerkkopankkiLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary, secondary, tertiary, quaternary, quinary, senary } = - getLogoColors(LOGO.VERKKOPANKKI, LOGO_COLORS, logoColor); + const svg = getVerkkopankkiSVG( + getLogoColors(LOGO.VERKKOPANKKI, VERKKOPANKKI_LOGO_COLORS, logoColor) + ); + const cdnUrl = getLogoCDNUrl( + LOGO.VERKKOPANKKI, + VERKKOPANKKI_LOGO_COLORS, + logoColor + ); return ( { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/wechatpay/logo.jsx b/src/logos/wechatpay/logo.jsx index 26fcd27..39ca879 100644 --- a/src/logos/wechatpay/logo.jsx +++ b/src/logos/wechatpay/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const WECHATPAY_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#1AAD19", secondary: "#FFFFFF", @@ -22,15 +31,94 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getWechatpaySVG = ({ + primary, + secondary, +}: LogoColors): ElementNode => { + return ( + + + + + + + + + + + + + ); +}; + export function WechatpayLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary, secondary } = getLogoColors( + const svg = getWechatpaySVG( + getLogoColors(LOGO.WECHATPAY, WECHATPAY_LOGO_COLORS, logoColor) + ); + const cdnUrl = getLogoCDNUrl( LOGO.WECHATPAY, - LOGO_COLORS, + WECHATPAY_LOGO_COLORS, logoColor ); @@ -39,77 +127,9 @@ export function WechatpayLogo({ {...props} name={LOGO.WECHATPAY} logoColor={logoColor} + cdnUrl={cdnUrl} render={() => { - return ( - - - - - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/logos/zimpler/logo.jsx b/src/logos/zimpler/logo.jsx index 3d9f0b8..f097d15 100644 --- a/src/logos/zimpler/logo.jsx +++ b/src/logos/zimpler/logo.jsx @@ -1,13 +1,22 @@ /* @flow */ /** @jsx node */ -import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src"; +import { + node, + type ElementNode, + type ComponentNode, +} from "@krakenjs/jsx-pragmatic/src"; -import { SVGLogo, getLogoColors, type SVGLogoProps } from "../../lib"; +import { + getLogoCDNUrl, + getLogoColors, + SVGLogo, + type SVGLogoProps, +} from "../../lib"; import { LOGO_COLOR, LOGO } from "../../constants"; -import { type LogoColorMap } from "../../types"; +import type { LogoColors, LogoColorMap } from "../../types"; -const LOGO_COLORS: LogoColorMap = { +export const ZIMPLER_LOGO_COLORS: LogoColorMap = { [LOGO_COLOR.DEFAULT]: { primary: "#00A599", }, @@ -19,40 +28,48 @@ const LOGO_COLORS: LogoColorMap = { }, }; +export const getZimplerSVG = ({ primary }: LogoColors): ElementNode => { + return ( + + + + + + + + + ); +}; + export function ZimplerLogo({ logoColor = LOGO_COLOR.BLACK, ...props }: { logoColor?: $Values, }): ComponentNode { - const { primary } = getLogoColors(LOGO.ZIMPLER, LOGO_COLORS, logoColor); + const svg = getZimplerSVG( + getLogoColors(LOGO.ZIMPLER, ZIMPLER_LOGO_COLORS, logoColor) + ); + const cdnUrl = getLogoCDNUrl(LOGO.ZIMPLER, ZIMPLER_LOGO_COLORS, logoColor); return ( { - return ( - - - - - - - - - ); + return svg; }} /> ); diff --git a/src/types.js b/src/types.js index cc69ba9..076a3aa 100644 --- a/src/types.js +++ b/src/types.js @@ -1,7 +1,5 @@ /* @flow */ -import { ElementNode } from "@krakenjs/jsx-pragmatic/src"; - import { LOGO_COLOR } from "./constants"; export type LogoColors = { @@ -11,9 +9,3 @@ export type LogoColors = { export type LogoColorMap = { [$Values]: LogoColors, }; - -export type LogoColorSVGMap = { - [$Values]: ElementNode, -}; - -export type SVGGetter = (LogoColors) => ElementNode; From cce82a0ac32a06058e4da81a26f6eed88358d217 Mon Sep 17 00:00:00 2001 From: dtjones404 <69579929+dtjones404@users.noreply.github.com> Date: Fri, 27 Jan 2023 16:51:09 -0500 Subject: [PATCH 04/13] chore: update package.json Co-authored-by: Greg Jopa <534034+gregjopa@users.noreply.github.com> --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 44637fd..e4b04a3 100644 --- a/package.json +++ b/package.json @@ -87,7 +87,6 @@ "devDependencies": { "@commitlint/cli": "^17.1.2", "@commitlint/config-conventional": "^17.1.0", - "@krakenjs/grabthar-release": "^3.8.0", "@krakenjs/grumbler-scripts": "^8.0.4", "cross-env": "^7.0.3", "flow-bin": "0.155.0", From 7961085a9c9baebc5c23c99364a86a2ad94b98dd Mon Sep 17 00:00:00 2001 From: Dustin Jones Date: Fri, 27 Jan 2023 16:59:03 -0500 Subject: [PATCH 05/13] chore: replace fs-extra with fs --- package.json | 1 - scripts/utils.js | 3 ++- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index e4b04a3..e1bf388 100644 --- a/package.json +++ b/package.json @@ -91,7 +91,6 @@ "cross-env": "^7.0.3", "flow-bin": "0.155.0", "flow-typed": "^3.8.0", - "fs-extra": "^11.1.0", "husky": "^8.0.1", "jest": "^29.3.0", "lint-staged": "^13.0.3", diff --git a/scripts/utils.js b/scripts/utils.js index e3fccfe..6aac419 100644 --- a/scripts/utils.js +++ b/scripts/utils.js @@ -1,6 +1,7 @@ /* @flow */ -import fs from "fs-extra"; +// eslint-disable-next-line import/no-nodejs-modules +import fs from "fs"; type Package = {| name: string, From d80181dae3aee1cf9270530a9ca5893bbd3f2f87 Mon Sep 17 00:00:00 2001 From: Dustin Jones Date: Mon, 30 Jan 2023 16:45:09 -0500 Subject: [PATCH 06/13] chore: programmatically update cdn url version --- scripts/buildLogos.js | 7 +++++-- scripts/utils.js | 13 +++++++++++++ src/constants.js | 4 ++-- 3 files changed, 20 insertions(+), 4 deletions(-) diff --git a/scripts/buildLogos.js b/scripts/buildLogos.js index e0e5d0d..a782421 100644 --- a/scripts/buildLogos.js +++ b/scripts/buildLogos.js @@ -55,7 +55,7 @@ import { ZIMPLER_LOGO_COLORS, } from "../src/logos"; -import { getPackage } from "./utils"; +import { getPackage, updateCDNUrl } from "./utils"; const LOGO_GETTERS = { [LOGO.APPLEPAY]: getApplepaySVG, @@ -122,6 +122,9 @@ async function buildLogos() { throw new Error(`Package version required`); } + // updates CDN URL in src/constants.js with package version + updateCDNUrl(version); + const outdir = `cdn/${version}`; await $`mkdir -p ${outdir}`; @@ -149,7 +152,7 @@ async function buildLogos() { await Promise.all(logoPromises); if (shouldCommit) { - await $`git add cdn`; + await $`git add cdn src/constants.js`; await $`git commit -m "chore: generate CDN packages"`; await $`git push`; } diff --git a/scripts/utils.js b/scripts/utils.js index 6aac419..bb1f966 100644 --- a/scripts/utils.js +++ b/scripts/utils.js @@ -27,3 +27,16 @@ export function getNodeOps(): NodeOps { } 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); +} diff --git a/src/constants.js b/src/constants.js index eae3b66..a054bdf 100644 --- a/src/constants.js +++ b/src/constants.js @@ -48,5 +48,5 @@ export const LOGO_CLASS = { LOGO_COLOR: ("paypal-logo-color": "paypal-logo-color"), }; -// TODO: get namespace and version dynamically -export const CDN_BASE_URL = "https://www.paypalobjects.com/js-sdk-logos/2.1.1"; +const PACKAGE_VERSION = ""; +export const CDN_BASE_URL = `https://www.paypalobjects.com/js-sdk-logos/${PACKAGE_VERSION}`; From 1837f49dd70862f5b315a44cc577f4b639e9258b Mon Sep 17 00:00:00 2001 From: dtjones404 <69579929+dtjones404@users.noreply.github.com> Date: Tue, 31 Jan 2023 12:18:16 -0500 Subject: [PATCH 07/13] chore: update .github/workflows/publish.yml Co-authored-by: Greg Jopa <534034+gregjopa@users.noreply.github.com> --- .github/workflows/publish.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 59a7c5b..85c2fae 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -26,7 +26,7 @@ jobs: git config --global user.email ${{ github.actor }}@users.noreply.github.com git config --global user.name ${{ github.actor }} - - name: Run buildLogos script + - name: Update cdn folder with new svg files run: npm run build-logos -- --commit - name: Publish to npm From 1238118ffb8d748ab5f725e20a90b103659628f7 Mon Sep 17 00:00:00 2001 From: dtjones404 <69579929+dtjones404@users.noreply.github.com> Date: Tue, 31 Jan 2023 12:21:03 -0500 Subject: [PATCH 08/13] chore: update src/constants.js Co-authored-by: Greg Jopa <534034+gregjopa@users.noreply.github.com> --- src/constants.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/constants.js b/src/constants.js index a054bdf..53ae781 100644 --- a/src/constants.js +++ b/src/constants.js @@ -48,5 +48,5 @@ export const LOGO_CLASS = { LOGO_COLOR: ("paypal-logo-color": "paypal-logo-color"), }; -const PACKAGE_VERSION = ""; +const PACKAGE_VERSION = "2.1.1"; export const CDN_BASE_URL = `https://www.paypalobjects.com/js-sdk-logos/${PACKAGE_VERSION}`; From 294b1e2ccdd1365b5c185f7ded0c8c7d4ddc561f Mon Sep 17 00:00:00 2001 From: Dustin Jones Date: Tue, 31 Jan 2023 12:30:14 -0500 Subject: [PATCH 09/13] chore: delete util functions --- scripts/buildLogos.js | 3 +-- scripts/utils.js | 25 ------------------------- 2 files changed, 1 insertion(+), 27 deletions(-) diff --git a/scripts/buildLogos.js b/scripts/buildLogos.js index a782421..ee02df2 100644 --- a/scripts/buildLogos.js +++ b/scripts/buildLogos.js @@ -54,6 +54,7 @@ import { WECHATPAY_LOGO_COLORS, ZIMPLER_LOGO_COLORS, } from "../src/logos"; +import { version } from "../package.json"; import { getPackage, updateCDNUrl } from "./utils"; @@ -110,8 +111,6 @@ const LOGO_COLOR_MAPS = { }; async function buildLogos() { - const version = getPackage().version; - let shouldCommit = false; if (process.argv.includes("--commit")) { diff --git a/scripts/utils.js b/scripts/utils.js index bb1f966..5701f41 100644 --- a/scripts/utils.js +++ b/scripts/utils.js @@ -3,31 +3,6 @@ // eslint-disable-next-line import/no-nodejs-modules import fs from "fs"; -type Package = {| - name: string, - version: string, -|}; - -type NodeOps = {| - web: {| - staticNamespace: string, - |}, -|}; - -export function getPackage(): Package { - if (!fs.existsSync("./package.json")) { - throw new Error(`Package file not found`); - } - return JSON.parse(fs.readFileSync("./package.json", "utf-8")); -} - -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"; From e6bfdf2cdce61699cdba8173b89c8f1f5bc61971 Mon Sep 17 00:00:00 2001 From: Dustin Jones Date: Tue, 31 Jan 2023 12:52:42 -0500 Subject: [PATCH 10/13] chore: update cdn namespace programmatically --- scripts/buildLogos.js | 10 ++++++++-- scripts/utils.js | 19 ++++++++++++++++++- src/constants.js | 3 ++- 3 files changed, 28 insertions(+), 4 deletions(-) diff --git a/scripts/buildLogos.js b/scripts/buildLogos.js index ee02df2..61f726f 100644 --- a/scripts/buildLogos.js +++ b/scripts/buildLogos.js @@ -56,7 +56,7 @@ import { } from "../src/logos"; import { version } from "../package.json"; -import { getPackage, updateCDNUrl } from "./utils"; +import { getNodeOps, updateCDNUrl } from "./utils"; const LOGO_GETTERS = { [LOGO.APPLEPAY]: getApplepaySVG, @@ -121,8 +121,14 @@ async function buildLogos() { throw new Error(`Package version required`); } + const cdnNamespace = getNodeOps().web.staticNamespace; + + if (!cdnNamespace) { + throw new Error(`CDN namespace required`); + } + // updates CDN URL in src/constants.js with package version - updateCDNUrl(version); + updateCDNUrl(version, cdnNamespace); const outdir = `cdn/${version}`; diff --git a/scripts/utils.js b/scripts/utils.js index 5701f41..f028cbd 100644 --- a/scripts/utils.js +++ b/scripts/utils.js @@ -3,7 +3,20 @@ // eslint-disable-next-line import/no-nodejs-modules import fs from "fs"; -export function updateCDNUrl(packageVersion: string) { +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, cdnNamespace: string) { const filepath = "src/constants.js"; let constantsFile = fs.readFileSync(filepath, "utf-8"); @@ -12,6 +25,10 @@ export function updateCDNUrl(packageVersion: string) { /const PACKAGE_VERSION = ".*";/, `const PACKAGE_VERSION = "${packageVersion}";` ); + constantsFile = constantsFile.replace( + /const CDN_NAMESPACE = ".*";/, + `const CDN_NAMESPACE = "${cdnNamespace}";` + ); fs.writeFileSync(filepath, constantsFile); } diff --git a/src/constants.js b/src/constants.js index 53ae781..115712c 100644 --- a/src/constants.js +++ b/src/constants.js @@ -49,4 +49,5 @@ export const LOGO_CLASS = { }; const PACKAGE_VERSION = "2.1.1"; -export const CDN_BASE_URL = `https://www.paypalobjects.com/js-sdk-logos/${PACKAGE_VERSION}`; +const CDN_NAMESPACE = "js-sdk-logos"; +export const CDN_BASE_URL = `https://www.paypalobjects.com/${CDN_NAMESPACE}/${PACKAGE_VERSION}`; From 7a085c2fad6780aa8b650fc71d1d75871906d9ae Mon Sep 17 00:00:00 2001 From: dtjones404 <69579929+dtjones404@users.noreply.github.com> Date: Tue, 31 Jan 2023 14:47:22 -0500 Subject: [PATCH 11/13] chore: update scripts/buildLogos.js Co-authored-by: Greg Jopa <534034+gregjopa@users.noreply.github.com> --- scripts/buildLogos.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/scripts/buildLogos.js b/scripts/buildLogos.js index 61f726f..b6d72d5 100644 --- a/scripts/buildLogos.js +++ b/scripts/buildLogos.js @@ -128,7 +128,10 @@ async function buildLogos() { } // updates CDN URL in src/constants.js with package version - updateCDNUrl(version, cdnNamespace); + if (cdnNamespace !== "js-sdk-logos") { + throw new Error("Expected cdnNamespace to be js-sdk-logos"); + } + updateCDNUrl(version); const outdir = `cdn/${version}`; From 4d7ce0285b6bc32685f3dad3cc2cfe7d3bb5a42c Mon Sep 17 00:00:00 2001 From: Dustin Jones Date: Tue, 31 Jan 2023 14:50:05 -0500 Subject: [PATCH 12/13] chore: remove dynamic url namespace updating --- scripts/utils.js | 6 +----- src/constants.js | 3 +-- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/scripts/utils.js b/scripts/utils.js index f028cbd..be373b4 100644 --- a/scripts/utils.js +++ b/scripts/utils.js @@ -16,7 +16,7 @@ export function getNodeOps(): NodeOps { return JSON.parse(fs.readFileSync("./.nodeops", "utf-8")); } -export function updateCDNUrl(packageVersion: string, cdnNamespace: string) { +export function updateCDNUrl(packageVersion: string) { const filepath = "src/constants.js"; let constantsFile = fs.readFileSync(filepath, "utf-8"); @@ -25,10 +25,6 @@ export function updateCDNUrl(packageVersion: string, cdnNamespace: string) { /const PACKAGE_VERSION = ".*";/, `const PACKAGE_VERSION = "${packageVersion}";` ); - constantsFile = constantsFile.replace( - /const CDN_NAMESPACE = ".*";/, - `const CDN_NAMESPACE = "${cdnNamespace}";` - ); fs.writeFileSync(filepath, constantsFile); } diff --git a/src/constants.js b/src/constants.js index 115712c..53ae781 100644 --- a/src/constants.js +++ b/src/constants.js @@ -49,5 +49,4 @@ export const LOGO_CLASS = { }; const PACKAGE_VERSION = "2.1.1"; -const CDN_NAMESPACE = "js-sdk-logos"; -export const CDN_BASE_URL = `https://www.paypalobjects.com/${CDN_NAMESPACE}/${PACKAGE_VERSION}`; +export const CDN_BASE_URL = `https://www.paypalobjects.com/js-sdk-logos/${PACKAGE_VERSION}`; From d3e71b372c36486398497a40f4baeb90647e46b1 Mon Sep 17 00:00:00 2001 From: Dustin Jones Date: Tue, 31 Jan 2023 14:53:56 -0500 Subject: [PATCH 13/13] chore: move comment --- scripts/buildLogos.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/scripts/buildLogos.js b/scripts/buildLogos.js index b6d72d5..080d599 100644 --- a/scripts/buildLogos.js +++ b/scripts/buildLogos.js @@ -127,10 +127,11 @@ async function buildLogos() { throw new Error(`CDN namespace required`); } - // updates CDN URL in src/constants.js with package version 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}`;