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

Merge pull request #1 from IMPHNEN/feat/component-migrate

Browse Source 
Migrate component from 'imphnen-gacha' repository
This commit is contained in:
Maulana Sodiqin
2025-03-16 01:45:33 +07:00
committed by GitHub
parent 203ee5de97 a07e3c21d6
commit 01621a8786
11 changed files with 450 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
libs/ui/src/atoms/index.ts
+3
View File
@@ -1 +1,4 @@
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";
libs/ui/src/atoms/textarea/textarea.stories.tsx
+49
View File
@@ -0,0 +1,49 @@
import { Meta, StoryObj } from "@storybook/react";
import { Textarea } from "./textarea";
const meta: Meta = {
title: "Components/Textarea",
component: Textarea,
argTypes: {
size: {
control: "select",
options: ["sm", "md", "lg"],
},
},
};
export default meta;
type Story = StoryObj<typeof Textarea>;
export const Large: Story = {
args: {
size: "lg",
placeholder: "Placeholder",
},
};
export const Medium: Story = {
args: {
size: "md",
},
};
export const Small: Story = {
args: {
size: "sm",
},
};
export const Disabled: Story = {
args: {
size: "md",
disabled: true,
},
};
export const WithError: Story = {
args: {
size: "md",
error: "Error message",
},
};
libs/ui/src/atoms/textarea/textarea.tsx
+59
View File
@@ -0,0 +1,59 @@
import { cn } from '@imphnen-frontend-service/utils';
import {
DetailedHTMLProps,
FC,
ReactElement,
TextareaHTMLAttributes,
} from 'react';
type TTextareaSize = 'sm' | 'md' | 'lg';
type TTextareaProps = Omit<
DetailedHTMLProps<
TextareaHTMLAttributes<HTMLTextAreaElement>,
HTMLTextAreaElement
>,
'size'
> & {
size?: TTextareaSize;
error?: string;
};
const sizeClasses: Record<TTextareaSize, string> = {
sm: 'text-[10px]',
md: 'text-[12px]',
lg: 'text-[15px]',
};
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 Textarea: FC<TTextareaProps> = ({
size = 'md',
placeholder = 'Placeholder',
disabled,
error,
className,
...rest
}): ReactElement => {
const mergedClassName = cn(
'rounded-md border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 px-[12px] py-[8px] invalid:border-danger-500 invalid:text-danger-500',
sizeClasses[size],
disabled && disabledClass,
error && errorClass,
className
);
return (
<>
<textarea
className={mergedClassName}
placeholder={placeholder}
disabled={disabled}
style={{ resize: disabled ? 'none' : 'both' }}
{...rest}
></textarea>
{error && <p className="text-danger-500 text-xs">{error}</p>}
</>
);
};