npm i react-perfect-scrollbar

import ScrollBar from "react-perfect-scrollbar";
import { Card, CardBody, Col, ListGroup, ListGroupItem } from "reactstrap";
import { DynamicScrollableContent } from "./DynamicScrollableContent";
import { CommonCardHeader } from "@/Components/General/Widgets/Common/CommonCardHeader";
import { Href, ImagePath, ScrollableContents } from "@/Constant/constant";
import { ScrollableContentData } from "@/Data/BonusUi/Scrollable/ScrollableData";
import Image from "next/image";

const ScrollableContent = () => {
  return (
    <Col xxl="4" md="12">
      <Card>
        <CommonCardHeader title={ScrollableContents} subTitle={ScrollableContentData} />
        <CardBody>
          <ScrollBar className="scroll-demo scroll-b-none" style={{ width: "100%", height: "300px" }}>
            <ListGroup className="main-lists-content">
              <ListGroupItem tag="a" className="list-group-item-action active list-hover-primary" href={Href}>
                <div className="list-wrapper gap-0">
                  <Image priority width={55} height={55} className="list-img" src={`${ImagePath}/user/9.jpg`} alt="profile" />
                  <div className="list-content">
                    <h6>Molly Boake</h6>
                    <p>MollyBoake@rhyta.com</p><small>5 days ago</small></div>
                </div>
              </ListGroupItem>
              <DynamicScrollableContent />
            </ListGroup>
          </ScrollBar>
        </CardBody>
      </Card>
    </Col>
  );
};

export default ScrollableContent;

Remove package from project

npm remove react-perfect-scrollbar

npm i @progress/kendo-react-treeview

import { CommonCardHeader } from "@/Components/General/Widgets/Common/CommonCardHeader";
import { BasicTree } from "@/Constant/constant";
import { BasicTreeData, TreeViewList } from "@/Data/BonusUi/TreeView/TreeViewData";
import { BasicTreesProp } from "@/Types/BonusUiType";
import cx from "classnames";
import { handleTreeViewCheckChange, processTreeViewItems, TreeView, TreeViewCheckDescriptor, TreeViewExpandChangeEvent } from "@progress/kendo-react-treeview";
import { FaCheckSquare, FaMinusSquare, FaSquare } from "react-icons/fa";
import { IoMdArrowDropright } from "react-icons/io";
import { Card, CardBody } from "reactstrap";
import { useState } from "react";

export const ArrowIcon: React.FC<BasicTreesProp> = ({ isOpen, className }) => {
  const baseClass = "arrow";
  const classes = cx(baseClass, { [`${baseClass}--closed`]: !isOpen }, { [`${baseClass}--open`]: isOpen }, className);
  return ;
};

export const CheckBoxIcon = ({ variant, ...rest }: BasicTreesProp) => {
  switch (variant) {
    case "all":
      return <FaCheckSquare color="#53A653" {...rest} />;
    case "none":
      return <FaSquare color="white" {...rest} style={{ border: "1px solid #80808069" }} />;
    case "some":
      return <FaMinusSquare {...rest} color="#5C61F2" />;
    default:
      return null;
  }
};

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} subTitle={BasicTreeData} />
      <CardBody>
        <div className="tree-container">
          <div className="checkbox">
            <TreeView
              data={processTreeViewItems(treeState.items, {
                check: treeState.check,
              })}
              checkField={checkField}
              checkboxes={true}
              onCheckChange={onCheckChange}
              expandIcons={true}
              onExpandChange={onExpandChange}
            />
          </div>
        </div>
      </CardBody>
    </Card>
  );
};

export default BasicTrees;   

Remove package from project

npm remove @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">crocs 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 remove react-filepond

npm i @sjmc11/tourguidejs

"use client";
import { TourSteps } from "@/Data/BonusUi/Tour/TourData";
import { TourGuideClient } from "@sjmc11/tourguidejs";
import TourMain from "./TourMain";
import { useEffect, useRef, useState } from "react";
import { toast } from "react-toastify";

const 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 (
    <>
      <TourMain />
    </>
  );
};

export default TourContainer;
              

Remove package from project

npm remove @sjmc11/tourguidejs

npm i sweetalert2

import SweetAlert from "sweetalert2";

const BasicExample = () => {
  const displayAlert = () => {
    SweetAlert.fire("Welcome! to the oliva theme");
  };

return (
  <Card className="height-equal">
    <CardBody className="btn-showcase">
      <Button color="primary" className="sweet-1" type="button" onClick={displayAlert}>{ClickIt}</Button>
    </CardBody>
  </Card>
 );
};

Remove package from project

npm remove sweetalert2

npm i react-range

import { Range, getTrackBackground } from "react-range";

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

  return (
    <Form className="theme-form range-slider">
      <FormGroup>
        <Row className="py-1">
          <Col md="12">
            <div className="range-container">
              <Range values={values} step={1} min={100} max={1000} onChange={(values) => setValues(values)} renderTrack={({ props, children }) => (
                  <div onMouseDown={props.onMouseDown} onTouchStart={props.onTouchStart} className="range-track">
                    <output className="range-output">0</output>
                    <div ref={props.ref} className="range-track-bar" style={{ background: getTrackBackground({ values: values, colors: ["#33BFBF", "#ccc"], min: 100, max: 1000 })}}>
                      {children}
                    </div>
                    <output className="range-output">20</output>
                  </div>
                )}
                renderThumb={({ props.isDragged }) => (
                  <div {...props} className="range-thumb">
                    <div className={`range-thumb-bar ${isDragged ? 'range-thumb-bar-dragged' : ''}`} />
                  </div>
                )}
              />
              <output id="output" className="range-output">{values[0]}</output>
            </div>
          </Col>
        </Row>
      </FormGroup>
    </Form>
  );
};

Remove package from project

npm remove react-range

npm i react-image-crop

<!--Image cropper css-->
import 'react-image-crop/dist/ReactCrop.css';

import ReactCrop, { centerCrop, makeAspectCrop, Crop, PixelCrop } from "react-image-crop";

export default function ImageCropperBody() {
  const [imgSrc, setImgSrc] = useState("");
  const previewCanvasRef = useRef<HTMLCanvasElement>(null);
  const imgRef = useRef<HTMLImageElement>(null);
  const [crop, setCrop] = useState<Crop>();
  const [completedCrop, setCompletedCrop] = useState<PixelCrop>();
  const [scale, setScale] = useState(1);
  const [rotate, setRotate] = useState(0);
  const [aspect, setAspect] = useState<number | undefined>(16 / 9);

  const onSelectFile = (e: React.ChangeEvent<HTMLInputElement>) => {
    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 centerAspectCrop = (mediaWidth: number, mediaHeight: number, aspect: number) => {
    return centerCrop(makeAspectCrop({ unit: "%", width: 90 }, aspect, mediaWidth, mediaHeight), mediaWidth, mediaHeight);
  };

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

  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]
  );

  return (
    <div>
      <Input type="file" accept="image/*" onChange={onSelectFile} />
      <Label htmlFor="scale-input">{'Scale: '}</Label>
      <Input
          id="scale-input"
          type="number"
          step="0.1"
          value={scale}
          disabled={!imageSrc}
          onChange={(e) => setScale(Number(e.target.value))}
      />
      <Label htmlFor="rotate-input">{'Rotate: '}</Label>
      <Input
          id="rotate-input"
          type="number"
          value={rotate}
          disabled={!imageSrc}
          onChange={(e) =>
              setRotate(Math.min(180, Math.max(-180, Number(e.target.value))))
          }
      />
      {!!imageSrc && (
          <ReactCrop crop={crop} onChange={(_, percentCrop) => setCrop(percentCrop)} onComplete={(c) => setCompletedCrop(c)} aspect={aspect}>
              <img ref={imageRef} alt="Crop me" src={imageSrc} onLoad={onImageLoad} className="crop-image" />
          </ReactCrop>
      )}
      <div>
          {!!completedCrop && (
              <canvas
                  ref={previewCanvasRef}
                  className="preview-canvas"
                  style={{ width: completedCrop.width, height: completedCrop.height, }}
              />
          )}
      </div>
  </div>
  );
};
                  

Remove package from project

npm remove react-image-crop