MythEclipse/imphnen-frontend-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: MythEclipse/imphnen-frontend-service:main
Branches Tags
MythEclipse/imphnen-frontend-service:DimentorinAuth MythEclipse/imphnen-frontend-service:feat/dimentorin-merge MythEclipse/imphnen-frontend-service:develop MythEclipse/imphnen-frontend-service:fix/qr-empty-state MythEclipse/imphnen-frontend-service:feat/qr-campaign MythEclipse/imphnen-frontend-service:hackathon/update MythEclipse/imphnen-frontend-service:backoffice/hackathon-teams-submission MythEclipse/imphnen-frontend-service:feat/certificate MythEclipse/imphnen-frontend-service:cert MythEclipse/imphnen-frontend-service:backoffice/for-hackathon MythEclipse/imphnen-frontend-service:hackathon/new-back-end MythEclipse/imphnen-frontend-service:hackathon/fix-ui MythEclipse/imphnen-frontend-service:fix/hackathon MythEclipse/imphnen-frontend-service:hackatons MythEclipse/imphnen-frontend-service:feat/backoffice-dimentorin MythEclipse/imphnen-frontend-service:redirect MythEclipse/imphnen-frontend-service:feat/dimentorin-landing-page MythEclipse/imphnen-frontend-service:feat/dimentorin-landing MythEclipse/imphnen-frontend-service:feat/landing-app MythEclipse/imphnen-frontend-service:feat/roadmap MythEclipse/imphnen-frontend-service:landing/auth MythEclipse/imphnen-frontend-service:refactor/remove-cms MythEclipse/imphnen-frontend-service:landing/reform MythEclipse/imphnen-frontend-service:hotfix/ui MythEclipse/imphnen-frontend-service:feat/landing-cms MythEclipse/imphnen-frontend-service:feat/editButtonTextColor MythEclipse/imphnen-frontend-service:feat/landing-migration MythEclipse/imphnen-frontend-service:fix/split-register-form-modal MythEclipse/imphnen-frontend-service:feat/register-integeration MythEclipse/imphnen-frontend-service:feat/handle-state-modal MythEclipse/imphnen-frontend-service:feat/register-form MythEclipse/imphnen-frontend-service:feat/forgot-password MythEclipse/imphnen-frontend-service:feat/modal-unit-test-and-storybook MythEclipse/imphnen-frontend-service:feat/gacha-modal-login MythEclipse/imphnen-frontend-service:ModalsGacha MythEclipse/imphnen-frontend-service:main
MythEclipse/imphnen-frontend-service:v0.1.0
..
pull from: MythEclipse/imphnen-frontend-service:ModalsGacha
Branches Tags
MythEclipse/imphnen-frontend-service:feat/dimentorin-merge MythEclipse/imphnen-frontend-service:develop MythEclipse/imphnen-frontend-service:fix/qr-empty-state MythEclipse/imphnen-frontend-service:feat/qr-campaign MythEclipse/imphnen-frontend-service:hackathon/update MythEclipse/imphnen-frontend-service:backoffice/hackathon-teams-submission MythEclipse/imphnen-frontend-service:feat/certificate MythEclipse/imphnen-frontend-service:cert MythEclipse/imphnen-frontend-service:backoffice/for-hackathon MythEclipse/imphnen-frontend-service:hackathon/new-back-end MythEclipse/imphnen-frontend-service:hackathon/fix-ui MythEclipse/imphnen-frontend-service:fix/hackathon MythEclipse/imphnen-frontend-service:hackatons MythEclipse/imphnen-frontend-service:feat/backoffice-dimentorin MythEclipse/imphnen-frontend-service:redirect MythEclipse/imphnen-frontend-service:feat/dimentorin-landing-page MythEclipse/imphnen-frontend-service:DimentorinAuth MythEclipse/imphnen-frontend-service:feat/dimentorin-landing MythEclipse/imphnen-frontend-service:feat/landing-app MythEclipse/imphnen-frontend-service:feat/roadmap MythEclipse/imphnen-frontend-service:landing/auth MythEclipse/imphnen-frontend-service:refactor/remove-cms MythEclipse/imphnen-frontend-service:landing/reform MythEclipse/imphnen-frontend-service:hotfix/ui MythEclipse/imphnen-frontend-service:feat/landing-cms MythEclipse/imphnen-frontend-service:feat/editButtonTextColor MythEclipse/imphnen-frontend-service:feat/landing-migration MythEclipse/imphnen-frontend-service:fix/split-register-form-modal MythEclipse/imphnen-frontend-service:feat/register-integeration MythEclipse/imphnen-frontend-service:feat/handle-state-modal MythEclipse/imphnen-frontend-service:feat/register-form MythEclipse/imphnen-frontend-service:feat/forgot-password MythEclipse/imphnen-frontend-service:feat/modal-unit-test-and-storybook MythEclipse/imphnen-frontend-service:feat/gacha-modal-login MythEclipse/imphnen-frontend-service:ModalsGacha MythEclipse/imphnen-frontend-service:main
MythEclipse/imphnen-frontend-service:v0.1.0
29 Commits
main .. ModalsGacha
Author SHA1 Message Date
boboiazumi 4ac1278a33 fix: conflict 2025-03-17 18:13:24 +07:00
Maulana Sodiqin d20f0d89e5 feat: init backoffice 2025-03-17 12:48:11 +07:00
Maulana Sodiqin 515b78c57f feat: add backoffice apps 2025-03-17 09:39:04 +07:00
Maulana Sodiqin 8a53575cd1 Merge pull request #4 from IMPHNEN/feat/simple-landing-page 
Roulette page
 2025-03-17 09:29:43 +07:00
Hafid Nur c8b12db1b3 feat: linear gradient diffuser 2025-03-16 22:53:13 +07:00
Hafid Nur e3c4b7a23a feat: infinite scroll animation for gacha items 2025-03-16 22:25:29 +07:00
boboiazumi 41a0842026 feat: modals-gacha 2025-03-16 22:18:48 +07:00
Hafid Nur a9164e5e5f feat: gacha item horizontal scroll snap 2025-03-16 22:16:52 +07:00
Hafid Nur d7e39095bb feat: separate GachaItem component and add more Gacha items (images and labels) 
TODO:
- implement an infinite scroll snap slider for Gacha items
 2025-03-16 21:42:45 +07:00
Hafid Nur 84ddf2b771 feat: draft roulette page 2025-03-16 20:40:18 +07:00
Hafid Nur cb632adbb4 feat: change the layout of the landing page from using CSS Flexbox to CSS Grid 
- minor adjustment for navbar max width and padding
 2025-03-16 19:54:42 +07:00
Hafid Nur 6a1fa42956 feat: update navbar to cover top of the page 
- Update the navbar to be sticky when scrolling the page and cover the top of the page.
- Fix the margins for every viewport.
 2025-03-16 19:19:44 +07:00
Hafid Nur 9002e6a261 feat: merge landing page component into single page file 
- Component landing page sebelumnya terpisah, tetapi perlu digabungkan lagi karena tidak reusable pada aplikasi
 2025-03-16 19:13:49 +07:00
Maulana Sodiqin 254d4fe04a Merge pull request #2 from IMPHNEN/feat/simple-landing-page 
Slicing simple landing page
 2025-03-16 12:39:12 +07:00
Hafid Nur 02e06caca1 feat: landing page for desktop viewport 2025-03-16 07:41:16 +07:00
Hafid Nur 00033b9c68 feat: landing page for tablet viewport 
- change "scroll for gacha" to button to roulette page
 2025-03-16 07:11:06 +07:00
Hafid Nur 02863ebc8b feat: add landing page for mobile viewport 2025-03-16 06:38:14 +07:00
Hafid Nur a31166e3ff feat: update navbar responsive 2025-03-16 06:07:07 +07:00
Hafid Nur c7b74bc9b6 feat: update theme to match the Design System 
adjustment
- primary color
- base + typography size
 2025-03-16 05:42:24 +07:00
Maulana Sodiqin 01621a8786 Merge pull request #1 from IMPHNEN/feat/component-migrate 
Migrate component from 'imphnen-gacha' repository
 2025-03-16 01:45:33 +07:00
hafidnrzs a07e3c21d6 feat: add Textarea component 2025-03-16 01:40:02 +07:00
hafidnrzs fb99b41b3a feat: add PasswordInput component 2025-03-16 01:34:24 +07:00
Hafid Nur 183ca100dc feat: add Input component 2025-03-16 00:56:02 +07:00
Maulana Sodiqin 203ee5de97 chore: remove uneeded folder/file 2025-03-16 00:35:48 +07:00
Maulana Sodiqin 58843041db faet 2025-03-16 00:33:48 +07:00
Maulana Sodiqin 3964c22c66 feat: navbar unit test 2025-03-16 00:16:58 +07:00
Maulana Sodiqin ec02a4ef83 fix: unit test 2025-03-16 00:12:15 +07:00
Maulana Sodiqin 587cb9facf fix: ui error build 2025-03-16 00:07:02 +07:00
Maulana Sodiqin 5c5faaf8a1 fix: libs cannot apply style 2025-03-16 00:05:17 +07:00
70 changed files with 8389 additions and 412 deletions
Expand all files Collapse all files
.gitignore
+3 -1
View File
@@ -42,4 +42,6 @@ Thumbs.db
.nx/workspace-data
vite.config.*.timestamp*
vitest.config.*.timestamp*
vitest.config.*.timestamp*
storybook-static
apps/backoffice/eslint.config.mjs
+12
View File
@@ -0,0 +1,12 @@
import nx from '@nx/eslint-plugin';
import baseConfig from '../../eslint.config.mjs';
export default [
...baseConfig,
...nx.configs['flat/react'],
{
files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
// Override or add rules here
rules: {},
},
];
apps/backoffice/index.html
+16
View File
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Backoffice</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="stylesheet" href="/src/styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
apps/backoffice/postcss.config.mjs
+9
View File
@@ -0,0 +1,9 @@
import { join } from 'path';
export default {
plugins: {
'@tailwindcss/postcss': {
base: join(import.meta.dirname, '../../'),
},
},
};
apps/backoffice/project.json
+9
View File
@@ -0,0 +1,9 @@
{
"name": "backoffice",
"$schema": "../../node_modules/nx/schemas/project-schema.json",
"sourceRoot": "apps/backoffice/src",
"projectType": "application",
"tags": [],
"// targets": "to see all targets run: nx show project backoffice --web",
"targets": {}
}
apps/backoffice/public/favicon.ico
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

apps/backoffice/src/app/layout.tsx
+14
View File
@@ -0,0 +1,14 @@
import { FC, ReactElement } from 'react';
import { Outlet } from 'react-router-dom';
import { Navbar } from '@imphnen-frontend-service/ui/organisms';
export const AppLayout: FC = (): ReactElement => {
return (
<main className="bg-primary-50 min-h-screen">
<Navbar />
<Outlet />
</main>
);
};
export default AppLayout;
apps/backoffice/src/app/page.tsx
+7
View File
@@ -0,0 +1,7 @@
import { FC, ReactElement } from 'react';
export const Components: FC = (): ReactElement => {
return <>Hallo</>;
};
export default Components;
apps/backoffice/src/index.css
+140
View File
@@ -0,0 +1,140 @@
@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import 'tailwindcss';
@source "../../../libs/ui/**/*.{ts,tsx}";
@theme {
--color-primary-50: #f0f8ff;
--color-primary-100: #e1f0fd;
--color-primary-200: #bce1fb;
--color-primary-300: #81cbf8;
--color-primary-400: #3eb0f2;
--color-primary-500: #23a1eb;
--color-primary-600: #0877c1;
--color-primary-700: #085f9c;
--color-primary-800: #0b5181;
--color-primary-900: #0f446b;
--color-primary-950: #0a2b47;
--color-neutral-50: #f6f6f6;
--color-neutral-100: #e7e7e7;
--color-neutral-200: #d0d0d0;
--color-neutral-300: #b7b7b7;
--color-neutral-400: #9f9f9f;
--color-neutral-500: #7e7e7e;
--color-neutral-600: #5d5d5d;
--color-neutral-700: #4a4a4a;
--color-neutral-800: #3a3a3a;
--color-neutral-900: #2f2f2f;
--color-neutral-950: #2b2b2b;
--color-success-50: #e7f2ee;
--color-success-100: #cde6dd;
--color-success-200: #9bccbc;
--color-success-300: #78bdab;
--color-success-400: #4ca88f;
--color-success-500: #349078;
--color-success-600: #2f7c66;
--color-success-700: #26624f;
--color-success-800: #1e4a3b;
--color-success-900: #1b513b;
--color-info-50: #e7f4f5;
--color-info-100: #cce9ea;
--color-info-200: #99d3d5;
--color-info-300: #78c4c7;
--color-info-400: #3aa9ad;
--color-info-500: #279599;
--color-info-600: #207d82;
--color-info-700: #1a666b;
--color-info-800: #124c52;
--color-info-900: #093d43;
--color-warning-50: #fffce6;
--color-warning-100: #fff8cc;
--color-warning-200: #fef39b;
--color-warning-300: #fde967;
--color-warning-400: #fbd93d;
--color-warning-500: #f3c215;
--color-warning-600: #d7a20f;
--color-warning-700: #aa7e0c;
--color-warning-800: #805c07;
--color-warning-900: #665c00;
--color-danger-50: #ffe7e7;
--color-danger-100: #ffcece;
--color-danger-200: #ff9f9f;
--color-danger-300: #ff6e6e;
--color-danger-400: #fa4646;
--color-danger-500: #ef1f1f;
--color-danger-600: #d11515;
--color-danger-700: #a51111;
--color-danger-800: #7f0c0c;
--color-danger-900: #5d2d2d;
--radius-none: 0px;
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 8px;
--radius-xl: 12px;
--radius-2xl: 16px;
--radius-3xl: 24px;
--radius-full: 50%;
--font-bai-jamjuree: 'Bai Jamjuree', sans-serif;
--text-h1: 3.833rem;
/* ~46px */
--text-h2: 3.083rem;
/* ~37px */
--text-h3: 2.417rem;
/* ~29px */
--text-p1: 1.917rem;
/* ~23px */
--text-p2: 1.583rem;
/* ~19px */
--text-p3: 1.25rem;
/* 15px */
--text-label1: 1rem;
/* 12px */
--text-label2: 0.833rem;
/* ~10px */
--text-label3: 0.677rem;
/* ~8px */
}
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-neutral-200, currentColor);
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: var(--color-neutral-50);
}
::-webkit-scrollbar-thumb {
background: #cccccc;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-neutral-300);
}
html {
font-family: 'Bai Jamjuree', sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 1.2;
}
}
apps/backoffice/src/main.tsx
+40
View File
@@ -0,0 +1,40 @@
import { createRoot } from 'react-dom/client';
import { middleware } from './middleware';
import { StrictMode } from 'react';
import { createBrowserRouter, RouteObject, RouterProvider } from 'react-router';
import {
add404PageToRoutesChildren,
addErrorElementToRoutes,
convertPagesToRoute,
QueryProvider,
} from '@imphnen-frontend-service/utils';
import './index.css';
const files = import.meta.glob('./app/**/*(page|layout).tsx');
const errorFiles = import.meta.glob('./app/**/*error.tsx');
const notFoundFiles = import.meta.glob('./app/**/*404.tsx');
const loadingFiles = import.meta.glob('./app/**/*loading.tsx');
const routes = convertPagesToRoute(files, loadingFiles) as RouteObject;
addErrorElementToRoutes(errorFiles, routes);
add404PageToRoutesChildren(notFoundFiles, routes);
const router = createBrowserRouter([
{
...routes,
loader: middleware,
shouldRevalidate: () => true,
},
]);
const rootElement = document.getElementById('root');
if (!rootElement) throw new Error('Failed to find the root element');
createRoot(rootElement).render(
<StrictMode>
<QueryProvider>
<RouterProvider router={router} />
</QueryProvider>
</StrictMode>
);
apps/backoffice/src/middleware.ts
+11
View File
@@ -0,0 +1,11 @@
import { LoaderFunctionArgs } from 'react-router-dom';
export const middleware = async ({ request }: LoaderFunctionArgs) => {
const url = new URL(request.url);
const pathname = url.pathname;
if (pathname) return null;
return null;
};
apps/backoffice/tsconfig.app.json
+27
View File
@@ -0,0 +1,27 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "../../dist/out-tsc",
"types": [
"node",
"@nx/react/typings/cssmodule.d.ts",
"@nx/react/typings/image.d.ts",
"vite/client"
]
},
"exclude": [
"src/**/*.spec.ts",
"src/**/*.test.ts",
"src/**/*.spec.tsx",
"src/**/*.test.tsx",
"src/**/*.spec.js",
"src/**/*.test.js",
"src/**/*.spec.jsx",
"src/**/*.test.jsx",
"vite.config.ts",
"vite.config.mts",
"vitest.config.ts",
"vitest.config.mts"
],
"include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
}
apps/backoffice/tsconfig.json
+21
View File
@@ -0,0 +1,21 @@
{
"compilerOptions": {
"jsx": "react-jsx",
"allowJs": false,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"types": ["vite/client", "vitest"]
},
"files": [],
"include": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.spec.json"
}
],
"extends": "../../tsconfig.base.json"
}
apps/backoffice/tsconfig.spec.json
+30
View File
@@ -0,0 +1,30 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "../../dist/out-tsc",
"types": [
"vitest/globals",
"vitest/importMeta",
"vite/client",
"node",
"vitest",
"@nx/react/typings/cssmodule.d.ts",
"@nx/react/typings/image.d.ts"
]
},
"include": [
"vite.config.ts",
"vite.config.mts",
"vitest.config.ts",
"vitest.config.mts",
"src/**/*.test.ts",
"src/**/*.spec.ts",
"src/**/*.test.tsx",
"src/**/*.spec.tsx",
"src/**/*.test.js",
"src/**/*.spec.js",
"src/**/*.test.jsx",
"src/**/*.spec.jsx",
"src/**/*.d.ts"
]
}
apps/backoffice/vite.config.ts
+42
View File
@@ -0,0 +1,42 @@
/// <reference types='vitest' />
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
export default defineConfig(() => ({
root: __dirname,
cacheDir: '../../node_modules/.vite/apps/backoffice',
server: {
port: 4200,
host: 'localhost',
},
preview: {
port: 4300,
host: 'localhost',
},
plugins: [react(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
// Uncomment this if you are using workers.
// worker: {
// plugins: [ nxViteTsPaths() ],
// },
build: {
outDir: '../../dist/apps/backoffice',
emptyOutDir: true,
reportCompressedSize: true,
commonjsOptions: {
transformMixedEsModules: true,
},
},
test: {
watch: false,
globals: true,
environment: 'jsdom',
include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
reporters: ['default'],
coverage: {
reportsDirectory: '../../coverage/apps/backoffice',
provider: 'v8' as const,
},
},
}));
apps/dimentorin/index.html
+2 -2
View File
@@ -6,8 +6,8 @@
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="stylesheet" href="/src/styles.css" />
<link rel="icon" type="image/x-icon" href="/logos/simple.svg" />
<link rel="stylesheet" href="/src/index.css" />
</head>
<body>
<div id="root"></div>
apps/dimentorin/postcss.config.mjs
+5 -1
View File
@@ -1,5 +1,9 @@
import { join } from 'path';
export default {
plugins: {
'@tailwindcss/postcss': {},
'@tailwindcss/postcss': {
base: join(import.meta.dirname, '../../'),
},
},
};
apps/dimentorin/src/index.css
+1
View File
@@ -1,5 +1,6 @@
@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import 'tailwindcss';
@source "../../../libs/ui/**/*.{ts,tsx}";
@theme {
--color-primary-50: #f0f8ff;
apps/gacha/index.html
+1 -1
View File
@@ -6,7 +6,7 @@
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/x-icon" href="/logos/simple.svg" />
<link rel="stylesheet" href="/src/index.css" />
</head>
<body>
apps/gacha/postcss.config.mjs
+5 -1
View File
@@ -1,5 +1,9 @@
import { join } from 'path';
export default {
plugins: {
'@tailwindcss/postcss': {},
'@tailwindcss/postcss': {
base: join(import.meta.dirname, '../../'),
},
},
};
apps/gacha/public/gacha/certificate.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

apps/gacha/public/gacha/gelang-karet.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

apps/gacha/public/gacha/lanyard-id-card.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 MiB

apps/gacha/public/gacha/pin.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

apps/gacha/public/gacha/sticker.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 220 KiB

apps/gacha/public/landing-arrow-1.svg
+3
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

apps/gacha/public/landing-arrow-2.svg
+3
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

apps/gacha/public/logos/logo.svg
+9
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 351 KiB

apps/gacha/public/logos/simple.svg
+5 -5
View File
File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 511 KiB

After

Width:  |  Height:  |  Size: 511 KiB

apps/gacha/public/merch/1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

apps/gacha/public/merch/2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

apps/gacha/public/merch/Vector-1.svg
+3
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 1017 B

apps/gacha/public/merch/Vector-2.svg
+3
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 941 B

apps/gacha/src/app/layout.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import { Navbar } from '@imphnen-frontend-service/ui/organisms';
export const AppLayout: FC = (): ReactElement => {
return (
<main className="bg-primary-50 min-h-screen px-20 py-[60px]">
<main className="bg-primary-50 min-h-screen">
<Navbar />
<Outlet />
</main>
apps/gacha/src/app/page.tsx
+235 -2
View File
@@ -1,7 +1,240 @@
import { FC, ReactElement } from 'react';
import { ArrowDownOutlined } from '@ant-design/icons';
import { Button } from '@imphnen-frontend-service/ui/atoms';
import { ModalsGacha } from '@imphnen-frontend-service/ui/organisms';
import { cn } from '@imphnen-frontend-service/utils';
import { FC, Fragment, ReactElement, useEffect, useState } from 'react';
import { createPortal } from 'react-dom';
interface GachaItemProps {
src: string;
label: string;
className?: string;
}
export const Components: FC = (): ReactElement => {
return <>Hallo</>;
// Pinjem
const [showModal, setShowModal] = useState(false);
//
const scrollToRoulette = () => {
const rouletteSection = document.getElementById('roulette');
if (rouletteSection) {
rouletteSection.scrollIntoView({ behavior: 'smooth' });
}
};
useEffect(() => {
const gachaPlaySection = document.getElementById('gacha-play');
if (gachaPlaySection) {
let currentIndex = 0;
const items = gachaPlaySection.children;
const totalItems = items.length;
const scrollItems = () => {
if (currentIndex >= totalItems) {
currentIndex = 0;
}
items[currentIndex].scrollIntoView({
behavior: 'smooth',
inline: 'center',
});
currentIndex++;
};
const intervalId = setInterval(scrollItems, 2800);
return () => clearInterval(intervalId);
}
}, []);
const GachaItem: FC<GachaItemProps> = ({
src,
label,
className,
}): ReactElement => {
return (
<div className="snap-center flex-auto justify-center items-center flex flex-col min-w-full">
<div className="max-h-[180px] md:max-h-[270px] md:max-w-[500px] mb-2 md:mb-5 flex flex-1 justify-center items-center">
<img
src={src}
alt=""
className={cn('h-[150px] md:h-[255px] object-contain', className)}
/>
</div>
<p className="font-semibold text-center md:text-p2">{label}</p>
</div>
);
};
return (
<Fragment>
{/* Landing Page */}
<section
id="landing-page"
className="my-12 md:my-24 grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12 justify-items-center max-w-[1280px] items-center justify-center mx-[32px] md:mx-[60px] lg:mx-[80px] xl:mx-auto"
>
<div className="order-none lg:order-1 flex flex-col col-span-4 md:col-span-8 lg:col-span-4 md:w-full lg:w-fit items-center gap-7 md:gap-13 text-primary-500 mb-10 md:mb-20">
<img
src="/logos/logo.svg"
alt="IMPHNEN Logo"
className="w-[170px] md:w-[317px]"
/>
<div className="font-semibold text-center">
<div className="text-p1 md:text-h2 lg:font-bold text-center">
<p>New Merchandise</p>
<p>Coming UP</p>
</div>
<div className="text-base md:text-p2 mt-3">
Periode Gacha: 1 - 31 Maret 2025
</div>
</div>
<div className="text-center font-semibold text-p3 md:text-p1">
<p>Let's Go Checkout Our Merch &</p>
<p>Gacha Your Prize Here</p>
</div>
<Button
size="sm"
variant="bordered"
className="flex gap-3 px-3 md:px-5 py-2 md:py-4 bg-primary-100 border border-primary-500 border-dashed rounded md:rounded-md animate-bounce text-label2 md:text-p2"
onClick={scrollToRoulette}
>
<ArrowDownOutlined />
<span>Scroll For Gacha</span>
<ArrowDownOutlined />
</Button>
</div>
<div className="order-1 lg:order-none flex flex-col col-span-4 justify-center items-center mb-8 relative">
<div className="relative h-[150px] md:h-[230px]">
<img
src="/merch/1.png"
alt="Merch 1"
className="relative top-[3px] md:top-[6px] left-[4px] md:left-[7px] z-10 w-[165px] md:w-[266px]"
/>
<img
className="absolute top-0 left-0 min-w-[174px] md:min-w-[280px] z-0"
src="/merch/Vector-1.svg"
alt=""
/>
<img
className="absolute hidden lg:block -bottom-[50px] -right-[50px]"
src="/landing-arrow-1.svg"
alt=""
/>
</div>
<div className="px-3 py-1 text-primary-500 font-semibold text-base md:text-p2 bg-white shadow-md rounded">
Official Merch IMPHNEN
</div>
<div className="mt-2 text-primary-500 font-bold text-p2 md:text-h3">
~ 175k ~
</div>
</div>
<div className="order-2 flex flex-col col-span-4 justify-center items-center mb-8 relative">
<div className="relative h-[130px] md:h-[230px]">
<img
src="/merch/2.png"
alt="Merch 2"
className="relative top-[5px] md:top-[8px] left-0 md:left-[5px] z-10 w-[165px] md:w-[277px]"
/>
<img
className="absolute top-0 -left-[5px] md:-left-[8px] z-0 min-w-[174px] md:min-w-[302px]"
src="/merch/Vector-2.svg"
alt=""
/>
<img
className="absolute hidden lg:block -bottom-[100px] -left-[55px]"
src="/landing-arrow-2.svg"
alt=""
/>
</div>
<div className="px-3 py-1 text-primary-500 font-semibold text-base md:text-p2 bg-white shadow-md rounded">
IMPHNEN Mini Merch
</div>
<div className="mt-2 text-primary-500 font-bold text-p2 md:text-h3">
~ 90k ~
</div>
</div>
</section>
{/* Roulette Page */}
<section
id="roulette"
className="mt-20 pb-50 lg:py-90 mx-[32px] md:mx-[60px] lg:mx-[80px] xl:mx-auto lg:max-w-[1280px] grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12 justify-items-center gap-y-16 md:gap-y-28"
>
<div className="col-span-4 md:col-span-8 lg:col-span-6 text-primary-500 bg-white rounded-lg md:rounded-xl p-5 md:py-9 md:px-13 shadow md:max-w-[430px]">
<header className="mb-4">
<h3 className="font-semibold text-p3 md:text-h2">Gacha Roulette</h3>
</header>
<h4 className="font-semibold my-2 text-base md:text-p1">
How to participate
</h4>
<p className="text-base md:text-p2">
Kamu harus melakukan pembelian merch batch 2 di shopee IMPHNEN
</p>
<h4 className="font-semibold my-2 text-base md:text-p1">
How to gacha
</h4>
<ol className="text-base md:text-p2 list-decimal list-outside ml-4 md:ml-6">
<li>First, press the "Spin Now" button</li>
<li>
If the merch does not match you can reroll by paying IDR5,000
</li>
<li>If it is appropriate you can submit</li>
<li>Then fill in the data for your merch delivery process</li>
</ol>
</div>
<div
id="roulette-spin"
className="col-span-4 md:col-span-8 lg:col-span-6 flex flex-col items-center gap-4 md:gap-8 overflow-x-hidden"
>
<div className="bg-white text-primary-500 font-medium text-p3 md:text-h3 shadow py-2 px-4 md:py-4 md:px-8 max-w-fit rounded-md md:rounded-lg">
Here Take Your Prize
</div>
<section
id="gacha-play"
className="flex flex-nowrap overflow-auto w-full gap-x-8 snap-x snap-mandatory"
>
<GachaItem
src="/gacha/certificate.png"
label="Sertifikat + Laminating"
/>
<GachaItem
src="/gacha/lanyard-id-card.png"
label="Lanyard + ID Card"
/>
<GachaItem src="/gacha/pin.png" label="Pin" />
<GachaItem src="/gacha/sticker.png" label="Sticker Isi 3" />
<GachaItem src="/gacha/sticker.png" label="Sticker Isi 5" />
<GachaItem
src="/gacha/gelang-karet.png"
label="Gelang Karet"
className="h-[86px] md:h-[160px]"
/>
</section>
<Button variant="secondary" size="md">
Spin Now
</Button>
</div>
</section>
{/* Diffuser & Cloud */}
<div className="sticky bottom-0 h-[86px] md:h-[200px] bg-gradient-to-b from-primary-500/0 to-primary-500/50 to-80%"></div>
{/**Izin pake untuk debug modals gacha */}
<div>
<p>Debug : Test Modals Gacha</p>
<Button onClick={
() => setShowModal(true)
}>Tekan</Button>
</div>
{showModal && createPortal(
<ModalsGacha></ModalsGacha>,
document.body
)}
{/**Izin pake untuk debug modals gacha */}
</Fragment>
);
};
export default Components;
apps/gacha/src/index.css
+36 -16
View File
@@ -1,19 +1,21 @@
@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import 'tailwindcss';
@source "../../../libs/ui/**/*.{ts,tsx}";
@theme {
--color-primary-50: #f0f8ff;
--color-primary-100: #e1f0fd;
--color-primary-200: #b8e1f8;
--color-primary-300: #a1d4f0;
--color-primary-400: #4aa4da;
--color-primary-500: #1a8ce6;
--color-primary-600: #1673c7;
--color-primary-700: #0f5ca5;
--color-primary-800: #0a4780;
--color-primary-900: #04305d;
--color-primary-200: #bce1fb;
--color-primary-300: #81cbf8;
--color-primary-400: #3eb0f2;
--color-primary-500: #23a1eb;
--color-primary-600: #0877c1;
--color-primary-700: #085f9c;
--color-primary-800: #0b5181;
--color-primary-900: #0f446b;
--color-primary-950: #0a2b47;
--color-neutral-50: #f7f7f7;
--color-neutral-50: #f6f6f6;
--color-neutral-100: #e7e7e7;
--color-neutral-200: #d0d0d0;
--color-neutral-300: #b7b7b7;
@@ -23,6 +25,7 @@
--color-neutral-700: #4a4a4a;
--color-neutral-800: #3a3a3a;
--color-neutral-900: #2f2f2f;
--color-neutral-950: #2b2b2b;
--color-success-50: #e7f2ee;
--color-success-100: #cde6dd;
@@ -79,16 +82,28 @@
--font-bai-jamjuree: 'Bai Jamjuree', sans-serif;
--text-h1: 3rem; /* ~48px */
--text-h2: 2.4rem; /* ~38.4px */
--text-h3: 1.92rem; /* ~30.72px */
--text-p1: 1.54rem; /* ~24.58px */
--text-p2: 1.23rem; /* ~19.68px */
--text-label1: 0.98rem; /* ~15.74px */
--text-label2: 0.78rem; /* ~12.59px */
--text-h1: 3.833rem;
/* ~46px */
--text-h2: 3.083rem;
/* ~37px */
--text-h3: 2.417rem;
/* ~29px */
--text-p1: 1.917rem;
/* ~23px */
--text-p2: 1.583rem;
/* ~19px */
--text-p3: 1.25rem;
/* 15px */
--text-label1: 1rem;
/* 12px */
--text-label2: 0.833rem;
/* ~10px */
--text-label3: 0.677rem;
/* ~8px */
}
@layer base {
*,
::after,
::before,
@@ -102,13 +117,16 @@
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: var(--color-neutral-50);
}
::-webkit-scrollbar-thumb {
background: #cccccc;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-neutral-300);
}
@@ -116,5 +134,7 @@
html {
font-family: 'Bai Jamjuree', sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 1.2;
}
}
libs/ui/.storybook/main.ts
+20
View File
@@ -0,0 +1,20 @@
import type { StorybookConfig } from '@storybook/react-vite';
const config: StorybookConfig = {
stories: ['../src/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
framework: {
name: '@storybook/react-vite',
options: {
builder: {
viteConfigPath: 'vite.config.ts',
},
},
},
};
export default config;
// To customize your Vite configuration you can use the viteFinal field.
// Check https://storybook.js.org/docs/react/builders/vite#configuration
// and https://nx.dev/recipes/storybook/custom-builder-configs
libs/ui/.storybook/preview.ts
+15
View File
@@ -0,0 +1,15 @@
import type { Preview } from '@storybook/react';
import '../src/index.css';
const preview: Preview = {
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
};
export default preview;
libs/ui/package.json
-5
View File
@@ -3,11 +3,6 @@
"version": "0.0.1",
"main": "./index.js",
"types": "./index.d.ts",
"devDependencies": {
"tailwindcss": "^4.0.13",
"postcss": "^8.5.3",
"@tailwindcss/postcss": "^4.0.13"
},
"exports": {
".": {
"import": "./index.mjs",
libs/ui/postcss.config.mjs
+2
View File
@@ -1,3 +1,5 @@
import { join } from 'path';
export default {
plugins: {
'@tailwindcss/postcss': {},
libs/ui/src/atoms/button/button.stories.tsx
+104
View File
@@ -0,0 +1,104 @@
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './button';
const meta: Meta<typeof Button> = {
title: 'Components/Button',
component: Button,
argTypes: {
variant: {
control: 'select',
options: ['primary', 'secondary', 'success', 'danger'],
},
size: {
control: 'select',
options: ['sm', 'md', 'lg'],
},
disabled: {
control: 'boolean',
},
},
};
export default meta;
type Story = StoryObj<typeof Button>;
export const Primary: Story = {
args: {
variant: 'primary',
size: 'md',
children: 'Primary Button',
},
};
export const Secondary: Story = {
args: {
variant: 'secondary',
size: 'md',
children: 'Secondary Button',
},
};
export const Text: Story = {
args: {
variant: 'text',
size: 'md',
children: 'Text Button',
},
};
export const Bordered: Story = {
args: {
variant: 'bordered',
size: 'md',
children: 'Bordered Button',
},
};
export const Success: Story = {
args: {
variant: 'success',
size: 'md',
children: 'Success Button',
},
};
export const Danger: Story = {
args: {
variant: 'danger',
size: 'md',
children: 'Danger Button',
},
};
export const Disabled: Story = {
args: {
variant: 'primary',
size: 'md',
disabled: true,
children: 'Disabled Button',
},
};
export const Large: Story = {
args: {
variant: 'primary',
size: 'lg',
children: 'Large Button',
},
};
export const Medium: Story = {
args: {
variant: 'primary',
size: 'md',
children: 'Medium Button',
},
};
export const Small: Story = {
args: {
variant: 'primary',
size: 'sm',
children: 'Small Button',
},
};
libs/ui/src/atoms/index.ts
+3 -1
View File
@@ -1,2 +1,4 @@
import '../index.css';
export * from './button';
export * from './input';
export * from './password-input';
export * from './textarea';
libs/ui/src/atoms/input/index.ts
+1
View File
@@ -0,0 +1 @@
export * from "./input";
libs/ui/src/atoms/input/input.spec.tsx
+36
View File
@@ -0,0 +1,36 @@
import { describe, it, expect } from "vitest";
import { render, screen } from "@testing-library/react";
import { Input } from "./input";
describe("Test Input Component", () => {
it("renders the input with placeholder text", () => {
render(<Input placeholder="Placeholder" />);
expect(screen.getByPlaceholderText("Placeholder")).toBeInTheDocument();
});
// it("renders the input with different sizes", () => {
// const sizeClasses = {
// sm: "text-[10px] max-h-[28px]",
// md: "text-[12px] max-h-[30px]",
// lg: "text-[15px] max-h-[34px]",
// };
// Object.entries(sizeClasses).forEach(([size, className]) => {
// render(<Input size={size} />);
// expect(screen.getByRole("textbox")).toHaveClass(className);
// });
// });
// it("renders the input with different types", () => {
// const types = ["text", "password", "email", "number"];
// types.forEach((type) => {
// render(<Input type={type} />);
// const input = screen.getByRole("textbox");
// expect(input).toHaveAttribute("type", type);
// });
// });
it("disables the input field when 'disabled' prop is set", () => {
render(<Input disabled />);
expect(screen.getByRole("textbox")).toBeDisabled();
});
});
libs/ui/src/atoms/input/input.stories.tsx
+71
View File
@@ -0,0 +1,71 @@
import { Meta, StoryObj } from '@storybook/react';
import { Input } from './input';
const meta: Meta<typeof Input> = {
title: 'Components/Input',
component: Input,
argTypes: {
type: {
control: 'select',
options: ['text', 'email'],
},
size: {
control: 'select',
options: ['sm', 'md', 'lg'],
},
},
};
export default meta;
type Story = StoryObj<typeof Input>;
export const Large: Story = {
args: {
size: 'lg',
placeholder: 'Placeholder',
},
};
export const Medium: Story = {
args: {
size: 'md',
placeholder: 'Placeholder',
},
};
export const Small: Story = {
args: {
size: 'sm',
placeholder: 'Placeholder',
},
};
export const TextInput: Story = {
args: {
size: 'md',
type: 'text',
},
};
export const EmailInput: Story = {
args: {
size: 'md',
type: 'email',
},
};
export const Disabled: Story = {
args: {
size: 'md',
type: 'text',
disabled: true,
},
};
export const WithError: Story = {
args: {
size: 'md',
type: 'text',
error: 'This field is required',
},
};
libs/ui/src/atoms/input/input.tsx
+60
View File
@@ -0,0 +1,60 @@
import {
DetailedHTMLProps,
FC,
InputHTMLAttributes,
ReactElement,
} from 'react';
import { cn } from '@imphnen-frontend-service/utils';
type TInputType = 'text' | 'email';
type TInputSize = 'sm' | 'md' | 'lg';
type TInputProps = Omit<
DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
'size' | 'type'
> & {
type?: TInputType;
size?: TInputSize;
error?: string;
};
const sizeClasses: Record<TInputSize, string> = {
sm: 'text-[10px] max-h-[28px]',
md: 'text-[12px] max-h-[30px]',
lg: 'text-[15px] max-h-[34px]',
};
const disabledClass = 'opacity-50 hover:border-neutral-200 cursor-not-allowed';
const errorClass =
'border-danger-500 hover:border-danger-500 focus:outline-danger-500';
export const Input: FC<TInputProps> = ({
size = 'md',
type,
placeholder = 'Placeholder',
disabled,
error,
className,
...rest
}): ReactElement => {
const mergedClassName = cn(
'px-[12px] py-[8px] text-neutral-800 placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md font-bai-jamjuree',
sizeClasses[size],
disabled && disabledClass,
error && errorClass,
className
);
return (
<>
<input
className={mergedClassName}
type={type}
disabled={disabled}
placeholder={placeholder}
{...rest}
/>
{error && <p className="text-danger-500 text-xs mt-1">{error}</p>}
</>
);
};
libs/ui/src/atoms/password-input/index.ts
+1
View File
@@ -0,0 +1 @@
export * from "./password-input";
libs/ui/src/atoms/password-input/password-input.stories.tsx
+58
View File
@@ -0,0 +1,58 @@
import { Meta, StoryObj } from '@storybook/react';
import { PasswordInput } from './password-input';
const meta: Meta<typeof PasswordInput> = {
title: 'Components/Password Input',
component: PasswordInput,
argTypes: {
size: {
control: 'select',
options: ['sm', 'md', 'lg'],
},
},
};
export default meta;
type Story = StoryObj<typeof PasswordInput>;
export const Large: Story = {
args: {
size: 'lg',
placeholder: 'Placeholder',
},
};
export const Medium: Story = {
args: {
size: 'md',
placeholder: 'Placeholder',
},
};
export const Small: Story = {
args: {
size: 'sm',
placeholder: 'Placeholder',
},
};
export const Input: Story = {
args: {
size: 'md',
placeholder: 'Placeholder',
},
};
export const Disabled: Story = {
args: {
size: 'md',
disabled: true,
},
};
export const WithError: Story = {
args: {
size: 'md',
error: 'This field is required',
},
};
libs/ui/src/atoms/password-input/password-input.tsx
+111
View File
@@ -0,0 +1,111 @@
import {
DetailedHTMLProps,
FC,
InputHTMLAttributes,
ReactElement,
useState,
} from 'react';
import { cn } from '@imphnen-frontend-service/utils';
import { Button } from '@imphnen-frontend-service/ui/atoms';
import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
type TPasswordInputType = 'password';
type TPasswordInputSize = 'sm' | 'md' | 'lg';
type TPasswordInputProps = Omit<
DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
'size' | 'type'
> & {
type?: TPasswordInputType;
size?: TPasswordInputSize;
error?: string;
};
const sizeClasses: Record<TPasswordInputSize, string> = {
sm: 'text-[10px] max-h-[28px]',
md: 'text-[12px] max-h-[30px]',
lg: 'text-[15px] max-h-[34px]',
};
const iconSizeClasses: Record<TPasswordInputSize, string> = {
sm: 'text-[10px]',
md: 'text-[12px]',
lg: 'text-[16px]',
};
const disabledClass = 'opacity-50 hover:border-neutral-200 cursor-not-allowed';
const errorClass =
'border-danger-500 hover:border-danger-500 focus:outline-danger-500';
export const PasswordInput: FC<TPasswordInputProps> = ({
size = 'md',
placeholder = 'Placeholder',
disabled,
error,
className,
...rest
}): ReactElement => {
const [showPassword, setShowPassword] = useState(false);
const togglePasswordVisibility = () => {
if (!disabled) setShowPassword((prev) => !prev);
};
const mergedClassName = cn(
'px-[12px] py-[8px] text-neutral-800 placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md font-bai-jamjuree',
sizeClasses[size],
disabled && disabledClass,
error && errorClass,
className
);
return (
<>
<div
className={cn(
'relative inline-flex items-center border border-neutral-200 rounded-md',
mergedClassName
)}
>
<input
className="focus:outline-0"
type={showPassword ? 'text' : 'password'}
disabled={disabled}
placeholder={placeholder}
{...rest}
/>
<div className="absolute end-0 px-[12px] h-full flex items-center">
<Button
variant="text"
size={size}
onClick={togglePasswordVisibility}
className={cn(
'relative aspect-square -me-[10px] p-[6px]',
iconSizeClasses[size],
disabled && 'cursor-not-allowed'
)}
>
{showPassword ? (
<EyeInvisibleOutlined
style={{
color: error
? 'var(--color-danger-500)'
: 'var(--color-neutral-500)',
}}
/>
) : (
<EyeOutlined
style={{
color: error
? 'var(--color-danger-500)'
: 'var(--color-neutral-500)',
}}
/>
)}
</Button>
</div>
</div>
{error && <p className="text-danger-500 text-xs mt-1">{error}</p>}
</>
);
};
libs/ui/src/atoms/textarea/index.ts
+1
View File
@@ -0,0 +1 @@
export * from "./textarea";

Some files were not shown because too many files have changed in this diff Show More