TMPLT-12: typescript refinement

base/template.json

@@ -9,7 +9,6 @@
       "react": "^17.0.2",
       "react-dom": "^17.0.2",
       "react-scripts": "4.0.3",
-      "typescript": "^4.5.2",
       "web-vitals": "^1.1.2"
     }
   }

typescript/template/src/app/providers/with-router.tsx

@@ -0,0 +1,11 @@
+import React, { Suspense } from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import { Loader } from 'shared/ui/loader';
+
+export const withRouter = <T extends {}> (Component: React.ComponentType<T>) => (props: T) => (
+  <BrowserRouter>
+    <Suspense fallback={<Loader/>}>
+      <Component {...props}/>
+    </Suspense>
+  </BrowserRouter>
+);

typescript/template/src/pages/counter/ui.tsx

@@ -1,21 +1,19 @@
-import { useState } from 'react';
+import React from 'react';
 import { Button } from 'shared/ui/button';
-import styles from './ui.module.css';
+import { useCounter } from './model';
+import styles from './styles.module.css';
 
-export const CounterPage = () => {
-  const [counter, setCounter] = useState(0);
+export const CounterPage: React.FC = () => {
+  const { counter, increment, decrement } = useCounter(0);
 
   return (
     <div>
       <h1>Counter {counter}</h1>
 
-      <Button
-        className={styles.incrementButton}
-        onClick={() => setCounter((prev) => prev + 1)}
-      >
+      <Button className={styles.incrementButton} onClick={increment}>
         increment
       </Button>
-      <Button onClick={() => setCounter((prev) => prev - 1)}>decrement</Button>
+      <Button onClick={decrement}>decrement</Button>
     </div>
   );
 };

typescript/template/src/pages/router/public-routes.tsx

@@ -1,9 +1,5 @@
-import { FC } from 'react';
+import React from 'react';
 import { useRoutes } from 'react-router-dom';
 import { publicRoutes } from './routes';
 
-export const PublicRoutes: FC = () => {
-  const routes = useRoutes(publicRoutes);
-
-  return routes;
-};
+export const PublicRoutes: React.FC = () => useRoutes(publicRoutes)

typescript/template/src/shared/lib/fp/compose.ts

@@ -0,0 +1,44 @@
+type Func<T extends any[], R> = (...a: T) => R
+
+export default function compose(): <R>(a: R) => R
+export default function compose<F extends Function>(f: F): F
+export default function compose<A, T extends any[], R>(
+    f1: (a: A) => R,
+    f2: Func<T, A>
+): Func<T, R>
+
+export default function compose<A, B, T extends any[], R>(
+    f1: (b: B) => R,
+    f2: (a: A) => B,
+    f3: Func<T, A>
+): Func<T, R>
+
+export default function compose<A, B, C, T extends any[], R>(
+    f1: (c: C) => R,
+    f2: (b: B) => C,
+    f3: (a: A) => B,
+    f4: Func<T, A>
+): Func<T, R>
+
+export default function compose<R>(
+    f1: (a: any) => R,
+    ...funcs: Function[]
+): (...args: any[]) => R
+
+export default function compose<R>(...funcs: Function[]): (...args: any[]) => R
+
+export default function compose(...funcs: Function[]) {
+  if (funcs.length === 0) {
+    return <T>(arg: T) => arg
+  }
+
+  if (funcs.length === 1) {
+    return funcs[0]
+  }
+
+  return funcs.reduce(
+      (a, b) =>
+          (...args: any) =>
+              a(b(...args))
+  )
+}

typescript/template/src/shared/lib/fp/index.ts

@@ -0,0 +1 @@
+export { default as compose }  from './compose';

typescript/template/src/shared/ui/button/button.tsx

@@ -1,19 +1,17 @@
-import { FC, MouseEventHandler } from 'react';
+import React from 'react';
 import styles from './button.module.css';
 
 interface Props {
   className?: string;
-  onClick?: MouseEventHandler<HTMLButtonElement>;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
 
-export const Button: FC<Props> = ({ className, children, onClick }) => {
-  return (
-    <button
-      onClick={onClick}
-      className={`${styles.button} ${className ? className : ''}`}
-      // instead of this className defining you can use clsx/classnames or any other lib
-    >
-      {children}
-    </button>
-  );
-};
+export const Button: React.FC<Props> = ({ className, children, onClick }) => (
+  <button
+    onClick={onClick}
+    className={`${styles.button} ${className ? className : ''}`}
+    // instead of this className defining you can use clsx/classnames or any other lib
+  >
+    {children}
+  </button>
+);

typescript/template/src/shared/ui/loader/index.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const Loader: React.FC = () => (
+  <div>loading...</div>
+);