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

fix: conflict

Browse Source
This commit is contained in:
boboiazumi
2025-04-07 21:35:35 +07:00
parent 1948d2c67f df479a0a8d
commit 534bf0e10a
105 changed files with 15737 additions and 1720 deletions
Download Patch File Download Diff File Expand all files Collapse all files
libs/ui/src/atoms/button/button.spec.tsx
+3 -3
View File
@@ -24,9 +24,9 @@ describe('Test Button Component', () => {
const button = screen.getByText('Delete');
expect(button).toHaveClass('bg-danger-500');
expect(button).toHaveClass('hover:bg-danger-600');
expect(button).toHaveClass('text-white');
expect(button).toHaveClass('bg-danger-100');
expect(button).toHaveClass('hover:bg-danger-200');
expect(button).toHaveClass('text-danger-500');
});
it("disables the button when 'disabled' prop is set", async () => {
libs/ui/src/atoms/button/button.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ const variantClasses: Record<TButtonVariant, string> = {
bordered:
'border border-primary-500 hover:border-primary-600 bg-transparent hover:text-primary-600 hover:bg-gray-50 text-primary-500',
success: 'bg-success-500 hover:bg-success-600 text-white shadow-md',
danger: 'bg-danger-500 hover:bg-danger-600 text-white shadow-md',
danger: 'bg-danger-100 hover:bg-danger-200 text-danger-500 shadow-md',
};
const sizeClasses: Record<TButtonSize, string> = {
libs/ui/src/atoms/input/input.tsx
+4 -2
View File
@@ -9,7 +9,7 @@ import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons'; // Import
import { cn } from '@imphnen-frontend-service/utils';
import { Button } from '../button';
type TInputType = 'text' | 'email' | 'password' | 'file';
type TInputType = 'text' | 'email' | 'number' | 'password' | 'file';
type TInputSize = 'sm' | 'md' | 'lg';
type Width = 'standard' | 'custom'
@@ -43,7 +43,8 @@ export const Input: FC<TInputProps> = ({
}): ReactElement => {
const [showPassword, setShowPassword] = useState(false); // State for password visibility
const togglePasswordVisibility = () => {
const togglePasswordVisibility = (e: React.FormEvent) => {
e.preventDefault();
if (!disabled) setShowPassword((prev) => !prev);
};
@@ -66,6 +67,7 @@ export const Input: FC<TInputProps> = ({
{type === 'password' && (
<div className="absolute end-0 px-[12px] h-full flex items-center">
<Button
type="button"
variant="text"
size={size}
onClick={togglePasswordVisibility}
libs/ui/src/molecules/index.ts
+1 -1
View File
@@ -1,6 +1,6 @@
export * from './forgot-step';
export * from './otp-form';
export * from './input-form';
export * from './input-field';
export * from './pagination';
export * from './modal/modal';
export * from './stepper';
libs/ui/src/molecules/input-field/index.ts
+1
View File
@@ -0,0 +1 @@
export * from './input-field';
libs/ui/src/molecules/input-form/input-form.spec.tsx → libs/ui/src/molecules/input-field/input-field.spec.tsx
+4 -4
View File
@@ -1,9 +1,9 @@
import { render, screen } from '@testing-library/react';
import InputForm from './input-form';
import { InputField } from './input-field';
describe('InputForm Component', () => {
describe('InputField Component', () => {
it('renders correctly with disabled prop', () => {
render(<InputForm label="Test Label" disabled={true} />);
render(<InputField htmlFor="test" label="Test Label" disabled={true} />);
const input = screen.getByLabelText('Test Label');
expect(input).toBeDisabled();
@@ -11,7 +11,7 @@ describe('InputForm Component', () => {
});
it('renders correctly without disabled prop', () => {
render(<InputForm label="Test Label" disabled={false} />);
render(<InputField htmlFor="test" label="Test Label" disabled={false} />);
const input = screen.getByLabelText('Test Label');
expect(input).not.toBeDisabled();
libs/ui/src/molecules/input-form/input-form.stories.tsx → libs/ui/src/molecules/input-field/input-field.stories.tsx
+3 -3
View File
@@ -1,9 +1,9 @@
import type { Meta, StoryObj } from '@storybook/react';
import { InputForm } from './input-form';
import { InputField } from './input-field';
const meta = {
title: 'Molecules/Input Form',
component: InputForm,
component: InputField,
parameters: {
layout: 'centered',
docs: {
@@ -27,7 +27,7 @@ Cek dan inspect element pada story With HtmlFor untuk melihat hasilnya.
},
},
tags: ['autodocs'],
} satisfies Meta<typeof InputForm>;
} satisfies Meta<typeof InputField>;
export default meta;
type Story = StoryObj<typeof meta>;
libs/ui/src/molecules/input-form/input-form.tsx → libs/ui/src/molecules/input-field/input-field.tsx
+13 -12
View File
@@ -7,10 +7,9 @@ import {
import { Input } from '../../atoms';
import { cn } from '@imphnen-frontend-service/utils';
type TInputType = 'text' | 'email' | 'password' | 'file';
type TInputSize = 'sm' | 'md' | 'lg';
type TInputFormProps = Omit<
export type TInputType = 'text' | 'email' | 'number' | 'password' | 'file';
export type TInputSize = 'sm' | 'md' | 'lg';
export type TInputFieldProps = Omit<
DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
'size' | 'type'
> & {
@@ -19,7 +18,6 @@ type TInputFormProps = Omit<
size?: TInputSize;
error?: string;
disabled?: boolean;
helperText?: string;
htmlFor?: string;
};
@@ -39,7 +37,7 @@ const sizeClasses: Record<TInputSize, { label: string; helperText: string }> = {
},
};
export const InputForm: FC<TInputFormProps> = ({
export const InputField: FC<TInputFieldProps> = ({
label,
placeholder,
type = 'text',
@@ -56,7 +54,7 @@ export const InputForm: FC<TInputFormProps> = ({
<label
htmlFor={htmlFor}
className={cn(
'items-start justify-item-start text-start',
'items-start justify-item-start text-start !text-neutral-800',
sizeClasses[size].label
)}
>
@@ -72,15 +70,20 @@ export const InputForm: FC<TInputFormProps> = ({
error &&
'border-danger-500 hover:border-danger-500 focus:outline-danger-500',
className,
disabled && 'opacity-50 cursor-not-allowed' // Add styles for disabled state
disabled && 'opacity-50 cursor-not-allowed'
)}
{...rest}
/>
{error ? (
<p className="text-danger-500 text-xs mt-1">{error}</p>
<p className="text-danger-500 text-label1 text-left">{error}</p>
) : (
helperText && (
<p className={cn('text-cs mt-1', sizeClasses[size].helperText)}>
<p
className={cn(
'text-label2 text-left',
sizeClasses[size].helperText
)}
>
{helperText}
</p>
)
@@ -88,5 +91,3 @@ export const InputForm: FC<TInputFormProps> = ({
</div>
);
};
export default InputForm;
libs/ui/src/molecules/input-form/index.ts
-1
View File
@@ -1 +0,0 @@
export * from './input-form';
libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx
+43 -9
View File
@@ -3,24 +3,26 @@ import {
AuditOutlined,
InboxOutlined,
LogoutOutlined,
ReloadOutlined,
UsergroupAddOutlined,
UserOutlined,
UserSwitchOutlined,
} from '@ant-design/icons';
import { Button } from '../../atoms';
import { FC, ReactElement } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import { Link, useLocation } from 'react-router-dom';
import { useSession } from '@imphnen-frontend-service/utils';
export const BackofficeSidebar: FC = (): ReactElement => {
const { signOut } = useSession();
const location = useLocation();
const navigate = useNavigate();
const isActive = (path: string) => location.pathname.includes(path);
return (
<aside className="sticky top-0 left-0 w-[280px] bg-white min-h-screen py-[60px] px-[28px] shadow-xl flex flex-col justify-between">
<div className="flex flex-col gap-20 justify-between items-center">
{/* Logo */}
<img src="/logos/simple.svg" alt="IMPHNEN Logo" className="w-[150px]" />
{/* Navigation Menu */}
<nav className="flex flex-col gap-4 w-full">
<Link
to="/dashboard"
@@ -34,6 +36,42 @@ export const BackofficeSidebar: FC = (): ReactElement => {
<span className="text-p3 font-medium">Dashboard & Set Gacha</span>
</Link>
<Link
to="/gacha-roll"
className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
isActive('/gacha-roll')
? 'bg-primary-500 text-white rounded-md'
: 'text-gray-700 hover:bg-gray-100'
}`}
>
<ReloadOutlined className="text-[20px]" />
<span className="text-p3 font-medium">Gacha Roll</span>
</Link>
<Link
to="/permissions"
className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
isActive('/permissions')
? 'bg-primary-500 text-white rounded-md'
: 'text-gray-700 hover:bg-gray-100'
}`}
>
<UserSwitchOutlined className="text-[20px]" />
<span className="text-p3 font-medium">Permissions</span>
</Link>
<Link
to="/roles"
className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
isActive('/roles')
? 'bg-primary-500 text-white rounded-md'
: 'text-gray-700 hover:bg-gray-100'
}`}
>
<UsergroupAddOutlined className="text-[20px]" />
<span className="text-p3 font-medium">Roles</span>
</Link>
<Link
to="/accounts"
className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
@@ -72,14 +110,10 @@ export const BackofficeSidebar: FC = (): ReactElement => {
</nav>
</div>
{/* Log Out Button */}
<div className="w-full">
<hr className="mb-5 border-primary-200" />
<Button
onClick={() => {
navigate('/');
}}
onClick={signOut}
variant="text"
className="items-start justify-start gap-3 px-[8px] py-[10px] text-gray-700 hover:text-red-500 transition-colors w-full"
>
libs/ui/src/organisms/controlled-field/controlled-input-field.tsx
+44
View File
@@ -0,0 +1,44 @@
import {
InputField,
TInputFieldProps,
} from '@imphnen-frontend-service/ui/molecules';
import {
FieldValues,
useController,
UseControllerProps,
} from 'react-hook-form';
export type TControlledInputFieldProps<T extends FieldValues> =
UseControllerProps<T> & TInputFieldProps;
export const ControlledInputField = <T extends FieldValues>(
props: TControlledInputFieldProps<T>
) => {
const { field, fieldState } = useController<T>(props);
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
let value;
if (props.type === 'number') {
value = Number(e.target.value);
} else if (props.type === 'file') {
value = e.target.files?.[0];
} else {
value = e.target.value;
}
field.onChange(value);
};
const inputProps =
props.type === 'file'
? { ...props, ...field, value: undefined }
: { ...props, ...field };
return (
<InputField
error={fieldState.error?.message}
{...inputProps}
onChange={handleChange}
/>
);
};
libs/ui/src/organisms/controlled-field/index.ts
+1
View File
@@ -0,0 +1 @@
export * from './controlled-input-field';
libs/ui/src/organisms/datatable/datatable.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ export const DataTable = <T,>({
<div className="flex flex-col gap-8">
<div className="w-full overflow-x-auto">
<table className="w-full min-w-full text-base">
<thead className="bg-primary-50 mb-3 text-left">
<thead className="bg-primary-50 mb-3 text-left text-nowrap">
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
libs/ui/src/organisms/index.ts
+6 -5
View File
@@ -1,6 +1,7 @@
export * from './navbar';
export * from "./modals-gacha";
export * from "./auth-banner";
export * from './backoffice-sidebar'
export * from './datatable'
export * from './filter'
export * from './modals-gacha';
export * from './auth-banner';
export * from './backoffice-sidebar';
export * from './datatable';
export * from './filter';
export * from './controlled-field';
libs/ui/src/organisms/navbar/navbar.spec.tsx
+2 -2
View File
@@ -163,7 +163,7 @@ describe('Navbar', () => {
}
});
it('has correct ARIA role for navigation', () => {
it('has correct ARIA role for nav', () => {
const { container }: RenderResult = render(
<BrowserRouter>
<Navbar />
@@ -171,6 +171,6 @@ describe('Navbar', () => {
);
const header: HTMLElement | null = container.querySelector('header');
expect(header).toHaveAttribute('role', 'navigation');
expect(header).toHaveAttribute('role', 'nav');
});
});
libs/ui/src/organisms/navbar/navbar.tsx
+34 -20
View File
@@ -1,16 +1,19 @@
import { MenuOutlined } from '@ant-design/icons';
import { Button } from '@imphnen-frontend-service/ui/atoms';
import { FC, ReactElement, useState } from 'react';
import { Link } from 'react-router-dom';
import { Button } from '../../atoms/button';
import { useModalLogin, useSession } from '@imphnen-frontend-service/utils';
export const Navbar: FC = (): ReactElement => {
const [isDropdownOpen, setDropdownOpen] = useState(false);
const { session, signOut, isAuthenticated } = useSession();
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const { setShowModalLogin } = useModalLogin();
return (
<div className="bg-primary-50 w-full px-[32px] pt-[32px] md:px-[60px] md:pt-[60px] lg:px-[80px] sticky top-0 z-50">
<header
className="bg-white shadow-lg rounded-lg min-h-[47px] max-h-[47px] md:min-h-[60px] md:max-h-[60px] lg:min-h-[71px] lg:max-h-[71px] flex justify-between w-full max-w-[1280px] xl:mx-auto"
role="navigation"
role="nav"
>
<div className="flex w-full items-center justify-between p-4 md:px-[32px] md:py-[10px]">
<div className="flex items-center">
@@ -40,20 +43,27 @@ export const Navbar: FC = (): ReactElement => {
<Link to="#">Merch Gacha</Link>
</Button>
</li>
<li>
<Button
size="md"
className="lg:text-[19px] lg:max-h-[44px] text-neutral-50 hover:text-neutral-200 transition-colors"
>
<Link to="/login">Login</Link>
</Button>
</li>
{!isAuthenticated ? (
<li>
<Button onClick={() => setShowModalLogin(true)}>Login</Button>
</li>
) : (
<li className="flex gap-x-4">
<span className="text-lg">{session.user?.fullname}</span>
<div
onClick={signOut}
className="text-lg text-red-500 font-bold"
>
Logout
</div>
</li>
)}
</ul>
<button
className={`md:hidden duration-200 ${
isDropdownOpen ? 'transform rotate-90' : ''
}`}
onClick={() => setDropdownOpen(!isDropdownOpen)}
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
>
<MenuOutlined style={{ color: '#1a8ce6' }} />
</button>
@@ -77,14 +87,18 @@ export const Navbar: FC = (): ReactElement => {
Merch Gacha
</Link>
</li>
<li>
<Link
to="#"
className="block text-gray-600 transition-colors px-4 py-2 text-center font-semibold"
>
Login
</Link>
</li>
{!isAuthenticated ? (
<li>
<Button
onClick={() => setShowModalLogin(true)}
className="block w-full text-gray-100 transition-colors px-4 py-2 text-center font-semibold"
>
Login
</Button>
</li>
) : (
<li>{session.user?.fullname}</li>
)}
</ul>
</div>
)}