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

feat: add date, time, and range picker components to UI library with a showcase

Browse Source
This commit is contained in:
Firman Ramdhani
2026-02-03 17:20:05 +07:00
parent 265b2b4e6d
commit 1ceb0fad53
7 changed files with 1037 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/apps/modules/example/showcase/components/date-picker.showcase.tsx
+176
View File
@@ -0,0 +1,176 @@
import React from 'react';
import dayjs from 'dayjs';
import {
TimePicker,
DatePicker,
WeekPicker,
MonthPicker,
QuarterPicker,
YearPicker,
TimeRangePicker,
DateRangePicker,
WeekRangePicker,
MonthRangePicker,
QuarterRangePicker,
YearRangePicker,
InputStatusType
} from '@repo/ui'; // Sesuaikan path
// --- UI Helper Components ---
const Section = ({ title, description, children }: { title: string; description?: string; children: React.ReactNode }) => (
<section className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-8">
<div className="bg-gray-50 px-6 py-4 border-b border-gray-200">
<h2 className="text-lg font-bold text-gray-800">{title}</h2>
{description && <p className="text-sm text-gray-500 mt-1">{description}</p>}
</div>
<div className="p-6 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
{children}
</div>
</section>
);
const Card = ({ label, code, children }: { label: string; code?: string; children: React.ReactNode }) => (
<div className="flex flex-col space-y-2">
<div className="flex justify-between items-baseline">
<label className="text-sm font-semibold text-gray-700">{label}</label>
{code && <span className="text-xs font-mono text-gray-400 bg-gray-100 px-1.5 py-0.5 rounded">{code}</span>}
</div>
<div className="w-full">
{children}
</div>
</div>
);
export default function PickerShowcase({status}: {status: InputStatusType}) {
return (
<div className="min-h-screen bg-gray-50 py-10 px-4 sm:px-6 lg:px-8 font-sans">
<div className="max-w-7xl mx-auto">
{/* Header */}
<div className="mb-10 text-center">
<h1 className="text-3xl font-extrabold text-gray-900 tracking-tight">
Component Picker Showcase
</h1>
<p className="mt-2 text-lg text-gray-600">
Fully typed, Tailwind-styled, and robust date manipulation components.
</p>
</div>
{/* 1. Single Pickers */}
<Section title="Single Pickers" description="Komponen untuk memilih satu nilai waktu spesifik.">
<Card label="Time Picker" code="<TimePicker />">
<TimePicker placeholder="Select time..." className="w-full" />
</Card>
<Card label="Date Picker" code="<DatePicker />">
<DatePicker placeholder="Select date..." className="w-full" />
</Card>
<Card label="Week Picker" code="<WeekPicker />">
<WeekPicker placeholder="Select week..." className="w-full" />
</Card>
<Card label="Month Picker" code="<MonthPicker />">
<MonthPicker placeholder="Select month..." className="w-full" />
</Card>
<Card label="Quarter Picker" code="<QuarterPicker />">
<QuarterPicker placeholder="Select quarter..." className="w-full" />
</Card>
<Card label="Year Picker" code="<YearPicker />">
<YearPicker placeholder="Select year..." className="w-full" />
</Card>
</Section>
{/* 2. Range Pickers */}
<Section title="Range Pickers" description="Komponen untuk memilih rentang waktu (Start - End).">
<Card label="Time Range" code="<TimeRangePicker />">
<TimeRangePicker className="w-full" />
</Card>
<Card label="Date Range" code="<DateRangePicker />">
<DateRangePicker className="w-full" />
</Card>
<Card label="Week Range" code="<WeekRangePicker />">
<WeekRangePicker className="w-full" />
</Card>
<Card label="Month Range" code="<MonthRangePicker />">
<MonthRangePicker className="w-full" />
</Card>
<Card label="Quarter Range" code="<QuarterRangePicker />">
<QuarterRangePicker className="w-full" />
</Card>
<Card label="Year Range" code="<YearRangePicker />">
<YearRangePicker className="w-full" />
</Card>
</Section>
{/* 3. Validation States */}
<Section title="Validation & States" description="Visualisasi state error, warning, dan disabled.">
<Card label="Error State" code={`status="${status}"`} >
<DatePicker status={status} placeholder="Field is required" />
<span className="text-xs text-red-500 mt-1 block">This field is required.</span>
</Card>
<Card label="Warning State" code={`status="${status}"`} >
<DatePicker status={status} placeholder="Check compatibility" defaultValue={dayjs()} />
<span className="text-xs text-yellow-600 mt-1 block">Warning: Date is in the past.</span>
</Card>
<Card label="Success State" code={`status="${status}"`} >
<DatePicker status={status} defaultValue={dayjs()} />
</Card>
<Card label="Disabled State" code="disabled">
<div className="space-y-3">
<DatePicker disabled placeholder="Cannot select" />
<DateRangePicker disabled />
</div>
</Card>
</Section>
{/* 4. Advanced & Customization */}
<Section title="Advanced Features" description="Fitur lanjutan seperti format, waktu, dan presets.">
<Card label="Date & Time" code="showTime">
<DatePicker
showTime
format="YYYY-MM-DD HH:mm"
placeholder="Select date & time"
/>
</Card>
<Card label="Custom Format" code='format="DD/MM/YYYY"'>
<DatePicker
format="DD/MM/YYYY"
placeholder="31/12/2025"
/>
</Card>
<Card label="Range with Presets" code="presets={[...]}">
<DateRangePicker
presets={[
{ label: 'Today', value: [dayjs(), dayjs()] },
{ label: 'Next 7 Days', value: [dayjs(), dayjs().add(7, 'd')] },
{ label: 'This Month', value: [dayjs().startOf('month'), dayjs().endOf('month')] },
]}
/>
</Card>
<Card label="Read Only Input" code="inputReadOnly">
<DatePicker inputReadOnly placeholder="Click to open (No typing)" />
</Card>
</Section>
</div>
</div>
);
}