Theo-components

an npm package to create a customizable product details as Card, simplified TextField to be used with Formik also to show validation errors shown from yup validation

Developed using Typescript and Optimised for React-18+.

Can be used to

• Create customised card for products from an API call
• Control button action based on the user defined functions
• Display a Texfield and show error messages based on Formik validation

Features

• Displays a popup message when isLoggedin flag is false can be used to restrict user to add contents only after login.

• Title, Description,Price, Discount price details can be passed as a props.

• Styling for price based on Price and DiscPrice values

• Can add custom function to Increase count and Decrease count of the product.

• Can display an image in the card with border.

Tech

This package uses below projects to work properly:

• [ReactJS] - HTML enhanced for web apps!

• [MaterialUI] - to display buttons in the cards

• [React-Bootstrap] - to display Card Header,Footer,Body.

• [Formik] - to display message text box based on formik validation

Installation

Install the dependencies and devDependencies and start the server.

npm i theo-components

For development environments...

npm i theo-components --save-dev

Example

ProductCard Component

We can import the component with below import statement

import { ProductCard } from "theo-components";

We can declare the type of parameters as an interface like below

interface IPost {
  image: string;
  title: string;
  category: string;
  description: string;
  userId?: number;
  price: number;
  discPrice: number;
  grossWeight: number;
  netWeight: number;
  units?: number;
  id: number;
  isLoggedin: boolean;
  getItemQuantity: (id: number) => number;
  increaseCartQuantity: (id: number) => void;
  decreaseCartQuantity: (id: number) => void;
  removeFromCart: (id: number) => void;
  setNotLoggedinPopup: () => void;
}

• In above declaration props such as image, title, category, description, userId, price, discPrice, grossWeight, netWeight,units, id, can be provided from API call
• Props such as isLoggedin, getItemQuantity, increaseCartQuantity, decreaseCartQuantity, removeFromCart, setNotLoggedinPopup can be provided across the component from a global state management which is accessible across the application. -- getItemQuantity - is a function provides the quantity with id as input
  -- increaseCartQuantity - is a function to increase quantity with id as input -- decreaseCartQuantity - is a function to decrease quantity with id as input -- removeFromCart - is a function to remove from cart -- setNotLoggedinPopup - to display message when user is attempting to add product to cart

item.isLoggedin = isLoggedin;
item.getItemQuantity = getItemQuantity;
item.increaseCartQuantity = increaseCartQuantity;
item.decreaseCartQuantity = decreaseCartQuantity;
item.removeFromCart = removeFromCart;
item.setNotLoggedinPopup = setNotLoggedinPopup;

   return <ProductCard {...item} />;

We can add additional functions to the argument as like above and pass them as props to the component

FormTextField Component

We can import the component with below import statement

import {FormTextField} from "theo-components";

We can use this component in Formik Field as like below

 <Field
name="name"
label="Name"
data-testid="test_username"
size="small"
        component={FormTextField}
/>