react-bank-logo 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +88 -44
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +88 -44
- package/dist/index.mjs.map +1 -1
- package/package.json +41 -41
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/registry/bankLogoMap.ts","../src/utils/logoResolver.ts","../src/components/BankLogo.tsx"],"names":[],"mappings":";;;AAMO,IAAM,kBAAA,GAAqD;AAAA,EAChE,GAAA,EAAK;AAAA,IACH,IAAA,EAAM,KAAA;AAAA,IACN,WAAA,EAAa,KAAA;AAAA,IACb,GAAA,EAAK,2BAAA;AAAA,IACL,GAAA,EAAK,2BAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,OAAA,EAAS;AAAA,IACP,IAAA,EAAM,SAAA;AAAA,IACN,WAAA,EAAa,cAAA;AAAA,IACb,GAAA,EAAK,+BAAA;AAAA,IACL,GAAA,EAAK,+BAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,GAAA,EAAK;AAAA,IACH,IAAA,EAAM,KAAA;AAAA,IACN,WAAA,EAAa,KAAA;AAAA,IACb,GAAA,EAAK,2BAAA;AAAA,IACL,GAAA,EAAK,2BAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,GAAA,EAAK;AAAA,IACH,IAAA,EAAM,KAAA;AAAA,IACN,WAAA,EAAa,KAAA;AAAA,IACb,GAAA,EAAK,2BAAA;AAAA,IACL,GAAA,EAAK,2BAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,IAAA,EAAM,MAAA;AAAA,IACN,WAAA,EAAa,YAAA;AAAA,IACb,GAAA,EAAK,4BAAA;AAAA,IACL,GAAA,EAAK,4BAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,OAAA,EAAS;AAAA,IACP,IAAA,EAAM,SAAA;AAAA,IACN,WAAA,EAAa,cAAA;AAAA,IACb,GAAA,EAAK,+BAAA;AAAA,IACL,GAAA,EAAK,+BAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,OAAA,EAAS;AAAA,IACP,IAAA,EAAM,SAAA;AAAA,IACN,WAAA,EAAa,cAAA;AAAA,IACb,GAAA,EAAK,+BAAA;AAAA,IACL,GAAA,EAAK,+BAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,OAAA,EAAS;AAAA,IACP,IAAA,EAAM,SAAA;AAAA,IACN,WAAA,EAAa,SAAA;AAAA,IACb,GAAA,EAAK,+BAAA;AAAA,IACL,GAAA,EAAK,+BAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,IAAA,EAAM,MAAA;AAAA,IACN,WAAA,EAAa,WAAA;AAAA,IACb,GAAA,EAAK,4BAAA;AAAA,IACL,GAAA,EAAK,4BAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,IAAA,EAAM,MAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,GAAA,EAAK,4BAAA;AAAA,IACL,GAAA,EAAK,4BAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,QAAA,EAAU;AAAA,IACR,IAAA,EAAM,UAAA;AAAA,IACN,WAAA,EAAa,UAAA;AAAA,IACb,GAAA,EAAK,gCAAA;AAAA,IACL,GAAA,EAAK,gCAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,oBAAA,EAAsB;AAAA,IACpB,IAAA,EAAM,oBAAA;AAAA,IACN,WAAA,EAAa,oBAAA;AAAA,IACb,GAAA,EAAK,0CAAA;AAAA,IACL,GAAA,EAAK,0CAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,OAAA;AAAA,IACN,WAAA,EAAa,YAAA;AAAA,IACb,GAAA,EAAK,6BAAA;AAAA,IACL,GAAA,EAAK,6BAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,GAAA,EAAK;AAAA,IACH,IAAA,EAAM,KAAA;AAAA,IACN,WAAA,EAAa,KAAA;AAAA,IACb,GAAA,EAAK,2BAAA;AAAA,IACL,GAAA,EAAK,2BAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,IAAA,EAAM,MAAA;AAAA,IACN,WAAA,EAAa,WAAA;AAAA,IACb,GAAA,EAAK,4BAAA;AAAA,IACL,GAAA,EAAK,4BAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,IAAA,EAAM,cAAA;AAAA,IACN,WAAA,EAAa,mBAAA;AAAA,IACb,GAAA,EAAK,oCAAA;AAAA,IACL,GAAA,EAAK,oCAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,OAAA,EAAS;AAAA,IACP,IAAA,EAAM,SAAA;AAAA,IACN,WAAA,EAAa,cAAA;AAAA,IACb,GAAA,EAAK,+BAAA;AAAA,IACL,GAAA,EAAK,+BAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,OAAA;AAAA,IACN,WAAA,EAAa,OAAA;AAAA,IACb,GAAA,EAAK,6BAAA;AAAA,IACL,GAAA,EAAK,6BAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,GAAA,EAAK;AAAA,IACH,IAAA,EAAM,KAAA;AAAA,IACN,WAAA,EAAa,KAAA;AAAA,IACb,GAAA,EAAK,2BAAA;AAAA,IACL,GAAA,EAAK,2BAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,IAAA,EAAM,MAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,GAAA,EAAK,4BAAA;AAAA,IACL,GAAA,EAAK,4BAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,SAAA,EAAW;AAAA,IACT,IAAA,EAAM,WAAA;AAAA,IACN,WAAA,EAAa,WAAA;AAAA,IACb,GAAA,EAAK,iCAAA;AAAA,IACL,GAAA,EAAK,iCAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,OAAA,EAAS;AAAA,IACP,IAAA,EAAM,SAAA;AAAA,IACN,WAAA,EAAa,SAAA;AAAA,IACb,GAAA,EAAK,+BAAA;AAAA,IACL,GAAA,EAAK,+BAAA;AAAA,IACL,aAAA,EAAe;AAAA;AAEnB;AAKO,SAAS,YAAY,IAAA,EAA0C;AACpE,EAAA,OAAO,mBAAmB,IAAI,CAAA;AAChC;AAKO,SAAS,iBAAA,GAAgC;AAC9C,EAAA,OAAO,MAAA,CAAO,KAAK,kBAAkB,CAAA;AACvC;;;ACzKO,SAAS,eAAA,CACd,MACA,MAAA,EACoB;AACpB,EAAA,MAAM,QAAA,GAAW,YAAY,IAAI,CAAA;AACjC,EAAA,IAAI,CAAC,UAAU,OAAO,MAAA;AAEtB,EAAA,MAAM,cAAA,GAAiB,UAAU,QAAA,CAAS,aAAA;AAC1C,EAAA,OAAO,cAAA,KAAmB,KAAA,GAAQ,QAAA,CAAS,GAAA,GAAM,QAAA,CAAS,GAAA;AAC5D;AAKO,SAAS,mBAAmB,IAAA,EAAwB;AACzD,EAAA,MAAM,QAAA,GAAW,YAAY,IAAI,CAAA;AACjC,EAAA,OAAO,UAAU,WAAA,IAAe,IAAA;AAClC;ACPO,IAAM,WAAoC,CAAC;AAAA,EAChD,IAAA;AAAA,EACA,GAAA;AAAA,EACA,KAAA,GAAQ,GAAA;AAAA,EACR,MAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAQ,EAAC;AAAA,EACT,GAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA,GAAU;AACZ,CAAA,KAAM;AAEJ,EAAA,MAAM,UAAU,GAAA,KAAQ,IAAA,GAAO,eAAA,CAAgB,IAAA,EAAM,MAAM,CAAA,GAAI,MAAA,CAAA;AAC/D,EAAA,MAAM,WAAA,GAAc,IAAA,GAAO,kBAAA,CAAmB,IAAI,CAAA,GAAI,WAAA;AACtD,EAAA,MAAM,UAAU,GAAA,IAAO,WAAA;AAGvB,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,IAAI,QAAA,EAAU;AACZ,MAAA,uCAAU,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,IACrB;AACA,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,sBAAsB,SAAS,CAAA,CAAA;AAAA,QAC1C,KAAA,EAAO;AAAA,UACL,KAAA;AAAA,UACA,QAAQ,MAAA,IAAU,MAAA;AAAA,UAClB,OAAA,EAAS,MAAA;AAAA,UACT,UAAA,EAAY,QAAA;AAAA,UACZ,cAAA,EAAgB,QAAA;AAAA,UAChB,eAAA,EAAiB,SAAA;AAAA,UACjB,YAAA,EAAc,KAAA;AAAA,UACd,KAAA,EAAO,SAAA;AAAA,UACP,QAAA,EAAU,MAAA;AAAA,UACV,UAAA,EAAY,GAAA;AAAA,UACZ,GAAG;AAAA,SACL;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AAGA,EAAA,MAAM,YAAY,MAAA,IAAU,MAAA;AAG5B,EAAA,MAAM,QAAA,GAAgC;AAAA,IACpC,KAAA;AAAA,IACA,MAAA,EAAQ,SAAA;AAAA,IACR,SAAA,EAAW,SAAA;AAAA,IACX,GAAG;AAAA,GACL;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,OAAA;AAAA,MACL,GAAA,EAAK,OAAA;AAAA,MACL,SAAA,EAAW,aAAa,SAAS,CAAA,CAAA;AAAA,MACjC,KAAA,EAAO,QAAA;AAAA,MACP;AAAA;AAAA,GACF;AAEJ;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"index.mjs","sourcesContent":["import { BankLogoData, BankName } from \"../types\";\r\n\r\n/**\r\n * Central registry of all bank logos\r\n * Add new banks here - logo files should match the key names\r\n */\r\nexport const BANK_LOGO_REGISTRY: Record<BankName, BankLogoData> = {\r\n bca: {\r\n name: \"bca\",\r\n displayName: \"BCA\",\r\n svg: \"/assets/banks/svg/bca.svg\",\r\n png: \"/assets/banks/png/bca.png\",\r\n defaultFormat: \"svg\",\r\n },\r\n mandiri: {\r\n name: \"mandiri\",\r\n displayName: \"Bank Mandiri\",\r\n svg: \"/assets/banks/svg/mandiri.svg\",\r\n png: \"/assets/banks/png/mandiri.png\",\r\n defaultFormat: \"svg\",\r\n },\r\n bni: {\r\n name: \"bni\",\r\n displayName: \"BNI\",\r\n svg: \"/assets/banks/svg/bni.svg\",\r\n png: \"/assets/banks/png/bni.png\",\r\n defaultFormat: \"svg\",\r\n },\r\n bri: {\r\n name: \"bri\",\r\n displayName: \"BRI\",\r\n svg: \"/assets/banks/svg/bri.svg\",\r\n png: \"/assets/banks/png/bri.png\",\r\n defaultFormat: \"svg\",\r\n },\r\n cimb: {\r\n name: \"cimb\",\r\n displayName: \"CIMB Niaga\",\r\n svg: \"/assets/banks/svg/cimb.svg\",\r\n png: \"/assets/banks/png/cimb.png\",\r\n defaultFormat: \"svg\",\r\n },\r\n permata: {\r\n name: \"permata\",\r\n displayName: \"Bank Permata\",\r\n svg: \"/assets/banks/svg/permata.svg\",\r\n png: \"/assets/banks/png/permata.png\",\r\n defaultFormat: \"svg\",\r\n },\r\n danamon: {\r\n name: \"danamon\",\r\n displayName: \"Bank Danamon\",\r\n svg: \"/assets/banks/svg/danamon.svg\",\r\n png: \"/assets/banks/png/danamon.png\",\r\n defaultFormat: \"svg\",\r\n },\r\n maybank: {\r\n name: \"maybank\",\r\n displayName: \"Maybank\",\r\n svg: \"/assets/banks/svg/maybank.svg\",\r\n png: \"/assets/banks/png/maybank.png\",\r\n defaultFormat: \"svg\",\r\n },\r\n ocbc: {\r\n name: \"ocbc\",\r\n displayName: \"OCBC NISP\",\r\n svg: \"/assets/banks/svg/ocbc.svg\",\r\n png: \"/assets/banks/png/ocbc.png\",\r\n defaultFormat: \"svg\",\r\n },\r\n hsbc: {\r\n name: \"hsbc\",\r\n displayName: \"HSBC\",\r\n svg: \"/assets/banks/svg/hsbc.svg\",\r\n png: \"/assets/banks/png/hsbc.png\",\r\n defaultFormat: \"svg\",\r\n },\r\n citibank: {\r\n name: \"citibank\",\r\n displayName: \"Citibank\",\r\n svg: \"/assets/banks/svg/citibank.svg\",\r\n png: \"/assets/banks/png/citibank.png\",\r\n defaultFormat: \"svg\",\r\n },\r\n \"standard-chartered\": {\r\n name: \"standard-chartered\",\r\n displayName: \"Standard Chartered\",\r\n svg: \"/assets/banks/svg/standard-chartered.svg\",\r\n png: \"/assets/banks/png/standard-chartered.png\",\r\n defaultFormat: \"svg\",\r\n },\r\n panin: {\r\n name: \"panin\",\r\n displayName: \"Bank Panin\",\r\n svg: \"/assets/banks/svg/panin.svg\",\r\n png: \"/assets/banks/png/panin.png\",\r\n defaultFormat: \"svg\",\r\n },\r\n btn: {\r\n name: \"btn\",\r\n displayName: \"BTN\",\r\n svg: \"/assets/banks/svg/btn.svg\",\r\n png: \"/assets/banks/png/btn.png\",\r\n defaultFormat: \"svg\",\r\n },\r\n mega: {\r\n name: \"mega\",\r\n displayName: \"Bank Mega\",\r\n svg: \"/assets/banks/svg/mega.svg\",\r\n png: \"/assets/banks/png/mega.png\",\r\n defaultFormat: \"svg\",\r\n },\r\n \"mega-syariah\": {\r\n name: \"mega-syariah\",\r\n displayName: \"Bank Mega Syariah\",\r\n svg: \"/assets/banks/svg/mega-syariah.svg\",\r\n png: \"/assets/banks/png/mega-syariah.png\",\r\n defaultFormat: \"svg\",\r\n },\r\n seabank: {\r\n name: \"seabank\",\r\n displayName: \"Bank Seabank\",\r\n svg: \"/assets/banks/svg/seabank.svg\",\r\n png: \"/assets/banks/png/seabank.png\",\r\n defaultFormat: \"svg\",\r\n },\r\n gopay: {\r\n name: \"gopay\",\r\n displayName: \"GoPay\",\r\n svg: \"/assets/banks/svg/gopay.svg\",\r\n png: \"/assets/banks/png/gopay.png\",\r\n defaultFormat: \"svg\",\r\n },\r\n ovo: {\r\n name: \"ovo\",\r\n displayName: \"OVO\",\r\n svg: \"/assets/banks/svg/ovo.svg\",\r\n png: \"/assets/banks/png/ovo.png\",\r\n defaultFormat: \"svg\",\r\n },\r\n dana: {\r\n name: \"dana\",\r\n displayName: \"DANA\",\r\n svg: \"/assets/banks/svg/dana.svg\",\r\n png: \"/assets/banks/png/dana.png\",\r\n defaultFormat: \"svg\",\r\n },\r\n shopeepay: {\r\n name: \"shopeepay\",\r\n displayName: \"ShopeePay\",\r\n svg: \"/assets/banks/svg/shopeepay.svg\",\r\n png: \"/assets/banks/png/shopeepay.png\",\r\n defaultFormat: \"svg\",\r\n },\r\n linkaja: {\r\n name: \"linkaja\",\r\n displayName: \"LinkAja\",\r\n svg: \"/assets/banks/svg/linkaja.svg\",\r\n png: \"/assets/banks/png/linkaja.png\",\r\n defaultFormat: \"svg\",\r\n },\r\n};\r\n\r\n/**\r\n * Get logo data by bank name\r\n */\r\nexport function getBankLogo(name: BankName): BankLogoData | undefined {\r\n return BANK_LOGO_REGISTRY[name];\r\n}\r\n\r\n/**\r\n * Get all available bank names\r\n */\r\nexport function getAvailableBanks(): BankName[] {\r\n return Object.keys(BANK_LOGO_REGISTRY) as BankName[];\r\n}\r\n","import { getBankLogo } from \"../registry/bankLogoMap\";\r\nimport { BankName, LogoFormat } from \"../types\";\r\n\r\n/**\r\n * Resolve the correct logo path based on bank name and format\r\n */\r\nexport function resolveLogoPath(\r\n name: BankName,\r\n format?: LogoFormat,\r\n): string | undefined {\r\n const logoData = getBankLogo(name);\r\n if (!logoData) return undefined;\r\n\r\n const selectedFormat = format || logoData.defaultFormat;\r\n return selectedFormat === \"svg\" ? logoData.svg : logoData.png;\r\n}\r\n\r\n/**\r\n * Get display name for a bank\r\n */\r\nexport function getBankDisplayName(name: BankName): string {\r\n const logoData = getBankLogo(name);\r\n return logoData?.displayName || name;\r\n}\r\n","import React from \"react\";\r\nimport { BankLogoProps } from \"../types\";\r\nimport { getBankDisplayName, resolveLogoPath } from \"../utils/logoResolver\";\r\n\r\n/**\r\n * BankLogo Component\r\n *\r\n * Displays bank logos with automatic format detection and fallback handling.\r\n * Optimized for wedding invitation gift/payment sections.\r\n *\r\n * @example\r\n * ```tsx\r\n * <BankLogo name=\"bca\" width={120} />\r\n * <BankLogo src=\"/custom/logo.png\" width={100} />\r\n * ```\r\n */\r\nexport const BankLogo: React.FC<BankLogoProps> = ({\r\n name,\r\n src,\r\n width = 120,\r\n height,\r\n format,\r\n className = \"\",\r\n style = {},\r\n alt,\r\n fallback,\r\n loading = \"lazy\",\r\n}) => {\r\n // Resolve logo source\r\n const logoSrc = src || (name ? resolveLogoPath(name, format) : undefined);\r\n const displayName = name ? getBankDisplayName(name) : \"Bank Logo\";\r\n const altText = alt || displayName;\r\n\r\n // Fallback if logo not found\r\n if (!logoSrc) {\r\n if (fallback) {\r\n return <>{fallback}</>;\r\n }\r\n return (\r\n <div\r\n className={`bank-logo-fallback ${className}`}\r\n style={{\r\n width,\r\n height: height || \"auto\",\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n backgroundColor: \"#f3f4f6\",\r\n borderRadius: \"4px\",\r\n color: \"#6b7280\",\r\n fontSize: \"12px\",\r\n fontWeight: 500,\r\n ...style,\r\n }}\r\n >\r\n {displayName}\r\n </div>\r\n );\r\n }\r\n\r\n // Calculate height if not provided (maintain aspect ratio)\r\n const imgHeight = height || \"auto\";\r\n\r\n // Base styles\r\n const imgStyle: React.CSSProperties = {\r\n width,\r\n height: imgHeight,\r\n objectFit: \"contain\",\r\n ...style,\r\n };\r\n\r\n return (\r\n <img\r\n src={logoSrc}\r\n alt={altText}\r\n className={`bank-logo ${className}`}\r\n style={imgStyle}\r\n loading={loading}\r\n />\r\n );\r\n};\r\n\r\nBankLogo.displayName = \"BankLogo\";\r\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/registry/bankLogoMap.ts","../src/utils/logoResolver.ts","../src/components/BankLogo.tsx"],"names":[],"mappings":"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","file":"index.mjs","sourcesContent":["import bcaSvg from \"../assets/banks/bca.svg\";\r\nimport bniSvg from \"../assets/banks/bni.svg\";\r\nimport briSvg from \"../assets/banks/bri.svg\";\r\nimport btnSvg from \"../assets/banks/btn.svg\";\r\nimport cimbSvg from \"../assets/banks/cimb.svg\";\r\nimport citibankSvg from \"../assets/banks/citibank.svg\";\r\nimport danaSvg from \"../assets/banks/dana.svg\";\r\nimport danamonSvg from \"../assets/banks/danamon.svg\";\r\nimport gopaySvg from \"../assets/banks/gopay.svg\";\r\nimport hsbcSvg from \"../assets/banks/hsbc.svg\";\r\nimport linkajaSvg from \"../assets/banks/linkaja.svg\";\r\nimport mandiriSvg from \"../assets/banks/mandiri.svg\";\r\nimport maybankSvg from \"../assets/banks/maybank.svg\";\r\nimport megaSyariahSvg from \"../assets/banks/mega-syariah.svg\";\r\nimport megaSvg from \"../assets/banks/mega.svg\";\r\nimport ocbcSvg from \"../assets/banks/ocbc.svg\";\r\nimport ovoSvg from \"../assets/banks/ovo.svg\";\r\nimport paninSvg from \"../assets/banks/panin.svg\";\r\nimport permataSvg from \"../assets/banks/permata.svg\";\r\nimport seabankSvg from \"../assets/banks/seabank.svg\";\r\nimport shopeepaySvg from \"../assets/banks/shopeepay.svg\";\r\nimport standardCharteredSvg from \"../assets/banks/standard-chartered.svg\";\r\nimport { BankLogoData, BankName } from \"../types\";\r\n\r\n/**\r\n * Central registry of all bank logos\r\n * Add new banks here - logo files should match the key names\r\n */\r\nexport const BANK_LOGO_REGISTRY: Record<BankName, BankLogoData> = {\r\n bca: {\r\n name: \"bca\",\r\n displayName: \"BCA\",\r\n svg: bcaSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n mandiri: {\r\n name: \"mandiri\",\r\n displayName: \"Bank Mandiri\",\r\n svg: mandiriSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n bni: {\r\n name: \"bni\",\r\n displayName: \"BNI\",\r\n svg: bniSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n bri: {\r\n name: \"bri\",\r\n displayName: \"BRI\",\r\n svg: briSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n cimb: {\r\n name: \"cimb\",\r\n displayName: \"CIMB Niaga\",\r\n svg: cimbSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n permata: {\r\n name: \"permata\",\r\n displayName: \"Bank Permata\",\r\n svg: permataSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n danamon: {\r\n name: \"danamon\",\r\n displayName: \"Bank Danamon\",\r\n svg: danamonSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n maybank: {\r\n name: \"maybank\",\r\n displayName: \"Maybank\",\r\n svg: maybankSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n ocbc: {\r\n name: \"ocbc\",\r\n displayName: \"OCBC NISP\",\r\n svg: ocbcSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n hsbc: {\r\n name: \"hsbc\",\r\n displayName: \"HSBC\",\r\n svg: hsbcSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n citibank: {\r\n name: \"citibank\",\r\n displayName: \"Citibank\",\r\n svg: citibankSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n \"standard-chartered\": {\r\n name: \"standard-chartered\",\r\n displayName: \"Standard Chartered\",\r\n svg: standardCharteredSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n panin: {\r\n name: \"panin\",\r\n displayName: \"Bank Panin\",\r\n svg: paninSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n btn: {\r\n name: \"btn\",\r\n displayName: \"BTN\",\r\n svg: btnSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n mega: {\r\n name: \"mega\",\r\n displayName: \"Bank Mega\",\r\n svg: megaSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n \"mega-syariah\": {\r\n name: \"mega-syariah\",\r\n displayName: \"Bank Mega Syariah\",\r\n svg: megaSyariahSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n seabank: {\r\n name: \"seabank\",\r\n displayName: \"Bank Seabank\",\r\n svg: seabankSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n gopay: {\r\n name: \"gopay\",\r\n displayName: \"GoPay\",\r\n svg: gopaySvg,\r\n defaultFormat: \"svg\",\r\n },\r\n ovo: {\r\n name: \"ovo\",\r\n displayName: \"OVO\",\r\n svg: ovoSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n dana: {\r\n name: \"dana\",\r\n displayName: \"DANA\",\r\n svg: danaSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n shopeepay: {\r\n name: \"shopeepay\",\r\n displayName: \"ShopeePay\",\r\n svg: shopeepaySvg,\r\n defaultFormat: \"svg\",\r\n },\r\n linkaja: {\r\n name: \"linkaja\",\r\n displayName: \"LinkAja\",\r\n svg: linkajaSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n};\r\n\r\n/**\r\n * Get logo data by bank name\r\n */\r\nexport function getBankLogo(name: BankName): BankLogoData | undefined {\r\n return BANK_LOGO_REGISTRY[name];\r\n}\r\n\r\n/**\r\n * Get all available bank names\r\n */\r\nexport function getAvailableBanks(): BankName[] {\r\n return Object.keys(BANK_LOGO_REGISTRY) as BankName[];\r\n}\r\n","import { getBankLogo } from \"../registry/bankLogoMap\";\r\nimport { BankName, LogoFormat } from \"../types\";\r\n\r\n/**\r\n * Resolve the correct logo path based on bank name and format\r\n */\r\nexport function resolveLogoPath(\r\n name: BankName,\r\n format?: LogoFormat,\r\n): string | undefined {\r\n const logoData = getBankLogo(name);\r\n if (!logoData) return undefined;\r\n\r\n const selectedFormat = format || logoData.defaultFormat;\r\n return selectedFormat === \"svg\" ? logoData.svg : logoData.png;\r\n}\r\n\r\n/**\r\n * Get display name for a bank\r\n */\r\nexport function getBankDisplayName(name: BankName): string {\r\n const logoData = getBankLogo(name);\r\n return logoData?.displayName || name;\r\n}\r\n","import React from \"react\";\r\nimport { BankLogoProps } from \"../types\";\r\nimport { getBankDisplayName, resolveLogoPath } from \"../utils/logoResolver\";\r\n\r\n/**\r\n * BankLogo Component\r\n *\r\n * Displays bank logos with automatic format detection and fallback handling.\r\n * Optimized for wedding invitation gift/payment sections.\r\n *\r\n * @example\r\n * ```tsx\r\n * <BankLogo name=\"bca\" width={120} />\r\n * <BankLogo src=\"/custom/logo.png\" width={100} />\r\n * ```\r\n */\r\nexport const BankLogo: React.FC<BankLogoProps> = ({\r\n name,\r\n src,\r\n width = 120,\r\n height,\r\n format,\r\n className = \"\",\r\n style = {},\r\n alt,\r\n fallback,\r\n loading = \"lazy\",\r\n}) => {\r\n // Resolve logo source\r\n const logoSrc = src || (name ? resolveLogoPath(name, format) : undefined);\r\n const displayName = name ? getBankDisplayName(name) : \"Bank Logo\";\r\n const altText = alt || displayName;\r\n\r\n // Fallback if logo not found\r\n if (!logoSrc) {\r\n if (fallback) {\r\n return <>{fallback}</>;\r\n }\r\n return (\r\n <div\r\n className={`bank-logo-fallback ${className}`}\r\n style={{\r\n width,\r\n height: height || \"auto\",\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n backgroundColor: \"#f3f4f6\",\r\n borderRadius: \"4px\",\r\n color: \"#6b7280\",\r\n fontSize: \"12px\",\r\n fontWeight: 500,\r\n ...style,\r\n }}\r\n >\r\n {displayName}\r\n </div>\r\n );\r\n }\r\n\r\n // Calculate height if not provided (maintain aspect ratio)\r\n const imgHeight = height || \"auto\";\r\n\r\n // Base styles\r\n const imgStyle: React.CSSProperties = {\r\n width,\r\n height: imgHeight,\r\n objectFit: \"contain\",\r\n ...style,\r\n };\r\n\r\n return (\r\n <img\r\n src={logoSrc}\r\n alt={altText}\r\n className={`bank-logo ${className}`}\r\n style={imgStyle}\r\n loading={loading}\r\n />\r\n );\r\n};\r\n\r\nBankLogo.displayName = \"BankLogo\";\r\n"]}
|
package/package.json
CHANGED
|
@@ -1,41 +1,41 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "react-bank-logo",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "Reusable bank logo component for React applications",
|
|
5
|
-
"private": false,
|
|
6
|
-
"main": "./dist/index.js",
|
|
7
|
-
"module": "./dist/index.mjs",
|
|
8
|
-
"types": "./dist/index.d.ts",
|
|
9
|
-
"author": "M. Shadiq Firmansyah Basiru",
|
|
10
|
-
"license": "MIT",
|
|
11
|
-
"files": [
|
|
12
|
-
"dist"
|
|
13
|
-
],
|
|
14
|
-
"sideEffects": false,
|
|
15
|
-
"scripts": {
|
|
16
|
-
"dev": "tsup --watch",
|
|
17
|
-
"build": "tsup",
|
|
18
|
-
"lint": "eslint src --ext .ts,.tsx",
|
|
19
|
-
"type-check": "tsc --noEmit",
|
|
20
|
-
"prepublishOnly": "npm run build"
|
|
21
|
-
},
|
|
22
|
-
"repository": {
|
|
23
|
-
"type": "git",
|
|
24
|
-
"url": "https://github.com/shodiqbasiru/react-bank-logo.git"
|
|
25
|
-
},
|
|
26
|
-
"peerDependencies": {
|
|
27
|
-
"react": ">=18.0.0",
|
|
28
|
-
"react-dom": ">=18.0.0"
|
|
29
|
-
},
|
|
30
|
-
"devDependencies": {
|
|
31
|
-
"@types/react": "^18.3.18",
|
|
32
|
-
"@types/react-dom": "^18.3.5",
|
|
33
|
-
"@typescript-eslint/eslint-plugin": "^8.21.0",
|
|
34
|
-
"@typescript-eslint/parser": "^8.21.0",
|
|
35
|
-
"eslint": "^9.18.0",
|
|
36
|
-
"eslint-plugin-react": "^7.37.3",
|
|
37
|
-
"eslint-plugin-react-hooks": "^5.1.0",
|
|
38
|
-
"tsup": "^8.3.5",
|
|
39
|
-
"typescript": "^5.7.3"
|
|
40
|
-
}
|
|
41
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "react-bank-logo",
|
|
3
|
+
"version": "0.1.1",
|
|
4
|
+
"description": "Reusable bank logo component for React applications",
|
|
5
|
+
"private": false,
|
|
6
|
+
"main": "./dist/index.js",
|
|
7
|
+
"module": "./dist/index.mjs",
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
|
+
"author": "M. Shadiq Firmansyah Basiru",
|
|
10
|
+
"license": "MIT",
|
|
11
|
+
"files": [
|
|
12
|
+
"dist"
|
|
13
|
+
],
|
|
14
|
+
"sideEffects": false,
|
|
15
|
+
"scripts": {
|
|
16
|
+
"dev": "tsup --watch",
|
|
17
|
+
"build": "tsup",
|
|
18
|
+
"lint": "eslint src --ext .ts,.tsx",
|
|
19
|
+
"type-check": "tsc --noEmit",
|
|
20
|
+
"prepublishOnly": "npm run build"
|
|
21
|
+
},
|
|
22
|
+
"repository": {
|
|
23
|
+
"type": "git",
|
|
24
|
+
"url": "https://github.com/shodiqbasiru/react-bank-logo.git"
|
|
25
|
+
},
|
|
26
|
+
"peerDependencies": {
|
|
27
|
+
"react": ">=18.0.0",
|
|
28
|
+
"react-dom": ">=18.0.0"
|
|
29
|
+
},
|
|
30
|
+
"devDependencies": {
|
|
31
|
+
"@types/react": "^18.3.18",
|
|
32
|
+
"@types/react-dom": "^18.3.5",
|
|
33
|
+
"@typescript-eslint/eslint-plugin": "^8.21.0",
|
|
34
|
+
"@typescript-eslint/parser": "^8.21.0",
|
|
35
|
+
"eslint": "^9.18.0",
|
|
36
|
+
"eslint-plugin-react": "^7.37.3",
|
|
37
|
+
"eslint-plugin-react-hooks": "^5.1.0",
|
|
38
|
+
"tsup": "^8.3.5",
|
|
39
|
+
"typescript": "^5.7.3"
|
|
40
|
+
}
|
|
41
|
+
}
|