[],
+): RouteObject[] {
+ const mapping = listToMap(
+ wrappedRoutes.filter((item) => !item.index),
+ (item) => item.id,
+ (item) => ({
+ ...item,
+ }),
+ );
+
+ wrappedRoutes.forEach((route) => {
+ if (route.parent) {
+ const parentId = route.parent.id;
+
+ const parentRoute = mapping[parentId];
+ if (parentRoute.children) {
+ parentRoute.children.push(route);
+ } else {
+ parentRoute.children = [route];
+ }
+ }
+ });
+
+ const results = mapToList(
+ mapping,
+ (item) => item,
+ ).filter((item) => !item.parent);
+
+ return results;
+}
diff --git a/src/views/Home/index.module.css b/src/views/Home/index.module.css
new file mode 100644
index 00000000..89fa0550
--- /dev/null
+++ b/src/views/Home/index.module.css
@@ -0,0 +1,7 @@
+.card {
+ padding: var(--padding-medium);
+}
+
+.read-the-docs {
+ color: var(--label-color);
+}
diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx
new file mode 100644
index 00000000..0810a60b
--- /dev/null
+++ b/src/views/Home/index.tsx
@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+
+import { wrappedRoutes } from '../../App/routes';
+
+import styles from './index.module.css';
+
+// FIXME: import is weird will full names
+
+interface Props {
+ // FIXME: remove this issue with prop types
+ name?: string;
+}
+
+/** @knipignore */
+// eslint-disable-next-line import/prefer-default-export
+export function Component(props: Props) {
+ const {
+ name = 'Pineapple',
+ } = props;
+ const [count, setCount] = useState(1);
+
+ return (
+ <>
+
+ {`${name} + React v${count}`}
+
+
+ Click on the Pineapple and React logos to learn more
+
+
+
+
+
+ Go to preferences
+
+
+ );
+}
+
+Component.displayName = 'Home';
diff --git a/src/views/Preferences/index.tsx b/src/views/Preferences/index.tsx
new file mode 100644
index 00000000..2da93efe
--- /dev/null
+++ b/src/views/Preferences/index.tsx
@@ -0,0 +1,20 @@
+import { Link } from 'react-router-dom';
+
+import { wrappedRoutes } from '../../App/routes';
+
+/** @knipignore */
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+ return (
+ <>
+
+ Preferences
+
+
+ Go to home
+
+
+ );
+}
+
+Component.displayName = 'Preferences';
diff --git a/src/views/Root/index.module.css b/src/views/Root/index.module.css
new file mode 100644
index 00000000..bd7c3e02
--- /dev/null
+++ b/src/views/Root/index.module.css
@@ -0,0 +1,25 @@
+.logo {
+ transition: filter 300ms;
+ padding: var(--padding-small);
+ height: 6em;
+ will-change: filter;
+
+ &:hover {
+ filter: drop-shadow(0 0 2em var(--shadow-color));
+ }
+}
+
+@keyframes logo-spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ a:nth-of-type(2) .logo {
+ animation: logo-spin infinite 3s linear;
+ }
+}
diff --git a/src/views/Root/index.tsx b/src/views/Root/index.tsx
new file mode 100644
index 00000000..cbeab0d3
--- /dev/null
+++ b/src/views/Root/index.tsx
@@ -0,0 +1,41 @@
+import { Outlet } from 'react-router-dom';
+
+import reactLogo from '../../assets/react.svg';
+
+import styles from './index.module.css';
+
+/** @knipignore */
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+ return (
+ <>
+
+
+
+ );
+}
+
+Component.displayName = 'App';
diff --git a/stylelint.config.cjs b/stylelint.config.cjs
new file mode 100644
index 00000000..c7574a69
--- /dev/null
+++ b/stylelint.config.cjs
@@ -0,0 +1,29 @@
+module.exports = {
+ plugins: [
+ 'stylelint-no-unused-selectors',
+ 'stylelint-value-no-unknown-custom-properties'
+ ],
+ extends: [
+ 'stylelint-config-recommended',
+ 'stylelint-config-concentric',
+ ],
+ rules: {
+ 'plugin/no-unused-selectors': {
+ "suffixesToStrip": [".module"],
+ "documents": [
+ "{cssDir}/{cssName}.tsx",
+ ],
+ },
+ 'csstools/value-no-unknown-custom-properties': [
+ true, {
+ importFrom: ['./src/index.css']
+ },
+ ],
+ 'selector-pseudo-class-no-unknown': [
+ true,
+ {
+ ignorePseudoClasses: ['global'],
+ },
+ ],
+ },
+};
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..dfc1ed97
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,35 @@
+{
+ "compilerOptions": {
+ "paths": {
+ "#views/*": ["./src/views/*"],
+ "#utils/*": ["./src/utils/*"]
+ },
+
+ "target": "ESNext",
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "types": [
+ "vite-plugin-svgr/client",
+ "node"
+ ],
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": [
+ "src"
+ ],
+ "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 00000000..b60e1776
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "skipLibCheck": true,
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "allowSyntheticDefaultImports": true
+ },
+ "include": ["vite.config.ts", "env.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 00000000..a40051eb
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,59 @@
+import { ValidateEnv as validateEnv } from '@julr/vite-plugin-validate-env';
+import reactSwc from '@vitejs/plugin-react-swc';
+import { execSync } from 'child_process';
+import { defineConfig } from 'vite';
+import checker from 'vite-plugin-checker';
+import { compression } from 'vite-plugin-compression2';
+import svgr from 'vite-plugin-svgr';
+import webfontDownload from 'vite-plugin-webfont-dl';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+import envConfig from './env';
+
+/* Get commit hash */
+const commitHash = execSync('git rev-parse --short HEAD').toString();
+
+export default defineConfig(({ mode }) => {
+ const isProd = mode === 'production';
+ return {
+ define: {
+ APP_COMMIT_HASH: JSON.stringify(commitHash),
+ },
+ plugins: [
+ isProd ? checker({
+ typescript: true,
+ eslint: {
+ lintCommand: 'eslint ./src',
+ },
+ stylelint: {
+ lintCommand: 'stylelint "./src/**/*.css"',
+ },
+ }) : undefined,
+ svgr(),
+ reactSwc(),
+ tsconfigPaths(),
+ webfontDownload(),
+ validateEnv(envConfig),
+ isProd ? compression() : undefined,
+ ],
+ css: {
+ devSourcemap: isProd,
+ modules: {
+ scopeBehaviour: 'local',
+ localsConvention: 'camelCaseOnly',
+ },
+ },
+ envPrefix: 'APP_',
+ server: {
+ port: 3000,
+ strictPort: true,
+ },
+ build: {
+ outDir: 'build',
+ sourcemap: isProd,
+ },
+ test: {
+ environment: 'happy-dom',
+ },
+ };
+});
+