fix: breaking issue in example site build and resolve minor function/…

…UI bugs (#3) - Fixed the breaking issue that occurred when building the example site. - Resolved minor bugs in the source code related to functionality and UI components. - Improved code stability and UI consistency.
MinhOmega · Aug 9, 2024 · 5d7dce8 · 5d7dce8
1 parent 7a7aa91
commit 5d7dce8
Show file tree

Hide file tree

Showing 8 changed files with 174 additions and 43 deletions.
diff --git a/example/app/layout.tsx b/example/app/layout.tsx
@@ -1,22 +1,68 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
+  title: 'React Interactive Paycard',
+  description: 'React Interactive Pay Card for ReactJS, NextJS App Router',
+  keywords: [
+    'react',
+    'reactjs',
+    'nextjs',
+    'form',
+    'credit',
+    'credit-card',
+    'animation',
+    'typescript',
+    'react-interactive-paycard',
+    'react-animation',
+    'react-css-transition-group',
+    'react-credit-card',
+    'react-animated-css',
+  ],
+  authors: [
+    {
+      name: 'Vo Ngoc Quang Minh',
+      url: 'https://github.com/MinhOmega',
+    },
+  ],
+  openGraph: {
+    title: 'React Interactive Paycard',
+    description: 'React Interactive Pay Card for ReactJS, NextJS App Router',
+    url: 'https://github.com/MinhOmega/react-interactive-paycard#readme',
+    siteName: 'React Interactive Paycard',
+    images: [
+      {
+        url: '', // TODO
+        width: 800,
+        height: 600,
+        alt: 'React Interactive Paycard',
+      },
+    ],
+    locale: 'en_US',
+    type: 'website',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'React Interactive Paycard',
+    description: 'React Interactive Pay Card for ReactJS, NextJS App Router',
+    images: [''], // TODO
+  },
+  icons: {
+    icon: '/favicon.ico',
+  },
+}
 
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: React.ReactNode
 }>) {
   return (
     <html lang="en">
       <body className={inter.className}>{children}</body>
     </html>
-  );
+  )
 }
diff --git a/example/package-lock.json b/example/package-lock.json
diff --git a/example/package.json b/example/package.json
@@ -9,18 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "14.2.5",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.2.5"
+    "react-transition-group": "^4.4.5"
   },
-  "devDependencies": {
-    "typescript": "^5",
+    "devDependencies": {
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.5",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.5"
+    "typescript": "^5"
   }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-interactive-paycard",
   "version": "0.0.1",
-  "description": "React Interactive Paycard for ReactJS, NextJS App Router",
+  "description": "React Interactive Pay Card for ReactJS, NextJS App Router",
   "keywords": [
     "react",
     "reactjs",
@@ -37,7 +37,6 @@
     "lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
     "lint:fix": "eslint --fix . --ext .{js,jsx,ts,tsx} && yarn lint:styles",
     "lint:styles": "prettier --write \"**/*.{css,scss}\" --config ./.prettierrc",
-    "prepare": "husky",
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
@@ -52,8 +51,10 @@
     "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/react-transition-group": "^4.4.10",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.8.0",
+    "eslint-config-prettier": "^9.1.0",
     "postcss": "^8.4.41",
     "postcss-cli": "^11.0.0",
     "prettier": "^3.3.3",

diff --git a/src/card.tsx b/src/card.tsx
@@ -3,7 +3,11 @@ import { CSSTransition, SwitchTransition, TransitionGroup } from 'react-transiti
 import './styles.scss'
 import { FORM_FIELDS } from './interactive-pay-card'
 
-const imagesCardType = {
+type CardType = 'amex' | 'diners' | 'discover' | 'mastercard' | 'troy' | 'unionpay' | 'visa'
+
+type ImagesCardType = Record<CardType, string>
+
+const imagesCardType: ImagesCardType = {
   amex: 'https://github.com/user-attachments/assets/8c6a945e-82d7-43bd-a649-addeb547bd2c',
   diners: 'https://github.com/user-attachments/assets/e7aa1d25-f24a-4099-a7b3-3fd78a3a625b',
   discover: 'https://github.com/user-attachments/assets/5e6645dc-c981-4f56-a6d1-a188441544fb',
@@ -13,7 +17,12 @@ const imagesCardType = {
   visa: 'https://github.com/user-attachments/assets/ab3ac91f-ca1c-471e-bce1-c68e3053e383',
 }
 
-const cardBackgrounds = {
+/**
+ * Map of card backgrounds by card index.
+ *
+ * @type {Record<number, string>}
+ */
+const cardBackgrounds: Record<number, string> = {
   1: 'https://github.com/user-attachments/assets/1fe78b35-3611-4219-91e1-78057b065d6b',
   2: 'https://github.com/user-attachments/assets/078ad1e1-8feb-423c-ba6d-44ccdadb7237',
   3: 'https://github.com/user-attachments/assets/2dc5a1d3-1987-40c3-a579-cdb74409aeb9',
@@ -84,20 +93,30 @@ const CreditCard: React.FC<CreditCardProps> = ({
 }): JSX.Element => {
   const [style, setStyle] = useState<React.CSSProperties>({})
 
-  const cardType = (cardNumber: string): string => {
+  const cardType = (cardNumber: string): CardType => {
     const number = cardNumber
     let re: RegExp
+    const CARDS: Record<CardType, string> = {
+      amex: '^3[47][0-9]{13}$',
+      diners: '^3(?:0[0-5]|[68][0-9])[0-9]{11}$',
+      discover: '^6(?:011|5[0-9]{2})[0-9]{12}$',
+      mastercard: '^5[1-5][0-9]{14}$',
+      troy: '^9792[0-9]{12}$',
+      unionpay: '^62[0-9]{14,17}$',
+      visa: '^4[0-9]{12}(?:[0-9]{3})?$',
+    }
+
     for (const [card, pattern] of Object.entries(CARDS)) {
       re = new RegExp(pattern)
       if (number.match(re) !== null) {
-        return card
+        return card as CardType
       }
     }
 
     return 'visa' // default type
   }
 
-  const useCardType = useMemo(() => {
+  const useCardType = useMemo<CardType>(() => {
     return cardType(cardNumber)
   }, [cardNumber])
 
@@ -115,7 +134,9 @@ const CreditCard: React.FC<CreditCardProps> = ({
     if (currentFocusedElm) {
       const style = outlineElementStyle(currentFocusedElm.current) as React.CSSProperties
       setStyle(style)
+      return
     }
+    setStyle({})
   }, [currentFocusedElm])
 
   const maskCardNumber = (cardNumber: string): string[] => {
@@ -187,11 +208,9 @@ const CreditCard: React.FC<CreditCardProps> = ({
                 </TransitionGroup>
               </div>
             </label>
-            <div className="card-item__date">
-              <label className="card-item__dateTitle" onClick={() => onCardElementClick('cardDate')} ref={cardDateRef}>
-                Expires
-              </label>
-              <label className="card-item__dateItem">
+            <div className="card-item__date" onClick={() => onCardElementClick('cardDate')} ref={cardDateRef as any}>
+              <label className="card-item__dateTitle">Expires</label>
+              <label htmlFor="cardMonth" className="card-item__dateItem">
                 <SwitchTransition in-out>
                   <CSSTransition classNames="slide-fade-up" timeout={200} key={cardMonth}>
                     <span>{!cardMonth ? 'MM' : cardMonth} </span>
@@ -202,7 +221,7 @@ const CreditCard: React.FC<CreditCardProps> = ({
               <label htmlFor="cardYear" className="card-item__dateItem">
                 <SwitchTransition out-in>
                   <CSSTransition classNames="slide-fade-up" timeout={250} key={cardYear}>
-                    <span>{!cardYear ? 'YY' : cardYear.toString().substr(-2)}</span>
+                    <span>{!cardYear ? 'YY' : cardYear.toString().substring(cardYear.length - 2)}</span>
                   </CSSTransition>
                 </SwitchTransition>
               </label>