auto winn
This commit is contained in:
Faizulhaq F.N
@@ -0,0 +1,229 @@
|
||||
---
|
||||
name: feature-guide
|
||||
description: Panduan implementasi masing-masing fitur utama Tour Planner App (Trip Selection, Schedule Builder, Packing List, Budget Calculator). Gunakan skill ini saat memulai atau melanjutkan pengerjaan satu halaman/fitur tertentu.
|
||||
---
|
||||
|
||||
# Skill: Feature Guide — Tour Planner App
|
||||
|
||||
## Fitur 1: Trip Selection (Home Page)
|
||||
|
||||
**File:** `src/pages/Home.jsx`
|
||||
|
||||
### Alur User
|
||||
1. User membuka aplikasi → landing di halaman Home
|
||||
2. Bisa search destinasi atau browse dari grid card
|
||||
3. Filter berdasarkan kategori dan budget
|
||||
4. Klik card → modal konfirmasi trip (isi tanggal, nama trip)
|
||||
5. Confirm → redirect ke `/schedule`
|
||||
|
||||
### Data yang Diperlukan
|
||||
```javascript
|
||||
// src/data/destinations.js
|
||||
export const destinations = [
|
||||
{
|
||||
id: 'bali-001',
|
||||
name: 'Bali',
|
||||
country: 'Indonesia',
|
||||
category: 'pantai', // 'pantai' | 'gunung' | 'kota' | 'budaya'
|
||||
description: 'Surga tropis...',
|
||||
highlights: ['Tanah Lot', 'Ubud', 'Kuta Beach'],
|
||||
estimatedBudget: { min: 2000000, max: 5000000 },
|
||||
popularDuration: 4, // hari
|
||||
rating: 4.8,
|
||||
reviewCount: 12400,
|
||||
image: '/assets/bali.jpg', // atau URL picsum
|
||||
tags: ['romantis', 'budaya', 'alam'],
|
||||
bestTime: 'April - Oktober',
|
||||
},
|
||||
// minimal 10 destinasi
|
||||
];
|
||||
```
|
||||
|
||||
### State yang Diupdate
|
||||
```javascript
|
||||
setTrip({
|
||||
id: destination.id,
|
||||
name: tripName, // input user
|
||||
destination: destination.name,
|
||||
startDate: startDate, // dari date picker
|
||||
endDate: endDate,
|
||||
totalDays: diffInDays(startDate, endDate) + 1,
|
||||
coverImage: destination.image,
|
||||
type: 'preset',
|
||||
category: destination.category,
|
||||
});
|
||||
initSchedule(totalDays, startDate); // inisialisasi array schedule
|
||||
```
|
||||
|
||||
### Komponen yang Dibutuhkan
|
||||
- `TripCard.jsx` — card destinasi dengan image, info, hover effect
|
||||
- `TripSelector.jsx` — modal form input tanggal & nama trip
|
||||
- `SearchBar.jsx` — search dengan debounce
|
||||
- `FilterBar.jsx` — filter kategori (pills/tabs)
|
||||
|
||||
---
|
||||
|
||||
## Fitur 2: Daily Schedule Builder (Schedule Page)
|
||||
|
||||
**File:** `src/pages/Schedule.jsx`
|
||||
|
||||
### Alur User
|
||||
1. User masuk ke `/schedule`
|
||||
2. Melihat tab per hari (Day 1, Day 2, ...)
|
||||
3. Klik "+ Tambah Aktivitas" → modal form
|
||||
4. Aktivitas ditampilkan di timeline vertikal
|
||||
5. Bisa drag & drop untuk reorder
|
||||
|
||||
### Komponen yang Dibutuhkan
|
||||
- `DayTabs.jsx` — tab navigasi per hari
|
||||
- `ScheduleTimeline.jsx` — timeline visual
|
||||
- `ActivityItem.jsx` — satu item aktivitas (draggable)
|
||||
- `AddActivityModal.jsx` — form tambah/edit aktivitas
|
||||
|
||||
### Implementasi Drag & Drop
|
||||
```jsx
|
||||
import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
|
||||
import { SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-kit/sortable';
|
||||
import { useSortable } from '@dnd-kit/sortable';
|
||||
import { CSS } from '@dnd-kit/utilities';
|
||||
|
||||
// Di ActivityItem — tambahkan useSortable
|
||||
const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: activity.id });
|
||||
const style = { transform: CSS.Transform.toString(transform), transition };
|
||||
|
||||
// Di ScheduleTimeline — wrap dengan DndContext
|
||||
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
|
||||
<SortableContext items={activityIds} strategy={verticalListSortingStrategy}>
|
||||
{activities.map(a => <ActivityItem key={a.id} activity={a} />)}
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
```
|
||||
|
||||
### Template Aktivitas Cepat
|
||||
```javascript
|
||||
// src/data/activities.js
|
||||
export const activityTemplates = [
|
||||
{ name: 'Sarapan', category: 'makan', duration: 60, defaultTime: '07:00' },
|
||||
{ name: 'Check-in Hotel', category: 'check-in', duration: 30, defaultTime: '14:00' },
|
||||
{ name: 'Makan Siang', category: 'makan', duration: 60, defaultTime: '12:00' },
|
||||
{ name: 'Makan Malam', category: 'makan', duration: 90, defaultTime: '18:30' },
|
||||
{ name: 'Kunjungan Wisata', category: 'wisata', duration: 120, defaultTime: '10:00' },
|
||||
{ name: 'Belanja Oleh-oleh', category: 'lainnya', duration: 60, defaultTime: '16:00' },
|
||||
{ name: 'Berangkat/Transportasi', category: 'transportasi', duration: 180, defaultTime: '06:00' },
|
||||
];
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Fitur 3: Packing List Manager (PackingList Page)
|
||||
|
||||
**File:** `src/pages/PackingList.jsx`
|
||||
|
||||
### Alur User
|
||||
1. User masuk ke `/packing`
|
||||
2. Melihat daftar per kategori dengan progress
|
||||
3. Centang item yang sudah dipak
|
||||
4. Tambah item baru di kategori tertentu
|
||||
5. Load template sesuai tipe trip
|
||||
|
||||
### Template Packing
|
||||
```javascript
|
||||
// src/data/packingTemplates.js
|
||||
export const packingTemplates = {
|
||||
pantai: {
|
||||
Pakaian: [
|
||||
{ name: 'Baju pantai', qty: 3 },
|
||||
{ name: 'Celana pendek', qty: 2 },
|
||||
{ name: 'Kacamata hitam', qty: 1 },
|
||||
],
|
||||
// ...
|
||||
},
|
||||
gunung: { /* ... */ },
|
||||
kota: { /* ... */ },
|
||||
budaya: { /* ... */ },
|
||||
};
|
||||
```
|
||||
|
||||
### Komponen yang Dibutuhkan
|
||||
- `PackingOverview.jsx` — statistik total item & progress keseluruhan
|
||||
- `PackingCategory.jsx` — section per kategori dengan sub-list
|
||||
- `PackingItem.jsx` — checkbox item + qty counter + delete
|
||||
|
||||
### Logic Progress
|
||||
```javascript
|
||||
const getTotalStats = (packingList) => {
|
||||
let total = 0, checked = 0;
|
||||
Object.values(packingList).forEach(items => {
|
||||
items.forEach(item => {
|
||||
total++;
|
||||
if (item.checked) checked++;
|
||||
});
|
||||
});
|
||||
return { total, checked, percent: total > 0 ? Math.round((checked/total)*100) : 0 };
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Fitur 4: Budget Calculator (Budget Page)
|
||||
|
||||
**File:** `src/pages/Budget.jsx`
|
||||
|
||||
### Alur User
|
||||
1. User masuk ke `/budget`
|
||||
2. Set total budget di bagian atas
|
||||
3. Tambah pengeluaran satu per satu
|
||||
4. Melihat ringkasan dan chart
|
||||
5. Warning merah jika over budget
|
||||
|
||||
### Komponen yang Dibutuhkan
|
||||
- `BudgetHeader.jsx` — input total budget + overview card (total, spent, remaining)
|
||||
- `BudgetChart.jsx` — Recharts PieChart + BarChart
|
||||
- `ExpenseList.jsx` — list semua pengeluaran
|
||||
- `AddExpenseModal.jsx` — form tambah pengeluaran
|
||||
|
||||
### Recharts Integration
|
||||
```jsx
|
||||
import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer, BarChart, Bar, XAxis, YAxis } from 'recharts';
|
||||
|
||||
// Data untuk pie chart
|
||||
const pieData = Object.entries(byCategory).map(([name, value]) => ({ name, value }));
|
||||
|
||||
<ResponsiveContainer width="100%" height={240}>
|
||||
<PieChart>
|
||||
<Pie data={pieData} cx="50%" cy="50%" outerRadius={80} dataKey="value">
|
||||
{pieData.map((entry, index) => (
|
||||
<Cell key={index} fill={BUDGET_CATEGORY_COLORS[entry.name]} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip formatter={(value) => formatIDR(value)} />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
```
|
||||
|
||||
### Format Currency
|
||||
```javascript
|
||||
// src/utils/formatCurrency.js
|
||||
export const formatIDR = (amount) =>
|
||||
new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }).format(amount);
|
||||
|
||||
export const formatUSD = (amount) =>
|
||||
new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(amount);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Navigasi Antar Halaman
|
||||
|
||||
```
|
||||
/ (Home) → pilih trip
|
||||
/schedule → jadwal harian
|
||||
/packing → packing list
|
||||
/budget → kalkulasi budget
|
||||
```
|
||||
|
||||
Navbar harus selalu tampil dan menampilkan:
|
||||
- Logo / nama app
|
||||
- Link ke semua 4 halaman
|
||||
- Indikator halaman aktif
|
||||
- Badge progress (% packing done, budget status)
|
||||
@@ -0,0 +1,160 @@
|
||||
---
|
||||
name: react-component
|
||||
description: Panduan membuat React component untuk Tour Planner App. Gunakan skill ini ketika membuat komponen baru, baik UI umum maupun komponen spesifik fitur (trip, schedule, packing, budget).
|
||||
---
|
||||
|
||||
# Skill: React Component — Tour Planner App
|
||||
|
||||
## Aturan Dasar
|
||||
|
||||
Semua komponen HARUS mengikuti pola berikut:
|
||||
- Functional component dengan arrow function
|
||||
- Props didestruktur di parameter
|
||||
- Menggunakan CSS variables dari design system (lihat `src/index.css`)
|
||||
- Menggunakan Framer Motion untuk animasi
|
||||
- Menggunakan Lucide React untuk icon
|
||||
|
||||
## Template Dasar Komponen
|
||||
|
||||
```jsx
|
||||
import { motion } from 'framer-motion';
|
||||
import { IconName } from 'lucide-react';
|
||||
import styles from './ComponentName.module.css'; // opsional
|
||||
|
||||
const ComponentName = ({ prop1, prop2, onAction }) => {
|
||||
return (
|
||||
<motion.div
|
||||
className="component-name"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
{/* content */}
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ComponentName;
|
||||
```
|
||||
|
||||
## Komponen UI yang Tersedia
|
||||
|
||||
### Button
|
||||
```jsx
|
||||
<Button variant="primary|secondary|ghost|danger" size="sm|md|lg" icon={IconComponent} onClick={fn}>
|
||||
Label
|
||||
</Button>
|
||||
```
|
||||
|
||||
### Card
|
||||
```jsx
|
||||
<Card glassmorphism hoverable>
|
||||
{/* content */}
|
||||
</Card>
|
||||
```
|
||||
Variants: `glassmorphism` (default), `elevated`, `outlined`
|
||||
|
||||
### Modal
|
||||
```jsx
|
||||
<Modal isOpen={bool} onClose={fn} title="Judul Modal">
|
||||
{/* content */}
|
||||
</Modal>
|
||||
```
|
||||
|
||||
### Badge
|
||||
```jsx
|
||||
<Badge variant="primary|success|warning|danger">{text}</Badge>
|
||||
```
|
||||
|
||||
### ProgressBar
|
||||
```jsx
|
||||
<ProgressBar value={0-100} label="Teks" showPercent />
|
||||
```
|
||||
|
||||
## Animasi Standar
|
||||
|
||||
```javascript
|
||||
// Fade in dari bawah (card, item list)
|
||||
const fadeInUp = {
|
||||
initial: { opacity: 0, y: 20 },
|
||||
animate: { opacity: 1, y: 0 },
|
||||
transition: { duration: 0.3 }
|
||||
};
|
||||
|
||||
// Stagger anak-anak (list items)
|
||||
const containerVariants = {
|
||||
animate: { transition: { staggerChildren: 0.08 } }
|
||||
};
|
||||
|
||||
// Scale on hover (interactive card)
|
||||
const hoverScale = {
|
||||
whileHover: { scale: 1.02 },
|
||||
whileTap: { scale: 0.98 }
|
||||
};
|
||||
```
|
||||
|
||||
## CSS Classes Tersedia (dari index.css)
|
||||
|
||||
```
|
||||
.glass — glassmorphism card
|
||||
.glass-dark — glassmorphism gelap
|
||||
.btn-primary — tombol primary
|
||||
.btn-secondary — tombol secondary
|
||||
.btn-ghost — tombol ghost
|
||||
.text-gradient — teks dengan gradient
|
||||
.badge — badge dasar
|
||||
.input-field — input form
|
||||
.section-title — heading section
|
||||
```
|
||||
|
||||
## File Baru Selalu di Folder yang Tepat
|
||||
|
||||
| Tipe | Lokasi |
|
||||
|------|--------|
|
||||
| Layout component | `src/components/layout/` |
|
||||
| UI generic | `src/components/ui/` |
|
||||
| Trip feature | `src/components/trip/` |
|
||||
| Schedule feature | `src/components/schedule/` |
|
||||
| Packing feature | `src/components/packing/` |
|
||||
| Budget feature | `src/components/budget/` |
|
||||
| Full page | `src/pages/` |
|
||||
|
||||
## Contoh: Membuat Activity Item
|
||||
|
||||
```jsx
|
||||
// src/components/schedule/ActivityItem.jsx
|
||||
import { motion } from 'framer-motion';
|
||||
import { Clock, MapPin, GripVertical, Trash2 } from 'lucide-react';
|
||||
|
||||
const ActivityItem = ({ activity, onDelete, dragHandleProps }) => {
|
||||
return (
|
||||
<motion.div
|
||||
className="activity-item"
|
||||
layout
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: 20 }}
|
||||
>
|
||||
<div className="activity-drag-handle" {...dragHandleProps}>
|
||||
<GripVertical size={16} />
|
||||
</div>
|
||||
<div className="activity-time">
|
||||
<Clock size={14} />
|
||||
<span>{activity.time}</span>
|
||||
</div>
|
||||
<div className="activity-content">
|
||||
<h4>{activity.name}</h4>
|
||||
<div className="activity-location">
|
||||
<MapPin size={12} />
|
||||
<span>{activity.location}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={() => onDelete(activity.id)}>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ActivityItem;
|
||||
```
|
||||
@@ -0,0 +1,212 @@
|
||||
---
|
||||
name: state-management
|
||||
description: Panduan lengkap penggunaan Zustand store untuk Tour Planner App. Gunakan skill ini ketika membaca, menulis, atau menambahkan state baru ke global store, atau saat membuat custom hooks.
|
||||
---
|
||||
|
||||
# Skill: State Management — Zustand Store
|
||||
|
||||
## Overview
|
||||
|
||||
Aplikasi ini menggunakan Zustand dengan middleware `persist` untuk menyimpan state ke localStorage.
|
||||
File utama: `src/store/tourStore.js`
|
||||
localStorage key: `tour-planner-storage`
|
||||
|
||||
## Full Store Shape
|
||||
|
||||
```javascript
|
||||
{
|
||||
// === TRIP INFO ===
|
||||
trip: {
|
||||
id: null, // string | null
|
||||
name: '', // nama trip user
|
||||
destination: '', // nama destinasi
|
||||
startDate: null, // ISO string
|
||||
endDate: null, // ISO string
|
||||
totalDays: 0, // number
|
||||
coverImage: '', // URL atau path lokal
|
||||
type: 'custom', // 'preset' | 'custom'
|
||||
category: '', // 'pantai' | 'gunung' | 'kota' | 'budaya'
|
||||
},
|
||||
|
||||
// === SCHEDULE ===
|
||||
// Array of days, index = hari ke-N (0-based)
|
||||
schedule: [
|
||||
{
|
||||
dayNumber: 1, // display number
|
||||
date: '', // ISO string
|
||||
activities: [
|
||||
{
|
||||
id: '', // uuid
|
||||
time: '09:00', // HH:mm
|
||||
name: '',
|
||||
location: '',
|
||||
duration: 60, // menit
|
||||
category: '', // 'wisata' | 'makan' | 'transportasi' | 'check-in' | 'lainnya'
|
||||
notes: '',
|
||||
color: '', // CSS color untuk timeline
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
// === PACKING LIST ===
|
||||
packingList: {
|
||||
Pakaian: [
|
||||
{ id: '', name: '', qty: 1, checked: false }
|
||||
],
|
||||
Dokumen: [],
|
||||
Elektronik: [],
|
||||
'Obat-obatan': [],
|
||||
Toiletries: [],
|
||||
Lainnya: [],
|
||||
},
|
||||
|
||||
// === BUDGET ===
|
||||
budget: {
|
||||
total: 0, // number (IDR)
|
||||
currency: 'IDR', // 'IDR' | 'USD' | 'EUR'
|
||||
expenses: [
|
||||
{
|
||||
id: '', // uuid
|
||||
name: '',
|
||||
amount: 0,
|
||||
category: '', // 'transportasi' | 'akomodasi' | 'makan' | 'aktivitas' | 'oleh-oleh' | 'lainnya'
|
||||
day: null, // number (hari ke berapa) | null (umum)
|
||||
date: '', // ISO string opsional
|
||||
notes: '',
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Actions API
|
||||
|
||||
```javascript
|
||||
const {
|
||||
// Trip actions
|
||||
setTrip, // (tripData: Partial<trip>) => void
|
||||
resetTrip, // () => void
|
||||
|
||||
// Schedule actions
|
||||
initSchedule, // (totalDays: number, startDate: string) => void
|
||||
addActivity, // (dayIndex: number, activity: Activity) => void
|
||||
updateActivity, // (dayIndex: number, activityId: string, data: Partial<Activity>) => void
|
||||
removeActivity, // (dayIndex: number, activityId: string) => void
|
||||
reorderActivities,// (dayIndex: number, oldIndex: number, newIndex: number) => void
|
||||
moveActivity, // (fromDay: number, toDay: number, activityId: string) => void
|
||||
|
||||
// Packing actions
|
||||
addPackingItem, // (category: string, item: PackingItem) => void
|
||||
updatePackingItem,// (category: string, id: string, data: Partial<PackingItem>) => void
|
||||
togglePackingItem,// (category: string, id: string) => void
|
||||
removePackingItem,// (category: string, id: string) => void
|
||||
loadPackingTemplate, // (tripType: string) => void
|
||||
|
||||
// Budget actions
|
||||
setTotalBudget, // (amount: number) => void
|
||||
addExpense, // (expense: Expense) => void
|
||||
updateExpense, // (id: string, data: Partial<Expense>) => void
|
||||
removeExpense, // (id: string) => void
|
||||
|
||||
// Global
|
||||
resetAll, // () => void — reset semua state
|
||||
|
||||
} = useTourStore();
|
||||
```
|
||||
|
||||
## Custom Hooks
|
||||
|
||||
Gunakan custom hooks untuk encapsulate logic:
|
||||
|
||||
### useTripStore.js
|
||||
```javascript
|
||||
import { useTourStore } from '../store/tourStore';
|
||||
|
||||
export const useTripStore = () => {
|
||||
const { trip, setTrip, resetTrip } = useTourStore();
|
||||
|
||||
const updateTrip = (data) => setTrip({ ...trip, ...data });
|
||||
const isConfigured = trip.id !== null;
|
||||
|
||||
return { trip, updateTrip, resetTrip, isConfigured };
|
||||
};
|
||||
```
|
||||
|
||||
### useSchedule.js
|
||||
```javascript
|
||||
import { useTourStore } from '../store/tourStore';
|
||||
|
||||
export const useSchedule = (dayIndex) => {
|
||||
const { schedule, addActivity, removeActivity, reorderActivities } = useTourStore();
|
||||
|
||||
const day = schedule[dayIndex];
|
||||
const activities = day?.activities ?? [];
|
||||
const sortedActivities = [...activities].sort((a, b) => a.time.localeCompare(b.time));
|
||||
|
||||
return { day, activities: sortedActivities, addActivity: (a) => addActivity(dayIndex, a), removeActivity: (id) => removeActivity(dayIndex, id) };
|
||||
};
|
||||
```
|
||||
|
||||
### useBudget.js
|
||||
```javascript
|
||||
import { useTourStore } from '../store/tourStore';
|
||||
|
||||
export const useBudget = () => {
|
||||
const { budget, setTotalBudget, addExpense, removeExpense } = useTourStore();
|
||||
|
||||
const totalSpent = budget.expenses.reduce((sum, e) => sum + e.amount, 0);
|
||||
const remaining = budget.total - totalSpent;
|
||||
const isOverBudget = remaining < 0;
|
||||
const percentUsed = budget.total > 0 ? (totalSpent / budget.total) * 100 : 0;
|
||||
|
||||
const byCategory = budget.expenses.reduce((acc, e) => {
|
||||
acc[e.category] = (acc[e.category] || 0) + e.amount;
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
return { budget, totalSpent, remaining, isOverBudget, percentUsed, byCategory, setTotalBudget, addExpense, removeExpense };
|
||||
};
|
||||
```
|
||||
|
||||
## Cara Membuat UUID
|
||||
|
||||
```javascript
|
||||
// Di utils/helpers.js
|
||||
export const generateId = () => crypto.randomUUID();
|
||||
```
|
||||
|
||||
## Contoh Penggunaan di Komponen
|
||||
|
||||
```jsx
|
||||
import { useTourStore } from '../store/tourStore';
|
||||
|
||||
const SchedulePage = () => {
|
||||
const { schedule, addActivity } = useTourStore();
|
||||
|
||||
const handleAddActivity = (dayIndex, activityData) => {
|
||||
addActivity(dayIndex, {
|
||||
id: crypto.randomUUID(),
|
||||
...activityData
|
||||
});
|
||||
};
|
||||
|
||||
return ( /* ... */ );
|
||||
};
|
||||
```
|
||||
|
||||
## Penting: Jangan Mutasi State Langsung
|
||||
|
||||
```javascript
|
||||
// ❌ SALAH
|
||||
state.schedule[0].activities.push(newActivity);
|
||||
|
||||
// ✅ BENAR (dalam store action)
|
||||
set(state => ({
|
||||
schedule: state.schedule.map((day, i) =>
|
||||
i === dayIndex
|
||||
? { ...day, activities: [...day.activities, newActivity] }
|
||||
: day
|
||||
)
|
||||
}));
|
||||
```
|
||||
@@ -0,0 +1,268 @@
|
||||
---
|
||||
name: ui-design
|
||||
description: Panduan design system, CSS variables, layout, dan visual styling untuk Tour Planner App. Gunakan skill ini ketika menulis CSS, membangun layout, atau memastikan konsistensi visual antar halaman.
|
||||
---
|
||||
|
||||
# Skill: UI Design — Tour Planner App
|
||||
|
||||
## Design System Lengkap
|
||||
|
||||
Semua token harus didefinisikan di `src/index.css` di dalam `:root`.
|
||||
|
||||
```css
|
||||
/* === src/index.css === */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;1,600&display=swap');
|
||||
|
||||
:root {
|
||||
/* Colors */
|
||||
--color-primary: hsl(220, 90%, 56%);
|
||||
--color-primary-dark: hsl(220, 90%, 42%);
|
||||
--color-primary-light: hsl(220, 90%, 70%);
|
||||
--color-primary-glow: hsl(220, 90%, 56%, 0.3);
|
||||
|
||||
--color-accent: hsl(38, 95%, 55%);
|
||||
--color-accent-dark: hsl(38, 95%, 40%);
|
||||
--color-accent-light: hsl(38, 95%, 70%);
|
||||
|
||||
--color-bg-base: hsl(222, 28%, 8%);
|
||||
--color-bg-surface: hsl(222, 22%, 13%);
|
||||
--color-bg-elevated: hsl(222, 18%, 18%);
|
||||
--color-bg-overlay: hsla(222, 28%, 5%, 0.8);
|
||||
|
||||
--color-text-primary: hsl(210, 40%, 96%);
|
||||
--color-text-secondary: hsl(210, 20%, 65%);
|
||||
--color-text-muted: hsl(210, 15%, 45%);
|
||||
|
||||
--color-border: hsl(220, 15%, 22%);
|
||||
--color-border-light: hsl(220, 15%, 28%);
|
||||
|
||||
--color-success: hsl(142, 70%, 45%);
|
||||
--color-success-bg: hsl(142, 70%, 45%, 0.15);
|
||||
--color-warning: hsl(38, 95%, 55%);
|
||||
--color-warning-bg: hsl(38, 95%, 55%, 0.15);
|
||||
--color-danger: hsl(0, 75%, 55%);
|
||||
--color-danger-bg: hsl(0, 75%, 55%, 0.15);
|
||||
|
||||
/* Typography */
|
||||
--font-body: 'Inter', -apple-system, sans-serif;
|
||||
--font-display: 'Outfit', sans-serif;
|
||||
--font-hero: 'Playfair Display', serif;
|
||||
|
||||
--text-xs: 0.75rem;
|
||||
--text-sm: 0.875rem;
|
||||
--text-base: 1rem;
|
||||
--text-lg: 1.125rem;
|
||||
--text-xl: 1.25rem;
|
||||
--text-2xl: 1.5rem;
|
||||
--text-3xl: 1.875rem;
|
||||
--text-4xl: 2.25rem;
|
||||
--text-5xl: 3rem;
|
||||
|
||||
/* Spacing */
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 0.75rem;
|
||||
--space-4: 1rem;
|
||||
--space-5: 1.25rem;
|
||||
--space-6: 1.5rem;
|
||||
--space-8: 2rem;
|
||||
--space-10: 2.5rem;
|
||||
--space-12: 3rem;
|
||||
--space-16: 4rem;
|
||||
--space-20: 5rem;
|
||||
|
||||
/* Border Radius */
|
||||
--radius-sm: 0.375rem;
|
||||
--radius-md: 0.5rem;
|
||||
--radius-lg: 0.75rem;
|
||||
--radius-xl: 1rem;
|
||||
--radius-2xl: 1.5rem;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 1px 3px hsla(0,0%,0%,0.3);
|
||||
--shadow-md: 0 4px 16px hsla(0,0%,0%,0.35);
|
||||
--shadow-lg: 0 8px 32px hsla(0,0%,0%,0.4);
|
||||
--shadow-glow: 0 0 24px var(--color-primary-glow);
|
||||
|
||||
/* Transitions */
|
||||
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
/* Z-Index */
|
||||
--z-dropdown: 100;
|
||||
--z-modal: 200;
|
||||
--z-toast: 300;
|
||||
--z-tooltip: 400;
|
||||
}
|
||||
```
|
||||
|
||||
## CSS Utility Classes Wajib
|
||||
|
||||
```css
|
||||
/* Base reset */
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
background-color: var(--color-bg-base);
|
||||
color: var(--color-text-primary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Glassmorphism */
|
||||
.glass {
|
||||
background: hsla(222, 22%, 18%, 0.7);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
|
||||
/* Gradient text */
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, var(--color-primary-light), var(--color-accent));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Layout container */
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--space-4);
|
||||
}
|
||||
|
||||
/* Grid layouts */
|
||||
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
|
||||
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
|
||||
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
|
||||
|
||||
/* Responsive grid */
|
||||
@media (max-width: 1024px) {
|
||||
.grid-4 { grid-template-columns: repeat(2, 1fr); }
|
||||
.grid-3 { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
|
||||
}
|
||||
```
|
||||
|
||||
## Pola Layout Halaman
|
||||
|
||||
```jsx
|
||||
// Setiap page menggunakan struktur ini:
|
||||
<div className="page-wrapper">
|
||||
<div className="page-header">
|
||||
<h1 className="page-title">Judul</h1>
|
||||
<p className="page-subtitle">Deskripsi</p>
|
||||
</div>
|
||||
<div className="page-content">
|
||||
{/* konten */}
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Komponen Hero (Home Page)
|
||||
|
||||
```css
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
background:
|
||||
radial-gradient(ellipse at 20% 50%, hsl(220, 90%, 20%, 0.4) 0%, transparent 60%),
|
||||
radial-gradient(ellipse at 80% 20%, hsl(38, 95%, 20%, 0.3) 0%, transparent 60%),
|
||||
var(--color-bg-base);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: url("data:image/svg+xml,..."); /* subtle grid pattern */
|
||||
opacity: 0.03;
|
||||
}
|
||||
```
|
||||
|
||||
## Warna Kategori Aktivitas
|
||||
|
||||
```javascript
|
||||
export const CATEGORY_COLORS = {
|
||||
wisata: 'hsl(220, 90%, 56%)',
|
||||
makan: 'hsl(142, 70%, 45%)',
|
||||
transportasi: 'hsl(280, 70%, 60%)',
|
||||
'check-in': 'hsl(38, 95%, 55%)',
|
||||
lainnya: 'hsl(210, 20%, 55%)',
|
||||
};
|
||||
```
|
||||
|
||||
## Warna Kategori Budget
|
||||
|
||||
```javascript
|
||||
export const BUDGET_CATEGORY_COLORS = {
|
||||
transportasi: '#4f8ef7',
|
||||
akomodasi: '#a78bfa',
|
||||
makan: '#34d399',
|
||||
aktivitas: '#fbbf24',
|
||||
'oleh-oleh': '#f87171',
|
||||
lainnya: '#94a3b8',
|
||||
};
|
||||
```
|
||||
|
||||
## Breakpoints
|
||||
|
||||
```css
|
||||
/* Mobile first */
|
||||
/* xs: 0+ (default) */
|
||||
/* sm: 640+ */
|
||||
@media (min-width: 640px) { }
|
||||
/* md: 768+ */
|
||||
@media (min-width: 768px) { }
|
||||
/* lg: 1024+ */
|
||||
@media (min-width: 1024px) { }
|
||||
/* xl: 1280+ */
|
||||
@media (min-width: 1280px) { }
|
||||
```
|
||||
|
||||
## Animasi Framer Motion Standar
|
||||
|
||||
```javascript
|
||||
// Import di setiap komponen yang butuh animasi
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
|
||||
// Fade in dari bawah (item list, card)
|
||||
export const fadeInUp = {
|
||||
initial: { opacity: 0, y: 24 },
|
||||
animate: { opacity: 1, y: 0 },
|
||||
exit: { opacity: 0, y: -12 },
|
||||
transition: { duration: 0.3 }
|
||||
};
|
||||
|
||||
// Stagger container
|
||||
export const staggerContainer = {
|
||||
animate: {
|
||||
transition: { staggerChildren: 0.08, delayChildren: 0.1 }
|
||||
}
|
||||
};
|
||||
|
||||
// Scale pop (modal, tooltip)
|
||||
export const scalePop = {
|
||||
initial: { opacity: 0, scale: 0.92 },
|
||||
animate: { opacity: 1, scale: 1 },
|
||||
exit: { opacity: 0, scale: 0.92 },
|
||||
transition: { type: 'spring', stiffness: 300, damping: 24 }
|
||||
};
|
||||
|
||||
// Slide in dari kiri (sidebar)
|
||||
export const slideInLeft = {
|
||||
initial: { x: -300, opacity: 0 },
|
||||
animate: { x: 0, opacity: 1 },
|
||||
exit: { x: -300, opacity: 0 },
|
||||
transition: { type: 'spring', stiffness: 260, damping: 28 }
|
||||
};
|
||||
```
|
||||
Reference in New Issue
Block a user