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.