From cd0d6d1cba33626031fafbb87cbd240dcd04351c Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Sun, 23 Feb 2025 09:39:18 +1100
Subject: [PATCH 1/5] refactor: rename CSS classes for better namespace
 management

---
 src/components/SingleDatePicker.tsx | 40 ++++++++++-----------
 src/components/SingleWeekPicker.tsx | 50 +++++++++++++-------------
 src/style.scss                      | 56 ++++++++++++++---------------
 3 files changed, 73 insertions(+), 73 deletions(-)

diff --git a/src/components/SingleDatePicker.tsx b/src/components/SingleDatePicker.tsx
index 241cd5c..8f0f5a4 100644
--- a/src/components/SingleDatePicker.tsx
+++ b/src/components/SingleDatePicker.tsx
@@ -219,24 +219,24 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
 	}
 
 	if (selectMonth) return (
-		<div className='datenel-component' role="dialog" aria-label="Date selection panel, you are now at month and year quick-select" id={`__datenel-${uniqueId}`}>
-			<div className='header'>
-				<button className='stepper' onClick={() => {
+		<div className='__datenel_datenel-component' role="dialog" aria-label="Date selection panel, you are now at month and year quick-select" id={`__datenel-${uniqueId}`}>
+			<div className='__datenel_header'>
+				<button className='__datenel_stepper' onClick={() => {
 					if (currentYear <= 100) return
 					setCurrentYear(currentYear - 1)
 				}} aria-label={`Go to last year, ${currentYear - 1}, you are now at year ${currentYear}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg></button>
-				<input className='indicator'
+				<input className='__datenel_indicator'
 					value={currentYear}
 					onChange={e => changeYear(e.target.value)}
 					onBlur={adjustYear}
 					aria-label="Year input, type a year to go to that year"
 				/>
-				<button className='stepper' onClick={() => {
+				<button className='__datenel_stepper' onClick={() => {
 					setCurrentYear(currentYear + 1)
 				}} aria-label={`Go to next year, ${currentYear + 1}, you are now at year ${currentYear}`}> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button>
 			</div>
-			<div className='body'>
-				<div className='month-selector-body'>
+			<div className='__datenel_body'>
+				<div className='__datenel_month-selector-body'>
 					{Array.from({ length: 12 }).map((_, index) => {
 						function calculateNotAvailable() {
 							// When the last day of a month not inside the range of available dates
@@ -248,7 +248,7 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
 							return false
 						}
 						return <button
-							className={`item ${calculateNotAvailable() && 'not-available'}`}
+							className={`__datenel_item ${calculateNotAvailable() && '__datenel_not-available'}`}
 							key={index}
 							onClick={() => {
 								setCurrentMonth(index)
@@ -263,26 +263,26 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
 					})}
 				</div>
 			</div>
-			{!!onClose && <button className='sr-only' onClick={onClose}>Close the panel</button>}
+			{!!onClose && <button className='__datenel_sr-only' onClick={onClose}>Close the panel</button>}
 		</div>
 	)
 	else return (
-		<div className='datenel-component' role="dialog" aria-label="Date selection panel" id={`__datenel-${uniqueId}`}>
-			<div className='header'>
-				<button className='stepper' onClick={skipToLastMonth} aria-label={`Go to last month, ${new Date(currentYear, currentMonth - 1).toLocaleString(localization || navigator.language, { month: 'long' })}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg></button>
-				<button className='indicator' onClick={() => setSelectMonth(true)} aria-label={`You are now at ${new Date(currentYear, currentMonth).toLocaleString(localization || navigator.language, { month: 'long', year: 'numeric' })}. Click here to quick-select month or year.`}>
+		<div className='__datenel_datenel-component' role="dialog" aria-label="Date selection panel" id={`__datenel-${uniqueId}`}>
+			<div className='__datenel_header'>
+				<button className='__datenel_stepper' onClick={skipToLastMonth} aria-label={`Go to last month, ${new Date(currentYear, currentMonth - 1).toLocaleString(localization || navigator.language, { month: 'long' })}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg></button>
+				<button className='__datenel_indicator' onClick={() => setSelectMonth(true)} aria-label={`You are now at ${new Date(currentYear, currentMonth).toLocaleString(localization || navigator.language, { month: 'long', year: 'numeric' })}. Click here to quick-select month or year.`}>
 					{new Date(currentYear, currentMonth).toLocaleString(localization || navigator.language, { month: 'long', year: 'numeric' })}
 				</button>
-				<button className='stepper' onClick={skipToNextMonth} aria-label={`Go to next month, ${new Date(currentYear, currentMonth + 1).toLocaleString(localization || navigator.language, { month: 'long' })}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button>
+				<button className='__datenel_stepper' onClick={skipToNextMonth} aria-label={`Go to next month, ${new Date(currentYear, currentMonth + 1).toLocaleString(localization || navigator.language, { month: 'long' })}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button>
 			</div>
-			<div className='body'>
-				<div className='calendar-view-body grid' aria-live="polite">
-					{l10nDays.map((day, index) => <div className='item day-indicator' key={index}>{day}</div>)}
+			<div className='__datenel_body'>
+				<div className='__datenel_calendar-view-body __datenel_grid' aria-live="polite">
+					{l10nDays.map((day, index) => <div className='__datenel_item __datenel_day-indicator' key={index}>{day}</div>)}
 
 					{dates.map(date => {
 						const notAvailable = (availableRangeStart && date < availableRangeStart) || (availableRangeEnd && date > availableRangeEnd) || currentMonth !== date.getMonth()
 						return <button
-							className={`item date ${notAvailable && 'not-available'} ${selectedDate.toDateString() === date.toDateString() && 'active'}`}
+							className={`__datenel_item __datenel_date ${notAvailable && '__datenel_not-available'} ${selectedDate.toDateString() === date.toDateString() && '__datenel_active'}`}
 							key={date.toISOString()}
 							onClick={() => selectDate(date)}
 							aria-label={`${date.toLocaleString(localization || navigator.language, { dateStyle: 'full' })}${date.toDateString() === new Date().toDateString() ? ", this is today" : ""}, click to select this date`}
@@ -291,12 +291,12 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
 							disabled={notAvailable}
 						>
 							{date.getDate()}
-							{date.toDateString() === new Date().toDateString() && <svg xmlns="http://www.w3.org/2000/svg" className='today-indicator' viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path></svg>}
+							{date.toDateString() === new Date().toDateString() && <svg xmlns="http://www.w3.org/2000/svg" className='__datenel_today-indicator' viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path></svg>}
 						</button>
 					})}
 				</div>
 			</div>
-			{!!onClose && <button className='sr-only' onClick={onClose}>Close the panel</button>}
+			{!!onClose && <button className='__datenel_sr-only' onClick={onClose}>Close the panel</button>}
 		</div>
 	)
 }
diff --git a/src/components/SingleWeekPicker.tsx b/src/components/SingleWeekPicker.tsx
index 95fc141..860191e 100644
--- a/src/components/SingleWeekPicker.tsx
+++ b/src/components/SingleWeekPicker.tsx
@@ -160,25 +160,25 @@ export default ({ localization, mainColor = '#000000', accentColor = '#000000',
 	}
 
 	if (selectMonth) {
-		return <div className='datenel-component' role="dialog" aria-label="Week selection panel, you are now at month and year quick-select" id={`__datenel-${uniqueId}`}>
-			<div className='header'>
-				<button className='stepper' onClick={() => {
+		return <div className='__datenel_datenel-component' role="dialog" aria-label="Week selection panel, you are now at month and year quick-select" id={`__datenel-${uniqueId}`}>
+			<div className='__datenel_header'>
+				<button className='__datenel_stepper' onClick={() => {
 					if (currentYear <= 100) return
 					setCurrentYear(currentYear - 1)
 				}} aria-label={`Go to last year, ${currentYear - 1}, you are now at year ${currentYear}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg></button>
-				<input className='indicator'
+				<input className='__datenel_indicator'
 					value={currentYear}
 					onChange={e => changeYear(e.target.value)}
 					onBlur={adjustYear}
 					aria-label="Year input, type a year to go to that year"
 				/>
-				<button className='stepper' onClick={() => {
+				<button className='__datenel_stepper' onClick={() => {
 					setCurrentYear(currentYear + 1)
 				}} aria-label={`Go to next year, ${currentYear + 1}, you are now at year ${currentYear}`}> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button>
 			</div>
-			<div className='body'>
-				<div className='month-selector-body'>
-					{Array.from({ length: 12 }).map((_, index) => <button className={`item`} key={index} onClick={() => {
+			<div className='__datenel_body'>
+				<div className='__datenel_month-selector-body'>
+					{Array.from({ length: 12 }).map((_, index) => <button className={`__datenel_item`} key={index} onClick={() => {
 						setCurrentMonth(index)
 						setSelectMonth(false)
 					}} aria-label={`Go to ${new Date(currentYear, index).toLocaleString(localization || navigator.language, { month: 'long' })} of the year ${currentYear}`}>
@@ -186,50 +186,50 @@ export default ({ localization, mainColor = '#000000', accentColor = '#000000',
 					</button>)}
 				</div>
 			</div>
-			{!!onClose && <button className='sr-only' onClick={onClose}>Close the panel</button>}
+			{!!onClose && <button className='__datenel_sr-only' onClick={onClose}>Close the panel</button>}
 		</div>
 	} else {
-		return <div className='datenel-component' role="dialog" aria-label="Week selection panel" id={`__datenel-${uniqueId}`}>
+		return <div className='__datenel_datenel-component' role="dialog" aria-label="Week selection panel" id={`__datenel-${uniqueId}`}>
 
-			<div className='header'>
-				<button className='stepper' onClick={skipToLastMonth} aria-label={`Go to last month, ${new Date(currentYear, currentMonth - 1).toLocaleString(localization || navigator.language, { month: 'long' })}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg></button>
-				<button className='indicator' onClick={() => setSelectMonth(true)} aria-label={`You are now at ${new Date(currentYear, currentMonth).toLocaleString(localization || navigator.language, { month: 'long', year: 'numeric' })}. Click here to quick-select month or year.`}>
+			<div className='__datenel_header'>
+				<button className='__datenel_stepper' onClick={skipToLastMonth} aria-label={`Go to last month, ${new Date(currentYear, currentMonth - 1).toLocaleString(localization || navigator.language, { month: 'long' })}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg></button>
+				<button className='__datenel_indicator' onClick={() => setSelectMonth(true)} aria-label={`You are now at ${new Date(currentYear, currentMonth).toLocaleString(localization || navigator.language, { month: 'long', year: 'numeric' })}. Click here to quick-select month or year.`}>
 					{new Date(currentYear, currentMonth).toLocaleString(localization || navigator.language, { month: 'long', year: 'numeric' })}
 				</button>
-				<button className='stepper' onClick={skipToNextMonth} aria-label={`Go to next month, ${new Date(currentYear, currentMonth + 1).toLocaleString(localization || navigator.language, { month: 'long' })}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button>
+				<button className='__datenel_stepper' onClick={skipToNextMonth} aria-label={`Go to next month, ${new Date(currentYear, currentMonth + 1).toLocaleString(localization || navigator.language, { month: 'long' })}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button>
 			</div>
 
-			<div className="body">
-				<div className="week-indicator">
-					<div className="item title">Wk</div>
+			<div className="__datenel_body">
+				<div className="__datenel_week-indicator">
+					<div className="__datenel_item __datenel_title">Wk</div>
 
-					{calendarWeeks.map(week => <div className={`item ${selectedWeek.weekNum === calculateWeekNum(week[0]).weekNum && selectedWeek.weekYear === calculateWeekNum(week[0]).weekYear ? 'active' : ''}`} key={calculateWeekNum(week[0]).weekNum} onClick={() => selectWeek(week[0])}>
+					{calendarWeeks.map(week => <div className={`__datenel_item ${selectedWeek.weekNum === calculateWeekNum(week[0]).weekNum && selectedWeek.weekYear === calculateWeekNum(week[0]).weekYear ? '__datenel_active' : ''}`} key={calculateWeekNum(week[0]).weekNum} onClick={() => selectWeek(week[0])}>
 						{calculateWeekNum(week[0]).weekNum}
 					</div>)}
 
 				</div>
 
-				<div className='calendar-view-body flex' aria-live="polite">
-					<div className="listitem">
-						{Array.from({ length: 7 }).map((_, index) => <div className='item day-indicator' key={index}>{l10nDays[index]}</div>)}
+				<div className='__datenel_calendar-view-body __datenel_flex' aria-live="polite">
+					<div className="__datenel_listitem">
+						{Array.from({ length: 7 }).map((_, index) => <div className='__datenel_item __datenel_day-indicator' key={index}>{l10nDays[index]}</div>)}
 					</div>
 
 					{calendarWeeks.map((week, index) => {
 						const isSelected = selectedWeek.weekYear === calculateWeekNum(week[0]).weekYear && selectedWeek.weekNum === calculateWeekNum(week[0]).weekNum
-						return <button className={`listitem ${isSelected ? 'active' : ''}`} key={index} onClick={() => selectWeek(week[0])} aria-label={`Select week ${calculateWeekNum(week[0]).weekNum} of the year ${calculateWeekNum(week[0]).weekYear}, from ${week[0].toLocaleString(localization || navigator.language, { dateStyle: "full" })} to ${week[6].toLocaleString(localization || navigator.language, { weekday: 'long' })}, ${week[6].toLocaleString(localization || navigator.language, { month: 'long' })} ${week[6].getDate()}, ${week[6].getFullYear()}`}>
+						return <button className={`__datenel_listitem ${isSelected ? '__datenel_active' : ''}`} key={index} onClick={() => selectWeek(week[0])} aria-label={`Select week ${calculateWeekNum(week[0]).weekNum} of the year ${calculateWeekNum(week[0]).weekYear}, from ${week[0].toLocaleString(localization || navigator.language, { dateStyle: "full" })} to ${week[6].toLocaleString(localization || navigator.language, { weekday: 'long' })}, ${week[6].toLocaleString(localization || navigator.language, { month: 'long' })} ${week[6].getDate()}, ${week[6].getFullYear()}`}>
 							{week.map(date => <div
-								className={`item date ${currentMonth !== date.getMonth() && 'extra-month'}`}
+								className={`__datenel_item __datenel_date ${currentMonth !== date.getMonth() && '__datenel_extra-month'}`}
 								key={date.getDate()}
 							>
 								{date.getDate()}
-								{date.toDateString() === new Date().toDateString() && <svg xmlns="http://www.w3.org/2000/svg" className='today-indicator' viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path></svg>}
+								{date.toDateString() === new Date().toDateString() && <svg xmlns="http://www.w3.org/2000/svg" className='__datenel_today-indicator' viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path></svg>}
 							</div>)}
 						</button>
 					})}
 				</div>
 			</div>
 
-			{!!onClose && <button className='sr-only' onClick={onClose}>Close the panel</button>}
+			{!!onClose && <button className='__datenel_sr-only' onClick={onClose}>Close the panel</button>}
 		</div>
 	}
 }
\ No newline at end of file
diff --git a/src/style.scss b/src/style.scss
index c3075f1..73fface 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -1,4 +1,4 @@
-.datenel-component {
+.__datenel_datenel-component {
 	user-select: none;
 	color: var(--datenel-main-color);
 
@@ -13,7 +13,7 @@
 		}
 	}
 
-	button.sr-only {
+	button.__datenel_sr-only {
 		position: absolute;
 		width: 1px;
 		height: 1px;
@@ -24,7 +24,7 @@
 		border: 0;
 	}
 
-	.header {
+	.__datenel_header {
 		padding: 0.75rem;
 		display: flex;
 		justify-content: space-between;
@@ -37,7 +37,7 @@
 				height: 1rem;
 			}
 
-			&.stepper {
+				&.__datenel_stepper {
 				width: 1.75rem;
 				height: 1.75rem;
 				display: flex;
@@ -46,14 +46,14 @@
 				border-radius: 50%;
 			}
 
-			&.indicator {
+				&.__datenel_indicator {
 				padding: 0.25rem 0.5rem;
 				border-radius: 0.25rem;
 				font-size: 0.75rem;
 			}
 		}
 
-		input.indicator {
+		input.__datenel_indicator {
 			border: none;
 			background: none;
 			text-align: center;
@@ -70,49 +70,49 @@
 		}
 	}
 
-	.body {
+	.__datenel_body {
 		display: flex;
-		.calendar-view-body {
+		.__datenel_calendar-view-body {
 			padding: 0.75rem;
 			gap: 0.125rem;
 
-			&.grid {
+			&.__datenel_grid {
 				display: grid;
 				grid-template-columns: repeat(7, 1fr);
 
-				.item.date {
+				.__datenel_item.__datenel_date {
 					border-radius: 50%;
 
-					&.extra-month, &.not-available {
+					&.__datenel_extra-month, &.__datenel_not-available {
 						cursor: default;
 					}
 
-					&.active {
+					&.__datenel_active {
 						background: var(--datenel-accent-color);
 						color: var(--datenel-reversed-color);
 					}
 				}
 			}
 
-			&.flex {
+			&.__datenel_flex {
 				display: flex;
 				flex-direction: column;
 
-				.listitem {
+				.__datenel_listitem {
 					padding: 0;
 					display: grid;
 					grid-template-columns: repeat(7, 1fr);
 					border-radius: 1rem;
 
-					.item.date {
+					.__datenel_item.__datenel_date {
 						background: none;
 					}
 
-					&.active {
+					&.__datenel_active {
 						background: var(--datenel-accent-color);
 						color: var(--datenel-reversed-color);
 
-						.extra-month, .not-available {
+						.__datenel_extra-month, .__datenel_not-available {
 							opacity: 0.5;
 						}
 					}
@@ -120,7 +120,7 @@
 
 			}
 
-			.item {
+			.__datenel_item {
 				width: 2rem;
 				height: 2rem;
 				display: flex;
@@ -129,18 +129,18 @@
 				font-size: 0.75rem;
 				position: relative;
 
-				&.extra-month, &.not-available {
+				&.__datenel_extra-month, &.__datenel_not-available {
 					opacity: 0.3;
 					&:hover {
 						background: none;
 					};
 				}
 
-				&.day-indicator {
+				&.__datenel_day-indicator {
 					opacity: 0.5;
 				}
 
-				.today-indicator {
+				.__datenel_today-indicator {
 					position: absolute;
 					bottom: 0.25rem;
 					width: 0.25rem;
@@ -149,18 +149,18 @@
 			}
 		}
 
-		.month-selector-body {
+		.__datenel_month-selector-body {
 			display: grid;
 			grid-template-columns: repeat(3, 1fr);
 			padding: 0.75rem;
 			gap: 0.125rem;
 
-			.item {
+			.__datenel_item {
 				border-radius: 0.25rem;
 				height: 2rem;
 				padding: 0 0.5rem;
 
-				&.not-available {
+				&.__datenel_not-available {
 					opacity: 0.3;
 					cursor: default;
 					&:hover {
@@ -170,14 +170,14 @@
 			}
 		}
 
-		.week-indicator {
+		.__datenel_week-indicator {
 			display: flex;
 			flex-direction: column;
 			border-right: 1px solid var(--datenel-border-color);
 			gap: 0.125rem;
 			padding: 0.75rem;
 
-			.item {
+			.__datenel_item {
 				font-size: 0.75rem;
 				width: 2rem;
 				height: 2rem;
@@ -187,10 +187,10 @@
 				border-radius: 50%;
 			}
 
-			.item.title {
+			.__datenel_item.__datenel_title {
 				opacity: 0.5;
 			}
-			.item.active {
+			.__datenel_item.__datenel_active {
 				background: var(--datenel-accent-color);
 				color: var(--datenel-reversed-color);
 			}

From 777c7151844dec4122acdee850b34d7318770fda Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Sun, 23 Feb 2025 09:51:49 +1100
Subject: [PATCH 2/5] refactor: improve props description for adding online
 document references

---
 playground/app.tsx                  | 10 +---
 src/components/SingleDatePicker.tsx | 79 ++++++++++++++++++++---------
 2 files changed, 57 insertions(+), 32 deletions(-)

diff --git a/playground/app.tsx b/playground/app.tsx
index ccab5c9..b5bc65a 100644
--- a/playground/app.tsx
+++ b/playground/app.tsx
@@ -6,15 +6,7 @@ export default () => {
 
 	return (<div className='app'>
 		<div className="border">
-			<SingleDatePicker availableRange={[{
-				year: 2025,
-				month: 1,
-				day: 15
-			}, {
-				year: 2025,
-				month: 11,
-				day: 15
-			}]} />
+			<SingleDatePicker />
 		</div>
 	</div>)
 }
\ No newline at end of file
diff --git a/src/components/SingleDatePicker.tsx b/src/components/SingleDatePicker.tsx
index 8f0f5a4..bbd610e 100644
--- a/src/components/SingleDatePicker.tsx
+++ b/src/components/SingleDatePicker.tsx
@@ -3,10 +3,15 @@ import { getCalendarDates, getL10Weekday, generateUniqueId, applyColor } from '.
 
 export interface SingleDatePickerProps {
 	/**
-			* Control the selected
+	 	* Value of the selected date.
+		* 
+		* @description Control the selected
 		* date programmatically, including situations like provide a default value or control the selected 
 		* date by parent component. Use 1-12 for month, instead of 0-11, if you are using object to set the
 		* value.
+		* 
+		* @see {@link https://datenel.js.org/guide/react/components/SingleDatePicker.html#value}
+		* 
 		* @example { year: 2025, month: 1, day: 1 }
 		* @example new Date(2025, 0, 1)
 		* @default new Date()
@@ -14,7 +19,12 @@ export interface SingleDatePickerProps {
 	value?: Date | { year: number, month: number, day: number }
 
 	/**
-	 * A callback function that will be called when a date is selected inside the panel.
+	 * Event handler when a date is selected.
+	 * @description A callback function that will be called when a date is selected inside the panel.
+	 * The returned month and day are 1-12 instead of 0-11.
+	 * 
+	 * @see {@link https://datenel.js.org/guide/react/components/SingleDatePicker.html#onselect-date-void}
+	 * 
 	 * @param {{ year: number, month: number, day: number }} - The date user selected.
 	 * @example { year: 2025, month: 1, day: 1 } // User selected 1 Jan 2025
 	 */
@@ -25,62 +35,82 @@ export interface SingleDatePickerProps {
 	}) => void
 
 	/**
-	 * The language code that will be used to localize the panel.
+	 * Localization
+	 * @description The language code that will be used to localize the panel.
+	 * 
 	 * Accept standard ISO 639-1 language code, such as 'zh-CN', 'en-US', 'ja-JP', etc. Note 
 	 * that it will not effect to the screen reader, but the screen reader will still read the 
 	 * date in the user’s language.
+	 * 
+	 * @see {@link https://datenel.js.org/guide/react/components/SingleDatePicker.html#localization}
 	 * @default navigator.language
 	 */
 	localization?: string
 
 	/**
-	 * User requires to close the panel without select a specific date. Note that the close button is not 
-	 * visible, but can be read by screen reader. The close button for the screen reader is only available
-	 * when this prop is not `undefined`.
+	 * Event handler when the panel is closed.
+	 * @description User requires to close the panel without select a specific date. Note 
+	 * that the close button is not visible, but can be read by screen reader. The close 
+	 * button for the screen reader is only available when this prop is not `undefined`.
+	 * 
+	 * @see {@link https://datenel.js.org/guide/react/components/SingleDatePicker.html#onclose-void}
+	 * 
 	 * @default undefined
 	 */
 	onClose?: () => void
 
 	/**
-	 * The main color of the panel, including the text color and the border color.
-	 *@default '#000000'
+	 * Main color of the panel
+	 * @description The main color of the panel, including the text color and the border color.
+	 * 
+	 * @see {@link https://datenel.js.org/guide/react/components/SingleDatePicker.html#maincolor}
+	 * 
+	 * @default '#000000'
 	 */
 	mainColor?: string
 
 	/**
-	 * The accent color of the panel, including the background color of the selected date.
-	 *@default '#000000'
+	 * Accent color of the panel
+	 * @description The accent color of the panel, including the background color of the selected date.
+	 * @see {@link https://datenel.js.org/guide/react/components/SingleDatePicker.html#accentcolor}
+	 * @default '#000000'
 	 */
 	accentColor?: string
 
 	/**
-	 * The reversed color of the panel, including the text color of the selected date.
-	 *@default '#ffffff'
+	 * Reversed color of the panel
+	 * @description The reversed color of the panel, including the text color of the selected date.
+	 * @see {@link https://datenel.js.org/guide/react/components/SingleDatePicker.html#reversedcolor}
+	 * @default '#ffffff'
 	 */
 	reversedColor?: string
 
 	/**
-	 * The hover color of the panel, including the hover background color of the date.
-	 *@default '#00000017'
+	 * Hover color of the panel
+	 * @description The hover color of the panel, including the hover background color of the date.
+	 * @see {@link https://datenel.js.org/guide/react/components/SingleDatePicker.html#hovercolor}
+	 * @default '#00000017'
 	 */
 	hoverColor?: string
 
 	/**
-	 * The border color of the panel, including the divider color between the header and the body.
-	 *@default '#e0e0e0'
+	 * Border color of the panel
+	 * @description The border color of the panel, including the divider color between the header and the body.
+	 * @see {@link https://datenel.js.org/guide/react/components/SingleDatePicker.html#bordercolor}
+	 * @default '#e0e0e0'
 	 */
 	borderColor?: string
 
 	/**
-	 * Limit a range of dates that can be selected. It should be an array of two dates, which the first
+	 * Available range of dates
+	 * 
+	 * @description Limit a range of dates that can be selected. It should be an array of two dates, which the first
 	 * one is the available range start date, and the second one is the available range end date. 
 	 * 
-	 * If the first one is null, it means that the all dates after the second one is not available. If the second
-	 * one is null, it means that the all dates before the first one is not available. 
-	 * 
-	 * If the first one is behind the second one, Datenel will exchange them automatically.
-	 * 
 	 * The parameter will be ignored if the array length is not 2.
+	 * 
+	 * @see {@link https://datenel.js.org/guide/react/components/SingleDatePicker.html#availablerange}
+	 * 
 	 * @example [new Date(2025, 0, 1), new Date(2025, 11, 31)]
 	 * @example [new Date(2025, 0, 1), null]
 	 * @example [null, new Date(2025, 11, 31)]
@@ -92,10 +122,13 @@ export interface SingleDatePickerProps {
 
 /**
  * SingleDatePicker
- * A panel that allows users to select a date.
+ * @description A panel that allows users to select a date. Check out the online documentation for
+ * interactive examples and more details.
  * 
  * @component
  * 
+ * @see {@link https://datenel.js.org/guide/react/components/SingleDatePicker.html}
+ * 
  * @param {SingleDatePickerProps} props
  */
 const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, localization, onClose, mainColor = '#000000', accentColor = '#000000', reversedColor = '#ffffff', hoverColor = '#00000017', borderColor = '#e0e0e0', availableRange: inputAvailableRange }: SingleDatePickerProps) => {

From 9e52309f0b14fe12047063f5641947098fec59ef Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Sun, 23 Feb 2025 09:58:01 +1100
Subject: [PATCH 3/5] refactor: update SingleWeekPicker component documentation
 and replace SingleDatePicker with SingleWeekPicker

---
 playground/app.tsx                  |  2 +-
 src/components/SingleWeekPicker.tsx | 73 ++++++++++++++++++++---------
 2 files changed, 51 insertions(+), 24 deletions(-)

diff --git a/playground/app.tsx b/playground/app.tsx
index b5bc65a..c4e4102 100644
--- a/playground/app.tsx
+++ b/playground/app.tsx
@@ -6,7 +6,7 @@ export default () => {
 
 	return (<div className='app'>
 		<div className="border">
-			<SingleDatePicker />
+			<SingleWeekPicker />
 		</div>
 	</div>)
 }
\ No newline at end of file
diff --git a/src/components/SingleWeekPicker.tsx b/src/components/SingleWeekPicker.tsx
index 860191e..57f3453 100644
--- a/src/components/SingleWeekPicker.tsx
+++ b/src/components/SingleWeekPicker.tsx
@@ -2,42 +2,59 @@ import { useEffect, useState } from "react"
 import { generateUniqueId, applyColor, getL10Weekday, getCalendarDates, calculateWeekNum } from "../utils"
 
 export interface SingleWeekPickerProps {
-	/**
- * The language code that will be used to localize the panel.
+/**
+ * The localization of the panel.
+ * @description The language code that will be used to localize the panel.
+ * 
  * Accept standard ISO 639-1 language code, such as 'zh-CN', 'en-US', 'ja-JP', etc. Note 
  * that it will not effect to the screen reader, but the screen reader will still read the 
  * date in the user’s language.
+ * 
+ * @see {@link https://datenel.js.org/guide/react/components/SingleWeekPicker.html#localization}
+ * 
  * @default navigator.language
  */
 	localization?: string
 
-	/**
- * The main color of the panel, including the text color and the border color.
- *@default '#000000'
+/**
+ * Main color of the panel
+ * @description The main color of the panel, including the text color and the border color.
+ * 
+ * @see {@link https://datenel.js.org/guide/react/components/SingleWeekPicker.html#maincolor}
+ * 
+ * @default '#000000'
  */
 	mainColor?: string
 
 	/**
-	 * The accent color of the panel, including the background color of the selected date.
-	 *@default '#000000'
+	 * Accent color of the panel
+	 * @description The accent color of the panel, including the background color of the selected date.
+	 * @see {@link https://datenel.js.org/guide/react/components/SingleWeekPicker.html#accentcolor}
+	 * @default '#000000'
 	 */
 	accentColor?: string
 
 	/**
-	 * The reversed color of the panel, including the text color of the selected date.
-	 *@default '#ffffff'
+	 * Reversed color of the panel
+	 * @description The reversed color of the panel, including the text color of the selected date.
+	 * @see {@link https://datenel.js.org/guide/react/components/SingleWeekPicker.html#reversedcolor}
+	 * @default '#ffffff'
 	 */
 	reversedColor?: string
 
 	/**
-	 * The hover color of the panel, including the hover background color of the date.
+	 * Hover color of the panel
+	 * @description The hover color of the panel, including the hover background color of the date.
+	 * @see {@link https://datenel.js.org/guide/react/components/SingleWeekPicker.html#hovercolor}
 	 *@default '#00000017'
 	 */
 	hoverColor?: string
 
 	/**
-	 * The border color of the panel, including the divider color between the header and the body.
-	 *@default '#e0e0e0'
+	 * Border color of the panel
+	 * @description The border color of the panel, including the divider color between the header and the body.
+	 * @see {@link https://datenel.js.org/guide/react/components/SingleWeekPicker.html#bordercolor}
+	 * @default '#e0e0e0'
 	 */
 	borderColor?: string
 
@@ -45,8 +62,11 @@ export interface SingleWeekPickerProps {
 	 * A callback function that will be called when a week is selected inside the panel. Note that
 	 * Datenel will follow the ISO 8601 standard to calculate the week number, which means that the first
 	 * week of the year is the week with the first Friday in it (week started from Monday).
-	 * @param {{ year: number, month: number, day: number }} - The date user selected.
-	 * @example { year: 2025, month: 1, day: 1 } // User selected 1 Jan 2025
+	 * 
+	 * @see {@link https://datenel.js.org/guide/react/components/SingleWeekPicker.html#onselect-week-void}
+	 * 
+	 * @param {{ weekYear: number, weekNum: number }} - The week user selected.
+	 * @example { weekYear: 2025, weekNum: 1 } // User selected the first week of 2025
 	 */
 	onSelect?: (date: {
 		weekYear: number,
@@ -54,18 +74,23 @@ export interface SingleWeekPickerProps {
 	}) => void
 
 	/**
-	 * User requires to close the panel without select a specific date. Note that the close button is not 
-	 * visible, but can be read by screen reader. The close button for the screen reader is only available
-	 * when this prop is not `undefined`.
+	 * Event handler when the panel is closed.
+	 * @description User requires to close the panel without select a specific date. Note 
+	 * that the close button is not visible, but can be read by screen reader. The close 
+	 * button for the screen reader is only available when this prop is not `undefined`.
+	 * 
+	 * @see {@link https://datenel.js.org/guide/react/components/SingleWeekPicker.html#onclose-void}
+	 * 
 	 * @default undefined
 	 */
 	onClose?: () => void
 
 	/**
-		* Control the selected
-		* date programmatically, including situations like provide a default value or control the selected 
-		* date by parent component. When using the Date object, the week number related to the date will be
-		* applied to the panel.
+	 	* Value of the panel
+		* @description Control the selected week programmatically, including situations like provide a 
+		* default value or control the selected week by parent component. When using the Date object, 
+		* the week number related to the date will be applied to the panel.
+		* @see {@link https://datenel.js.org/guide/react/components/SingleWeekPicker.html#value}
 		* @example { weekYear: 2025, weekNum: 1 }
 		* @example new Date(2025, 0, 1)
 		* @default new Date()
@@ -75,11 +100,13 @@ export interface SingleWeekPickerProps {
 
 /**
  * SingleWeekPicker
- * A panel that allows users to select a week.
+ * @description A panel that allows users to select a week.
  * 
  * @component
  * 
- * @param 
+ * @see {@link https://datenel.js.org/guide/react/components/SingleWeekPicker.html}
+ * 
+ * @param {SingleWeekPickerProps} props
  */
 export default ({ localization, mainColor = '#000000', accentColor = '#000000', reversedColor = '#ffffff', hoverColor = '#00000017', borderColor = '#e0e0e0', onClose, onSelect, value }: SingleWeekPickerProps) => {
 	const [currentMonth, setCurrentMonth] = useState(new Date().getMonth())

From 7a43085c6f486a2fcad8656c463bd017aa851ba8 Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Sun, 23 Feb 2025 10:00:43 +1100
Subject: [PATCH 4/5] refactor: simplify example usage of SingleDatePicker in
 README.md

---
 README.md | 25 ++++++++++---------------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index eccc540..f2cb07b 100644
--- a/README.md
+++ b/README.md
@@ -33,7 +33,6 @@ yarn add datenel-react # Use yarn
 Here is an example of how to use Datenel in your React application:
 
 ```tsx
-import React from 'react'
 import { SingleDatePicker } from 'datenel-react'
 
 export default () => {
@@ -41,23 +40,19 @@ export default () => {
     alert(`You selected ${value.year}-${value-month}-${value.day}`)
   }
 
-  return (
-    <div className='app'>
-      <div className="border">
-        <SingleDatePicker 
-          value={{
-            year: 2025,
-            month: 1,
-            day: 1
-          }}
-          onSelect={onSelect}
-        />
-      </div>
-    </div>
-  )
+  return <SingleDatePicker 
+    value={{
+      year: 2025,
+      month: 1,
+      day: 1
+    }}
+    onSelect={onSelect}
+  />
 }
 ```
 
+For more information and live demo, refer to [Datenel’s documentation](https://datenel.js.org/guide/react/gettingstart.html).
+
 ## Supported Components & Props
 
 - [x] SingleDatePicker

From c49e80dd37e747e0f47f9206311d57df36f5979d Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Sun, 23 Feb 2025 10:00:57 +1100
Subject: [PATCH 5/5] 0.1.2

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 95bc90e..375de94 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "datenel-react",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "datenel-react",
-      "version": "0.1.1",
+      "version": "0.1.2",
       "devDependencies": {
         "@eslint/js": "^9.19.0",
         "@types/node": "^22.13.4",
diff --git a/package.json b/package.json
index 18979e6..7ec9e0c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "datenel-react",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "scripts": {
     "dev": "vite",
     "build": "vite build",