feat: Add basic cards

jest.config.js

@@ -1,3 +1,7 @@
 module.exports = {
-  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect']
+  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy'
+  }
 }

package.json

@@ -77,11 +77,13 @@
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "husky": "^8.0.3",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^29.4.1",
     "postcss": "8.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup-plugin-postcss": "^4.0.2",
+    "sass": "^1.54.4",
     "semantic-release": "19.0.5",
     "size-limit": "^8.1.2",
     "tsdx": "^0.14.1",
@@ -96,8 +98,5 @@
     "@semantic-release/github",
     "@semantic-release/npm",
     "@semantic-release/git"
-  ],
-  "dependencies": {
-    "registry-url": "^6.0.1"
-  }
+  ]
 }

src/index.tsx

@@ -1 +1,2 @@
 export * from './example'
+export * from './structure'

src/structure/Card/Card.test.tsx

@@ -0,0 +1,48 @@
+/* eslint-disable no-undef */
+import { fireEvent, render, screen } from '@testing-library/react'
+import React from 'react'
+import { Card } from '../Card'
+
+const classicCard = { 
+  buttonRight: 'Show me more',
+  description: 'Lorem ipsum dolor sit amet, consectetur adip',
+  image: 'https://fastly.picsum.photos/id/237/300/300',
+  onClickRight: () => jest.fn(),
+  title: 'Classic Card'
+}
+
+const productCard = {
+  buttonRight: 'Show me more',
+  description: 'Lorem ipsum dolor sit amet, consectetur adip',
+  image: 'https://fastly.picsum.photos/id/237/300/300',
+  onClickRight: () => jest.fn(),
+  price: '2000',
+  title: 'Classic Card'
+}
+
+describe('Card', () => {
+  test('Renders classic', () => {
+    render(<Card {...classicCard} />)
+
+    const element = screen.getByText('Classic Card')
+    expect(element).toBeInTheDocument()
+  })
+
+  test('Renders product card with price "$2000" ', () => {
+    render(<Card {...productCard} mode="product" />)
+
+    const element = screen.getByText('$2000')
+    expect(element).toBeInTheDocument()
+  })
+
+  test('Click "Show me more" button', () => {
+    const handleClick = jest.fn()
+
+    render(<Card {...productCard} mode="product" onClickRight={handleClick} />)
+
+    const buttonElement = screen.getByText('Show me more')
+    fireEvent.click(buttonElement)
+
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
+})

src/structure/Card/Card.tsx

@@ -1,5 +1,79 @@
-import React from 'react'
+import React, { FC, MouseEventHandler } from 'react'
+import cardStyles from './card.module.scss'
 
-const Card = () => <h1>Card component</h1>
+export type CardModes = | 'classic' | 'product'
+
+export interface CardProps {
+  buttonRight: string
+  description: string
+  image: string
+  title: string
+  onClickRight: MouseEventHandler<HTMLButtonElement>
+
+  altImage?: string
+  buttonLeft?: string
+  className?: string
+  id?: string
+  mode?: CardModes
+  onClickLeft?: MouseEventHandler<HTMLButtonElement>
+  style?: React.CSSProperties
+  price?: string | number
+  symbol?: string
+}
+
+const Card: FC<CardProps> = ({
+  altImage,
+  buttonLeft,
+  buttonRight,
+  className = '',
+  description,
+  id,
+  image,
+  mode = 'classic',
+  onClickLeft,
+  onClickRight,
+  style,
+  symbol = '$',
+  price = 100,
+  title
+}) => (
+  <article id={id} className={`${className} ${cardStyles.card}`} style={style}>
+    <header className={`${cardStyles.img_container}`}>
+      <img src={image} alt={altImage} />
+    </header>
+
+    <section className={`${cardStyles.card_body}`}>
+
+      <h2>{title}</h2>
+
+      <p className={`${cardStyles.description}`}>{description}</p>
+
+      {
+        mode === 'classic'
+          ? (
+            <div className={`${cardStyles.buttons_container}`}>
+              { buttonLeft
+                ? <button type="button" className={`${cardStyles.button_left}`} onClick={onClickLeft}>{buttonLeft}</button>
+                : null }
+              <button type="button" onClick={onClickRight}>{buttonRight}</button>
+            </div>
+          )
+          : (
+            <>
+              <hr />
+              <div className={`${cardStyles.buttons_price_container}`}>
+                <p className={`${cardStyles.price}`}>
+                  {symbol} 
+                  {price}
+                </p>
+                <button type="button" onClick={onClickRight}>{buttonRight}</button>
+              </div>
+            </>
+          )
+      }
+
+    </section>
+  </article>
+)
 
 export default Card

src/structure/Card/card.module.scss

@@ -0,0 +1,101 @@
+.card {
+  border: 1px solid #C82526;
+  border-radius: 8px;
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
+  min-width: 260px;
+  max-width: 320px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  .img_container {
+    display: grid;
+    place-items: center;
+    height: auto;
+
+    img {
+      border-radius: 8px 8px 0px 0px;
+      width: 100%;
+      min-height: 256px;
+      max-height: 320px;
+      object-fit: cover;
+    }
+  }
+
+  .card_body {
+    padding: 0rem 1rem 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    h2 {
+      margin: 0;
+    }
+
+
+    .description {
+      margin: 0;
+    }
+
+    hr {
+      color: #c82525ce;
+      margin: 0;
+      width: 100%;
+      border: 0.01em solid #c82525ce;
+    }
+    .buttons_price_container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .price {
+        margin: 0;
+        font-size: 20px;
+        font-weight: 800;
+        word-break: break-all;
+        max-width: 120px;
+      }
+
+      button {
+        all: unset;
+        font-size: 14px;
+        cursor: pointer;
+        font-weight: bold;
+        padding: 0.5rem 1rem;
+        border: 1px solid #C82526;
+        color: #C82526;
+        border-radius: 0.25rem;
+
+        &:hover {
+          color: #ffffff;
+          background-color: #C82526;
+          transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+        }
+      }
+    }
+
+    .buttons_container {
+      display: flex;
+      justify-content: end;
+      gap: 1rem;
+
+      button {
+        all: unset;
+        font-size: 14px;
+        cursor: pointer;
+        font-weight: bold;
+        padding: 0.5rem 1rem;
+        border: 1px solid #C82526;
+        color: #C82526;
+        border-radius: 0.25rem;
+
+        &:hover {
+          color: #ffffff;
+          background-color: #C82526;
+          transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+        }
+      }
+    }
+  }
+}

src/typinigs.d.ts

@@ -0,0 +1,9 @@
+declare module '*.module.scss' {
+  const content: { [className: string]: string };
+  export default content;
+}
+
+declare module '*.jpg' {
+  const value: any;
+  export default value;
+}