From 309dcb48fec9378436880c8e6946f6144bac3866 Mon Sep 17 00:00:00 2001 From: Firman Ramdhani <33869609+firmanramdhani@users.noreply.github.com> Date: Mon, 19 Jan 2026 10:35:39 +0700 Subject: [PATCH] feat: remove unused example components and related tests --- apps/web/src/apps/example/date-example.tsx | 334 ------------------ apps/web/src/apps/example/encryption-demo.tsx | 179 ---------- apps/web/src/apps/index.tsx | 15 - .../src/apps/modules/testing-example/add.ts | 1 - .../app-web-testing-example.test.ts | 11 - .../apps/modules/testing-example/subtract.ts | 1 - packages/ui/src/components/counter.tsx | 5 - .../ui/src/components/testing-example/add.ts | 1 - .../components/testing-example/subtract.ts | 1 - .../ui-testing-example.test.ts | 11 - 10 files changed, 559 deletions(-) delete mode 100644 apps/web/src/apps/example/date-example.tsx delete mode 100644 apps/web/src/apps/example/encryption-demo.tsx delete mode 100644 apps/web/src/apps/modules/testing-example/add.ts delete mode 100644 apps/web/src/apps/modules/testing-example/app-web-testing-example.test.ts delete mode 100644 apps/web/src/apps/modules/testing-example/subtract.ts delete mode 100644 packages/ui/src/components/testing-example/add.ts delete mode 100644 packages/ui/src/components/testing-example/subtract.ts delete mode 100644 packages/ui/src/components/testing-example/ui-testing-example.test.ts diff --git a/apps/web/src/apps/example/date-example.tsx b/apps/web/src/apps/example/date-example.tsx deleted file mode 100644 index bee5a39..0000000 --- a/apps/web/src/apps/example/date-example.tsx +++ /dev/null @@ -1,334 +0,0 @@ -import { DateService } from '@repo/utils'; -import React, { useState, useEffect, useMemo } from 'react'; - -export const DateServiceExample: React.FC = () => { - // --- 0. TIMEZONE CONFIGURATION (ROOT CONTROL) --- - const [currentZone, setCurrentZone] = useState(DateService.getGlobalTimezone()); - - // Ambil list timezone dari helper static yang kita buat sebelumnya - const timezoneList = useMemo(() => DateService.getSupportedTimezones(), []); - - // --- 1. STATE & DATA --- - - // MOCK DATA dipindahkan ke sini & pakai useMemo - // Agar saat timezone ganti, tasks ini di-regenerate dengan waktu "Now" versi timezone baru. - const tasks = useMemo(() => { - return [ - { - id: 1, - title: 'Bayar Server (Lusa)', - dueDate: DateService.now().add(2, 'day').toISOString(), - }, - { - id: 2, - title: 'Laporan Bulanan (Lewat 5 Hari)', - dueDate: DateService.now().subtract(5, 'day').toISOString(), - }, - { - id: 3, - title: 'Meeting Tahunan (Bulan Depan)', - dueDate: DateService.now().add(1, 'month').toISOString(), - }, - { - id: 4, - title: 'Deadline Besok Pagi', - dueDate: DateService.now().add(1, 'day').startOf('day').toISOString(), - }, - ]; - }, [currentZone]); // Dependency: currentZone - - const [currentTime, setCurrentTime] = useState(DateService.now()); - const [selectedDate, setSelectedDate] = useState(DateService.now()); - - // State demo logic calendar - const [calendarTarget, setCalendarTarget] = useState(() => DateService.now().add(1, 'day').startOf('day')); - - // Static date (Memo kosong) -> Akan tetap di Timezone saat pertama kali load (kecuali di-refresh) - // Ini bagus untuk demo bahwa object lama tidak berubah (immutable) kecuali dibuat ulang. - const staticDate = useMemo(() => new DateService(), []); - - // Effect update jam tiap detik - useEffect(() => { - const timer = setInterval(() => { - setCurrentTime(DateService.now()); - }, 1000); - return () => clearInterval(timer); - }, []); - - // --- HANDLER GANTI TIMEZONE --- - const handleZoneChange = (e: React.ChangeEvent) => { - const newZone = e.target.value; - setCurrentZone(newZone); - - // 1. Set Global Config (Inti Perubahan) - DateService.setGlobalConfig(newZone); - - // 2. Force Refresh State agar UI langsung berubah - // Kita buat instance baru agar mengambil config timezone terbaru - setCurrentTime(DateService.now()); - - // Kita recreate selectedDate dengan nilai raw yang sama, tapi context timezone baru - setSelectedDate((prev) => new DateService(prev.getRaw())); - - // Recreate target demo calendar - setCalendarTarget(DateService.now().add(1, 'day').startOf('day')); - }; - - const handleAddDay = (days: number) => { - setSelectedDate((prev) => prev.add(days, 'day')); - }; - - return ( -
- {/* HEADER & TIMEZONE CONTROLLER */} -
-

DateService Feature Showcase

- -
- - -
-
- -
- {/* --- CARD 1: REALTIME CLOCK --- */} -
-
-

Realtime Clock

- -
-
{currentTime.format('HH:mm:ss')}
- -
- {/* UPDATE DI SINI: Gunakan .timezoneAbbr */} -
- {/* Ini akan output "WIB", "WITA", atau "EST" */} - {currentTime.timezoneAbbr} - - {/* Ini offset angka (+07:00) */} - ({currentTime.format('Z')}) -
-
-
- -
{currentTime.format('dddd, DD MMMM YYYY')}
-
-
- ISO (UTC): {currentTime.toISOString()} -
-
- - {/* --- CARD 2: EPOCH & TIMESTAMPS --- */} -
-

Epoch / Timestamp Data

- -
- {/* STATIC SECTION */} -
-
STATIC (Load Once)
-
Captured on mount (keeps original timezone).
-
-
-
Epoch Millis
-
{staticDate.epochMillis}
-
-
-
Epoch Seconds
-
{staticDate.epochSeconds}
-
-
-
- - {/* LIVE SECTION */} -
-
LIVE (Reactive)
-
Updated every second (follows dropdown).
-
-
-
Epoch Millis
-
{new DateService().epochMillis}
-
-
-
Epoch Seconds
-
{new DateService().epochSeconds}
-
-
-
-
-
- - {/* --- CARD 3: CALENDAR LOGIC DEMO --- */} -
-

- 🗓️ Calendar Logic Demo (The "Zero Day" Issue) -

-
-
-

- Compare Current Time vs Tomorrow 00:00. -

-
-
- Now ({currentZone}): - {currentTime.format('HH:mm')} -
-
- Target (Start of Day): - {calendarTarget.format('DD MMM HH:mm')} -
-
-
- -
-
Standard .diff('day')
-
- {calendarTarget.diff(currentTime, 'day')}{' '} - Days -
-

Hasil 0 jika jarak < 24 jam.

-
- -
-
New .diffCalendarDay()
-
- {calendarTarget.diffCalendarDay(currentTime)}{' '} - Days -
-

Hasil 1. Benar secara kalender.

-
-
-
- - {/* --- CARD 4: MANIPULATION --- */} -
-

- Interactive Manipulation -

- -
- - -
- {selectedDate.format('DD MMMM YYYY')} - Selected Date State - Offset: {selectedDate.format('Z')} -
- - -
- -
-
- Precise Diff (Float) - - {selectedDate.diff(currentTime, 'day', true).toFixed(2)} days - -
-
- Calendar Diff (Int) - - {selectedDate.diffCalendarDay(currentTime)} days - -
-
-
-
- - {/* --- CARD 5: TASK LIST (DYNAMIC) --- */} -
-

- Task List Implementation (Timezone Aware) -

- -
- - - - - - - - - - - {tasks.map((task) => { - const dueDate = new DateService(task.dueDate); - const now = DateService.now(); - - const isOverdue = now.isAfter(dueDate); - const daysDiff = dueDate.diffCalendarDay(now); - const isDueSoon = !isOverdue && daysDiff <= 3; - - let statusBadge; - const rowClass = 'border-b border-gray-50 hover:bg-gray-50 transition-colors'; - - if (isOverdue) { - statusBadge = ( - - OVERDUE - - ); - } else if (isDueSoon) { - statusBadge = ( - - DUE SOON - - ); - } else { - statusBadge = ( - - ACTIVE - - ); - } - - return ( - - - - - - - ); - })} - -
Task NameDue DateStatus BadgeCountdown
{task.title} - {dueDate.format('DD MMM YYYY HH:mm')} - {dueDate.format('Z')} - {statusBadge} - {isOverdue ? ( - `${Math.abs(daysDiff)} days late` - ) : daysDiff === 0 ? ( - Today! - ) : ( - `${daysDiff} days left` - )} -
-
-
-
- ); -}; diff --git a/apps/web/src/apps/example/encryption-demo.tsx b/apps/web/src/apps/example/encryption-demo.tsx deleted file mode 100644 index c734eb2..0000000 --- a/apps/web/src/apps/example/encryption-demo.tsx +++ /dev/null @@ -1,179 +0,0 @@ -import { EncryptionService } from '@repo/utils'; -import React, { useState } from 'react'; - -export const EncryptionDemoApps: React.FC = () => { - // --- 1. SETUP INSTANCE --- - // Kita gunakan Singleton agar hemat memory - const cryptoService = EncryptionService.getInstance(); - - // --- 2. STATE --- - const [plainText, setPlainText] = useState(''); - const [encryptedResult, setEncryptedResult] = useState(''); - const [decryptedResult, setDecryptedResult] = useState(''); - - // State untuk demo LocalStorage - const [storageKey] = useState('my_secure_token'); - const [storageValue, setStorageValue] = useState(''); - const [savedStatus, setSavedStatus] = useState(''); - - // --- 3. HANDLERS --- - - const handleEncrypt = () => { - // Panggil method encrypt dari class - const result = cryptoService.encrypt(plainText); - setEncryptedResult(result); - - // Reset decrypt result biar user harus klik decrypt lagi untuk validasi - setDecryptedResult(''); - }; - - const handleDecrypt = () => { - // Panggil method decrypt dari class - const original = cryptoService.decrypt(encryptedResult); - setDecryptedResult(original); - }; - - // --- DEMO LOCALSTORAGE --- - const saveToStorage = () => { - try { - // Encrypt sebelum simpan - const secureData = cryptoService.encrypt(storageValue); - localStorage.setItem(storageKey, secureData); - setSavedStatus(`Saved securely! Cipher: ${secureData.substring(0, 15)}...`); - } catch (error) { - setSavedStatus('Error saving data'); - } - }; - - const loadFromStorage = () => { - try { - const storedData = localStorage.getItem(storageKey); - if (!storedData) { - setSavedStatus('No data found in storage'); - return; - } - // Decrypt setelah ambil - const originalData = cryptoService.decrypt(storedData); - setSavedStatus(`Loaded & Decrypted: "${originalData}"`); - } catch (error) { - setSavedStatus('Failed to decrypt storage data'); - } - }; - - return ( -
-

Encryption Service Demo

- -
- {/* === SECTION 1: INTERACTIVE PLAYGROUND === */} -
-

🔐 Live Playground

- - {/* INPUT */} -
- - setPlainText(e.target.value)} - placeholder="Type sensitive data here..." - className="w-full p-2 border border-slate-300 rounded focus:ring-2 focus:ring-indigo-500 outline-none" - /> -
- - {/* ACTIONS */} -
- - -
- - {/* OUTPUT: ENCRYPTED */} -
- -