feat: typescript migration

Author: imb96

src/lib/ScrollToTop/ScrollToTop.hook.js …mponents/ScrollToTop/ScrollToTop.hook.tssrc/lib/ScrollToTop/ScrollToTop.hook.js renamed to src/components/ScrollToTop/ScrollToTop.hook.ts src/lib/ScrollToTop/ScrollToTop.hook.js renamed to src/components/ScrollToTop/ScrollToTop.hook.ts

@@ -2,13 +2,17 @@ import React from "react";
 import { useScrollToTop } from "./ScrollToTop.hook";
 import "./ScrollToTop.styles.css";
 
-export const ScrollToTop = ({ children, style }) => {
+export interface ScrollToTopProps {
+  children: React.ReactNode;
+  style: React.CSSProperties;
+}
+
+export const ScrollToTop = ({ children, style }: ScrollToTopProps) => {
   const { isVisible, onClick } = useScrollToTop();
 
   return (
     <div
       className={`ScrollToTop ${isVisible ? "visible" : ""}`}
-      isVisible={isVisible}
       onClick={onClick}
       style={style}
     >

…c/lib/ScrollToTop/ScrollToTop.styles.css …nents/ScrollToTop/ScrollToTop.styles.csssrc/lib/ScrollToTop/ScrollToTop.styles.css renamed to src/components/ScrollToTop/ScrollToTop.styles.css src/lib/ScrollToTop/ScrollToTop.styles.css renamed to src/components/ScrollToTop/ScrollToTop.styles.css

@@ -1,8 +1,16 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 
-export const useVirtualScroll = ({ list, onItemSelected }) => {
+interface useVirtualScrollProps {
+  list: string[];
+  onItemSelected: (item: string) => void;
+}
+
+export const useVirtualScroll = ({
+  list,
+  onItemSelected,
+}: useVirtualScrollProps) => {
   const scrollList = useMemo(() => [null, null, ...list, null, null], [list]);
-  const scrollRef = useRef(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
   const [centerIndex, setCenterIndex] = useState(0);
 
   useEffect(() => {
@@ -18,7 +26,7 @@ export const useVirtualScroll = ({ list, onItemSelected }) => {
         );
         setCenterIndex(centerItemIndex);
 
-        onItemSelected(scrollList[centerItemIndex]);
+        onItemSelected(scrollList[centerItemIndex] as string);
       };
       scrollContainer.addEventListener("scroll", updateCenterItemWithRef);
 
@@ -28,6 +36,7 @@ export const useVirtualScroll = ({ list, onItemSelected }) => {
         scrollContainer.removeEventListener("scroll", updateCenterItemWithRef);
       };
     }
+    return () => {};
   }, [scrollList, onItemSelected]);
 
   return {

src/lib/ScrollToTop/ScrollToTop.jsx …c/components/ScrollToTop/ScrollToTop.tsxsrc/lib/ScrollToTop/ScrollToTop.jsx renamed to src/components/ScrollToTop/ScrollToTop.tsx src/lib/ScrollToTop/ScrollToTop.jsx renamed to src/components/ScrollToTop/ScrollToTop.tsx

@@ -2,14 +2,23 @@ import React from "react";
 import { useVirtualScroll } from "./VirtualScroll.hook";
 import "./VirtualScroll.styles.css";
 
+export default interface VirtualScrollProps {
+  list: string[];
+  onItemSelected: (item: string) => void;
+  containerItemStyle: React.CSSProperties;
+  listStyle: React.CSSProperties;
+  centerItemStyle: React.CSSProperties;
+  itemStyle: React.CSSProperties;
+}
+
 export const VirtualScroll = ({
   list,
   onItemSelected,
-  width,
+  containerItemStyle,
   listStyle,
   centerItemStyle,
   itemStyle,
-}) => {
+}: VirtualScrollProps) => {
   const {
     state: { scrollList, scrollRef, centerIndex },
   } = useVirtualScroll({
@@ -18,7 +27,7 @@ export const VirtualScroll = ({
   });
 
   return (
-    <div ref={scrollRef} width={width} className="Container">
+    <div ref={scrollRef} style={containerItemStyle} className="Container">
       <div className="List">
         {scrollList.map((item, index) => (
           <div key={index} style={listStyle}>

src/lib/ScrollToTop/index.js src/components/ScrollToTop/index.tssrc/lib/ScrollToTop/index.js renamed to src/components/ScrollToTop/index.ts

@@ -0,0 +1,2 @@
+export { VirtualScroll } from "./components/VirtualScroll";
+export { ScrollToTop } from "./components/ScrollToTop";