feat: add form components with styles for input, textarea, and input number
- Introduced new styles for form components including input, textarea, and input number. - Created a new TextArea component with status and variant support. - Updated global styles to include form variables and component styles. - Added type definitions for form components to ensure consistency. - Integrated new components into the main component index for easy access.
This commit is contained in:
Firman Ramdhani
Vendored
+11
@@ -0,0 +1,11 @@
|
||||
// packages/ui/env.d.ts
|
||||
|
||||
declare module '*.module.css' {
|
||||
const classes: { readonly [key: string]: string };
|
||||
export default classes;
|
||||
}
|
||||
|
||||
declare module '*.css' {
|
||||
const content: any;
|
||||
export default content;
|
||||
}
|
||||
@@ -14,6 +14,10 @@
|
||||
"dependencies": {
|
||||
"@repo/utils": "workspace:*",
|
||||
"@tailwindcss/vite": "^4.1.18",
|
||||
"rc-field-form": "^2.7.1",
|
||||
"rc-input": "^1.8.0",
|
||||
"rc-input-number": "^9.5.0",
|
||||
"rc-textarea": "^1.10.2",
|
||||
"react": "^19.2.3",
|
||||
"react-dom": "^19.2.3",
|
||||
"tailwind-merge": "^3.4.0",
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import RcForm from 'rc-field-form';
|
||||
import { FormProps } from '../types';
|
||||
|
||||
export default function FormControl<Values = any>({ children, ...props }: FormProps<Values>) {
|
||||
return <RcForm {...props}>{children}</RcForm>;
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import React, { ReactElement } from 'react';
|
||||
import { Field } from 'rc-field-form';
|
||||
import { FormItemProps } from '../types';
|
||||
|
||||
export default function FormItem(props: FormItemProps) {
|
||||
const { name, label, children, rules, valuePropName = 'value', initialValue, status: OverrideStatus } = props;
|
||||
|
||||
return (
|
||||
<Field name={name} rules={rules} valuePropName={valuePropName} initialValue={initialValue}>
|
||||
{(control, meta) => {
|
||||
const hasError = meta.errors.length > 0;
|
||||
const hasWarning = meta.warnings.length > 0;
|
||||
|
||||
const status = OverrideStatus ?? (hasError ? 'error' : hasWarning ? 'warning' : 'normal');
|
||||
|
||||
const isValid = React.isValidElement(children);
|
||||
const childElement = isValid ? (children as ReactElement<{ status?: any }>) : null;
|
||||
|
||||
// 3. Clone the child element to inject form control props and status
|
||||
const childNode = childElement ? React.cloneElement(childElement, { ...control, status }) : children;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col mb-4 w-full">
|
||||
{label && (
|
||||
<label className={`mb-1.5 text-sm font-medium ${hasError ? 'text-red-500' : 'text-gray-700'}`}>
|
||||
{label}
|
||||
{rules?.some((r: any) => r.required) && <span className="ml-1 text-red-500">*</span>}
|
||||
</label>
|
||||
)}
|
||||
|
||||
<div className="relative">{childNode}</div>
|
||||
|
||||
{hasError && <p className="mt-1.5 text-xs text-red-500">{meta.errors[0]}</p>}
|
||||
{hasWarning && <p className="mt-1.5 text-xs text-yellow-500">{meta.warnings[0]}</p>}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Field>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import React from 'react';
|
||||
import { useForm, List, FieldContext } from 'rc-field-form';
|
||||
import { FormProps } from '../types';
|
||||
|
||||
import FormControl from './form-control.component';
|
||||
import FormItem from './form-item.component';
|
||||
|
||||
/**
|
||||
* Internal Form component using forwardRef to handle RcForm instance
|
||||
*/
|
||||
const FormProvider = React.forwardRef(FormControl) as <Values extends object = any>(
|
||||
props: FormProps<Values> & { ref?: React.ForwardedRef<any> },
|
||||
) => React.ReactElement;
|
||||
|
||||
/**
|
||||
* Compound Component Pattern
|
||||
* Centralizes all form-related components and hooks under the 'Form' namespace
|
||||
*/
|
||||
type CompoundedComponent = typeof FormProvider & {
|
||||
Item: typeof FormItem;
|
||||
useForm: typeof useForm;
|
||||
List: typeof List;
|
||||
Provider: typeof FieldContext.Provider;
|
||||
};
|
||||
|
||||
// Assign sub-components and utilities to the main Form component
|
||||
const Form = FormProvider as CompoundedComponent;
|
||||
Form.Item = FormItem;
|
||||
Form.useForm = useForm;
|
||||
Form.List = List;
|
||||
Form.Provider = FieldContext.Provider;
|
||||
|
||||
export { Form };
|
||||
@@ -0,0 +1,8 @@
|
||||
export * from './types';
|
||||
export * from './form-provider';
|
||||
|
||||
export * from './input/input.component';
|
||||
export * from './input/input-password.component';
|
||||
export * from './input/input-number.component';
|
||||
|
||||
export * from './textarea/textarea.component';
|
||||
@@ -0,0 +1,26 @@
|
||||
import RcInputNumber from 'rc-input-number';
|
||||
import { InputNumberProps, InputStatusType, VALID_INPUT_STATUSES } from '../types';
|
||||
|
||||
// Handler Icons (Chevron Modern)
|
||||
const UpIcon = () => (
|
||||
<svg viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor" className="w-3 h-3">
|
||||
<path d="M8.5 6.5L12 10 5 10z" />
|
||||
</svg>
|
||||
);
|
||||
const DownIcon = () => (
|
||||
<svg viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor" className="w-3 h-3">
|
||||
<path d="M8.5 9.5L5 6 12 6z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const InputNumber = (props: InputNumberProps) => {
|
||||
const { status, className, variant = 'outlined', ...restProps } = props;
|
||||
const currentStatus: InputStatusType = status && VALID_INPUT_STATUSES.includes(status) ? status : 'normal';
|
||||
const computedClassName = [className, `input-number-status-${currentStatus}`, `input-number-variant-${variant}`]
|
||||
.filter(Boolean)
|
||||
.join(' ');
|
||||
|
||||
return (
|
||||
<RcInputNumber {...restProps} className={computedClassName} upHandler={<UpIcon />} downHandler={<DownIcon />} />
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,6 @@
|
||||
import { InputPasswordProps } from '../types';
|
||||
import { Input } from './input.component';
|
||||
|
||||
export const InputPassword = (props: InputPasswordProps) => {
|
||||
return <Input {...props} type="password" />;
|
||||
};
|
||||
@@ -0,0 +1,17 @@
|
||||
import RcInput from 'rc-input';
|
||||
import { InputProps, InputStatusType, VALID_INPUT_STATUSES } from '../types';
|
||||
|
||||
export const Input = (props: InputProps) => {
|
||||
const { status, className, variant = 'outlined', disabled, ...restProps } = props;
|
||||
const currentStatus: InputStatusType = status && VALID_INPUT_STATUSES.includes(status) ? status : 'normal';
|
||||
const computedClassName = [
|
||||
className,
|
||||
`input-status-${currentStatus}`,
|
||||
`input-variant-${variant}`,
|
||||
disabled ? 'rc-input-affix-wrapper-disabled' : '',
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ');
|
||||
|
||||
return <RcInput {...restProps} className={computedClassName} disabled={disabled} />;
|
||||
};
|
||||
@@ -0,0 +1,4 @@
|
||||
@import './input.style.css';
|
||||
@import './input-number.style.css';
|
||||
|
||||
@import './textarea.style.css';
|
||||
@@ -0,0 +1,274 @@
|
||||
@layer components {
|
||||
:root {
|
||||
--suffix-spacing: 12px;
|
||||
--input-height: 32px;
|
||||
--input-radius: 6px; /* Sesuai radius-base */
|
||||
--input-padding-x: 11px;
|
||||
--input-handler-width: 22px;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
1. LAYOUT & GEOMETRY (DO NOT TOUCH)
|
||||
========================================= */
|
||||
|
||||
/* CONTAINER UTAMA */
|
||||
.rc-input-number,
|
||||
.rc-input-number-affix-wrapper {
|
||||
@apply relative flex w-full items-center m-0 transition-all duration-200 ease-in-out text-sm bg-white;
|
||||
height: var(--input-height);
|
||||
line-height: 1.5715;
|
||||
border-radius: var(--input-radius);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
/* NESTED RESET (Fix Flexbox) */
|
||||
.rc-input-number-affix-wrapper .rc-input-number {
|
||||
@apply border-none shadow-none bg-transparent p-0 h-full static;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* INPUT FIELD */
|
||||
.rc-input-number-input {
|
||||
@apply w-full h-full bg-transparent border-none outline-none text-gray-900;
|
||||
padding: 0 var(--input-padding-x);
|
||||
appearance: textfield;
|
||||
}
|
||||
|
||||
/* Input Wrapper Helper */
|
||||
.rc-input-number-input-wrap {
|
||||
@apply w-full h-full;
|
||||
}
|
||||
|
||||
/* Padding Kanan Input (jika tanpa suffix wrapper) */
|
||||
.rc-input-number:not(.rc-input-number-affix-wrapper) .rc-input-number-input {
|
||||
padding-right: var(--input-handler-width);
|
||||
}
|
||||
|
||||
/* PREFIX & SUFFIX */
|
||||
.rc-input-number-prefix {
|
||||
@apply flex items-center ml-3 text-gray-500 z-10;
|
||||
}
|
||||
|
||||
.rc-input-number-suffix {
|
||||
@apply flex items-center text-gray-500 z-10;
|
||||
margin-right: var(--suffix-spacing);
|
||||
transition: margin-right 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
/* Animation Trigger */
|
||||
.rc-input-number:hover .rc-input-number-suffix,
|
||||
.rc-input-number-affix-wrapper:hover .rc-input-number-suffix,
|
||||
.rc-input-number-focused .rc-input-number-suffix,
|
||||
.rc-input-number-affix-wrapper-focused .rc-input-number-suffix,
|
||||
.rc-input-number:focus-within .rc-input-number-suffix,
|
||||
.rc-input-number-affix-wrapper:focus-within .rc-input-number-suffix {
|
||||
margin-right: calc(var(--suffix-spacing) + var(--input-handler-width));
|
||||
}
|
||||
|
||||
/* HANDLER WRAPPER */
|
||||
.rc-input-number-handler-wrap {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: var(--input-handler-width);
|
||||
@apply flex flex-col border-l border-gray-200 bg-white opacity-0 transition-opacity duration-200 overflow-hidden z-20;
|
||||
border-top-right-radius: var(--input-radius);
|
||||
border-bottom-right-radius: var(--input-radius);
|
||||
}
|
||||
|
||||
/* Show handlers logic */
|
||||
.rc-input-number:hover .rc-input-number-handler-wrap,
|
||||
.rc-input-number-affix-wrapper:hover .rc-input-number-handler-wrap,
|
||||
.rc-input-number-focused .rc-input-number-handler-wrap,
|
||||
.rc-input-number-affix-wrapper-focused .rc-input-number-handler-wrap,
|
||||
.rc-input-number:focus-within .rc-input-number-handler-wrap,
|
||||
.rc-input-number-affix-wrapper:focus-within .rc-input-number-handler-wrap {
|
||||
@apply opacity-100;
|
||||
}
|
||||
|
||||
.rc-input-number-handler {
|
||||
@apply flex items-center justify-center flex-1 text-gray-400 cursor-pointer transition-colors duration-100 bg-white;
|
||||
}
|
||||
.rc-input-number-handler:hover {
|
||||
@apply text-brand-600 bg-gray-50;
|
||||
height: 60%;
|
||||
}
|
||||
.rc-input-number-handler:active {
|
||||
@apply bg-gray-100;
|
||||
}
|
||||
.rc-input-number-handler-up {
|
||||
@apply border-b border-gray-200;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
2. SKINS, VARIANTS & STATUS
|
||||
(Matching your Input Text Logic)
|
||||
========================================= */
|
||||
|
||||
/* --- COMMON FOCUS STYLE (Brand Color) --- */
|
||||
/* Default focus for Normal status */
|
||||
.input-number-status-normal.rc-input-number-focused,
|
||||
.input-number-status-normal.rc-input-number-affix-wrapper-focused,
|
||||
.input-number-status-normal:focus-within {
|
||||
border-color: var(--color-brand-500) !important;
|
||||
box-shadow: 0 0 0 3px var(--color-brand-100) !important; /* Brand 200/100 for ring */
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
/* ====================
|
||||
VARIANT: OUTLINED
|
||||
==================== */
|
||||
|
||||
/* Normal */
|
||||
.input-number-variant-outlined.input-number-status-normal {
|
||||
@apply border-gray-300;
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-normal:hover {
|
||||
@apply border-brand-400; /* Atau var(--input-border-hover) */
|
||||
}
|
||||
|
||||
/* Error (Outlined) */
|
||||
.input-number-variant-outlined.input-number-status-error {
|
||||
border-color: var(--color-error-500) !important;
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-error:focus-within,
|
||||
.input-number-variant-outlined.input-number-status-error.rc-input-number-focused,
|
||||
.input-number-variant-outlined.input-number-status-error.rc-input-number-affix-wrapper-focused {
|
||||
box-shadow: 0 0 0 3px var(--color-error-100) !important;
|
||||
border-color: var(--color-error-500) !important;
|
||||
}
|
||||
|
||||
/* Warning (Outlined) */
|
||||
.input-number-variant-outlined.input-number-status-warning {
|
||||
border-color: var(--color-warning-500) !important;
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-warning:focus-within,
|
||||
.input-number-variant-outlined.input-number-status-warning.rc-input-number-focused,
|
||||
.input-number-variant-outlined.input-number-status-warning.rc-input-number-affix-wrapper-focused {
|
||||
box-shadow: 0 0 0 3px var(--color-warning-100) !important;
|
||||
border-color: var(--color-warning-500) !important;
|
||||
}
|
||||
|
||||
/* Success (Outlined) */
|
||||
.input-number-variant-outlined.input-number-status-success {
|
||||
border-color: var(--color-success-500) !important;
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-success:focus-within,
|
||||
.input-number-variant-outlined.input-number-status-success.rc-input-number-focused,
|
||||
.input-number-variant-outlined.input-number-status-success.rc-input-number-affix-wrapper-focused {
|
||||
box-shadow: 0 0 0 3px var(--color-success-100) !important;
|
||||
border-color: var(--color-success-500) !important;
|
||||
}
|
||||
|
||||
/* ====================
|
||||
VARIANT: FILLED
|
||||
==================== */
|
||||
|
||||
/* Normal Filled */
|
||||
.input-number-variant-filled.input-number-status-normal {
|
||||
/* Gunakan gray-100 atau var(--input-bg) jika gray */
|
||||
/* @apply border-transparent bg-gray-100; */
|
||||
@apply border-gray-300;
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-normal:hover {
|
||||
/* @apply bg-gray-200; */
|
||||
@apply border-brand-400; /* Atau var(--input-border-hover) */
|
||||
}
|
||||
/* Saat Focus, Filled Normal jadi Putih + Brand Border */
|
||||
.input-number-variant-filled.input-number-status-normal:focus-within,
|
||||
.input-number-variant-filled.input-number-status-normal.rc-input-number-focused,
|
||||
.input-number-variant-filled.input-number-status-normal.rc-input-number-affix-wrapper-focused {
|
||||
@apply bg-white border-brand-500;
|
||||
}
|
||||
|
||||
/* Error Filled (Colored BG) */
|
||||
.input-number-variant-filled.input-number-status-error {
|
||||
background-color: var(--color-error-50) !important;
|
||||
border-color: var(--color-error-500) !important;
|
||||
color: var(--color-error-600);
|
||||
}
|
||||
/* Fix: Filled Error saat Focus -> Background Putih */
|
||||
.input-number-variant-filled.input-number-status-error:focus-within,
|
||||
.input-number-variant-filled.input-number-status-error.rc-input-number-focused,
|
||||
.input-number-variant-filled.input-number-status-error.rc-input-number-affix-wrapper-focused {
|
||||
background-color: #fff !important;
|
||||
box-shadow: 0 0 0 3px var(--color-error-100) !important;
|
||||
}
|
||||
|
||||
/* Warning Filled (Colored BG) */
|
||||
.input-number-variant-filled.input-number-status-warning {
|
||||
background-color: var(--color-warning-50) !important;
|
||||
border-color: var(--color-warning-500) !important;
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-warning:focus-within,
|
||||
.input-number-variant-filled.input-number-status-warning.rc-input-number-focused,
|
||||
.input-number-variant-filled.input-number-status-warning.rc-input-number-affix-wrapper-focused {
|
||||
background-color: #fff !important;
|
||||
box-shadow: 0 0 0 3px var(--color-warning-100) !important;
|
||||
}
|
||||
|
||||
/* Success Filled (Colored BG) */
|
||||
.input-number-variant-filled.input-number-status-success {
|
||||
background-color: var(--color-success-50) !important;
|
||||
border-color: var(--color-success-500) !important;
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-success:focus-within,
|
||||
.input-number-variant-filled.input-number-status-success.rc-input-number-focused,
|
||||
.input-number-variant-filled.input-number-status-success.rc-input-number-affix-wrapper-focused {
|
||||
background-color: #fff !important;
|
||||
box-shadow: 0 0 0 3px var(--color-success-100) !important;
|
||||
}
|
||||
|
||||
/* Info Filled (Colored BG) */
|
||||
.input-number-variant-filled.input-number-status-info {
|
||||
background-color: var(--color-info-50) !important;
|
||||
border-color: var(--color-info-500) !important;
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-info:focus-within,
|
||||
.input-number-variant-filled.input-number-status-info.rc-input-number-focused,
|
||||
.input-number-variant-filled.input-number-status-info.rc-input-number-affix-wrapper-focused {
|
||||
background-color: #fff !important;
|
||||
box-shadow: 0 0 0 3px var(--color-info-100) !important;
|
||||
}
|
||||
|
||||
/* ====================
|
||||
HANDLER BORDER SYNC
|
||||
==================== */
|
||||
/* Agar garis kiri handler warnanya sama dengan border input saat status aktif */
|
||||
|
||||
.input-number-status-error .rc-input-number-handler-wrap {
|
||||
border-left-color: var(--color-error-500) !important;
|
||||
}
|
||||
.input-number-status-warning .rc-input-number-handler-wrap {
|
||||
border-left-color: var(--color-warning-500) !important;
|
||||
}
|
||||
.input-number-status-success .rc-input-number-handler-wrap {
|
||||
border-left-color: var(--color-success-500) !important;
|
||||
}
|
||||
.input-number-status-info .rc-input-number-handler-wrap {
|
||||
border-left-color: var(--color-info-500) !important;
|
||||
}
|
||||
|
||||
/* ====================
|
||||
DISABLED STATE
|
||||
==================== */
|
||||
.rc-input-number-disabled,
|
||||
.rc-input-number-affix-wrapper-disabled {
|
||||
@apply bg-gray-50 border-gray-200 cursor-not-allowed opacity-70;
|
||||
/* Force styles to override status colors */
|
||||
background-color: var(--color-gray-50) !important;
|
||||
border-color: var(--color-gray-200) !important;
|
||||
}
|
||||
.rc-input-number-disabled .rc-input-number-input,
|
||||
.rc-input-number-affix-wrapper-disabled .rc-input-number-input {
|
||||
@apply cursor-not-allowed text-gray-400;
|
||||
}
|
||||
/* Hide handler on disabled */
|
||||
.rc-input-number-disabled .rc-input-number-handler-wrap,
|
||||
.rc-input-number-affix-wrapper-disabled .rc-input-number-handler-wrap {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,240 @@
|
||||
@layer components {
|
||||
/* =========================================
|
||||
BASE RESET
|
||||
========================================= */
|
||||
.rc-input {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: var(--input-height);
|
||||
padding: 0 12px;
|
||||
font-size: var(--input-font-size);
|
||||
line-height: 1.5;
|
||||
color: var(--input-text);
|
||||
|
||||
/* Default: White Background (No Color) */
|
||||
background-color: var(--input-bg);
|
||||
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--input-radius);
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.rc-input::placeholder {
|
||||
color: var(--input-placeholder);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.rc-input:disabled {
|
||||
background-color: var(--disabled-bg) !important;
|
||||
color: var(--disabled-text);
|
||||
border-color: var(--disabled-border) !important;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
1. VARIANT: OUTLINED
|
||||
Rule: Never show colored background.
|
||||
Only change border color.
|
||||
========================================= */
|
||||
|
||||
/* Outlined - Normal */
|
||||
.input-variant-outlined.input-status-normal {
|
||||
border-color: var(--input-border);
|
||||
}
|
||||
.input-variant-outlined.input-status-normal:hover {
|
||||
border-color: var(--input-border-hover);
|
||||
}
|
||||
.input-variant-outlined.input-status-normal:focus {
|
||||
border-color: var(--focus-border-color);
|
||||
box-shadow: 0 0 0 3px var(--focus-ring-color);
|
||||
}
|
||||
|
||||
/* Outlined - Error (NO Background, RED Border) */
|
||||
.input-variant-outlined.input-status-error {
|
||||
background-color: var(--input-bg); /* Tetap Putih */
|
||||
border-color: var(--color-error-500);
|
||||
}
|
||||
.input-variant-outlined.input-status-error:hover,
|
||||
.input-variant-outlined.input-status-error:focus {
|
||||
border-color: var(--color-error-600);
|
||||
box-shadow: 0 0 0 3px var(--color-error-100);
|
||||
}
|
||||
|
||||
/* Outlined - Warning (NO Background, AMBER Border) */
|
||||
.input-variant-outlined.input-status-warning {
|
||||
background-color: var(--input-bg); /* Tetap Putih */
|
||||
border-color: var(--color-warning-500);
|
||||
}
|
||||
.input-variant-outlined.input-status-warning:hover,
|
||||
.input-variant-outlined.input-status-warning:focus {
|
||||
border-color: var(--color-warning-600);
|
||||
box-shadow: 0 0 0 3px var(--color-warning-100);
|
||||
}
|
||||
|
||||
/* Outlined - Success (NO Background, GREEN Border) */
|
||||
.input-variant-outlined.input-status-success {
|
||||
background-color: var(--input-bg); /* Tetap Putih */
|
||||
border-color: var(--color-success-500);
|
||||
}
|
||||
.input-variant-outlined.input-status-success:hover,
|
||||
.input-variant-outlined.input-status-success:focus {
|
||||
border-color: var(--color-success-600);
|
||||
box-shadow: 0 0 0 3px var(--color-success-100);
|
||||
}
|
||||
|
||||
/* Outlined - Info (NO Background, BLUE Border) */
|
||||
.input-variant-outlined.input-status-info {
|
||||
background-color: var(--input-bg); /* Tetap Putih */
|
||||
border-color: var(--color-info-500);
|
||||
}
|
||||
.input-variant-outlined.input-status-info:hover,
|
||||
.input-variant-outlined.input-status-info:focus {
|
||||
border-color: var(--color-info-600);
|
||||
box-shadow: 0 0 0 3px var(--color-info-100);
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
2. VARIANT: FILLED
|
||||
Rule: Normal = White Bg.
|
||||
Error/Warning/Success/Info = Colored Bg.
|
||||
========================================= */
|
||||
|
||||
/* Filled - Normal (Sama seperti Outlined - No Background) */
|
||||
.input-variant-filled.input-status-normal {
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--input-border); /* Tetap butuh border agar konsisten */
|
||||
}
|
||||
.input-variant-filled.input-status-normal:hover {
|
||||
border-color: var(--input-border-hover);
|
||||
}
|
||||
.input-variant-filled.input-status-normal:focus {
|
||||
border-color: var(--focus-border-color);
|
||||
box-shadow: 0 0 0 3px var(--focus-ring-color);
|
||||
}
|
||||
|
||||
/* Filled - Error (RED Background + Red Border) */
|
||||
.input-variant-filled.input-status-error {
|
||||
background-color: var(--color-error-50); /* Background Merah Muda */
|
||||
border-color: var(--color-error-500);
|
||||
color: var(--color-error-600);
|
||||
}
|
||||
.input-variant-filled.input-status-error:focus {
|
||||
background-color: #fff; /* Optional: Balik putih saat diketik */
|
||||
box-shadow: 0 0 0 3px var(--color-error-100);
|
||||
}
|
||||
|
||||
/* Filled - Warning (AMBER Background + Amber Border) */
|
||||
.input-variant-filled.input-status-warning {
|
||||
background-color: var(--color-warning-50); /* Background Kuning Muda */
|
||||
border-color: var(--color-warning-500);
|
||||
}
|
||||
.input-variant-filled.input-status-warning:focus {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 0 3px var(--color-warning-100);
|
||||
}
|
||||
|
||||
/* Filled - Success */
|
||||
.input-variant-filled.input-status-success {
|
||||
background-color: var(--color-success-50); /* Background Kuning Muda */
|
||||
border-color: var(--color-success-500);
|
||||
}
|
||||
.input-variant-filled.input-status-success:focus {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 0 3px var(--color-success-100);
|
||||
}
|
||||
|
||||
/* Filled - Info */
|
||||
.input-variant-filled.input-status-info {
|
||||
background-color: var(--color-info-50); /* Background Kuning Muda */
|
||||
border-color: var(--color-info-500);
|
||||
}
|
||||
.input-variant-filled.input-status-info:focus {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 0 3px var(--color-info-100);
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
SUPPORT FOR PREFIX & SUFFIX (AFFIX)
|
||||
========================================= */
|
||||
|
||||
/* 1. Wrapper Styling */
|
||||
|
||||
.rc-input-affix-wrapper-disabled {
|
||||
background-color: var(--disabled-bg) !important;
|
||||
color: var(--disabled-text);
|
||||
border-color: var(--disabled-border) !important;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.rc-input-affix-wrapper {
|
||||
@apply relative flex items-center w-full transition-all duration-200;
|
||||
height: var(--input-height);
|
||||
padding: 0 12px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--input-radius);
|
||||
background-color: var(--input-bg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 2. Reset Inner Input agar tidak double styling */
|
||||
.rc-input-affix-wrapper .rc-input {
|
||||
@apply border-none p-0 bg-transparent w-full h-full;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* 3. Prefix/Suffix Icon Spacing */
|
||||
.rc-input-prefix {
|
||||
@apply mr-2 flex items-center self-center shrink-0;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.rc-input-suffix {
|
||||
@apply ml-2 flex items-center self-center shrink-0;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
/* --------------------------------------
|
||||
LOGIC VARIANT & STATUS UNTUK WRAPPER
|
||||
-------------------------------------- */
|
||||
|
||||
/* Outlined - Normal */
|
||||
.input-variant-outlined.input-status-normal.rc-input-affix-wrapper {
|
||||
border-color: var(--input-border);
|
||||
}
|
||||
|
||||
/* Outlined - Error */
|
||||
.input-variant-outlined.input-status-error.rc-input-affix-wrapper {
|
||||
border-color: var(--color-error-500);
|
||||
}
|
||||
|
||||
/* Filled - Error/Warning (Background Berwarna) */
|
||||
.input-variant-filled.input-status-error.rc-input-affix-wrapper {
|
||||
background-color: var(--color-error-50);
|
||||
border-color: var(--color-error-500);
|
||||
}
|
||||
|
||||
.input-variant-filled.input-status-warning.rc-input-affix-wrapper {
|
||||
background-color: var(--color-warning-50);
|
||||
border-color: var(--color-warning-500);
|
||||
}
|
||||
|
||||
.input-variant-filled.input-status-success.rc-input-affix-wrapper {
|
||||
background-color: var(--color-success-50);
|
||||
border-color: var(--color-success-500);
|
||||
}
|
||||
|
||||
.input-variant-filled.input-status-info.rc-input-affix-wrapper {
|
||||
background-color: var(--color-info-50);
|
||||
border-color: var(--color-info-500);
|
||||
}
|
||||
|
||||
/* State Focus (Input aktif) */
|
||||
.rc-input-affix-wrapper-focused {
|
||||
background-color: #fff !important;
|
||||
border-color: var(--focus-border-color) !important;
|
||||
box-shadow: 0 0 0 3px var(--focus-ring-color) !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,161 @@
|
||||
@layer components {
|
||||
/* =========================================
|
||||
TEXTAREA STYLES
|
||||
Adapts the same logic as Input but for Multiline
|
||||
========================================= */
|
||||
|
||||
.rc-textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 80px; /* Default height for textarea */
|
||||
padding: 8px 12px; /* Needs vertical padding unlike Input */
|
||||
|
||||
font-size: var(--input-font-size);
|
||||
line-height: 1.5;
|
||||
color: var(--input-text);
|
||||
|
||||
/* Default Background (White) */
|
||||
background-color: var(--input-bg);
|
||||
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--input-radius);
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
outline: none;
|
||||
resize: vertical; /* Only allow vertical resizing */
|
||||
}
|
||||
|
||||
.rc-textarea::placeholder {
|
||||
color: var(--input-placeholder);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.rc-textarea:disabled {
|
||||
background-color: var(--disabled-bg) !important;
|
||||
color: var(--disabled-text);
|
||||
border-color: var(--disabled-border) !important;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
1. VARIANT: OUTLINED (Textarea)
|
||||
Always White Background. Changes Border only.
|
||||
========================================= */
|
||||
|
||||
/* Normal */
|
||||
.textarea-variant-outlined.textarea-status-normal {
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--input-border);
|
||||
}
|
||||
.textarea-variant-outlined.textarea-status-normal:hover {
|
||||
border-color: var(--input-border-hover);
|
||||
}
|
||||
.textarea-variant-outlined.textarea-status-normal:focus {
|
||||
border-color: var(--focus-border-color);
|
||||
box-shadow: 0 0 0 3px var(--focus-ring-color);
|
||||
}
|
||||
|
||||
/* Error (White BG, Red Border) */
|
||||
.textarea-variant-outlined.textarea-status-error {
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--color-error-500);
|
||||
}
|
||||
.textarea-variant-outlined.textarea-status-error:hover,
|
||||
.textarea-variant-outlined.textarea-status-error:focus {
|
||||
border-color: var(--color-error-600);
|
||||
box-shadow: 0 0 0 3px var(--color-error-100);
|
||||
}
|
||||
|
||||
/* Warning (White BG, Amber Border) */
|
||||
.textarea-variant-outlined.textarea-status-warning {
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--color-warning-500);
|
||||
}
|
||||
.textarea-variant-outlined.textarea-status-warning:hover,
|
||||
.textarea-variant-outlined.textarea-status-warning:focus {
|
||||
border-color: var(--color-warning-600);
|
||||
box-shadow: 0 0 0 3px var(--color-warning-100);
|
||||
}
|
||||
|
||||
/* Success (White BG, Green Border) */
|
||||
.textarea-variant-outlined.textarea-status-success {
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--color-success-500);
|
||||
}
|
||||
.textarea-variant-outlined.textarea-status-success:hover,
|
||||
.textarea-variant-outlined.textarea-status-success:focus {
|
||||
border-color: var(--color-success-600);
|
||||
box-shadow: 0 0 0 3px var(--color-success-100);
|
||||
}
|
||||
|
||||
/* Info (White BG, Green Border) */
|
||||
.textarea-variant-outlined.textarea-status-info {
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--color-info-500);
|
||||
}
|
||||
.textarea-variant-outlined.textarea-status-info:hover,
|
||||
.textarea-variant-outlined.textarea-status-info:focus {
|
||||
border-color: var(--color-info-600);
|
||||
box-shadow: 0 0 0 3px var(--color-info-100);
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
2. VARIANT: FILLED (Textarea)
|
||||
Normal = White.
|
||||
Error/Warning/Success/Info = Colored BG.
|
||||
========================================= */
|
||||
|
||||
/* Normal (Behaves like Outlined - White BG) */
|
||||
.textarea-variant-filled.textarea-status-normal {
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--input-border);
|
||||
}
|
||||
.textarea-variant-filled.textarea-status-normal:hover {
|
||||
border-color: var(--input-border-hover);
|
||||
}
|
||||
.textarea-variant-filled.textarea-status-normal:focus {
|
||||
border-color: var(--focus-border-color);
|
||||
box-shadow: 0 0 0 3px var(--focus-ring-color);
|
||||
}
|
||||
|
||||
/* Error (Red BG + Red Border) */
|
||||
.textarea-variant-filled.textarea-status-error {
|
||||
background-color: var(--color-error-50);
|
||||
border-color: var(--color-error-500);
|
||||
color: var(--color-error-600);
|
||||
}
|
||||
.textarea-variant-filled.textarea-status-error:focus {
|
||||
background-color: #fff; /* Optional: White on focus */
|
||||
box-shadow: 0 0 0 3px var(--color-error-100);
|
||||
}
|
||||
|
||||
/* Warning (Amber BG + Amber Border) */
|
||||
.textarea-variant-filled.textarea-status-warning {
|
||||
background-color: var(--color-warning-50);
|
||||
border-color: var(--color-warning-500);
|
||||
}
|
||||
.textarea-variant-filled.textarea-status-warning:focus {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 0 3px var(--color-warning-100);
|
||||
}
|
||||
|
||||
/* Success (Green BG + Green Border) */
|
||||
.textarea-variant-filled.textarea-status-success {
|
||||
background-color: var(--color-success-50);
|
||||
border-color: var(--color-success-500);
|
||||
}
|
||||
.textarea-variant-filled.textarea-status-success:focus {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 0 3px var(--color-success-100);
|
||||
}
|
||||
|
||||
/* Info (Blue BG + Blue Border) */
|
||||
.textarea-variant-filled.textarea-status-info {
|
||||
background-color: var(--color-info-50);
|
||||
border-color: var(--color-info-500);
|
||||
}
|
||||
.textarea-variant-filled.textarea-status-info:focus {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 0 3px var(--color-info-100);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import RcTextArea from 'rc-textarea';
|
||||
import { InputStatusType, TextAreaProps, VALID_INPUT_STATUSES } from '../types';
|
||||
|
||||
export const TextArea = (props: TextAreaProps) => {
|
||||
const { status, className, variant = 'outlined', ...restProps } = props;
|
||||
const currentStatus: InputStatusType = status && VALID_INPUT_STATUSES.includes(status) ? status : 'normal';
|
||||
const computedClassName = [className, `textarea-status-${currentStatus}`, `textarea-variant-${variant}`]
|
||||
.filter(Boolean)
|
||||
.join(' ');
|
||||
|
||||
return <RcTextArea className={computedClassName} {...restProps} />;
|
||||
};
|
||||
@@ -0,0 +1,54 @@
|
||||
import type { FormProps as RcFormProps } from 'rc-field-form';
|
||||
import type { Rule } from 'rc-field-form/lib/interface';
|
||||
import { ReactNode, ReactElement } from 'react';
|
||||
import { InputProps as RcInputProps } from 'rc-input';
|
||||
import { TextAreaProps as RcTextAreaProps } from 'rc-textarea';
|
||||
import { InputNumberProps as RcInputNumberProps } from 'rc-input-number';
|
||||
|
||||
/**
|
||||
* Define possible input statuses
|
||||
*/
|
||||
export type InputStatusType = 'normal' | 'error' | 'warning' | 'success' | 'info';
|
||||
export const VALID_INPUT_STATUSES: InputStatusType[] = ['normal', 'error', 'warning', 'success', 'info'];
|
||||
|
||||
/**
|
||||
* Define form props
|
||||
*/
|
||||
export interface FormProps<Values = any> extends Omit<RcFormProps<Values>, 'children'> {
|
||||
children?: ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Define form item props
|
||||
*/
|
||||
export interface FormItemProps {
|
||||
name?: string | (string | number)[];
|
||||
label?: ReactNode;
|
||||
children: ReactElement;
|
||||
rules?: Rule[];
|
||||
valuePropName?: string;
|
||||
initialValue?: any;
|
||||
status?: InputStatusType;
|
||||
}
|
||||
|
||||
/**
|
||||
* Define base component props
|
||||
*/
|
||||
interface BaseComponentProps {
|
||||
status?: InputStatusType;
|
||||
variant?: 'outlined' | 'filled';
|
||||
}
|
||||
|
||||
/**
|
||||
* Define specific component props
|
||||
*/
|
||||
export interface InputProps extends RcInputProps, BaseComponentProps {}
|
||||
|
||||
/**
|
||||
* Extend specific component props from base props
|
||||
* This ensures consistency across different input components
|
||||
* and allows for shared properties like 'status'
|
||||
*/
|
||||
export interface InputPasswordProps extends InputProps {}
|
||||
export interface InputNumberProps extends RcInputNumberProps, BaseComponentProps {}
|
||||
export interface TextAreaProps extends RcTextAreaProps, BaseComponentProps {}
|
||||
@@ -12,3 +12,5 @@ export * from './system-pages/maintenance';
|
||||
export * from './system-pages/not-found';
|
||||
|
||||
export * from './button/button';
|
||||
|
||||
export * from './forms';
|
||||
|
||||
+45
-12
@@ -1,6 +1,9 @@
|
||||
@import 'tailwindcss';
|
||||
@source "../src";
|
||||
|
||||
/* Vendor overrides */
|
||||
@import './components/forms/styles/form.style.css';
|
||||
|
||||
/* =========================================
|
||||
BASE STYLES & RESETS
|
||||
Ensures consistent typography and form styling
|
||||
@@ -66,20 +69,29 @@
|
||||
3. SEMANTIC COLORS (Status Indicators)
|
||||
Professional colors for business contexts (errors, success, warnings)
|
||||
========================================= */
|
||||
--color-red-50: #fff5f5;
|
||||
--color-red-100: #ffe3e3;
|
||||
--color-red-500: #d93025; /* Negative status / Error messages */
|
||||
--color-red-600: #b91c1c;
|
||||
/* Error - Rose/Ruby Soft Palette */
|
||||
--color-error-50: #fef2f2;
|
||||
--color-error-100: #fee2e2;
|
||||
--color-error-500: #ef4444; /* Standard Modern Red */
|
||||
--color-error-600: #dc2626;
|
||||
|
||||
--color-green-50: #f6ffed;
|
||||
--color-green-100: #d9f7be;
|
||||
--color-green-500: #237804; /* Positive status / Success messages */
|
||||
--color-green-600: #135200;
|
||||
/* Success - Emerald/Mint Soft Palette */
|
||||
--color-success-50: #f0fdf4;
|
||||
--color-success-100: #dcfce7;
|
||||
--color-success-500: #22c55e; /* Modern Green, more vibrant but clean */
|
||||
--color-success-600: #16a34a;
|
||||
|
||||
--color-amber-50: #fffbe6;
|
||||
--color-amber-100: #fff1b8;
|
||||
--color-amber-500: #faad14; /* Critical / Warning notifications */
|
||||
--color-amber-600: #d48806;
|
||||
/* Warning - Amber/Honey Soft Palette */
|
||||
--color-warning-50: #fffbeb;
|
||||
--color-warning-100: #fef3c7;
|
||||
--color-warning-500: #f59e0b; /* Warm Amber, less "harsh" than pure orange */
|
||||
--color-warning-600: #d97706;
|
||||
|
||||
/* Info - Sky/Azure Soft Palette (Optional for ERP) */
|
||||
--color-info-50: #f0f9ff;
|
||||
--color-info-100: #e0f2fe;
|
||||
--color-info-500: #0ea5e9;
|
||||
--color-info-600: #0284c7;
|
||||
|
||||
/* =========================================
|
||||
4. TYPOGRAPHY (Base font size: 13px)
|
||||
@@ -122,4 +134,25 @@
|
||||
--shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.05);
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
/* =========================================
|
||||
FORM VARIABLES (Compact ERP Settings)
|
||||
========================================= */
|
||||
--input-height: 34px; /* Compact height for ERP */
|
||||
--input-radius: 6px; /* Modern slightly rounded */
|
||||
--input-font-size: 14px;
|
||||
--input-padding-x: 11px;
|
||||
--input-handler-width: 22px;
|
||||
--input-bg: #ffffff;
|
||||
--input-border: #d1d5db; /* Slate-300 equivalent */
|
||||
--input-border-hover: var(--color-brand-400);
|
||||
--input-placeholder: #9ca3af; /* Slate-400 equivalent */
|
||||
--input-text: #1f2937; /* Slate-800 equivalent */
|
||||
|
||||
--focus-ring-color: var(--color-brand-100);
|
||||
--focus-border-color: var(--color-brand-500);
|
||||
|
||||
--disabled-bg: #f3f4f6;
|
||||
--disabled-text: #9ca3af;
|
||||
--disabled-border: #e5e7eb;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user