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
@@ -0,0 +1,9 @@
|
||||
import InputShowCase from './input-showcase';
|
||||
|
||||
export default function ExamplePage() {
|
||||
return (
|
||||
<div>
|
||||
<InputShowCase />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
import { Input, InputNumber, InputStatusType, TextArea } from '@repo/ui';
|
||||
|
||||
export default function GroupComponent({ status }: { status?: InputStatusType }) {
|
||||
return (
|
||||
<div>
|
||||
<div className="space-y-4 bg-white p-5 rounded-xl border border-gray-200 shadow-xs">
|
||||
<h3 className="text-xs font-bold text-gray-400 uppercase">Default</h3>
|
||||
<div className="grid grid-cols-4 gap-4 ">
|
||||
<div className="space-y-4">
|
||||
<div className="text-gray-500 ">Default</div>
|
||||
<div className="space-y-2">
|
||||
<Input status={status} placeholder="Outlined Placeholder" />
|
||||
<InputNumber status={status} className="w-full" placeholder="OutlinedNumber Placeholder" />
|
||||
<TextArea status={status} placeholder="Outlined TextArea Placeholder" rows={2} />
|
||||
<Input status={status} variant="filled" placeholder="Filled Placeholder" />
|
||||
<InputNumber
|
||||
status={status}
|
||||
variant="filled"
|
||||
className="w-full"
|
||||
placeholder="Filled Number Placeholder"
|
||||
/>
|
||||
<TextArea status={status} variant="filled" placeholder="Filled TextArea Placeholder" rows={2} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div className="text-gray-500 ">With Prefix</div>
|
||||
<div className="space-y-2">
|
||||
<Input
|
||||
status={status}
|
||||
placeholder="Outlined Placeholder"
|
||||
prefix={<span className="text-gray-500">$</span>}
|
||||
/>
|
||||
<InputNumber
|
||||
status={status}
|
||||
className="w-full"
|
||||
placeholder="OutlinedNumber Placeholder"
|
||||
prefix={<span className="text-gray-500">$</span>}
|
||||
/>
|
||||
<TextArea status={status} placeholder="Outlined TextArea Placeholder" rows={2} />
|
||||
<Input
|
||||
status={status}
|
||||
variant="filled"
|
||||
placeholder="Filled Placeholder"
|
||||
prefix={<span className="text-gray-500">$</span>}
|
||||
/>
|
||||
<InputNumber
|
||||
status={status}
|
||||
variant="filled"
|
||||
className="w-full"
|
||||
placeholder="Filled Number Placeholder"
|
||||
prefix={<span className="text-gray-500">$</span>}
|
||||
/>
|
||||
<TextArea status={status} variant="filled" placeholder="Filled TextArea Placeholder" rows={2} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div className="text-gray-500 ">With Suffix</div>
|
||||
<div className="space-y-2">
|
||||
<Input
|
||||
status={status}
|
||||
placeholder="Outlined Placeholder"
|
||||
suffix={<span className="text-gray-500">$</span>}
|
||||
/>
|
||||
<InputNumber
|
||||
status={status}
|
||||
className="w-full"
|
||||
placeholder="OutlinedNumber Placeholder"
|
||||
suffix={<span className="text-gray-500">$</span>}
|
||||
/>
|
||||
<TextArea status={status} placeholder="Outlined TextArea Placeholder" rows={2} />
|
||||
<Input
|
||||
status={status}
|
||||
variant="filled"
|
||||
placeholder="Filled Placeholder"
|
||||
suffix={<span className="text-gray-500">$</span>}
|
||||
/>
|
||||
<InputNumber
|
||||
status={status}
|
||||
variant="filled"
|
||||
className="w-full"
|
||||
placeholder="Filled Number Placeholder"
|
||||
suffix={<span className="text-gray-500">$</span>}
|
||||
/>
|
||||
<TextArea status={status} variant="filled" placeholder="Filled TextArea Placeholder" rows={2} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div className="text-gray-500 ">With Prefix and Suffix</div>
|
||||
<div className="space-y-2">
|
||||
<Input
|
||||
status={status}
|
||||
placeholder="Outlined Placeholder"
|
||||
prefix={<span className="text-gray-500">$</span>}
|
||||
suffix={<span className="text-gray-500">$</span>}
|
||||
/>
|
||||
<InputNumber
|
||||
status={status}
|
||||
className="w-full"
|
||||
placeholder="OutlinedNumber Placeholder"
|
||||
prefix={<span className="text-gray-500">$</span>}
|
||||
suffix={<span className="text-gray-500">$</span>}
|
||||
/>
|
||||
<TextArea status={status} placeholder="Outlined TextArea Placeholder" rows={2} />
|
||||
<Input
|
||||
status={status}
|
||||
variant="filled"
|
||||
placeholder="Filled Placeholder"
|
||||
prefix={<span className="text-gray-500">$</span>}
|
||||
suffix={<span className="text-gray-500">$</span>}
|
||||
/>
|
||||
<InputNumber
|
||||
status={status}
|
||||
variant="filled"
|
||||
className="w-full"
|
||||
placeholder="Filled Number Placeholder"
|
||||
prefix={<span className="text-gray-500">$</span>}
|
||||
suffix={<span className="text-gray-500">$</span>}
|
||||
/>
|
||||
<TextArea status={status} variant="filled" placeholder="Filled TextArea Placeholder" rows={2} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import GroupComponent from './group-component';
|
||||
|
||||
export default function InputShowCase() {
|
||||
return (
|
||||
<div className="min-h-screen ">
|
||||
<main className="mx-auto p-8 space-y-12">
|
||||
<section className="space-y-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<h2 className="text-lg font-bold">1. All Conditions Matrix</h2>
|
||||
<span className="px-2 py-0.5 text-[10px] bg-gray-200 text-gray-600 rounded uppercase tracking-wider">
|
||||
Visual Audit
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
{/* COLUMN: ERROR */}
|
||||
<GroupComponent status="error" />
|
||||
{/* COLUMN: NORMAL */}
|
||||
<GroupComponent />
|
||||
{/* COLUMN: INFO */}
|
||||
<GroupComponent status="info" />
|
||||
{/* COLUMN: WARNING */}
|
||||
<GroupComponent status="warning" />
|
||||
{/* COLUMN: SUCCESS */}
|
||||
<GroupComponent status="success" />
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user