use: typescript

.eslintrc.json

@@ -1,3 +1,12 @@
 {
-  "extends": ["next/core-web-vitals", "prettier"]
+  "extends": ["next/core-web-vitals", "prettier"],
+  "no-restricted-imports": "off",
+  "@typescript-eslint/no-restricted-imports": [
+    "warn",
+    {
+      "name": "react-redux",
+      "importNames": ["useSelector", "useDispatch"],
+      "message": "Use typed hooks `useAppDispatch` and `useAppSelector` instead."
+    }
+  ]
 }

components/asideMenu.js → components/AsideMenu.tsx

@@ -1,5 +1,6 @@
-import AsideMenuLayer from './asideMenuLayer'
-import OverlayLayer from './overlayLayer'
+import React from 'react'
+import AsideMenuLayer from './AsideMenuLayer'
+import OverlayLayer from './OverlayLayer'
 
 export default function AsideMenu({
   menu,

components/asideMenuItem.js → components/AsideMenuItem.tsx

@@ -1,15 +1,22 @@
-import { useState } from 'react'
+
+import React, { useState } from 'react'
 import { mdiMinus, mdiPlus } from '@mdi/js'
-import BaseIcon from './baseIcon'
+import BaseIcon from './BaseIcon'
 import Link from 'next/link'
 import { getButtonColor } from '../src/colors'
-import { useSelector } from 'react-redux'
-import AsideMenuList from './asideMenuList'
+import AsideMenuList from './AsideMenuList'
+import { MenuAsideItem } from '../interfaces'
+import { useAppSelector } from '../src/stores/hooks'
+
+type Props = {
+  item: MenuAsideItem,
+  isDropdownList?: boolean
+}
 
-export default function AsideMenuItem({ item, isDropdownList = false }) {
+export default function AsideMenuItem({ item, isDropdownList = false }: Props) {
   const [isDropdownActive, setIsDropdownActive] = useState(false)
-  const asideMenuItemStyle = useSelector((state) => state.style.asideMenuItemStyle)
-  const asideMenuDropdownStyle = useSelector((state) => state.style.asideMenuDropdownStyle)
+  const asideMenuItemStyle = useAppSelector((state) => state.style.asideMenuItemStyle)
+  const asideMenuDropdownStyle = useAppSelector((state) => state.style.asideMenuDropdownStyle)
 
   const asideMenuItemInnerContents = (
     <>

components/asideMenuLayer.js → components/AsideMenuLayer.tsx

@@ -1,16 +1,23 @@
-import { useSelector } from 'react-redux'
+import React from 'react'
 import { mdiLogout, mdiClose } from '@mdi/js'
-import BaseIcon from './baseIcon'
-import AsideMenuItem from './asideMenuItem'
-import AsideMenuList from './asideMenuList'
+import BaseIcon from './BaseIcon'
+import AsideMenuItem from './AsideMenuItem'
+import AsideMenuList from './AsideMenuList'
+import { MenuAsideItem } from '../interfaces'
+import { useAppSelector } from '../src/stores/hooks'
 
-export default function AsideMenuLayer({ menu, className }) {
-  const asideStyle = useSelector((state) => state.style.asideStyle)
-  const asideBrandStyle = useSelector((state) => state.style.asideBrandStyle)
-  const asideScrollbarsStyle = useSelector((state) => state.style.asideScrollbarsStyle)
-  const darkMode = useSelector((state) => state.style.darkMode)
+type Props = {
+  menu: MenuAsideItem[],
+  className?: string
+}
+
+export default function AsideMenuLayer({ menu, className='' }: Props) {
+  const asideStyle = useAppSelector((state) => state.style.asideStyle)
+  const asideBrandStyle = useAppSelector((state) => state.style.asideBrandStyle)
+  const asideScrollbarsStyle = useAppSelector((state) => state.style.asideScrollbarsStyle)
+  const darkMode = useAppSelector((state) => state.style.darkMode)
 
-  const logoutItem = {
+  const logoutItem: MenuAsideItem = {
     label: 'Logout',
     icon: mdiLogout,
     color: 'info',

components/asideMenuList.js → components/AsideMenuList.tsx

@@ -1,6 +1,14 @@
-import AsideMenuItem from './asideMenuItem'
+import React from 'react'
+import { MenuAsideItem } from '../interfaces'
+import AsideMenuItem from './AsideMenuItem'
 
-export default function AsideMenuList({ menu, isDropdownList = false, className = '' }) {
+type Props = {
+  menu: MenuAsideItem[],
+  isDropdownList?: boolean,
+  className?: string
+}
+
+export default function AsideMenuList({ menu, isDropdownList = false, className = '' }: Props) {
   return (
     <ul className={className}>
       {menu.map((item, index) => (

components/baseButton.js → components/BaseButton.tsx

@@ -1,27 +1,44 @@
 import React from 'react'
 import Link from 'next/link'
 import { getButtonColor } from '../src/colors'
-import BaseIcon from './baseIcon'
+import BaseIcon from './BaseIcon'
+import { ColorButtonKey } from '../interfaces'
+
+type Props = {
+  label?: string,
+  icon?: string,
+  iconSize?: string|number,
+  href?: string,
+  target?: string,
+  type?: string,
+  color?: ColorButtonKey,
+  className?: string,
+  asAnchor?: boolean,
+  small?: boolean,
+  outline?: boolean,
+  active?: boolean,
+  disabled?: boolean,
+  roundedFull?: boolean
+}
 
 export default function BaseButton({
   label,
   icon,
   iconSize,
   href,
   target,
-  type = null,
-  color,
+  type,
+  color='white',
+  className='',
   asAnchor = false,
-  className,
   small = false,
   outline = false,
   active = false,
   disabled = false,
   roundedFull = false,
-}) {
+}: Props) {
   const componentClass = [
     'inline-flex',
-    'cursor-pointer',
     'justify-center',
     'items-center',
     'whitespace-nowrap',
@@ -30,6 +47,7 @@ export default function BaseButton({
     'focus:ring',
     'duration-150',
     'border',
+    disabled ? 'cursor-not-allowed' : 'cursor-pointer',
     roundedFull ? 'rounded-full' : 'rounded',
     getButtonColor(color, outline, !disabled, active),
     className,
@@ -44,7 +62,7 @@ export default function BaseButton({
   }
 
   if (disabled) {
-    componentClass.push('cursor-not-allowed', outline ? 'opacity-50' : 'opacity-70')
+    componentClass.push(outline ? 'opacity-50' : 'opacity-70')
   }
 
   const componentClassString = componentClass.join(' ')
@@ -56,10 +74,10 @@ export default function BaseButton({
     </>
   )
 
-  if (href) {
+  if (href && !disabled) {
     return (
-      <Link href={href} target={target} disabled={disabled} passHref>
-        <a className={componentClassString} disabled={disabled}>
+      <Link href={href} target={target} passHref>
+        <a className={componentClassString}>
           {componentChildren}
         </a>
       </Link>

components/BaseButtons.tsx

@@ -0,0 +1,19 @@
+import React, { ReactNode } from 'react'
+
+type Props = {
+  type?: string,
+  mb?: string,
+  noWrap: boolean,
+  children: ReactNode
+}
+
+export default function BaseButtons({
+  type = 'justify-start',
+  mb = '-mb-3',
+  noWrap = false,
+  children,
+}: Props) {
+  const parentClass = `flex items-center ${type} ${mb} ${noWrap ? 'flex-nowrap' : 'flex-wrap'}`
+
+  return <div className={parentClass}>{children}</div>
+}

components/baseDivider.js → components/BaseDivider.tsx

@@ -1,4 +1,10 @@
-export default function BaseDivider({ navBar = false }) {
+import React from "react"
+
+type Props = {
+  navBar?: boolean
+}
+
+export default function BaseDivider({ navBar = false }: Props) {
   const classAddon = navBar
     ? 'hidden lg:block lg:my-0.5 dark:border-slate-700'
     : 'my-6 -mx-6 dark:border-slate-800'

components/baseIcon.js → components/BaseIcon.tsx

@@ -1,4 +1,14 @@
-export default function BaseIcon({ path, w = 'w-6', h = 'h-6', size, className }) {
+import React from "react"
+
+type Props = {
+  path: string,
+  w?: string,
+  h?: string,
+  size?: string|number|null,
+  className?: string
+}
+
+export default function BaseIcon({ path, w = 'w-6', h = 'h-6', size=null, className='' }: Props) {
   const iconSize = size ?? 16
 
   return (

components/baseLevel.js → components/BaseLevel.tsx

@@ -1,4 +1,12 @@
-export default function BaseLevel({ mobile = false, type = 'justify-between', children }) {
+import React, { ReactNode } from "react"
+
+type Props = {
+  mobile?: boolean,
+  type?: string,
+  children?: ReactNode
+}
+
+export default function BaseLevel({ mobile = false, type = 'justify-between', children }: Props) {
   const parentClass = `${type} items-center`
 
   const parentMobileClass = 'flex'

components/cardBox.js → components/CardBox.tsx

@@ -1,19 +1,32 @@
-import React from 'react'
-import CardBoxComponentBody from './cardBoxComponentBody'
-import CardBoxComponentFooter from './cardBoxComponentFooter'
+import React, { ReactNode } from 'react'
+import CardBoxComponentBody from './CardBoxComponentBody'
+import CardBoxComponentFooter from './CardBoxComponentFooter'
+
+type Props = {
+  rounded?: string,
+  flex?: string,
+  className?: string,
+  hasComponentLayout?: boolean,
+  hasTable?: boolean,
+  isForm?: boolean,
+  isHoverable?: boolean,
+  isModal?: boolean,
+  children: ReactNode,
+  footer?: ReactNode
+}
 
 export default function CardBox({
   rounded = 'rounded-2xl',
   flex = 'flex-col',
   className = '',
-  hasComponentLayout,
-  hasTable,
-  isForm,
-  isHoverable,
-  isModal,
+  hasComponentLayout=false,
+  hasTable=false,
+  isForm=false,
+  isHoverable=false,
+  isModal=false,
   children,
   footer,
-}) {
+}: Props) {
   const componentClass = [
     'bg-white flex',
     className,

components/CardBoxComponentBody.tsx

@@ -0,0 +1,10 @@
+import React, { ReactNode } from "react"
+
+type Props = {
+  noPadding?: boolean,
+  children?: ReactNode
+}
+
+export default function CardBoxComponentBody({ noPadding=false, children }: Props) {
+  return <div className={`flex-1 ${noPadding ? '' : 'p-6'}`}>{children}</div>
+}

components/CardBoxComponentFooter.tsx

@@ -0,0 +1,9 @@
+import React, { ReactNode } from "react"
+
+type Props = {
+  children?: ReactNode
+}
+
+export default function CardBoxComponentFooter({ children }: Props) {
+  return <footer className="p-6">{children}</footer>
+}

components/footerBar.js → components/FooterBar.tsx

@@ -1,8 +1,13 @@
+import React, { ReactNode } from 'react'
 import { containerMaxW } from '../src/config'
-import BaseLevel from './baseLevel'
-import JustboilLogo from './justboil/logo'
+import BaseLevel from './BaseLevel'
+import JustboilLogo from './justboil/Logo'
 
-export default function FooterBar({ children }) {
+type Props = {
+  children: ReactNode
+}
+
+export default function FooterBar({ children }: Props) {
   const year = new Date().getFullYear()
 
   return (

components/iconRounded.js → components/IconRounded.tsx

@@ -1,5 +1,16 @@
+import React from 'react'
+import { ColorKey } from '../interfaces'
 import { colorsBgLight, colorsText } from '../src/colors'
-import BaseIcon from './baseIcon'
+import BaseIcon from './BaseIcon'
+
+type Props = {
+  icon: string,
+  color: ColorKey,
+  w?: string,
+  h?: string,
+  bg?: boolean,
+  className?: string
+}
 
 export default function IconRounded({
   icon,
@@ -8,7 +19,7 @@ export default function IconRounded({
   h = 'h-12',
   bg = false,
   className = '',
-}) {
+}: Props) {
   const classAddon = bg ? colorsBgLight[color] : `${colorsText[color]} bg-gray-50 dark:bg-slate-800`
 
   return (

components/navBar.js → components/NavBar.tsx

@@ -1,14 +1,22 @@
-import { useState } from 'react'
+import React, { ReactNode, useState } from 'react'
 import { mdiClose, mdiDotsVertical } from '@mdi/js'
 import { containerMaxW } from '../src/config'
-import BaseIcon from './baseIcon'
-import NavBarItemPlain from './navBarItemPlain'
-import NavBarMenuList from './navBarMenuList'
+import BaseIcon from './BaseIcon'
+import NavBarItemPlain from './NavBarItemPlain'
+import NavBarMenuList from './NavBarMenuList'
+import { MenuNavBarItem } from '../interfaces'
 
-export default function NavBar({ menu, handleMenuClick, className, children }) {
+type Props = {
+  menu: MenuNavBarItem[],
+  handleMenuClick: Function,
+  className: string,
+  children: ReactNode
+}
+
+export default function NavBar({ menu, handleMenuClick, className='', children }: Props) {
   const [isMenuNavBarActive, setIsMenuNavBarActive] = useState(false)
 
-  const handleMenuNavBarToggleClick = (e) => {
+  const handleMenuNavBarToggleClick = (e: MouseEvent) => {
     e.preventDefault()
 
     setIsMenuNavBarActive(!isMenuNavBarActive)