@kvell-group/ui 1.16.19 → 1.16.20

package/package.json

@@ -2,7 +2,7 @@
   "name": "@kvell-group/ui",
   "author": "Kvell Group",
   "private": false,
-  "version": "1.16.19",
+  "version": "1.16.20",
   "type": "module",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/components/CardLogoByPan/CardLogoByPan.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { KvellUiProvider } from '@/components/KvellUiProvider'
+
+import { theme } from '@/components/theme'
+
+import { CardLogoByPan as CardLogoByPanComponent } from '@/components/CardLogoByPan/CardLogoByPan'
+
+// ----------------------------------------------------------------------
+
+const meta = {
+  title: 'Components/CardLogoByPan',
+
+  component: CardLogoByPanComponent,
+  decorators: (Story) => (
+    <KvellUiProvider theme={theme}>
+      <Story />
+    </KvellUiProvider>
+  ),
+} satisfies Meta<typeof CardLogoByPanComponent>
+
+type Story = StoryObj<typeof meta>
+
+// ----------------------------------------------------------------------
+
+export const CardLogoByPan: Story = {
+  args: {
+    value: '41111',
+  },
+}
+
+// ----------------------------------------------------------------------
+
+export default meta

package/src/components/CardLogoByPan/CardLogoByPan.tsx

@@ -0,0 +1,16 @@
+import { getCardLogoByPan } from './utils'
+
+// ----------------------------------------------------------------------
+
+interface CardLogoByPanProps extends React.SVGProps<SVGSVGElement> {
+  value: string
+  customColor?: string
+}
+
+// ----------------------------------------------------------------------
+
+export const CardLogoByPan = ({ value, ...restSvgProps }: CardLogoByPanProps) => {
+  const Icon = getCardLogoByPan(value)
+
+  return Icon && <Icon {...restSvgProps} />
+}

package/src/components/CardLogoByPan/index.ts

@@ -0,0 +1 @@
+export { CardLogoByPan } from './CardLogoByPan'

package/src/components/{Inputs/CardInput/useCardLogo.ts → CardLogoByPan/utils.ts}

@@ -1,11 +1,9 @@
-import { useEffect, useState } from 'react'
-
-import MaestroSVG from '../../../assets/card-logos/maestro.svg'
-import MastercardSVG from '../../../assets/card-logos/mastercard.svg'
-import MirSVG from '../../../assets/card-logos/mir.svg'
-import UnionPaySVG from '../../../assets/card-logos/unionpay.svg'
-import VisaElectronSVG from '../../../assets/card-logos/visa-electron.svg'
-import VisaSVG from '../../../assets/card-logos/visa.svg'
+import MaestroSVG from '../../assets/card-logos/maestro.svg'
+import MastercardSVG from '../../assets/card-logos/mastercard.svg'
+import MirSVG from '../../assets/card-logos/mir.svg'
+import UnionPaySVG from '../../assets/card-logos/unionpay.svg'
+import VisaElectronSVG from '../../assets/card-logos/visa-electron.svg'
+import VisaSVG from '../../assets/card-logos/visa.svg'
 
 // ----------------------------------------------------------------------
 
@@ -66,23 +64,4 @@ const getCardLogo = (cardLabel: CardLabel | null) => {
 
 // ----------------------------------------------------------------------
 
-export const useCardLogo = (cardPan?: string) => {
-  const [cardLabel, setCardLabel] = useState<CardLabel | null>(null)
-  const CardLogo = getCardLogo(cardLabel)
-
-  useEffect(() => {
-    if (!cardPan) {
-      setCardLabel(null)
-    } else {
-      const detectedCardLabel = getCardLabel(cardPan)
-
-      if (detectedCardLabel) {
-        setCardLabel(detectedCardLabel)
-      } else {
-        setCardLabel(null)
-      }
-    }
-  }, [cardPan])
-
-  return CardLogo
-}
+export const getCardLogoByPan = (cardNumber: string) => getCardLogo(getCardLabel(cardNumber))

package/src/components/Inputs/CardInput/CardInput.tsx

@@ -1,20 +1,20 @@
 import { MaskedInput } from '../MaskedInput'
-import { useCardLogo } from './useCardLogo'
 import type { MaskedInputProps } from '../types'
 import { forwardRef } from 'react'
 import { CARD_NUMBER_MASK } from '../../../constants/masks'
 import { IMask } from 'react-imask'
 import { RiBankCardLine as CardSVG } from '@remixicon/react'
+import { CardLogoByPan } from '../../CardLogoByPan'
 
 // ----------------------------------------------------------------------
 
 const mask = IMask.createMask({ mask: CARD_NUMBER_MASK })
 
-// ----------------------------------------------------------------------
+type CardInputProps = Omit<MaskedInputProps, 'value'> & { value: string }
 
-export const CardInput = forwardRef<HTMLInputElement, MaskedInputProps>((props, ref) => {
-  const CardLogo = useCardLogo(props.value)
+// ----------------------------------------------------------------------
 
+export const CardInput = forwardRef<HTMLInputElement, CardInputProps>((props, ref) => {
   return (
     <MaskedInput
       ref={ref}
@@ -22,7 +22,7 @@ export const CardInput = forwardRef<HTMLInputElement, MaskedInputProps>((props,
       autoComplete='cc-number'
       {...props}
       mask={mask}
-      rightSection={CardLogo && <CardLogo />}
+      rightSection={<CardLogoByPan value={props.value} />}
       leftSection={<CardSVG size={20} />}
       placeholder='____ ____ ____ ____'
     />

package/src/index.ts

@@ -1,5 +1,6 @@
 // components
 export { Button } from './components/Button'
+export { CardLogoByPan } from './components/CardLogoByPan'
 
 // constants
 export { theme } from './components/theme'