@getsoren/create-boilerplate-vite-react-ts 2.7.1

package/.eslintignore

@@ -0,0 +1,2 @@
+dist
+node_modules

package/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@getsoren/eslint-config-react-soren",
+  "rules": {
+    "import/no-extraneous-dependencies": "off"
+  }
+}

package/.github/pull_request_template.md

@@ -0,0 +1,2 @@
+- [ ] Add your new version inside [package.json](package.json)
+- [ ] Change version & describe your change inside [CHANGELOG.md](CHANGELOG.md)

package/.github/workflows/release.yml

@@ -0,0 +1,66 @@
+name: 🚀 Release
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+  id-token: write
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: 🛎️ Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: 🐰 Setup Bun
+        uses: oven-sh/setup-bun@v1
+
+      - name: 📦 Install dependencies
+        run: bun install
+
+      - name: 🧑 Configure Git identity
+        run: |
+          git config --local user.name "github-actions[bot]"
+          git config --local user.email "github-actions[bot]@users.noreply.github.com"
+
+      - name: 🏷️ Bump version & generate changelog
+        id: bump
+        run: |
+          PREV_VERSION=$(jq -r .version package.json)
+          bun run release
+          NEW_VERSION=$(jq -r .version package.json)
+          echo "prev_version=$PREV_VERSION" >> $GITHUB_OUTPUT
+          echo "new_version=$NEW_VERSION" >> $GITHUB_OUTPUT
+
+      - name: 🚀 Push changes and tags
+        if: steps.bump.outputs.prev_version != steps.bump.outputs.new_version
+        run: |
+          git push origin HEAD:${{ github.ref }}
+          git push --tags
+
+      - name: 🏗️ Build
+        if: steps.bump.outputs.prev_version != steps.bump.outputs.new_version
+        run: bun run build
+
+      - name: 📝 Create GitHub Release
+        if: steps.bump.outputs.prev_version != steps.bump.outputs.new_version
+        run: gh release create "${{ steps.bump.outputs.new_version }}" -F CHANGELOG.md
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: 🔐 Setup npm auth
+        if: steps.bump.outputs.prev_version != steps.bump.outputs.new_version
+        run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_AUTH_TOKEN }}" > ~/.npmrc
+
+      - name: 📤 Publish to npm
+        if: steps.bump.outputs.prev_version != steps.bump.outputs.new_version
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
+        run: npm publish --access public

package/.husky/pre-commit

@@ -0,0 +1,8 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+echo "\033[32m Running linters... \033[0m";
+yarn lint
+
+echo "\033[32m Running test... \033[0m";
+yarn test --watch=false

package/CHANGELOG.md

@@ -0,0 +1,6 @@
+# [Versions](https://github.com/Tracktor/eslint-config-react-tracktor/releases)
+
+
+## v2.7.1
+- **[fix]** : fix install dependency command
+- **[fix]** : remove lock file after install dependency command

package/README.md

@@ -0,0 +1,97 @@
+# @getsoren/create-boilerplate-vite-react-ts
+
+> Create quickly a skeleton of `Vite React TypeScript`
+application with amazing configuration.
+
+- [Quick Start](#Quick-Start)
+- [Optional params](#Optional-params)
+- [Files structure](#Files-structure)
+
+## Quick Start
+
+**bun:**
+```bash
+bun create @getsoren/boilerplate-vite-react-ts YOUR_APP_NAME
+```
+
+**npm:**
+```bash
+npm create @getsoren/boilerplate-vite-react-ts YOUR_APP_NAME
+```
+**yarn**:
+```bash
+yarn create @getsoren/boilerplate-vite-react-ts YOUR_APP_NAME
+```
+**pnpm**:
+```bash
+pnpm create @getsoren/boilerplate-vite-react-ts YOUR_APP_NAME
+```
+
+> Note: `npm create @scope/foo` is equivalent to `npm init @scope/foo`, which resolves to the package `@scope/create-foo`.
+
+## Optional params
+
+You can add some params to install and configure automatically
+some popular libraries.
+
+| Name           | Description                  | Documentation                                   |
+|----------------|------------------------------|-------------------------------------------------|
+| `axios`        | Install axios library        | [axios](https://axios-http.com/fr/docs/intro)   |
+| `i18next`      | Install i18next library      | [i18next](https://www.i18next.com)              |
+| `react-query`  | Install react query library  | [react-query](https://react-query.tanstack.com) |
+| `react-router` | Install react router library | [react-router](https://reactrouter.com)         |
+<br>
+example:
+
+```console
+npm create @getsoren/boilerplate-vite-react-ts YOUR_APP_NAME --axios --i18next
+```
+
+## Files structure
+
+```
+├── .husky
+    pre-commit
+├── public
+    favicon.ico
+└── src
+    └── assets
+    └── components
+        └── DataDisplay
+        └── Feedback
+        └── Inputs
+        └── Layout
+        └── Navigation
+        └── Surfaces
+        └── Utils
+            Router.tsx (optional if react-router is installed)
+    └── constants
+        routes.ts (optional if react-router is installed)
+    └── context
+    └── features
+    └── hooks
+    └── locales
+    └── pages
+        Contact.tsx (optional if react-router is installed)
+        Home.tsx (optional if react-router is installed)
+    └── services
+    └── stores
+    └── types
+        i18next.d.ts (optional if i18next is installed)
+        vite-env.d.ts
+    └── utils
+    App.test.tsx
+    App.tsx
+    test.config.ts
+.eslintignore
+.eslintrc.json
+.gitignore
+index.html
+index.tsx
+package.json
+README.md
+tsconfig.json
+tsconfig.node.json
+vite.config.ts
+[yarn.lock|pnpm-lock.yaml|package-lock.json|bun.lockb]
+```

package/bin/create-app.cjs

@@ -0,0 +1,269 @@
+#!/usr/bin/env node
+const yargs = require("yargs")
+const {join} = require("path");
+const {execSync} = require("child_process");
+const {mkdirSync, rmSync, openSync, writeFileSync, close, writeSync, appendFileSync} = require("fs");
+const packageJson = require("../package.json");
+const eslintrcJson = require("../.eslintrc.json");
+
+const ENCODED_FILE = "utf8";
+
+const PROJECT_NAME = process.argv[2];
+const CURRENT_PATH = process.cwd();
+const PROJECT_PATH = join(CURRENT_PATH, PROJECT_NAME);
+const REPOSITORY_URL = packageJson.repository.url;
+const PACKAGE_INFO = pkgFromUserAgent(process.env.npm_config_user_agent);
+
+const PACKAGE_MANAGER = PACKAGE_INFO ? PACKAGE_INFO : "npm";
+
+// Optional parameters
+const AXIOS_PARAM = "axios";
+const I18NEXT_PARAM = "i18next";
+const REACT_QUERY_PARAM = "react-query";
+const REACT_ROUTER_PARAM = "react-router";
+
+if (process.argv.length < 3) {
+  console.log("\x1b[31m", "You have to provide name to your app.");
+  console.log("For example: ");
+  console.log(PACKAGE_MANAGER + " create boilerplate-vite-react-ts YOUR_APP_NAME", "\x1b[0m");
+  process.exit(1);
+}
+
+try {
+  mkdirSync(PROJECT_PATH);
+} catch (error) {
+  if (error?.code === "EEXIST") {
+    console.log(`The file ${PROJECT_NAME} already exist in the current directory, please give it another name.`);
+  } else {
+    console.log(error);
+  }
+  process.exit(1);
+}
+
+function pkgFromUserAgent(userAgent) {
+  if (!userAgent) return undefined;
+  const pkgSpec = userAgent.split(' ')[0];
+  return  pkgSpec.split('/')[0];
+}
+
+const buildPackageJson = ({packageJson, argv}) => {
+  // Filters package.json
+  const {
+    bin,
+    keywords,
+    homepage,
+    repository,
+    bugs,
+    version,
+    description,
+    ...packageJsonFilter
+  } = packageJson;
+
+  // Filters dependencies
+  const {
+    yargs,
+    [!argv?.[AXIOS_PARAM] && "axios"]: axiosRemoved,
+    [!argv?.[I18NEXT_PARAM] && "i18next"]: i18nextRemoved,
+    [!argv?.[I18NEXT_PARAM] && "react-i18next"]: reactI18nextRemoved,
+    [!argv?.[I18NEXT_PARAM] && "i18next-browser-languagedetector"]: i18nextBrowserLanguageDetectorRemoved,
+    [!argv?.[REACT_QUERY_PARAM] && "@tanstack/react-query"]: reactQueryRemoved,
+    ...dependenciesFilter
+  } = packageJson.dependencies;
+
+  // Filters scripts
+  const {
+    create,
+    ...scriptFilter
+  } = packageJson.scripts
+
+  const newPackage = {
+    ...packageJsonFilter,
+    name: argv._[0],
+    license: "UNLICENSED",
+    dependencies: {
+      ...dependenciesFilter,
+    },
+    scripts: {
+      ...scriptFilter,
+    }
+  };
+
+  writeFileSync(`${process.cwd()}/package.json`, JSON.stringify(newPackage, null, 2), ENCODED_FILE);
+};
+
+const buildEslintJson = (eslintrcJson) => {
+  const {rules, ...eslintrcJsonFilter} = eslintrcJson
+
+  writeFileSync(`${process.cwd()}/.eslintrc.json`, JSON.stringify(eslintrcJsonFilter, null, 2), ENCODED_FILE);
+};
+
+const buildSetupTest = () => {
+
+  if (yargs.argv?.[I18NEXT_PARAM]) {
+    const data = `\n` +
+      `// Mock translation` + `\n` +
+      `vi.mock("react-i18next", async () => {` + `\n` +
+      `  const actual: any = await vi.importActual("react-i18next");` + `\n` +
+      `  return {` + `\n` +
+      `    ...actual,` + `\n` +
+      `    useTranslation: () => ({` + `\n` +
+      `      i18n: {` + `\n` +
+      `        changeLanguage: () => new Promise(() => {}),` + `\n` +
+      `      },` + `\n` +
+      `      t: (str: string) => str,` + `\n` +
+      `    }),` + `\n` +
+      `  };` + `\n` +
+      `});`;
+
+    appendFileSync("src/test.config.ts", data);
+  }
+};
+
+
+const removeUselessFiles = () => {
+  execSync("npx rimraf ./.git");
+  rmSync(join(PROJECT_PATH, ".github"), {recursive: true});
+  rmSync(join(PROJECT_PATH, ".circleci"), {recursive: true});
+  rmSync(join(PROJECT_PATH, "bin"), {recursive: true});
+  rmSync(join(PROJECT_PATH, "CHANGELOG.md"), {recursive: true});
+  rmSync(join(PROJECT_PATH, "src/types/dependencies.d.ts"), {recursive: true});
+
+
+  // Remove i18next files
+  if (!yargs.argv?.[I18NEXT_PARAM]) {
+    rmSync(join(PROJECT_PATH, "src/locales/en.ts"), {recursive: true});
+    rmSync(join(PROJECT_PATH, "src/locales/fr.ts"), {recursive: true});
+    rmSync(join(PROJECT_PATH, "src/types/i18next.d.ts"), {recursive: true});
+  }
+
+  // Remove react router dom files
+  if (!yargs.argv?.[REACT_ROUTER_PARAM]) {
+    rmSync(join(PROJECT_PATH, "src/components/Utils/Router.tsx"), {recursive: true});
+    rmSync(join(PROJECT_PATH, "src/constants/routes.ts"), {recursive: true});
+    rmSync(join(PROJECT_PATH, "src/pages/Contact.tsx"), {recursive: true});
+    rmSync(join(PROJECT_PATH, "src/pages/Home.tsx"), {recursive: true});
+  }
+};
+
+const getAppData = () => {
+  let data = [];
+  const children = yargs.argv?.[REACT_ROUTER_PARAM] ? "<Router />" : `<h1>${packageJson.name}</h1>`;
+
+  if (yargs.argv?.[REACT_QUERY_PARAM]) {
+    data.push(`import { QueryClientProvider } from "@tanstack/react-query";\n`)
+  }
+
+  if (yargs.argv?.[REACT_ROUTER_PARAM]) {
+    data.push(`import Router from "@/components/Utils/Router";\n`)
+  }
+
+  if (yargs.argv?.[REACT_QUERY_PARAM]) {
+    data.push(`import reactQueryConfig from "@/config/reactQuery.config";\n`)
+  }
+
+  if (yargs.argv?.[AXIOS_PARAM]) {
+    data.push(`import "@/config/axios.config";\n`)
+  }
+
+  if (yargs.argv?.[I18NEXT_PARAM]) {
+    data.push(`import "@/config/i18next.config";\n`)
+  }
+
+  if (yargs.argv?.[REACT_QUERY_PARAM]) {
+    data.push(
+      `\nconst App = () => (` +
+      `\n  <QueryClientProvider client={reactQueryConfig}>` +
+      `\n    ${children}` +
+      `\n  </QueryClientProvider>` +
+      `\n);`
+    )
+  } else {
+    const breakLine = data.length === 0 ? "" : "\n";
+    data.push(`${breakLine}const App = () => ${children};`);
+  }
+
+  data.push(`\n\nexport default App;`)
+
+  return data.join("") + "\n";
+}
+
+const buildAppFile = () => {
+  const file = "src/App.tsx";
+  const fd = openSync(file, "w+");
+  const data = getAppData();
+  const buffer = Buffer.from(data);
+
+  writeSync(fd, buffer, 0, buffer.length, 0); //write new data
+  close(fd);
+};
+
+const installDependencies = () => {
+  const installDependencyCommand = PACKAGE_MANAGER === "npm" ? "install" : "add";
+
+  execSync(`${PACKAGE_MANAGER} install`);
+
+  if (yargs.argv?.[AXIOS_PARAM]) {
+    execSync(`${PACKAGE_MANAGER} ${installDependencyCommand} axios`);
+  }
+
+  if (yargs.argv?.[I18NEXT_PARAM]) {
+    execSync(`${PACKAGE_MANAGER} ${installDependencyCommand} i18next`);
+    execSync(`${PACKAGE_MANAGER} ${installDependencyCommand} react-i18next`);
+    execSync(`${PACKAGE_MANAGER} ${installDependencyCommand} i18next-browser-languagedetector`);
+  }
+
+  if (yargs.argv?.[REACT_QUERY_PARAM]) {
+    execSync(`${PACKAGE_MANAGER} ${installDependencyCommand} @tanstack/react-query`);
+  }
+
+  if (yargs.argv?.[REACT_ROUTER_PARAM]) {
+    execSync(`${PACKAGE_MANAGER} ${installDependencyCommand} react-router-dom`);
+  }
+
+  // Remove lock file before install, user don't need it
+  rmSync(join(PROJECT_PATH, "bun.lockb"), {recursive: true});
+};
+
+const main = async () => {
+  try {
+    // Clear npx cache
+    console.log("\n\x1b[36m%s\x1b[0m", "Clear npx cache...");
+    execSync("rm -rf ~/.npm/_npx");
+
+    // Download files
+    console.log("\x1b[36m%s\x1b[0m", "Downloading files...");
+    execSync(`git clone --depth 1 ${REPOSITORY_URL} ${PROJECT_PATH}`);
+
+    // Change directory
+    process.chdir(PROJECT_PATH);
+
+    // Create package.json & .eslintrc.json
+    console.log("\x1b[36m%s\x1b[0m", "Create package.json & .eslintrc.json...");
+    buildPackageJson({packageJson, argv: yargs.argv});
+
+    // Install dependencies
+    console.log("\x1b[36m%s\x1b[0m", "Installing dependencies...");
+    installDependencies();
+
+    // Generate Files.tsx
+    console.log("\x1b[36m%s\x1b[0m", "Generate Files...");
+    buildAppFile();
+    buildEslintJson(eslintrcJson);
+    buildSetupTest();
+
+    // Remove useless files
+    console.log("\x1b[36m%s\x1b[0m", "Clean up unused file...");
+    removeUselessFiles();
+
+    // Create empty README.md
+    console.log("\x1b[36m%s\x1b[0m", "Create empty README.md...");
+    openSync("README.md", "w");
+
+    // Done
+    console.log("\x1b[32m%s\x1b[0m", "Your application is ready, enjoy to use !");
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+main().then();

package/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/index.tsx"></script>
+  </body>
+</html>

package/index.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./src/App";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@getsoren/create-boilerplate-vite-react-ts",
+  "description": "Start a Vite React TypeScript project in few second !",
+  "private": false,
+  "license": "ISC",
+  "version": "2.7.1",
+  "type": "module",
+  "author": "Mickaël Austoni",
+  "homepage": "https://github.com/getsoren/create-boilerplate-vite-react-ts#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/getsoren/create-boilerplate-vite-react-ts.git"
+  },
+  "bugs": {
+    "url": "https://github.com/getsoren/create-boilerplate-vite-react-ts/issues"
+  },
+  "bin": {
+    "create-boilerplate-vite-react-ts": "bin/create-app.cjs"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "create": "node bin/create-app.cjs dist --axios --i18next --react-query --react-router",
+    "lint": "eslint . --max-warnings=0 && tsc --noEmit",
+    "preview": "vite preview",
+    "test": "yarn lint && vitest",
+    "prepare": "husky install",
+    "release": "commit-and-tag-version"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "yargs": "^17.7.2"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "@vitejs/plugin-react": "^3.1.0",
+    "@getsoren/eslint-config-react-soren": "^1.14.0",
+    "husky": "^8.0.3",
+    "jsdom": "^22.1.0",
+    "typescript": "^4.9.5",
+    "vite": "^4.3.9",
+    "vitest": "^0.32.2",
+    "commit-and-tag-version": "^12.6.0"
+  },
+  "keywords": [
+    "react",
+    "react create app",
+    "vite create app",
+    "react router",
+    "i18next",
+    "react-query",
+    "javascript",
+    "typescript"
+  ],
+  "commit-and-tag-version": {
+    "releaseCommitMessageFormat": "chore(release): {{currentTag}} [skip ci]",
+    "tagPrefix": ""
+  }
+}

package/public/.readme.md

@@ -0,0 +1 @@
+**_Public folder_**

package/src/App.test.tsx

@@ -0,0 +1,10 @@
+import { render } from "@testing-library/react";
+import { expect, test } from "vitest";
+import App from "@/App";
+
+test("render <App />", () => {
+  const { getByText } = render(<App />);
+  const title = getByText("create-boilerplate-vite-react-ts");
+
+  expect(title).toBeInTheDocument();
+});

package/src/App.tsx

@@ -0,0 +1,3 @@
+const App = () => <h1>create-boilerplate-vite-react-ts</h1>;
+
+export default App;

package/src/assets/.readme.md

@@ -0,0 +1 @@
+**_This directory contains assets files like images, fonts, ..._**

package/src/components/.readme.md

@@ -0,0 +1,4 @@
+**_This directory contains reusable components that are
+most often used to compose Feature or Page components.
+These components are almost always pure and presentational,
+with no side-effects._**

package/src/components/DataDisplay/.readme.md

@@ -0,0 +1 @@
+**_This directory contains all data display components_**

package/src/components/Feedback/.readme.md

@@ -0,0 +1 @@
+**_This directory contains all feedback components_**

package/src/components/Inputs/.readme.md

@@ -0,0 +1 @@
+**_This directory contains all inputs components_**

package/src/components/Layout/.readme.md

@@ -0,0 +1 @@
+**_This directory contains all layouts components_**

package/src/components/Navigation/.readme.md

@@ -0,0 +1 @@
+**_This directory contains all navigation components_**

package/src/components/Surfaces/.readme.md

@@ -0,0 +1 @@
+**_This directory contains all surfaces components_**

package/src/components/Utils/.readme.md

@@ -0,0 +1 @@
+**_This directory contains all utils components_**

package/src/components/Utils/Router.tsx

@@ -0,0 +1,17 @@
+import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider } from "react-router-dom";
+import ROUTES from "@/constants/routes";
+import Contact from "@/pages/Contact";
+import Home from "@/pages/Home";
+
+const router = createBrowserRouter(
+  createRoutesFromElements(
+    <>
+      <Route path={ROUTES.home} element={<Home />} />
+      <Route path={ROUTES.contact} element={<Contact />} />
+    </>,
+  ),
+);
+
+const Router = () => <RouterProvider router={router} />;
+
+export default Router;

package/src/constants/.readme.md

@@ -0,0 +1,3 @@
+**_This directory contains reusable & immutable
+constant like URL, regex, ..._**
+`

package/src/constants/routes.ts

@@ -0,0 +1,6 @@
+const ROUTES = {
+  contact: "/contact",
+  home: "/",
+} as const;
+
+export default ROUTES;

package/src/context/.readme.md

@@ -0,0 +1,3 @@
+**_This directory contains reusable contexts used to provide data through
+a tree of components. If using Redux or React Sweet State this
+directory is likely not needed._**

package/src/features/.readme.md

@@ -0,0 +1,12 @@
+**_This directory contains reusable Feature Components.
+A Feature Component is a concept inspired by Redux in which
+all logic required for a feature is co-located to a single directory.
+A Feature Component is often composed of many other components,
+either local or shared. The same is true for all resources:
+utils, types, hooks, and so on._**
+
+**_Feature Components often include side effects._**
+
+**_f using Redux, and interacts with the Store,
+the Feature Component will include a slice file
+that defines the “slice” of the Redux Store the feature represents._**

package/src/hooks/.readme.md

@@ -0,0 +1 @@
+**_This directory contains reusable React Hooks._**

package/src/locales/.readme.md

@@ -0,0 +1 @@
+**_This directory contains translation files._**

package/src/locales/en.ts

@@ -0,0 +1,3 @@
+const en = {};
+
+export default en;

package/src/locales/fr.ts

@@ -0,0 +1,3 @@
+const fr = {};
+
+export default fr;

package/src/pages/.readme.md

@@ -0,0 +1,6 @@
+**_This directory contains Page Components.
+Each Page Component is associated with a route.
+Page Components compose the content of a page by importing
+Components and Feature Components. A Page Component
+should rarely include side effects, and should instead
+delegate side effects to Feature Components_**

package/src/pages/Contact.tsx

@@ -0,0 +1,12 @@
+import { Link } from "react-router-dom";
+import ROUTES from "@/constants/routes";
+
+const Contact = () => (
+  <>
+    <h1>create-boilerplate-vite-react-ts</h1>
+    <h2>Contact</h2>
+    <Link to={ROUTES.home}>Go to home</Link>
+  </>
+);
+
+export default Contact;

package/src/pages/Home.tsx

@@ -0,0 +1,12 @@
+import { Link } from "react-router-dom";
+import ROUTES from "@/constants/routes";
+
+const Home = () => (
+  <>
+    <h1>create-boilerplate-vite-react-ts</h1>
+    <h2>Home</h2>
+    <Link to={ROUTES.contact}>Go to contact</Link>
+  </>
+);
+
+export default Home;

package/src/services/.readme.md

@@ -0,0 +1,3 @@
+**\*This directory contains reusable code for interacting with an API,
+often in the form of hooks or fetcher. This directory
+should only contain code for interacting with an API.\*\***

package/src/stores/.readme.md

@@ -0,0 +1,2 @@
+**_This directory contains all global states that can be
+accessed from any component within the application from store._**

package/src/test.config.ts

@@ -0,0 +1,4 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+import "@testing-library/jest-dom";

package/src/types/.readme.md

@@ -0,0 +1,2 @@
+**_This directory contains reusable types for projects
+utilizing TypeScript or Flow._**

package/src/types/dependencies.d.ts

@@ -0,0 +1,8 @@
+// This resolves the issue of typescript
+// not recognizing the types of the dependencies
+declare module "@tanstack/react-query";
+declare module "axios";
+declare module "i18next";
+declare module "i18next-browser-languagedetector";
+declare module "react-i18next";
+declare module "react-router-dom";

package/src/types/i18next.d.ts

@@ -0,0 +1,10 @@
+import en from "@/locales/en";
+
+declare module "i18next" {
+  interface CustomTypeOptions {
+    returnNull: false;
+    resources: {
+      translation: typeof en;
+    };
+  }
+}

package/src/types/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/src/utils/.readme.md

@@ -0,0 +1,2 @@
+**_This directory contains reusable utility functions.
+These functions should always be pure and produce no side effects._**

package/tsconfig.json

@@ -0,0 +1,46 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "importsNotUsedAsValues": "error",
+    "noUnusedParameters": true,
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ],
+      "~/*": [
+        "./*"
+      ]
+    },
+    "types": [
+      "vitest/globals"
+    ]
+  },
+  "include": [
+    "src"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true
+  },
+  "files": [
+    "package.json"
+  ],
+  "include": [
+    "vite.config.ts"
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,19 @@
+import { resolve } from "path";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vitest/config";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: [
+      { find: "@", replacement: resolve(__dirname, "src") },
+      { find: "~", replacement: resolve(__dirname) },
+    ],
+  },
+  test: {
+    environment: "jsdom",
+    globals: true,
+    setupFiles: "src/test.config.ts",
+  },
+});