eigen/trackgo-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

feat: Refactor TextArea component and styles for improved usability and consistency

Browse Source 
- Updated textarea styles to utilize CSS variables for dimensions and padding.
- Enhanced placeholder styling and added disabled state styles.
- Refactored TextArea component to use forwardRef and updated status handling.
- Changed input statuses from 'normal' to 'default' for better clarity.
- Introduced global decimal separator management in CurrencyService.
- Updated tests to cover new decimal separator functionality.
- Cleaned up global CSS for better organization and readability.
- Removed deprecated rc-component dependencies in favor of @rc-component packages.
This commit is contained in:
Firman Ramdhani
2026-01-27 19:47:06 +07:00
parent 0deaff6e18
commit 1e1d46cbb5
18 changed files with 942 additions and 712 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/package.json
+4 -4
View File
@@ -12,12 +12,12 @@
"test:watch": "vitest --watch"
},
"dependencies": {
"@rc-component/form": "^1.6.2",
"@rc-component/input": "^1.1.2",
"@rc-component/input-number": "^1.6.2",
"@rc-component/textarea": "^1.1.2",
"@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",
packages/ui/src/components/forms/form-provider/form-control.component.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import RcForm from 'rc-field-form';
import RcForm from '@rc-component/form';
import { FormProps } from '../types';
export default function FormControl<Values = any>({ children, ...props }: FormProps<Values>) {
packages/ui/src/components/forms/form-provider/form-item.component.tsx
+11 -5
View File
@@ -1,5 +1,6 @@
// form-item.component.tsx
import React, { ReactElement } from 'react';
import { Field } from 'rc-field-form';
import { Field } from '@rc-component/form';
import { FormItemProps } from '../types';
export default function FormItem(props: FormItemProps) {
@@ -8,23 +9,28 @@ export default function FormItem(props: FormItemProps) {
return (
<Field name={name} rules={rules} valuePropName={valuePropName} initialValue={initialValue}>
{(control, meta) => {
const hasError = meta.errors.length > 0;
const hasWarning = meta.warnings.length > 0;
// Defensive check: tambahkan ?. untuk keamanan di versi baru
const hasError = meta.errors && meta.errors.length > 0;
const hasWarning = meta.warnings && 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
// Clone element logic tetap dipertahankan
const childNode = childElement ? React.cloneElement(childElement, { ...control, status }) : children;
// Logic pengecekan 'required' pada rules
// Note: Pastikan rule object memiliki properti 'required', karena Rule juga bisa berupa function.
const isRequired = rules?.some((r: any) => r && typeof r === 'object' && r.required);
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>}
{isRequired && <span className="ml-1 text-red-500">*</span>}
</label>
)}
packages/ui/src/components/forms/form-provider/index.tsx
+3 -6
View File
@@ -1,5 +1,6 @@
// index.ts
import React from 'react';
import { useForm, List, FieldContext } from 'rc-field-form';
import { useForm, List, FieldContext } from '@rc-component/form';
import { FormProps } from '../types';
import FormControl from './form-control.component';
@@ -12,10 +13,6 @@ const FormProvider = React.forwardRef(FormControl) as <Values extends object = a
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;
@@ -23,7 +20,7 @@ type CompoundedComponent = typeof FormProvider & {
Provider: typeof FieldContext.Provider;
};
// Assign sub-components and utilities to the main Form component
// Assign sub-components and utilities
const Form = FormProvider as CompoundedComponent;
Form.Item = FormItem;
Form.useForm = useForm;
packages/ui/src/components/forms/input/input-number.component.tsx
+30 -13
View File
@@ -1,26 +1,43 @@
import RcInputNumber from 'rc-input-number';
import { forwardRef } from 'react';
import RcInputNumber from '@rc-component/input-number';
import { InputNumberProps, InputStatusType, VALID_INPUT_STATUSES } from '../types';
// Handler Icons (Chevron Modern)
// Kita bungkus dengan span agar styling flexbox lebih mudah diatur nanti
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>
<span className="input-number-handler-up-inner flex items-center justify-center w-full h-full">
<svg viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor" className="w-2.5 h-2.5">
<path d="M8.5 6.5L12 10 5 10z" />
</svg>
</span>
);
export const InputNumber = (props: InputNumberProps) => {
const DownIcon = () => (
<span className="input-number-handler-down-inner flex items-center justify-center w-full h-full">
<svg viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor" className="w-2.5 h-2.5">
<path d="M8.5 9.5L5 6 12 6z" />
</svg>
</span>
);
export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>((props, ref) => {
const { status, className, variant = 'outlined', ...restProps } = props;
const currentStatus: InputStatusType = status && VALID_INPUT_STATUSES.includes(status) ? status : 'normal';
const currentStatus: InputStatusType = status && VALID_INPUT_STATUSES.includes(status) ? status : 'default';
const computedClassName = [className, `input-number-status-${currentStatus}`, `input-number-variant-${variant}`]
.filter(Boolean)
.join(' ');
return (
<RcInputNumber {...restProps} className={computedClassName} upHandler={<UpIcon />} downHandler={<DownIcon />} />
<RcInputNumber
ref={ref}
{...restProps}
className={computedClassName}
upHandler={<UpIcon />}
downHandler={<DownIcon />}
/>
);
};
});
InputNumber.displayName = 'InputNumber';
packages/ui/src/components/forms/input/input-password.component.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import { useState } from 'react';
import { InputPasswordProps } from '../types';
import { Input } from './input.component';
packages/ui/src/components/forms/input/input.component.tsx
+15 -6
View File
@@ -1,17 +1,26 @@
import RcInput from 'rc-input';
import { forwardRef } from 'react';
import RcInput, { InputRef, InputProps as RcInputProps } from '@rc-component/input';
import { InputProps, InputStatusType, VALID_INPUT_STATUSES } from '../types';
export const Input = (props: InputProps) => {
export const Input = forwardRef<InputRef, InputProps>((props, ref) => {
const { status, className, variant = 'outlined', disabled, ...restProps } = props;
const currentStatus: InputStatusType = status && VALID_INPUT_STATUSES.includes(status) ? status : 'normal';
// Validasi status agar aman
const currentStatus: InputStatusType = status && VALID_INPUT_STATUSES.includes(status) ? status : 'default';
// Construct classname
// Note: class 'rc-input-disabled' biasanya otomatis ditambahkan oleh library jika disabled={true}
const computedClassName = [
className,
`input-status-${currentStatus}`,
`input-variant-${variant}`,
disabled ? 'rc-input-affix-wrapper-disabled' : '',
// Kita tambahkan class helper ini manual jika ingin styling spesifik wrapper saat disabled
disabled ? 'input-disabled' : '',
]
.filter(Boolean)
.join(' ');
return <RcInput {...restProps} className={computedClassName} disabled={disabled} />;
};
return <RcInput ref={ref} {...restProps} disabled={disabled} className={computedClassName} />;
});
Input.displayName = 'Input';
packages/ui/src/components/forms/styles/input-number.style.css
+280 -198
View File
@@ -1,285 +1,367 @@
@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)
1. BASE SETUP (Layout & Reset)
========================================= */
/* 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;
.rc-input-number {
box-sizing: border-box;
position: relative;
display: flex;
flex: 1;
min-width: 0;
align-items: center;
width: 100%;
/* Global Variables */
height: var(--input-height);
font-size: var(--input-font-size);
border-radius: var(--input-radius);
line-height: 1.5;
color: var(--input-text);
background-color: var(--input-bg);
border: 1px solid transparent;
/* Transisi standar */
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
margin: 0;
padding: 0;
}
/* INPUT FIELD */
/* Input Element */
.rc-input-number-input {
@apply w-full h-full bg-transparent border-none outline-none text-gray-900;
width: 100%;
height: 100%;
padding: 0 var(--input-padding-x);
appearance: textfield;
}
background-color: transparent;
border: 0;
border-radius: var(--input-radius);
outline: 0;
color: inherit; /* Mewarisi dari parent */
transition: all 0.2s linear;
/* 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 Kanan Wajib (Space untuk Actions) */
padding-right: var(--input-handler-width);
}
/* PREFIX & SUFFIX */
.rc-input-number-prefix {
@apply flex items-center ml-3 text-gray-500 z-10;
/* Hide Native Spinners (Browser Default) */
.rc-input-number-input::-webkit-inner-spin-button,
.rc-input-number-input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
display: none;
}
.rc-input-number-input {
-moz-appearance: textfield;
}
/* Prefix Styling */
.rc-input-number-prefix {
margin-left: var(--input-padding-x);
margin-right: 0.5rem; /* ~8px */
display: flex;
align-items: center;
flex: none;
color: var(--color-gray-500);
}
/* Suffix Styling */
.rc-input-number-suffix {
@apply flex items-center text-gray-500 z-10;
margin-right: var(--suffix-spacing);
margin-right: var(--input-padding-x);
display: flex;
align-items: center;
flex: none;
color: var(--color-gray-500);
z-index: 10;
transition: margin-right 0.2s ease-in-out;
}
/* Animation Trigger */
/* Animation Trigger: Geser Suffix saat hover/focus agar tidak tertutup tombol action */
.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));
margin-right: calc(var(--input-padding-x) + var(--input-handler-width));
}
/* HANDLER WRAPPER */
.rc-input-number-handler-wrap {
/* =========================================
2. ACTIONS CONTAINER (Custom Spinners)
Target: .rc-input-number-actions
========================================= */
.rc-input-number-actions {
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);
height: 100%;
/* Menggunakan var input-bg agar konsisten (putih) */
background: var(--input-bg);
/* Default Border (akan di-override status) */
border-left: 1px solid var(--input-border);
border-radius: 0 var(--input-radius) var(--input-radius) 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.24s linear 0.1s;
z-index: 10;
display: flex;
flex-direction: column;
}
/* 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;
/* Show Actions on Interaction */
.rc-input-number:hover .rc-input-number-actions,
.rc-input-number:focus-within .rc-input-number-actions {
opacity: 1;
pointer-events: auto;
}
.rc-input-number-handler {
@apply flex items-center justify-center flex-1 text-gray-400 cursor-pointer transition-colors duration-100 bg-white;
/* Individual Buttons */
.rc-input-number-action {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
overflow: hidden;
color: var(--color-gray-400);
cursor: pointer;
transition: all 0.2s linear;
}
.rc-input-number-handler:hover {
@apply text-brand-600 bg-gray-50;
height: 60%;
.rc-input-number-action:active {
background-color: var(--color-gray-100);
}
.rc-input-number-handler:active {
@apply bg-gray-100;
.rc-input-number-action:hover {
color: var(--color-brand-500);
height: 60%; /* Efek hover button membesar dikit */
}
.rc-input-number-handler-up {
@apply border-b border-gray-200;
/* Border Bawah untuk Action UP */
.rc-input-number-action-up {
border-bottom: 1px solid var(--input-border);
}
/* =========================================
2. SKINS, VARIANTS & STATUS
(Matching your Input Text Logic)
3. STATUS MATRIX (VARIANT: OUTLINED)
========================================= */
/* --- 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;
/* --- DEFAULT --- */
.input-number-variant-outlined.input-number-status-default {
border-color: var(--input-border);
}
.input-number-variant-outlined.input-number-status-default:hover:not(.rc-input-number-disabled) {
border-color: var(--input-border-hover);
}
.input-number-variant-outlined.input-number-status-default:focus-within {
border-color: var(--focus-border-color);
box-shadow: 0 0 0 3px var(--focus-ring-color);
}
/* Action Borders Sync */
.input-number-variant-outlined.input-number-status-default:focus-within .rc-input-number-actions {
border-left-color: var(--focus-border-color);
}
.input-number-variant-outlined.input-number-status-default:focus-within .rc-input-number-action-up {
border-bottom-color: var(--focus-border-color);
}
/* ====================
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) */
/* --- ERROR --- */
.input-number-variant-outlined.input-number-status-error {
border-color: var(--color-error-500) !important;
border-color: var(--color-error-500);
}
.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;
.input-number-variant-outlined.input-number-status-error:hover:not(.rc-input-number-disabled) {
border-color: var(--color-error-600);
}
.input-number-variant-outlined.input-number-status-error:focus-within {
border-color: var(--color-error-600);
box-shadow: 0 0 0 3px var(--color-error-100);
}
/* Action Borders Sync */
.input-number-variant-outlined.input-number-status-error .rc-input-number-actions {
border-left-color: var(--color-error-500);
}
.input-number-variant-outlined.input-number-status-error .rc-input-number-action-up {
border-bottom-color: var(--color-error-500);
}
/* Warning (Outlined) */
/* --- WARNING --- */
.input-number-variant-outlined.input-number-status-warning {
border-color: var(--color-warning-500) !important;
border-color: var(--color-warning-500);
}
.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;
.input-number-variant-outlined.input-number-status-warning:hover:not(.rc-input-number-disabled) {
border-color: var(--color-warning-600);
}
.input-number-variant-outlined.input-number-status-warning:focus-within {
border-color: var(--color-warning-600);
box-shadow: 0 0 0 3px var(--color-warning-100);
}
/* Action Borders Sync */
.input-number-variant-outlined.input-number-status-warning .rc-input-number-actions {
border-left-color: var(--color-warning-500);
}
.input-number-variant-outlined.input-number-status-warning .rc-input-number-action-up {
border-bottom-color: var(--color-warning-500);
}
/* Success (Outlined) */
/* --- SUCCESS --- */
.input-number-variant-outlined.input-number-status-success {
border-color: var(--color-success-500) !important;
border-color: var(--color-success-500);
}
.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;
.input-number-variant-outlined.input-number-status-success:hover:not(.rc-input-number-disabled) {
border-color: var(--color-success-600);
}
.input-number-variant-outlined.input-number-status-success:focus-within {
border-color: var(--color-success-600);
box-shadow: 0 0 0 3px var(--color-success-100);
}
/* Action Borders Sync */
.input-number-variant-outlined.input-number-status-success .rc-input-number-actions {
border-left-color: var(--color-success-500);
}
.input-number-variant-outlined.input-number-status-success .rc-input-number-action-up {
border-bottom-color: var(--color-success-500);
}
/* Info (Outlined) */
/* --- INFO --- */
.input-number-variant-outlined.input-number-status-info {
border-color: var(--color-info-500) !important;
border-color: var(--color-info-500);
}
.input-number-variant-outlined.input-number-status-info:focus-within,
.input-number-variant-outlined.input-number-status-info.rc-input-number-focused,
.input-number-variant-outlined.input-number-status-info.rc-input-number-affix-wrapper-focused {
box-shadow: 0 0 0 3px var(--color-info-100) !important;
border-color: var(--color-info-500) !important;
.input-number-variant-outlined.input-number-status-info:hover:not(.rc-input-number-disabled) {
border-color: var(--color-info-600);
}
.input-number-variant-outlined.input-number-status-info:focus-within {
border-color: var(--color-info-600);
box-shadow: 0 0 0 3px var(--color-info-100);
}
/* Action Borders Sync */
.input-number-variant-outlined.input-number-status-info .rc-input-number-actions {
border-left-color: var(--color-info-500);
}
.input-number-variant-outlined.input-number-status-info .rc-input-number-action-up {
border-bottom-color: var(--color-info-500);
}
/* ====================
VARIANT: FILLED
==================== */
/* =========================================
4. STATUS MATRIX (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;
/* --- NORMAL FILLED --- */
.input-number-variant-filled.input-number-status-default {
background-color: var(--input-bg);
border-color: var(--input-border);
}
.input-number-variant-filled.input-number-status-normal:hover {
/* @apply bg-gray-200; */
@apply border-brand-400; /* Atau var(--input-border-hover) */
.input-number-variant-filled.input-number-status-default:hover:not(.rc-input-number-disabled) {
border-color: 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;
.input-number-variant-filled.input-number-status-default:focus-within {
border-color: var(--focus-border-color);
box-shadow: 0 0 0 3px var(--focus-ring-color);
}
/* Error Filled (Colored BG) */
/* --- ERROR FILLED --- */
.input-number-variant-filled.input-number-status-error {
background-color: var(--color-error-50) !important;
border-color: var(--color-error-500) !important;
background-color: var(--color-error-50);
border-color: var(--color-error-500);
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;
/* Actions Background & Border Sync (Error) */
.input-number-variant-filled.input-number-status-error .rc-input-number-actions {
background-color: var(--color-error-50);
border-left-color: var(--color-error-500);
}
.input-number-variant-filled.input-number-status-error .rc-input-number-action-up {
border-bottom-color: var(--color-error-500);
}
/* Focus: Revert to White BG */
.input-number-variant-filled.input-number-status-error:focus-within {
background-color: var(--input-bg);
box-shadow: 0 0 0 3px var(--color-error-100);
}
.input-number-variant-filled.input-number-status-error:focus-within .rc-input-number-actions {
background-color: var(--input-bg);
}
/* Warning Filled (Colored BG) */
/* --- WARNING FILLED --- */
.input-number-variant-filled.input-number-status-warning {
background-color: var(--color-warning-50) !important;
border-color: var(--color-warning-500) !important;
background-color: var(--color-warning-50);
border-color: var(--color-warning-500);
color: var(--color-warning-600);
}
.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;
.input-number-variant-filled.input-number-status-warning .rc-input-number-actions {
background-color: var(--color-warning-50);
border-left-color: var(--color-warning-500);
}
.input-number-variant-filled.input-number-status-warning .rc-input-number-action-up {
border-bottom-color: var(--color-warning-500);
}
.input-number-variant-filled.input-number-status-warning:focus-within {
background-color: var(--input-bg);
box-shadow: 0 0 0 3px var(--color-warning-100);
}
.input-number-variant-filled.input-number-status-warning:focus-within .rc-input-number-actions {
background-color: var(--input-bg);
}
/* Success Filled (Colored BG) */
/* --- SUCCESS FILLED --- */
.input-number-variant-filled.input-number-status-success {
background-color: var(--color-success-50) !important;
border-color: var(--color-success-500) !important;
background-color: var(--color-success-50);
border-color: var(--color-success-500);
color: var(--color-success-600);
}
.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;
.input-number-variant-filled.input-number-status-success .rc-input-number-actions {
background-color: var(--color-success-50);
border-left-color: var(--color-success-500);
}
.input-number-variant-filled.input-number-status-success .rc-input-number-action-up {
border-bottom-color: var(--color-success-500);
}
.input-number-variant-filled.input-number-status-success:focus-within {
background-color: var(--input-bg);
box-shadow: 0 0 0 3px var(--color-success-100);
}
.input-number-variant-filled.input-number-status-success:focus-within .rc-input-number-actions {
background-color: var(--input-bg);
}
/* Info Filled (Colored BG) */
/* --- INFO FILLED --- */
.input-number-variant-filled.input-number-status-info {
background-color: var(--color-info-50) !important;
border-color: var(--color-info-500) !important;
background-color: var(--color-info-50);
border-color: var(--color-info-500);
color: var(--color-info-600);
}
.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;
.input-number-variant-filled.input-number-status-info .rc-input-number-actions {
background-color: var(--color-info-50);
border-left-color: var(--color-info-500);
}
.input-number-variant-filled.input-number-status-info .rc-input-number-action-up {
border-bottom-color: var(--color-info-500);
}
.input-number-variant-filled.input-number-status-info:focus-within {
background-color: var(--input-bg);
box-shadow: 0 0 0 3px var(--color-info-100);
}
.input-number-variant-filled.input-number-status-info:focus-within .rc-input-number-actions {
background-color: var(--input-bg);
}
/* ====================
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;
/* =========================================
5. DISABLED STATE
========================================= */
.rc-input-number-disabled {
background-color: var(--disabled-bg) !important;
border-color: var(--disabled-border) !important;
color: var(--disabled-text);
cursor: not-allowed;
opacity: 1;
}
.input-number-status-warning .rc-input-number-handler-wrap {
border-left-color: var(--color-warning-500) !important;
.rc-input-number-disabled .rc-input-number-input {
cursor: not-allowed;
}
.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;
.rc-input-number-disabled .rc-input-number-actions {
display: none !important;
}
}
packages/ui/src/components/forms/styles/input.style.css
+174 -164
View File
@@ -1,21 +1,27 @@
@layer components {
/* =========================================
BASE RESET
BASE RESET & SHARED
========================================= */
.rc-input {
/* Wajib border-box agar padding tidak merusak lebar */
box-sizing: border-box;
display: inline-block;
width: 100%;
/* Menggunakan Variable Dimensi Input */
height: var(--input-height);
padding: 0 12px;
padding: 0 var(--input-padding-x); /* Konsisten dengan 0.92rem */
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);
/* Transisi standar */
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
outline: none;
}
@@ -25,142 +31,64 @@
opacity: 1;
}
/* Disabled State (Standalone Input) */
.rc-input:disabled {
background-color: var(--disabled-bg) !important;
color: var(--disabled-text);
border-color: var(--disabled-border) !important;
cursor: not-allowed;
opacity: 1;
pointer-events: none;
}
/* =========================================
1. VARIANT: OUTLINED
Rule: Never show colored background.
Only change border color.
AFFIX WRAPPER (PREFIX / SUFFIX) SETUP
========================================= */
/* 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);
}
/* Base Wrapper Style */
.rc-input-affix-wrapper {
box-sizing: border-box;
display: flex;
align-items: center;
width: 100%;
/* 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);
}
/* Menggunakan Variable Dimensi Input */
height: var(--input-height);
padding: 0 var(--input-padding-x);
/* 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 {
border: 1px solid transparent;
border-radius: var(--input-radius);
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);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 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);
/* Reset Input di dalam Wrapper */
.rc-input-affix-wrapper .rc-input {
width: 100%;
height: 100%;
border: none;
outline: none;
padding: 0;
margin: 0;
background-color: transparent;
box-shadow: none !important;
}
/* 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);
/* Prefix & Suffix Positioning */
.rc-input-prefix {
margin-right: 0.5rem; /* ~8px, hardcoded ok atau bisa buat var baru */
display: flex;
align-items: center;
flex: none;
}
.input-variant-filled.input-status-warning:focus {
background-color: #fff;
box-shadow: 0 0 0 3px var(--color-warning-100);
.rc-input-suffix {
margin-left: 0.5rem; /* ~8px */
display: flex;
align-items: center;
flex: none;
}
/* 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 */
/* Disabled Wrapper */
.rc-input-affix-wrapper-disabled {
background-color: var(--disabled-bg) !important;
color: var(--disabled-text);
@@ -168,73 +96,155 @@
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;
.rc-input-affix-wrapper-disabled .rc-input {
cursor: not-allowed;
}
/* 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;
}
/* =========================================
LOGIC MATRIX: [VARIANT] x [STATUS]
========================================= */
/* 3. Prefix/Suffix Icon Spacing */
.rc-input-prefix {
@apply mr-2 flex items-center self-center shrink-0;
line-height: 0;
}
/* ------------------------------------------------
1. VARIANT: OUTLINED (Default)
------------------------------------------------ */
.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 {
/* DEFAULT */
.input-variant-outlined.input-status-default {
border-color: var(--input-border);
}
/* Outlined - Error */
.input-variant-outlined.input-status-error.rc-input-affix-wrapper {
border-color: var(--color-error-500);
/* Hover */
.input-variant-outlined.input-status-default:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
border-color: var(--input-border-hover);
}
/* Focus */
.input-variant-outlined.input-status-default:focus,
.input-variant-outlined.input-status-default.rc-input-affix-wrapper-focused {
border-color: var(--focus-border-color);
box-shadow: 0 0 0 3px var(--focus-ring-color);
z-index: 1;
}
/* Filled - Error/Warning (Background Berwarna) */
.input-variant-filled.input-status-error.rc-input-affix-wrapper {
/* ERROR */
.input-variant-outlined.input-status-error {
border-color: var(--color-error-500);
z-index: 1;
}
.input-variant-outlined.input-status-error:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
border-color: var(--color-error-600);
}
.input-variant-outlined.input-status-error:focus,
.input-variant-outlined.input-status-error.rc-input-affix-wrapper-focused {
border-color: var(--color-error-600);
box-shadow: 0 0 0 3px var(--color-error-100);
}
/* WARNING */
.input-variant-outlined.input-status-warning {
border-color: var(--color-warning-500);
z-index: 1;
}
.input-variant-outlined.input-status-warning:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
border-color: var(--color-warning-600);
}
.input-variant-outlined.input-status-warning:focus,
.input-variant-outlined.input-status-warning.rc-input-affix-wrapper-focused {
border-color: var(--color-warning-600);
box-shadow: 0 0 0 3px var(--color-warning-100);
}
/* SUCCESS */
.input-variant-outlined.input-status-success {
border-color: var(--color-success-500);
z-index: 1;
}
.input-variant-outlined.input-status-success:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
border-color: var(--color-success-600);
}
.input-variant-outlined.input-status-success:focus,
.input-variant-outlined.input-status-success.rc-input-affix-wrapper-focused {
border-color: var(--color-success-600);
box-shadow: 0 0 0 3px var(--color-success-100);
}
/* INFO */
.input-variant-outlined.input-status-info {
border-color: var(--color-info-500);
z-index: 1;
}
.input-variant-outlined.input-status-info:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
border-color: var(--color-info-600);
}
.input-variant-outlined.input-status-info:focus,
.input-variant-outlined.input-status-info.rc-input-affix-wrapper-focused {
border-color: var(--color-info-600);
box-shadow: 0 0 0 3px var(--color-info-100);
}
/* ------------------------------------------------
2. VARIANT: FILLED
------------------------------------------------ */
/* DEFAULT FILLED */
.input-variant-filled.input-status-default {
background-color: var(--input-bg);
border-color: var(--input-border);
}
.input-variant-filled.input-status-default:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
border-color: var(--input-border-hover);
}
.input-variant-filled.input-status-default:focus,
.input-variant-filled.input-status-default.rc-input-affix-wrapper-focused {
border-color: var(--focus-border-color);
box-shadow: 0 0 0 3px var(--focus-ring-color);
}
/* ERROR FILLED */
.input-variant-filled.input-status-error {
background-color: var(--color-error-50);
border-color: var(--color-error-500);
color: var(--color-error-600);
}
/* Saat focus, background jadi default input-bg (putih) */
.input-variant-filled.input-status-error:focus,
.input-variant-filled.input-status-error.rc-input-affix-wrapper-focused {
background-color: var(--input-bg);
border-color: var(--color-error-500);
box-shadow: 0 0 0 3px var(--color-error-100);
}
.input-variant-filled.input-status-warning.rc-input-affix-wrapper {
/* WARNING FILLED */
.input-variant-filled.input-status-warning {
background-color: var(--color-warning-50);
border-color: var(--color-warning-500);
}
.input-variant-filled.input-status-warning:focus,
.input-variant-filled.input-status-warning.rc-input-affix-wrapper-focused {
background-color: var(--input-bg);
border-color: var(--color-warning-500);
box-shadow: 0 0 0 3px var(--color-warning-100);
}
.input-variant-filled.input-status-success.rc-input-affix-wrapper {
/* SUCCESS FILLED */
.input-variant-filled.input-status-success {
background-color: var(--color-success-50);
border-color: var(--color-success-500);
}
.input-variant-filled.input-status-success:focus,
.input-variant-filled.input-status-success.rc-input-affix-wrapper-focused {
background-color: var(--input-bg);
border-color: var(--color-success-500);
box-shadow: 0 0 0 3px var(--color-success-100);
}
.input-variant-filled.input-status-info.rc-input-affix-wrapper {
/* INFO FILLED */
.input-variant-filled.input-status-info {
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;
.input-variant-filled.input-status-info:focus,
.input-variant-filled.input-status-info.rc-input-affix-wrapper-focused {
background-color: var(--input-bg);
border-color: var(--color-info-500);
box-shadow: 0 0 0 3px var(--color-info-100);
}
}
packages/ui/src/components/forms/styles/textarea.style.css
+75 -56
View File
@@ -1,161 +1,180 @@
@layer components {
/* =========================================
TEXTAREA STYLES
Adapts the same logic as Input but for Multiline
========================================= */
TEXTAREA STYLES
========================================= */
.rc-textarea {
/* Tambahan wajib untuk menjamin lebar akurat */
box-sizing: border-box;
display: block;
width: 100%;
min-height: 80px; /* Default height for textarea */
padding: 8px 12px; /* Needs vertical padding unlike Input */
/* Menggunakan Variable Dimensi Textarea */
min-height: var(--textarea-min-height);
padding: var(--textarea-padding-y) var(--textarea-padding-x);
font-size: var(--input-font-size);
line-height: 1.5;
color: var(--input-text);
/* Default Background (White) */
/* Default Background */
background-color: var(--input-bg);
border: 1px solid transparent;
border-radius: var(--input-radius);
/* Transisi standar */
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
outline: none;
resize: vertical; /* Only allow vertical resizing */
resize: vertical;
}
/* Placeholder Styling */
.rc-textarea::placeholder {
color: var(--input-placeholder);
opacity: 1;
opacity: 1; /* Firefox fix */
}
.rc-textarea:disabled {
/* Disabled State */
.rc-textarea:disabled,
.rc-textarea[disabled] {
background-color: var(--disabled-bg) !important;
color: var(--disabled-text);
border-color: var(--disabled-border) !important;
cursor: not-allowed;
opacity: 1; /* iOS fix */
pointer-events: none;
}
/* =========================================
1. VARIANT: OUTLINED (Textarea)
Always White Background. Changes Border only.
========================================= */
WRAPPER (untuk showCount)
========================================= */
.rc-textarea-affix-wrapper {
width: 100%;
position: relative;
display: inline-block;
}
/* Normal */
.textarea-variant-outlined.textarea-status-normal {
/* =========================================
1. VARIANT: OUTLINED
========================================= */
/* --- Default --- */
.rc-textarea.textarea-variant-outlined.textarea-status-default {
background-color: var(--input-bg);
border-color: var(--input-border);
}
.textarea-variant-outlined.textarea-status-normal:hover {
.rc-textarea.textarea-variant-outlined.textarea-status-default:hover:not(:disabled) {
border-color: var(--input-border-hover);
}
.textarea-variant-outlined.textarea-status-normal:focus {
.rc-textarea.textarea-variant-outlined.textarea-status-default: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 {
/* --- Error --- */
.rc-textarea.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 {
.rc-textarea.textarea-variant-outlined.textarea-status-error:hover:not(:disabled),
.rc-textarea.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 {
/* --- Warning --- */
.rc-textarea.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 {
.rc-textarea.textarea-variant-outlined.textarea-status-warning:hover:not(:disabled),
.rc-textarea.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 {
/* --- Success --- */
.rc-textarea.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 {
.rc-textarea.textarea-variant-outlined.textarea-status-success:hover:not(:disabled),
.rc-textarea.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 {
/* --- Info --- */
.rc-textarea.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 {
.rc-textarea.textarea-variant-outlined.textarea-status-info:hover:not(:disabled),
.rc-textarea.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.
========================================= */
2. VARIANT: FILLED
========================================= */
/* Normal (Behaves like Outlined - White BG) */
.textarea-variant-filled.textarea-status-normal {
/* --- Default Filled --- */
.rc-textarea.textarea-variant-filled.textarea-status-default {
background-color: var(--input-bg);
border-color: var(--input-border);
}
.textarea-variant-filled.textarea-status-normal:hover {
.rc-textarea.textarea-variant-filled.textarea-status-default:hover:not(:disabled) {
border-color: var(--input-border-hover);
}
.textarea-variant-filled.textarea-status-normal:focus {
.rc-textarea.textarea-variant-filled.textarea-status-default: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 {
/* --- Error Filled --- */
.rc-textarea.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 */
.rc-textarea.textarea-variant-filled.textarea-status-error:focus {
background-color: var(--input-bg); /* Reset ke putih saat typing */
box-shadow: 0 0 0 3px var(--color-error-100);
}
/* Warning (Amber BG + Amber Border) */
.textarea-variant-filled.textarea-status-warning {
/* --- Warning Filled --- */
.rc-textarea.textarea-variant-filled.textarea-status-warning {
background-color: var(--color-warning-50);
border-color: var(--color-warning-500);
color: var(--color-warning-600);
}
.textarea-variant-filled.textarea-status-warning:focus {
background-color: #fff;
.rc-textarea.textarea-variant-filled.textarea-status-warning:focus {
background-color: var(--input-bg);
box-shadow: 0 0 0 3px var(--color-warning-100);
}
/* Success (Green BG + Green Border) */
.textarea-variant-filled.textarea-status-success {
/* --- Success Filled --- */
.rc-textarea.textarea-variant-filled.textarea-status-success {
background-color: var(--color-success-50);
border-color: var(--color-success-500);
color: var(--color-success-600);
}
.textarea-variant-filled.textarea-status-success:focus {
background-color: #fff;
.rc-textarea.textarea-variant-filled.textarea-status-success:focus {
background-color: var(--input-bg);
box-shadow: 0 0 0 3px var(--color-success-100);
}
/* Info (Blue BG + Blue Border) */
.textarea-variant-filled.textarea-status-info {
/* --- Info Filled --- */
.rc-textarea.textarea-variant-filled.textarea-status-info {
background-color: var(--color-info-50);
border-color: var(--color-info-500);
color: var(--color-info-600);
}
.textarea-variant-filled.textarea-status-info:focus {
background-color: #fff;
.rc-textarea.textarea-variant-filled.textarea-status-info:focus {
background-color: var(--input-bg);
box-shadow: 0 0 0 3px var(--color-info-100);
}
}
packages/ui/src/components/forms/textarea/textarea.component.tsx
+10 -5
View File
@@ -1,12 +1,17 @@
import RcTextArea from 'rc-textarea';
import React, { forwardRef } from 'react';
import RcTextArea, { TextAreaRef } from '@rc-component/textarea';
import { InputStatusType, TextAreaProps, VALID_INPUT_STATUSES } from '../types';
export const TextArea = (props: TextAreaProps) => {
export const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
const { status, className, variant = 'outlined', ...restProps } = props;
const currentStatus: InputStatusType = status && VALID_INPUT_STATUSES.includes(status) ? status : 'normal';
const currentStatus: InputStatusType = status && VALID_INPUT_STATUSES.includes(status) ? status : 'default';
const computedClassName = [className, `textarea-status-${currentStatus}`, `textarea-variant-${variant}`]
.filter(Boolean)
.join(' ');
return <RcTextArea className={computedClassName} {...restProps} />;
};
return <RcTextArea ref={ref} className={computedClassName} {...restProps} />;
});
TextArea.displayName = 'TextArea';
packages/ui/src/components/forms/types/index.ts
+8 -7
View File
@@ -1,15 +1,16 @@
import type { FormProps as RcFormProps } from 'rc-field-form';
import type { Rule } from 'rc-field-form/lib/interface';
import type { FormProps as RcFormProps } from '@rc-component/form';
import type { Rule } from '@rc-component/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';
import { InputProps as RcInputProps } from '@rc-component/input';
import { TextAreaProps as RcTextAreaProps } from '@rc-component/textarea';
import { InputNumberProps as RcInputNumberProps } from '@rc-component/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'];
export type InputStatusType = 'default' | 'error' | 'warning' | 'success' | 'info';
export const VALID_INPUT_STATUSES: InputStatusType[] = ['default', 'error', 'warning', 'success', 'info'];
/**
* Define form props
packages/ui/src/globals.css
+117 -134
View File
@@ -1,25 +1,136 @@
@import 'tailwindcss';
@source "../src";
/* Vendor overrides */
/* Import Component Styles */
@import './components/forms/styles/form.style.css';
/* =========================================
BASE STYLES & RESETS
Ensures consistent typography and form styling
THEME VARIABLES (CENTRALIZED)
========================================= */
@theme {
/* -------------------------------
BASE FONT & TYPOGRAPHY
------------------------------- */
--base-font-size: 13px;
/* Scale */
--text-xs: calc(var(--base-font-size) * 0.846); /* ~11px */
--text-sm: calc(var(--base-font-size) * 0.923); /* ~12px */
--text-base: var(--base-font-size); /* 13px */
--text-lg: calc(var(--base-font-size) * 1.154); /* ~15px */
--text-xl: calc(var(--base-font-size) * 1.385); /* ~18px */
--text-2xl: calc(var(--base-font-size) * 1.692); /* ~22px */
/* Weights */
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* -------------------------------
SHAPE & DEPTH
------------------------------- */
--radius-sm: 0.125rem; /* 2px */
--radius-md: 0.25rem; /* 4px */
--radius-lg: 0.5rem; /* 8px */
--radius-xl: 0.75rem; /* 12px */
/* -------------------------------
FORM DIMENSIONS (INPUT / TEXTAREA)
------------------------------- */
--input-height: 2.6rem; /* ~34px */
--input-font-size: var(--text-base);
--input-padding-x: 0.92rem; /* ~12px */
--input-padding-y: 0.62rem; /* ~8px */
--input-radius: 0.375rem; /* 6px */
/* Input Number Specific */
--input-handler-width: 1.5rem; /* 24px (Agak diperlebar dikit agar clickable) */
/* Textarea Specific */
--textarea-min-height: 6.15rem; /* 80px */
--textarea-padding-x: 0.92rem; /* 12px */
--textarea-padding-y: 0.62rem; /* 8px */
/* -------------------------------
COLORS: PALETTE
------------------------------- */
/* Brand (Purple based on your code) */
--color-brand-50: #f5f3fd;
--color-brand-100: #e6dbfb;
--color-brand-200: #d0b6f8;
--color-brand-300: #b78ff5;
--color-brand-400: #9f64f1;
--color-brand-500: #7d39ed; /* Primary */
--color-brand-600: #652ed9;
--color-brand-700: #4a23a5;
--color-brand-800: #321a7a;
--color-brand-900: #1b0f4a;
/* Neutrals */
--color-gray-50: #f5f6f7;
--color-gray-100: #eceff1;
--color-gray-200: #e0e3e7;
--color-gray-300: #d1d5db;
--color-gray-400: #9ca3af;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-700: #374151;
--color-gray-800: #1f2937;
--color-gray-900: #111827;
/* Semantics */
--color-error-50: #fef2f2;
--color-error-100: #fee2e2;
--color-error-500: #ef4444;
--color-error-600: #dc2626;
--color-warning-50: #fffbeb;
--color-warning-100: #fef3c7;
--color-warning-500: #f59e0b;
--color-warning-600: #d97706;
--color-success-50: #f0fdf4;
--color-success-100: #dcfce7;
--color-success-500: #22c55e;
--color-success-600: #16a34a;
--color-info-50: #f0f9ff;
--color-info-100: #e0f2fe;
--color-info-500: #0ea5e9;
--color-info-600: #0284c7;
/* -------------------------------
COLORS: COMPONENT MAPPING
------------------------------- */
--input-bg: #ffffff;
--input-border: var(--color-gray-300);
--input-border-hover: var(--color-brand-400);
--input-text: var(--color-gray-800);
--input-placeholder: var(--color-gray-400);
--focus-ring-color: var(--color-brand-100);
--focus-border-color: var(--color-brand-500);
--disabled-bg: #f3f4f6;
--disabled-text: var(--color-gray-400);
--disabled-border: #e5e7eb;
}
/* =========================================
BASE RESETS
========================================= */
@layer base {
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
/* background-color: var(--color-gray-50); */
background-color: #ffffff;
color: var(--color-gray-800);
@apply text-base; /* Set global base font to 13px */
font-size: var(--base-font-size);
line-height: var(--text-base--line-height);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Form elements inherit base font styles */
input,
textarea,
select,
@@ -28,132 +139,4 @@
font-size: inherit;
color: inherit;
}
/* Table headers: consistent style with enterprise Fiori design */
th {
@apply text-gray-500 font-medium text-left border-b border-gray-200 py-2 px-3;
}
}
@theme {
/* =========================================
1. BRAND COLORS (Company Identity)
========================================= */
--color-brand-50: #f5f3fd;
--color-brand-100: #e6dbfb;
--color-brand-200: #d0b6f8;
--color-brand-300: #b78ff5;
--color-brand-400: #9f64f1;
--color-brand-500: #7d39ed; /* Primary color for main ERP actions */
--color-brand-600: #652ed9;
--color-brand-700: #4a23a5;
--color-brand-800: #321a7a;
--color-brand-900: #1b0f4a;
--color-brand-950: #0d0726;
/* =========================================
2. ENTERPRISE NEUTRALS (SAP Fiori Inspired)
Override default Tailwind gray palette to match enterprise style
========================================= */
--color-gray-50: #f5f6f7; /* Canvas or background of pages */
--color-gray-100: #eceff1; /* Shell/Header background */
--color-gray-200: #e0e3e7; /* Subtle borders for tables/separators */
--color-gray-300: #d1d5db; /* Strong borders, e.g., input fields */
--color-gray-400: #9ca3af; /* Disabled elements */
--color-gray-500: #6b7280; /* Metadata, labels */
--color-gray-600: #4b5563; /* Secondary body text */
--color-gray-700: #374151; /* Primary body text */
--color-gray-800: #1f2937; /* Section headers */
--color-gray-900: #111827; /* Page titles */
/* =========================================
3. SEMANTIC COLORS (Status Indicators)
Professional colors for business contexts (errors, success, warnings)
========================================= */
/* Error - Rose/Ruby Soft Palette */
--color-error-50: #fef2f2;
--color-error-100: #fee2e2;
--color-error-500: #ef4444; /* Standard Modern Red */
--color-error-600: #dc2626;
/* 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;
/* 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)
Override Tailwind default text sizes for consistent UI
========================================= */
--text-xs: 0.6875rem; /* 11px - Captions or minor labels */
--text-xs--line-height: 1rem;
--text-sm: 0.75rem; /* 12px - Secondary text */
--text-sm--line-height: 1.125rem;
--text-base: 0.8125rem; /* 13px - Default body text */
--text-base--line-height: 1.25rem; /* Comfortable reading spacing */
--text-lg: 0.9375rem; /* 15px - Section headers */
--text-lg--line-height: 1.5rem;
--text-xl: 1.125rem; /* 18px - Card or page titles */
--text-xl--line-height: 1.75rem;
--text-2xl: 1.375rem; /* 22px - Dashboard headers */
--text-2xl--line-height: 2rem;
/* Font weights */
--font-weight-normal: 400;
--font-weight-medium: 500; /* Recommended for table headers */
--font-weight-semibold: 600; /* Highlight important data points */
--font-weight-bold: 700;
/* =========================================
5. SHAPE & DEPTH (UI Consistency)
Border radius and shadow presets for consistent UI
========================================= */
--radius-sm: 0.125rem; /* 2px - small elements like badges/checkboxes */
--radius-md: 0.25rem; /* 4px - default buttons/inputs */
--radius-lg: 0.5rem; /* 8px - card containers */
--radius-xl: 0.75rem; /* 12px - modal dialogs */
/* Shadow presets for depth */
--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;
}