th-80: Table Component (#101)

* th-80: * package.json added tanstack/react-table

* th-80: + pagination component

* th-80: + table component

* th-80: * hooks resolved conflict

* th-80: * types resolved conflict

* th-80: * pagination removed magical num

* th-80: * pagination refactored

* th-80: + useAppTable hook

* th-80: * pagination

* th-80: * pagination fixed imports

* th-80: * hooks resolved merge conflict

* th-80: * button removed background

* th-80: * components fixed conflict

Author: AlexVlaso

frontend/package.json

@@ -24,6 +24,7 @@
     "@googlemaps/react-wrapper": "1.1.35",
     "@hookform/resolvers": "2.9.11",
     "@reduxjs/toolkit": "1.9.3",
+    "@tanstack/react-table": "8.9.3",
     "clsx": "2.0.0",
     "modern-normalize": "2.0.0",
     "react": "18.2.0",

frontend/src/.stylelintrc.yml

@@ -27,6 +27,9 @@ rules:
     - ignorePseudoClasses:
         - global
         - export
+  # allow limit the depth of nesting
+  max-nesting-depth:
+    - 2
   media-query-no-invalid:
     - null
 

frontend/src/libs/components/badge/badge.tsx

@@ -1,9 +1,9 @@
 import { getValidClassNames } from '~/libs/helpers/helpers.js';
+import darkColors from '~/libs/palette/dark-colors.module.scss';
+import lightColors from '~/libs/palette/light-colors.module.scss';
+import { type DarkColor, type LightColor } from '~/libs/types/types.js';
 
-import darkColors from './dark-colors.module.scss';
-import lightColors from './light-colors.module.scss';
 import styles from './styles.module.scss';
-import { type DarkColor, type LightColor } from './types/color.type.js';
 
 type Color = DarkColor | LightColor;
 

frontend/src/libs/components/badge/types/color.type.ts

@@ -16,7 +16,7 @@ type Properties = {
   frontIcon?: ValueOf<typeof IconName>;
   backIcon?: ValueOf<typeof IconName>;
   children?: JSX.Element;
-  onClick?: () => void;
+  onClick?: (() => void) | ((event_: React.MouseEvent) => void);
 };
 
 const Button: React.FC<Properties> = ({

frontend/src/libs/components/badge/types/light-color.type.ts

@@ -7,6 +7,7 @@
   align-items: center;
   font-weight: $font-weight-extrabold;
   line-height: 1.25;
+  background-color: $red;
   border-radius: 4px;
 }
 
@@ -30,7 +31,6 @@
 
 .contained {
   color: $white;
-  background-color: $red;
 }
 
 .contained,
@@ -40,6 +40,7 @@
 
 .contained:hover,
 .contained:focus {
+  color: $white;
   background-color: $red-light;
 }
 

frontend/src/libs/components/button/button.tsx

@@ -13,11 +13,13 @@ export { Image } from './image/image.js';
 export { Input } from './input/input.js';
 export { Link } from './link/link.js';
 export { Modal } from './modal/modal.js';
+export { Pagination } from './pagination/pagination.js';
 export { ProtectedRoute } from './protected-route/protected-route.js';
 export { Radio } from './radio/radio.js';
 export { Router } from './router/router.jsx';
 export { RouterProvider } from './router-provider/router-provider.jsx';
 export { Spinner } from './spinner/spinner.js';
+export { Table } from './table/table.js';
 export { Toggle } from './toggle/toggle.js';
 export { Provider as StoreProvider } from 'react-redux';
 export { Outlet as RouterOutlet } from 'react-router-dom';

frontend/src/libs/components/button/styles.module.scss

@@ -1,13 +1,21 @@
-import Select, { type StylesConfig } from 'react-select';
+import Select, {
+  type GroupBase,
+  type SingleValue,
+  type StylesConfig,
+} from 'react-select';
 
 import { useCallback, useMemo, useState } from '~/libs/hooks/hooks.js';
 import { type SelectOption } from '~/libs/types/select-option.type.js';
 
 type Properties = {
   options: SelectOption[];
+  defaultValue?: SelectOption;
+  onChange?: (value: string | undefined) => void;
 };
 
-const getStyles = (isMenuOpen: boolean): StylesConfig => {
+const getStyles = (
+  isMenuOpen: boolean,
+): StylesConfig<SelectOption, false, GroupBase<SelectOption>> => {
   return {
     control: (styles) => ({
       ...styles,
@@ -47,6 +55,8 @@ const getStyles = (isMenuOpen: boolean): StylesConfig => {
 
 const Dropdown: React.FC<Properties> = ({
   options,
+  defaultValue,
+  onChange,
 }: Properties): JSX.Element => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
@@ -60,15 +70,26 @@ const Dropdown: React.FC<Properties> = ({
 
   const stylesConfig = useMemo(() => getStyles(isMenuOpen), [isMenuOpen]);
 
+  const handleChange = useCallback(
+    (option: SingleValue<SelectOption>) => {
+      if (onChange) {
+        onChange(option?.value);
+      }
+    },
+    [onChange],
+  );
+
   return (
-    <Select
+    <Select<SelectOption>
       options={options}
       classNamePrefix="react-select"
       styles={stylesConfig}
       isSearchable={false}
       menuIsOpen={isMenuOpen}
       onMenuOpen={handleOpenMenu}
       onMenuClose={handleCloseMenu}
+      onChange={handleChange}
+      defaultValue={defaultValue}
     />
   );
 };

frontend/src/libs/components/components.ts

@@ -0,0 +1,3 @@
+const DEFAULT_SIZE = 5;
+
+export { DEFAULT_SIZE };