Transition project to typescript

Questions.md

@@ -1,5 +1,10 @@
 # Questions
 
+
+---
+
+## --- OLD Questions below -> still need to be fixed ---
+
 ## Do I need to change my 'yourCoin' ids to support multiple users? How to structure data?
 
 Situation:

package.json

@@ -47,6 +47,11 @@
     ]
   },
   "devDependencies": {
-    "prettier": "2.5.1"
+    "@types/jest": "^27.4.1",
+    "@types/node": "^17.0.25",
+    "@types/react": "^18.0.6",
+    "@types/react-dom": "^18.0.2",
+    "prettier": "2.5.1",
+    "typescript": "^4.6.3"
   }
 }

src/components/Auth/SignUpForm.jsx

@@ -43,7 +43,7 @@ const SignUpForm = () => {
         autoComplete='current-password'
         placeholder='Password'
         required
-        minLength={6}
+        minlength={6}
         value={signUpPassword}
         onChange={(e) => setSignUpPassword(e.target.value)}
       />

src/components/Button/Button.css

@@ -1,85 +1,85 @@
 .Button {
-	padding: 5px;
-	border: 1px solid #2151f5;
-	padding: 11px 16px;
-	border-radius: 4px;
-	font-size: 15px;
-	font-weight: 600;
-	background-color: #2151f5;
-	color: white;
-	cursor: pointer;
+  padding: 5px;
+  border: 1px solid #2151f5;
+  padding: 11px 16px;
+  border-radius: 4px;
+  font-size: 15px;
+  font-weight: 600;
+  background-color: #2151f5;
+  color: white;
+  cursor: pointer;
 }
 
 .Button:hover {
-	background-color: #1d48d6;
+  background-color: #1d48d6;
+}
+
+.Button:disabled {
+  cursor: not-allowed;
 }
 
 .btn-secondary {
-	background-color: white;
-	color: black;
-	border: 1px solid #d8d8d8;
+  background-color: white;
+  color: black;
+  border: 1px solid #d8d8d8;
 }
 
 .btn-secondary:hover {
-	background-color: rgb(241, 241, 241);
+  background-color: rgb(241, 241, 241);
 }
 
 .btn-danger {
-	background-color: #cf202f;
-	color: white;
-	border: 1px solid #cf202f;
+  background-color: #cf202f;
+  color: white;
+  border: 1px solid #cf202f;
 }
 
 .btn-danger:hover {
-	background-color: rgb(233, 66, 66);
+  background-color: rgb(233, 66, 66);
 }
 
 .btn-xl {
-	padding: 22px;
-	width: 100%;
+  padding: 22px;
+  width: 100%;
 }
 
 .btn-xxl {
-	padding: 32px;
-	width: 100%;
+  padding: 32px;
+  width: 100%;
 }
 
 .btn-stretch {
-	width: 100%;
-}
-
-.btn-disabled {
-	cursor: not-allowed;
+  width: 100%;
 }
 
 .btn-light {
-	border: none;
-	background-color: white;
+  border: none;
+  background-color: white;
 }
 
 .btn-light.btn-primary {
-	color: #2151f5;
+  color: #2151f5;
 }
 
 .btn-light.btn-primary:hover {
-	color: #1d48d6;
-	background-color: white;
+  color: #1d48d6;
+  background-color: white;
 }
 
 .btn-light.btn-secondary {
-	color: black;
+  color: black;
 }
 
 .btn-light.btn-secondary:hover {
-	color: black;
-	background-color: white;
+  color: black;
+  background-color: white;
 }
 
 .btn-light.btn-danger {
-	color: #cf202f;
+  color: #cf202f;
 }
 
 .btn-light.btn-danger:hover {
-	color: #cf202f;
-	background-color: white;
+  color: #cf202f;
+  background-color: white;
 }

src/components/Button/Button.jsx → src/components/Button/Button.tsx

@@ -1,32 +1,39 @@
 import './Button.css';
 
+import { ComponentProps, FC } from 'react';
+
 import classNames from 'classnames';
 
-const Button = ({
+interface ButtonProps extends ComponentProps<'button'> {
+  children: string;
+  light?: boolean;
+  stretch?: boolean;
+  color?: 'primary' | 'secondary' | 'danger';
+  size?: 'md' | 'xl' | 'xxl';
+}
+
+const Button: FC<ButtonProps> = ({
   children,
-  color,
-  disabled,
   light,
-  size,
   stretch,
-  onClick,
-  type,
+  color,
+  size,
+  ...buttonProps
 }) => {
   const btnClasses = classNames({
     Button: true,
+    'btn-light': light,
+    'btn-stretch': stretch,
     'btn-primary': color === 'primary',
     'btn-secondary': color === 'secondary',
     'btn-danger': color === 'danger',
     'btn-md': size === 'md',
     'btn-xl': size === 'xl',
     'btn-xxl': size === 'xxl',
-    'btn-stretch': stretch,
-    'btn-disabled': disabled,
-    'btn-light': light,
   });
 
   return (
-    <button className={btnClasses} onClick={onClick} type={type}>
+    <button {...buttonProps} className={btnClasses}>
       {children}
     </button>
   );

src/components/Content/Content.tsx

@@ -0,0 +1,11 @@
+import './Content.css';
+
+import { FC, ReactNode } from 'react';
+
+interface ContentProps {
+  children: ReactNode;
+}
+
+const Content: FC<ContentProps> = ({ children }) => <div className='Content'>{children}</div>;
+
+export default Content;

src/components/Content/ContentCenter.tsx

@@ -0,0 +1,13 @@
+import './ContentCenter.css';
+
+import { FC, ReactNode } from 'react';
+
+interface ContentCenterProps {
+  children: ReactNode;
+}
+
+const ContentCenter: FC<ContentCenterProps> = ({ children }) => {
+  return <div className='ContentCenter'>{children}</div>;
+};
+
+export default ContentCenter;

src/components/Content/ContentRight.tsx

@@ -0,0 +1,13 @@
+import './ContentRight.css';
+
+import { FC, ReactNode } from 'react';
+
+interface ContentRightProps {
+  children: ReactNode;
+}
+
+const ContentRight: FC<ContentRightProps> = ({ children }) => {
+  return <div className='ContentRight'>{children}</div>;
+};
+
+export default ContentRight;