feature: add card component

.eslintrc.json

@@ -3,7 +3,8 @@
   "plugins": ["@typescript-eslint"],
   "extends": ["airbnb", "airbnb/hooks"],
   "env": {
-    "browser": true
+    "browser": true,
+    "jest": true
   },
   "rules": {
     "@typescript-eslint/no-unused-vars": ["error"],
@@ -22,6 +23,7 @@
     "react/jsx-props-no-spreading": "off",
     "react/react-in-jsx-scope": "off",
     "react/require-default-props": "off",
+    "react/default-props-match-prop-types": "off",
     "semi": ["error", "never"]
   }
 }

.gitignore

@@ -3,3 +3,4 @@
 node_modules
 .cache
 dist
+coverage

dist/index.d.ts

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

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

@@ -90,11 +90,13 @@
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-storybook": "^0.6.10",
     "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",

src/index.tsx

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

src/structure/Card/Card.test.tsx

@@ -0,0 +1,50 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import React from 'react'
+import { Card } from '../Card'
+
+const classicCard = { 
+  buttonRight: {
+    label: 'Show me more',
+    onClick: () => jest.fn()
+  },
+  description: 'Lorem ipsum dolor sit amet, consectetur adip',
+  image: 'https://picsum.photos/id/237/300/300',
+  title: 'Classic Card'
+}
+
+const productCard = {
+  buttonRight: {
+    label: 'Show me more',
+    onClick: () => jest.fn()
+  },
+  description: 'Lorem ipsum dolor sit amet, consectetur adip',
+  image: 'https://picsum.photos/id/237/300/300',
+  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" buttonRight={{ ...productCard.buttonRight, onClick: handleClick }} />)
+    const buttonElement = screen.getByText('Show me more')
+    fireEvent.click(buttonElement)
+
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
+})

src/structure/Card/Card.tsx

@@ -1,5 +1,103 @@
-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 type CardButtonProps = {
+  label: string
+  onClick: MouseEventHandler<HTMLButtonElement>
+}
+
+export interface CardProps {
+  buttonRight: CardButtonProps
+  description: string
+  image: string
+  title: string
+
+  altImage?: string
+  buttonLeft?: CardButtonProps
+  className?: string
+  id?: string
+  mode?: CardModes
+  style?: React.CSSProperties
+  price?: string | number
+  symbol?: string
+}
+
+const defaultProps: CardProps = {
+  buttonRight: {
+    label: 'Show me more',
+    onClick: () => {}
+  },
+  description: 'Lorem ipsum dolor sit amet, consectetur.',
+  image: 'https://picsum.photos/id/231/300/300',
+  title: 'Card example',
+
+  altImage: 'Random image',
+  buttonLeft: {
+    label: 'Show me more',
+    onClick: () => {}
+  },
+  className: '',
+  id: '',
+  mode: 'classic',
+  price: '100',
+  style: {},
+  symbol: '$'
+}
+
+const Card: FC<CardProps> = ({
+  buttonRight,
+  description,
+  image,
+  title,
+  altImage,
+  buttonLeft,
+  className,
+  id,
+  mode,
+  price,
+  style,
+  symbol
+}) => (
+  <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?.label
+               && <button type="button" className={`${cardStyles.button_left}`} onClick={buttonLeft.onClick}>{buttonLeft.label}</button>}
+              <button type="button" onClick={buttonRight.onClick}>{buttonRight.label}</button>
+            </div>
+          )
+          : (
+            <>
+              <hr />
+              <div className={`${cardStyles.buttons_price_container}`}>
+                <p className={`${cardStyles.price}`}>
+                  {symbol} 
+                  {price}
+                </p>
+                <button type="button" onClick={buttonRight.onClick}>{buttonRight.label}</button>
+              </div>
+            </>
+          )
+      }
+
+    </section>
+  </article>
+)
+
+Card.defaultProps = defaultProps
 
 export default Card

src/structure/Card/card.module.scss

@@ -0,0 +1,111 @@
+.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);
+        }
+
+        &.button_left{ 
+          color: #4d4d4d;
+          border: 1px solid #4d4d4d;
+
+          &:hover {
+            color: #ffffff;
+            background-color: #4d4d4d;
+          }
+        }
+      }
+    }
+  }
+}

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;
+}