Feature/tailwind react location

README.md

@@ -7,7 +7,29 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 `git clone https://github.com/nejcrogelsek/react-project-template.git`
 2. Delete .git file inside cloned project.
 3. Run: `yarn run start:clean`
-4. Run: `yarn run husky:postinstall` to install husky git hook (automatically formats the code when pushing code to github)
+4. Initialize git & run: `yarn run husky:postinstall` to install husky git hook (automatically formats the code when pushing code to github)
+
+**With react-location instead of react-router-dom:**
+1. Clone project by running:
+`git clone https://github.com/nejcrogelsek/react-project-template.git`
+2. Fetch the react-location branch:
+`git fetch origin feature/react-location`
+3. Checkout into react-location branch:
+`git checkout feature/react-location`
+4. Delete .git file inside project.
+5. Run: `yarn run start:clean`
+6. Initialize git & run: `yarn run husky:postinstall` to install husky git hook (automatically formats the code when pushing code to github)
+
+**With tailwindCSS & react-location:**
+1. Clone project by running:
+`git clone https://github.com/nejcrogelsek/react-project-template.git`
+2. Fetch the tailwind react-location branch:
+`git fetch origin feature/tailwind-react-location`
+3. Checkout into react-location branch:
+`git checkout feature/tailwind-react-location`
+4. Delete .git file inside project.
+5. Run: `yarn run start:clean`
+6. Initialize git & run: `yarn run husky:postinstall` to install husky git hook (automatically formats the code when pushing code to github)
 
 ## Available Scripts
 

package.json

@@ -10,7 +10,6 @@
     "eject": "react-scripts eject",
     "start:clean": "rm -rf node_modules/ && rm -rf yarn.lock && rm -rf yarn-error.log && yarn && yarn start",
     "generate:icons": "node scripts/generate-icons.js",
-    "generate:images": "node scripts/generate-images.js",
     "generate:component": "npx generate-react-cli component",
     "generate:page": "npx generate-react-cli component --type=page",
     "update:check": "yarn outdated",
@@ -19,12 +18,13 @@
     "code:check": "prettier --check \"src/**/*.{ts,tsx,js,css,scss,html}\"",
     "code:format": "prettier --write \"src/**/*.{ts,tsx,js,css,scss,html}\"",
     "code:format:specific-file": "prettier --write",
-		"lint": "eslint .",
-		"lint:fix": "eslint --fix ."
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix ."
   },
   "dependencies": {
     "@hookform/resolvers": "^2.8.8",
-    "@material-ui/core": "^4.12.4",
+    "@tanstack/react-location": "^3.7.4",
+    "@tanstack/react-location-devtools": "^3.4.4",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^8.0.0",
@@ -42,26 +42,26 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-hook-form": "^7.29.0",
-    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.0",
-    "styled-components": "^5.3.5",
     "typescript": "^4.6.3",
     "web-vitals": "^2.1.0",
     "yup": "^0.32.11"
   },
   "devDependencies": {
+    "@tailwindcss/forms": "^0.5.2",
     "@types/classnames": "^2.3.1",
-    "@types/react-router-dom": "^5.3.3",
-    "@types/styled-components": "^5.1.25",
     "@types/yup": "^0.29.13",
     "@typescript-eslint/eslint-plugin": "^5.18.0",
     "@typescript-eslint/parser": "^5.18.0",
+    "autoprefixer": "^10.4.7",
     "eslint": "^8.13.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.29.4",
     "husky": "^7.0.4",
-    "prettier": "^2.6.2"
+    "postcss": "^8.4.14",
+    "prettier": "^2.6.2",
+    "tailwindcss": "^3.1.2"
   },
   "eslintConfig": {
     "extends": [
@@ -80,8 +80,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "resolutions": {
-    "styled-components": "^5"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.tsx

@@ -1,17 +1,20 @@
 import { FC } from 'react'
+import { Router, Outlet } from '@tanstack/react-location'
+import { ReactLocationDevtools } from '@tanstack/react-location-devtools'
 
 //Partials
 import Header from './components/partials/Header/Header'
 import Footer from './components/partials/Footer/Footer'
-import Routes from './routes/Routes'
+import { routes, location } from './routes/Routes'
 
 const App: FC = () => {
   return (
-    <>
+    <Router routes={routes} location={location}>
       <Header />
-      <Routes />
+      <Outlet />
       <Footer />
-    </>
+      <ReactLocationDevtools />
+    </Router>
   )
 }
 

src/components/ConfirmationModal/ConfirmationModal.tsx

@@ -20,7 +20,7 @@ const ConfirmationModal: FC<Props> = ({ confirmationData }: Props) => {
 
   useEffect(() => {
     cancel()
-  }, [router.location.pathname])
+  }, [router.location.current.pathname])
 
   const confirm = () => {
     if (confirmationData.onConfirm) {

src/components/partials/Header/Header.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { Link } from 'react-router-dom'
+import { Link } from '@tanstack/react-location'
 
 const Header: FC = () => {
   return (

src/components/shared/Button/Button.tsx

@@ -1,16 +1,13 @@
 import { ButtonHTMLAttributes, FC } from 'react'
-import styled from 'styled-components'
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {}
 
-export const ButtonStyle = styled.button<Props>``
-
 const Button: FC<Props> = ({ children, onClick, type, ...rest }: Props) => {
   return (
     // eslint-disable-next-line react/jsx-props-no-spreading
-    <ButtonStyle type={type} onClick={onClick} {...rest}>
+    <button type={type} onClick={onClick} {...rest}>
       {children}
-    </ButtonStyle>
+    </button>
   )
 }
 

src/components/shared/Input/Input.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import { FC, HTMLInputTypeAttribute, InputHTMLAttributes } from 'react'
-import styled from 'styled-components'
 import { UseFormRegister } from 'react-hook-form'
 
 interface Props extends InputHTMLAttributes<HTMLInputElement> {
@@ -9,13 +8,11 @@ interface Props extends InputHTMLAttributes<HTMLInputElement> {
   register?: UseFormRegister<any>
 }
 
-export const InputStyle = styled.input<Props>``
-
 const Input: FC<Props> = ({ register, id, ...rest }: Props) => {
   if (register) {
     return <input {...register(id)} id={id} {...rest} />
   }
-  return <InputStyle id={id} {...rest} />
+  return <input id={id} {...rest} />
 }
 
 export default Input

src/components/shared/Modal/Modal.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import { Dispatch, FC, HTMLAttributes, ReactNode, SetStateAction } from 'react'
-import styled from 'styled-components'
 
 interface Props extends HTMLAttributes<HTMLDivElement> {
   isOpen: boolean
@@ -11,26 +10,12 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
   close?: boolean
 }
 
-interface ModalStyleProps extends HTMLAttributes<HTMLDivElement> {
-  isOpen: boolean
-  toggle: Dispatch<SetStateAction<boolean>>
-}
-
-export const ModalStyle = styled.div<ModalStyleProps>`
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: white;
-  padding: 1rem;
-`
-
 const Modal: FC<Props> = ({ title, isOpen, toggle, children, ...rest }: Props) => {
   return (
-    <ModalStyle isOpen={isOpen} toggle={toggle} {...rest}>
+    <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white p-4" {...rest}>
       {title && <h3>{title}</h3>}
       {children}
-    </ModalStyle>
+    </div>
   )
 }
 

src/components/shared/Select/Select.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import { FC, ReactNode, SelectHTMLAttributes } from 'react'
-import styled from 'styled-components'
 import { UseFormRegister } from 'react-hook-form'
 
 interface Props extends SelectHTMLAttributes<HTMLSelectElement> {
@@ -9,26 +8,20 @@ interface Props extends SelectHTMLAttributes<HTMLSelectElement> {
   children: ReactNode | ReactNode[]
 }
 
-export const SelectStyle = styled.select<Props>`
-  height: 38px;
-  padding-left: 5px;
-  margin-bottom: 0.5rem;
-`
-
 const Select: FC<Props> = ({ register, id, children, ...rest }: Props) => {
   if (register) {
     return (
-      <SelectStyle {...register(id)} id={id} {...rest}>
+      <select {...register(id)} id={id} {...rest}>
         <option></option>
         {children}
-      </SelectStyle>
+      </select>
     )
   }
   return (
-    <SelectStyle id={id} {...rest}>
+    <select id={id} {...rest}>
       <option></option>
       {children}
-    </SelectStyle>
+    </select>
   )
 }
 

src/components/shared/Textarea/Textarea.tsx

@@ -1,21 +1,18 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import { FC, TextareaHTMLAttributes } from 'react'
-import styled from 'styled-components'
 import { UseFormRegister } from 'react-hook-form'
 
 interface Props extends TextareaHTMLAttributes<HTMLTextAreaElement> {
   id: string
   register?: UseFormRegister<any>
 }
 
-export const TextareaStyle = styled.textarea<Props>``
-
 const Textarea: FC<Props> = ({ register, id, ...rest }: Props) => {
   if (register) {
-    return <TextareaStyle {...register(id)} id={id} {...rest} />
+    return <textarea {...register(id)} id={id} {...rest} />
   }
 
-  return <TextareaStyle id={id} {...rest} />
+  return <textarea id={id} {...rest} />
 }
 
 export default Textarea

src/components/user/LoginForm/LoginForm.tsx

@@ -2,7 +2,6 @@ import { FC } from 'react'
 import * as API from 'api/Api'
 import { useLoginForm } from 'lib/hooks/react-hook-form/useLoginForm'
 
-import { Form, FormGroup, Label, FormFeedback } from 'styles/shared'
 import Button from 'components/shared/Button/Button'
 import Input from 'components/shared/Input/Input'
 
@@ -26,21 +25,21 @@ const LoginForm: FC = () => {
 
   return (
     <div className="login-form">
-      <Form name="form" onSubmit={onSubmit}>
-        <FormGroup>
-          <Label htmlFor="email">Email</Label>
+      <form className="form" name="form" onSubmit={onSubmit}>
+        <div className="form-group">
+          <label htmlFor="email">Email</label>
           <Input type="email" id="email" placeholder="email" register={register} />
-          {errors.email && <FormFeedback>{errors.email.message}</FormFeedback>}
-        </FormGroup>
-        <FormGroup>
-          <Label htmlFor="password">Password</Label>
+          {errors.email && <div className="error-message">{errors.email.message}</div>}
+        </div>
+        <div className="form-group">
+          <label htmlFor="password">Password</label>
           <Input type="password" id="password" placeholder="password" register={register} />
-          {errors.password && <FormFeedback>{errors.password.message}</FormFeedback>}
-        </FormGroup>
+          {errors.password && <div className="error-message">{errors.password.message}</div>}
+        </div>
         <Button className="btn-secondary" type="submit">
           Login
         </Button>
-      </Form>
+      </form>
     </div>
   )
 }