feat(RSS-ECOMM-2_27): add pages components (#109)

* feat: add LoginPage component

* feat: add MainPage component

* refactor: rename the loginPageView field to view

* feat: add RegistrationPage component

* feat: add NotFoundPage component

* fix: fix name MainPage component

src/pages/LoginPage/model/LoginPageModel.ts

@@ -0,0 +1,17 @@
+import type { PageInterface } from '@/shared/types/interfaces.ts';
+
+import LoginPageView from '../view/LoginPageView.ts';
+
+class LoginPageModel implements PageInterface {
+  private view: LoginPageView;
+
+  constructor(parent: HTMLDivElement) {
+    this.view = new LoginPageView(parent);
+  }
+
+  public getHTML(): HTMLDivElement {
+    return this.view.getHTML();
+  }
+}
+
+export default LoginPageModel;

src/pages/LoginPage/view/LoginPageView.ts

@@ -0,0 +1,41 @@
+import { TAG_NAMES } from '@/shared/constants/enums.ts';
+import createBaseElement from '@/shared/utils/createBaseElement.ts';
+
+import LOGIN_PAGE_STYLES from './loginPageView.module.scss';
+
+class LoginPageView {
+  private page: HTMLDivElement;
+
+  private parent: HTMLDivElement;
+
+  constructor(parent: HTMLDivElement) {
+    this.parent = parent;
+    this.page = this.createHTML();
+  }
+
+  private createHTML(): HTMLDivElement {
+    this.page = createBaseElement({
+      cssClasses: [LOGIN_PAGE_STYLES.loginPage],
+      tag: TAG_NAMES.DIV,
+    });
+
+    this.parent.append(this.page);
+
+    return this.page;
+  }
+
+  public getHTML(): HTMLDivElement {
+    return this.page;
+  }
+
+  public hide(): boolean {
+    this.page.classList.add(LOGIN_PAGE_STYLES.loginPage_hidden);
+    return true;
+  }
+
+  public show(): boolean {
+    this.page.classList.remove(LOGIN_PAGE_STYLES.loginPage_hidden);
+    return true;
+  }
+}
+export default LoginPageView;

src/pages/MainPage/model/MainPageModel.ts

@@ -0,0 +1,17 @@
+import type { PageInterface } from '@/shared/types/interfaces.ts';
+
+import MainPageView from '../view/MainPageView.ts';
+
+class MainPageModel implements PageInterface {
+  private view: MainPageView;
+
+  constructor(parent: HTMLDivElement) {
+    this.view = new MainPageView(parent);
+  }
+
+  public getHTML(): HTMLDivElement {
+    return this.view.getHTML();
+  }
+}
+
+export default MainPageModel;

src/pages/MainPage/view/MainPageView.ts

@@ -0,0 +1,41 @@
+import { TAG_NAMES } from '@/shared/constants/enums.ts';
+import createBaseElement from '@/shared/utils/createBaseElement.ts';
+
+import MAIN_PAGE_STYLES from './mainPageView.module.scss';
+
+class MainPageView {
+  private page: HTMLDivElement;
+
+  private parent: HTMLDivElement;
+
+  constructor(parent: HTMLDivElement) {
+    this.parent = parent;
+    this.page = this.createHTML();
+  }
+
+  private createHTML(): HTMLDivElement {
+    this.page = createBaseElement({
+      cssClasses: [MAIN_PAGE_STYLES.mainPage],
+      tag: TAG_NAMES.DIV,
+    });
+
+    this.parent.append(this.page);
+
+    return this.page;
+  }
+
+  public getHTML(): HTMLDivElement {
+    return this.page;
+  }
+
+  public hide(): boolean {
+    this.page.classList.add(MAIN_PAGE_STYLES.mainPage_hidden);
+    return true;
+  }
+
+  public show(): boolean {
+    this.page.classList.remove(MAIN_PAGE_STYLES.mainPage_hidden);
+    return true;
+  }
+}
+export default MainPageView;

src/pages/NotFoundPage/model/NotFoundPageModel.ts

@@ -0,0 +1,17 @@
+import type { PageInterface } from '@/shared/types/interfaces.ts';
+
+import NotFoundPageView from '../view/NotFoundPageView.ts';
+
+class NotFoundPageModel implements PageInterface {
+  private view: NotFoundPageView;
+
+  constructor(parent: HTMLDivElement) {
+    this.view = new NotFoundPageView(parent);
+  }
+
+  public getHTML(): HTMLDivElement {
+    return this.view.getHTML();
+  }
+}
+
+export default NotFoundPageModel;

src/pages/NotFoundPage/view/NotFoundPageView.ts

@@ -0,0 +1,41 @@
+import { TAG_NAMES } from '@/shared/constants/enums.ts';
+import createBaseElement from '@/shared/utils/createBaseElement.ts';
+
+import NOT_FOUND_PAGE_STYLES from './notFoundPageView.module.scss';
+
+class NotFoundPageView {
+  private page: HTMLDivElement;
+
+  private parent: HTMLDivElement;
+
+  constructor(parent: HTMLDivElement) {
+    this.parent = parent;
+    this.page = this.createHTML();
+  }
+
+  private createHTML(): HTMLDivElement {
+    this.page = createBaseElement({
+      cssClasses: [NOT_FOUND_PAGE_STYLES.notFoundPage],
+      tag: TAG_NAMES.DIV,
+    });
+
+    this.parent.append(this.page);
+
+    return this.page;
+  }
+
+  public getHTML(): HTMLDivElement {
+    return this.page;
+  }
+
+  public hide(): boolean {
+    this.page.classList.add(NOT_FOUND_PAGE_STYLES.notFoundPage_hidden);
+    return true;
+  }
+
+  public show(): boolean {
+    this.page.classList.remove(NOT_FOUND_PAGE_STYLES.notFoundPage_hidden);
+    return true;
+  }
+}
+export default NotFoundPageView;

src/pages/RegistrationPage/model/RegistrationPageModel.ts

@@ -0,0 +1,17 @@
+import type { PageInterface } from '@/shared/types/interfaces.ts';
+
+import RegistrationPageView from '../view/RegistrationPageView.ts';
+
+class LoginPageModel implements PageInterface {
+  private view: RegistrationPageView;
+
+  constructor(parent: HTMLDivElement) {
+    this.view = new RegistrationPageView(parent);
+  }
+
+  public getHTML(): HTMLDivElement {
+    return this.view.getHTML();
+  }
+}
+
+export default LoginPageModel;

src/pages/RegistrationPage/view/RegistrationPageView.ts

@@ -0,0 +1,41 @@
+import { TAG_NAMES } from '@/shared/constants/enums.ts';
+import createBaseElement from '@/shared/utils/createBaseElement.ts';
+
+import REGISTRATION_PAGE_STYLES from './registrationPageView.module.scss';
+
+class RegistrationPageView {
+  private page: HTMLDivElement;
+
+  private parent: HTMLDivElement;
+
+  constructor(parent: HTMLDivElement) {
+    this.parent = parent;
+    this.page = this.createHTML();
+  }
+
+  private createHTML(): HTMLDivElement {
+    this.page = createBaseElement({
+      cssClasses: [REGISTRATION_PAGE_STYLES.registrationPage],
+      tag: TAG_NAMES.DIV,
+    });
+
+    this.parent.append(this.page);
+
+    return this.page;
+  }
+
+  public getHTML(): HTMLDivElement {
+    return this.page;
+  }
+
+  public hide(): boolean {
+    this.page.classList.add(REGISTRATION_PAGE_STYLES.registrationPage_hidden);
+    return true;
+  }
+
+  public show(): boolean {
+    this.page.classList.remove(REGISTRATION_PAGE_STYLES.registrationPage_hidden);
+    return true;
+  }
+}
+export default RegistrationPageView;

src/shared/Button/model/ButtonModel.ts

@@ -1,4 +1,4 @@
-import type ButtonAttributesInterface from '@/shared/types/interfaces.ts';
+import type { ButtonAttributesInterface } from '@/shared/types/interfaces.ts';
 
 import { IS_DISABLED } from '@/shared/constants/enums.ts';
 

src/shared/Button/view/ButtonView.ts

@@ -1,4 +1,4 @@
-import type ButtonAttributesInterface from '@/shared/types/interfaces.ts';
+import type { ButtonAttributesInterface } from '@/shared/types/interfaces.ts';
 
 import { TAG_NAMES } from '@/shared/constants/enums.ts';
 import createBaseElement from '@/shared/utils/createBaseElement.ts';

src/shared/types/interfaces.ts

@@ -1,10 +1,12 @@
 import type ButtonActionType from './types.ts';
 
-interface ButtonAttributesInterface {
+export interface ButtonAttributesInterface {
   action?: ButtonActionType;
   attrs?: Record<string, string>;
   classes?: string[];
   text?: string;
 }
 
-export default ButtonAttributesInterface;
+export interface PageInterface {
+  getHTML(): HTMLDivElement;
+}