saqib-test-lib

Button Component

The Button component is part of the saqib-test-lib package. It provides a customizable button element with built-in support for additional class names and standard button attributes.

Installation

Install the saqib-test-lib package using npm or yarn:

npm install saqib-test-lib

or

yarn add saqib-test-lib

Usage

import React from "react";
import { Button } from "saqib-test-lib";
import "./button-style.css"; // Ensure your CSS file is imported

const App = () => {
  return (
    <Button className="custom-class" onClick={() => alert("Button clicked!")}>
      Click Me!
    </Button>
  );
};

export default App;

Props

Required Props

Prop	Type	Description
children	React.ReactNode	The content inside the button element.

Optional Props

Prop	Type	Description
className	string	Additional class names to customize the button styling.
...rest	React.ButtonHTMLAttributes	Any standard HTML button attributes (e.g., onClick, disabled, type).

Example

<Button className="primary-button" type="submit">
  Submit
</Button>

<Button className="secondary-button" onClick={() => console.log('Clicked')}>
  Cancel
</Button>

Input Component

The Input component is part of the saqib-test-lib package. It provides a customizable input field with support for labels, class names, and standard input attributes.

Installation

Install the saqib-test-lib package using npm or yarn:

npm install saqib-test-lib

or

yarn add saqib-test-lib

Usage

import React from "react";
import { Input } from "saqib-test-lib";
import "./input-style.css"; // Ensure your CSS file is imported

const App = () => {
  return (
    <Input
      className="custom-input-class"
      label="Username"
      placeholder="Enter your username"
    />
  );
};

export default App;

Props

Required Props

Prop	Type	Description
label	string	The label for the input field (optional).

Optional Props

Prop	Type	Description
className	string	Additional class names to customize the wrapper container.
...rest	React.InputHTMLAttributes	Any standard HTML input attributes (e.g., placeholder, value, onChange).

Example

<Input
  className="primary-input"
  label="Email"
  type="email"
  placeholder="Enter your email"
/>

<Input
  className="secondary-input"
  label="Password"
  type="password"
  placeholder="Enter your password"
/>

Styling

To customize the input field and its wrapper, you can use the following CSS classes:

• custom-col-span: For the wrapper div containing the label and input.
• custom-label: For styling the label.
• custom-input: For styling the input element.

Example:

/* input-style.css */
.custom-col-span {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.custom-label {
  margin-bottom: 5px;
  font-weight: bold;
}

.custom-input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.custom-input:focus {
  border-color: #007bff;
}

PhoneInput Component

The PhoneInput component is part of the saqib-test-lib-rn package. It provides a customizable input field specifically for collecting phone numbers, along with a country code dropdown and support for standard input attributes.

Installation

Install the saqib-test-lib-rn package using npm or yarn:

npm install saqib-test-lib-rn

or

yarn add saqib-test-lib-rn

Usage

import React from "react";
import { PhoneInput } from "saqib-test-lib-rn";
import "./phone-input-style.css"; // Ensure your CSS file is imported

const App = () => {
  return (
    <PhoneInput
      label="Phone Number"
      placeholder="Enter your phone number"
      onChange={(value) => console.log(value)}
    />
  );
};

export default App;

Props

Required Props

Prop	Type	Description
label	string	The label for the phone input field.

Optional Props

Prop	Type	Description
className	string	Additional class names to customize the wrapper container.
placeholder	string	Placeholder text for the phone input field.
onChange	(value: string) => void	Callback function that returns the phone number when it changes.
required	boolean	Indicates whether the input is required.
...rest	React.InputHTMLAttributes	Any standard HTML input attributes (e.g., value, name, onBlur, etc.).

Example

<PhoneInput
  className="primary-phone-input"
  label="Phone"
  placeholder="Enter your phone number"
  onChange={(value) => console.log('Phone number entered:', value)}
  required
/>

<PhoneInput
  className="secondary-phone-input"
  label="Contact Number"
  placeholder="Enter your contact number"
  onChange={(value) => console.log('Contact number entered:', value)}
/>

Styling

To customize the phone input field, country code dropdown, and their wrapper, you can use the following CSS classes:

• phone-input-wrapper: For the wrapper div containing the label, country code dropdown, and input.
• phone-input-label: For styling the label.
• phone-input-select: For styling the country code dropdown.
• phone-input-field: For styling the phone number input field.

Example:

/* phone-input-style.css */
.phone-input-wrapper {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.phone-input-label {
  margin-bottom: 5px;
  font-weight: bold;
}

.phone-input-container {
  display: flex;
  align-items: center;
}

.phone-input-select {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
}

.phone-input-field {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  flex-grow: 1;
}

.phone-input-field:focus {
  border-color: #007bff;
}

Countries Component

The Countries component is part of the saqib-test-lib package. It renders a dropdown select element populated with a list of all countries, allowing the user to select one. The component also supports a label for easy identification.

Installation

Install the saqib-test-lib package using npm or yarn:

npm install saqib-test-lib

or

yarn add saqib-test-lib

Usage

import React from "react";
import { Countries } from "saqib-test-lib";
import "./countries-style.css"; // Ensure your CSS file is imported

const App = () => {
  return <Countries label="Select Country" />;
};

export default App;

Props

Required Props

Prop	Type	Description
label	string	The label for the dropdown.

Optional Props

Prop	Type	Description
...rest	React.SelectHTMLAttributes	Any standard HTML select attributes (e.g., onChange, value, disabled).

Example

<Countries label="Choose your country" />

<Countries label="Country" onChange={(e) => console.log(e.target.value)} />

Styling

To customize the dropdown and its wrapper, you can use the following CSS classes:

• countries-custom-col-span: For the wrapper div containing the label and select element.
• countries-custom-label: For styling the label.
• countries-custom-select: For styling the select dropdown.

Example:

/* countries-style.css */
.countries-custom-col-span {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.countries-custom-label {
  margin-bottom: 5px;
  font-weight: bold;
}

.countries-custom-select {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.countries-custom-select:focus {
  border-color: #007bff;
}

This Countries component provides a simple and reusable country selection dropdown for your forms.

Checkbox Component

The Checkbox component is part of the saqib-test-lib package. It renders a customizable checkbox input with an optional label and supports standard input attributes.

Installation

Install the saqib-test-lib package using npm or yarn:

npm install saqib-test-lib

or

yarn add saqib-test-lib

Usage

import React from "react";
import { Checkbox } from "saqib-test-lib";
import "./checkbox-style.css"; // Ensure your CSS file is imported

const App = () => {
  return (
    <Checkbox
      label="Accept Terms and Conditions"
      id="terms-checkbox"
      className="custom-checkbox-class"
    />
  );
};

export default App;

Props

Required Props

Prop	Type	Description
label	string	The label for the checkbox field.

Optional Props

Prop	Type	Description
className	string	Additional class names to customize the checkbox styling.
id	string	The id for the checkbox and associated label.
...rest	React.InputHTMLAttributes	Any standard HTML input attributes (e.g., checked, onChange, disabled).

Example

<Checkbox
  label="Subscribe to newsletter"
  id="newsletter-checkbox"
  className="primary-checkbox"
/>

<Checkbox
  label="Remember me"
  id="remember-checkbox"
  onChange={(e) => console.log(e.target.checked)}
/>

Navbar Component

The Navbar component is part of the saqib-test-lib package. It renders a customizable navigation bar with support for dynamic links and custom click events.

Installation

Install the saqib-test-lib package using npm or yarn:

npm install saqib-test-lib

or

yarn add saqib-test-lib

Usage

import React from "react";
import { Navbar } from "saqib-test-lib";
import { Link } from "react-router-dom"; // Example for routing
import "./navbar-style.css"; // Ensure your CSS file is imported

const navigationItems = [
  {
    title: "Main Section",
    array: [
      { title: "Home", path: "/", isLink: true },
      { title: "About", path: "/about", isLink: true },
      { title: "Contact", path: "/contact", isLink: true },
    ],
  },
];

const App = () => {
  return <Navbar list={navigationItems} Link={Link} param="Home" />;
};

export default App;

Props

Required Props

Prop	Type	Description
list	array	Array of objects representing sections and their items.
Link	any	A component or element used for rendering links.

Optional Props

Prop	Type	Description
param	string	Used to highlight a specific navigation item by title.

The list prop should contain sections with arrays of navigation items. Each navigation item includes a title, a path (optional for links), and a flag indicating if it is a link or a custom handler.

Example

const navList = [
  {
    title: "Section 1",
    array: [
      { title: "Dashboard", path: "/dashboard", isLink: true },
      { title: "Profile", path: "/profile", isLink: true },
    ],
  },
  {
    title: "Section 2",
    array: [
      {
        title: "Settings",
        isLink: false,
        handleClick: () => alert("Clicked Settings"),
      },
      { title: "Help", isLink: true, path: "/help" },
    ],
  },
];

<Navbar list={navList} Link={Link} param="Dashboard" />;

In this example:

• Dashboard and Profile are links, rendered as the component passed in Link.
• Settings triggers a custom handleClick function.
• The param prop highlights the Dashboard item.

Sidebar Component

The Sidebar component is part of the saqib-test-lib package. It allows you to create a customizable sidebar that can open and close based on the provided id and openSidebarId props.

Installation

Install the saqib-test-lib package using npm or yarn:

npm install saqib-test-lib

or

yarn add saqib-test-lib

Usage

import React, { useState } from "react";
import { Sidebar } from "saqib-test-lib";
import "./index.css"; // Ensure your CSS file is imported

const App = () => {
  const [openSidebarId, setOpenSidebarId] = useState<string | null>(null);

  const toggleSidebar = (id: string) => {
    setOpenSidebarId(openSidebarId === id ? null : id);
  };

  return (
    <div>
      <button onClick={() => toggleSidebar("main-sidebar")}>
        Toggle Sidebar
      </button>
      <Sidebar
        id="main-sidebar"
        openSidebarId={openSidebarId}
        bgcolor="white"
        width="300px"
      >
        <p>This is the sidebar content!</p>
      </Sidebar>
    </div>
  );
};

export default App;

Props

Required Props

Prop	Type	Description
id	string	Unique ID for the sidebar, used to control its visibility.
openSidebarId	string | null	ID of the currently open sidebar, used to determine its open state.
bgcolor	string	Background color of the sidebar.

Optional Props

Prop	Type	Default	Description
width	string	"50%"	Width of the sidebar.
position	"left" | "right"	"left"	Position of the sidebar, can be either left or right.
children	React.ReactNode	-	Content to display inside the sidebar.

Example

<Sidebar
  id="my-sidebar"
  openSidebarId={openSidebarId}
  bgcolor="yellow"
  width="250px"
  position="right"
>
  <p>Sidebar content goes here!</p>
</Sidebar>

In this example:

• The sidebar is positioned on the right, with a width of 250px and a yellow background.
• The visibility of the sidebar is controlled by comparing id with openSidebarId.

Product Component

The Product component is part of the saqib-test-lib package. It allows you to display a product with its image, title, and price, and provides customizable styles and a link wrapper for navigation.

Installation

Install the saqib-test-lib package using npm or yarn:

npm install saqib-test-lib

or

yarn add saqib-test-lib

Usage

import React from "react";
import { Product } from "saqib-test-lib";
import "./index.css"; // Ensure your CSS file is imported

const productData = {
  thumbnail: "https://example.com/product-image.jpg",
  title: "Sample Product",
  price: 99.99,
};

const App = () => {
  return (
    <Product
      element={productData}
      href="/product-details"
      styles={{
        width: 250,
        height: 400,
        bgcolor: "lightblue",
        titlecolor: "black",
        pricecolor: "red",
        titlesize: 18,
        pricesize: 16,
        padding: 10,
      }}
      LinkComponent="a"
    />
  );
};

export default App;

Props

Required Props

Prop	Type	Description
element	Object	Contains the product's image, title, and price.
LinkComponent	any	Component used for wrapping the product, usually a link.
href	string	URL to navigate when the product is clicked.

Optional Props

Prop	Type	Default	Description
styles	Object	-	Customizable styles for the product container, including dimensions, colors, and padding.

element Object

Key	Type	Description
thumbnail	string	URL of the product image.
title	string	Title of the product.
price	number	Price of the product.

styles Object

Key	Type	Description
width	number	Width of the product container in pixels.
height	number	Height of the product container in pixels.
titlecolor	string	Color of the product title.
pricecolor	string	Color of the product price.
bgcolor	string	Background color of the product container.
titlesize	number	Font size of the product title.
pricesize	number	Font size of the product price.
padding	number	Padding inside the product container.

Example

<Product
  element={{
    thumbnail: "https://example.com/product1.jpg",
    title: "Product 1",
    price: 49.99,
  }}
  href="/product/1"
  LinkComponent="a"
  styles={{
    width: 300,
    height: 450,
    titlecolor: "blue",
    pricecolor: "green",
    bgcolor: "white",
    titlesize: 20,
    pricesize: 18,
    padding: 15,
  }}
/>

In this example:

• The product component displays a product image, title, and price.
• The product container has a white background, with customizable width, height, and padding.
• The title and price are styled with specific colors and font sizes.

CartProduct Component

The CartProduct component is part of the saqib-test-lib package. It displays a product within a shopping cart, allowing users to adjust the quantity of the product, remove it from the cart, and view the total price.

Installation

Install the saqib-test-lib package using npm or yarn:

npm install saqib-test-lib

or

yarn add saqib-test-lib

Usage

import React from "react";
import { CartProduct } from "saqib-test-lib";
import "./cart-product.css"; // Ensure your CSS file is imported

const App = () => {
  const product = {
    id: 1,
    title: "Sample Product",
    price: 99.99,
    quantity: 2,
    thumbnail: "https://example.com/product-image.jpg",
  };

  const removeItem = () => {
    console.log("Item removed");
  };

  const increaseItem = () => {
    console.log("Increased item quantity");
  };

  const decreaseItem = () => {
    console.log("Decreased item quantity");
  };

  return (
    <CartProduct
      item={product}
      removeItem={removeItem}
      increaseItem={increaseItem}
      decreaseItem={decreaseItem}
    />
  );
};

export default App;

Props

Required Props

Prop	Type	Description
item	Object	Contains product details like title, price, quantity, etc.
removeItem	Function	Function to remove the product from the cart.
increaseItem	Function	Function to increase the product's quantity.
decreaseItem	Function	Function to decrease the product's quantity.

item Object

This is the product being displayed in the cart.

Key	Type	Description
title	string	The product's title.
price	number	The product's price per unit.
quantity	number	The current quantity of the product in the cart.
thumbnail	string	URL of the product image.

Example

<CartProduct
  item={{
    id: 2,
    title: "Another Product",
    price: 49.99,
    quantity: 1,
    thumbnail: "https://example.com/product2-image.jpg",
  }}
  removeItem={() => console.log("Item removed")}
  increaseItem={() => console.log("Quantity increased")}
  decreaseItem={() => console.log("Quantity decreased")}
/>

In this example:

• A product with a title, price, and quantity is displayed in the cart.
• The user can remove the product, increase its quantity, or decrease its quantity using buttons provided in the component.
• The total price is dynamically calculated by multiplying the product price by the quantity.

CartSummary Component

The CartSummary component is part of the saqib-test-lib package. It provides a summary of the items in the cart, including the total order value, delivery details, and a checkout button. Additionally, it shows payment options and links to shipping and privacy information.

Installation

Install the saqib-test-lib package using npm or yarn:

npm install saqib-test-lib

or

yarn add saqib-test-lib

Usage

import React from "react";
import { CartSummary } from "saqib-test-lib";
import { FaCcPaypal, FaGooglePay } from "react-icons/fa6";
import { RiMastercardFill, RiVisaLine } from "react-icons/ri";

const App = () => {
  const cartItems = [
    {
      id: 1,
      title: "Product 1",
      price: 49.99,
      quantity: 2,
      thumbnail: "https://example.com/product1.jpg",
    },
    {
      id: 2,
      title: "Product 2",
      price: 19.99,
      quantity: 1,
      thumbnail: "https://example.com/product2.jpg",
    },
  ];

  const LinkComponent = ({ children, href, className }: any) => (
    <a href={href} className={className}>
      {children}
    </a>
  );

  return (
    <CartSummary
      items={cartItems}
      LinkComponent={LinkComponent}
      href="/checkout"
    />
  );
};

export default App;

Props

Required Props

Prop	Type	Description
items	ICart[]	Array of cart items containing details such as title, price, and quantity.
LinkComponent	any	Component used for rendering the "Proceed to Checkout" button.
href	string	URL to navigate to the checkout page when the button is clicked.

items Object

Each cart item has the following structure:

Key	Type	Description
title	string	The title of the product.
price	number	The price per unit of the product.
quantity	number	The quantity of the product in the cart.
thumbnail	string	URL of the product's thumbnail image.

Example

<CartSummary
  items={[
    {
      id: 1,
      title: "Sample Product",
      price: 39.99,
      quantity: 3,
      thumbnail: "https://example.com/product-image.jpg",
    },
  ]}
  LinkComponent={({ href, children }) => <a href={href}>{children}</a>}
  href="/checkout"
/>

In this example:

• A cart summary is displayed with the order total, free delivery information, and a link to the checkout page.
• The total price is dynamically calculated based on the products and their quantities.
• Icons for different payment methods (Visa, Google Pay, Mastercard, and PayPal) are shown at the bottom of the summary.

CheckoutProducts Component

The CheckoutProducts component is part of the saqib-test-lib package. It displays a list of products that are part of a checkout process, showing details such as the product title, quantity, and total price.

Installation

Install the saqib-test-lib package using npm or yarn:

npm install saqib-test-lib

or

yarn add saqib-test-lib

Usage

import React from "react";
import { CheckoutProducts } from "saqib-test-lib";

const App = () => {
  const cartItems = [
    {
      id: 1,
      title: "Product 1",
      price: 49.99,
      quantity: 2,
      thumbnail: "https://example.com/product1.jpg",
    },
    {
      id: 2,
      title: "Product 2",
      price: 19.99,
      quantity: 1,
      thumbnail: "https://example.com/product2.jpg",
    },
  ];

  return <CheckoutProducts items={cartItems} />;
};

export default App;

Props

Required Props

Prop	Type	Description
items	ICart[]	Array of cart items containing details such as title, price, quantity, and thumbnail.

Optional Props

Prop	Type	Description
className	string	Additional class name(s) for custom styling.

items Object

Each cart item has the following structure:

Key	Type	Description
title	string	The title of the product.
price	number	The price per unit of the product.
quantity	number	The quantity of the product in the cart.
thumbnail	string	URL of the product's thumbnail image.

Example

<CheckoutProducts
  items={[
    {
      id: 1,
      title: "Sample Product",
      price: 39.99,
      quantity: 3,
      thumbnail: "https://example.com/product-image.jpg",
    },
    {
      id: 2,
      title: "Another Product",
      price: 19.99,
      quantity: 2,
      thumbnail: "https://example.com/another-product.jpg",
    },
  ]}
/>

In this example:

• A list of products in the checkout is displayed, each with its image, title, quantity, and price.
• The total price is dynamically calculated based on the product price and quantity.
• You can optionally pass a className prop to add custom styles to the container.

CheckoutSummery Component

The CheckoutSummery component is part of the saqib-test-lib package. It provides a summary of the items in the cart, including details about delivery and subtotal costs.

Installation

Install the saqib-test-lib package using npm or yarn:

npm install saqib-test-lib

or

yarn add saqib-test-lib

Usage

import React from "react";
import { CheckoutSummery } from "saqib-test-lib";

const App = () => {
  const cartItems = [
    {
      id: 1,
      title: "Product 1",
      price: 49.99,
      quantity: 2,
      thumbnail: "https://example.com/product1.jpg",
    },
    {
      id: 2,
      title: "Product 2",
      price: 19.99,
      quantity: 1,
      thumbnail: "https://example.com/product2.jpg",
    },
  ];

  const deliveryCharge = 0; // Free delivery

  return <CheckoutSummery items={cartItems} delivery={deliveryCharge} />;
};

export default App;

Props

Required Props

Prop	Type	Description
items	ICart[]	Array of cart items containing details such as title, price, quantity, and thumbnail.
delivery	number	The delivery charge. Pass 0 for free delivery.

items Object

Each cart item has the following structure:

Key	Type	Description
title	string	The title of the product.
price	number	The price per unit of the product.
quantity	number	The quantity of the product in the cart.
thumbnail	string	URL of the product's thumbnail image.

Example

<CheckoutSummery
  items={[
    {
      id: 1,
      title: "Sample Product",
      price: 39.99,
      quantity: 3,
      thumbnail: "https://example.com/product-image.jpg",
    },
    {
      id: 2,
      title: "Another Product",
      price: 19.99,
      quantity: 2,
      thumbnail: "https://example.com/another-product.jpg",
    },
  ]}
  delivery={5.0} // Delivery charge of $5.00
/>

In this example:

• The order summary is displayed, showing the products in the cart, their quantities, and the subtotal.
• The delivery cost is displayed as free or with the specified amount.
• The subtotal is calculated as the total cost of items plus the delivery charge.