diff --git a/README.md b/README.md index 523cf27..2c670e8 100644 --- a/README.md +++ b/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 diff --git a/package.json b/package.json index 5379dad..6e37ae0 100644 --- a/package.json +++ b/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" } } diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..33ad091 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/src/App.tsx b/src/App.tsx index a7c48cf..25029ee 100644 --- a/src/App.tsx +++ b/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 ( - <> +
- +