From 4693284b37ca3dd560c9ef1687e5a8a7b762bf78 Mon Sep 17 00:00:00 2001 From: Hafid Nur Date: Thu, 3 Apr 2025 13:59:27 +0700 Subject: [PATCH 1/8] docs: Update README --- README.md | 162 +++++++++++++++++++++++++++----------------------- docs/logo.svg | 9 +++ 2 files changed, 98 insertions(+), 73 deletions(-) create mode 100644 docs/logo.svg diff --git a/README.md b/README.md index 7d8118f..bb120d9 100644 --- a/README.md +++ b/README.md @@ -1,101 +1,117 @@ -# ImphnenFrontendService +# IMPHNEN Frontend Service - +

+ IMPHNEN +

-✨ Your new, shiny [Nx workspace](https://nx.dev) is ready ✨. +This repository is a **monorepo** for all frontend services of IMPHNEN. The monorepo includes three main applications: -[Learn more about this workspace setup and its capabilities](https://nx.dev/getting-started/tutorials/react-monorepo-tutorial?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) or run `npx nx graph` to visually explore what was created. Now, let's get you up to speed! +1. **Gacha** - Gacha feature https://gacha.imphnen.dev/ +2. **Backoffice** - Application for internal management. +3. **Dimentorin** - Application for mentoring services. -## Run tasks +## How to install -To run the dev server for your app, use: +1. Clone this repository: + ```sh + git clone https://github.com/IMPHNEN/imphnen-frontend-service.git + cd imphnen-frontend-service + ``` +2. Install all dependencies: + ```sh + npm install + ``` -```sh -npx nx serve dimentorin -``` +## How to run -To create a production bundle: +### Development -```sh -npx nx build dimentorin -``` +Use the following commands to run in development mode: -To see all available targets to run for a project, run: +- **Gacha**: + ```sh + npm run gacha:dev + ``` +- **Backoffice**: + ```sh + npm run backoffice:dev + ``` +- **Dimentorin**: + ```sh + npm run dimentorin:dev + ``` -```sh -npx nx show project dimentorin -``` +### Build -These targets are either [inferred automatically](https://nx.dev/concepts/inferred-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) or defined in the `project.json` or `package.json` files. +Use the following commands to build the applications: -[More about running tasks in the docs »](https://nx.dev/features/run-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) +- **Gacha**: + ```sh + npm run gacha:build + ``` +- **Backoffice**: + ```sh + npm run backoffice:build + ``` +- **Dimentorin**: + ```sh + npm run dimentorin:build + ``` -## Add new projects +### Production -While you could add new projects to your workspace manually, you might want to leverage [Nx plugins](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) and their [code generation](https://nx.dev/features/generate-code?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) feature. +Use the following commands to run the applications in production mode: -Use the plugin's generator to create new projects. +- **Gacha**: + ```sh + npm run gacha:prod + ``` +- **Backoffice**: + ```sh + npm run backoffice:prod + ``` +- **Dimentorin**: + ```sh + npm run dimentorin:prod + ``` -To generate a new application, use: +### Storybook -```sh -npx nx g @nx/react:app demo -``` +This repository uses Storybook to develop, test, and document UI components in an isolated and interactive environment. Below are the commands to work with Storybook: -To generate a new library, use: +- **Run Storybook** + + This command starts Storybook in development mode, allowing you to view and test UI components interactively. -```sh -npx nx g @nx/react:lib mylib -``` + ```sh + npm run ui:storybook + ``` + -You can use `npx nx list` to get a list of installed plugins. Then, run `npx nx list ` to learn about more specific capabilities of a particular plugin. Alternatively, [install Nx Console](https://nx.dev/getting-started/editor-setup?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) to browse plugins and generators in your IDE. +- **Run Unit Test** -[Learn more about Nx plugins »](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) | [Browse the plugin registry »](https://nx.dev/plugin-registry?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) + This command runs unit tests for the UI components to ensure they function as expected. -## Set up CI! + ```sh + npm run ui:test + ``` -### Step 1 +- **Build Components** -To connect to Nx Cloud, run the following command: + This command generates a static build of Storybook, which can be deployment for sharing and documentation purposes. -```sh -npx nx connect -``` + ```sh + npm run ui:build + ``` -Connecting to Nx Cloud ensures a [fast and scalable CI](https://nx.dev/ci/intro/why-nx-cloud?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) pipeline. It includes features such as: +## How to contribute -- [Remote caching](https://nx.dev/ci/features/remote-cache?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) -- [Task distribution across multiple machines](https://nx.dev/ci/features/distribute-task-execution?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) -- [Automated e2e test splitting](https://nx.dev/ci/features/split-e2e-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) -- [Task flakiness detection and rerunning](https://nx.dev/ci/features/flaky-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) +1. Fork the repository and clone it locally. +2. Create a new branch for new feature or fix: + ```sh + git checkout -b feat/nama-fitur + ``` +3. Make changes, commit, and push to your forked repository. +4. Create a pull request to this repository `develop` branch. -### Step 2 - -Use the following command to configure a CI workflow for your workspace: - -```sh -npx nx g ci-workflow -``` - -[Learn more about Nx on CI](https://nx.dev/ci/intro/ci-with-nx#ready-get-started-with-your-provider?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) - -## Install Nx Console - -Nx Console is an editor extension that enriches your developer experience. It lets you run tasks, generate code, and improves code autocompletion in your IDE. It is available for VSCode and IntelliJ. - -[Install Nx Console »](https://nx.dev/getting-started/editor-setup?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) - -## Useful links - -Learn more: - -- [Learn more about this workspace setup](https://nx.dev/getting-started/tutorials/react-monorepo-tutorial?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) -- [Learn about Nx on CI](https://nx.dev/ci/intro/ci-with-nx?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) -- [Releasing Packages with Nx release](https://nx.dev/features/manage-releases?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) -- [What are Nx plugins?](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) - -And join the Nx community: -- [Discord](https://go.nx.dev/community) -- [Follow us on X](https://twitter.com/nxdevtools) or [LinkedIn](https://www.linkedin.com/company/nrwl) -- [Our Youtube channel](https://www.youtube.com/@nxdevtools) -- [Our blog](https://nx.dev/blog?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) +If you encounter any issues or problems, feel free to create a new Issue. diff --git a/docs/logo.svg b/docs/logo.svg new file mode 100644 index 0000000..ca0f36e --- /dev/null +++ b/docs/logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + From 3a950ea867902b1d90cd6a0ee854ba1203b2e911 Mon Sep 17 00:00:00 2001 From: Hafid Nur Date: Thu, 3 Apr 2025 14:01:14 +0700 Subject: [PATCH 2/8] docs: align center logo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index bb120d9..b0d9f58 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # IMPHNEN Frontend Service -

+

IMPHNEN

From 0a846b05122c9d3131ae1aabffd081f53350d399 Mon Sep 17 00:00:00 2001 From: Hafid Nur Date: Thu, 3 Apr 2025 14:03:38 +0700 Subject: [PATCH 3/8] docs: fix --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index b0d9f58..fcbae9b 100644 --- a/README.md +++ b/README.md @@ -2,11 +2,11 @@

IMPHNEN -

+

This repository is a **monorepo** for all frontend services of IMPHNEN. The monorepo includes three main applications: -1. **Gacha** - Gacha feature https://gacha.imphnen.dev/ +1. **Gacha** - Gacha feature https://gacha.imphnen.dev/ 2. **Backoffice** - Application for internal management. 3. **Dimentorin** - Application for mentoring services. @@ -98,7 +98,7 @@ This repository uses Storybook to develop, test, and document UI components in a - **Build Components** - This command generates a static build of Storybook, which can be deployment for sharing and documentation purposes. + This command generates a static build of Storybook, which can be deployed for sharing and documentation purposes. ```sh npm run ui:build @@ -107,7 +107,7 @@ This repository uses Storybook to develop, test, and document UI components in a ## How to contribute 1. Fork the repository and clone it locally. -2. Create a new branch for new feature or fix: +2. Create a new branch for a new feature or fix: ```sh git checkout -b feat/nama-fitur ``` From b5428d85528986251f726639df5ea4826d3715ae Mon Sep 17 00:00:00 2001 From: Hafid Nur <73023445+hafidnrzs@users.noreply.github.com> Date: Thu, 3 Apr 2025 14:15:52 +0700 Subject: [PATCH 4/8] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index fcbae9b..a924890 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ This repository is a **monorepo** for all frontend services of IMPHNEN. The monorepo includes three main applications: -1. **Gacha** - Gacha feature https://gacha.imphnen.dev/ +1. **Gacha** - Application for gacha website. 2. **Backoffice** - Application for internal management. 3. **Dimentorin** - Application for mentoring services. @@ -109,7 +109,7 @@ This repository uses Storybook to develop, test, and document UI components in a 1. Fork the repository and clone it locally. 2. Create a new branch for a new feature or fix: ```sh - git checkout -b feat/nama-fitur + git checkout -b feat/feature-name ``` 3. Make changes, commit, and push to your forked repository. 4. Create a pull request to this repository `develop` branch. From 6b959a2f2234def95e0a0dc3196fd842ba07df49 Mon Sep 17 00:00:00 2001 From: egagofur Date: Thu, 3 Apr 2025 19:39:53 +0700 Subject: [PATCH 5/8] feat: change from dummy button to navbar button --- .../app/_components/form/modal-form-login.tsx | 12 ++++---- apps/gacha/src/app/layout.tsx | 16 ++++++----- apps/gacha/src/app/page.tsx | 16 ++--------- libs/ui/src/organisms/navbar/navbar.tsx | 13 +++++---- libs/utils/src/hooks/index.ts | 1 + libs/utils/src/hooks/use-modal-login.tsx | 28 +++++++++++++++++++ 6 files changed, 55 insertions(+), 31 deletions(-) create mode 100644 libs/utils/src/hooks/use-modal-login.tsx diff --git a/apps/gacha/src/app/_components/form/modal-form-login.tsx b/apps/gacha/src/app/_components/form/modal-form-login.tsx index fdb4e65..3b2c6e8 100644 --- a/apps/gacha/src/app/_components/form/modal-form-login.tsx +++ b/apps/gacha/src/app/_components/form/modal-form-login.tsx @@ -1,19 +1,20 @@ import { Button } from '@imphnen-frontend-service/ui/atoms'; import { Modal } from '@imphnen-frontend-service/ui/molecules'; import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms'; -import { Link } from 'react-router-dom'; import { useLogin } from '../../_hooks/use-login'; interface IModalFormLogin { isOpen: boolean; onClose: () => void; onForgotPassword: () => void; + setIsOpenRegisterModal: (value: boolean) => void; } const ModalFormLogin = ({ isOpen, onClose, onForgotPassword, + setIsOpenRegisterModal, }: IModalFormLogin) => { const { form, onSubmit } = useLogin(); @@ -59,12 +60,13 @@ const ModalFormLogin = ({

Belum punya akun?

- setIsOpenRegisterModal(true)} > Daftar - +
diff --git a/apps/gacha/src/app/layout.tsx b/apps/gacha/src/app/layout.tsx index 7428943..2b27454 100644 --- a/apps/gacha/src/app/layout.tsx +++ b/apps/gacha/src/app/layout.tsx @@ -1,14 +1,16 @@ -import { FC, ReactElement } from 'react'; -import { Outlet } from 'react-router-dom'; import { Navbar } from '@imphnen-frontend-service/ui/organisms'; +import { Outlet } from 'react-router-dom'; +import { FC, ReactElement } from 'react'; +import { ModalLoginProvider } from '@imphnen-frontend-service/utils'; export const AppLayout: FC = (): ReactElement => { return ( -
- - -
+ +
+ + +
+ ); }; - export default AppLayout; diff --git a/apps/gacha/src/app/page.tsx b/apps/gacha/src/app/page.tsx index c693317..c9cf71d 100644 --- a/apps/gacha/src/app/page.tsx +++ b/apps/gacha/src/app/page.tsx @@ -5,10 +5,11 @@ import ModalFormForgotPassword from './_components/form/modal-form-forgot-passwo import ModalFormLogin from './_components/form/modal-form-login'; import ModalFormRegister from './_components/form/modal-form-register'; import { GachaItem } from './_components/item/gacha-item'; +import { useModalLogin } from '@imphnen-frontend-service/utils'; export const Components: FC = (): ReactElement => { + const { showModalLogin, setShowModalLogin } = useModalLogin(); const [showModalForgotPassword, setShowModalForgotPassword] = useState(false); - const [showModalLogin, setShowModalLogin] = useState(false); const [showModalRegister, setShowModalRegister] = useState(false); const scrollToRoulette = () => { @@ -176,18 +177,6 @@ export const Components: FC = (): ReactElement => { Spin Now - -
- - - -
@@ -195,6 +184,7 @@ export const Components: FC = (): ReactElement => { isOpen={showModalLogin} onClose={() => setShowModalLogin(false)} onForgotPassword={handleForgotPasswordClick} + setIsOpenRegisterModal={setShowModalRegister} key="login" /> diff --git a/libs/ui/src/organisms/navbar/navbar.tsx b/libs/ui/src/organisms/navbar/navbar.tsx index e675d3c..00a0e24 100644 --- a/libs/ui/src/organisms/navbar/navbar.tsx +++ b/libs/ui/src/organisms/navbar/navbar.tsx @@ -2,11 +2,12 @@ import { MenuOutlined } from '@ant-design/icons'; import { FC, ReactElement, useState } from 'react'; import { Link } from 'react-router-dom'; import { Button } from '../../atoms/button'; -import { useSession } from '@imphnen-frontend-service/utils'; +import { useModalLogin, useSession } from '@imphnen-frontend-service/utils'; export const Navbar: FC = (): ReactElement => { const { session, signOut, isAuthenticated } = useSession(); const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const { setShowModalLogin } = useModalLogin(); return (
@@ -44,7 +45,7 @@ export const Navbar: FC = (): ReactElement => { {!isAuthenticated ? (
  • - +
    • ) : (
  • @@ -88,12 +89,12 @@ export const Navbar: FC = (): ReactElement => {
    • {!isAuthenticated ? (
  • - setShowModalLogin(true)} + className="block w-full text-gray-100 transition-colors px-4 py-2 text-center font-semibold" > Login - +
    • ) : (
  • {session.user?.fullname}
    • diff --git a/libs/utils/src/hooks/index.ts b/libs/utils/src/hooks/index.ts index 2279469..6b7067f 100644 --- a/libs/utils/src/hooks/index.ts +++ b/libs/utils/src/hooks/index.ts @@ -1,2 +1,3 @@ export * from './use-query-state'; export * from './use-session'; +export * from './use-modal-login'; diff --git a/libs/utils/src/hooks/use-modal-login.tsx b/libs/utils/src/hooks/use-modal-login.tsx new file mode 100644 index 0000000..181ed57 --- /dev/null +++ b/libs/utils/src/hooks/use-modal-login.tsx @@ -0,0 +1,28 @@ +import { createContext, ReactNode, useContext, useState } from 'react'; + +interface ModalLoginContextType { + showModalLogin: boolean; + setShowModalLogin: (value: boolean) => void; +} + +const ModalLoginContext = createContext( + undefined +); + +export const ModalLoginProvider = ({ children }: { children: ReactNode }) => { + const [showModalLogin, setShowModalLogin] = useState(false); + + return ( + + {children} + + ); +}; + +export const useModalLogin = () => { + const context = useContext(ModalLoginContext); + if (!context) { + throw new Error('useModalLogin must be used within an ModalLoginProvider'); + } + return context; +}; From 6bad504d442aa030a95485609674976ec8d77d29 Mon Sep 17 00:00:00 2001 From: egagofur Date: Thu, 3 Apr 2025 19:40:04 +0700 Subject: [PATCH 6/8] feat: change wording validation --- libs/service/src/schemas/auth/index.ts | 16 ++++++++++++---- .../ui/src/molecules/input-field/input-field.tsx | 2 +- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/libs/service/src/schemas/auth/index.ts b/libs/service/src/schemas/auth/index.ts index 4da256e..9a61758 100644 --- a/libs/service/src/schemas/auth/index.ts +++ b/libs/service/src/schemas/auth/index.ts @@ -2,8 +2,16 @@ import { z } from 'zod'; export const authLoginSchema = z.object({ email: z - .string() - .min(1, 'Email cannot be empty') - .email('Email must be valid'), - password: z.string().min(1, 'Password cannot be empty'), + .string({ + required_error: 'Email tidak boleh kosong', + invalid_type_error: 'Email harus berupa string', + }) + .min(1, 'Email tidak boleh kosong') + .email('Email harus valid'), + password: z + .string({ + required_error: 'Password tidak boleh kosong', + invalid_type_error: 'Password harus berupa string', + }) + .min(1, 'Password tidak boleh kosong'), }); diff --git a/libs/ui/src/molecules/input-field/input-field.tsx b/libs/ui/src/molecules/input-field/input-field.tsx index 0db7b16..f07eef6 100644 --- a/libs/ui/src/molecules/input-field/input-field.tsx +++ b/libs/ui/src/molecules/input-field/input-field.tsx @@ -75,7 +75,7 @@ export const InputField: FC = ({ {...rest} /> {error ? ( -

    {error}

    +

    {error}

    ) : ( helperText && (

    From 9777b7bea92810830ca40f8493c9c40843ac5d35 Mon Sep 17 00:00:00 2001 From: egagofur Date: Thu, 3 Apr 2025 19:40:19 +0700 Subject: [PATCH 7/8] feat: add toast library --- package-lock.json | 11 +++++++++++ package.json | 1 + 2 files changed, 12 insertions(+) diff --git a/package-lock.json b/package-lock.json index 9269853..9958fd6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "react-dom": "^19.0.0", "react-hook-form": "^7.55.0", "react-router-dom": "^7.3.0", + "sonner": "^2.0.3", "tailwind-merge": "^3.0.2", "zod": "^3.24.2" }, @@ -24244,6 +24245,16 @@ "atomic-sleep": "^1.0.0" } }, + "node_modules/sonner": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.3.tgz", + "integrity": "sha512-njQ4Hht92m0sMqqHVDL32V2Oun9W1+PHO9NDv9FHfJjT3JT22IG4Jpo3FPQy+mouRKCXFWO+r67v6MrHX2zeIA==", + "license": "MIT", + "peerDependencies": { + "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc", + "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc" + } + }, "node_modules/sort-keys": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz", diff --git a/package.json b/package.json index 3be05e4..a3188c4 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "react-dom": "^19.0.0", "react-hook-form": "^7.55.0", "react-router-dom": "^7.3.0", + "sonner": "^2.0.3", "tailwind-merge": "^3.0.2", "zod": "^3.24.2" }, From 280afd68abd83c3fdddc8ee19f672637bb5b836f Mon Sep 17 00:00:00 2001 From: egagofur Date: Thu, 3 Apr 2025 19:51:31 +0700 Subject: [PATCH 8/8] fix: template github --- .github/{PULL_REQUEST_TEMPLATE => }/pull_request_template.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename .github/{PULL_REQUEST_TEMPLATE => }/pull_request_template.md (100%) diff --git a/.github/PULL_REQUEST_TEMPLATE/pull_request_template.md b/.github/pull_request_template.md similarity index 100% rename from .github/PULL_REQUEST_TEMPLATE/pull_request_template.md rename to .github/pull_request_template.md