From 38f0d0a596ac485aa391077c691259e3de202628 Mon Sep 17 00:00:00 2001 From: Behnamrhp74 Date: Sat, 8 Mar 2025 21:04:46 +0300 Subject: [PATCH 1/3] refactor: Change name of i18n and its usage in server --- src/bootstrap/i18n/i18n.ts | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/bootstrap/i18n/i18n.ts b/src/bootstrap/i18n/i18n.ts index 9e376a9..1b90c86 100644 --- a/src/bootstrap/i18n/i18n.ts +++ b/src/bootstrap/i18n/i18n.ts @@ -10,7 +10,7 @@ export enum LANGS { RU = "ru", } -export const initI18next = async (params: { +export const getI18n = async (params: { lng: LANGS; resources?: Resource; ns?: string; @@ -43,13 +43,9 @@ export async function getServerTranslation( ns?: string, options: { keyPrefix?: string } = {}, ) { - await initI18next({ lng }); + const { i18n } = await getI18n({ lng }); return { - t: i18nInstance.getFixedT( - lng, - Array.isArray(ns) ? ns[0] : ns, - options?.keyPrefix, - ), + t: i18n.getFixedT(lng, Array.isArray(ns) ? ns[0] : ns, options?.keyPrefix), i18n: i18nInstance, }; } From 7d9a6e77bd3d47f4551c63ae5b7bc7d6bb7a2d6d Mon Sep 17 00:00:00 2001 From: Behnamrhp74 Date: Sat, 8 Mar 2025 21:54:24 +0300 Subject: [PATCH 2/3] refactor: Change name of files and add some comments for them --- .../create-random-invoice.tsx | 3 +++ .../{nav-link-vm.ts => nav-link.personal-vm.ts} | 13 +++++++++++-- .../components/client/nav-links/nav-links.tsx | 2 +- .../client/theme-provider/theme-provider.tsx | 10 ++++++---- .../{card-controller.ts => card.controller.ts} | 3 +++ .../dashboard/components/server/card/card.tsx | 2 +- .../{cards-controller.ts => cards.controller.ts} | 5 ++++- .../dashboard/components/server/cards/cards.tsx | 2 +- ...ntroller.ts => latest-invoices.controller.ts} | 5 ++++- .../server/latest-invoices/latest-invoices.tsx | 2 +- ...controller.ts => revenue-chart.controller.ts} | 7 +++++-- .../server/revenue-chart/revenue-chart.tsx | 2 +- src/app/[lang]/dashboard/layout.tsx | 2 +- ...ard-app-module.ts => dashboard.app-module.ts} | 5 ++++- .../vm/create-random-invoice-button-vm.ts | 11 ++++++++--- src/app/[lang]/layout.tsx | 4 ++-- src/app/components/button/button-vm.ts | 7 ------- src/app/components/button/button.i-vm.ts | 11 +++++++++++ src/app/components/button/button.tsx | 2 +- .../components/button/stories/Button.stories.tsx | 2 +- src/bootstrap/helpers/global-helpers.ts | 3 +++ src/bootstrap/helpers/lib/ui-utils.ts | 4 ++++ src/bootstrap/helpers/view/base-view.tsx | 5 +++++ .../helpers/view/storybook-with-arg-vm.ts | 7 +++++++ src/bootstrap/helpers/vm/base-vm.ts | 6 ++++++ src/bootstrap/helpers/vm/i-base-vm.ts | 3 +++ src/bootstrap/i18n/dictionaries/lang-key.ts | 5 +++++ src/bootstrap/i18n/i18n-provider.tsx | 4 ++-- src/feature/common/data/api-task.ts | 2 +- .../{base-failure.ts => base.failure.ts} | 10 ++++++++-- ...arguments-failure.ts => arguments.failure.ts} | 2 +- .../common/failures/dev/base-dev-failure.ts | 5 ----- .../common/failures/dev/base-dev.failure.ts | 10 ++++++++++ ...pendency-failure.ts => dependency.failure.ts} | 4 ++-- src/feature/common/failures/failure-helpers.ts | 2 +- .../{network-failure.ts => network.failure.ts} | 2 +- .../{params-failure.ts => params.failure.ts} | 4 ++-- .../common/{server-di.ts => server.di.ts} | 16 ++++++++-------- ...omer-invoice-di.ts => customer-invoice.di.ts} | 4 ++-- ...ce-db-repo.ts => customer-invoice-db.repo.ts} | 6 +++--- ...mer-invoice.ts => customer-invoice.entity.ts} | 0 ...-invoice-repo.ts => customer-invoice.repo.ts} | 2 +- ...ase.ts => fetch-customer-invoices.usecase.ts} | 8 ++++---- ...voice-module-key.ts => invoice.module-key.ts} | 0 .../core/customer/data/repo/customer-db-repo.ts | 2 +- .../usecase/fetch-customers-amount-usecase.ts | 2 +- .../domain/usecase/fetch-customers-usecase.ts | 2 +- .../data/module/{invoice-di.ts => invoice.di.ts} | 4 ++-- .../{invoice-db-repo.ts => invoice-db.repo.ts} | 8 ++++---- .../{invoice-repo.ts => invoice.i-repo.ts} | 4 ++-- .../param/{invoice-param.ts => invoice.param.ts} | 0 ...oice-usecase.ts => create-invoice.usecase.ts} | 10 +++++----- ...e.ts => fetch-all-invoices-amount.usecase.ts} | 6 +++--- ... => fetch-invoices-status-summary.usecase.ts} | 8 ++++---- ...-status.ts => invoice-status.value-object.ts} | 0 ...voice-module-key.ts => invoice.module-key.ts} | 0 .../data/module/{revenue-di.ts => revenue.di.ts} | 4 ++-- .../{revenue-db-repo.ts => revenue-db.repo.ts} | 4 ++-- .../entity/{revenue.ts => revenue.entity.ts} | 0 .../{revenue-repo.ts => revenue.i-repo.ts} | 2 +- ...venue-module-key.ts => revenue.module-key.ts} | 0 ...nues-usecase.ts => fetch-revenues.usecase.ts} | 8 ++++---- .../{summary-info-di.ts => summary-info.di.ts} | 4 ++-- ...-module-key.ts => summary-info.module-key.ts} | 0 ...-usecase.ts => fetch-summary-info.usecase.ts} | 10 +++++----- ...mary-info.ts => summary-info.value-object.ts} | 2 +- ...-fake-factory.ts => customer.fake-factory.ts} | 0 src/test/common/mock/mock-di.ts | 5 ++++- src/test/common/mock/mock-factory.ts | 3 +++ ...e.test.ts => fetch-customers.usecase.test.ts} | 2 +- 70 files changed, 196 insertions(+), 108 deletions(-) rename src/app/[lang]/dashboard/components/client/nav-links/{nav-link-vm.ts => nav-link.personal-vm.ts} (65%) rename src/app/[lang]/dashboard/components/server/card/{card-controller.ts => card.controller.ts} (84%) rename src/app/[lang]/dashboard/components/server/cards/{cards-controller.ts => cards.controller.ts} (62%) rename src/app/[lang]/dashboard/components/server/latest-invoices/{latest-invoices-controller.ts => latest-invoices.controller.ts} (61%) rename src/app/[lang]/dashboard/components/server/revenue-chart/{revenue-chart-controller.ts => revenue-chart.controller.ts} (87%) rename src/app/[lang]/dashboard/module/{dashboard-app-module.ts => dashboard.app-module.ts} (81%) delete mode 100644 src/app/components/button/button-vm.ts create mode 100644 src/app/components/button/button.i-vm.ts rename src/feature/common/failures/{base-failure.ts => base.failure.ts} (60%) rename src/feature/common/failures/dev/{arguments-failure.ts => arguments.failure.ts} (97%) delete mode 100644 src/feature/common/failures/dev/base-dev-failure.ts create mode 100644 src/feature/common/failures/dev/base-dev.failure.ts rename src/feature/common/failures/dev/{dependency-failure.ts => dependency.failure.ts} (76%) rename src/feature/common/failures/{network-failure.ts => network.failure.ts} (90%) rename src/feature/common/failures/{params-failure.ts => params.failure.ts} (72%) rename src/feature/common/{server-di.ts => server.di.ts} (87%) rename src/feature/core/customer-invoice/data/module/{customer-invoice-di.ts => customer-invoice.di.ts} (83%) rename src/feature/core/customer-invoice/data/repo/{customer-invoice-db-repo.ts => customer-invoice-db.repo.ts} (93%) rename src/feature/core/customer-invoice/domain/entity/{customer-invoice.ts => customer-invoice.entity.ts} (100%) rename src/feature/core/customer-invoice/domain/i-repo/{customer-invoice-repo.ts => customer-invoice.repo.ts} (88%) rename src/feature/core/customer-invoice/domain/usecase/{fetch-customer-invoices-usecase.ts => fetch-customer-invoices.usecase.ts} (81%) rename src/feature/core/customer-invoice/{invoice-module-key.ts => invoice.module-key.ts} (100%) rename src/feature/core/invoice/data/module/{invoice-di.ts => invoice.di.ts} (91%) rename src/feature/core/invoice/data/repo/{invoice-db-repo.ts => invoice-db.repo.ts} (94%) rename src/feature/core/invoice/domain/i-repo/{invoice-repo.ts => invoice.i-repo.ts} (87%) rename src/feature/core/invoice/domain/param/{invoice-param.ts => invoice.param.ts} (100%) rename src/feature/core/invoice/domain/usecase/{create-invoice-usecase.ts => create-invoice.usecase.ts} (78%) rename src/feature/core/invoice/domain/usecase/{fetch-all-invoices-amount-usecase.ts => fetch-all-invoices-amount.usecase.ts} (71%) rename src/feature/core/invoice/domain/usecase/{fetch-invoices-status-summary.ts => fetch-invoices-status-summary.usecase.ts} (70%) rename src/feature/core/invoice/domain/value-object/{invoice-status.ts => invoice-status.value-object.ts} (100%) rename src/feature/core/invoice/{invoice-module-key.ts => invoice.module-key.ts} (100%) rename src/feature/core/revenue/data/module/{revenue-di.ts => revenue.di.ts} (90%) rename src/feature/core/revenue/data/repo/{revenue-db-repo.ts => revenue-db.repo.ts} (97%) rename src/feature/core/revenue/domain/entity/{revenue.ts => revenue.entity.ts} (100%) rename src/feature/core/revenue/domain/i-repo/{revenue-repo.ts => revenue.i-repo.ts} (94%) rename src/feature/core/revenue/domain/{revenue-module-key.ts => revenue.module-key.ts} (100%) rename src/feature/core/revenue/domain/usecase/{fetch-revenues-usecase.ts => fetch-revenues.usecase.ts} (72%) rename src/feature/core/summary-info/data/module/{summary-info-di.ts => summary-info.di.ts} (87%) rename src/feature/core/summary-info/domain/{summary-info-module-key.ts => summary-info.module-key.ts} (100%) rename src/feature/core/summary-info/domain/usecase/{fetch-summary-info-usecase.ts => fetch-summary-info.usecase.ts} (85%) rename src/feature/core/summary-info/domain/value-object/{summary-info.ts => summary-info.value-object.ts} (90%) rename src/test/common/fake-factory/customer/{customer-fake-factory.ts => customer.fake-factory.ts} (100%) rename src/test/unit/feature/customer/domain/usecase/{fetch-customers-usecase.test.ts => fetch-customers.usecase.test.ts} (98%) diff --git a/src/app/[lang]/dashboard/components/client/create-random-invoice/create-random-invoice.tsx b/src/app/[lang]/dashboard/components/client/create-random-invoice/create-random-invoice.tsx index 68742c2..8db5bf3 100644 --- a/src/app/[lang]/dashboard/components/client/create-random-invoice/create-random-invoice.tsx +++ b/src/app/[lang]/dashboard/components/client/create-random-invoice/create-random-invoice.tsx @@ -5,6 +5,9 @@ import CreateRandomInvoiceButtonVM from "@/app/[lang]/dashboard/vm/create-random import { useDI } from "@/bootstrap/di/di-context"; import { useRef } from "react"; +/** + * From a parent component Vm and view will be connected together. + */ export default function CreateRandomInvoiceContainer() { const di = useDI(); const vm = useRef(di.resolve(CreateRandomInvoiceButtonVM)); diff --git a/src/app/[lang]/dashboard/components/client/nav-links/nav-link-vm.ts b/src/app/[lang]/dashboard/components/client/nav-links/nav-link.personal-vm.ts similarity index 65% rename from src/app/[lang]/dashboard/components/client/nav-links/nav-link-vm.ts rename to src/app/[lang]/dashboard/components/client/nav-links/nav-link.personal-vm.ts index bdf58b2..9ddf695 100644 --- a/src/app/[lang]/dashboard/components/client/nav-links/nav-link-vm.ts +++ b/src/app/[lang]/dashboard/components/client/nav-links/nav-link.personal-vm.ts @@ -2,17 +2,26 @@ import { DocumentIcon } from "@/app/components/icons/document"; import HomeIcon from "@/app/components/icons/home"; import { UserIcon } from "@/app/components/icons/user"; import { usePathname } from "next/navigation"; +import { useRef } from "react"; type LinkItem = { name: string; href: string; icon: (props: { className?: string }) => JSX.Element; }; + +/** + * Beside of reusable vm each View can have it's own personal vm to handle it's ownlogics. + * Difference between personal vm and other vms which extends BaseVM, is that + * personal vm directly will be called inside of view and instinctly connected to the view, + * so they come together always and there is no need to be connected with interface for reusable + * vms. + */ export default function navLinkPersonalVM() { const pathname = usePathname(); // Map of links to display in the side navigation. // Depending on the size of the application, this would be stored in a database. - const links: LinkItem[] = [ + const links = useRef([ { name: "Home", href: "/dashboard", icon: HomeIcon }, { name: "Invoices", @@ -20,7 +29,7 @@ export default function navLinkPersonalVM() { icon: DocumentIcon, }, { name: "Customers", href: "/dashboard/customers", icon: UserIcon }, - ]; + ]).current; return { links, isLinkActive: (link: LinkItem) => pathname === link.href, diff --git a/src/app/[lang]/dashboard/components/client/nav-links/nav-links.tsx b/src/app/[lang]/dashboard/components/client/nav-links/nav-links.tsx index edb724c..8c2f587 100644 --- a/src/app/[lang]/dashboard/components/client/nav-links/nav-links.tsx +++ b/src/app/[lang]/dashboard/components/client/nav-links/nav-links.tsx @@ -1,6 +1,6 @@ "use client"; -import navLinkPersonalVM from "@/app/[lang]/dashboard/components/client/nav-links/nav-link-vm"; +import navLinkPersonalVM from "@/app/[lang]/dashboard/components/client/nav-links/nav-link.personal-vm"; import clsx from "clsx"; import Link from "next/link"; diff --git a/src/app/[lang]/dashboard/components/client/theme-provider/theme-provider.tsx b/src/app/[lang]/dashboard/components/client/theme-provider/theme-provider.tsx index 6a1ffe4..65b6bf4 100644 --- a/src/app/[lang]/dashboard/components/client/theme-provider/theme-provider.tsx +++ b/src/app/[lang]/dashboard/components/client/theme-provider/theme-provider.tsx @@ -1,11 +1,13 @@ -"use client" +/* eslint-disable react/jsx-props-no-spreading */ -import * as React from "react" -import { ThemeProvider as NextThemesProvider } from "next-themes" +"use client"; + +import * as React from "react"; +import { ThemeProvider as NextThemesProvider } from "next-themes"; export function ThemeProvider({ children, ...props }: React.ComponentProps) { - return {children} + return {children}; } diff --git a/src/app/[lang]/dashboard/components/server/card/card-controller.ts b/src/app/[lang]/dashboard/components/server/card/card.controller.ts similarity index 84% rename from src/app/[lang]/dashboard/components/server/card/card-controller.ts rename to src/app/[lang]/dashboard/components/server/card/card.controller.ts index 5f28e88..ddab125 100644 --- a/src/app/[lang]/dashboard/components/server/card/card-controller.ts +++ b/src/app/[lang]/dashboard/components/server/card/card.controller.ts @@ -5,6 +5,9 @@ import { InboxIcon, } from "@heroicons/react/24/outline"; +/** + * Controllers are bridge between feature layer and application layer. + */ export default function cardController(props: { type: "invoices" | "customers" | "pending" | "collected"; }) { diff --git a/src/app/[lang]/dashboard/components/server/card/card.tsx b/src/app/[lang]/dashboard/components/server/card/card.tsx index 0bb192a..9cf258b 100644 --- a/src/app/[lang]/dashboard/components/server/card/card.tsx +++ b/src/app/[lang]/dashboard/components/server/card/card.tsx @@ -1,4 +1,4 @@ -import cardController from "@/app/[lang]/dashboard/components/server/card/card-controller"; +import cardController from "@/app/[lang]/dashboard/components/server/card/card.controller"; export function Card({ title, diff --git a/src/app/[lang]/dashboard/components/server/cards/cards-controller.ts b/src/app/[lang]/dashboard/components/server/cards/cards.controller.ts similarity index 62% rename from src/app/[lang]/dashboard/components/server/cards/cards-controller.ts rename to src/app/[lang]/dashboard/components/server/cards/cards.controller.ts index 9d38e29..a439eb8 100644 --- a/src/app/[lang]/dashboard/components/server/cards/cards-controller.ts +++ b/src/app/[lang]/dashboard/components/server/cards/cards.controller.ts @@ -1,6 +1,9 @@ -import fetchSummaryInfoUsecase from "@/feature/core/summary-info/domain/usecase/fetch-summary-info-usecase"; +import fetchSummaryInfoUsecase from "@/feature/core/summary-info/domain/usecase/fetch-summary-info.usecase"; import { connection } from "next/server"; +/** + * Controllers are bridge between feature layer and application layer. + */ export default function cardsController() { connection(); return fetchSummaryInfoUsecase(); diff --git a/src/app/[lang]/dashboard/components/server/cards/cards.tsx b/src/app/[lang]/dashboard/components/server/cards/cards.tsx index 91c641d..438c297 100644 --- a/src/app/[lang]/dashboard/components/server/cards/cards.tsx +++ b/src/app/[lang]/dashboard/components/server/cards/cards.tsx @@ -1,5 +1,5 @@ import { Card } from "@/app/[lang]/dashboard/components/server/card/card"; -import cardsController from "@/app/[lang]/dashboard/components/server/cards/cards-controller"; +import cardsController from "@/app/[lang]/dashboard/components/server/cards/cards.controller"; export default async function CardWrapper() { const { customersNumber, invoicesNumber, invoicesSummary } = diff --git a/src/app/[lang]/dashboard/components/server/latest-invoices/latest-invoices-controller.ts b/src/app/[lang]/dashboard/components/server/latest-invoices/latest-invoices.controller.ts similarity index 61% rename from src/app/[lang]/dashboard/components/server/latest-invoices/latest-invoices-controller.ts rename to src/app/[lang]/dashboard/components/server/latest-invoices/latest-invoices.controller.ts index 2b7df56..b9b6a05 100644 --- a/src/app/[lang]/dashboard/components/server/latest-invoices/latest-invoices-controller.ts +++ b/src/app/[lang]/dashboard/components/server/latest-invoices/latest-invoices.controller.ts @@ -1,6 +1,9 @@ -import fetchCustomerInvoicesUsecase from "@/feature/core/customer-invoice/domain/usecase/fetch-customer-invoices-usecase"; +import fetchCustomerInvoicesUsecase from "@/feature/core/customer-invoice/domain/usecase/fetch-customer-invoices.usecase"; import { connection } from "next/server"; +/** + * Controllers are bridge between feature layer and application layer. + */ export default function latestInvoicesController() { connection(); return fetchCustomerInvoicesUsecase(); diff --git a/src/app/[lang]/dashboard/components/server/latest-invoices/latest-invoices.tsx b/src/app/[lang]/dashboard/components/server/latest-invoices/latest-invoices.tsx index e55a6e1..8afeae2 100644 --- a/src/app/[lang]/dashboard/components/server/latest-invoices/latest-invoices.tsx +++ b/src/app/[lang]/dashboard/components/server/latest-invoices/latest-invoices.tsx @@ -1,5 +1,5 @@ import CreateRandomInvoiceContainer from "@/app/[lang]/dashboard/components/client/create-random-invoice/create-random-invoice"; -import latestInvoicesController from "@/app/[lang]/dashboard/components/server/latest-invoices/latest-invoices-controller"; +import latestInvoicesController from "@/app/[lang]/dashboard/components/server/latest-invoices/latest-invoices.controller"; import { ArrowPathIcon } from "@heroicons/react/24/outline"; import clsx from "clsx"; import { isLeft } from "fp-ts/lib/Either"; diff --git a/src/app/[lang]/dashboard/components/server/revenue-chart/revenue-chart-controller.ts b/src/app/[lang]/dashboard/components/server/revenue-chart/revenue-chart.controller.ts similarity index 87% rename from src/app/[lang]/dashboard/components/server/revenue-chart/revenue-chart-controller.ts rename to src/app/[lang]/dashboard/components/server/revenue-chart/revenue-chart.controller.ts index 55c0797..2b811a1 100644 --- a/src/app/[lang]/dashboard/components/server/revenue-chart/revenue-chart-controller.ts +++ b/src/app/[lang]/dashboard/components/server/revenue-chart/revenue-chart.controller.ts @@ -1,6 +1,9 @@ -import Revenue from "@/feature/core/revenue/domain/entity/revenue"; -import fetchRevenuesUsecase from "@/feature/core/revenue/domain/usecase/fetch-revenues-usecase"; +import Revenue from "@/feature/core/revenue/domain/entity/revenue.entity"; +import fetchRevenuesUsecase from "@/feature/core/revenue/domain/usecase/fetch-revenues.usecase"; +/** + * Controllers are bridge between feature layer and application layer. + */ export default async function revenueChartController() { const revenue = await fetchRevenuesUsecase(); const chartHeight = 350; diff --git a/src/app/[lang]/dashboard/components/server/revenue-chart/revenue-chart.tsx b/src/app/[lang]/dashboard/components/server/revenue-chart/revenue-chart.tsx index e6bc5a0..2583c44 100644 --- a/src/app/[lang]/dashboard/components/server/revenue-chart/revenue-chart.tsx +++ b/src/app/[lang]/dashboard/components/server/revenue-chart/revenue-chart.tsx @@ -1,4 +1,4 @@ -import revenueChartController from "@/app/[lang]/dashboard/components/server/revenue-chart/revenue-chart-controller"; +import revenueChartController from "@/app/[lang]/dashboard/components/server/revenue-chart/revenue-chart.controller"; import { CalendarIcon } from "@heroicons/react/24/outline"; export default async function RevenueChart() { diff --git a/src/app/[lang]/dashboard/layout.tsx b/src/app/[lang]/dashboard/layout.tsx index 308e2a7..41a0efc 100644 --- a/src/app/[lang]/dashboard/layout.tsx +++ b/src/app/[lang]/dashboard/layout.tsx @@ -1,7 +1,7 @@ "use client"; import SideNav from "@/app/[lang]/dashboard/components/server/sidenav"; -import dashboardAppModule from "@/app/[lang]/dashboard/module/dashboard-app-module"; +import dashboardAppModule from "@/app/[lang]/dashboard/module/dashboard.app-module"; import { DiContext } from "@/bootstrap/di/di-context"; import { useRef } from "react"; diff --git a/src/app/[lang]/dashboard/module/dashboard-app-module.ts b/src/app/[lang]/dashboard/module/dashboard.app-module.ts similarity index 81% rename from src/app/[lang]/dashboard/module/dashboard-app-module.ts rename to src/app/[lang]/dashboard/module/dashboard.app-module.ts index 323a2f2..0f7e5e0 100644 --- a/src/app/[lang]/dashboard/module/dashboard-app-module.ts +++ b/src/app/[lang]/dashboard/module/dashboard.app-module.ts @@ -1,7 +1,10 @@ import CreateRandomInvoiceButtonVM from "@/app/[lang]/dashboard/vm/create-random-invoice-button-vm"; import di from "@/bootstrap/di/init-di"; -import createInvoiceUsecase from "@/feature/core/invoice/domain/usecase/create-invoice-usecase"; +import createInvoiceUsecase from "@/feature/core/invoice/domain/usecase/create-invoice.usecase"; +/** + * Each page can have its own di to connect all vms, usecases or controllers + */ export default function dashboardAppModule() { const dashboardDi = di.createChildContainer(); diff --git a/src/app/[lang]/dashboard/vm/create-random-invoice-button-vm.ts b/src/app/[lang]/dashboard/vm/create-random-invoice-button-vm.ts index 44abdcb..3ee3c1f 100644 --- a/src/app/[lang]/dashboard/vm/create-random-invoice-button-vm.ts +++ b/src/app/[lang]/dashboard/vm/create-random-invoice-button-vm.ts @@ -1,14 +1,19 @@ -import ButtonVm from "@/app/components/button/button-vm"; +import ButtonVm from "@/app/components/button/button.i-vm"; import { useServerAction } from "@/bootstrap/helpers/hooks/use-server-action"; import useThrottle from "@/bootstrap/helpers/hooks/use-throttle"; import BaseVM from "@/bootstrap/helpers/vm/base-vm"; import langKey from "@/bootstrap/i18n/dictionaries/lang-key"; -import { InvoiceParam } from "@/feature/core/invoice/domain/param/invoice-param"; -import createInvoiceUsecase from "@/feature/core/invoice/domain/usecase/create-invoice-usecase"; +import { InvoiceParam } from "@/feature/core/invoice/domain/param/invoice.param"; +import createInvoiceUsecase from "@/feature/core/invoice/domain/usecase/create-invoice.usecase"; import { faker } from "@faker-js/faker"; import { useRouter } from "next/navigation"; import { useTranslation } from "react-i18next"; +/** + * Viewmodel for the button view to connect to business logics and all UI logics + * For UI logics, all translations, states, sideeffects and events will be handled + * in this layer. + */ export default class CreateRandomInvoiceButtonVM extends BaseVM { private createInvoice: typeof createInvoiceUsecase; diff --git a/src/app/[lang]/layout.tsx b/src/app/[lang]/layout.tsx index 89037c1..fd59033 100644 --- a/src/app/[lang]/layout.tsx +++ b/src/app/[lang]/layout.tsx @@ -1,5 +1,5 @@ import { ThemeProvider } from "@/app/[lang]/dashboard/components/client/theme-provider/theme-provider"; -import { initI18next, LANGS } from "@/bootstrap/i18n/i18n"; +import { getI18n, LANGS } from "@/bootstrap/i18n/i18n"; import TranslationsProvider from "@/bootstrap/i18n/i18n-provider"; import localFont from "next/font/local"; import { PropsWithChildren } from "react"; @@ -20,7 +20,7 @@ export default async function layout( ) { const { params, children } = props; const { lang } = await params; - const { resources } = await initI18next({ lng: lang }); + const { resources } = await getI18n({ lng: lang }); return ( { return typeof fn === "function" && /^(class|function [A-Z])/.test(fn); diff --git a/src/bootstrap/helpers/lib/ui-utils.ts b/src/bootstrap/helpers/lib/ui-utils.ts index a5ef193..f8373a9 100644 --- a/src/bootstrap/helpers/lib/ui-utils.ts +++ b/src/bootstrap/helpers/lib/ui-utils.ts @@ -1,6 +1,10 @@ import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; +/** + * To connect tailwind classes. + * @param inputs Tailwind classes + */ export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } diff --git a/src/bootstrap/helpers/view/base-view.tsx b/src/bootstrap/helpers/view/base-view.tsx index b0d4f57..914c9fc 100644 --- a/src/bootstrap/helpers/view/base-view.tsx +++ b/src/bootstrap/helpers/view/base-view.tsx @@ -66,6 +66,11 @@ export type BuildProps< children?: ReactNode; }; +/** + * Base view is base component for all views in mvvm architecture which gets + * vm as props and connect it to the view and memoize the component by default + * to just render just on changes of its vm. + */ export default abstract class BaseView< IVM extends IVMParent, PROPS extends IPropParent = undefined, diff --git a/src/bootstrap/helpers/view/storybook-with-arg-vm.ts b/src/bootstrap/helpers/view/storybook-with-arg-vm.ts index 210e173..7a3387c 100644 --- a/src/bootstrap/helpers/view/storybook-with-arg-vm.ts +++ b/src/bootstrap/helpers/view/storybook-with-arg-vm.ts @@ -1,5 +1,12 @@ import IBaseVM from "@/bootstrap/helpers/vm/i-base-vm"; +/** + * To use with mvvm library to make a vm based on props so you can pass the result to the view + * @param vmObj All properties which view needs to get from vm. + * @returns Vm which is suitable to be passed to the view + * @example const vm = getArgVM(globalData.parsedProps.vm); + return