npm i react-perfect-scrollbar

import Scrollbar from "react-perfect-scrollbar";

const CustomScroll = () => {
return (
 <Card>
  <CardBody>
   <Scrollbar className="vertical-scroll scroll-demo" style={{ width: "100%", height: 300 }}>
      <H5>Custom Scrollbar</H5>
      <P>Custom Scrollbar</P>
   </ScrollBar>
  </CardBody>
</Card>
)}

Remove package from project

npm uninstall react-perfect-scrollbar

npm i @progress/kendo-react-treeview

import CommonCardHeader from "@/CommonComponent/CommonCardHeader";
import { BasicTree } from "@/Constant";
import { BasicTreeData, TreeViewList } from "@/Data/BonusUi/TreeView";
import { handleTreeViewCheckChange, processTreeViewItems, TreeView, TreeViewCheckDescriptor, TreeViewExpandChangeEvent } from "@progress/kendo-react-treeview";
import { useState } from "react";
import { Card, CardBody } from "reactstrap";

const BasicTrees = () => {
  const checkField = "checked";

  type TreeState = {
    check: TreeViewCheckDescriptor;
    items: typeof TreeViewList;
  };

  const [treeState, setTreeState] = useState<TreeState>({
    check: { idField: "text", applyCheckIndeterminate: true, ids: [] },
    items: TreeViewList,
  });
  const onCheckChange = (event: any) => {
    const settings = { checkChildren: true, checkParents: true };
    const newCheck = handleTreeViewCheckChange(event, treeState.check, [treeState.items], settings) as TreeViewCheckDescriptor;
    setTreeState((prevState) => ({
      ...prevState,
      check: { ...prevState.check, ...newCheck },
    }));
  };

  const onExpandChange = (event: TreeViewExpandChangeEvent) => {
    event.item.expanded = !event.item.expanded;
    setTreeState((prevState: any) => ({ ...prevState, items: [...prevState.items] }));
  };

  return (
    <Card>
      <CommonCardHeader title={BasicTree} span={BasicTreeData} />
      <CardBody>
        <div className='tree-container'>
          <TreeView
            data={processTreeViewItems(treeState.items, {
              check: treeState.check,
            })}
            checkField={checkField}
            checkboxes={true}
            onCheckChange={onCheckChange}
            expandIcons={true}
            onExpandChange={onExpandChange}
          />
        </div>
      </CardBody>
    </Card>
  );
};

export default BasicTrees;
                  

Remove package from project

npm uninstall @progress/kendo-react-treeview

import { ImagePath, TopRightToasts } from "@/Constant";
import Image from "next/image";
import { useState } from "react";
import { Button, Toast, ToastBody } from "reactstrap";

const TopRightToast = () => {
  const [open, setOpen] = useState(false);
  const toggle = () => {
    setOpen(true);
    setTimeout(() => {
      setOpen(false);
    }, 3000);
  };

  return (
    <>
      <Button color="primary" onClick={toggle}>{TopRightToasts}</Button>
      <div className="toast-container position-fixed top-0 end-0 p-3 toast-index toast-rtl">
        <Toast fade isOpen={open}>
          <div className="toast-header toast-img">
            <Image height={100} width={100} className="rounded me-2" src={`${ImagePath}/product-lists/profile.png`} alt="profile" />
            <strong className="me-auto">Moscow theme</strong>
            <small>5 min ago</small>
            <Button  close onClick={() => setOpen(false)}></Button>
          </div>
          <ToastBody className="toast-dark">Hello, I`m a web-designer.</ToastBody>
        </Toast>
      </div>
    </>
  );
};

export default TopRightToast;

npm i react-filepond

<!-- Dropzone css -->
@import '~react-dropzone-uploader/dist/styles.css';
@import 'filepond/dist/filepond.min.css';

import { FilePond } from "react-filepond";

const DefaultFileUpload = () => {
const [files, setFiles] = useState<ExtFile[]>([]);

return (
    <Card>
      <CardBody className="mt-3 mb-3">
        <FilePond files={files} onupdatefiles={() => setFiles} allowMultiple={true}  maxFiles={1}
           labelIdle={
            'Drag & Drop your files or  <span className="filepond--label-action text-danger text-decoration-none">Browse</span>'
          }
        />
      </CardBody>
    </Card>
);
};

Remove package from project

npm uninstall react-filepond

npm i @sjmc11/tourguidejs

"use client";
import { TourGuideClient } from "@sjmc11/tourguidejs";
import { useEffect, useRef, useState } from "react";
import { Container, Row } from "reactstrap";
import TourMain from "./TourMain";

import { TourSteps } from "@/Data/BonusUi/Tour";
import { toast } from "react-toastify";

export default function TourContainer() {
  const tourRef = useRef<any | null>(null);
  const [isTourOpen, setIsTourOpen] = useState(false);

  useEffect(() => {
    try {
      tourRef.current = new TourGuideClient({ steps: TourSteps });
    } catch (error) {
      toast.error("Error initializing TourGuideClient:" + error);
    }

    return () => tourRef.current?.destroy?.();
  }, []);

  useEffect(() => {
    const timer = setTimeout(() => setIsTourOpen(true), 1000);
    return () => clearTimeout(timer);
  }, []);

  useEffect(() => {
    if (isTourOpen) tourRef.current?.start?.();
  }, [isTourOpen]);

  return (
    <>
      <Container fluid>
        <div className='user-profile'>
          <Row>
            <TourMain />
          </Row>
        </div>
      </Container>
    </>
  );
}

Remove package from project

npm uninstall @sjmc11/tourguidejs

npm i sweetalert2

import CommonCardHeader from "@/CommonComponent/CommonCardHeader";
import { BasicAlertTitle, ClickIt } from "@/Constant";
import { BasicAlertSubTitle } from "@/Data/BonusUi/SweetAlert/SweetAlert";
import { Button, Card, CardBody, Col } from "reactstrap";
import Swal from "sweetalert2";

const BasicAlert = () => {
  const handleAlert = () => Swal.fire("Welcome! to the Moscow theme");
  return (
    <Col xxl='3' xl='4' sm='6' xs='12' className='box-col-4'>
      <Card className='height-equal'>
        <CommonCardHeader title={BasicAlertTitle} span={BasicAlertSubTitle} />
        <CardBody className='btn-showcase'>
          <Button color='primary' className='m-0' onClick={handleAlert}>
            {ClickIt}
          </Button>
        </CardBody>
      </Card>
    </Col>
  );
};
export default BasicAlert;
                  

Remove package from project

npm uninstall sweetalert2

npm i react-range

import { useState } from "react";
import { Range, getTrackBackground } from "react-range";
import { Col, Form, Row } from "reactstrap";

export const DefaultRangeSliderForm = () => {
  const [values, setValues] = useState([550]);

  return (
    <Form className='theme-form form-label-align-right range-slider'>
      <Row className='form-group py-1'>
        <Col md='10'>
          <div style={{ color: "var(--theme-default)" }} className='d-flex justify-content-center flex-wrap m-3'>
            <Range
              values={values}
              step={1}
              min={100}
              max={1000}
              onChange={(values) => setValues(values)}
              renderTrack={({ props, children }) => (
              <div onMouseDown={props.onMouseDown} onTouchStart={props.onTouchStart} style={{ ...props.style, height: "36px" }} className='d-flex w-100'>
                <output className='mt-2 mx-2'>100</output>
                <div ref={props.ref} className='rounded-2 w-100' style={{ height: "10px", background: getTrackBackground({ values: values, colors: ["var(--theme-default)", "#ccc"], min: 100, max: 1000 }), alignSelf: "center" }}>
                  {children}
                </div>
                <output className='mt-2 mx-2'>1000</output>
              </div>
            )}
            renderThumb={({ props }) => {
              const { key, ...restProps } = props;
              const prop = { ...restProps };
              return (
                <div key={key} {...prop} className='d-flex justify-content-center align-items-center' style={{ ...prop.style, height: "3px", width: "3px", backgroundColor: "#FFF", boxShadow: "0px 2px 6px #AAA" }}>
                <div style={{ height: "20px", width: "5px", backgroundColor: "var(--theme-default)" }} />
              </div>
              );
            }}    
          />
          <output id='output' className='mt-3'>
            {values[0]}
          </output>
        </div>
      </Col>
    </Row>
  </Form>
  );
};
                  

Remove package from project

npm uninstall react-range

import { Card, CardBody, Col, Pagination, PaginationItem, PaginationLink } from "reactstrap";
import { DefaultPaginations, Href } from "@/Constant";
import CommonCardHeader from "@/CommonComponent/CommonCardHeader";
import { DefaultPaginationsData } from "@/Data/BonusUi/Paginations";

const DefaultPagination = () => {
  return (
    <Col md="6">
      <Card className="height-equal">
        <CommonCardHeader title={DefaultPaginations} span={DefaultPaginationsData} />
        <CardBody>
          <Pagination className="pagination-primary pagin-border-primary" aria-label="Page navigation example">
            <PaginationItem><PaginationLink href={Href} previous>Previous</PaginationLink></PaginationItem>
            <PaginationItem><PaginationLink href={Href}>1</PaginationLink></PaginationItem>
            <PaginationItem><PaginationLink href={Href}>2</PaginationLink></PaginationItem>
            <PaginationItem><PaginationLink href={Href}>3</PaginationLink></PaginationItem>
            <PaginationItem><PaginationLink href={Href} next>Next</PaginationLink></PaginationItem>
          </Pagination>
        </CardBody>
      </Card>
    </Col>
  );
};

export default DefaultPagination;

import CommonCardHeader from "@/CommonComponent/CommonCardHeader";
import { BreadcrumbAlert, BreadcrumbHome, BreadcrumbUiKits, DefaultBreadcrumbs, Href } from "@/Constant";
import { BreadcrubmData } from "@/Data/BonusUi/Breadcrumb";
import Link from "next/link";
import { Breadcrumb, BreadcrumbItem, Card, CardBody, Col } from "reactstrap";

const DefaultBreadcrumb = () => {
  return (
    <Col md="6">
      <Card className="height-equal">
        <CommonCardHeader title={DefaultBreadcrumbs} span={BreadcrubmData} />
        <CardBody>
          <Breadcrumb>
            <BreadcrumbItem><Link href={Href}>{BreadcrumbHome}</Link></BreadcrumbItem>
            <BreadcrumbItem active>{BreadcrumbUiKits}</BreadcrumbItem>
          </Breadcrumb>
          <Breadcrumb className="m-0">
            <BreadcrumbItem><Link href={Href}>{BreadcrumbHome}</Link></BreadcrumbItem>
            <BreadcrumbItem><Link href={Href}>{BreadcrumbUiKits}</Link></BreadcrumbItem>
            <BreadcrumbItem active>{BreadcrumbAlert}</BreadcrumbItem>
          </Breadcrumb>
        </CardBody>
      </Card>
    </Col>
  );
};

export default DefaultBreadcrumb;

npm i react-image-crop

<!--Image cropper css-->
import React, { useState, useRef } from "react";
import ReactCrop, { centerCrop, makeAspectCrop, Crop, PixelCrop } from "react-image-crop";
import { canvasPreview } from "./canvasPreview";
import { useDebounceEffect } from "./useDebounceEffect";
import { DownloadCrop, HiddenDownload } from "@/Constant";
import { CropControl } from "./CropControl";
import { Button } from "reactstrap";

const centerAspectCrop = (mediaWidth: number, mediaHeight: number, aspect: number) => {
  return centerCrop(makeAspectCrop({ unit: "%", width: 90 }, aspect, mediaWidth, mediaHeight), mediaWidth, mediaHeight);
};

const ImageCropperBody = () => {
  const [imgSrc, setImgSrc] = useState("");
  const previewCanvasRef = useRef(null);
  const imgRef = useRef(null);
  const hiddenAnchorRef = useRef(null);
  const blobUrlRef = useRef("");
  const [crop, setCrop] = useState();
  const [completedCrop, setCompletedCrop] = useState();
  const [scale, setScale] = useState(1);
  const [rotate, setRotate] = useState(0);
  const [aspect, setAspect] = useState(16 / 9);

  const onSelectFile = (e: React.ChangeEvent) => {
    if (e.target.files && e.target.files.length > 0) {
      setCrop(undefined); // Makes crop preview update between images.
      const reader = new FileReader();
      reader.addEventListener("load", () => setImgSrc(reader.result?.toString() || ""));
      reader.readAsDataURL(e.target.files[0]);
    }
  };

  const onImageLoad = (e: React.SyntheticEvent) => {
    if (aspect) {
      const { width, height } = e.currentTarget;
      setCrop(centerAspectCrop(width, height, aspect));
    }
  };

  const onDownloadCropClick = () => {
    if (!previewCanvasRef.current) throw new Error("Crop canvas does not exist");
    previewCanvasRef.current.toBlob((blob) => {
      if (!blob) throw new Error("Failed to create blob");
      if (blobUrlRef.current) URL.revokeObjectURL(blobUrlRef.current);
      blobUrlRef.current = URL.createObjectURL(blob);
      hiddenAnchorRef.current!.href = blobUrlRef.current;
      hiddenAnchorRef.current!.click();
    });
  };

  useDebounceEffect(
    async () => {
      if (completedCrop?.width && completedCrop?.height && imgRef.current && previewCanvasRef.current)
        // We use canvasPreview as it's much faster than imgPreview.
        canvasPreview(imgRef.current, previewCanvasRef.current, completedCrop, scale, rotate);
    },
    100,
    [completedCrop, scale, rotate]
  );

  const handleToggleAspectClick = () => {
    if (aspect) {
      setAspect(undefined);
    } else if (imgRef.current) {
      const { width, height } = imgRef.current;
      setAspect(16 / 9);
      setCrop(centerAspectCrop(width, height, 16 / 9));
    }
  };

  const imgStyle = { transform: `scale(${scale}) rotate(${rotate}deg)` };

  return (
    <div className="App">
      <CropControl imgSrc={imgSrc} scale={scale} setScale={setScale} rotate={rotate} setRotate={setRotate} aspect={aspect} onSelectFile={onSelectFile} handleToggleAspectClick={handleToggleAspectClick} />
      {!!imgSrc && (
        <ReactCrop crop={crop} onChange={(_, percentCrop) => setCrop(percentCrop)} onComplete={(c) => setCompletedCrop(c)} aspect={aspect}>
          <img ref={imgRef} alt="Crop me" src={imgSrc} style={imgStyle} onLoad={onImageLoad} />
        </ReactCrop>
      )}
      {!!completedCrop && (
        <>
          <div>
            <canvas ref={previewCanvasRef} style={{ border: "1px solid black", objectFit: "contain", width: completedCrop.width, height: completedCrop.height }} />
          </div>
          <div>
            <Button color="primary" className="mt-2" onClick={onDownloadCropClick}>{DownloadCrop}</Button>
            <a ref={hiddenAnchorRef} download className="position-absolute top-100 d-none">{HiddenDownload}</a>
          </div>
        </>
      )}
    </div>
  );
};

export default ImageCropperBody;

Remove package from project

npm uninstall react-image-crop