npm i react-accessible-treeview

import TreeView, { flattenTree } from "react-accessible-treeview";
import { IoMdArrowDropright } from "react-icons/io";
import { FaSquare, FaCheckSquare, FaMinusSquare } from "react-icons/fa";

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

export const CheckBoxIcon = ({ variant, onClick, ...rest }: CheckBoxIconProps) => {
  switch (variant) {
    case "all": return (<span onClick={onClick}> <FaCheckSquare {...rest} /> </span>);
    case "none": return (<span onClick={onClick}> <FaSquare {...rest} /> </span>);
    case "some": return (<span onClick={onClick}> <FaMinusSquare {...rest} /> </span>);
    default: return null;
  }
};

const BasicTrees = () => {
  const treeData = flattenTree(<!-- Your JSON Data -->);

 return (
   <Card>
    <CardBody>
     <TreeView data={treeData} aria-label="Checkbox tree" multiSelect propagateSelect propagateSelectUpwards togglableSelect expandedIds={[1,2,6,10]} 

     nodeRenderer={({ element, isBranch, isExpanded, isSelected, isHalfSelected, getNodeProps, level, handleSelect, handleExpand }) => {
      return (
        <div {...getNodeProps({ onClick: handleExpand })} style={{ marginLeft: 40 * (level - 1),marginTop:5 }} className="d-flex align-items-center">
          {isBranch && <ArrowIcon isOpen={isExpanded} />}
          <CheckBoxIcon className="checkbox-icon" onClick={(e) => { handleSelect(e); e.stopPropagation(); }} variant={isHalfSelected ? "some" : isSelected ? "all" : "none"} />

          <span className="name">{element.name}</span></div>
       );
     }}/>
    </CardBody>
  </Card>
)}

Remove package from project

npm remove react-accessible-treeview

import { Toast, ToastBody,ToastHeader } 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}>
           <ToastHeader className="toast-img" toggle={toggle}>
             <strong className="me-auto">Dunzo theme</strong>
             <small>5 min ago</small>
           </ToastHeader>
           <ToastBody className="toast-dark">Hello, I'm a web-designer.</ToastBody>
         </Toast>
       </div>
     </>
 )}

npm i react-rating

import Rating from 'react-rating';

const OneToTenRatingBar = () => {
  const [rating, setRating] = useState(7);
  const handleRatingChange = (newRating: number) => {
        setRating(newRating);
  };

 return (
   <Card>
    <CardBody>
     <div className="rating-container">
        <Rating start={0} stop={10} initialRating={rating} onChange={handleRatingChange} />
        <p className="current-rating">Selected Rating: {rating}</P>
     </Scrollbars>
    </CardBody>
  </Card>
)}

Remove package from project

npm remove react-rating

npm i react-dropzone

<!-- Dropzone css -->
import RatioImage from "@/CommonComponents/RatioImage";
import React, { Fragment, useState } from "react";
import Dropzone from "react-dropzone";

const CommonFileUpload: React.FC<{ multiple?: boolean }> = ({ multiple }) => {
  const [uploadedFiles, setUploadedFiles] = useState<File[]>([]);

  const onDrop = (acceptedFiles: File[]) => {
    setUploadedFiles((prevFiles) => [...prevFiles, ...acceptedFiles]);
  };

  const removeFile = (indexToRemove: number) => {
    setUploadedFiles((prevFiles) => prevFiles.filter((_, index) => index !== indexToRemove));
  };

  return (
    <Fragment>
      {/* Dropzone visible only if no files are uploaded */}
      {uploadedFiles.length === 0 ? (
        <Dropzone onDrop={onDrop}>
          {({ getRootProps, getInputProps }) => (
            <div {...getRootProps()} className="dropzone-container">
              <input {...getInputProps()} />
              <p>Drag & drop your file here, or click to select a file</p>
            </div>
          )}
        </Dropzone>
      ) : (
        <Fragment>
          {/* Dropzone for adding more files */}
          {multiple && (
            <Dropzone onDrop={onDrop}>
              {({ getRootProps, getInputProps }) => (
                <div {...getRootProps()} className="add-more-files-zone">
                  <input {...getInputProps()} />
                  <p>Click or drag more files to add</p>
                </div>
              )}
            </Dropzone>
          )}

          {/* Display uploaded files */}
          <div className="uploaded-files">
            {uploadedFiles.map((file, index) => (
              <div key={index} className="file-card">
                {file.type.startsWith("image/") ? <RatioImage src={URL.createObjectURL(file)} alt={file.name} className="file-thumbnail" /> : <div className="file-placeholder">{file.name.split(".").pop()?.toUpperCase()} File</div>}
                <p className="file-name">{file.name}</p>
                <p className="file-size">{(file.size / 1024).toFixed(2)} KB</p>
                <button onClick={() => removeFile(index)} className="remove-button" title="Remove file">
                  ×
                </button>
              </div>
            ))}
          </div>
        </Fragment>
      )}
    </Fragment>
  );
};

export default CommonFileUpload;

Remove package from project

npm remove react-dropzone

npm i @sjmc11/tourguidejs

import { TourSteps } from "@/Data/BonusUi/Tour";
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 swiper

import CommonCardHeader from "@/CommonComponents/CommonCardHeader";
import RatioImage from "@/CommonComponents/RatioImage";
import { ImagePath, SlideOnly } from "@/Constants";
import { SliesOnlyData, SliesOnlyDataList } from "@/Data/BonusUi/OwlCarousel";
import { Card, CardBody, Col } from "reactstrap";
import { Autoplay } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";

const SlidesOnly = () => {
  return (
    <Col xl="6" xs="12">
       <Card className="title-line">
         <CommonCardHeader title={SlideOnly} subTitle={SliesOnlyData} />
         <CardBody>
           <Swiper modules={[Autoplay]} spaceBetween={10} slidesPerView={1} loop={true} autoplay={{ delay: 2000 }}>
            {SliesOnlyDataList?.map((item, index) => (
               <SwiperSlide key={index}>
                 <RatioImage className="d-block w-100" src={`${ImagePath}/${item.image}`} alt="drawing-room" />
               </SwiperSlide>
            ))}
           </Swiper>
         </CardBody>
       </Card>
     </Col>
  );
};

export default SlidesOnly;
                                      

Remove package from project

npm remove swiper

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

<!-- font awesome css -->
import "font-awesome/scss/font-awesome.scss"
                

<!-- some icon display for demo -->
<i className="fa fa-bluetooth mx-1"></i>
<i className="fa fa-bitcoin mx-1"></i>
<i className="fa fa-anchor mx-1"></i>
<i className="fa fa-text-height mx-1"></i>

<!-- ico icon css -->
import "/public/assets/scss/icoicon/_icons.scss"
    

<!-- some icon display for demo -->
<i className="icofont icofont-bow mx-1"></i>
<i className="icofont icofont-animal-dolphin mx-1"></i>
<i className="icofont icofont-brand-apple mx-1"></i>
<i className="icofont icofont-bank-alt mx-1"></i>

<!-- themify icon css -->
import "./themify.scss";
                

<!-- some icon display for demo -->
<i className="icon-fullscreen mx-1"></i>
<i className="icon-save-alt mx-1"></i>
<i className="icon-volume mx-1"></i>
<i className="icon-instagram mx-1"></i>

npm i react-feather

<!-- some icon display for demo -->
import { Heart, Camera } from "react-feather";

<Heart color="red" size={48}/>
<Camera color="green" size={28}/>
<Search size={38}/>

Remove package from project

npm remove react-feather