refactor: directory structure

.vscode/settings.json

@@ -72,15 +72,16 @@
     "codespaces",
     "datasource",
     "datasources",
+    "drawio",
+    "foca",
     "lefthook",
     "ochairo",
     "shellscripts",
     "turbopack",
     "usecase",
     "usecases",
     "vanillatte",
-    "vaníllatte",
-    "drawio"
+    "vaníllatte"
   ],
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit",

README.md

@@ -21,7 +21,9 @@ Initial technology stack is simple.
 
 ## Architecture
 
-The architecture of this project adopts concepts such as Separation of concerns,  
+Feature oriented clean architecture.
+
+The architecture of this project (FOCA) adopts concepts such as Separation of concerns,  
 SOLID Principles, Software Design Patterns, Atomic Design, and Readable Code.  
 These concepts aim to develop applications that are easy to understand, maintain, adapt, and modify.
 
@@ -33,45 +35,54 @@ the concepts themselves are complex and hard to understand.
 ## Directory structure
 
 ```sh
-├── docs                              # Documentation files
-│   ├── diagrams                      # - Draw.io diagrams
-│   ├── images                        # - Images for documents
-│   └── wiki                          # - Wiki pages
+├── docs                                 # Documentation files
+│   ├── diagrams                         # - Draw.io diagrams
+│   ├── images                           # - Images for documents
+│   └── wiki                             # - Wiki pages
 │
-├── scripts                           # Shell scripts
-│   ├── deployment                    # - Deployment tasks
-│   └── utilities                     # - Utility scripts
+├── scripts                              # Shell scripts
+│   ├── deployment                       # - Deployment tasks
+│   └── utilities                        # - Utility scripts
 │
 ├── src
-│   ├── app                           # Application code
-│   │   ├── core                      # - Core application code
-│   │   │   ├── environment           # - Environment manager code
-│   │   │   ├── http                  # - HTTP-related code
-│   │   │   └── router                # - Router code
-│   │   ├── shared                    # - Shared components and utilities
-│   │   │   ├── styles                # - Shared stylesheets
-│   │   │   └── ui-components         # - Reusable UI components
-│   │   │       ├── atoms             # - Basic UI elements
-│   │   │       ├── molecules         # - Simple component compositions
-│   │   │       └── organisms         # - Complex UI components
-│   │   ├── features                  # - Feature-specific code
-│   │   │   └── ${feature name}       # - Individual features
-│   │   │       ├── data              # - Data-related modules
-│   │   │       │   ├── datasources   # - Data sources
-│   │   │       │   └── repositories  # - Data repositories
-│   │   │       ├── domain            # - Domain logic
-│   │   │       └── presentation      # - Presentation components
-│   │   ├── main.html                 # - Main HTML file
-│   │   ├── main.ts                   # - Main TypeScript file
-│   │   └── routes.ts                 # - Routing configuration
+│   ├── app
+│   │   ├── core                         # Core application code
+│   │   │   └── domain                   # - Domain-specific logic
+│   │   │
+│   │   ├── features                     # Features
+│   │   │   └── [feature]                # - A specific feature
+│   │   │       ├── data                 # - Data-related logic
+│   │   │       │   ├── local            # - Local data storage logic
+│   │   │       │   └── remote           # - Remote data fetching logic
+│   │   │       ├── domain               # - Feature-specific domain
+│   │   │       │   ├── interfaces       # - Interfaces used within the feature
+│   │   │       │   └── usecases         # - Feature-specific business logic
+│   │   │       ├── presentation         # - Presentation components for the feature
+│   │   │       └── [feature].module.ts  # - Module file for the feature
+│   │   │
+│   │   ├── infrastructure               # Infrastructure code
+│   │   │   ├── adapters                 # - Adapters for external services
+│   │   │   │   └── auth                 # - Adapter for external auth services
+│   │   │   ├── http                     # - HTTP-related code
+│   │   │   ├── router                   # - Router code for handling routing
+│   │   │   ├── styles                   # - Stylesheets for styling the application
+│   │   │   └── ui-components            # - UI components
+│   │   │       ├── atoms                # - Basic UI elements
+│   │   │       ├── molecules            # - Simple UI components
+│   │   │       └── organisms            # - Complex UI components
+│   │   │
+│   │   ├── main.html                    # Entry point
+│   │   ├── main.ts                      # Bootstrapping
+│   │   └── routes.ts                    # Routing configuration
+│   │
+│   ├── mock                             # Mock data and mock API server
+│   │   ├── data                         # - Mock data stored in JSON files
+│   │   └── server                       # - Mock API server utilizing the mock data
 │   │
-│   └── mock                          # Mock data, server and test
-│       ├── data                      # - Mock data in json files
-│       ├── server                    # - Mock api server using mock data
-│       └── test                      # - Test codes using mock data
+│   └── test                             # Test code
 │
-├── webpack.config.cjs                # Webpack configuration file
-└── package.json                      # Project dependencies
+├── webpack.config.cjs                    # Webpack configuration
+└── package.json                         # Project dependencies
 ```
 
 ## Onboarding setup

src/app/features/showcase/presentation/showcase.component.ts

@@ -1,8 +1,8 @@
-import "@shared/ui-components/atoms/input/input.component";
 import { ShowcaseData } from "@showcase/domain/entities/showcase.entity";
 import GetShowcase from "@showcase/domain/usecases/get-showcase.usecase";
 import style from "@showcase/presentation/showcase.component.css";
 import template from "@showcase/presentation/showcase.component.html";
+import "../../../infrastructure/ui-components/atoms/input/input.component";
 
 class ShowcaseComponent extends HTMLElement {
   private _shadowRoot: ShadowRoot;

src/app/infrastructure/styles/styles.css

@@ -0,0 +1,3 @@
+@import url(@infrastructure/styles/reset.css);
+@import url(@infrastructure/styles/colors.css);
+@import url(@infrastructure/styles/fonts.css);

src/app/infrastructure/ui-components/atoms/input/input.component.css

@@ -0,0 +1,4 @@
+@import url("@infrastructure/styles/styles.css");
+input {
+  color: red;
+}

src/app/shared/ui-components/atoms/input/input.component.ts → src/app/infrastructure/ui-components/atoms/input/input.component.ts

@@ -1,5 +1,5 @@
-import style from "@shared/ui-components/atoms/input/input.component.css";
-import template from "@shared/ui-components/atoms/input/input.component.html";
+import style from "@infrastructure/ui-components/atoms/input/input.component.css";
+import template from "@infrastructure/ui-components/atoms/input/input.component.html";
 
 export class InputComponent extends HTMLElement {
   _shadowRoot: ShadowRoot;

src/app/main.ts

@@ -1,4 +1,4 @@
-import { router } from "./core/router/router";
+import { router } from "./infrastructure/router/router";
 import { routesConfig } from "./routes";
 
 const rootElement = document.getElementById("root")!;

src/app/routes.ts

@@ -1,6 +1,6 @@
 import errorModule from "@error/error.module";
 import showcaseModule from "@showcase/showcase.module";
-import { RouteConfig } from "./core/router/interfaces";
+import { RouteConfig } from "./infrastructure/router/interfaces";
 
 // LazyLoad feature modules
 export const routesConfig: RouteConfig[] = [

tsconfig.json

@@ -13,8 +13,10 @@
       // FEATURES
       "@showcase/*": ["./src/app/features/showcase/*"],
       "@error/*": ["./src/app/features/error/*"],
-      // SHARED
-      "@shared/*": ["./src/app/shared/*"],
+      // CORE
+      "@core/*": ["./src/app/core/*"],
+      // INFRASTRUCTURE
+      "@infrastructure/*": ["./src/app/infrastructure/*"],
       // MOCK
       "@mock/*": ["./src/mock/*"],
       // TEST

webpack.config.cjs

@@ -20,8 +20,10 @@ module.exports = {
       // FEATURES
       "@showcase": path.resolve("src/app/features/showcase"),
       "@error": path.resolve("src/app/features/error"),
-      // SHARED
-      "@shared": path.resolve("src/app/shared"),
+      // CORE
+      "@core": path.resolve("src/app/core"),
+      // INFRASTRUCTURE
+      "@infrastructure": path.resolve("src/app/infrastructure"),
       // MOCK
       "@mock": path.resolve("src/mock"),
       // TEST