(https://twitter.com/malolan12)",
+ "license": "MIT",
+ "homepage": "https://github.com/uchihamalolan/vite-react-ts",
+ "scripts": {
+ "dev": "vite",
+ "build": "tsc && vite build",
+ "test": "jest",
+ "serve": "vite preview",
+ "prepare": "husky install",
+ "commit": "commit",
+ "format": "prettier --write --ignore-unknown .",
+ "lint": "eslint --cache ./src"
+ },
+ "dependencies": {
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-error-boundary": "^3.1.4",
+ "vite-plugin-svgr": "2.4.0"
+ },
+ "devDependencies": {
+ "@commitlint/cli": "^17.4.0",
+ "@commitlint/config-conventional": "^17.4.0",
+ "@commitlint/prompt-cli": "^17.4.0",
+ "@testing-library/dom": "^8.19.1",
+ "@testing-library/jest-dom": "^5.16.5",
+ "@testing-library/react": "^13.4.0",
+ "@testing-library/user-event": "^14.4.3",
+ "@types/jest": "^29.2.5",
+ "@types/node": "^18.11.18",
+ "@types/react": "^18.0.26",
+ "@types/react-dom": "^18.0.10",
+ "@typescript-eslint/eslint-plugin": "^5.48.0",
+ "@typescript-eslint/parser": "^5.48.0",
+ "@vitejs/plugin-react": "^3.0.1",
+ "autoprefixer": "^10.4.13",
+ "eslint": "^8.31.0",
+ "eslint-config-prettier": "^8.6.0",
+ "eslint-import-resolver-typescript": "^3.5.2",
+ "eslint-plugin-import": "^2.26.0",
+ "eslint-plugin-jest": "^27.2.1",
+ "eslint-plugin-jest-dom": "^4.0.3",
+ "eslint-plugin-jsx-a11y": "^6.6.1",
+ "eslint-plugin-react": "^7.31.11",
+ "eslint-plugin-react-hooks": "^4.6.0",
+ "eslint-plugin-testing-library": "^5.9.1",
+ "husky": "^8.0.3",
+ "jest": "29.3.1",
+ "jest-environment-jsdom": "^29.3.1",
+ "lint-staged": "^13.1.0",
+ "postcss": "^8.4.21",
+ "prettier": "2.8.2",
+ "react-test-renderer": "^18.2.0",
+ "tailwindcss": "^3.2.4",
+ "ts-jest": "29.0.3",
+ "typescript": "^4.9.4",
+ "vite": "^4.0.4",
+ "vite-tsconfig-paths": "^4.0.3"
+ }
+}
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..9f23996
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,7 @@
+// eslint-disable-next-line no-undef
+module.exports = {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+};
diff --git a/public/icons/favicon.svg b/public/icons/favicon.svg
new file mode 100644
index 0000000..de4aedd
--- /dev/null
+++ b/public/icons/favicon.svg
@@ -0,0 +1,15 @@
+
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..bb11147
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,15 @@
+import { Header } from 'components/Header';
+import { Button } from 'components/Button';
+import { ReactComponent as Logo } from 'assets/favicon.svg';
+
+function App() {
+ return (
+
+
+
+
+
+ );
+}
+
+export default App;
diff --git a/src/assets/favicon.svg b/src/assets/favicon.svg
new file mode 100644
index 0000000..de4aedd
--- /dev/null
+++ b/src/assets/favicon.svg
@@ -0,0 +1,15 @@
+
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
new file mode 100644
index 0000000..5df5e88
--- /dev/null
+++ b/src/components/Button.tsx
@@ -0,0 +1,12 @@
+interface ButtonProps {
+ onClick: () => void;
+ children: React.ReactNode;
+}
+
+export function Button({ onClick, children }: ButtonProps) {
+ return (
+
+ );
+}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 0000000..76ca468
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,3 @@
+export function Header({ title }: { title: string }) {
+ return {title}
;
+}
diff --git a/src/hooks/__tests__/use-counter.test.ts b/src/hooks/__tests__/use-counter.test.ts
new file mode 100644
index 0000000..3ea4e30
--- /dev/null
+++ b/src/hooks/__tests__/use-counter.test.ts
@@ -0,0 +1,8 @@
+import { renderHook } from '@testing-library/react';
+import useCounter from '../use-counter';
+
+test('should use counter', () => {
+ const { result } = renderHook(() => useCounter());
+ expect(result.current.count).toBe(0);
+ expect(typeof result.current.increment).toBe('function');
+});
diff --git a/src/hooks/use-counter.ts b/src/hooks/use-counter.ts
new file mode 100644
index 0000000..2b9d6be
--- /dev/null
+++ b/src/hooks/use-counter.ts
@@ -0,0 +1,7 @@
+import { useState, useCallback } from 'react';
+
+export default function useCounter() {
+ const [count, setCount] = useState(0);
+ const increment = useCallback(() => setCount((x) => x + 1), []);
+ return { count, increment };
+}
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..88ed046
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,13 @@
+@import './styles/reset.css';
+
+body {
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+ 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..5fcf901
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,17 @@
+import { createRoot } from 'react-dom/client';
+import { StrictMode } from 'react';
+
+import './index.css';
+import 'tailwindcss/tailwind.css';
+
+import App from './App';
+
+const container = document.getElementById('root');
+if (container) {
+ const root = createRoot(container);
+ root.render(
+
+
+
+ );
+}
diff --git a/src/styles/reset.css b/src/styles/reset.css
new file mode 100644
index 0000000..fcedf57
--- /dev/null
+++ b/src/styles/reset.css
@@ -0,0 +1,38 @@
+/*** The new CSS Reset - version 1.3.1 (last updated 28.10.2021) ***/
+
+/*
+ Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
+ - The "symbol *" part is to solve Firefox SVG sprite bug
+ */
+*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
+ all: unset;
+ display: revert;
+}
+
+/* Preferred box-sizing value */
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+/* Remove list styles (bullets/numbers) */
+ol,
+ul {
+ list-style: none;
+}
+
+/* For images to not be able to exceed their container */
+img {
+ max-width: 100%;
+}
+
+/* removes spacing between cells in tables */
+table {
+ border-collapse: collapse;
+}
+
+/* revert the 'white-space' property for textarea elements on Safari */
+textarea {
+ white-space: revert;
+}
diff --git a/src/utils/__tests__/sum.test.ts b/src/utils/__tests__/sum.test.ts
new file mode 100644
index 0000000..570a509
--- /dev/null
+++ b/src/utils/__tests__/sum.test.ts
@@ -0,0 +1,5 @@
+import { sum } from 'utils/sum';
+
+test('adds 1 + 2 to equal 3', () => {
+ expect(sum(1, 2)).toBe(3);
+});
diff --git a/src/utils/sum.ts b/src/utils/sum.ts
new file mode 100644
index 0000000..508f35f
--- /dev/null
+++ b/src/utils/sum.ts
@@ -0,0 +1,3 @@
+export function sum(a: number, b: number) {
+ return a + b;
+}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..429e250
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,8 @@
+// eslint-disable-next-line no-undef
+module.exports = {
+ content: ['./src/**/*.html', './src/**/*.{js,jsx,ts,tsx}'],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+};
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..5ee9f75
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,22 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "useDefineForClassFields": true,
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "allowJs": false,
+ "skipLibCheck": false,
+ "esModuleInterop": false,
+ "allowSyntheticDefaultImports": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "module": "ESNext",
+ "moduleResolution": "Node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "baseUrl": "src",
+ "types": ["vite-plugin-svgr/client", "jest"]
+ },
+ "include": ["./src"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..b30fcac
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tsconfigPaths from 'vite-tsconfig-paths';
+import svgrPlugin from 'vite-plugin-svgr';
+
+// https://vitejs.dev/config/
+// eslint-disable-next-line import/no-unused-modules
+export default defineConfig({
+ envDir: './env',
+ plugins: [react(), tsconfigPaths(), svgrPlugin()],
+ /* If proxy is needed
+ server: {
+ proxy: {
+ "/api": "localhost:8080"
+ }
+ },
+ */
+ build: {
+ sourcemap: true,
+ },
+});