added folder structure

.eslintrc.js

+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    "airbnb",
+    "airbnb/hooks",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:jest-formatting/recommended",
+    "plugin:testing-library/react",
+    "plugin:@next/next/recommended",
+  ],
+  parser: "@typescript-eslint/parser",
+  overrides: [
+    {
+      env: {
+        node: true,
+      },
+      files: [".eslintrc.{js,cjs}"],
+      parserOptions: {
+        sourceType: "script",
+      },
+    },
+  ],
+  parserOptions: {
+    sourceType: "module",
+    project: ["./tsconfig.json"],
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  plugins: ["import", "jsx-a11y", "react", "react-hooks", "@typescript-eslint"],
+  rules: {
+    "no-magic-numbers": ["error"],
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        ignoreRestSiblings: true,
+        varsIgnorePattern: "^_",
+        argsIgnorePattern: "^_",
+      },
+    ],
+    "react/react-in-jsx-scope": "off",
+    "jest/expect-expect": [
+      "error",
+      {
+        assertFunctionNames: ["expect", "expectToThrow", "expectEmptyFragment"],
+      },
+    ],
+    "react/jsx-filename-extension": [1, { extensions: [".tsx", ".jsx"] }],
+    "react/no-multi-comp": "error",
+    "tailwindcss/no-contradicting-classname": "error",
+    "testing-library/prefer-find-by": "error",
+    "testing-library/prefer-screen-queries": "error",
+    "@typescript-eslint/no-explicit-any": 0,
+  },
+};

docs/folder-structure.md

+# Folder structure
+
+├── [public]
+├── [pages]
+├── [docs]
+├── [cypress] <- structure in cypress docs
+├── tailwind.config.js
+├── [src]
+├── [assets] <- global assets
+├── [vectors]
+├── [branding]
+└── logo.svg
+├── [icons]
+├── icon-a.svg <- kebab-case
+└── icon-b.svg
+└── [images]
+├── [banners]
+└── main-banner.png
+├── [components] <- domain components
+├── [DomainName]
+├── [utils]
+└── domainUtil.ts
+├── [Component]
+└── [SthComponent]
+└── [OtherDomainName]
+├── [OtherComponent]
+└── [SomeComponent]
+├── [shared] <- not-domain components (shared between domains)
+├── [Button]
+└── [Select]
+├── [constants] <- global constants
+├── common.ts
+├── api.ts
+└── map.ts
+├── [services] <- services clients
+├── [samplecms]
+└── ...
+├── [api]
+├── ... <- depends on service client
+└── index.ts
+├── [types] <- global types
+├── analytics.ts
+├── error.ts
+├── fonts.ts
+└── common.ts
+└── [utils] <- global helpers
+├── [analytics]
+├── someHelper.ts
+└── index.ts
+├── [bugsnag]
+└── index.ts
+├── [number]
+├── multiplyNumberBy.ts
+└── divideNumberBy.ts
+└── [array]
+└── doSth.ts
+
+# Component structure
+
+├── [DisplayArea]
+├── [Map]
+├── [Pin] <- subcomponent
+├── Pin.component.test.ts
+├── Pin.test.tsx
+└── index.ts
+├── [utils] <- single-component utils
+├── getSomeData.ts
+└── getSomeData.test.ts
+├── [assets] <- single-component assets
+├── some-asset.png
+└── other-asset.svg
+├── Map.component.test.tsx
+├── Map.test.tsx
+├── Map.types.ts
+├── Map.constants.ts
+├── Map.style.ts <- depends on design framework
+└── index.ts
+├── [OtherComponent]
+└── ...
+
+### Folder Naming Convention
+
+- catalog: kebab-case
+- asset: kebab-case
+- util/hook: camelCase
+- components: PascalCase
+- domena: PascalCase
+
+### Domena
+
+- grupa komponentów skupionych wokół jakiejś głównej domeny: `DisplayArea` , `FunctionalArea` , `Plugin` , `Layout`
+- domena sama w sobie nie eksportuje żadnego komponentu poza swoją domenę, jest tylko workiem na ich przechowywanie
+- zastosowany podział wynika z podejścia strukturalnego (struktura katalogów odwzorowuje strukturę komponentów)
+
+### Komponent/Subcomponent
+
+- pojedynczy komponent z ew. subcomponentami wewnątrz siebie
+- odpowiednie pliki/katalogi tworzymy tylko jeśli jest taka potrzeba
+- **nazewnictwo:** w nazewnictwie powtórzona jest bazowa nazwa komponentu z uwagi na czytelność importów i Developer Experience - widząc w edytorze “style.ts”, “types.ts” z wielu plików ich nie odróżnimy tak łatwo
+- **single-component single-responsibility:** w komponencie możliwe są utile i assety spełniające zasadę single-component single-responsibility - jeśli potrzebujemy złożonego utila w komponencie (ale **tylko** w nim), to powinien trafić do odpowiedniego folderu
+- przykład:
+  - index.ts - eksport komponentu + czyste eksportowanie ew. typów/utilów
+    (`@components/DisplayArea/Map/Map.tsx` → `@components/DisplayArea/Map`) - `export { default } from “./Map.view.tsx”`
+  - Map.**component**.tsx - widok komponentu
+  - Map.**component.test**.tsx - unit test komponentu
+  - Map.**styles**.scss
+  - Map.**types**.ts - lokalne typy // w przypadku kiedy typ jest używany poza Map.component.tsx
+  - Map.**constants**.ts - lokalne constants
+  - **utils/…** - subkatalog komponentu do lokalnych utilów, hooków
+  - **assets/…** - subkatalog komponentu do lokalnych assetów
+
+### Shared komponent
+
+- komponenty reużywane w wielu domenach
+- zasady komponentów wewnątrz jw.

package.json

@@ -13,7 +13,6 @@
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.15",
-    "eslint": "8.49.0",
     "eslint-config-next": "13.4.19",
     "next": "13.4.19",
     "postcss": "8.4.29",
@@ -21,5 +20,17 @@
     "react-dom": "18.2.0",
     "tailwindcss": "3.3.3",
     "typescript": "5.2.2"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^6.7.0",
+    "@typescript-eslint/parser": "^6.7.0",
+    "eslint": "^8.49.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-testing-library": "^6.0.1",
+    "prettier": "^3.0.3"
   }
 }

prettier.confg.js

+module.exports = {
+  singleQuote: true,
+  trailingComma: "all",
+  printWidth: 100,
+  arrowParens: "avoid",
+};

src/app/page.tsx

-import Image from 'next/image'
+import Image from "next/image";
 
 export default function Home() {
+  const a = 5;
+  const b = "asd";
+  const d = "asd";
+  const aa = 1;
+
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
       <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
@@ -15,7 +20,7 @@ export default function Home() {
             target="_blank"
             rel="noopener noreferrer"
           >
-            By{' '}
+            By{" "}
             <Image
               src="/vercel.svg"
               alt="Vercel Logo"
@@ -47,7 +52,7 @@ export default function Home() {
           rel="noopener noreferrer"
         >
           <h2 className={`mb-3 text-2xl font-semibold`}>
-            Docs{' '}
+            Docs{" "}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
@@ -64,7 +69,7 @@ export default function Home() {
           rel="noopener noreferrer"
         >
           <h2 className={`mb-3 text-2xl font-semibold`}>
-            Learn{' '}
+            Learn{" "}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
@@ -81,7 +86,7 @@ export default function Home() {
           rel="noopener noreferrer"
         >
           <h2 className={`mb-3 text-2xl font-semibold`}>
-            Templates{' '}
+            Templates{" "}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
@@ -98,7 +103,7 @@ export default function Home() {
           rel="noopener noreferrer"
         >
           <h2 className={`mb-3 text-2xl font-semibold`}>
-            Deploy{' '}
+            Deploy{" "}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
@@ -109,5 +114,5 @@ export default function Home() {
         </a>
       </div>
     </main>
-  )
+  );
 }

tsconfig.json

 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es6",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
@@ -22,6 +22,18 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "pages"
+  ],
+  "exclude": ["node_modules"],
+  "noFallthroughCasesInSwitch": true, //Ensures that any non-empty case inside a switch statement includes either break, return, or throw.
+  "noImplicitReturns": true, // check all code paths in a function to ensure they return a value.
+  "noUnusedLocals": true, // Report errors on unused local variables.
+  "noUnusedParameters": true, //Report errors on unused parameters in functions.
+  "allowSyntheticDefaultImports": true, // allows to import modules like this: "import React from "react";" instead of "import * as React from "react";"
+  "forceConsistentCasingInFileNames": true
 }