react-bank-logo 0.1.0

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.
Files changed (9) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +73 -0
  3. package/dist/index.d.mts +92 -0
  4. package/dist/index.d.ts +92 -0
  5. package/dist/index.js +247 -0
  6. package/dist/index.js.map +1 -0
  7. package/dist/index.mjs +240 -0
  8. package/dist/index.mjs.map +1 -0
  9. package/package.json +41 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 M. Shadiq Firmansyah Basiru
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,73 @@
1
+ # react-bank-logo
2
+
3
+ A beautiful, reusable, and optimized React component for displaying Indonesian bank & e-wallet logos. Perfect for wedding invitations, donation pages, or payment gateways.
4
+
5
+ [![npm version](https://img.shields.io/npm/v/react-bank-logo.svg)](https://www.npmjs.com/package/react-bank-logo)
6
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
7
+
8
+ ## Features
9
+
10
+ - **Comprehensive Registry**: Supports major Indonesian banks and e-wallets.
11
+ - **SVG & PNG Support**: High-quality vectors and optimized raster fallbacks.
12
+ - **Lazy Loading**: Built-in lazy loading for better performance.
13
+ - **TypeScript Ready**: Full type safety for bank names and props.
14
+ - **Customizable**: Easy to style with `className` and `style` props.
15
+
16
+ ## Installation
17
+
18
+ ```bash
19
+ npm install react-bank-logo
20
+ # or
21
+ yarn add react-bank-logo
22
+ # or
23
+ pnpm add react-bank-logo
24
+ ```
25
+
26
+ ## Basic Usage
27
+
28
+ ```tsx
29
+ import { BankLogo } from "react-bank-logo";
30
+
31
+ function MyComponent() {
32
+ return (
33
+ <div>
34
+ {/* Basic usage using bank name */}
35
+ <BankLogo name="bca" width={100} />
36
+
37
+ {/* Using E-Wallet name */}
38
+ <BankLogo name="gopay" width={120} />
39
+
40
+ {/* Custom source fallback */}
41
+ <BankLogo name="mandiri" src="/my-custom-mandiri-logo.png" />
42
+ </div>
43
+ );
44
+ }
45
+ ```
46
+
47
+ ## API Reference
48
+
49
+ ### `BankLogo` Props
50
+
51
+ | Prop | Type | Default | Description |
52
+ | :---------- | :------------------ | :----------------- | :---------------------------------------------------------- |
53
+ | `name` | `BankName` | - | The key of the bank (e.g., 'bca', 'mandiri', 'gopay'). |
54
+ | `src` | `string` | - | Custom image source. Overrides the `name` prop if provided. |
55
+ | `width` | `number` | `120` | Width of the logo in pixels. |
56
+ | `height` | `number` | `auto` | Height of the logo in pixels. |
57
+ | `format` | `'svg' \| 'png'` | `registry default` | Force a specific image format. |
58
+ | `className` | `string` | `""` | Additional CSS classes for the container/image. |
59
+ | `style` | `CSSProperties` | `{}` | Inline styles for the image. |
60
+ | `alt` | `string` | `Bank Name` | Alt text for the image. |
61
+ | `fallback` | `ReactNode` | `Bank Name Text` | Content to show if the logo fails to load. |
62
+ | `loading` | `'lazy' \| 'eager'` | `'lazy'` | Image loading strategy. |
63
+
64
+ ## Supported Banks & E-Wallets
65
+
66
+ Below are some of the supported keys for the `name` prop:
67
+
68
+ - **Banks**: `bca`, `mandiri`, `bni`, `bri`, `cimb`, `permata`, `danamon`, `maybank`, `ocbc`, `hsbc`, `citibank`, `standard-chartered`, `panin`, `btn`, `mega`, `mega-syariah`, `seabank`.
69
+ - **E-Wallets**: `gopay`, `ovo`, `dana`, `shopeepay`, `linkaja`.
70
+
71
+ ## License
72
+
73
+ MIT © [M. Shadiq Firmansyah Basiru](https://github.com/shodiqbasiru)
package/dist/index.d.mts ADDED
@@ -0,0 +1,92 @@
1
+ import React$1 from 'react';
2
+
3
+ type BankName = "bca" | "mandiri" | "bni" | "bri" | "cimb" | "permata" | "danamon" | "maybank" | "ocbc" | "hsbc" | "citibank" | "standard-chartered" | "panin" | "btn" | "mega" | "mega-syariah" | "seabank" | "gopay" | "ovo" | "dana" | "shopeepay" | "linkaja";
4
+ type LogoFormat = "svg" | "png";
5
+ interface BankLogoData {
6
+ name: BankName;
7
+ displayName: string;
8
+ svg?: string;
9
+ png?: string;
10
+ defaultFormat: LogoFormat;
11
+ }
12
+ interface BankLogoProps {
13
+ /**
14
+ * Bank name from predefined list
15
+ */
16
+ name?: BankName;
17
+ /**
18
+ * Custom logo source (overrides name)
19
+ */
20
+ src?: string;
21
+ /**
22
+ * Width in pixels
23
+ */
24
+ width?: number;
25
+ /**
26
+ * Height in pixels (auto-calculated if not provided)
27
+ */
28
+ height?: number;
29
+ /**
30
+ * Preferred format (defaults to registry default)
31
+ */
32
+ format?: LogoFormat;
33
+ /**
34
+ * Additional CSS class
35
+ */
36
+ className?: string;
37
+ /**
38
+ * Inline styles
39
+ */
40
+ style?: React.CSSProperties;
41
+ /**
42
+ * Alt text (defaults to bank display name)
43
+ */
44
+ alt?: string;
45
+ /**
46
+ * Fallback element when logo not found
47
+ */
48
+ fallback?: React.ReactNode;
49
+ /**
50
+ * Loading strategy (lazy/eager)
51
+ */
52
+ loading?: "lazy" | "eager";
53
+ }
54
+
55
+ /**
56
+ * BankLogo Component
57
+ *
58
+ * Displays bank logos with automatic format detection and fallback handling.
59
+ * Optimized for wedding invitation gift/payment sections.
60
+ *
61
+ * @example
62
+ * ```tsx
63
+ * <BankLogo name="bca" width={120} />
64
+ * <BankLogo src="/custom/logo.png" width={100} />
65
+ * ```
66
+ */
67
+ declare const BankLogo: React$1.FC<BankLogoProps>;
68
+
69
+ /**
70
+ * Central registry of all bank logos
71
+ * Add new banks here - logo files should match the key names
72
+ */
73
+ declare const BANK_LOGO_REGISTRY: Record<BankName, BankLogoData>;
74
+ /**
75
+ * Get logo data by bank name
76
+ */
77
+ declare function getBankLogo(name: BankName): BankLogoData | undefined;
78
+ /**
79
+ * Get all available bank names
80
+ */
81
+ declare function getAvailableBanks(): BankName[];
82
+
83
+ /**
84
+ * Resolve the correct logo path based on bank name and format
85
+ */
86
+ declare function resolveLogoPath(name: BankName, format?: LogoFormat): string | undefined;
87
+ /**
88
+ * Get display name for a bank
89
+ */
90
+ declare function getBankDisplayName(name: BankName): string;
91
+
92
+ export { BANK_LOGO_REGISTRY, BankLogo, type BankLogoData, type BankLogoProps, type BankName, type LogoFormat, getAvailableBanks, getBankDisplayName, getBankLogo, resolveLogoPath };
package/dist/index.d.ts ADDED
@@ -0,0 +1,92 @@
1
+ import React$1 from 'react';
2
+
3
+ type BankName = "bca" | "mandiri" | "bni" | "bri" | "cimb" | "permata" | "danamon" | "maybank" | "ocbc" | "hsbc" | "citibank" | "standard-chartered" | "panin" | "btn" | "mega" | "mega-syariah" | "seabank" | "gopay" | "ovo" | "dana" | "shopeepay" | "linkaja";
4
+ type LogoFormat = "svg" | "png";
5
+ interface BankLogoData {
6
+ name: BankName;
7
+ displayName: string;
8
+ svg?: string;
9
+ png?: string;
10
+ defaultFormat: LogoFormat;
11
+ }
12
+ interface BankLogoProps {
13
+ /**
14
+ * Bank name from predefined list
15
+ */
16
+ name?: BankName;
17
+ /**
18
+ * Custom logo source (overrides name)
19
+ */
20
+ src?: string;
21
+ /**
22
+ * Width in pixels
23
+ */
24
+ width?: number;
25
+ /**
26
+ * Height in pixels (auto-calculated if not provided)
27
+ */
28
+ height?: number;
29
+ /**
30
+ * Preferred format (defaults to registry default)
31
+ */
32
+ format?: LogoFormat;
33
+ /**
34
+ * Additional CSS class
35
+ */
36
+ className?: string;
37
+ /**
38
+ * Inline styles
39
+ */
40
+ style?: React.CSSProperties;
41
+ /**
42
+ * Alt text (defaults to bank display name)
43
+ */
44
+ alt?: string;
45
+ /**
46
+ * Fallback element when logo not found
47
+ */
48
+ fallback?: React.ReactNode;
49
+ /**
50
+ * Loading strategy (lazy/eager)
51
+ */
52
+ loading?: "lazy" | "eager";
53
+ }
54
+
55
+ /**
56
+ * BankLogo Component
57
+ *
58
+ * Displays bank logos with automatic format detection and fallback handling.
59
+ * Optimized for wedding invitation gift/payment sections.
60
+ *
61
+ * @example
62
+ * ```tsx
63
+ * <BankLogo name="bca" width={120} />
64
+ * <BankLogo src="/custom/logo.png" width={100} />
65
+ * ```
66
+ */
67
+ declare const BankLogo: React$1.FC<BankLogoProps>;
68
+
69
+ /**
70
+ * Central registry of all bank logos
71
+ * Add new banks here - logo files should match the key names
72
+ */
73
+ declare const BANK_LOGO_REGISTRY: Record<BankName, BankLogoData>;
74
+ /**
75
+ * Get logo data by bank name
76
+ */
77
+ declare function getBankLogo(name: BankName): BankLogoData | undefined;
78
+ /**
79
+ * Get all available bank names
80
+ */
81
+ declare function getAvailableBanks(): BankName[];
82
+
83
+ /**
84
+ * Resolve the correct logo path based on bank name and format
85
+ */
86
+ declare function resolveLogoPath(name: BankName, format?: LogoFormat): string | undefined;
87
+ /**
88
+ * Get display name for a bank
89
+ */
90
+ declare function getBankDisplayName(name: BankName): string;
91
+
92
+ export { BANK_LOGO_REGISTRY, BankLogo, type BankLogoData, type BankLogoProps, type BankName, type LogoFormat, getAvailableBanks, getBankDisplayName, getBankLogo, resolveLogoPath };
package/dist/index.js ADDED
@@ -0,0 +1,247 @@
1
+ 'use strict';
2
+
3
+ var jsxRuntime = require('react/jsx-runtime');
4
+
5
+ // src/registry/bankLogoMap.ts
6
+ var BANK_LOGO_REGISTRY = {
7
+ bca: {
8
+ name: "bca",
9
+ displayName: "BCA",
10
+ svg: "/assets/banks/svg/bca.svg",
11
+ png: "/assets/banks/png/bca.png",
12
+ defaultFormat: "svg"
13
+ },
14
+ mandiri: {
15
+ name: "mandiri",
16
+ displayName: "Bank Mandiri",
17
+ svg: "/assets/banks/svg/mandiri.svg",
18
+ png: "/assets/banks/png/mandiri.png",
19
+ defaultFormat: "svg"
20
+ },
21
+ bni: {
22
+ name: "bni",
23
+ displayName: "BNI",
24
+ svg: "/assets/banks/svg/bni.svg",
25
+ png: "/assets/banks/png/bni.png",
26
+ defaultFormat: "svg"
27
+ },
28
+ bri: {
29
+ name: "bri",
30
+ displayName: "BRI",
31
+ svg: "/assets/banks/svg/bri.svg",
32
+ png: "/assets/banks/png/bri.png",
33
+ defaultFormat: "svg"
34
+ },
35
+ cimb: {
36
+ name: "cimb",
37
+ displayName: "CIMB Niaga",
38
+ svg: "/assets/banks/svg/cimb.svg",
39
+ png: "/assets/banks/png/cimb.png",
40
+ defaultFormat: "svg"
41
+ },
42
+ permata: {
43
+ name: "permata",
44
+ displayName: "Bank Permata",
45
+ svg: "/assets/banks/svg/permata.svg",
46
+ png: "/assets/banks/png/permata.png",
47
+ defaultFormat: "svg"
48
+ },
49
+ danamon: {
50
+ name: "danamon",
51
+ displayName: "Bank Danamon",
52
+ svg: "/assets/banks/svg/danamon.svg",
53
+ png: "/assets/banks/png/danamon.png",
54
+ defaultFormat: "svg"
55
+ },
56
+ maybank: {
57
+ name: "maybank",
58
+ displayName: "Maybank",
59
+ svg: "/assets/banks/svg/maybank.svg",
60
+ png: "/assets/banks/png/maybank.png",
61
+ defaultFormat: "svg"
62
+ },
63
+ ocbc: {
64
+ name: "ocbc",
65
+ displayName: "OCBC NISP",
66
+ svg: "/assets/banks/svg/ocbc.svg",
67
+ png: "/assets/banks/png/ocbc.png",
68
+ defaultFormat: "svg"
69
+ },
70
+ hsbc: {
71
+ name: "hsbc",
72
+ displayName: "HSBC",
73
+ svg: "/assets/banks/svg/hsbc.svg",
74
+ png: "/assets/banks/png/hsbc.png",
75
+ defaultFormat: "svg"
76
+ },
77
+ citibank: {
78
+ name: "citibank",
79
+ displayName: "Citibank",
80
+ svg: "/assets/banks/svg/citibank.svg",
81
+ png: "/assets/banks/png/citibank.png",
82
+ defaultFormat: "svg"
83
+ },
84
+ "standard-chartered": {
85
+ name: "standard-chartered",
86
+ displayName: "Standard Chartered",
87
+ svg: "/assets/banks/svg/standard-chartered.svg",
88
+ png: "/assets/banks/png/standard-chartered.png",
89
+ defaultFormat: "svg"
90
+ },
91
+ panin: {
92
+ name: "panin",
93
+ displayName: "Bank Panin",
94
+ svg: "/assets/banks/svg/panin.svg",
95
+ png: "/assets/banks/png/panin.png",
96
+ defaultFormat: "svg"
97
+ },
98
+ btn: {
99
+ name: "btn",
100
+ displayName: "BTN",
101
+ svg: "/assets/banks/svg/btn.svg",
102
+ png: "/assets/banks/png/btn.png",
103
+ defaultFormat: "svg"
104
+ },
105
+ mega: {
106
+ name: "mega",
107
+ displayName: "Bank Mega",
108
+ svg: "/assets/banks/svg/mega.svg",
109
+ png: "/assets/banks/png/mega.png",
110
+ defaultFormat: "svg"
111
+ },
112
+ "mega-syariah": {
113
+ name: "mega-syariah",
114
+ displayName: "Bank Mega Syariah",
115
+ svg: "/assets/banks/svg/mega-syariah.svg",
116
+ png: "/assets/banks/png/mega-syariah.png",
117
+ defaultFormat: "svg"
118
+ },
119
+ seabank: {
120
+ name: "seabank",
121
+ displayName: "Bank Seabank",
122
+ svg: "/assets/banks/svg/seabank.svg",
123
+ png: "/assets/banks/png/seabank.png",
124
+ defaultFormat: "svg"
125
+ },
126
+ gopay: {
127
+ name: "gopay",
128
+ displayName: "GoPay",
129
+ svg: "/assets/banks/svg/gopay.svg",
130
+ png: "/assets/banks/png/gopay.png",
131
+ defaultFormat: "svg"
132
+ },
133
+ ovo: {
134
+ name: "ovo",
135
+ displayName: "OVO",
136
+ svg: "/assets/banks/svg/ovo.svg",
137
+ png: "/assets/banks/png/ovo.png",
138
+ defaultFormat: "svg"
139
+ },
140
+ dana: {
141
+ name: "dana",
142
+ displayName: "DANA",
143
+ svg: "/assets/banks/svg/dana.svg",
144
+ png: "/assets/banks/png/dana.png",
145
+ defaultFormat: "svg"
146
+ },
147
+ shopeepay: {
148
+ name: "shopeepay",
149
+ displayName: "ShopeePay",
150
+ svg: "/assets/banks/svg/shopeepay.svg",
151
+ png: "/assets/banks/png/shopeepay.png",
152
+ defaultFormat: "svg"
153
+ },
154
+ linkaja: {
155
+ name: "linkaja",
156
+ displayName: "LinkAja",
157
+ svg: "/assets/banks/svg/linkaja.svg",
158
+ png: "/assets/banks/png/linkaja.png",
159
+ defaultFormat: "svg"
160
+ }
161
+ };
162
+ function getBankLogo(name) {
163
+ return BANK_LOGO_REGISTRY[name];
164
+ }
165
+ function getAvailableBanks() {
166
+ return Object.keys(BANK_LOGO_REGISTRY);
167
+ }
168
+
169
+ // src/utils/logoResolver.ts
170
+ function resolveLogoPath(name, format) {
171
+ const logoData = getBankLogo(name);
172
+ if (!logoData) return void 0;
173
+ const selectedFormat = format || logoData.defaultFormat;
174
+ return selectedFormat === "svg" ? logoData.svg : logoData.png;
175
+ }
176
+ function getBankDisplayName(name) {
177
+ const logoData = getBankLogo(name);
178
+ return logoData?.displayName || name;
179
+ }
180
+ var BankLogo = ({
181
+ name,
182
+ src,
183
+ width = 120,
184
+ height,
185
+ format,
186
+ className = "",
187
+ style = {},
188
+ alt,
189
+ fallback,
190
+ loading = "lazy"
191
+ }) => {
192
+ const logoSrc = src || (name ? resolveLogoPath(name, format) : void 0);
193
+ const displayName = name ? getBankDisplayName(name) : "Bank Logo";
194
+ const altText = alt || displayName;
195
+ if (!logoSrc) {
196
+ if (fallback) {
197
+ return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback });
198
+ }
199
+ return /* @__PURE__ */ jsxRuntime.jsx(
200
+ "div",
201
+ {
202
+ className: `bank-logo-fallback ${className}`,
203
+ style: {
204
+ width,
205
+ height: height || "auto",
206
+ display: "flex",
207
+ alignItems: "center",
208
+ justifyContent: "center",
209
+ backgroundColor: "#f3f4f6",
210
+ borderRadius: "4px",
211
+ color: "#6b7280",
212
+ fontSize: "12px",
213
+ fontWeight: 500,
214
+ ...style
215
+ },
216
+ children: displayName
217
+ }
218
+ );
219
+ }
220
+ const imgHeight = height || "auto";
221
+ const imgStyle = {
222
+ width,
223
+ height: imgHeight,
224
+ objectFit: "contain",
225
+ ...style
226
+ };
227
+ return /* @__PURE__ */ jsxRuntime.jsx(
228
+ "img",
229
+ {
230
+ src: logoSrc,
231
+ alt: altText,
232
+ className: `bank-logo ${className}`,
233
+ style: imgStyle,
234
+ loading
235
+ }
236
+ );
237
+ };
238
+ BankLogo.displayName = "BankLogo";
239
+
240
+ exports.BANK_LOGO_REGISTRY = BANK_LOGO_REGISTRY;
241
+ exports.BankLogo = BankLogo;
242
+ exports.getAvailableBanks = getAvailableBanks;
243
+ exports.getBankDisplayName = getBankDisplayName;
244
+ exports.getBankLogo = getBankLogo;
245
+ exports.resolveLogoPath = resolveLogoPath;
246
+ //# sourceMappingURL=index.js.map
247
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/registry/bankLogoMap.ts","../src/utils/logoResolver.ts","../src/components/BankLogo.tsx"],"names":["jsx"],"mappings":"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","file":"index.js","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"]}
package/dist/index.mjs ADDED
@@ -0,0 +1,240 @@
1
+ import { jsx, Fragment } from 'react/jsx-runtime';
2
+
3
+ // src/registry/bankLogoMap.ts
4
+ var BANK_LOGO_REGISTRY = {
5
+ bca: {
6
+ name: "bca",
7
+ displayName: "BCA",
8
+ svg: "/assets/banks/svg/bca.svg",
9
+ png: "/assets/banks/png/bca.png",
10
+ defaultFormat: "svg"
11
+ },
12
+ mandiri: {
13
+ name: "mandiri",
14
+ displayName: "Bank Mandiri",
15
+ svg: "/assets/banks/svg/mandiri.svg",
16
+ png: "/assets/banks/png/mandiri.png",
17
+ defaultFormat: "svg"
18
+ },
19
+ bni: {
20
+ name: "bni",
21
+ displayName: "BNI",
22
+ svg: "/assets/banks/svg/bni.svg",
23
+ png: "/assets/banks/png/bni.png",
24
+ defaultFormat: "svg"
25
+ },
26
+ bri: {
27
+ name: "bri",
28
+ displayName: "BRI",
29
+ svg: "/assets/banks/svg/bri.svg",
30
+ png: "/assets/banks/png/bri.png",
31
+ defaultFormat: "svg"
32
+ },
33
+ cimb: {
34
+ name: "cimb",
35
+ displayName: "CIMB Niaga",
36
+ svg: "/assets/banks/svg/cimb.svg",
37
+ png: "/assets/banks/png/cimb.png",
38
+ defaultFormat: "svg"
39
+ },
40
+ permata: {
41
+ name: "permata",
42
+ displayName: "Bank Permata",
43
+ svg: "/assets/banks/svg/permata.svg",
44
+ png: "/assets/banks/png/permata.png",
45
+ defaultFormat: "svg"
46
+ },
47
+ danamon: {
48
+ name: "danamon",
49
+ displayName: "Bank Danamon",
50
+ svg: "/assets/banks/svg/danamon.svg",
51
+ png: "/assets/banks/png/danamon.png",
52
+ defaultFormat: "svg"
53
+ },
54
+ maybank: {
55
+ name: "maybank",
56
+ displayName: "Maybank",
57
+ svg: "/assets/banks/svg/maybank.svg",
58
+ png: "/assets/banks/png/maybank.png",
59
+ defaultFormat: "svg"
60
+ },
61
+ ocbc: {
62
+ name: "ocbc",
63
+ displayName: "OCBC NISP",
64
+ svg: "/assets/banks/svg/ocbc.svg",
65
+ png: "/assets/banks/png/ocbc.png",
66
+ defaultFormat: "svg"
67
+ },
68
+ hsbc: {
69
+ name: "hsbc",
70
+ displayName: "HSBC",
71
+ svg: "/assets/banks/svg/hsbc.svg",
72
+ png: "/assets/banks/png/hsbc.png",
73
+ defaultFormat: "svg"
74
+ },
75
+ citibank: {
76
+ name: "citibank",
77
+ displayName: "Citibank",
78
+ svg: "/assets/banks/svg/citibank.svg",
79
+ png: "/assets/banks/png/citibank.png",
80
+ defaultFormat: "svg"
81
+ },
82
+ "standard-chartered": {
83
+ name: "standard-chartered",
84
+ displayName: "Standard Chartered",
85
+ svg: "/assets/banks/svg/standard-chartered.svg",
86
+ png: "/assets/banks/png/standard-chartered.png",
87
+ defaultFormat: "svg"
88
+ },
89
+ panin: {
90
+ name: "panin",
91
+ displayName: "Bank Panin",
92
+ svg: "/assets/banks/svg/panin.svg",
93
+ png: "/assets/banks/png/panin.png",
94
+ defaultFormat: "svg"
95
+ },
96
+ btn: {
97
+ name: "btn",
98
+ displayName: "BTN",
99
+ svg: "/assets/banks/svg/btn.svg",
100
+ png: "/assets/banks/png/btn.png",
101
+ defaultFormat: "svg"
102
+ },
103
+ mega: {
104
+ name: "mega",
105
+ displayName: "Bank Mega",
106
+ svg: "/assets/banks/svg/mega.svg",
107
+ png: "/assets/banks/png/mega.png",
108
+ defaultFormat: "svg"
109
+ },
110
+ "mega-syariah": {
111
+ name: "mega-syariah",
112
+ displayName: "Bank Mega Syariah",
113
+ svg: "/assets/banks/svg/mega-syariah.svg",
114
+ png: "/assets/banks/png/mega-syariah.png",
115
+ defaultFormat: "svg"
116
+ },
117
+ seabank: {
118
+ name: "seabank",
119
+ displayName: "Bank Seabank",
120
+ svg: "/assets/banks/svg/seabank.svg",
121
+ png: "/assets/banks/png/seabank.png",
122
+ defaultFormat: "svg"
123
+ },
124
+ gopay: {
125
+ name: "gopay",
126
+ displayName: "GoPay",
127
+ svg: "/assets/banks/svg/gopay.svg",
128
+ png: "/assets/banks/png/gopay.png",
129
+ defaultFormat: "svg"
130
+ },
131
+ ovo: {
132
+ name: "ovo",
133
+ displayName: "OVO",
134
+ svg: "/assets/banks/svg/ovo.svg",
135
+ png: "/assets/banks/png/ovo.png",
136
+ defaultFormat: "svg"
137
+ },
138
+ dana: {
139
+ name: "dana",
140
+ displayName: "DANA",
141
+ svg: "/assets/banks/svg/dana.svg",
142
+ png: "/assets/banks/png/dana.png",
143
+ defaultFormat: "svg"
144
+ },
145
+ shopeepay: {
146
+ name: "shopeepay",
147
+ displayName: "ShopeePay",
148
+ svg: "/assets/banks/svg/shopeepay.svg",
149
+ png: "/assets/banks/png/shopeepay.png",
150
+ defaultFormat: "svg"
151
+ },
152
+ linkaja: {
153
+ name: "linkaja",
154
+ displayName: "LinkAja",
155
+ svg: "/assets/banks/svg/linkaja.svg",
156
+ png: "/assets/banks/png/linkaja.png",
157
+ defaultFormat: "svg"
158
+ }
159
+ };
160
+ function getBankLogo(name) {
161
+ return BANK_LOGO_REGISTRY[name];
162
+ }
163
+ function getAvailableBanks() {
164
+ return Object.keys(BANK_LOGO_REGISTRY);
165
+ }
166
+
167
+ // src/utils/logoResolver.ts
168
+ function resolveLogoPath(name, format) {
169
+ const logoData = getBankLogo(name);
170
+ if (!logoData) return void 0;
171
+ const selectedFormat = format || logoData.defaultFormat;
172
+ return selectedFormat === "svg" ? logoData.svg : logoData.png;
173
+ }
174
+ function getBankDisplayName(name) {
175
+ const logoData = getBankLogo(name);
176
+ return logoData?.displayName || name;
177
+ }
178
+ var BankLogo = ({
179
+ name,
180
+ src,
181
+ width = 120,
182
+ height,
183
+ format,
184
+ className = "",
185
+ style = {},
186
+ alt,
187
+ fallback,
188
+ loading = "lazy"
189
+ }) => {
190
+ const logoSrc = src || (name ? resolveLogoPath(name, format) : void 0);
191
+ const displayName = name ? getBankDisplayName(name) : "Bank Logo";
192
+ const altText = alt || displayName;
193
+ if (!logoSrc) {
194
+ if (fallback) {
195
+ return /* @__PURE__ */ jsx(Fragment, { children: fallback });
196
+ }
197
+ return /* @__PURE__ */ jsx(
198
+ "div",
199
+ {
200
+ className: `bank-logo-fallback ${className}`,
201
+ style: {
202
+ width,
203
+ height: height || "auto",
204
+ display: "flex",
205
+ alignItems: "center",
206
+ justifyContent: "center",
207
+ backgroundColor: "#f3f4f6",
208
+ borderRadius: "4px",
209
+ color: "#6b7280",
210
+ fontSize: "12px",
211
+ fontWeight: 500,
212
+ ...style
213
+ },
214
+ children: displayName
215
+ }
216
+ );
217
+ }
218
+ const imgHeight = height || "auto";
219
+ const imgStyle = {
220
+ width,
221
+ height: imgHeight,
222
+ objectFit: "contain",
223
+ ...style
224
+ };
225
+ return /* @__PURE__ */ jsx(
226
+ "img",
227
+ {
228
+ src: logoSrc,
229
+ alt: altText,
230
+ className: `bank-logo ${className}`,
231
+ style: imgStyle,
232
+ loading
233
+ }
234
+ );
235
+ };
236
+ BankLogo.displayName = "BankLogo";
237
+
238
+ export { BANK_LOGO_REGISTRY, BankLogo, getAvailableBanks, getBankDisplayName, getBankLogo, resolveLogoPath };
239
+ //# sourceMappingURL=index.mjs.map
240
+ //# sourceMappingURL=index.mjs.map
package/dist/index.mjs.map ADDED
@@ -0,0 +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"]}
package/package.json ADDED
@@ -0,0 +1,41 @@
1
+ {
2
+ "name": "react-bank-logo",
3
+ "version": "0.1.0",
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
+ }